Magic Transform

Documents fly in and come out as colorful results

magic-transform-tw

Customize

Height

560

Paused

Duration (s)

4.0

Width

220

Height

320

Gap

Particles

Center size

Axis

Props

Name	Type	Default	Description
`documents`	MagicTransformDocument[]	`4 procedural docs`	Documents that scroll through the transformer
`results`	MagicTransformResult[]	`5 result types`	Result chips emitted on the right (email, total, address, order, item lines)
`height`	number \| string	`560`	Total height of the stage
`width`	number \| string	`"100%"`	Total width of the stage
`documentDuration`	number	`4`	The "beat" of the transformer in seconds. One document slides in and gets shredded every `documentDuration` seconds; each beat triggers one chip + particle burst.
`documentWidth`	number	`220`	Width of a single document card, in px (160–300)
`documentHeight`	number	`320`	Height of a single document card, in px (220–420)
`documentGap`	number	`60`	Visible gap between adjacent documents in the stream, in px. The loop stays seamless at any value.
`particleCount`	number	`18`	Number of confetti particles emitted from the axis (0–48)
`centerSize`	number	`56`	Pixel size of the center tile on the axis (40–120)
`axisColor`	string	`"#7C3AED"`	Color of the central transform axis and center tile glow
`backgroundColor`	string	`transparent`	Background of the stage (any CSS background value)
`centerContent`	ReactNode	`React Bits Pro logo`	Custom node rendered in the center tile on the axis
`paused`	boolean	`false`	Pause all animations
`classNames`	MagicTransformClassNames	`{}`	Granular class overrides: root, document, axis, center, result, resultBody, particle
`className`	string	`""`	Optional className applied to the root
`style`	CSSProperties	`undefined`	Optional inline style applied to the root

documentsMagicTransformDocument[]

Documents that scroll through the transformer

Default4 procedural docs

resultsMagicTransformResult[]

Result chips emitted on the right (email, total, address, order, item lines)

Default5 result types

heightnumber | string

Total height of the stage

Default560

widthnumber | string

Total width of the stage

Default"100%"

documentDurationnumber

The "beat" of the transformer in seconds. One document slides in and gets shredded every `documentDuration` seconds; each beat triggers one chip + particle burst.

Default4

documentWidthnumber

Width of a single document card, in px (160–300)

Default220

documentHeightnumber

Height of a single document card, in px (220–420)

Default320

documentGapnumber

Visible gap between adjacent documents in the stream, in px. The loop stays seamless at any value.

Default60

particleCountnumber

Number of confetti particles emitted from the axis (0–48)

Default18

centerSizenumber

Pixel size of the center tile on the axis (40–120)

Default56

axisColorstring

Color of the central transform axis and center tile glow

Default"#7C3AED"

backgroundColorstring

Background of the stage (any CSS background value)

Defaulttransparent

centerContentReactNode

Custom node rendered in the center tile on the axis

DefaultReact Bits Pro logo

pausedboolean

Pause all animations

Defaultfalse

classNamesMagicTransformClassNames

Granular class overrides: root, document, axis, center, result, resultBody, particle

Default{}

classNamestring

Optional className applied to the root

Default""

styleCSSProperties

Optional inline style applied to the root

Defaultundefined