Skip to content
LSD Framework
Sections · product-showcase · variants

Product showcase · 10 layouts

Same primitives, different stories. From classic side-by-side to scroll-driven narrative.

v01 · split-classic
Product

Built for makers. Loved by teams.

Side-by-side: visual establishes scale; copy carries the spec.

  • Drag-to-resize with token snap
  • Container-query responsive
  • Aurora timeline editor included
See specs →
v02 · image-grid-with-text

Three angles. One story.

Mosaic the product across feature, detail, and use-case. Copy provides the through-line.

v03 · carousel

Slide through the line.

Horizontal scroll-snap carousel — touch-native, no JS required.

Model A · Studio

For desk work. Quiet build. 14h battery.

Model B · Pro

For pros. Throttle override. 8h battery.

Model C · Travel

Featherweight. Folds flat. 12h battery.

Model D · Team

Multi-seat. Cloud-synced. Org plans.

v04 · tabbed-features

Pick a chapter.

Design with tokens

Every value snaps to a token. Drag, don't type.

v05 · stacked-narrative
Chapter 1

Start with the substrate.

Tokens, primitives, and surfaces sit underneath every page.

Chapter 2

Compose, don't draw.

Layer primitives into blocks. Layer blocks into sections.

Chapter 3

Ship the same library.

The pack you ship matches the editor you build in.

v06 · cinematic-loop
Looping reel

Watch the work move.

Fullscreen looped backdrop. The product carries the room; copy sits on top.

Press play →Specs
v07 · interactive-3d-spin
360°

Turn it. See it.

Drag-rotate the product. Specs anchor to each visible face.

  • Aluminium chassis · milled, anodized, hand-tested
  • Aurora display · 120Hz, true-black, color-managed
  • Modular ports · swap connectors without tools
v08 · before-after-toggle

Before. After.

Drag the slider to compare the new build against the previous generation.

BeforeAfter
v09 · feature-modal-grid

Six surfaces. Six stories.

Tokens

Every value resolves to a token. Drag-snap, no raw px.

Surfaces

Custom token → surface stack via Orion-law.

Motion

Aurora timeline. Track-based, not tween-based.

Behaviours

Visual JS builder. Trigger → Action → Target.

Responsive

Breakpoint + container-query overrides.

Export

.lsd pack, framework-agnostic, agent-ready.

v10 · scroll-pin-spec-reveal
Spec 01

Forged in tokens

Every dimension snaps to a scale.

Spec 02

Modular surfaces

Stack tiers, swap roles, no rebuild.

Spec 03

Track-based motion

Aurora layers + draggable beats.

↩ Canonical layout
All sections