Tactile Zipper Card
A premium interactive card featuring a magnetic draggable zipper that unzips a glassmorphic front cover using dynamic clip paths to reveal a glowing 3D core.
Component Showcase
Interactive Playground
Adjust sliders and values to preview changes in real-time
titleSECURE PAYLOAD
The title shown on the front flaps of the card.
subtitlePULL TO DECRYPT
The subtitle text on the front flaps.
glowColor#7fff5e
The neon glow color of the revealed inner core.
accentColor#ff5c71
The color of the zipper connection spark.
API Reference (Props)
Component properties and type specifications
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "SECURE PAYLOAD" | The title shown on the front flaps of the card. |
| subtitle | string | "PULL TO DECRYPT" | The subtitle text on the front flaps. |
| glowColor | string | "#7fff5e" | The neon glow color of the revealed inner core. |
| accentColor | string | "#ff5c71" | The color of the zipper connection spark. |