How to make Claude better.

- Over-aggressive regex deleting good cards alongside flagged ones (growuild.org cleanup). Always preview substring matches before bulk replacement. - HTML-tag-broken matches missed on rename — Chen & Associates vs Chen <span>&</span> Associates. Always do a full grep after rename, not just pattern match. - Renamed cards but never created new CF projects — left dead links pointing to heartlands-cards.pages.dev etc. Either rename underlying site OR keep card pointing to existing project. - Deployed without verification — wrong scroll positions in tests led me to declare chapters 2/3 broken when they actually worked. - Translate(-50%,-50%) baked into spin keyframes shifted rings off-center. Cleanup unused keyframes after deleting components. - Framer motion's transform on motion.div clobbers inline style.transform — wrap motion.div inside positioning div, not the other way around. - Used trademark-conflicting names without IPOS check — FORGE Fitness incident. Always check Singapore IPOS before fictional brand naming. - Forgot user said "real client" when nuking sites in trademark cleanup. Verify list of real-vs-demo clients before destructive ops. - Lenis wheelMultiplier > 1.0 + short duration = stuttery scroll. User reported "1% to 10% jumps" on ASTRA. wheelMultiplier:1.15 + duration:0.85 + ease-out cubic amplified each wheel tick into a chunky ramp. Default for cinematic sites: {duration:1.2, easing:t=>Math.min(1,1.001-Math.pow(2,-10*t)), wheelMultiplier:1.0, lerp:0.1, smoothWheel:true, smoothTouch:false}. Don't multiply wheel input unless the user explicitly says scroll feels slow. - Visual bugs invisible to DOM/state checks. Two real bugs (ASTRA rail tooltip occluding stat content, Handbook toolbar background too transparent) only surfaced when I took screenshots and looked. Lesson: after any UI change, take screenshots at multiple scroll positions on desktop AND mobile. Don't rely solely on opacity/state assertions. - BIG ONE — Reaching for compositor effects (Glare, bloom, streaks) instead of building proper materials/geometry on premium work. Did this on the ASTRA constellation: when it looked flat, I added Cycles Glare nodes (Fog Glow + 4-point Streaks) to fake quality. User correctly called it out — "this is just a low quality glow" — because compositor effects strip specificity and turn anything into the same generic "CG-toy lens flare" look. The bottle work was good because real PBR + physics did the work, with restraint. The constellation was bad because I bolted on post-process effects to mask weak geometry/lighting. Hard rule for premium work: if a render feels flat, the answer is NEVER bloom/glare/streaks. The answer is better geometry, better materials, real volumetric atmosphere, or restraint (more darkness, fewer elements). Compositor glare is the Photoshop "lens flare" filter of 3D — amateur tell. - BIG ONE — NEVER start premium work without researching real references first. User has a curated inspiration archive at growuild-inspirations.pages.dev with ~100 sites. ALWAYS visit 3-5 relevant references BEFORE building any high-end concept. The bottle work was good because I had side.jpg as a constant reference. The constellation was bad because I improvised without studying actual cinematic space-design references (lusion.co, cosmos.studio, igloo.inc, NASA APOD, Apple AirPods spatial-audio scene). Required workflow for premium client/portfolio work: (1) Open the inspirations site + 2-3 specific references for the exact thing being built, (2) identify the principles that make them premium vs amateur (usually: restraint, real materials/physics doing the work, darkness dominates, depth via volumetric not post-process), (3) plan around those principles, (4) THEN build. Skipping the research pass is the single biggest predictor of mediocre output. - BIG ONE — One reference is not research. On the ASTRA constellation rebuild I shortlisted 6 sites; only cosmos.studio actually delivered usable celestial reference (others were loading-state, cream-bg non-celestial, or DNS-failed). I almost extracted "principles" from a single data point. Hard rule: minimum 3 confirmed-relevant premium examples before generalizing into principles. If round 1 yields only 1 hit, do a round 2 with different search terms before building anything. One reference = a screenshot to copy; three references = a pattern to design from. - RECIPE — Premium celestial / cinematic-dark scenes (cosmos.studio decomposition). Reference: cosmos.studio. What makes it premium: • Darkness ~95% of pixels — near-black BG (#05060a, never flat #000 — leaves room for star contrast without banding). • Stars are 1-3px pinpoints — single emissive pixels or 2px icospheres. NEVER cross-bursts, NEVER bloomed halos, NEVER 4-point sparkles. • Uneven density gradient — sparse at edges, denser around the focal point. Weighted random, not uniform scatter. • One hero element per frame — cosmos.studio has a central instrument-dial; not "lots of cool things competing." Pick one anchor. • Technical monospace anchor — small JetBrains/Berkeley Mono labels (10-11px, all-caps, low-opacity white) reading like coordinates / instrument data. Anchors the frame as scientific instrument not wallpaper. • Color: ONE accent at ~5% of pixels — stars stay white; accent appears on a thin 0.5px connecting line or single ring. Never paint the stars themselves. • Material does the work, never compositor — emission shaders on tiny geometry. No Glare nodes. If it looks flat, fix material/geometry, don't add post-process. • Tech on cosmos.studio: Three.js, stacked canvases (separate passes for star field + instrument), Lenis. Anti-pattern that fails this recipe: big bloomed cross-stars filling 40% of the frame with saturated colors — reads as 2008 Photoshop lens-flare every time. Iter 3 advanced moves (the difference between "decent" and "portfolio-tier"): • Hero element hierarchy — primary node ~1.5× the others, with a thin orbital ring (torus, minor radius 0.0025) tilted ~75° around it. Animate the ring rotating ~45° during the chapter window. This is the cosmos.studio "instrument dial" trick. • Bond hierarchy — main 2 bonds ~45% thicker than aux bonds. Gives the shape READABILITY instead of "all lines same." • Real diffraction spikes (NOT compositor glare) — on the brightest 5-10% of stars, add 4 razor-thin emissive PLANES forming a "+" cross (length 0.20-0.34, thickness 0.0006). Track to camera via constraint. This is the cinema-photography aperture-blade look. • Star palette: 6 classes weighted — 55% white (G-type), 18% warm-cream (K), 10% amber (M), 10% cool-blue (B), 5% hot-blue (O), 2% red-dwarf. Real star fields have chromatic depth. • 3-layer star depth — 30% far (r=28-45, dim, tiny), 50% mid (r=15-28), 20% near (r=8-15, brightest, biggest). Gives parallax feel during camera dolly. • Faint volumetric halo at hero — small uvSphere (radius ~0.32) at primary node center, with Volume Scatter material at density 0.7, color = chapter accent. Gives the chapter color a soft glow that ISN'T post-process bloom. Cycles needs volume_step_rate=0.4, volume_max_steps=24 for clean render. • Billboard stars facing camera — use planes with TRACK_TO camera constraint, not icospheres. Sharper pixel-edges, ~5× faster render. • Standard view transform, not Filmic — Filmic's high-emission rolloff softens bright pixels into "puffy clouds." For pinpoint stars + thin lines you NEED hard edges, which Standard preserves. Render time benchmark: 60 frames × 1920×1080 × 128 samples × Cycles GPU CUDA = ~24 min on RTX-class GPU with the iter 3 setup (volume halos + diffraction spikes). Without volumes drops to ~16 min. - RECIPE — "Single-column dark vertical stack" (obys.agency style). Reference: obys.agency (Awwards SOTY). What makes it premium: • 95% pure black BG with content confined to a narrow center column (~640px wide on a 1280 viewport). • Project tiles stacked vertically — square thumbnails one after another. NO horizontal navigation. NO sidebars. Scroll IS the navigation. • Tiny monospace "99" counter top-right — same scientific anchor pattern as cosmos.studio (8-9px mono, bottom-of-corner placement). • Custom proprietary font ("Obys") declared in body — paid agency-only typeface gives unique signature. For demos use Migra, PP Editorial Old, or GT Sectra. • WebGL canvas for project thumb hover effects (transitions / displacement maps). When to use: agency portfolio that wants to scream "we don't show off, the work does." Radical commitment to single-column scroll + black BG = anti-trend statement. Anti-pattern: filling the black BG with stars, gradients, ambient effects. Empty black IS the design. - RECIPE — "Editorial cream + huge condensed display + pastel column blocks" (akaru.fr style). Reference: akaru.fr. What makes it premium: • Cream/off-white BG (~#f5f3ec), NOT pure white. Slight warmth signals editorial, not tech. • HERO TYPE: condensed bold display ("AKARU" in Anton/Druk-style super-condensed sans, easily 200-300px on desktop). The brand name IS the hero element, not a tagline. • Right-side pastel column blocks — solid color rectangles in 4 muted tones (sage, dusty pink, periwinkle, mauve) creating a visual ladder down the right edge. Photos peek through some. • Pill nav with colored bullet dots — each section has a tiny colored circle (orange, green, red, blue) before its label. • Numbered thumbnails ladder on far right edge (01, 02, 03 mini-tiles indicating projects below). • Body type: paragraph max ~520px wide, sans (light weight) sitting under the display monogram. French/multilingual sites lean into long sentences here. When to use: agency that wants editorial-magazine feel + bold typographic identity. Works for translated/multilingual brands (FR/EN/PT). Anti-pattern: using Inter or Space Grotesk for the display word — kills the editorial feeling instantly. Must be a condensed display face (Anton, Druk, Akzidenz Grotesk Black Condensed, NaN Holo). - RECIPE — "Product-as-monument on cosmic landscape" (organimo.com style). Reference: organimo.com. What makes it premium: • Single product centered on a dramatic landscape — bottle/jar/object floating above a mountain ridge, with a starfield BG. The product is the only subject. • BG is photographed/rendered terrain — not flat color. Volcanic rocks, alpine ridge, lunar surface, etc. Adds scale + drama. • Tagline in italic-display serif ("Limitless begins here.") at lower-left, separate from the product. • Colored micro-dots in top corners (pink/orange) — UI accents that signal "interactive" without dominating. • Lenis smooth scroll + WebGL canvas for product reveal animation on scroll. When to use: hero product launch where the SKU itself is iconic (skincare, supplement, fragrance, audio device). Works only when the product genuinely deserves monument treatment — don't apply to commodity. Anti-pattern: three products competing in the hero. If you have a product line, pick ONE flagship for the monument shot, link the others below. - RECIPE — "Radial typography as identity" (patrickmason.studio style). Reference: patrickmason.studio. What makes it iconic: • Studio name letters arranged AROUND A CIRCLE — "P · A · T · R · I · C · K M · A · S · O · N" curving into a perfect ring. The circle IS the logo + the navigation. • Pure white/near-white BG (98%+ light pixels). Letters render in regular weight black. • Tiny "?" help icon floating at top-left of the circle — invites click without dominating. • Project pills below — small rounded squares with mini-thumbnails or monograms (LB, "Banduch", → arrow). • "Add Project +" tile — turns the page into an interactive collection rather than static portfolio. When to use: personal portfolio / one-name studio where the IDENTITY itself is the hero. Memorable because the navigation doubles as the brand mark. Implementation: use SVG <textPath> with a circle path. Animate path-rotation slowly on hover. ~50 lines of SVG + CSS, no JS framework needed. Anti-pattern: using radial-typography as decoration somewhere on the page. The radial element MUST be the only hero — competes with anything else. - RECIPE — "Massive statement headline with floating image scatter" (floema.com style). Reference: floema.com. What makes it premium: • Cream BG (~#f2efea) — same warmth principle as akaru. • HUGE statement headline center-page in custom serif (floema uses "Zimula"; for demos try Cardinal Fruit, Ogg, Recoleta Black). 50-90px range. Two lines max. • ~25 small thumbnail images SCATTERED organically around (and overlapping) the headline. Sizes vary 20-150px. Positions look random but are choreographed — the headline reads through the gaps. • Pill-shaped rounded-rectangle nav at top — each link in its own subtle pill (PRODUTOS, SOBRE, SUSTENTABILIDADE). • Cookies button bottom-left as small mono "CO" pill — even the GDPR ugly is brand-styled. When to use: portfolio / catalog brand with rich image inventory (furniture, fashion, architecture, food). The scatter says "we have so much beautiful work it overflows the page." Implementation: CSS Grid or absolute-positioned cards with random transforms. Use z-index to layer images BEHIND the headline; the headline itself is foreground with no shadow/outline (it punches through gaps via stacking, not via blur). Anti-pattern: bouncing/animating the scattered images on hover — kills the calm. The scatter should be still; only the headline (and individual hover) interacts. - RECIPE — "3D inflated/puffy typography hero" (viens-la.com style). Reference: viens-la.com. What makes it premium: • Soft cream/peach BG (~#fce6d4) — playful warmth. • HUGE 3D-rendered hero word ("Viens-là") in vivid purple/indigo (#5f45f2), inflated balloon-letterforms reading as 3D objects with shadows + highlights. Either a Blender/Cinema4D render exported as image, or a real WebGL scene. • Yellow pill CTA contrasting against the purple — "DÉCOUVRIR LA VIDÉO DES 15 ANS" caps mono-ish font on a sunshine yellow rounded rectangle. • Pill navigation at the BOTTOM, not top — radical inversion. Nav sits on a subtle white pill with rounded items. FR/EN language toggle on right. • Tiny italic wordmark bottom-left corner — informal mark separate from the giant 3D headline. Two scales of brand presence. When to use: playful agency / studio that wants character + premium. Works especially well for French/European studios where the brand name is a phrase or has personality. Implementation: the puffy 3D type can be (a) Blender Cycles render with subdivision-surface modifier on extruded text + soft material, or (b) Three.js with @react-three/drei Text3D + ambient + spot lights. Spline.design is the no-code option. Anti-pattern: using free Blender 3D-text presets directly (they have telltale chrome shaders + harsh emission). The puffiness must look HAND-CRAFTED — soft pastel material, soft shadows, slight asymmetry. - RECIPE — "App card + orbiting avatars" (aaavatar.nl style). Reference: aaavatar.nl. What makes it work for SaaS: • Pure white BG. All decoration comes from the orbiting elements + the centered card. • Centered "app card" — rounded-corner white card (with soft shadow) holding: app icon, brand wordmark, headline, sub-headline, single CTA. ~520×460px size. • App icon at top of card — small (96px) checkered-pattern icon styled like a macOS app icon. Brand mark immediately recognizable as "this is software." • 6-8 orbiting avatar circles around the card — subtly cropped portraits in colored circle frames (peach, orange, pink). Sizes vary (80-160px). They peek out from BEHIND the card edges. • Bottom: app screenshot — clipped or cut-off screenshot of the actual product window starts at the bottom edge of viewport, signalling "scroll to see more." When to use: SaaS / desktop-app launch where the value prop is visual transformation (photo, video, image processing). The orbiting avatars MUST be the actual transformed output of the app — not stock photos. Anti-pattern: showing 3 features in 3 cards in the hero. ONE card, ONE CTA, ONE feature. Trust the orbiting evidence to do the rest. - RECIPE — "Video-saturated documentary editorial" (inkfishnyc.com style). Reference: inkfishnyc.com. What makes it premium: • ~12 inline videos on the homepage — agency portfolio worn on the sleeve. Each project = an autoplaying muted clip on the page. • Martian Mono everywhere — body, nav, headlines, all in monospace. Distinctive choice that signals "we're technical / editorial." NEVER paired with a serif or sans body. • Hero video LARGE — almost full viewport, an actual project film playing (NYC climbing in Times Square, in their case). Real client work, not stock. • Lenis smooth scroll — required because the page is video-heavy and scroll latency would feel chunky. • One small video preview floats bottom-left — like an editor's bin / pip preview. Adds the "we're a film studio" vibe. • NO GSAP, NO Three.js — pure HTML5 video + CSS + Lenis. The work IS the design. When to use: agency or studio whose deliverable IS film/motion. Works for: production company, motion-design studio, climbing/sports brand, fashion film studio. Implementation cost: need 8-12 short loops (3-8s each) in h.264 baseline 720p, ~300-800KB each. Total page weight ~6-10MB. Mobile: serve poster= jpg + lazy-load via preload="none", autoplay only when in viewport. Anti-pattern: using stock video from Pexels — the audience can smell stock immediately and the whole "we make films" claim falls apart. If you don't have 12 real clips, don't fake it — use a different recipe. - RECIPE — "Dark hero with product behind giant wordmark" (studiogusto.com style). Reference: studiogusto.com. What makes it premium: • Pure dark BG (#0f0f0f, near-black but not pure). • 3D-rendered product photo center — a hero bottle/object floating with cinematic lighting (chiaroscuro on black is signature studio-still-life). • MASSIVE lowercase wordmark in white ("studiogusto") punching across the product image — the studio name spans the full viewport width, baseline aligned with the product midpoint. • Tiny mono labels top-left ("hello! / Restart" or similar) — playful + technical. • Standard nav top-right — Works / Studio / Blog / Contact in regular weight white. • Matter or similar geometric sans for the wordmark — needs perfect circle "o" terminals. When to use: studio that has stunning product/case-study photography. Treat their best client work as the hero shot, name punches through. Anti-pattern: using a stock 3D bottle render. The product image MUST be real client work — otherwise it's just a Behance template. - RECIPE — "F&B retro-editorial with checkered borders" (restaurant-amici.com style). Reference: restaurant-amici.com. What makes it premium: • Cream BG (~#f9eddc) — same warmth principle. Olive-green ink color (~#5a6b1a) for ALL type. • Top + bottom edges = checkered olive-green border strips — tablecloth/restaurant-awning motif. Adds character without dominating. • HUGE Fraunces serif center headline (~90px) — quote-like, all caps. Multiline tagline that reads like a manifesto ("LA VIE EST UNE FÊTE ET LA TABLE UN RÉGAL"). • Pill MENU button top-left with italic mono "MENU" inside. • Wordmark top-center in mono caps (e.g. "AMICI") — separated from the menu pill. • Bottom scrolling marquee of menu items / events (BISTRO · MIXOLOGIE · TAPAS FIESTA · LIVE DJ SET · DISCO FEVER · TERRASSE) — adds energy + fills the bottom edge. • Lenis smooth scroll, no canvas, no WebGL — kept simple. When to use: restaurant, café, deli, food brand with personality. Especially European bistros / brasseries where the language itself adds flavor. Anti-pattern: using full color photography in this layout. Stays type-first; photos appear lower in the page. Photography in the hero kills the editorial tone. - RECIPE — "Typographic chaos manifesto" (cuberto / hello.cuberto.com style). Reference: hello.cuberto.com. What makes it iconic: • Pure black BG (~92% near-black). • HUGE statement headline ("WE CREATE MEMORABLE WEBSITES") at 130-140px in a single neon color — cuberto uses lime-yellow (~#bef264). Tencher color signals the brand. • WORDS INTENTIONALLY MISALIGNED — each word indented/offset differently from the next. Some left-flush, some shifted right, some lowered. Reads as composition, not as broken layout. • One word in WHITE as accent — cuberto uses "100%" in white while the rest is lime. Single-word color contrast is the signature. • 22 videos hidden in the page — Cuberto reveals them as you scroll, packed with case-study films. Hero is text-only. • Tiny "cuberto" wordmark + "menu" hamburger top corners — minimal chrome. • Lenis smooth scroll required for the typographic reveal animations. When to use: agency/studio whose unique selling point IS confidence + craft. The typographic chaos says "we don't follow templates." Anti-pattern: aligning the words in a normal grid. The chaos IS the design. Also — never use more than two colors (one for words + one for accent + black BG = 3 total). - RECIPE — "Brutalist mono editorial — extreme black-on-white" (ballet-de-marseille style). Reference: ballet-de-marseille.com. What makes it premium-cultural: • Pure white BG. All weight comes from the type. • NAVIGATION ITEMS rendered as ENORMOUS condensed sans on the LEFT side — "News / Activités / Artistes / Agenda / Search" stacked in 100-120px black weight. The nav itself is the hero. • Right side: editorial article cards with thin 1px borders, each containing: huge condensed headline at top, monospace body text below, underlined inline links. • Custom monospace font for body — Next.js variable font (`__mono_*` is the giveaway). Suggests JetBrains Mono, Berkeley Mono, or Söhne Mono. • Custom logo/wordmark top-left in a hand-drawn/sketchy style ("BNM" with curly serifs) — only decorative element on the page. • Zero JS animation libraries. No GSAP, no Lenis, no canvas. Pure HTML/CSS Next.js. The audience is cultural/intellectual; tech-flex would feel wrong. When to use: arts institution, ballet, museum, cultural festival, university program, magazine. Where authority comes from RESTRAINT, not motion. Anti-pattern: adding a hero image. The TEXT is the hero. Adding a header photo turns it into a generic cultural-org page. - RECIPE — "Radically minimal — one giant number teaser" (gregorylalle.com style). Reference: gregorylalle.com. What makes it stop-the-scroll: • 99%+ pure white BG. Almost no content visible above the fold. • ONE giant black number (55 in his case — number of projects/years/something) at ~280px in geometric sans, bottom-left corner. • Tiny details elsewhere: minute name in 12px somewhere, a thin vertical line on the right edge marking scroll position. • 15 videos hidden below the fold — the giant number is a teaser. Scroll reveals everything. • Custom display font ("NG") — single-letter weights only, geometric sans. • Lenis smooth scroll required. When to use: personal portfolio for a confident designer/director/artist. The big number says "I have so much work I don't need to show it on the homepage." Anti-pattern: putting the number CENTER-CENTER. The off-balance bottom-left placement is the move — it creates tension that begs scroll. Centered = static = forgettable. - RECIPE — "Mission-driven instrument dashboard" (bluemarinefoundation.com style). Reference: bluemarinefoundation.com/the-sea-we-breathe. What makes a foundation/cause site feel premium: • Deep navy/ocean BG (~#0a2240) — environmental gravity, not neutral. • Mono coordinate readouts top-left: > DETAIL: CONNECTED / > LOCATION: ATLANTIC OCEAN / > COORDINATES: 15.599° S / 28.8731° W — treats the cause like a research mission. • Center: circular instrument DIAL — concentric ring with tick marks at 0/25/50/75/100, "LOADING EXPERIENCE" labeled inside. SAME pattern as cosmos.studio. Use Rajdhani or similar futuristic sans for the dial labels. • Tiny rectangle frames at bottom corners — chrome detail that signals "scientific apparatus." • Right corner copyright in mono, all caps, very small. When to use: environmental NGO, scientific foundation, climate-tech, ocean preservation, space program, research lab. Treat the cause as serious work, not a feel-good campaign. Anti-pattern: stock ocean photography in the hero. Visual restraint signals "we do real work" — feel-good imagery signals "we do PR." - RECIPE — "Gamified fashion experience" (robyn-lynch.kepler-interactive.com style). Reference: robyn-lynch.kepler-interactive.com (Kepler Interactive is a game studio, hosting the fashion brand). What's signature: • Acid lime-green BG (~#dcf04e) — confident single-color flood. • WIREFRAME MAZE/CIRCUIT pattern spelling the brand name in a modular geometric way (looks like 8-bit pipe maze) — the brand IS the level layout. • Bottom: split-screen video preview tiles — model on left, person on right, both autoplaying. • Game UI bottom strip: Achievements 1/20 | Info | 6 0 0 | 0% | Start Over — actual game-chrome adopted as fashion site nav. • Tiny PIP video top-left — "currently playing in the corner" feel. • Monument Grotesk — clean industrial sans, common in fashion + game studios. When to use: fashion brand or product launch where the audience is digital-native (gen-z, gamer, club kid). Especially when paired with a game studio collaborator. Anti-pattern: stopping at "we put it on a yellow background." The maze pattern + game UI chrome MUST be hand-built bespoke. Templating this kills it. - RECIPE — "Dark-tech glitch + bracketed body copy" (monogrid.com style). Reference: monogrid.com/about. What makes it premium-tech: • Pure black BG. • HUGE wordmark rendered as halftone/dot-matrix glitch — "MONOGRID" in 200px+ blue dots forming the letters. Adds digital craft texture without being pixel-art. • Tiny mono tags floating: LEADING THE WAY IN DIGITAL ▪ and GROUNDBREA ▪ — interruption labels with bracket markers. • Body copy in CURLY BRACES: { We are a crew of innovators } — code-aesthetic. Pairs with code-style monospace text when used. • HelveticaNeueLTPro for sans body, monospace for tags. • Lime-green chrome accents — buttons (PROJECTS, MENU) with green underline + green dot. • Lenis smooth scroll + WebGL canvas for the halftone wordmark animation. When to use: creative-tech / digital-product / R&D studio that wants to telegraph "we write code AND we're tasteful." Italian/Russian/Eastern-European creative-tech especially. Anti-pattern: using SF Mono or Courier for the bracketed copy. Use a NICE mono — JetBrains Mono, Söhne Mono, NaN Tundra. SF Mono reads as Apple, not as you. - RECIPE — "Single film-still hero + horizontal nav strip" (pawelachtelik.com style). Reference: pawelachtelik.com. What makes it premium-photography: • Pale-grey/cream BG (~#f7f3f2) so the photo can dominate without competing. • SINGLE editorial portrait full-bleed dominating the viewport — strong directional lighting, model in profile, dramatic accessory in focus (jewelry, garment, prop). • Horizontal nav strip at MID-HEIGHT — 5 tiny labels evenly spaced across the photo: Pawel Achtelik / Info / (Selected, Index) / Sound On. Not pinned to top or bottom — pinned to image's eye-line. • "Sound On" nav item suggests audio interactivity (ambient, score, voice-over). • SuisseNeue or Söhne for nav labels — light Swiss sans. • Single video in DOM but used as background or hover reveal. When to use: fashion/portrait photographer, director, stylist, fragrance brand, beauty editorial. The photo IS the work — anything else competes. Anti-pattern: placing the nav at top or bottom edges. The mid-strip placement is what makes it feel like a film title card / magazine spread, not a webpage. - RECIPE — "WebGL baroque occult sigils" (tomomi-shibakusa.com style). Reference: tomomi-shibakusa.com. What makes it iconic: • Deep forest/oxblood BG (~#1a3320 green or similar saturated dark). • Concentric engraved sigil circles — ornate gilded patterns reading as ancient seals/coins/tarot. Multiple repeating instances across the page (parallax depth). • 3D rendered with Three.js + GSAP — 7 WebGL canvases, real engraved geometry with rim lighting + gold shader. • Hero text is TINY ("TOMOMI SHIBAKUSA" 12px somewhere) — the sigils are the brand mark, not the name. • Proxima Nova body — clean modern sans paired with baroque visual = juxtaposition that works. When to use: designer portfolio with deep WebGL/3D craft chops. Personal-brand statement piece. Implementation cost: high. Need actual engraved-sigil 3D models (rendered or hand-built), gold/copper PBR shader, lighting rig with rim + spec. Anti-pattern: using Stable Diffusion to fake the sigil engravings. The geometry MUST be real — flat AI textures look exactly like flat AI textures under WebGL camera motion. - RECIPE — "Architecture portfolio: full-bleed image + centered project card" (pesqueradiez.com style). Reference: pesqueradiez.com. What makes it work for arch/spatial: • BG: large architecture photo filling the viewport — interior or exterior, real warmth (golden hour, wood/concrete materiality). • Centered project card: white rounded rectangle (~440×580px) holding: project name in HUGE caps display ("MUR"), subtitle ("Rehabilitación de la Muralla de Logroño"), location pin ("La Rioja, España" bottom-left), CTA bottom-right ("Ver Proyecto"). • Project counter top-left — "P10" mono indicates which project of the studio's catalog you're seeing. Scroll cycles through P01...P20. • Single nav item top-right — just "Menu". Maximum restraint. • "Selecta" or similar wide-set sans for the project name, regular sans for body. Selecta is paid Pangram font — free alts: Apfel Grotezk, NaN Holo Display. • GSAP + Lenis for scroll-snap project transitions. When to use: architecture studio, interior design, landscape architecture, restoration practice. Where the WORK is the photograph and you just need to identify it. Anti-pattern: grid of project thumbnails. Spatial-design portfolios should be one-at-a-time, full-bleed, slow scroll. Round 2 validation (3 dark-cinematic premium sites): cosmos.studio (95% near-black, monospace dial hero, tiny faint stars as background texture) · activetheory.net (89% near-black, central glowing orb hero, drifting micro-particles) · bruno-simon.com (65% near-black, glowing ring hero on grid floor, 1-2px X-marks). All three follow: dark dominant + ONE hero element + tiny pinpoint accents. Stars/particles are never the hero — they're the texture that makes the hero feel cinematic.