Animations & Motion
Folding Brochure
3D folding brochure with backface visibility and page flip animation.
3dtransformfoldbrochureflip
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
imageUrl | string | https://images.unsplash.com/photo-1633596683562-4a47eb4983c5?q=80&w=2664&auto=format&fit=crop | Image URL for the brochure |
coverTitle | string | CLICK | Title text on the cover |
coverSubtitle | string | To Reveal The Dimensions | Subtitle text on the cover |
insideTitle | string | Architectural | Title text on the inside |
insideDescription | string | Constructing interfaces with depth allows for greater information density without clutter. | Description text on the inside |
statusText | string | System Status: Active | Status text displayed |
backgroundColor | string | bg-zinc-950 | Background color of the component |
perspective | string | perspective-[1500px] | CSS perspective value for 3D effect |
brochureWidth | string | w-[600px] | Width of the brochure |
brochureHeight | string | h-[400px] | Height of the brochure |
panelWidth | string | w-[300px] | Width of each panel |
animationDuration | number | 0.8 | Animation duration in seconds |
animationBounce | number | 0.2 | Animation bounce value |
className | string | Additional CSS classes |