Tilt Card

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

Installation

File Structure

tilt-card.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

PropTypeDefault
title
string
-
description?
string
-
price?
string
-
badgeLabel?
string
-
badgeVariant?
"success" | "warning"
"success"
imageSrc?
string
-
imageAlt?
string
""
href?
string
-
tiltProps?
Omit<TiltProps, "children" | "className">
-

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.