Premium & Brand

Tilt Card

A card that tilts in 3D toward the pointer, with an optional glare.

Import

tsx

import { TiltCard } from "@cooud-ui/ui";

bash

npx cooud-ui add tilt-card

Examples

Glare & parallax

A real perspective transform that tilts toward the pointer, with a soft `glare` sheen and `parallax` lifting the content toward the viewer on hover. The pointer writes straight to CSS variables inside one rAF — no re-renders — and it flattens under prefers-reduced-motion.

Repasses instantâneos

O saldo entra no mesmo instante em que a venda é aprovada — sem lote noturno, sem espera.

tsx

<TiltCard glare parallax maxTilt={14} className="w-full max-w-xs">
  <div className="flex flex-col gap-3">
    <span className="grid size-11 place-items-center rounded-xl bg-gradient-primary text-primary-foreground shadow-glow">
      <Zap className="size-5" aria-hidden="true" />
    </span>
    <h3 className="font-display text-lg font-semibold text-fg">Repasses instantâneos</h3>
    <p className="text-sm text-fg-secondary">
      O saldo entra no mesmo instante em que a venda é aprovada — sem lote noturno, sem espera.
    </p>
  </div>
</TiltCard>

Payment card

Push `maxTilt` and `scale` for a tactile, dramatic feel — perfect for a payment-card mockup that leans into the cursor. Override the surface via `className` to paint it with the brand gradient.

Cooud

4242 4242 4242 4242

Pedro Gontijo12/29

tsx

<TiltCard
  glare
  parallax
  maxTilt={16}
  scale={1.05}
  className="w-full max-w-sm border-transparent bg-gradient-primary text-primary-foreground"
>
  <div className="flex flex-col gap-6">
    <div className="flex items-start justify-between">
      <span className="font-display text-lg font-semibold">Cooud</span>
      <Wifi className="size-6 rotate-90 opacity-90" aria-hidden="true" />
    </div>
    <div className="h-9 w-12 rounded-md bg-white/25 ring-1 ring-white/20" aria-hidden="true" />
    <div className="flex flex-col gap-4">
      <p className="font-mono text-xl tracking-[0.25em]">4242 4242 4242 4242</p>
      <div className="flex items-center justify-between text-xs uppercase tracking-wide opacity-90">
        <span>Pedro Gontijo</span>
        <span className="tabular-nums">12/29</span>
      </div>
    </div>
  </div>
</TiltCard>

Subtle

Dial `maxTilt` and `scale` right down (and skip the glare) for a restrained lift that suits dense lists and rows — motion that's felt more than seen.

Ana Ribeiro

ana@cooud.app

tsx

<TiltCard maxTilt={6} scale={1.02} className="w-full max-w-xs">
  <div className="flex items-center gap-4">
    <span className="grid size-11 place-items-center rounded-full bg-surface-overlay text-fg-secondary">
      <User className="size-5" aria-hidden="true" />
    </span>
    <div className="min-w-0">
      <p className="truncate text-sm font-medium text-fg">Ana Ribeiro</p>
      <p className="truncate text-sm text-fg-tertiary">ana@cooud.app</p>
    </div>
    <ArrowRight className="ml-auto size-4 shrink-0 text-fg-tertiary" aria-hidden="true" />
  </div>
</TiltCard>

API Reference

Generated from the component's exported types.

TiltCardProps

Extends HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
`maxTilt`	`number`	`12`	Maximum rotation, in degrees, reached on each axis at the card's edges. Higher feels more dramatic.
`glare`	`boolean`	`false`	Render a soft pointer-following glare sheen across the surface.
`scale`	`number`	`1.03`	Uniform zoom applied while the pointer is over the card (`1` = none).
`parallax`	`boolean`	`false`	Lift the content toward the viewer on hover for a layered parallax depth effect.