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." - RECIPE — "Dark designer portfolio + viewport-wide name + industrial product-code chrome" (arlindaliu.com). Pure black BG. Top-left: small circle logo + 2-line mono code ("VERSION 01 / AGST 3-598-21500-2") reading like a serial number. Top-right: "MUNCHEN, DE / 6833092D" location code. MASSIVE wordmark spanning full viewport width (~218px SuisseIntl heavy condensed all-caps, white). Below: tiny mono nav ("MEDIUM / DRIBBBLE / TWITTER"). Then: moody portrait photo of the designer (profile, single light source). 3 WebGL canvases for subtle bg motion. Use: senior designer/director personal portfolio when the name itself is what people search. Anti-pattern: centering the wordmark at smaller size. The point is VIEWPORT-WIDE — every visitor sees the entire name at once. - RECIPE — "Interactive designer with dotted-outline custom letterforms + live time" (evasanchez.info). Cream BG (~#f8f6f2). Top-left: LIVE current time + city in mono ("EVASÁNCHEZ_BCN 06:58 AM" — updates with JS clock). Top-right: nav links + black "LETS TALK" pill. Center-right: HUGE name in CUSTOM DOTTED-OUTLINE letterforms — each letter has double-line outline with dots filling the interior (halftone-pattern letterforms; treat them as SVG paths). Letters intentionally extend off the right edge. Below name: role + location in regular sans. "PORTFOLIO_20[scroll-progress-bar]" mono indicator showing actual scroll % live. Bottom: "[SCROLL TO EXPLO]" cut-off text + social links. Vertical dotted grid as BG texture. 11 WebGL canvases (heavy). GSAP + Lenis. Use: interactive designer/dev portfolio that wants to demonstrate technical chops on the hero. Anti-pattern: using a pre-made dot-pattern Google Font for the letterforms. The dotted letters MUST be hand-built SVG — that craft IS the work sample. - RECIPE — "B2B SaaS with embedded inline lead form + trusted-by logos column" (speakeasy.com). White BG (96.5% light). Top nav: brand mark with icon + standard horizontal menu (Products / Docs / Solutions / Customers / Company / Pricing) + Log in + black pill "TALK TO US". Tiny mono pill above headline: "BOOK A DEMO". Headline ~67px in Tiempos / Tobias serif: "Start your AI transformation". 2-line paragraph below. Two-column split below: left column "TRUSTED BY" + 7-logo grid (real enterprise logos: Vercel, Verizon, Cisco, Mistral AI, etc.). Right column: actual lead form (first name / last name / work email / "How did you hear" / interest checkboxes). Use: enterprise B2B AI/infra SaaS where lead form on the homepage IS the conversion. Anti-pattern: using a fake/illustrated "demo" mockup. The form being ON the homepage signals confidence — Fivetran/Mistral being real customers signals legitimacy. Don't decorate, just convert. - RECIPE — "Vivid red dev portfolio with distorted texture + huge condensed bottom wordmark" (wodniack.dev). SATURATED RED BG (~#f40c3f) — aggressive single-color flood. Distorted/glitched CRT-like texture across the upper half (could be SVG noise displacement, video, or Three.js shader). Tiny logo top-left + status/personal info top-right (multi-language toggle, social, available-for-hire indicator). HUGE BLACK CONDENSED WORDMARK across bottom ("CREATIVE + DEVELOPER" in Bigger Display sans, ~190px). 34 videos lazy-load below the fold. Editorial New serif for body, Bigger Display for display. Lenis. Use: creative developer / front-end engineer portfolio that wants to scream confidence + technical range. Aggressive color = signals "I'm not shy." Anti-pattern: softening the red. The whole point is intensity — pastel/desaturated kills it. - RECIPE — "Iridescent chrome 3D liquid blob hero + world times" (nerd-creation.com). White BG. Top-left: bespoke logo (eye-shape mark + brand name in sans, e.g. NERD with blue eye dot). Top-center: world city times in monospace, slash-separated and live-updating: /TYO 08 28 06 /LON 00 28 /NYC 19 28 /PAR 01 28. Top-right: "MENU" with colored dot indicator. HERO: single iridescent chrome 3D liquid blob — biomorphic shape (like a melted figure-8 or jellyfish) with blue/purple/pink gradient PBR shader, occupies the entire center of the viewport. Built in Spline.design or Three.js with @react-three/drei. Slow rotation/breathing animation. Tagline SPLIT around the blob — e.g. left: "A CREATIVE", right: "[COLLECTIVE]" — with the blob filling the gap. Helvetica Neue LT Pro for type. Lenis smooth scroll. Use: creative collective, design agency, R&D studio, multi-city creative shop. Anti-pattern: using a static rendered image of the blob. The blob MUST rotate/breathe in real-time — the liveness IS the value-prop ("we make moving things"). - RECIPE — "Art-school senior show with elliptical photo mask + scattered student names" (herefornow.risd.gd). Single saturated BG color (cobalt blue #0768a1 for RISD; could be school/program colors). Center: ELLIPSE CLIPPING MASK containing a soft-focus photograph behind. Inside the ellipse: hand-script title (cursive serif italic, "Here for Now") + 2-line metadata in mono caps ("PROGRAM NAME / OPENING DATE & TIMES"). SCATTERED LABEL NAMES around the ellipse — student/participant names in tiny mono at varying distances from the ellipse edge, like meteor labels. Authentic + Arial as fallback. Single video lazy-loaded for the photo behind the mask. Use: art-school showcase, festival, exhibition opening, group portfolio. The ellipse-as-portal metaphor signals "step inside the event." Anti-pattern: using a rectangle/square crop for the photo. Ellipse specifically — it's the spatial cue that says "this isn't a normal grid." - RECIPE — "Bilingual CJK agency with painterly gradient blob behind huge sans wordmark" (goonsdesign.com). White-ish BG. Top nav left: wordmark + Traditional Chinese menu links ("關於某斯 / 作品案例 / 案例觀點") + EN toggle + black pill CTA ("聯絡某斯"). HERO: HUGE white sans wordmark ("GOONS" — geometric heavy sans like Druk Wide or NaN Holo Display) centered over a vivid painterly gradient blob behind — feels like an oil-painting smudge in pink/coral/orange/cobalt (no hard gradient lines, brush-stroke textured). The blob extends asymmetrically to one side. Tagline in Traditional Chinese below (Noto Sans TC). 2 WebGL canvases for the painterly blob (real shader noise, not flat CSS gradient). Lenis smooth scroll. Use: Taiwan / HK / Japan bilingual creative agency. The bilingual nav signals "we work with international clients but root in Asia." Anti-pattern: using a CSS radial-gradient for the blob. Real shader brush-stroke texture is the differentiator — flat gradients are tell-tale "I'm a template." - RECIPE — "Full-bleed beauty editorial face — tight cosmetic close-up" (ottografie.nl). Cream BG (but you barely see it). SINGLE full-bleed beauty close-up: face/lips/eyes only, dramatic studio lighting, model wearing oversized pale hat with shadow falling across eyes, pink-mauve lipstick, subtle freckle. No wordmark or nav on the photo. Small dark pill/button at bottom-center (probably "Enter" or "View Work" gate). Use: beauty photographer, cosmetic brand, fragrance house, fashion portrait specialist. Anti-pattern: showing a full-figure model or environmental shot. The whole point is INTIMACY — face-only crop, the audience meets the eyes directly. Anything pulled back kills the seduction. - RECIPE — "Studio brand with 4-corner letterforms + central architecture photo" (trstudio.co.uk). Cream BG (~#eae7e1). Massive central architecture/spatial photo dominating the viewport (warm wooden cabin, conservatory, etc.). Brand spells out across 4 corners — each letter of the studio name placed in its own corner (TL/TR/BL/BR) as oversized characters. Small monogram/circular logo sits in one corner alongside its letter. Tiny center-overlay caption in white caps ("ENRICHING SPACES") sits over the photo. Custom Dia or similar geometric sans. GSAP for the letter staggers on scroll. Use: spatial/architecture/interior studio whose brand name is 3-4 letters and whose work IS the space itself. Anti-pattern: centering the wordmark and shrinking the photo. The whole point is photo = hero, brand = frame. - RECIPE — "Scrapbook director portfolio with retro pop accessories + handwritten labels" (lolilaboureau.com). White BG. Top nav: minimal links (HOME / FILMS / LAB AV / ABOUT) + Vimeo icon. Asymmetric collage hero: large B&W film still (behind-the-scenes / studio moment, someone styling someone's hair, behind-camera shots), one centered portrait of the director/subject, scatter of vintage pop objects (yellow rotary phone, neon-yellow "Friday" handwritten tag with marker). Diamond logo mark with name in a small floating card. Mix typefaces deliberately — Helvetica for nav, handwritten script for tags, rough serif for film titles. Genuinely eclectic, anti-corporate. Use: film/music-video director, hair stylist, MUA, art director with strong personality. Anti-pattern: cleaning it up. The scrapbook quality IS the brand — every element looking "off-brand" together IS the brand. - RECIPE — "Productivity app on tactile fabric texture + iPhone mockup" (finalist.works). Light grey BG. Top nav: download badges left + brand wordmark + standard menu + colored CTA pill. Headline ~30px ("For people who finish things."). 2-line paragraph below. Hero composition below the fold: iPhone mockup placed ON a richly textured fabric surface (purple linen / mauve canvas / burlap / heathered cushion — actual fabric weave visible). Floating colored action button (yellow/coral) bottom-right of the phone. Use: productivity / journaling / habits / mood app where you want to signal "human, not tech-bro." The fabric texture says "this app lives in your real life, not your dashboard." Anti-pattern: placing the iPhone on a clean white background or 3D gradient surface. The TEXTURE is the value-prop — without it, it's another SaaS-clone. - RECIPE — "Dark consumer-app landing with Instrument Serif + iPhone mockup" (picnic.photos). Pure black BG (94%+ dark). Custom dropcap-style logo top-center — wordmark broken into 2-line monogram ("PIC / NIC") with a colored accent dot (yellow plus, amber star) between or beside the letters. HUGE Instrument Serif headline ~72px centered ("Picnic is the best app to organize your photos and videos."). Black-on-black or charcoal-pill CTA ("Get the app"). iPhone mockup peeks above the bottom edge — status bar "9:41" visible, phone partially cropped. Use: consumer app launch / iOS app marketing. Instrument Serif gives editorial gravitas; dark BG signals "we don't try to sell you, we just are." Anti-pattern: using Inter or SF Pro Display for the headline. Instrument Serif specifically — its character + the dark BG is what differentiates this from every Vercel-template landing. - RECIPE — "Luxury home-builder / architecture firm with Cinzel display + dark architecture photo" (fifthdune.com). Dark warm-grey BG (~#2e2e2e). Tiny brand mark with ampersand + descriptor ("fifth & Dune / Partners") top-left in modest sans. Standard horizontal nav (About / Portfolio / Services / Press) + red caps CTA pill ("CONTACTS"). HUGE Cinzel display serif headline in cream caps (e.g. "Built to Last Forever" — ~64px). Multi-line italic body paragraph below in 14px Inter explaining the firm's craft. Right column: large architecture photograph (modernist house with vertical mullioned glass in golden hour). GSAP + Lenis. Use: luxury home-builder, restoration firm, white-glove construction, estate-management. Cinzel signals "American gentry / classic estate" — paired with dark BG it reads "old money, not house-flipping." Anti-pattern: using a sans-display headline. Cinzel (or similar inscriptional Roman serif) IS the recipe — swap it and you become any contractor's WordPress theme. - RECIPE — "Designer portfolio with floating-card scrapbook composition" (mschristensen.com). Cream BG (~#f8f8f8). Top: small wordmark + filter-chip indicator showing item counts ("Selected*4 / Archive*5 / Published*5") + sound toggle. Fragmented partially-visible script-type headline ("Stay in. Lock them out.") rendered as if hand-written but cut off, partly revealed. 3 FLOATING CARDS at varying angles mid-composition — each a different content type: editorial photo, browser screenshot, product still life (food / textile). Cards have soft shadows + slight tilt rotations (-3° / +5° / -2°). Tap any card to expand. PP Neue Montreal body. GSAP + Lenis + 1 canvas for parallax. Use: editorial designer, art director, multidisciplinary creator portfolio where work spans formats. Anti-pattern: uniform card sizes or aligned grid. Rotation + scale variance IS the signal that "this is a scrapbook, not a portfolio template." - RECIPE — "Festival with code-bracket typography + grid-paper BG" (shapeshiftfestival.com). Light grey BG with technical grid-paper pattern (1px lines forming a schematic grid). Top nav: brand mark + SCHEDULE+ / LINEUP / ABOUT / GRID TOOL + yellow CTA pill ("GET YOUR TICKET"). Tagline wraps technical content in angle-brackets: <SHAPESHIFT FESTIVAL 2026> then HUGE italic blue wordmark with wrapped content ("The Human <Algorithm>") — literally treating the festival concept as code. 3 information cards: small video preview top-left labeled "/LINEUP", /INFO description bottom-left, /DATE & LOCATION right with each field colored in green or red (<DATE> 24.04-26.04 </DATE>). Each card has a `:::` corner-tag marker. Bottom: ticker marquee of bracketed categories. Manrope body, monospace for code fields. Lenis. Use: tech/science/culture festival, hackathon, AI summit, design conference. Anti-pattern: using a generic event-photo hero. The CODE typography IS the entire concept — the audience must understand the festival treats culture as a system. - RECIPE — "B2B observability/infra with 3D data-viz hero + red accent" (sazabi.com). Dark cool BG (deep navy with subtle radial gradient — lab() color space common). Top nav: small caps wordmark + standard menu (About / Blog / Careers / Features) + RED caps CTA pill ("GET ACCESS"). Headline in heavy caps white: "OBSERVABILITY ON AUTOPILOT" (or whatever the product does). 3D RENDERED data-center / server-cabinet visualization dominating below — illuminated nodes (red dots) inside an architectural shell, server rack as cinematic 3D scene. "3D experience unavailable" fallback notice for accessibility (signals "we care about progressive enhancement"). "SCROLL DOWN" prompt below. Spline Sans body. 4 stacked canvases. Use: developer infrastructure SaaS (observability, monitoring, security, container orchestration). Anti-pattern: using a generic stripe-y gradient hero. The 3D scene MUST be domain-specific (servers/network/data-flow) — visualizing what your product actually does. - RECIPE — "Interior design / architecture studio with vivid color flood + single card" (thisisstudiox.com). Single vivid SATURATED color BG covering 95%+ of viewport (orange #ff4500, electric blue, magenta — pick one bold flood). Single rectangular card centered containing an architectural interior detail photograph (curved glass, metallic finishes, sculptural ceiling) — gives the photo all the focus. Floating rounded-rectangle nav at bottom consolidating everything: brand mark (custom X-icon) + Menu + "Start a Project" CTA all inside ONE pill. Custom "Serrif Compressed" or similar tight display serif. Saans or Söhne body. GSAP + Lenis. Use: interior design studio, architecture firm with bold identity, hospitality design. The vivid color = "we're not afraid"; single card = "we know our best work." Anti-pattern: showing a gallery of cards. ONE card. The boldness is in the restraint. 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.