Card Tilt

Motion

A card that tilts in 3D toward the pointer on springs, with an accent glare that follows the cursor. It stays flat when reduced motion is preferred.

src/registry/premium/card-tilt.tsx/r/card-tilt.json

Featured

Crafted details

Tilt responds to pointer. Reduced motion stays flat.

Tilt

Installation#

bash

npx shadcn@latest add @minidev/card-tilt

MiniDev UI is in the shadcn registry directory, so the short form works with no setup. Older CLI versions can use the full URL: npx shadcn@latest add https://ui.minidev.pro/r/card-tilt.json

Usage#

tsx

import { CardTilt } from "@/components/ui/card-tilt"

export function Example() {
  return (
    <CardTilt />
  )
}

API reference#

CardTilt props
Prop	Type	Default
`title`	`string`	`"Crafted details"`
`body`	`string`	`"Tilt responds to pointer. Reduced mo...`
`className`	`string`	`-`

Dependencies#

npm

motion

Built from

No other MiniDev files

Examples#

MotionKinetic type, sticky story, magnetic CTA

Animated Feature RowA row of feature cards that slide up with a staggered delay when scrolled into view. Pass title and description pairs; reduced motion keeps them still.Cursor Spotlight PanelA panel whose accent radial spotlight follows the cursor, driven by Framer Motion values without re-renders. It shows a still surface for reduced motion.Device Frame StackThree device frames labelled mobile, app and docs that spring into a fanned, rotated stack when scrolled into view. Works as a hero or feature visual.Flip Stat BoardA stat board where each number counts up with digits that flip in on a spring once in view. Pass values and labels; reduced motion shows the final value.Grid RevealA grid of labelled tiles that slide up in quick succession as the section scrolls into view. Pass any list of strings; it honors reduced motion.Horizontal Product RailA horizontally scrolling rail of tagged product cards that slide in and lift on hover. The rail is a focusable, labelled region for keyboard scrolling.

All Animated React components