Single-file HTML explainer prompt — seek(t) method

<direction> An 8-second single-file HTML explainer of the seek(t) method. Kicker: THE METHOD BEHIND EVERY FILM HERE. Title: "The seek(t) method". A ruler spans the frame with t=0, t=4s, t=8s ticks; a playhead sweeps it across the whole film. Below, three step cards — DESCRIBE, COMPUTE, DRAW — sit dimmed and light to full as the playhead passes each one. Footer: "SAME t IN → SAME FRAME OUT. EVERY TIME." Banned: glows, gradients, code screenshots, anything that moves except the playhead and the lighting cards. </direction> <structure> Beat 1 (0.2–1.1s): kicker, title, sub-line rise in. Beat 2 (1.2–7.6s): the playhead sweeps the ruler at constant speed (linear ease — a playhead that eases is lying). Cards light at 1.35s / 3.5s / 5.65s, as the head reaches them. Beat 3 (7.0s): footer fades in. Hold. </structure> <build> ONE self-contained HTML file, 1280x720 landscape, paused GSAP timeline, every frame a pure function of time. The playhead is two elements (stem + dot) translated by the same linear tween. Dimmed cards start at opacity 0.25 — set in the timeline build, not via per-element fromTo tweens (which apply their start state at build time and break later seeks). </build> <gotchas> Small grey labels on near-black will fail a contrast check (ours did, at 3.45:1) — tick labels and footers sit at #9a9a9a or brighter in this design system. Dim is a look; unreadable is a bug. </gotchas> Before you finish: step through the timeline at five points and fix anything that overlaps, clips the frame, or drifts off the beat grid.