Hover the rainbow
Animated gradient cycles through every hue on hover. Drop on any headline, link, or brand mark.
.lsd-fx--hover-rainbow
v1.1 — supporting tool, not a platform
Token-first design system editor and static site builder
Try a brand:
live — changes apply to this page only
Built by Ferretdev
Live demo
Change anything — watch it cascade
Every control below writes a CSS custom property onto :root. The preview block repaints instantly. This is LSD's token-first model in three dimensions.
Type
The quick brown fox jumps
Body copy reads from --font-sans and --lc-scale. Headings tighten letter-spacing. Paragraphs stay at 68 characters per line.
Buttons
tailwind
bootstrap
scss
dtcg
Surfaces
bg
surface
primary
Form
Hover effects
Standout interactions — one class each
Rainbow text, cursor masks, 3D tilts, metallic shine. Every demo below is a single class from LSD's animation library. Hover any card to see it work.
Move your cursor
LSD FRAMEWORK
Cursor cuts a porthole through the top layer, revealing hidden content beneath. Smoothed follow via data-lsd-pointer-lerp.
.lsd-fx--mask-reveal
Hover the metal
Gradient sweep moves across the surface on hover. Works on buttons, cards, badges — anything rectangular.
.lsd-fx--hover-shine
Hover in three dimensions
Perspective tilt + lift. Composes with any other hover class — this card is hover-tilt + hover-lift chained.
.lsd-fx--hover-tilt
Surfaces
The surface cascade — one class per section
Text color, borders, and icons auto-resolve for contrast against every surface. Your brand palette defines the paints; LSD decides what rides on top. Swap the brand, the whole cascade follows.
.surface-bg · the floor
The page background
This is where the document sits. Bg is the widest, coolest surface. Body copy, links, and neutrals all read naturally here.
.surface-secondary · supporting
Secondary fills — grouped sections
A softer neutral that separates related blocks without demanding attention. Good for inline documentation, sidebars, and secondary CTAs.
.surface-card · elevated
Card surfaces — the content units
Cards ride one step above the page. Every role token (heading, body, border, link) resolves against this new background automatically.
.surface-primary · the accent
Brand-colored surfaces
Primary fills carry full brand color. Text on primary automatically flips to --text--on-primary — readable against any palette you throw at it.
.surface-modal · peak elevation
Dialogs & popovers
The topmost contextual surface. Sits above the scrim; the border tightens as elevation rises. All from token math.
Every surface above is a single class. Change the active palette (top of the page) and watch the whole stack repaint.
Scroll-scrub × mask-reveal
A spotlight on loop
One mask-reveal element, autoplay motion. The spotlight moves through the section automatically — same mask-image: radial-gradient() contract as the cursor version, driven by a --sp-x / --sp-y animation. Your cursor can take over too — hover to redirect the spotlight.
Your content at rest
The base layer reads cleanly — muted tones, readable body copy, subtle hierarchy. Designed for long-form focus.
When the spotlight passes over, the top layer reveals what else this surface could say. Same tokens, different story.
.surface-card
.lsd-fx--mask-reveal
token-driven
Your brand, on full volume
The spotlight lets your accent color breathe. Pair this with hero callouts, key statistics, or testimonials — anywhere you want the reader's eye to land.
Move your cursor over the section to redirect the beam.
primary
heading
accent
Scene 1 · tier tour
Meet the six tiers
One card climbs from sunken to modal. Watch scale grow, shadow sharpen, saturation rise. Each tier is a named state; the trajectory is just a sequence through their names.
Every tier
Sunken, base, raised, elevated, high, modal. One card, six stops.
1.00×Six tiers, five surfaces, one climb. The ladder card climbs through every tier; each tier's pod pops into place as it's reached — neutral at sunken, brand-card at base, tonal at raised, info at elevated, success at high, primary at modal. You see the altitudes and the surfaces stack together.
Scene 2 · crossover
The crossing
A riser climbs from ground to modal. A plunger falls from modal into sunken. They pass through each other. That crossing is where the Z-axis stops being an abstraction.
Rising arc
Starts at ground. Climbs into high tier mid-scroll. Settles at raised.
1.00×The plunger
Starts at modal, inches from you. Ground-slams at 60% scroll. Shockwave.
1.20×Two cards, one scroll. The riser climbs from ground through modal at peak visibility. The plunger starts at modal (inches from you) and ground-slams into sunken, fading out as it exits. Bigger = closer. Sharp shadow = lifted. The crossover is where the Z-axis stops being an abstraction.
Scene 3 · the weaver
Solo — the circus move
Zoom forward, plunge, swing wide off-stage, re-emerge from the other side, climb. One trajectory with seven tier transitions — readable when it's alone.
Circus move
Zoom, plunge, vanish right, re-emerge left, climb. One card, whole story.
1.10×One card. Seven tier transitions. This is the vocabulary composed — a whole story in one trajectory.
Scene 4 · impact
The ground slam
Modal tier plunging through ground into sunken. At the moment of impact, a shockwave ring pulses outward. The plunger continues off-stage and fades.
Impact
Modal, inches from you. Ground-slam at 62% scroll. Shockwave fires, card exits.
1.20×A single plunger. The shockwave fires at the ground-impact keyframe. This is what every interaction layered on top of gravity looks like in isolation.
Weights · semantic intent layer
One vocabulary, every component
Components read --weight-bg / --weight-fg / --weight-border — they don't know the brand's colors. Swap the brand, the intent follows.
Buttons .lsd-btn
.weight-primary.weight-secondary.weight-success.weight-warning.weight-danger.weight-info.weight-neutral.weight-ghost.weight-tonal-primary.weight-tonal-secondary.weight-tonal-success.weight-tonal-warning.weight-tonal-danger.weight-tonal-info
Icon tiles .lsd-icon-tile
-
.weight-primary -
.weight-secondary -
.weight-success -
.weight-warning -
.weight-danger -
.weight-info -
.weight-neutral -
.weight-ghost -
.weight-tonal-primary -
.weight-tonal-secondary -
.weight-tonal-success -
.weight-tonal-warning -
.weight-tonal-danger -
.weight-tonal-info
Pill chips <span> + .lsd-btn
- primary
.weight-primary - secondary
.weight-secondary - success
.weight-success - warning
.weight-warning - danger
.weight-danger - info
.weight-info - neutral
.weight-neutral - ghost
.weight-ghost - tonal primary
.weight-tonal-primary - tonal secondary
.weight-tonal-secondary - tonal success
.weight-tonal-success - tonal warning
.weight-tonal-warning - tonal danger
.weight-tonal-danger - tonal info
.weight-tonal-primary
Responsive foundation · container queries
Container queries — one component, three morphs
Scroll. Notice the same card pattern adapts to its container's width, not the viewport. The hero keeps the full layout; the grid shrinks it; the sidebar compresses it further.
hero · full width
Container width: wide
The card establishes a named container. Its children query that container — not the viewport — so placing the same component in a narrow slot morphs the layout with zero prop changes.
grid · ~340px columns
Medium width
Same HTML, same class. The container query fires at 480px.
Medium width
Same HTML, same class. The container query fires at 480px.
Medium width
Same HTML, same class. The container query fires at 480px.
Same markup, three morphs. The card registers container-type: inline-size + container-name: democard, then publishes overrides at @container democard (max-width: 480px) and @container democard (max-width: 320px). In LSD authoring terms, that's responsive: { 'container:democard:narrow': {...}, 'container:democard:tight': {...} } on the StyleRule.
Motion theatre · hover or tap replay
A few tricks of the stage
Jiggles, flips, morphs, liquid shapes — the framework's trick bag. Each card below is one class you drop on any element. Hover to play.
.lsd-fx--jiggle
.lsd-fx--bounce
.lsd-fx--flip
.lsd-fx--rotate-slow
.lsd-fx--rotate-burst
.lsd-fx--fade-pulse
.lsd-fx--morph
.lsd-fx--liquid
.lsd-fx--surface-swap
.lsd-fx--tilt-3d
.lsd-fx--swing
.lsd-fx--glitch
Motion theatre · scroll show
One shape, the whole trick bag
A single hero shape, scroll-driven through every move. Scale, jiggle, flip, surface swap, morph, liquify, rotate, fade — all composed on one object as you scroll.
LSD
One object, ten states. The hero reads a dozen --lsd-theatre-* custom properties, each driven by one scroll timeline. Scripted via @keyframes; could equally be authored via a future LSD.theatre.trajectory() API in the same shape as LSD.weave.trajectory().
Dissected · the primitives behind the weave
The physics, one primitive at a time
Now zoom in. Each of the four demos below isolates a single force: layover (rise), layunder (pass beneath), mass rising (displace siblings), tier promotion (grounded to lifted). Same engine as the Weave above — just one variable at a time.
Layover
An element lifts into orbit as you scroll past it. Shadow grows with altitude. Returns to its grounded tier on scroll past.
Long-form content flows past the layover. The content stays grounded (tier 0). The card on the right lifts to orbit as it enters the pinned zone — its shadow lengthens, its altitude grows.
Watch the card rise as you scroll. The framework inserts the right z-index + shadow + surface color automatically.
When the card passes its pin range, gravity reasserts and it returns to the grounded tier, merging back with the flow.
No manual z-index bookkeeping. One tier declaration, physics does the rest.
Layunder
A floating element stays pinned above the flow. Content passes UNDER it — and gets blurred, dimmed, consumed. The tier above doesn't care about the motion below.
floating · .lsd-z-modal
I stay put.
Content drifts beneath. I remain at my tier.
Content row 01 · flows under
Content row 02 · flows under
Content row 03 · flows under
Content row 04 · flows under
Content row 05 · flows under
Content row 06 · flows under
Content row 07 · flows under
Content row 08 · flows under
Mass rising
A heavy element rises through the layout and displaces what surrounds it. Surrounding content doesn't disappear — gravity makes room. Siblings slide aside as the mass climbs into view; when it passes, they settle back.
Flow content
Flow content
Flow content
rising mass
I'm heavier.
Watch the flow make space as I rise.
Flow content
Flow content
Flow content
Tier promotion
A grounded card promotes to lifted as it enters the viewport. Orion guides the hue shift toward the next tier's surface; the shadow grows; the element arrives at its authored altitude.
grounded → lifted · .lsd-z-raised
Card A · auto-promote
Starts at tier 0 (grounded). Scrolls into view; promotes to tier 1 (lifted). Shadow cast direction: up, outward.
grounded → elevated · .lsd-z-elevated
Card B · deeper promotion
Same pattern, two tiers up. Takes a little longer to reach altitude. Shadow is longer, softer, more pronounced.
grounded → peak · .lsd-z-high
Card C · peak lift
Full altitude. Peak tier. The shadow reads as distance from the ground plane.
Every demo above is scroll-driven via native animation-timeline (Chrome 115+, Safari 17+) with IntersectionObserver fallback.
Tier names map to framework classes:
.lsd-z-base (grounded) ·
.lsd-z-raised (lifted) ·
.lsd-z-elevated · .lsd-z-high (peak) ·
.lsd-z-modal (floating) ·
.lsd-z-overlay (orbit).
What LSD is
What makes it different
Ten ideas LSD commits to that most design tools don't.
Context-aware surfaces
Color on a primary surface is not the same color on a neutral surface. LSD derives on-surface text, borders, and states automatically using contrast laws.
Framework-agnostic output
Pick your target at export time, not at the start. The same token graph compiles cleanly to six formats — you can change your mind later.
.lsd portable brand package
A single gzipped file carries your tokens, custom styles, user components, theme overrides, and pages. Move a brand between projects in one drag-and-drop.
Vanilla HTML output
Export produces clean, semantic HTML and CSS — no runtime, no wrapper divs, no framework lock-in. Drop it into any builder, static site, or hand-authored project.
Live editor on any page
The editor is a thin shell around an iframe preview. Load any live URL, wire tokens, and see the real page respond — not a synthetic demo.
OSS animation framework
lsd-fx, lsd-flt, lsd-motion,
lsd-data, and lsd-anim ship as a
standalone MIT-licensed package. Over 50 effect classes —
hover, scroll-driven, cursor-mask, 3D tilts, rainbow text —
and three authoring surfaces (class chains, SCSS mixins, JS
API). Browse the library →
Visual behaviours wiring
Wire trigger → action → target interactions without writing code. Carousel, modal, accordion, tabs — or chain custom actions with conditions, state, and timing.
Built-in SEO audit
26 per-page checks (keyword density, meta, headings,
readability) plus site-wide cannibalization and orphan
detection. Scores export in audit.json for
CI gates.
Static export + one-click deploy
Export a production-ready ZIP with critical CSS inlining, HTML minification, lazy images, sitemap, robots.txt, and analytics. Drag the ZIP onto Netlify Drop and you're live.
Data sources + repeaters
Bind JSON data to any element with
data-lsd-loop and {{field}}
tokens. Static export clones and substitutes — no runtime
templating engine required.
Who it's for
Design system teams
Authoring tokens that feed multiple engineering stacks. LSD's single graph + many exporters matches how you already work.
Agencies & studios
Lock a brand palette and type system quickly with a client, export it in whichever framework the build uses, move on to the actual work.
AI tool builders
.lsd is a clean, documented envelope for brand
state. Agents can read, merge, and emit it; the spec is
versioned and sanitized on import.
Four products, one tool
Each piece stands alone. Use one, use all four, pick what fits.
Editor app
Open editor →
LSD Editor
Browser-based editor for tokens, roles, type systems, and export targets. Runs on any live preview URL. Includes surfaces, behaviours, components, pages, SEO audit, and accessibility checks.
Site builder
Start building →
LSD Sites
Build multi-page static sites with blocks, components, data sources, and asset management. Export a production-ready ZIP with critical CSS, lazy images, sitemap, robots.txt, cookie consent, and analytics — then deploy to Netlify in one drag.
Framework
LSD Framework — lsd-fx, lsd-flt, lsd-motion, lsd-anim, lsd-data
MIT-licensed animation + motion + filter + reactive-data
runtime. Zero dependencies, three authoring surfaces. 50+
effect classes including cursor-mask, scroll-driven, 3D
tilts, rainbow text. Build a custom bundle with your brand
baked into :root, or browse every effect live.
Spec
Read the spec →
.lsd Brand Package format
Versioned, gzipped JSON envelope for brand state. Use it to move brands between projects or teach an AI agent your system.
Ready to try it?
The editor runs client-side. Nothing to install.