`, meta description, og:title/og:description, a favicon (inline SVG data URI is fine), `lang`, and an og:image pointing at one of your media files (relative URL is fine). ## Craft requirements (this is the point) Each page needs a signature moment — something people screenshot and share — plus real depth underneath: - Advanced visual technique(s): custom GLSL shaders, three.js scenes (PBR, transmission, post-processing, particles, instancing), scroll-choreographed motion (ScrollTrigger pinning/scrubbing), kinetic/variable typography, generative canvas art, physics, cursor-reactive fields, clip-path/mask reveals, etc. Pick what fits the concept; don't stack everything. Your assigned direction below says what's expected. - Exceptional, deliberate colour palette and a type pairing that is NOT the default (no Inter/Roboto/Poppins as display faces; no generic purple-blue gradients unless your direction explicitly calls for it). - Micro-interactions: hover states, magnetic buttons, cursor, focus states, loading/intro choreography. - Responsive: works at 390px wide (no horizontal scroll, readable type, reduced effects on mobile). - Performance: cap devicePixelRatio at ~1.75 for WebGL, pause rAF loops when off-screen / tab hidden, lazy-load below-fold media, no layout shift, first paint fast. `prefers-reduced-motion` → calm version. - Accessibility: semantic landmarks, real headings order, alt text, visible keyboard focus, contrast AA for body text. - Zero console errors. No 404s. ## QA + the THREE iteration passes (mandatory; do not skip or merge them) Local server is already running: `http://localhost:8555/` serves the repo root (so your page is at `http://localhost:8555/<proj>/<variant>/`). Capture with the Windows Playwright: ```bash mkdir -p <temp>/o55 "/mnt/c/Program Files/nodejs/node.exe" '<repo-as-windows-path>\tools\shoot.cjs' \ http://localhost:8555/<proj>/<variant>/ '<temp>\o55\<proj>-<variant>-p1' --frames 6 --mobile # prints JSON (console errors, failed requests, overflowX, load ms); screenshots land in # <temp>/o55/<proj>-<variant>-p1-d0.png … -m5.png → Read them (the Read tool shows images). ``` (Headless WebGL works via ANGLE/SwiftShader; it may be slow but should render. Scroll reveals fire because the script scrolls viewport by viewport.) After the first complete build, run three separate passes. Each pass = capture → look at EVERY screenshot (desktop + mobile) with a fine-toothed comb → write findings → fix → re-capture to confirm: 1. **Pass 1 — Design & hierarchy:** composition, type scale/rhythm, spacing, colour, contrast, visual hierarchy, whether the signature moment actually lands, copy quality. Push the design further — add richness where it's thin. 2. **Pass 2 — Mobile, motion & accessibility:** 390px layout, touch behaviour, reduced motion, focus states, alt text, heading order, animation timing/easing polish, intro choreography. 3. **Pass 3 — Performance & technical:** console errors, 404s, media weight (`du -sh`), rAF/visibility pausing, DPR caps, lazy loading, final detail polish (favicon, meta, og, credit + /guide link, back-link). Log each pass to `/<proj>/<variant>/NOTES.md` is NOT allowed (it would be published) — instead write `_raw/<proj>/<variant>-passes.md` with: concept, techniques used, assets generated (prompts), and for each pass the issues found and what you changed. The final /guide page is compiled from these, so be concrete. ## Hand-back When both variants are done, reply with: for each variant — URL path, concept name + one-line concept, techniques, palette hex list, fonts, assets (count images/videos), media weight, pass summaries (1 line each), and any known issues. Keep it under 350 words per variant.

# OPUS 5.5 — Landing Page Factory · Build Spec (read fully before starting) You are one of several parallel builders. Every page is designed AND built by Claude Opus 5.5. The whole collection ships as ONE static site (nginx) at `https://opus55sites.agntc.io`. This is a public showcase that will be seen by a very large audience and credited to Opus 5.5. The bar: award-level (Awwwards SOTD / FWA) craft. Taste over gimmicks. Every page must feel like a different studio made it. ## Repo layout (repo root = ) ``` ///index.html ← your page (you may add style.css, main.js, etc. next to it) ///media/ ← optimized, published media for that page ONLY /assets/vendor/ ← audited, pinned libraries (DO NOT modify; DO NOT add CDNs for JS) /refs// ← Pinterest mood references (NOT published; never link them) /tools/fal.py, /tools/shoot.cjs ← asset + QA tools /_raw// ← raw generations (NOT published — put full-size PNG/MP4 here) ``` Only touch your own `//` dir, `/_raw//` and `/refs//`. Do not touch other projects, the root index, `/guide`, the Dockerfile or `/assets/vendor`. ## Libraries (self-hosted, already audited — use root-absolute paths) - three.js r185 (ES modules). Use this import map in ``: ```html ``` Addons available under `three/addons/`: controls, postprocessing, shaders, environments, geometries, loaders, utils, lines, math, objects, modifiers, misc, effects, curves, helpers, textures. - GSAP 3.15 (all plugins free): `/assets/vendor/gsap/{gsap,ScrollTrigger,SplitText,Flip,Observer,MotionPathPlugin,DrawSVGPlugin,MorphSVGPlugin,CustomEase,ScrambleTextPlugin,TextPlugin,Draggable,InertiaPlugin,ScrollToPlugin,Physics2DPlugin,EasePack}.min.js` (UMD, globals). - Lenis 1.3 smooth scroll: `/assets/vendor/lenis/lenis.min.js` (+ `lenis.css`). - matter-js 0.20: `/assets/vendor/matter/matter.min.js`. - Raw WebGL / Canvas2D / SVG / CSS (scroll-driven animations, view transitions, @property, container queries) — all fair game and encouraged. - Fonts: Google Fonts `` is allowed (fonts.googleapis.com / fonts.gstatic.com). No other third-party hosts at runtime: no analytics, no external images, no other CDNs, no iframes, no forms posting anywhere. - If you think you need a library that isn't here, write it yourself (you can). - Brand fonts named in your brief override the generic font advice below. Fonts not on Google Fonts may be self-hosted as woff2 in your page's `media/fonts/` when the licence allows it (Fontshare fonts are free for commercial use); fetch them once at build time. - Do NOT run git commands (the orchestrator commits). Do NOT start/stop the local server unless `curl -s localhost:8555` fails (then: `cd && nohup python3 -m http.server 8555 --bind 0.0.0.0 >/dev/null 2>&1 &`). ## Assets — generate them, they are key to the look `python3 tools/fal.py …` (run from repo root; stdlib only, reads FAL key itself; logs every call). - Images: GPT Image 2 — `python3 tools/fal.py image --prompt "…" --size 1920x1088 --quality high --out _raw//x.png` - Sizes must be multiples of 16, ≤3840 edge, aspect ≤3:1 (e.g. 1920x1088, 1088x1920, 1536x1536, 2560x1088). - `--ref refs//pin-3.jpg` (repeatable) switches to GPT-Image-2 edit, using Pinterest pins as STYLE references ("similar but different" — never reproduce a pin; describe the new subject explicitly). - `--transparent` for cut-out objects/sprites (png with alpha → optimize to webp keeps alpha). - ~35–60 s per image. Run several in parallel with `&` + `wait`. - Video: `python3 tools/fal.py video --image _raw//x.png --prompt "camera + motion description" --duration 6 --model veo --out _raw//x.mp4` (Veo 3.1 fast, 1080p, no audio, 4/6/8 s; `--model kling` = Kling 2.5 turbo 5/10 s). ~1–3 min each. Budget: at most 2 videos per page (≤ 4 per project). Prefer seamless-looping motion prompts (slow drift, subtle parallax, no cuts). Images: aim ≤ 8 per page. - Optimize before publishing (publish ONLY optimized files into the page's `media/`): - `python3 tools/fal.py optimize-image _raw//x.png //media/x.webp --width 2000 --q 80` - `python3 tools/fal.py optimize-video _raw//x.mp4 //media/x --width 1280` (→ x.mp4 + x.jpg poster) - Target: page total media ≤ ~6 MB; hero video ≤ ~2.5 MB; images ≤ 400 KB each. - Use `