127+ Primitives
Grid Card
CardsInteractive feature card and section featuring a top-right flickering canvas grid corner accent with diagonal mask fading, spring hover physics, icon scale/rotation variants, and dynamic hover-accelerated flicker rates.
CanvasFramer MotionHover VariantsA11y Ready
Everything you need to ship faster
Hover cards to accelerate corner flickering grid rates from 0.1 to 0.6.
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/grid-card.json"
Props
TypeScript props supported by <GridCard />.
| Prop | Type | Default | Description |
|---|---|---|---|
| icon | React.ReactNode | undefined | Icon element rendered in the soft-bordered top container. |
| title | string | undefined | Main feature card title. |
| description | string | undefined | Explanatory descriptive text. |
| href | string | undefined | Optional target link destination rendering the card as an interactive link. |
| gridColor | string | "currentColor" | Color string for the flickering grid corner squares. |
| squareSize | number | 3 | Dimension of each square cell in the flickering grid. |
| gridGap | number | 5 | Spacing between adjacent grid squares in pixels. |
| restFlickerChance | number | 0.1 | Flickering rate when card is at rest. |
| hoverFlickerChance | number | 0.6 | Flickering rate when card is hovered. |
| className | string | undefined | Additional Tailwind CSS classes merged into the card. |
Key Features
- Top-right diagonal corner accent powered by FlickeringGrid with linear-gradient alpha mask clipping.
- Interactive hover physics: on hover, flickerChance ramps up from 0.1 to 0.6 and maxOpacity increases from 0.15 to 0.4.
- Parent-child hover variant system: icon container scales to 1.1 with slight rotation while link arrow shifts 4px to the right.
- Responsive FeatureSection layout: 1 column on mobile, 2 on md, 3 on lg with staggerChildren entrance animations.
- Accessible link semantics: renders as an accessible interactive card when href is provided, complete with focus-visible rings.
Keyboard & Accessibility
- Decorative canvas marked pointer-events-none and aria-hidden='true'.
- Keyboard accessible with focus-visible ring when href is supplied.
- Respects prefers-reduced-motion media query by bypassing spring transforms.