Tilt Card

A product card that tilts toward the pointer, with an image zoom and space for product notes.

Dependencies: motion
Size: 151 lines
Controls: 7 controls

example.tsx

1import { TiltCard } from "@/components/onycx/tilt-card";23export default function Example() {4  return (5    <TiltCard6      title={"Zeta"}7      tagline={"Amber power, cut in gold."}8      tag={"Men"}9      family={"Amber Woody"}10      maxTilt={2}11      glow={"#b56a22"}12      accent={"#c8ae80"}13    />14  );15}

Installation

CLI · shadcn registry

npx shadcn@latest add https://ui.onycx.dev/r/tilt-card.json

1 · Dependencies

npm install motion

2 · Copy the source

components/onycx/tilt-card.tsx

Requires React 19 and Tailwind CSS v4. Copy the source from the tilt-card.tsx tab after tweaking: your values are baked in as the new defaults. Exported image examples use portable sample artwork. Replace it with your own media as needed.

Props

Prop	Type	Default	Description
image / imageAlt	string	"/media/fragrance-showcase/zeta1.webp"	4:5 photograph and its alt text. The default points to /media/...; replace it with your own image.
title / tagline	string	"Zeta" / "Amber power, cut in gold."	Serif title and the italic gold line.
tag / index	string	"Men" / "01"	Mono labels on the image corners; empty hides them.
tags	string[]	["Amber", "Wood", "Intense"]	Hairline chips.
family / ctaLabel	string	"Amber Woody" / "View"	Footer row above a gold/10 rule.
href	string	—	Renders the card as one link labelled 'title — tagline'.
maxTilt	number	2	Largest rotation in degrees at the card's edges.
glow / accent	string	"#b56a22" / "#c8ae80"	Hover glow colour (drawn at 20%) and the gold for tagline, link and hover border.

Behaviour notes

The tilt follows the mouse only; touch and keyboard users get the still card, and reduced motion removes the tilt entirely.
The card is max 420px wide and fills narrower containers; the title overlaps the photograph by 56px as in the original.
With href the whole card is a single link with a gold focus outline.

Pattern origin

The fragrance house template's FragranceCard: ±2° rotateX/rotateY from the pointer through springs (stiffness 150, damping 18) at transformPerspective 1000; a 160° onycx card with a gold/12 hairline that turns gold/40 on hover; a 4:5 photograph scaling to 1.05 over 700ms under a bottom fade; a radial glow in the fragrance colour at 20%; a 36px serif title overlapping the image by 56px; an italic gold tagline, .6rem chips at .18em and a gold 'View →' that nudges 4px.

#card#3d#tilt#hover#glow#product