Skill: aa-on-ai/world-build (version 1.0.0)

# World Build ## ⚠️ Creative Pack — NOT auto-apply This skill is part of the creative pack. Do NOT apply it by default on every visual task. **Use ONLY when explicitly triggered:** - user says "world-build this" or "make this feel like a place" - task is explicitly about immersive experience (portfolio, launch, game UI, interactive storytelling) - user asks for atmosphere, narrative arc, or sensory design **Do NOT use when:** - no one asked for immersion — most UI tasks don't need this - building product UI, dashboards, forms, settings, or tools - content needs to be scannable and fast (docs, settings pages) - MVP prototypes where speed matters more than atmosphere If this skill wasn't explicitly requested, skip it. Use design-review instead. ## What This Is The creative development playbook for building things that feel like *places*, not pages. Whimsical-design asks "does it have personality?" World-build provides the construction manual for **depth**. --- ## Phase 1: The World (BEFORE any code) Every immersive build starts with a creative brief. Answer these three questions: **1. What world does this live in?** Not "what does it look like" but "where ARE we?" Examples: - Killian Herzer: a detective's case file / surveillance system - Clawbotomy: a behavioral forensics lab - Context Window: a decaying AI consciousness - Inflight: a mission control dashboard for creators **2. What's the core metaphor?** One metaphor that every UI element reinforces: - Investigation → evidence, case files, classified stamps, redacted text - Laboratory → specimens, test results, diagnostic readouts - Space mission → coordinates, telemetry, signal strength - Nature → growth, seasons, organic shapes, weathering **3. What does the user FEEL when they arrive?** Name one emotion. Not "impressed" — that's a reaction. An emotion: - Intrigue (I want to explore this) - Wonder (this is beautiful and alive) - Tension (something is happening here) - Warmth (I feel welcomed into someone's world) Write these three answers down. Share with Aaron. Get alignment. THEN build. --- ## Phase 2: The Atmosphere System Every world-build site needs these layers. They're what separate "a page with nice CSS" from "a place." ### Layer 1: Background Texture The canvas is never blank white or flat black. ```css /* Noise overlay — subtle grain that makes everything feel tactile */ .noise-overlay { position: fixed; inset: 0; pointer-events: none; z-index: 9999; opacity: 0.03; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); } /* Ambient glow — soft colored light that sets mood */ .ambient-glow { position: fixed; width: 60vw; height: 60vh; border-radius: 50%; opacity: 0.05; filter: blur(120px); mix-blend-mode: normal; pointer-events: none; will-change: transform; animation: drift 20s ease-in-out infinite alternate; } /* Grid background — subtle structure */ .grid-bg { position: fixed; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px); background-size: 60px 60px; pointer-events: none; } ``` ### Layer 2: Corner Elements (HUD) Persistent UI that reinforces the world. Small, monospace, low opacity. ``` ┌─ TOP LEFT TOP RIGHT ─┐ │ Status indicator Timestamp │ │ Signal/connection Language │ │ │ │ │ │ │ │ BOTTOM LEFT BOTTOM RIGHT │ │ Live indicator System status │ └──────────────────────────────────────────────────┘ ``` These should be thematic: - Detective world: "CAM_04 [REC]", "SIGNAL_STRONG", "ANALYSER_ACTIVE" - Lab world: "SAMPLE_ID: 0042", "TEMP: 21.3°C", "PROTOCOL: ACTIVE" - Space world: "LAT: 34.0195 N", "ORBIT: STABLE", "COMMS: OPEN" ### Layer 3: Custom Cursor Replace the default cursor. Even a simple dot + trailing ring transforms the feel. ```css .cursor-main { width: 12px; height: 12px; border: 1.5px solid var(--accent); border-radius: 50%; position: fixed; pointer-events: none; z-index: 10000; transition: transform 0.15s ease; } /* Scale up on interactive elements, show text labels on hover */ ``` ### Layer 4: Scan Lines / Atmospheric FX Pick ONE signature effect. Don't stack them all: - Scan line (horizontal bar sweeping slowly) - Vignette (darkened edges) - CRT flicker (very subtle, for retro worlds) - Floating particles (for organic/nature worlds) - Spotlight/flashlight mask (for investigation worlds) --- ## Phase 3: Typography as World-Building **Rule: Minimum 2 font families. Always.** ### The Formula - **Display/Headline:** Serif or statement font (Playfair Display, EB Garamond, Fraunces, Space Grotesk) - **Body:** Clean sans (Inter, Rethink Sans, Plus Jakarta Sans) - **System/Data:** Monospace (JetBrains Mono, IBM Plex Mono, Space Mono) The contrast between headline and system text creates visual tension — serif warmth vs mono coldness. That tension IS the design. ### Scale Headlines should be dramatically large. `clamp(2.5rem, 5vw, 4rem)` minimum for hero text. Body stays readable. The gap between them is the hierarchy. --- ## Phase 4: Animation Choreography Everything enters. Nothing just appears. ### GSAP ScrollTrigger Setup ```js // Every section reveals on scroll gsap.utils.toArray('.reveal-section').forEach(section => { gsap.from(section, { y: 60, opacity: 0, duration: 1, ease: 'power3.out', scrollTrigger: { trigger: section, start: 'top 80%', toggleActions: 'play none none none' } }); }); // Staggered children (cards, list items) gsap.from('.stagger-item', { y: 40, opacity: 0, duration: 0.8, stagger: 0.1, ease: 'power2.out', scrollTrigger: { trigger: '.stagger-container', start: 'top 75%' } }); ``` ### Timing Rules - **Entrance:** 0.8-1.2s with `power3.out` (fast start, gentle land) - **Hover:** 0.2-0.3s with `power2.out` - **Page transition:** 0.4-0.6s - **Stagger delay:** 0.08-0.12s between items - **Never use linear easing.** Everything has organic acceleration. ### Parallax Background elements move slower than foreground. Even 10% difference creates depth. ```js gsap.to('.parallax-bg', { yPercent: -20, ease: 'none', scrollTrigger: { trigger: '.parallax-section', start: 'top bottom', end: 'bottom top', scrub: true } }); ``` --- ## Phase 5: The Loading Sequence The first 2-3 seconds set the entire mood. Never skip this. ### Minimum Viable Loader 1. Full-screen curtain in the world's dominant color 2. One animated element (progress bar, counter, spinner — thematic) 3. One line of thematic text ("INITIALIZING...", "LOADING EVIDENCE...", "ENTERING LAB...") 4. Curtain splits/fades to reveal the site ### Advanced Loader (for portfolio/showcase sites) - Terminal text typing effect - Progress counter (00% → 100%) - Thematic animation (radar sweep, heartbeat line, particle formation) - Sound cue on completion (optional, powerful if done right) --- ## Phase 6: The Project Showcase Pattern If the site shows work/projects/case studies, use the evidence board pattern: 1. **Horizontal slider** with large preview cards (not a grid) 2. **Click to expand** into full-screen viewer/terminal 3. **Metadata sidebar** with structured data (year, stack, role) 4. **Gallery** within the viewer 5. **Navigation** between projects without closing This pattern works because it's interactive (not just scrolling), it treats each project as important (full-screen), and it lets the user control the pace. --- ## Pre-Flight Checklist Before presenting a world-build to Aaron: ### World Check - [ ] Creative brief exists (world, metaphor, emotion) - [ ] Every UI element reinforces the world — nothing breaks the fiction - [ ] The world is consistent — you wouldn't see a detective badge in a space station ### Atmosphere Check - [ ] Background texture layer (noise, grain, or gradient) - [ ] At least 2 ambient/decorative layers (glow, grid, particles, corners) - [ ] Custom cursor or cursor modification on hover - [ ] One signature atmospheric effect ### Typography Check - [ ] 2+ font families loaded and used intentionally - [ ] Serif/sans or display/mono contrast visible - [ ] Headlines are dramatically sized - [ ] Monospace used for data/system elements ### Animation Check - [ ] GSAP (or equivalent) loaded - [ ] Sections reveal on scroll, not on page load - [ ] Hover states on all interactive elements - [ ] Staggered animations on repeated elements - [ ] No element just "appears" — everything enters ### Loading Check - [ ] Loading sequence exists - [ ] Loading sequence is thematic (not a generic spinner) - [ ] Site content is hidden until loader completes ### Screenshot Test - [ ] Take a screenshot. Cover the text. Does it still feel like a place? - [ ] Compare to reference (Killian Herzer, Inflight, etc.) - [ ] Would someone screenshot this and send to a friend? --- ## Reference Sites (study the source) - **killianherzer.com** — investigation/surveillance world, GSAP + Three.js, noise + grid + corners + custom cursor, full loader sequence - **inflight.co** — mission control for creators, data viz, interactive SVG - **3d.killianherzer.com** — Three.js immersive 3D version of portfolio - **poolsuite.net** — retro-futurist world, nostalgia as design language - **lusion.co** — WebGL showcase, creative development studio - **void.st** — minimal but atmospheric, particle systems ## Updating This Skill After builds where Aaron gives feedback on atmosphere, depth, or immersion: - What created the right feeling → add to recipes - What fell flat → add to anti-patterns - New reference sites → add to the list - Code patterns that worked well → add as snippets


Security scan verdicts — ClawScan: clean | static analysis: clean | VirusTotal: clean | SkillSpector: clean (LOW)