Skip to content
LSD Framework
Sections · marketing-hero · variants

Marketing hero · 10 layouts

Same primitives, different stories. Each variant reuses the canonical chrome and primitives — only layout shifts.

v01 · centered
v4.0 · ships container queries

Ship pages that move at the speed of thought.

A design substrate, not a builder. Compose primitives, blocks and animations into shippable scenes.

v02 · split-left
New · v4.0

Compose. Animate. Ship.

Text-first hero. Visual rests at the right of the eye line so the headline lands first, the image follows.

v03 · split-right
Mirror layout

Lead with the visual.

Image left, copy right. Useful when the visual carries more weight than the headline.

v04 · fullscreen-video-bg
Cinematic

Pages that feel like film.

Animated full-bleed background. The copy floats. The motion is CSS — no video file.

v05 · with-rotating-headline
Dynamic copy

Ship pages that move. scale. ship.

A single headline that cycles through three values. CSS keyframes, no JS dependency.

v06 · blackhole-cursor
Accretion · cosmic

Everything pulls toward the work.

A rotating accretion disk frames the call to action. CSS-only — no canvas, no JS.

v07 · typing-headline
Animated entrance

Design the substrate. Compose the page. Ship the pack.

Three lines that type themselves. The CTAs settle in once the cursor finishes.

v08 · meteor-shower-bg
Cosmic

Ideas arrive in showers.

A diagonal meteor shower runs across a starlit backdrop. The page feels alive without distracting from the headline.

v09 · orbital-decor
Orbital

Three forces. One field.

Three decorative orbs orbit at independent rates. Decoration is rhythmic, not random.

v10 · parallax-depth-layers
Depth

Stack layers. Build depth.

Four parallax bands — far stars, soft clouds, near orbs, and foreground content. Independent drift rates.

↩ Canonical layout
All sections