Magic Transform

Documents fly in and come out as colorful results

magic-transform-tw

Customize

Tweak the props live

Stage

Height560

Paused

Documents

Duration (s)4

Width220

Height320

Gap60

Output

Particles18

Center size56

Color

Axis

#7C3AED

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

Default:4 procedural docs

resultsMagicTransformResult[]

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

Default:5 result types

heightnumber | string

Total height of the stage

Default:560

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.

Default:4

documentWidthnumber

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

Default:220

documentHeightnumber

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

Default:320

documentGapnumber

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

Default:60

particleCountnumber

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

Default:18

centerSizenumber

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

Default:56

axisColorstring

Color of the central transform axis and center tile glow

Default:"#7C3AED"

backgroundColorstring

Background of the stage (any CSS background value)

Default:transparent

centerContentReactNode

Custom node rendered in the center tile on the axis

Default:React Bits Pro logo

pausedboolean

Pause all animations

Default:false

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

Default:undefined