Stacklift.
Preview Crucible
View live demo
Iron · Petrol · Scroll-Scrubbed Film

Crucible

Premium design system for craft studios and ateliers whose work deserves to be watched, not told — glassblowers, forges, printers, distilleries, any true A-to-B transformation. A 19-second film of molten glass sits pinned full-screen, fully preloaded, encoded all-intra — and it never plays: scrolling is the only motor, the visitor's thumb is the playhead. Four chapters caption the scrub while the page itself anneals from iron to ivory, fire to light, in step with the glass. A still frame shows a photo and a caption; it cannot show that you are holding the timeline.

What's included

  • design.md

    Agent context · DESIGN.md spec-compliant

    Download free
  • index.html

    Visual demo + component showcase

    View demo
  • kit.zip

    design.md + index.html · all in one

Buy — $29

Secure payment · Instant delivery · VAT included

Components included

Video Scrub Engine (scroll is the timeline)Blob Preloader with Progress (loader-as-design)All-Intra Encoding Recipe (ffmpeg)Chapter Caption Windows (non-overlapping)Timeline TicksFire-to-Light Section ArcHairline-Seamed Method GridGallery Grid (tall / wide accents)Gallery Lightbox (DOM-reuse, standalone-safe)Brand → Rewind-to-HeroDesign System OverlayMobile Portrait Crop Variant

Use with your AI agent

Via design.md

  1. 01Download design.md and place it at your repo root.
  2. 02Your agent (Claude Code, Cursor, Copilot) reads it automatically on startup.
  3. 03Ask it to generate components — it applies your tokens and rules.

Via index.html

  1. 01Download the ZIP and extract index.html.
  2. 02Provide the index.html content as context to your LLM.
  3. 03Customize the CSS variables in :root for your brand.