How The Edit was made

One of five sites built autonomously by Claude Fable 5 (Anthropic's Claude, in Claude Code) to demonstrate AI web design. This one turns the site itself into a film-editing suite: a timecode bar, a draggable timeline, scenes, reels, and a media bin. Zero frameworks, zero images — one HTML file.

Concept

The brand began in the edit bay, and its third brand direction says "nothing is real until it's cut." So the interface is an NLE (non-linear editor). The scroll position is the playhead: a fixed top bar renders your progress as SMPTE timecode at 24 fps, and a fixed bottom timeline mirrors it with chapter markers you can click — or scrub by dragging, which drives the page scroll directly. Content is organized the way an editor thinks: philosophy as scenes with IN/OUT points, services as reels with statuses (ON AIR / IN POST / SLATED), the team as a media bin of clips.

Type & grid

• Archivo, a variable font, with font-variation-settings: "wdth" 125 — the expanded width gives the Swiss-poster punch without loading a second display family.
• Space Mono for everything an editing console would say: timecodes, slates, statuses.
• Paper (#F2EFE7) + ink (#141310) + one accent: timecode red (#E0311B). Hard 1.5px rules everywhere — the grid is visible, like an interface, not implied.

Motion — cuts, not tweens

Everything moves like film, not like a website: reveals are hard 3-step wipes (animation: cutin .35s steps(3)) — no easing, just frames. Hovers snap in two steps. The REC dot blinks with steps(2). The one continuous motion is the filmstrip marquee, because film through a projector is the one thing that's allowed to glide.

.cut      { clip-path: inset(0 100% 0 0); }
.cut.on   { animation: cutin .35s steps(3, end) forwards; }
@keyframes cutin { to { clip-path: inset(0 0 0 0); } }

A real bug worth knowing: an element clipped to zero width has zero visual area, so IntersectionObserver reports an intersection ratio of 0 and never fires. The fix: observe the unclipped parent and reveal the clipped children with a staggered delay.

The scrubber

The bottom timeline is ~30 lines of JS. Scroll → playhead: on every scroll event, page progress (0–1) sets playhead.style.left and re-renders the timecode. Playhead → scroll: pointerdown/pointermove on the track map cursor X back to a scroll offset with behavior: 'instant' while dragging so it feels like scrubbing, 'smooth' on a single click so it feels like seeking.

Details that sell the fiction

• Slate blocks (SCENE 01 · TAKE 03 · DIR: TDC) built from bordered mono spans.
• Each service reel counts your hovers as new takes — R—01 · TK 04 after three visits.
• The media bin lists the studio's crafts as clips: mira_montage_creative_direction.mov — ONLINE.
• Crop marks on section corners; sprocket holes are a one-line repeating radial-gradient.
• The filmstrip pauses on hover, like resting your finger on the reel.

Deploy

npx wrangler pages project create tdc-edit
npx wrangler pages deploy ./edit --project-name=tdc-edit

Static folder → Cloudflare Pages. This guide lives at /guide/ because Pages serves nested index.html files automatically.

Process

Write the whole site in one pass → headless-Chromium screenshots at five scroll depths plus mobile → critique like a design director → fix → repeat, three times. Pass one caught the IntersectionObserver/clip-path bug above (the entire headline was invisible); pass two caught multi-line clip artifacts on mobile, fixed with display: inline-block on the clipped spans.