Kinetic Shatter Card
A premium glassmorphic enclosure that violently shatters into 3D floating shards on hover, revealing a cybernetic glowing core inside.
Component Showcase
Kinetic Shatter Card
A premium glassmorphic enclosure that violently shatters into 3D floating shards on hover, revealing a cybernetic glowing core inside.
Framer Motion3DInteractiveShatterCyber
Interactive Playground
Adjust sliders and values to preview changes in real-time
title
The main title displayed on the outer shell.
subtitle
The subtitle displayed on the outer shell.
revealTitle
The title revealed on the inner core.
revealText
The text description revealed on the inner core.
primaryColor
The primary neon color used for the core glow and highlights.
accentColor
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. |