Preview

Fade in

Opacity 0 → 1. The quietest entrance.

<div class="lsd-fx--fade-in">…</div>

<div data-lsd-fx="fade-in">…</div>

.my-elem {
  transition: opacity 400ms cubic-bezier(0.25, 1, 0.5, 1);
  opacity: 0;
}
.my-elem.is-in { opacity: 1; }

Slide up

Rises 32px while fading in.

<div class="lsd-fx--slide-up">…</div>

<div data-lsd-fx="slide-up">…</div>

.my-elem {
  transition: opacity 400ms, transform 400ms;
  transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
  opacity: 0;
  transform: translateY(32px);
}
.my-elem.is-in { opacity: 1; transform: none; }

Slide down

Drops in from above.

<div class="lsd-fx--slide-down">…</div>

<div data-lsd-fx="slide-down">…</div>

.my-elem {
  transition: opacity 400ms, transform 400ms;
  opacity: 0;
  transform: translateY(-32px);
}
.my-elem.is-in { opacity: 1; transform: none; }

Slide left

Enters from the right.

<div class="lsd-fx--slide-left">…</div>

<div data-lsd-fx="slide-left">…</div>

.my-elem {
  transition: opacity 400ms, transform 400ms;
  opacity: 0;
  transform: translateX(32px);
}
.my-elem.is-in { opacity: 1; transform: none; }

Slide right

Enters from the left.

<div class="lsd-fx--slide-right">…</div>

<div data-lsd-fx="slide-right">…</div>

.my-elem {
  transition: opacity 400ms, transform 400ms;
  opacity: 0;
  transform: translateX(-32px);
}
.my-elem.is-in { opacity: 1; transform: none; }

Zoom in

Scales from 92% to 100%.

<div class="lsd-fx--zoom-in">…</div>

<div data-lsd-fx="zoom-in">…</div>

.my-elem {
  transition: opacity 400ms, transform 400ms;
  opacity: 0;
  transform: scale(0.92);
}
.my-elem.is-in { opacity: 1; transform: none; }

Zoom out

Scales from 108% down to 100%.

<div class="lsd-fx--zoom-out">…</div>

<div data-lsd-fx="zoom-out">…</div>

.my-elem {
  transition: opacity 400ms, transform 400ms;
  opacity: 0;
  transform: scale(1.08);
}
.my-elem.is-in { opacity: 1; transform: none; }

Blur in

Focus-pull entrance via CSS filter.

<div class="lsd-fx--blur-in">…</div>

<div data-lsd-fx="blur-in">…</div>

.my-elem {
  transition: opacity 400ms, filter 400ms;
  opacity: 0;
  filter: blur(12px);
}
.my-elem.is-in { opacity: 1; filter: none; }

Bounce in

Overshoots 105%, settles to 100%.

<div class="lsd-fx--anim-bounce-in">…</div>

<div data-lsd-fx="bounce-in">…</div>

@keyframes bounce-in {
  0%   { opacity: 0; transform: scale(0.3); }
  50%  { opacity: 1; transform: scale(1.05); }
  70%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}
.my-elem { animation: bounce-in 600ms both; }

Elastic in

Rubber-band ease with multiple settles.

<div class="lsd-fx--anim-elastic-in">…</div>

<div data-lsd-fx="elastic-in">…</div>

@keyframes elastic-in {
  0%   { opacity: 0; transform: scale(0.4); }
  40%  { transform: scale(1.12); }
  60%  { transform: scale(0.96); }
  80%  { transform: scale(1.02); }
  100% { opacity: 1; transform: scale(1); }
}
.my-elem { animation: elastic-in 700ms both; }

Shake

Short horizontal wobble — attention grabber.

<div class="lsd-fx--anim-shake">…</div>

<div data-lsd-fx="shake">…</div>

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}
.my-elem { animation: shake 500ms both; }

Glitch

Small 2-axis wobble.

<div class="lsd-fx--anim-glitch">…</div>

<div data-lsd-fx="glitch">…</div>

@keyframes glitch {
  0%, 100% { transform: translate(0, 0); }
  20%      { transform: translate(-2px, 1px); }
  40%      { transform: translate(2px, -1px); }
  60%      { transform: translate(-1px, 2px); }
  80%      { transform: translate(1px, -2px); }
}
.my-elem { animation: glitch 400ms both; }

Pulse

Subtle breathing scale. Loops.

<div class="lsd-fx--anim-pulse lsd-fx--anim-loop">…</div>

<div data-lsd-fx="pulse loop">…</div>

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}
.my-elem { animation: pulse 400ms ease-in-out infinite; }

Float

Gently rises and falls. Loops.

<div class="lsd-fx--anim-float">…</div>

<div data-lsd-fx="float">…</div>

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.my-elem { animation: float 3s ease-in-out infinite; }

Drift

Slow atmospheric circle. Loops.

<div class="lsd-fx--anim-drift">…</div>

<div data-lsd-fx="drift">…</div>

@keyframes drift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(6px, -4px); }
  50%  { transform: translate(0, -8px); }
  75%  { transform: translate(-6px, -4px); }
  100% { transform: translate(0, 0); }
}
.my-elem { animation: drift 6s ease-in-out infinite; }

Spin

Continuous 360° rotation. Loops.

<div class="lsd-fx--anim-spin">…</div>

<div data-lsd-fx="spin">…</div>

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.my-elem { animation: spin 8s linear infinite; }

Token	Category	Purpose
`--color-primary`	Color	Primary brand accent
`--text-h1`	Typography	Fluid heading level 1
`--space-lg`	Spacing	Default vertical rhythm
`--radius-md`	Shape	Standard component radius
`--shadow-md`	Elevation	Raised surface

Designing systems, not screens.

Context flows automatically.

Surfaces — context-aware colors

Nested cascade — a card within a card

Outer card on primary

Nested card on elevated

Mix & match — tiers don't need a shared lineage.

Accent call-out

Dashboard card

Code surface

Just HTML, no classes — surfaces reach in.

Headline on primary

Release notes — v2026.4

Glossary

Deprecation notice

Tiers are selectors — target them by ID for one-offs.

Tier-2 promo — local link override

Hero metric

Team — $24/mo

Docs sidebar note

Typography Scale

Heading 1 — The quick brown fox

Heading 2 — jumps over the lazy dog

Heading 3 — pack my box with

Heading 4 — five dozen liquor jugs

Heading 5 — sphinx of black quartz

Components

Color

Type

Space

Cards on colored surfaces

Card on primary

Card on secondary

Card on surface

Card Hover Effects

Fade Variant

Slide-up Variant

Overlay Variant

Team Collaboration

Software Development

UX Design

Aspect Ratios

Layout theatre

Léa Sorensen

Design once. Ship everywhere.

Slideshow

Design tokens, live.

One block, every width.

Built on scroll-snap.

Surface-aware.

Scroll Animations

Fade up

Slide from left

Slide from right

Scale in

Fade only

Staggered

Animation library