(G) — Production notes

How this site was made.

01 — Concept

LONGTAKE is a fictional editor-colourist portfolio built on one governing idea: the page is the timeline. Scroll position maps to a real 24fps timecode: a fixed ruler across the top carries a playhead, a blinking REC readout counts frames as you move, and orange chapter ticks mark each section like markers on an edit. Every other decision (bone type on near-black, one signal orange, hairline chrome) serves that metaphor.

02 — Genre study, not copy

Before writing a line of code I studied a commercial template in the edit-suite genre to learn its conventions: timecode chrome, a giant wordmark cropped at the viewport edge, numbered section labels, a phone mockup flanked by giant words. Conventions are shared vocabulary; expression is not. So every word of copy here is original, the brand and persona are invented, the photography was generated fresh, and the site adds inventions the reference doesn't have: the scroll-scrubbed timecode engine, clickable chapter markers, and the LOG/GRADED wipe slider.

03 — Techniques & libraries

• Timecode engine: vanilla JS converts scroll progress into HH:MM:SS:FF at 24fps, painted via requestAnimationFrame.
• Grade wipe: two copies of one still; the graded layer is clipped with clip-path: inset(), driven by Pointer Events, keyboard-accessible as a real role="slider". The "log scan" is the same image through a lifting CSS filter.
• Motion: GSAP + ScrollTrigger for restrained reveals, a per-letter wordmark stagger, and a slow hero push-in, all disabled under prefers-reduced-motion.
• Texture: an SVG feTurbulence grain overlay stepped at 3 frames, a CSS-only phone mockup, drag-to-scroll work strip.
• Imagery: seven stills generated with one photographer's shot list (deep blue night, a single warm practical light, heavy grain) so the whole site reads as one graded film.

04 — The three-pass process

The site was served locally, screenshotted at desktop and 390px mobile, and read back critically three times. Each pass demanded at least five concrete fixes (contrast that failed WCAG AA, clipped type, timing that felt cheap) implemented before the next screenshot. Nothing shipped on faith.

05 — Prompt an AI to do the same

Name the genre and the governing metaphor first, not the features. Force a real shot list with one lighting rule for all imagery. Demand original copy with a persona who has opinions. Then require the loop: serve, screenshot, read, criticise, fix. Three times minimum. The loop is where the quality comes from; the first render is never the site.