Return

Ripple Tilt Card

Combines cursor-driven 3D tilt, a radial glow that tracks your pointer, and Material-style ripples on click - three premium micro-interactions in one lightweight card.

ripple-tilt-card-preview

Move & click me

Tilts toward your cursor, ripples on click

Why it helps: Tilt-and-glow cards are everywhere in modern product marketing sites but usually ship as a heavy dependency. This is under 70 lines with no external library.

Source

components/live/RippleTiltCard.tsx

Usage

example.tsx

Props

className
string

Optional CSS class for root container

maxTilt
number

Maximum tilt angle in degrees

glowIntensity
number

Percentage intensity of the radial glow

children
ReactNode

Content to display inside the card

This site counts visits (masked IP, rough location, device type - never anything identifying) and publishes the results openly at /visitors.