Chromatic Slice Card
A Gen-Z premium card that dynamically slices into floating horizontal strips in 3D space on hover, revealing a neon core.
Component Showcase
Interactive Playground
Adjust sliders and values to preview changes in real-time
titleVOID
The main title displayed on the card slices.
subtitleSYSTEM OVERRIDE
The subtitle or eyebrow text.
slices5
Number of horizontal slices the card breaks into.
glowColor#7fff5e
Color of the exposed core and internal grid.
accentColor#ff5c71
Color of the subtitle text.
API Reference (Props)
Component properties and type specifications
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | VOID | The main title displayed on the card slices. |
| subtitle | string | SYSTEM OVERRIDE | The subtitle or eyebrow text. |
| slices | number | 5 | Number of horizontal slices the card breaks into. |
| glowColor | string | #7fff5e | Color of the exposed core and internal grid. |
| accentColor | string | #ff5c71 | Color of the subtitle text. |