Wobble Card

Colored card that drifts toward the pointer, with parallax content and grain.

Launch week

Each branch gets its own URL, so reviewers click instead of cloning.

Installation

pnpm dlx shadcn@latest add https://velora.colorlib.com/r/wobble-card.json

Adds components/velora/wobble-card.tsx, installs motion.

Three WobbleCards of different spans and colors forming a feature grid.

Error rates spike, traffic shifts back to the last good build — before anyone is paged.

Static assets are served from 300+ cities.

Hobby projects stay free forever.

Prop	Type	Default
`strength` Furthest the card shifts toward the pointer, in px	`number`	`10`
`depth` How much further the content moves than the card (parallax), as a multiple	`number`	`0.6`
`grain` Show the film-grain texture	`boolean`	`true`
`contentClassName` Classes for the inner content wrapper (padding lives here)	`string`	`—`

Also accepts every <div> attribute, forwarded to the root element.

Reduced motion: The card and its content stay put when the pointer moves over them, and the focus lift is replaced by a stronger shadow alone.
Keyboard: The card itself is not focusable; when a link or button inside it has keyboard focus the card lifts slightly and its shadow deepens.
Screen readers: Only the children are read; the grain overlay is aria-hidden.