Extended Animations

Extended additions to the LSD .lsd-fx--* library plus structural utilities (mockups, orbs, timeline).

Pure animations · .lsd-fx--*

warp-background

.lsd-fx--warp-background

line-shadow-text

.lsd-fx--line-shadow-text

SHADOW

meteors

.lsd-fx--meteors

flickering-grid

.lsd-fx--flickering-grid

particles

.lsd-fx--particles

retro-grid

.lsd-fx--retro-grid

light-rays

.lsd-fx--light-rays

grid-beams

.lsd-fx--grid-beams

confetti

.lsd-fx--confetti (click)

cool-mode

.lsd-fx--cool-mode (click)

sparkles-text

.lsd-fx--sparkles-text

Sparkle

comic-text

.lsd-fx--comic-text

POW!

animated-beam

.lsd-fx--animated-beam (svg)

typing-animation

.lsd-fx--typing-animation

Hello, world.

number-ticker

.lsd-fx--number-ticker

pixel-image

.lsd-fx--pixel-image (hover)

scratch-to-reveal

.lsd-fx--scratch-to-reveal (click)

Surprise!

Extended universal fx · R1–R10

Reveal masks pair with .lsd-scroll.lsd-scroll-once; parallax classes read --lsd-progress from any host wearing .lsd-scroll.lsd-scrub; magnetic-line reads --lsd-pointer-x from lsd-pointer.js.

reveal-mask-up

.lsd-fx--reveal-mask-up

reveal-mask-iris

.lsd-fx--reveal-mask-iris

curtain-split

.lsd-fx--curtain-split

Reveal

parallax-soft (scroll)

.lsd-fx--parallax-soft

soft

parallax-deep (scroll)

.lsd-fx--parallax-deep

deep

rotate-on-hover

.lsd-fx--rotate-on-hover

hover

breathe

.lsd-fx--breathe

scan-line

.lsd-fx--scan-line

$ scanning…

prismatic

.lsd-fx--prismatic

magnetic-line

.lsd-fx--magnetic-line (hover)

Hover anywhere along this link

Component-shape utilities

iPhone mockup

.lsd-mockup--iphone

Browser mockup

.lsd-mockup--browser

Terminal mockup

.lsd-mockup--terminal

$ lsd build
→ ok

Globe orb (CSS-only)

.lsd-orb.lsd-orb--globe

Icon-cloud orb

.lsd-orb.lsd-orb--icon-cloud

ABCD EFGH

Arc timeline

.lsd-timeline.lsd-timeline--arc

2020
2021
2022
2023
2024
2025
2026

Video-text

.lsd-text--video-clip

FLOW

Static pattern primitives

Decorative background-image surfaces, chainable on any element. Add .lsd-fx--accent for a tone shift.

grid-pattern

.lsd-fx--grid-pattern

dot-pattern

.lsd-fx--dot-pattern

stripes

.lsd-fx--stripes

hexagons

.lsd-fx--hexagons

noise-texture

.lsd-fx--noise-texture

dotted-map

.lsd-fx--dotted-map

checkerboard

.lsd-fx--checkerboard

Cursor modes (global)

Configure via data-lsd-cursor-mode="trail" or "smooth" on <html>, or pass { mode: 'trail' } to lsd.motion.configure({ cursor }).