Reveal Card Grid
CardsInteractive feature card grid with dynamic circular ink reveals that expand from the pointer entry coordinates to display vivid marbled fluid textures.
Edge Infrastructure
Hover anywhere on any card to see fluid ink expand from the exact entry point.
Instant deploys
Push to main and it's live worldwide before the kettle boils.
Edge functions
Run code a few milliseconds from every visitor, not an ocean away.
Design tokens
One source of colour, type and spacing that every surface reads from.
Global CDN
Assets cached in hundreds of cities and purged in under a second.
Media pipeline
Images and video resized, compressed and served in the right format.
Preview links
Every branch gets its own URL, so reviews happen on the real thing.
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Props
TypeScript props supported by <RevealCardGrid />.
| Prop | Type | Default | Description |
|---|---|---|---|
| items | RevealCardItem[] | DEFAULT_REVEAL_ITEMS | Array of feature card data objects with titles, descriptions, icons, and accent colors. |
| title | string | undefined | Optional section header title rendered above the card grid. |
| subtitle | string | undefined | Optional section descriptive subtitle rendered beneath the header title. |
| className | string | undefined | Additional Tailwind CSS classes merged onto the outer grid section. |
Key Features
- Dynamic circular clip-path tracking exact pointer entry coordinates and expanding to corner radius (Math.hypot).
- Smooth directional retraction draining ink back toward the exact boundary point where the cursor leaves.
- Procedural SVG marbled liquid textures with feTurbulence fractal noise displacement across 6 color palettes.
- High-contrast text illumination cross-fading from muted grey to crisp white with dark gradient backing.
- Full keyboard accessibility expanding ink from card center on focus, and touch-tap toggling.
Keyboard & Accessibility
- Semantic ul and li grid markup with h3 headings and descriptive aria-labels.
- Keyboard navigable with visible focus ring and center-origin animation triggers.
- Honors prefers-reduced-motion by replacing clip-path calculations with smooth 200ms opacity fades.