Golden Ticket

A reconstruction by Jetha Chan (@jetha) driving Claude Fable 5, of the spinning holographic golden ticket easter egg that hyped the launch of Threads inside Instagram — rebuilt as a single WebGL fragment shader.

Credit

This is not Meta’s shipping code. It is a reconstruction by Jetha Chan (@jetha), authored with Claude Fable 5, rebuilt from Tim Oliver’s conference talk about how the original was made.

The original effect was built by Tim Oliver (Instagram, Tokyo) and the Threads team at Meta for the Threads launch in July 2023 — five CALayers, a sliding contentsRect gradient, a tiled logo mask, an overlay compositing filter, and a sliding specular highlight, spun by a frictionless pop spring animation.

Source talk: Easter Eggs are Cool — Building the Golden Ticket in Threads

What this is

Instagram hid a ticket in search results for “threads” in the run-up to the Threads launch: your username, your join number, a QR code, and an irrationally over-the-top bright holographic foil that slid around as the ticket spun. This demo re-creates that recipe in one fragment shader: dim the card → slide an over-bright rainbow gradient → clip it with a tiled logo mask and overlay-blend onto matte gray → seal it with a sliding specular highlight. The card idles in a slow left-to-right spin, exactly like the talk’s demo footage.

How to poke it

Drag the ticket to scrub it around; flick it and it spins out at your flick velocity, then decays back to the idle spin — the same frictionless-spring trick as the original.

Open the Shader tab to edit the GLSL live. Hit Compile (or Ctrl+Enter). Errors show under the editor without killing the last good program.

For the reconstruction story — wrong turns included — see Fable’s worklog.

Reconstruction by Jetha Chan (@jetha) with Claude Fable 5, of the Threads golden ticket easter egg described by Tim Oliver. Built for learning shaders — not affiliated with or endorsed by Tim Oliver, Meta, Instagram, or Threads. The ticket shown is a mock-up; the QR pattern is decorative noise and scans to nowhere.

Fable’s worklog

Abridged session notes from building this reconstruction with Claude Fable 5 (driven by Jetha Chan). Not a raw chat dump — the arc of what was tried, fixed, and shipped.

Turn 1

Brief: rebuild the Threads golden ticket from Tim Oliver’s talk

Jetha pointed at the talk and at the earlier marathon-spinner reconstruction: same site chassis, same tester-page format, new effect. Target: the spinning holographic invite ticket Instagram hid behind searching “threads”, idling in a slow left-to-right spin like the demo footage.

Turn 2

Transcript archaeology: extracting the four-step recipe

YouTube wouldn’t give up the page content, so yt-dlp pulled the auto-captions instead — 32k characters of transcript. Inside it, the whole implementation, in order: perspective via m34, dimming with angle, a pop spring animation with friction 0 for the endless idle spin, an over-bright Instagram-gradient texture slid across the card with contentsRect, a tiled Threads-logo mask that stays put while the gradient slides beneath it, an undocumented compositingFilter overlay blend onto matte gray (“you can’t get more white than pure white”), and a final sliding specular + rim-gradient layer so no region ever reads flat.

Turn 3

Five CALayers become one fragment shader

No layer tree here — a ray from the camera intersects the card’s rotated plane, giving local ticket coordinates per pixel. The contentsRect slide becomes a hue phase driven by the rotation angle (one quarter-turn ≈ one full slide), the mask becomes SDF coverage, the overlay blend is three lines of GLSL, and the specular is a Gaussian blob whose center tracks sin(angle) with opposing rim gradients — so, per the talk, there’s never a point on the ticket that’s a solid consistent color.

Turn 4

Ticket furniture: bit-packed font, fake QR, die-cut notches

The real ticket carried a username, join number, date, and QR code. Text here is a 4×5 pixel font bit-packed into ints (one glyph per int, precision highp int forced — the marathon build already paid the mediump-int tax on mobile so this one didn’t have to). The QR is decorative: three real finder squares plus hashed noise modules. The silhouette is a rounded rect minus two notch circles at the perforation line, dashes inked across.

Turn 5

Spin physics: the frictionless spring, drag, and flick

The host owns the angle, the shader just renders it. Idle: constant velocity — a spring animation with friction 0, forever, like the original. Drag maps edge-to-edge to 180°, the talk’s exact ratio. On release the smoothed flick velocity takes over and decays exponentially until it reaches idle speed, then locks there — flick it hard, watch it spin out, settle, and keep cruising.

Turn 6

Shipping: private repo, Actions, Cloudflare Pages

Different route from marathon-spinner (GitHub Pages): this one started life in a private GitHub repo — which rules out free-plan GitHub Pages — so GitHub Actions deploys it to Cloudflare Pages with wrangler pages deploy on every push to main. Cloudflare API token via Bitwarden Secrets (bws), custom domain goldenticket.jethachan.net, proxied CNAME, HTTPS. The repo has since been made public; the pipeline didn’t have to change.

Turn 7 · latest

“You couldn’t download the video?” — the fidelity pass

Jetha asked why the video itself never got downloaded. Fair. The first build was transcript-only — recipe-faithful, layout-invented: side notches, a big foil badge on the front, “GOLDEN TICKET” across the top, full-RGB rainbow. Downloaded the talk, frame-sampled the demo sections, and the real ticket disagreed: notches punched top and bottom center, a left-aligned DATE / TIME / USERNAME column in typewriter caps, small QR at lower left, avatar + join number on a bottom row, logo in plain ink at top right — and the big logo lives on the back, in ink, not foil.

The foil was also recalibrated against footage: near-invisible face-on, vivid pastels (purple → pink → peach → gold, not full RGB) at glancing angles, dense dot-grid mask. And a fun full-circle moment: the over-bright gradient barely tinted the near-white card — the exact “you can’t get more white than pure white” problem from the talk — so the foil is now part overlay, part direct color.

Abridged for reading. Full tooling: WebGL2, yt-dlp transcript + frame sampling (ffmpeg), Cloudflare API via bws, GitHub Actions → Cloudflare Pages.