79 / Scenes

Tilt Card

A card that leans toward the pointer as though it were a physical object lying on the page.

Boarding pass

Reykjavik

Seat 4A, window, wing behind you.

Point at the card and it leans toward you.

"use client"

import { TiltCard } from "mischief-ui/tilt-card"

export function TiltCardDemo() {
  return (
    <TiltCard glare className="w-full max-w-xs p-6">
      <p className="text-muted-foreground text-xs font-semibold tracking-widest uppercase">
        Boarding pass
      </p>
      <p className="mt-3 text-2xl font-semibold">Reykjavik</p>
      <p className="text-muted-foreground mt-1 text-sm">
        Seat 4A, window, wing behind you.
      </p>
      <p className="text-muted-foreground mt-6 text-xs">
        Point at the card and it leans toward you.
      </p>
    </TiltCard>
  )
}

Installation

Copy the source into your project, or keep it behind a package.

npx shadcn@latest add Tinkerers-Labs/mischief-ui/tilt-card

import { TiltCard } from "mischief-ui/tilt-card"

Or paste it in yourself. The source imports the shared cn helper from @/lib/utils, so point that at your own copy.

registry/default/tilt-card/tilt-card.tsx

1"use client"2 3import * as React from "react"4import { cn } from "@/lib/utils"5 6export type TiltCardProps = React.HTMLAttributes<HTMLDivElement> & {7  /** Furthest the card leans, in degrees. */8  maxTilt?: number9  /** How far the card comes toward the pointer, in pixels. */10  lift?: number11  /** Adds a sheen that moves against the lean. */12  glare?: boolean13  perspective?: number14}

Usage

export function Pass() {
  return (
    <TiltCard glare className="p-6">
      <p>Reykjavik</p>
      <p>Seat 4A</p>
    </TiltCard>
  )
}

Nine degrees, not thirty

The default lean is small on purpose. A card that swings twenty or thirty degrees stops reading as a card catching the light and starts reading as a card being thrown around, and text on it becomes genuinely harder to read at the far corner.

The lean is written to custom properties on the element rather than to state, so a grid of these renders nothing while the pointer crosses it.

With a spotlight

Tilt moves the card and a spotlight moves the light on it. Together they are the usual bento card, and each is still useful without the other.

<TiltCard>
  <SpotlightCard followGroup className="p-5">
    <p>Studio</p>
  </SpotlightCard>
</TiltCard>

API

maxTiltnumberFurthest it leans, in degrees. Defaults to 9.

liftnumberHow far it comes toward the pointer, in pixels. Defaults to 6.

glarebooleanAdds a sheen that moves against the lean.

perspectivenumberPixels. Lower is a stronger effect. Defaults to 900.

Accessibility

The lean is decoration and nothing is announced. Under reduced motion the card does not lean at all, rather than leaning more slowly. Because the effect is driven entirely by the pointer, nothing moves for a reader who is not moving one, and a keyboard reader gets an ordinary card.