LSD
/framework/library/animations
Library
Blocks
Sections
Components
Aurora
Motion
Animation index
Every
.lsd-fx--*
class, grouped, live. Click any tile to copy the class name.
— animations
Interactive hover
Text choreography
Entrance
Particle
Continuous
Pointer
Scroll-driven
Static patterns
Interactive hover
15 — hover/focus driven feedback
lift
.lsd-fx--hover-lift
Copied ✓
magnetic
.lsd-fx--hover-magnetic
Copied ✓
shimmer
.lsd-fx--hover-shine
Copied ✓
squish
.lsd-fx--hover-squish
Copied ✓
pop
.lsd-fx--pop
Copied ✓
wobble
.lsd-fx--wobble
Copied ✓
tilt
.lsd-fx--hover-tilt
Copied ✓
slide-fill
.lsd-fx--slide-fill
Copied ✓
border-draw
.lsd-fx--border-draw
Copied ✓
underline-grow
.lsd-fx--underline-grow
Copied ✓
glitch
.lsd-fx--glitch
Copied ✓
.lsd-fx--ripple-click
Copied ✓
.lsd-fx--hover-glow-pulse
Copied ✓
.lsd-fx--goo-morph
Copied ✓
.lsd-fx--ink-drop
Copied ✓
Text choreography
7 — letter-level and string-level animation
S
t
a
g
g
e
r
.lsd-fx--letter-stagger
Copied ✓
S
h
u
f
f
l
e
.lsd-fx--letter-shuffle
Copied ✓
Typing…
.lsd-fx--typing-animation
Copied ✓
Sparkles
.lsd-fx--sparkles-text
Copied ✓
Shadow
.lsd-fx--line-shadow-text
Copied ✓
POW!
.lsd-fx--comic-text
Copied ✓
42
.lsd-fx--number-ticker
Copied ✓
Entrance — scroll-once gated
17 — pair with .lsd-scroll-once for IntersectionObserver gating
fade
.lsd-fx--fade-in
Copied ✓
slide-up
.lsd-fx--slide-up
Copied ✓
slide-down
.lsd-fx--slide-down
Copied ✓
slide-left
.lsd-fx--slide-left
Copied ✓
slide-right
.lsd-fx--slide-right
Copied ✓
scale-in
.lsd-fx--scale-in
Copied ✓
scale-out
.lsd-fx--scale-out
Copied ✓
zoom
.lsd-fx--zoom-in
Copied ✓
blur-in
.lsd-fx--blur-in
Copied ✓
rotate
.lsd-fx--rotate-in
Copied ✓
flip
.lsd-fx--flip-in
Copied ✓
curtain
.lsd-fx--curtain
Copied ✓
unfold
.lsd-fx--unfold
Copied ✓
mask-up
.lsd-fx--mask-up
Copied ✓
iris
.lsd-fx--mask-iris
Copied ✓
reveal-up
.lsd-fx--reveal-mask-up
Copied ✓
split
.lsd-fx--curtain-split
Copied ✓
Particle / decorative backdrops
13 — full-stage effects, often paired with backgrounds
.lsd-fx--meteors
Copied ✓
.lsd-fx--sparkles
Copied ✓
.lsd-fx--confetti
Copied ✓
.lsd-fx--light-rays
Copied ✓
.lsd-fx--animated-beam
Copied ✓
.lsd-fx--grid-beams
Copied ✓
.lsd-fx--particles
Copied ✓
.lsd-fx--flickering-grid
Copied ✓
.lsd-fx--retro-grid
Copied ✓
.lsd-fx--warp-background
Copied ✓
.lsd-fx--pixel-image
Copied ✓
.lsd-fx--scratch-to-reveal
Copied ✓
.lsd-fx--cool-mode
Copied ✓
Continuous / idle
5 — ambient looping effects
.lsd-fx--glow-pulse
Copied ✓
.lsd-fx--rotate-on-hover
Copied ✓
breathe
.lsd-fx--breathe
Copied ✓
.lsd-fx--scan-line
Copied ✓
prismatic
.lsd-fx--prismatic
Copied ✓
Pointer-driven
4 — react to pointer position via lsd-pointer.js
magnetic
.lsd-fx--magnetic
Copied ✓
tilt
.lsd-fx--tilt
Copied ✓
line
.lsd-fx--magnetic-line
Copied ✓
cursor
.lsd-fx--cursor-magnetic
Copied ✓
Scroll-driven
3 — bound to scroll progress via lsd-scroll-trigger.js
parallax-soft
.lsd-fx--parallax-soft
Copied ✓
parallax-deep
.lsd-fx--parallax-deep
Copied ✓
mask-reveal
.lsd-fx--mask-reveal
Copied ✓
Static patterns
7 — pure CSS backgrounds, zero animation cost
.lsd-fx--grid-pattern
Copied ✓
.lsd-fx--dot-pattern
Copied ✓
.lsd-fx--stripes
Copied ✓
.lsd-fx--hexagons
Copied ✓
.lsd-fx--noise-texture
Copied ✓
.lsd-fx--dotted-map
Copied ✓
.lsd-fx--checkerboard
Copied ✓