Documents fly in and come out as colorful results
| 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
4 procedural docsresultsMagicTransformResult[]Result chips emitted on the right (email, total, address, order, item lines)
5 result typesheightnumber | stringTotal height of the stage
560widthnumber | stringTotal width of the stage
"100%"documentDurationnumberThe "beat" of the transformer in seconds. One document slides in and gets shredded every `documentDuration` seconds; each beat triggers one chip + particle burst.
4documentWidthnumberWidth of a single document card, in px (160–300)
220documentHeightnumberHeight of a single document card, in px (220–420)
320documentGapnumberVisible gap between adjacent documents in the stream, in px. The loop stays seamless at any value.
60particleCountnumberNumber of confetti particles emitted from the axis (0–48)
18centerSizenumberPixel size of the center tile on the axis (40–120)
56axisColorstringColor of the central transform axis and center tile glow
"#7C3AED"backgroundColorstringBackground of the stage (any CSS background value)
transparentcenterContentReactNodeCustom node rendered in the center tile on the axis
React Bits Pro logopausedbooleanPause all animations
falseclassNamesMagicTransformClassNamesGranular class overrides: root, document, axis, center, result, resultBody, particle
{}classNamestringOptional className applied to the root
""styleCSSPropertiesOptional inline style applied to the root
undefined