/guide — process notes

How this
was made

A repeatable recipe. Everything here is vanilla HTML/CSS/JS — no framework, no build step — so the whole site deploys to Cloudflare Pages by dragging the folder in, and the same system can be re-skinned for any client.

01 · One idea rules everything

The concept is the current: a single scroll value (0→1 down the page) that drives the hero shader's flow, the infinity stroke drawing itself, the video scrubbing, and the holo foil angle. When every motion system listens to the same signal, the page feels like one object instead of a stack of effects. That coherence is the actual award-winning trick — not any individual effect.

02 · Materials, not decorations

The design system has exactly three materials, so nothing competes:

Ink — dark plum (#120B18 → #31203F), never pure black. Acrylic — semi-transparent diffused panels: a tinted gradient + backdrop-filter: blur(18px) saturate(1.3). Holo foil — an animated conic gradient (gold → pink → cyan → chartreuse) used only as a 1px hairline, applied with a CSS mask padding trick. The restraint is the point: rare foil is rare. If the gradient ever fills a surface, it stops reading as precious metal.

Accents: chartreuse #D8FF3A is the current (interactive, alive); ember #FF5C1F is the disruptor (used maybe five times total, so each use pops).

03 · The hero shader

The hero is a fragment shader (raw WebGL, ~60 lines of GLSL): domain-warped FBM noise — fbm(p + 3·fbm(p + 3·fbm(p))) — colorized through the plum→chartreuse→ember palette, with pointer position injecting a warm eddy and scroll pushing the drift. Since you know TouchDesigner/GLSL, this is the same FBM warp you'd build there; view source on js/main.js and tweak the constants live. A film-grain term keeps it looking printed rather than rendered. If assets/video/hero-loop.mp4 exists, it fades in over the shader automatically.

04 · Scroll-scrubbed video

Each video's element position maps to a 0→1 progress, then video.currentTime lerps toward progress × duration each frame. The lerp (factor 0.18) is what makes it feel liquid instead of stepped. Requirements for buttery scrubbing: short clips (4–8s), keyframe every frame (see encode command below), muted, and no audio track at all. Your mirror-loop idea is exactly right — a ping-ponged clip means scrubbing backward looks intentional at any scroll position.

Encode command for scrub-ready video:

ffmpeg -i in.mp4 -an -g 1 -crf 23 -pix_fmt yuv420p -movflags +faststart out.mp4

(-g 1 = all keyframes: bigger files, instant seeks. Keep clips ≤8s.)

05 · Procedural placeholders

Every media slot draws a generative canvas (seeded flow filaments in the palette) until its real asset exists. The loader tries data-src; on success the asset swaps in, on 404 the placeholder stays. This means the site ships gorgeous on day one with zero assets, and you upgrade it just by dropping correctly-named files into /assets. No HTML edits needed.

06 · Asset spec sheet

Generate in Krea2 / animate in Wan 2.2, name exactly as below, drop into place:

07 · Adding future work

Duplicate a .work-card block, point data-src at assets/img/work-yourproject.webp, replace a "Charging" slot. Gallery grows by duplicating a figure. That's the whole CMS.

08 · Deploying on Cloudflare Pages

Framework preset: None. Build command: empty. Output directory: /. Push the folder to a repo (or direct-upload). Atomic deploys mean every change ships as a whole — same model you discovered on AllisonColor. Point dddylan.com at it in the Pages custom-domain panel.

09 · The client recipe, condensed

1. Pick one concept that scroll can drive. 2. Define three materials max, one used at 1px. 3. Ship with procedural placeholders so the site is beautiful before assets exist. 4. Spec assets by exact filename so production is drag-and-drop. 5. Iterate in passes: spacing → motion → mobile → accessibility. Repeat per client with new palette + new shader.