Tilt Card

March 8, 2026

A card with 3D spring tilt, optional floating image, badge and radial shine on hover.

Installation

File Structure

clipped-circle.tsx

tilt-card.tsx

tilt.tsx

Usage

import { TiltCard } from "@/components/unlumen-ui/tilt-card";

<TiltCard
  title="Starter Kit"
  description="Everything you need to ship fast."
  price="Free"
  badgeLabel="Popular"
  imageSrc="/preview.png"
  href="/templates/starter"
/>;

Custom children

Content passed as children is rendered below the description — useful for feature lists, CTAs, or meta info.

<TiltCard
  title="Pro"
  price="$49"
  badgeLabel="Best value"
  badgeVariant="warning"
>
  <ul className="text-sm text-muted-foreground space-y-1">
    <li>✓ Unlimited projects</li>
    <li>✓ Priority support</li>
  </ul>
</TiltCard>

API Reference

TiltCard

Prop	Type	Default	Description
`title`	`string`	-	Card heading.
`description?`	`string`	-	Subtitle text.
`price?`	`string`	-	Price label — shown as the left half of the split badge pill.
`badgeLabel?`	`string`	-	Secondary badge label (right half of the split pill).
`badgeVariant?`	`"success" \| "warning"`	`"success"`	Colour scheme for the right badge half.
`imageSrc?`	`string`	-	Image source URL — rendered floating bottom-right.
`imageAlt?`	`string`	`""`	Alt text for the image.
`href?`	`string`	-	Wraps the card in an anchor tag.
`tiltProps?`	`Omit<TiltProps, "children" \| "className">`	-	Props forwarded to the inner Tilt wrapper.

Notes

The card wraps everything in the <Tilt> primitive with rotationFactor={11} by default. Override it via tiltProps={{ rotationFactor: 20 }} for more dramatic tilt.
When href is provided, the entire card becomes an <a> tag. The anchor is framework-agnostic (plain HTML <a>, not Next.js <Link>) — wrap it yourself if you need client-side navigation.
The floating image is absolutely positioned at top-27 -right-10 with a slight rotation (-5deg). On hover, it shifts subtly (-rotate-3, -translate-y-1). Image dimensions are fixed at w-72 (288px).
ClippedCircle renders a large white circle (circleSize={800}) that reveals on hover via CSS clip-path — it creates the radial shine effect.
The card has responsive height: h-48 on mobile, h-52 on sm, h-56 on md. Override via className if you need a different size.
The split badge pill shows price on the left and badgeLabel on the right with colored background based on badgeVariant. If only price is set (no badgeLabel), it renders as a simple pill.
The component depends on two primitives: Tilt (spring-based 3D rotation) and ClippedCircle (hover reveal effect). Both are installed automatically via the registry.

Keep in mind

Most components on this site are inspired by or recreated from existing work across the web. I'm not here to take credit; just to learn, experiment, and sometimes push things a bit further. If something looks familiar and I forgot to mention you, reach out and I'll fix that right away.