Skip to content

v1.1.0 — build-deck motion

Choose a tag to compare

@LeoHChen LeoHChen released this 19 May 18:54
v1.1.0
495ed8c

A three-layer motion system for build-deck's Present mode. All CSS-only, no new dependencies, fully gated by prefers-reduced-motion.

What's new

Layer A — Slide transitions

When you advance to the next slide in Present mode, the swap is animated. Four variants:

  • Fade — opacity in/out
  • Slide — translateX in/out with cross-fade
  • Zoom — scale + opacity, atmospheric
  • Cut — no animation (deliberate, for Brutalist)

Each theme has a default; a new Motion dropdown in the topbar lets you override.

Theme Default Theme Default
Terracotta Fade Mono Slide
Carbon Slide Aurora Zoom
Berry Fade Brutalist Cut (deliberate)
Lab Slide Dusk Fade

Selection persists to localStorage.deck-transition.

Layer B — Element entrance cascade

When a slide becomes current, its title, subtitle, and cards / pillars / nodes stagger in over ~500ms. Brutalist and Lab deliberately opt out.

Layer C — Per-theme background motion

Each theme has a distinct background-motion signature in Present mode:

  • Aurora — gradient hue-drift, 20s loop
  • Mono — dotted-grid pulse on each slide change
  • Carbon — scanline drift, 8s loop
  • Berry — vignette breathe, 8s loop
  • Terracotta — paper grain texture (static — warmth, no motion)
  • Brutalist + Lab — deliberately static
  • Dusk — none in v1.1 (particle field deferred to v1.2, needs JS)

Reduced motion

All animations are gated by @media (prefers-reduced-motion: no-preference) and overridden by a blanket kill switch when the OS reports prefers-reduced-motion: reduce. Decks stay fully functional — transitions become instant, looping animations stop.

Design and plan

What's next

v1.2 — Publish & Share:

  • make publish DECK=<name> → Cloudflare Pages
  • Single-file HTML bundle (make bundle DECK=<name>)
  • Speaker mode (BroadcastChannel)
  • Password protection / signed URLs

Closes #5.