LSD Framework
Get started · v0.8

Drop in LSD. One stylesheet. Done.

The framework runs on any HTML page. No build step, no editor required. The editor exists to author your brand — the framework consumes the result.

Quick start ↓ View on GitHub
§01 · Quick start

The 30-second drop-in.

A complete HTML page that uses LSD. Copy it, save as index.html, open in a browser. Everything below renders.

index.html 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet"
    href="https://unpkg.com/@ferretdev/lsd-framework/lsd-tokens.css">
  <link rel="stylesheet"
    href="https://unpkg.com/@ferretdev/lsd-framework/lsd-buttons.css">
  <link rel="stylesheet"
    href="https://unpkg.com/@ferretdev/lsd-framework/lsd-motion.min.css">
</head>
<body>
  <button class="lsd-btn lsd-btn--primary lsd-fx--lift lsd-fx--shimmer">
    Hello, cosmos
  </button>

  <script type="module"
    src="https://unpkg.com/@ferretdev/lsd-framework/lsd-template.js"></script>
  <script type="module"
    src="https://unpkg.com/@ferretdev/lsd-framework/lsd-palette-switcher.js"></script>
</body>
</html>
Live preview

This exact button rendered from this exact markup. The floating palette & type switchers at the corner of this page came from the same two script tags.

§02 · Install

Three paths in.

CDN for prototyping, npm for build pipelines, or a .lsd brand package exported from the editor. Same framework, different delivery.

Work in progress

Install paths going live with v0.8

The @ferretdev/lsd-framework package publishes to npm shortly — CDN tags, npm install, and .lsd brand-package delivery all land together.

§03 · Chain the contract

Every interaction is one class. Stack them.

Pick tone, size, shape, animations. Watch the class string assemble. Copy the HTML.

Live composition
Tone (pick one)
primary ghost outlined soft danger
Size (pick one)
sm md lg xl
Shape (pick one)
default pill icon
Animations (multi)
lift shimmer magnetic pop squish glow-pulse
§04 · Swap the brand

Tokens are the only thing you customize.

Override --accent & friends — the framework follows. Click a preset to repaint the demo. The CSS below is what would do the same in your own project.

Aurora-grade controls

Tokens cascade. One preset writes --accent and --bg — the card, the buttons, and the chip below all pick it up automatically.

brand · tag live tokens
your-brand.css 
/* Wrap any element in .my-brand — LSD's cascade picks it up.
   Or write these onto :root for a site-wide brand. */
.my-brand {
  --accent:   #ff3d71;
  --accent-2: #f59e0b;
  --bg:       #16060e;
  --ink:      #ffe3ec;
}
§05 · Editor or no editor

Two valid paths.

The framework is the deliverable — the editor is one way to author its inputs. Most adoption needs only the framework.

✓ You DON'T need the editor

  • You have a brand identity already and just want LSD's component library + animations
  • You're prototyping or shipping a one-off page
  • One of the eight palette presets fits your brand
  • You want vanilla framework features (motion, components, layouts)
  • You author CSS by hand and prefer file-based control
  • You're integrating LSD into an existing design system

✦ You DO need the editor

  • You want to author a custom brand palette with Orion contrast laws applied automatically
  • You need surface-aware components (auto-resolving text colors per surface)
  • You want to export a .lsd brand package for hand-off
  • You're authoring complex Behaviours wires via the visual JS builder
  • You need the Aurora timeline editor for scroll-driven scenes
  • You're designing a multi-brand or multi-tenant system
§06 · The full surface

Every module the framework ships.

Stylesheets are drop-in. Runtime modules are optional — import only what you use.

Stylesheets · drop-in CSS

lsd-tokens.cssRoot tokens — palette, type, radius, spacing. The contract every other sheet reads.
lsd-docs-shell.cssShared chrome — topbar, hero, section, grid, card primitives used by these docs.
lsd-buttons.cssUniversal animation library — every .lsd-fx--* class works on any element.
lsd-motion.cssFull motion library — keyframes, transforms, springs (unminified, source-mapped).
lsd-motion.min.cssProduction-minified motion library — same surface, ~40% smaller.
lsd-fx.cssTwo-tier animation framework — chainable .fx-* utility classes (Tier A) paired with data-lsd-fx="..." DSL parser (Tier B).
lsd-flt.cssLight-mode token overlay — flip when prefers-color-scheme: light.
lsd-mockups.cssBrowser-chrome, device frames, dashboard mockup primitives.
lsd-orbs.cssDecorative blurred-orb backgrounds used across hero scenes.
lsd-timeline.cssTimeline component styles — vertical & horizontal scrub-driven lists.

Runtime JS · optional

lsd-template.jsRegisters window.LSD with actions / state / wires — the Behaviours runtime.
lsd-scroll-trigger.jsWrites --lsd-progress as you scroll — feed it into any CSS calc().
lsd-pointer.jsWrites --lsd-pointer-x/y — pointer-following without JS in your CSS.
lsd-cursor.jsCustom cursor with galactic mutation per surface.
lsd-palette-switcher.jsFloating brand palette picker — drop in for live token swap demos.
lsd-typography-switcher.jsFloating font-stack picker — pairs with palette switcher.
lsd-aurora.jsKeyframe-timeline runtime — plays scenes authored in the Aurora editor.
lsd-mass.jsMass & gravity demos — design-as-physics primitives.
lsd-physics.jsPhysics simulator — springs, collisions, drag.
lsd-count.jsAnimated number counter — fires on scroll-into-view.
lsd-split.jsSplit text into words/characters for letter-stagger animations.
lsd-trail.jsPointer trail emitter — particle dots that follow the cursor.
lsd-scroll-text.jsScroll-driven text reveals — character by character or word by word.
lsd-fx-spawn.jsParticle + text effect spawner — confetti, sparks, ripples.
§07 · What's in the box

A complete library at v0.8.

Numbers animate when scrolled into view — yes, that's lsd-count.js doing the work.

17

Component primitives

46

Chainable animations

1038

Block patterns

60

Section scenes

52

Page templates

8

Palette & type presets

§08 · Next steps

Where to go from here.

Three ways to keep moving — browse the library, see it composed, or start authoring a brand.

01 · Browse

Blocks library

Heroes, cards, pricing, footers — 1,000+ patterns built from the same token vocabulary.

→ 02 · See it composed

Showcase

A long-form scroll-driven landing built end-to-end with the framework itself.

→ 03 · Author

Open the editor

Build a custom brand palette, export a .lsd package, drop it into any project.

→