Shatter-on-Hover Card
A premium glassmorphic enclosure that violently shatters into 3D floating shards on hover, revealing a cybernetic glowing core inside.
Component Showcase
Interactive Playground
Adjust sliders and values to preview changes in real-time
titleSHATTER CORE
The main title displayed on the outer shell.
subtitleLOCKED ENCLOSURE
The subtitle displayed on the outer shell.
revealTitleSYSTEM EXPOSED
The title revealed on the inner core.
revealTextINTERNAL MECHANISMS ONLINE.
The text description revealed on the inner core.
primaryColor#ff5c71
The primary neon color used for the core glow and highlights.
accentColor#7fff5e
The secondary accent color used for secondary highlights.
API Reference (Props)
Component properties and type specifications
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "SHATTER CORE" | The main title displayed on the outer shell. |
| subtitle | string | "LOCKED ENCLOSURE" | The subtitle displayed on the outer shell. |
| revealTitle | string | "SYSTEM EXPOSED" | The title revealed on the inner core. |
| revealText | string | "INTERNAL MECHANISMS ONLINE." | The text description revealed on the inner core. |
| primaryColor | string | "#ff5c71" | The primary neon color used for the core glow and highlights. |
| accentColor | string | "#7fff5e" | The secondary accent color used for secondary highlights. |