# Tilt Card: Feature Grid

> A grid of subtle tiles with a gentler tilt and no glare.

A shadcn/ui block from the [@keyframeui](https://keyframeui.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/keyframeui/tilt-card-feature-grid-demo).

- Page, with a live preview: https://shadcn.exchange/r/keyframeui/tilt-card-feature-grid-demo
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/keyframeui/tilt-card-feature-grid-demo-light-e8ee9d2e34d0c2a4.png
- Registry item: https://keyframeui.com/r/tilt-card-feature-grid-demo.json
- Categories: card, interaction, 3d
- Listed: 2026-10-14, source last changed 2026-10-15

## Install

```bash
npx shadcn@latest add https://keyframeui.com/r/tilt-card-feature-grid-demo.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `https://keyframeui.com/r/tilt-card.json`

## Notes from the registry

Live preview, examples and props: https://keyframeui.com/components/tilt-card#tilt-card-feature-grid-demo

## Files

### `registry/demos/tilt-card-feature-grid-demo.tsx`

```tsx
import { TiltCard } from "@/components/ui/tilt-card";

const features = [
  { index: "01", title: "Pointer aware", body: "Rotation follows the cursor across the whole card." },
  { index: "02", title: "No re-renders", body: "Position is written to CSS variables, not React state." },
  { index: "03", title: "Reduced motion", body: "Tilt is skipped for people who ask for less movement." },
  { index: "04", title: "Fully themable", body: "Plain Tailwind classes. Bring your own colors." },
];

export function TiltCardFeatureGridDemo() {
  return (
    <div className="w-full max-w-3xl">
      <p className="font-mono text-xs uppercase tracking-widest text-zinc-500">
        Built for interaction
      </p>
      <h3 className="mt-3 max-w-md text-3xl font-semibold tracking-tight text-zinc-900 dark:text-zinc-50">
        One card, four small details
      </h3>
      <div className="mt-8 grid gap-4 sm:grid-cols-2">
        {features.map((feature) => (
          <TiltCard
            key={feature.index}
            glare={false}
            maxTilt={5}
            scale={1.015}
            className="border border-zinc-200 bg-zinc-50 p-5 dark:border-zinc-800 dark:bg-zinc-900/60"
          >
            <p className="font-mono text-xs text-zinc-500">{feature.index}</p>
            <h4 className="mt-6 font-medium text-zinc-900 dark:text-zinc-50">
              {feature.title}
            </h4>
            <p className="mt-1 text-sm text-zinc-600 dark:text-zinc-400">
              {feature.body}
            </p>
          </TiltCard>
        ))}
      </div>
    </div>
  );
}
```