SPOTLIGHT CARDS

9 interactive card patterns. Hover each to experience.

Spotlight

Radial gradient follows your cursor inside the card.

radial-gradient

Tilt 3D

Card tilts in 3D space following your cursor position.

perspective · rotateX/Y

Glare

Diagonal light sweep crosses the card on hover.

linear-gradient sweep

Border Gradient

Animated conic gradient spins around the card border.

conic-gradient · @property

Lift & Glow

Card lifts up and casts a colored glow underneath.

translateY · box-shadow

Magnetic

The entire card attracts toward your cursor.

cursor attraction

Reveal Content

Hidden content slides into view on hover. Use this pattern for progressive disclosure — show a title first, then reveal details when the user shows interest.

ReactCSSMotion

max-height transition

Scramble

Title text scrambles through random characters then resolves.

character scramble

Scale Pulse

Card scales up and pulses subtly while hovered.

transform · animation

Every interaction is pure CSS + React. No libraries.

Build something like this →