Webgl Landing Steering

WebGL Landing Steering Skill

Use this skill to steer outcomes

Map landing-page goal to WebGL direction before writing code.

1) Define the page intent

Identify the primary conversion and brand signal:

• Premium / luxury / minimal confidence

• Technical / infrastructure / data authority

• Playful / consumer / social energy

• Cinematic / launch / storytelling impact

Also capture:

• Device mix (desktop-heavy vs mobile-heavy)

• Motion tolerance (prefers-reduced-motion policy)

• Production constraints (deadline, team skill, maintenance budget)

2) Choose the WebGL lane

Pick one dominant lane; avoid mixing 3-4 heavy effects in the hero.

Lane A: Subtle depth field (high conversion safety)

Use for: SaaS, productivity, B2B tools where readability wins.

• Visuals: soft gradient meshes, slow parallax planes, light bloom

• Motion: low amplitude, always secondary to copy

• Stack: Three.js plane shaders or lightweight shader canvas

• Rule: hero text contrast and CTA prominence first

Lane B: Data/particle intelligence (technical credibility)

Use for: AI, infra, analytics, developer products.

• Visuals: particle flows, node networks, vector fields, wireframes

• Motion: purposeful directional flow toward CTA area

• Stack: Three.js + custom shader/points, optionally GPGPU for dense fields

• Rule: communicate "system behavior," not random sparkles

Lane C: Object-centric 3D product moment (feature clarity)

Use for: hardware, apps with strong product visuals, launches.

• Visuals: central GLTF model, controlled camera orbit, material highlights

• Motion: interaction-driven or timeline-based reveal

• Stack: Three.js + GLTF/DRACO/KTX2 pipeline

• Rule: one hero object, short loop, fast first meaningful paint fallback

Lane D: Immersive cinematic scene (brand campaign)

Use for: campaign pages where wow factor is the main KPI.

• Visuals: volumetrics, heavy postprocessing, dense scene composition

• Motion: choreographed sequence with scroll chapters

• Stack: Three.js + postprocessing + optional GSAP ScrollTrigger

• Rule: provide a static/mobile fallback and strict performance gates

3) Steering matrix by landing page type

• Waitlist / pre-launch: Lane A or B. Keep copy legible and quick to load.

• Product feature page: Lane A or C. Demonstrate product truth, not abstract noise.

• Pricing / high-intent page: Mostly Lane A. Keep WebGL decorative only.

• Enterprise trust page: Lane B with restrained palette and low noise.

• Consumer app growth page: Lane B with playful palette, but cap CPU/GPU load.

• Campaign microsite: Lane C or D with explicit fallback for lower-end devices.

4) Quality gates before shipping

Pass these gates before adding more visual complexity:

1. Message gate:

• Hero headline + CTA readable in under 3 seconds.

• WebGL never blocks understanding of offer.

2. Performance gate:

• Cap pixel ratio: Math.min(devicePixelRatio, 1.5-2).

• Target stable frame time on common mobile devices.

• Lazy-load heavy assets; show immediate non-WebGL poster/fallback.

3. Accessibility gate:

• Respect prefers-reduced-motion (still frame or low-motion mode).

• Maintain color contrast over animated backgrounds.

4. Reliability gate:

• Handle context loss and resize.

• Dispose geometries/materials/textures in SPA route changes.

5) Implementation strategy by risk

• Low risk (fastest): CSS + canvas illusion, minimal shaders

• Medium risk: Three.js scene with 1-2 meshes, lightweight post FX

• High risk: multi-pass shaders, dense particles, advanced postprocessing

Default to low/medium risk for conversion pages unless user explicitly asks for campaign-grade immersion.

6) Prompting template for Codex-style execution

Use this prompt pattern when asked to build a WebGL landing hero:

"Build a [lane] WebGL hero for a [page type] with [brand adjectives]. Primary goal: [conversion]. Constraints: [device mix], [performance budget], [reduced motion policy]. Implement fallback first, then enhance with WebGL. Keep hero copy clarity as priority over visual complexity."

7) Common failure patterns and corrections

• Failure: "Looks cool but conversion dropped."

  • Fix: reduce motion amplitude, darken/soften background, raise CTA contrast.

• Failure: "Mobile stutters."

  • Fix: reduce particle count, lower DPR cap, remove expensive postprocessing.

• Failure: "Visual style feels generic."

  • Fix: pick one signature motif aligned to brand (grid, wave, orbit, shards).

• Failure: "Team cannot maintain shader complexity."

  • Fix: simplify to modular Three.js scene with documented parameters.

Output format when applying this skill

Return:

1. Recommended lane and why

2. Visual spec (palette, motion behavior, composition)

3. Technical stack and complexity tier

4. Fallback behavior

5. Performance + accessibility checklist

6. Build order (MVP first, enhancement second)