Skip to content
Pinky UI

Tilt Card

A rigid card that turns to face the pointer.

  • cards
  • depth
  • glow
  • 3d
  • perspective
  • parallax
  • glare
Field notes / 01

Solid, not loud.

A rigid surface catches light without moving the reading.

Vol. 1

Quick usage

usage
import { TiltCard } from "@pinky-ui/components";

<TiltCard max={4} glare foreground={<Badge />}>
  <Cover />
</TiltCard>

Presets

Subtle

Just enough to catch the light.

max={2.5} parallax={0.3}

Soft

The default.

max={4} parallax={0.6}

Playful

A single showcase card.

max={7} parallax={1}

Install

Add @pinky-ui/components as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/components

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Props

PropTypeDefaultDescription
foregroundReactNode—Content that floats above the face on its own parallax layer.
maxnumber4Maximum rotation per axis, in degrees.
glarebooleantrueSpecular highlight that follows the pointer.
parallaxnumber0.6How far the foreground separates from the face.
radius"lg" | "xl" | "2xl""xl"Corner radius from the shape scale.

Accessibility

  • Transform-only, so surrounding layout never shifts.
  • The glare and parallax layers are decorative and non-interactive.
  • Skipped entirely for touch input.
  • Keep rotation low: large tilts make body text genuinely harder to read.

Reduced motion

With prefers-reduced-motion: reduce, the card stays flat and the glare is not rendered.

When to use

  • Media covers, album art, product shots
  • Cards with a badge or title that benefits from separation
  • One showcase surface in a section

When not to use

  • Text-heavy cards
  • Grids where several would tilt at once
  • Small cards, where the rotation reads as a wobble

Playground

Mira Odaka

Interaction designer

Drag your pointer across this card and watch how the parameters change its character.

0.35
0.18
1.02
Radius
generated
<JellyCard
  elasticity={0.35}
  intensity={0.18}
  hoverScale={1.02}
  radius="xl"
>
  <ProfileCard />
</JellyCard>