Skip to content
SloplessTry the picker

Signature look · 3d

WebGL hero scene

A live three.js scene behind or beside the hero copy: a slow-moving abstract form lit in the palette colours, reacting gently to the pointer. Static poster first, canvas mounted after the page is interactive.

Id
webgl-hero-scene
Cost
about 150 KB of JavaScript (gzipped), counted against the design's performance budget
Stacks
Next.js, Astro, SvelteKit, Plain HTML
Motion
Respect prefers-reduced-motion with a static fallback (shown below)

What the agent must do

  • Render one three.js scene in the hero only, in the area the hero pattern reserves for media or shape; the hero copy stays HTML on top, never inside the canvas.
  • Import three.js with named imports (tree-shaken) and dynamic-import the scene module after first paint (requestIdleCallback or an IntersectionObserver); show a static poster image of the scene until then.
  • Take every colour from tokens.json (accent, accent2, bg, surface); no extra hues, no bloom glow unless the style allows gradients.
  • Cap devicePixelRatio at 2, pause the render loop when the hero is off-screen or the tab is hidden, and dispose geometries, materials and the renderer on unmount.
  • Under prefers-reduced-motion, keep the poster image (or one rendered frame) and do not start the animation loop; on phones (< 640 px) keep the poster only.

Required skills (the agent asks before installing, per project)

threejs-fundamentals
Three.js scene, camera, renderer, resize and render-loop setup with cleanup. Base for WebGL hero scenes. Source: CloudAI-X/threejs-skills, reviewed 2026-10-24 at 6ada7589fe9d.
npx skills add CloudAI-X/threejs-skills#6ada7589fe9d88d3a95054dab89cb625bbc1aaeb --skill threejs-fundamentals
threejs-shaders
Custom GLSL vertex/fragment shaders and uniforms for shader backgrounds and gradient fields. Source: CloudAI-X/threejs-skills, reviewed 2026-10-24 at bb28b63882e0.
npx skills add CloudAI-X/threejs-skills#bb28b63882e07916facfdafe7203d9925da3e333 --skill threejs-shaders

Running demo, in Bento Tech

The preview renderer's stand-in for this look on the hero of a Bento Tech design. It shows where the look lives and how much of the screen it takes; the real effect is built with the skills above.

Full reference renderTry it in the picker

Northfold
  • About
  • Contact
Read case studiesStart a project

Brand & product studio

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a projectRead case studies

Corvid Robotics — identity

06

Booking projects from June 2026

Strategy and design for companies that make things

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Corvid Robotics

Fieldstack

Tidewater Labs

Arklow Valves

Mosswood Bio

Desktop
Northfold
  • About
  • Contact
Start a project

Brand & product studio

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a projectRead case studies

Corvid Robotics — identity

06

Booking projects from June 2026

Strategy and design for companies that make things

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Phone

Reduced-motion fallback

What visitors with prefers-reduced-motion: reduce must get: the same layout, no movement.

Northfold
  • About
  • Contact
Read case studiesStart a project

Brand & product studio

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a projectRead case studies

Corvid Robotics — identity

06

Booking projects from June 2026

Strategy and design for companies that make things

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Corvid Robotics

Fieldstack

Tidewater Labs

Arklow Valves

Mosswood Bio

Desktop, prefers-reduced-motion: reduce
Northfold
  • About
  • Contact
Start a project

Brand & product studio

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a projectRead case studies

Corvid Robotics — identity

06

Booking projects from June 2026

Strategy and design for companies that make things

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Phone, reduced motion

Styles it suits

Bento TechFrosted GlassSynthwave Retro-FutureY2K Chrome