Tilt Card React Component

LIVE PREVIEWInteract with the component

Just React. No extra dependencies.

Copy the component and its CSS module into your project.

CSS Modules

Usage

Matches your current playground settings.

import TiltCard from "./TiltCard";

export default function Example() {
  return (
    <TiltCard
      children={"Beyond the flat."}
      maxTilt={16}
      glare={0.25}
      background={"radial-gradient(ellipse at 90% 5%, #dabdf67a, transparent 60%), linear-gradient(135deg, #383344, #17141e)"}
      borderRadius={22}
      minHeight={290}
      style={{
        "fontSize": "clamp(2rem, 4vw, 3.5rem)",
        "fontWeight": 500,
        "letterSpacing": "-.05em",
        "display": "grid",
        "alignItems": "end"
      }}
    />
  );
}

Using Tilt Card

Place your card content in children and use minHeight to reserve enough space for it. maxTilt controls the pointer-driven angle.

Use glare to tune the reflection and borderRadius to match the card's shape. Leave room around the card for the tilt.

Props

Name	Type	Required	Default	Description
children	ReactNode	No	undefined	Card contents. Text, media and actions are supplied by the caller.
maxTilt	number	No	12	Total pointer rotation range in degrees.
glare	number	No	.22	Maximum reflection opacity from 0 to 1.
background	string	No	"#252232"	Any CSS background value.
borderRadius	number	No	22	Corner radius in pixels.
minHeight	number \| string	No	260	Minimum height in pixels or a CSS length. The component can fill a taller parent.
className	string	No	""	Additional CSS classes, merged with the component styles.
style	CSSProperties	No	undefined	Inline styles for caller-defined sizing and visual overrides.