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. - RECIPE — "Designer portfolio: light grey + cropped project grid below fold" (jonasemmertsen.com style). Light grey BG (~#efefef). Brand mark top-left with ®. Pill-tab nav top-center (active tab inset in black box, others borderless). Hero center-right: huge sans tagline ("Founder & Creative of Studio 28K", 50px Tomato Grotesk or similar humanist-grotesque), 3-line sub-tagline below. RED contact link bottom-left ("CONTACT ME / EMAIL"). Below the fold-line: horizontal cropped grid of project thumbs visible only ~30%, mono labels at top of each tile (e.g. "ESPN: OVECHKIN 600 WEBSITE"). The crop teases scroll without dominating. Use: personal designer/director portfolio when you have ~6-12 strong cases. Anti-pattern: showing full project tiles in the hero — kills the typographic hierarchy. - RECIPE — "Dark dev-portfolio with vertical rotated wordmark + cycling role labels" (stabondar.com style). Pure near-black BG (#111). Wordmark rotated 90° clockwise on the right edge — runs vertically down the gutter, red/orange color. Bottom-left: cycling role labels stacked ("Front-End Developer / Developer / Front-End") in red monospace, animating top-down to imply role-cycling. NeueMachina or similar mechanical-display sans. Lenis smooth scroll. Use: developer/engineer portfolio that wants to feel premium, not bootcamp. Anti-pattern: putting the rotated wordmark on the LEFT — feels like a sidebar; right-edge feels like a film strip credit. - RECIPE — "Brutalist cultural — wordmark holds nav in its letter gaps" (theaterimdepot.de style). Pure white BG. HUGE black wordmark spans full bottom width ("THEATER IM DEPOT") in custom German modern grotesque (es_klarheit, NaN Holo, GT America Black). Nav items live in the negative space BETWEEN the giant letters: "Programm", "Kalender", "Tickets", "About", "Service", "EN" floated at varying heights, small caps. Above: an OVAL/ELLIPSE clipping mask with current event info inside (B&W photo BG, dates/title overlaid). Use: theater, performance space, art school, festival — German/Austrian cultural especially. Anti-pattern: putting nav in a normal top bar. The whole point is that the brand mark IS the architecture; nav has to live INSIDE it. - RECIPE — "Film-cinematic single-subject hero, dark variant" (anaiis.world style). Pure black or near-black BG. Single film-still portrait full-bleed — strong subject (artist, performer, model) photographed in dim atmospheric light, painterly. Subtle texture (warehouse wall, foliage, smoke). NO visible nav above the fold — hidden / hover-revealed / ambient menu only. 3-4 videos preload but stay paused until interaction. Use: musician, recording artist, filmmaker, live performer with strong visual identity. The artist's face IS the brand mark. Anti-pattern: typesetting the artist name large over the photo. Let the face speak; identify them in tiny text in a corner only. - RECIPE — "Wedding florist deep-moss editorial" (heartandsoilflowers.com). Deep moss-green BG (~#3f521a). Cream Fraunces serif wordmark "HEART & SOIL" top-center. Soft blurry editorial photo cards (couple kissing, floral arrangement) with warm sepia treatment. PT Mono body for nav + secondary copy. Top-right pill: "Now accepting inquiries for wed & elop". Top nav left: "OUR WORK / SERVICES / ABOUT / PHOTOSTREAM" tiny caps. Bottom strip: faded publication logos. Use: florist, wedding planner, event designer, boutique wellness. Anti-pattern: emerald or kelly green — too fashion. Moss/olive feels grown. - RECIPE — "Luxury image-grid mosaic" (bottega53.com). Black BG, 2×3 cinematic photo tiles bleed edge-to-edge — no gaps. Each tile = different cinematic vignette (ballerina, lake aerial, bride, red room, blossoms). Mix portrait + landscape + interior + nature. FormaDJR Variable for body. Lenis. Per-tile WebGL canvas (1 per image) for hover ripple/displacement. Use: luxury wedding venue, destination event company, photographer collective. Anti-pattern: uniform tile sizes — vary 2 tall + 3 wide + 1 square for hierarchy. - RECIPE — "Fast-casual F&B with extra-condensed wordmark" (dashburger.ie). White BG. Hero photo: person mid-bite, vivid colored wallpaper behind (DASH uses pink, could be teal/yellow). Wordmark spans full bottom width in PINK extra-condensed sans (Kommissar XCond / Druk Wide Heavy / Anton). Top nav center: short verbs ("Eat Here / Eat Out / Friends / Journey"). Top-right: orange "Order Now" pill. MessinaSans body. GSAP for scroll reveals (skip Lenis — fast-feel matters more than smooth). Use: fast-casual chain, burger/poke/ice-cream shop. Anti-pattern: stock plated food. Person eating > plate styled. - RECIPE — "B2B finance with cinematic full-bleed + bottom card" (oldtomcapital.com). Cinematic black-and-white full-bleed photo of the actual domain (golf hills for a golf fund; vineyard rows for wine; factory floor for industrials). Bottom-left: serious 90px headline ("Golf's Institutional Platform"). Bottom-right: small white card with sub-message + 2 buttons ("EXPLORE THE PLATFORM" + "INVEST WITH US"). Top nav right-aligned tiny caps (PLATFORM / PORTFOLIO / INSIGHTS / INVEST / CONTACT). Wordmark top-left. Messinasans bold for headline. Use: fund, family office, asset manager, B2B fintech, niche-vertical platform. Anti-pattern: stock business photography (handshakes, glass towers). Use real domain photography or nothing. - RECIPE — "Variable-font foundry showcase page" (gt-mechanik.com). Reference: Grilli Type's new-release pages. Cream BG (~#f7f3ee). HUGE wordmark in saturated single-color (~550px tall) showing typeface geometry — "MCNK" or whatever stresses the design. Diamond foundry mark top-left ("GT" rotated 45°). Below: SPEC TILE GRID demonstrating font modes — each tile self-contained: perspective diagram (cone with mono/semi/poly axis labels), giant lowercase letter showcase, character set bubbles, weight ladders, italic samples. Each tile thin-stroke bordered (light green / pink) with mono corner-tag. Use: type foundry release, font marketing, design system showcase. Anti-pattern: using the typeface only at body-size. Foundry pages MUST be brave with scale. - RECIPE — "Premium running brand with 3D product hero" (banditrunning.com). Dark BG, Tomato Grotesk display + FK Grotesk body. Three.js + 2 WebGL canvases for 3D product reveal (shoe rotating, fabric sim). 2 lazy videos. Headline ~70px (large-but-not-billboard). Use: premium athletic apparel, shoe drop, performance brand. Anti-pattern: Nike-style action photography of a runner mid-stride. Without that budget, 3D product + cloth simulation looks more premium than a stock-look photo. - RECIPE — "Director portfolio: horizontal filmstrip + italic serif wordmark" (marioroudil.com). White BG. Top-left label cluster: "Director / Based in Paris" tiny mono. Top-center: "Slider | List" view-mode toggle. Top-mid-right: filter list ("ALL / FILM / MUSIC CLIP / OTHERS / ADS"). Top-far-right: "Shop / About". Center: 7-tile horizontal filmstrip of project thumbs at uniform 16:9 with thin gutters — scrolls horizontally on hover/drag. Bottom: HUGE italic serif wordmark ("Mario Roudil" — Cardinal Fruit, Migra, Tiempos Headline italic) with one stylized letterform (cursive R) anchoring the visual. Neue Montreal body. Use: film director, music-video director, commercial director portfolio. Anti-pattern: mixing thumbnail aspect ratios. The filmstrip MUST be uniform — variation breaks the editorial rhythm. - RECIPE — "Photographer archive grid with magazine-spread numbering" (krisztianeder.com). White BG. Tiny mono nav top-left ("SELECTION / NOTES / ARCHIVE / INFORMATION / EDITIONS"). Top-right: contact block in italic serif EB Garamond ("Studio Krisztián Éder / For editorial and commercial inquiries please contact M.A.P / Worldwide syndication Trunk Archive"). Body: ASYMMETRIC archival grid of magazine covers + portrait photos at varying scales — some sharp full-color (Holiday cover, Chloé portrait), some intentionally blurred/faded (ghost-like archive), some cropped tight (single body part). Tiny numbers ("03", "04", "05") between images indexing the archive. Use: editorial photographer, photo agency, archive site. Anti-pattern: uniform image sizes. Archive grids work BECAUSE of irregularity — it signals "real archive of disparate work" not "Squarespace template." - RECIPE — "Fashion-cinema portrait + dashboard credits" (lafour.com). Dark moody photo full-bleed: single model in dramatic outerwear against natural backdrop (cliff, ocean, fog). Top-left: "LAFOUR" wordmark + project counter ("01 — 04"). Top-right: single nav "WORK". Bottom-left dashboard panel: project ID + title in mono caps ("MONCLER X EERMNI / GROUP-O. / CAMPAIGN-SS22 / VIDEO") with 2-3 thumbnail tiles below. Bottom-right credits chips: film/agency credits in mono ("DIRECTOR / DP / CLIENT / YEAR / OUTPUT") with values. ABC Monument Grotesk body. 8 videos lazy-load. Use: director/photographer/creative-director portfolio with high-fashion brand work. Anti-pattern: hiding the credits. Dashboard chrome IS the value-prop — shows you've worked with real brands. - RECIPE — "DTC consumer-product launch: cream BG + green accent" (board.fun). Cream BG (~#fffef1). Top promo strip in mint-green: review-rating callout ("Rated 4.97 stars from 250+ reviews→"). Top nav: pill links left + bold serif wordmark center ("Board") + green "Shop Now" pill + Cart count. Hero: huge condensed bold sans headline with periods ("Board game feel. Video game magic." — ~80px Neue Haas Grotesk Display Bold). Single sentence sub-tagline. Floating 3D product render (small console / device) at right-mid, slightly tilted. Below: cropped lifestyle photo. Use: consumer-tech DTC launch (gadget, console, smart-device, household), Kickstarter graduate. Anti-pattern: Stripe-style purple gradients. The cream-BG + single mint accent is cheaper-looking AND more memorable than tech-bro gradients. - RECIPE — "Interior/architectural photographer: thin chrome over full-bleed photos" (danielblue.com). Single architectural interior photo dominating viewport (warm wood kitchen, modern bath, atrium, etc.). Top edges thin-strip nav: left "INTERIOR | ARCHITECTURAL PHOTOGRAPHY", center wordmark, right page links ("HOME / RESIDENTIAL / COMMERCIAL / WHO / EMAIL"). Bottom edges thin-strip meta: left contact location ("NEW YORK NY 10025"), right phone/email, center "MENU/CLOSE" toggle. ArizonaWeb display + Lenis smooth scroll. Use: architectural photographer, interior photographer, real-estate director. Anti-pattern: sidebar of project thumbnails. Photo is the hero; rotate it on click — keep the chrome thin and only at edges. - RECIPE — "Dark intro splash with blurred 3D glass/mercury mark" (henriheymans.com). Black BG, large soft-blurred mercury/liquid-glass 3D sculpted mark in center (looks like a melted "H" or 0). Tiny horizontal menu strip mid-screen ("CREATIVE DEVELOPMENT / OFFLINE / LAB MAGAZINE / 3D / SOUND / MY NAME"). "CLICK TO ENTER" prompt bottom-center. Lenis + 2 WebGL canvases (the blob is realtime Three.js with iridescent shader). Use: creative-tech developer / immersive studio / experience-design portfolio where the entry IS the artwork. Anti-pattern: skipping the click-to-enter friction. The friction IS the experience — sites that just-load feel like Squarespace; sites that require commitment feel like exhibitions. - RECIPE — "Editorial portfolio with single-project showcase + organic blob backdrop" (iaragrinspun.com). Cream BG (~#fff4e3). Tiny dark-blue dot logo + name top-left ("iara grinspun"). "projects" top-right. Center: huge serif single word (project name, "BOOK") at ~170px in custom display serif (Lust Display, Migra, Cardinal Fruit), overlapping a SOFT ORGANIC PEACH BLOB (asymmetric SVG path with gradient fill). Right edge: vertical slide indicator "1 - 7". Arrow nav button bottom-left. Bottom: small links "about & contact / behance / dribbble / linkedin / drafts". Use: editorial / book / publication designer portfolio where each project is a beautiful titled object. Anti-pattern: showing the project thumbnail. The NAME of the project + accent shape is enough — click reveals the work. - RECIPE — "YC-tier B2B SaaS with product mockup right + headline left" (throxy.com). White BG. Top-left logo with envelope/email icon. Top-right nav: Solutions ▾ / Resources ▾ / Careers / About Us + dark button "Strategy Call". Left column: small "Backed by Y-Combinator ☑" badge, headline ~47px in PP Neue Montreal Medium ("Qualified meetings with hard-to-reach buyers. Done for you."), paragraph 4 lines, lavender pill CTA ("→ Apply for a Strategy Call"). Right column: screenshot/mockup of the product (calendar UI with green + purple "Booked Call" cells, "SALES OPPORTUNITY" mono labels). Use: B2B SaaS, GTM/sales tools, vertical AI. Anti-pattern: 3D abstract gradient hero (Stripe-clone). The product mockup IS the hero — show the actual screen, don't decorate around it. - RECIPE — "ASCII-art occult brand mark + click-to-enter" (kvs.services). Off-white BG with CRT-scanline texture overlay. Center: large ASCII-art rendering of a horned/abstract figure or sigil (rendered as monospace characters in black on the white BG). Orange caution-sticker accent in corner. Bottom: "CLICK TO ENTER (HEADPHONES RECOMMENDED)" in mono caps. 9 canvases for various scanline/glitch effects. Use: music/fashion experience, alternative brand, art-collective entry page, festival pre-launch. Anti-pattern: rendering ASCII as a static image. The chars need to be REAL text (selectable) so the page reads as terminal-output not as poster — that's the whole transgressive feel. - RECIPE — "CJK bilingual publishing with tangram geometry" (nodate.club). Cream/grey BG (~#e8e2da). Top-right: dual-language alternating column — Chinese 4-character title above English equivalent ("廣場 Square / 白髮 Grey Hair"). Left/center: grey TANGRAM-style geometric shapes (triangles, squares, parallelograms) tiling the page like a Hong Kong puzzle book. Long body text below in TWO PARALLEL COLUMNS — Chinese left, English right, vertically aligned line-by-line. Custom title font, Arial-fallback for body. Use: CJK indie publishing, Taiwanese/HK design studio, dual-language editorial, museum bilingual catalog. Anti-pattern: using Chinese AS DECORATION. Both languages must be FULLY READABLE — anything else reads as orientalist. - RECIPE — "Illustrator/designer with vertical poster gallery" (justinesoulie.fr). Cream BG. Top-left tiny caps name ("JUSTINE SOULIÉ"), top-right "ABOUT". Body: 3 vertical poster-style project tiles in a row — each project rendered as if it were a fine-art lithograph poster (high-saturation orange Hermès tarot-style, B&W typographic, pink/red illustrative). Hover changes the active poster. Below: small caption with project name + medium ("hermes / promotional video"). Use: illustrator, motion designer, art-director portfolio with distinctive visual language per project. Anti-pattern: horizontal landscape thumbs. Vertical poster aspect ratio reads as "fine-art object", landscape reads as "video thumbnail." 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.