---
name: Crucible
version: "1.0"
slug: crucible
tier: premium
price: 29
type: Craft studio / Atelier
axis: "9 — Scroll is the timeline (video scrub)"
theme: dark-hotglass-firesteel
gesture: "The hero video never plays — the visitor is the playhead. A fully preloaded, all-intra 19s film of molten glass sits pinned full-screen while a 560vh track converts scroll progress into video.currentTime, chased with a 0.12 lerp so the scrub feels oiled. Four chapter captions live at fixed points of the timeline; the loader with its percentage bar is part of the design, not a workaround."
colors:
  iron:     "#14171A"
  gunmetal: "#1B2126"
  steel:    "#262E35"
  petrol:   "#2F4854"
  steam:    "#8FB3C4"
  ivory:    "#F3EEE6"
  linen:    "#EAE2D4"
  ink:      "#20242C"
fonts:
  display: "Gloock"
  body:    "Instrument Sans"
spacing:
  s1: "0.25rem"
  s2: "0.5rem"
  s3: "1rem"
  s4: "1.5rem"
  s5: "2rem"
  s6: "3rem"
  s7: "4rem"
  s8: "6rem"
  s9: "8.25rem"
radius:
  sm: "3px"
  pill: "40px"
type-scale:
  hero:    "clamp(34px, 4.6vw, 64px)"
  section: "clamp(29px, 3.5vw, 46px)"
  cta:     "clamp(33px, 4.8vw, 68px)"
  card:    "23px"
  body:    "14.5px / 1.7"
  label:   "11–12.5px / ls .15–.42em"
full-kit: "https://www.stacklift.design/kit/crucible"
---

# Crucible — Design System

## §1 Identity

Crucible is a dark craft kit built on one idea: **scroll is the timeline**. The demo is the site of Crucible Glassworks, a fictional hot-glass studio, and its hero is a real 19-second film of a vessel being born — gathered, blown, shaped, annealed. The film never plays itself. Pinned full-screen behind a 560vh scroll track, it advances exactly as far as the visitor scrolls: the thumb is the playhead, the furnace obeys it. Four chapters caption the journey at fixed points of the scrub.

The palette refuses the obvious move. The fire stays inside the film; the interface answers it in cold steel — iron blacks, a deep petrol signal, its pale steam vapour — so the hero reads as a duel of fire against steel instead of tone-on-tone warmth. The page still performs the arc of the glass: it opens on iron (`#14171A`, the workshop at night), lifts through gunmetal and steel, and *anneals into ivory* by the gallery and the final call to action — from fire to light, in both the film and the CSS.

Petrol `#2F4854` is the only signal — used on light ground and as fills. Steam `#8FB3C4` is its vapour: kickers, hints, small signals on dark ground, the loader gradient. Gloock (a high-contrast display serif with blown, generous bowls) carries every headline; Instrument Sans does the quiet work.

## §2 The Signature Gesture — The Scrub Engine

Three pieces make the gesture, and all three are required:

```js
const LERP = 0.12;                      // chase factor per frame
// 1. FULL preload as a Blob, with a real progress loader
// 2. section.kiln { height: 560vh } + position:sticky video pinned inside
// 3. rAF loop:  target = progress * duration;
//               current += (target - current) * LERP;
//               video.currentTime = current;   // video stays paused, always
```

1. **Full blob preload.** A scrub on a half-loaded video stutters; the loader ("Stoking the furnace · 43%") is therefore part of the design. Nothing is revealed until the decoder has presented a first frame.
2. **All-intra encoding.** The MP4 must be encoded with a keyframe on *every* frame (`ffmpeg -g 1 -keyint_min 1`), or seeking judders. This is invisible in the code and indispensable — an ordinary MP4 will ruin the gesture.
3. **The lerp.** `current` chases `target` at 0.12 per frame, so brutal scrolling still lands as oiled motion. The clip is re-paused on every tick; the visitor is the only motor.

Chapter captions sit at `6% · 37% · 64% · 92%` of the scrub with a `7%` window and `6%` feather — windows sized so no two chapters ever overlap. Four timeline ticks (bottom-right) each fill across a quarter of the track: the only UI admission that the visitor is holding a timeline. On mobile the track shortens to 460vh and a portrait crop of the same film (`video/hero-mobile.mp4`) is served.

**Tunable feel constants:** `LERP` (0.12 — lower = heavier, oilier) and the track height (560vh — taller = slower film per scroll-length). Tune these two first.

## §3 Color

- `--iron` — the workshop at night; hero ground and footer. Never `#000000`, and never brown: the warmth belongs to the film.
- `--gunmetal` / `--steel` — the lifting steps of the arc; intro and craft sections.
- `--petrol` — THE signal: buttons and hovers, selection, eyebrows on light ground, the "soon" flags. Deep enough to hold on ivory; never asked to glow on dark.
- `--steam` — petrol's vapour, for dark ground: chapter kickers, card indices, stats accents, the scroll hint's wheel, the loader gradient's pale end.
- `--ivory` / `--linen` — the annealed light of the gallery and CTA; the arc's destination, kept warm because the linen photography demands it.
- The fire — every orange and amber on the page — lives exclusively in the film and the vessel photography. They are content, exempt from the UI palette; the interface never imitates them.

## §4 Typography

- **Gloock, 400 only** — headlines, chapter titles, stats, card titles, gallery captions. Never bolded, never tightened; its drama is built in. It holds text-shadow well over video.
- **Instrument Sans** — body 400/500, labels 600. All uppercase labels run generous tracking (`.15em` nav → `.42em` chapter kickers).
- Chapter kickers follow one pattern: `Ch. 0N` in ember + em-dash + lowercase chapter name in amber.

## §5 Layout & Spacing

The hero owns the drama; everything after it stays calm — that is the rest-zone contract. Sections are classic and centered: a statement intro with three organic stats (1,120°C · 26 · 9 days), a three-card method grid seamed with 2px hairline gaps (joints as leading, not borders), a 2-column gallery grid (`1.35fr/1fr`, tall and wide accents), one big CTA. Radius is binary: 3px on imagery, 40px pills on actions — glass is either cut or blown. The Design System lives as a full-screen slide-up view reachable from nav, CTA and footer, never as a page section.

## §6 Agent Instructions

You are adapting Crucible for a new subject. Rules:

- **Edit freely:** the studio's name and story, chapter titles and copy, stats, cards, gallery pieces, all imagery — and the film itself. The engine will scrub any MP4: a build, a pour, a print, a dawn, a route being drawn. Pick a subject with a true A→B transformation arc; the scrub is wasted on a loop.
- **Preserve exactly:** the scrub engine (blob preload → prime → lerp loop), the pause-enforcement, the caption window math, the loader-as-design, the fire-to-light section arc (adapt the two poles to your palette, but keep the page annealing from dark to light — or invert it deliberately, once, for the whole page), and the palette's refusal to imitate the film: the footage owns the warmth, the interface answers in a contrasting temperature.
- **The film:** re-encode all-intra (`ffmpeg -i in.mp4 -c:v libx264 -preset slow -crf 21 -g 1 -keyint_min 1 -an -movflags +faststart hero.mp4`), keep it 15–25s and under ~15 MB, and ship a portrait crop for mobile. Slow, static-camera footage scrubs best; fast cuts fight the thumb.
- **Chapters:** 3–5 anchors, centers spread so `span + feather` windows never overlap; first chapter fully visible at progress 0.
- **The screenshot test:** a still frame of this kit shows a photo and a caption — it cannot show that the visitor holds the timeline. If your adaptation reads complete in a screenshot, the scrub has become decoration; restore the arc.

Full kit: https://www.stacklift.design/kit/crucible