Back to library
INTERACTION_011

Animated Border.

A rotating conic gradient sits behind a masked inset surface so a single highlight orbits the border without any JavaScript.

CATEGORY
Cards
COMPLEXITY
Intermediate
TECH
CSS
PLATFORM
Both
PERFORMANCE
Medium
LIVE PLAYGROUND
BORDER BEAM
CSS / CSS
.beam { position: relative; border-radius: 20px; overflow: hidden; }

.beam::before {
  content: "";
  position: absolute;
  inset: -60%;
  background: conic-gradient(from 0deg, transparent 70%, rgba(255,255,255,0.55));
  animation: spin 4s linear infinite;
}

.beam > * { position: relative; margin: 1px; border-radius: 19px; background: #0e0e0e; }

@keyframes spin { to { transform: rotate(360deg); } }

IF YOU LIKE THIS, STEAL THESE TOO.

SPOTLIGHT

Move the cursor across this surface.

INTERACTION_007CSS + JS

Mouse Spotlight Card

A soft radial light follows the cursor across the surface.

Cards / LightView
GLASS / SURFACE

Blur 24px · edge light

INTERACTION_010CSS

Glass Panel

Heavy dark glass with an inner edge highlight.

App UI / MediumView
CARD_01
INTERACTION_006CSS

Premium Card Lift

4px elevation with border brightening.

Cards / LightView
TILT / 6°
INTERACTION_008CSS + JS

3D Tilt Card

Perspective tilt that responds to pointer position.

Cards / MediumView