Premium & Brand

Tilt Card

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

Import

tsx

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

bash

npx cronus-ui add tilt-card

Examples

.cronus

The same component declared in Cronus. Emitted at build time from the audit fixtures — the kernel renders it as HTML with no React.

PortedParity: MatchGeometry 1/1Pixel diff 0 pxLogic 1/1Parity scoreboard

default.cronus

app "audit-fixtures" {
  port 5176
}

style {
  preset aurora
  theme dark
}

component TiltCardDefault layout:inline style:tilt-card {
  label "Hover me"
}

page "/audit/tilt-card/default" type:custom {
  use TiltCardDefault
}

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.
`className`	`string`	—	Additional class names merged onto the root.
`children`	`ReactNode`	—	Contents of the component.
`id`	`string`	—	DOM id of the root element.

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-surface-overlay text-fg">
      <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 — a payment-card mockup that leans into the cursor. The surface is inverted fg, not a rainbow fill.

Cronus

4242 4242 4242 4242

Pedro Gontijo12/29

tsx

<TiltCard
  glare
  parallax
  maxTilt={16}
  scale={1.05}
  className="w-full max-w-sm bg-fg text-fg-inverse"
>
  <div className="flex flex-col gap-6">
    <div className="flex items-start justify-between">
      <span className="font-display text-lg font-semibold">Cronus</span>
      <Wifi className="size-6 rotate-90 opacity-90" aria-hidden="true" />
    </div>
    <div className="h-9 w-12 rounded-md bg-fg-inverse/20 ring-1 ring-fg-inverse/15" 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@cronus.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@cronus.app</p>
    </div>
    <ArrowRight className="ml-auto size-4 shrink-0 text-fg-tertiary" aria-hidden="true" />
  </div>
</TiltCard>