ProHover

Tilt Card

A card that tilts in real 3D, with glare and layers that float apart.

Loading
Usage 
import { TiltCard } from "./TiltCard";

<TiltCard>
  <div className="card">
    <div data-depth="40">Floats 40px above the card</div>
  </div>
</TiltCard>

About

The card turns toward the pointer in real 3D perspective while a specular glare slides across its surface and a rim light picks out the edge facing you. Mark any layer with data-depth and it floats at its own height, so the content parts like a pop-up book as the card turns. It lifts slightly on hover and springs back when the pointer leaves, and goes completely idle once settled.

What you get

  • Rebuild prompt

    One paste into Claude Code, Cursor, Codex or v0 rebuilds it byte for byte.

  • Source

    TiltCard.tsx + TiltCard.css — plain React and CSS, every comment kept.

  • Vite project

    A ready-to-run project with this exact example and pinned versions — unzip, install, run.

More like this

All components
◎HoverNewPro
Open live demo →

Dot Field

Backgrounds

A living field of dots that parts around the cursor and breathes.

◎HoverNewFree
Open live demo →

Magnetic Button

Buttons

A button that pulls toward the cursor and floods with colour from where you enter.

↕ScrollNewPro
Open live demo →

Aperture Zoom

Scroll

A framed image that opens to full-bleed as you scroll, parting the headline.