Skip to content
SloplessTry the picker

Signature look · shader

Shader gradient background

A slow, living mesh-gradient field drawn by a fragment shader in the palette colours, behind the hero or one feature band. Only for styles that allow gradients.

Id
shader-gradient-bg
Cost
about 6 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

  • Use only if tokens.json has gradients: true; otherwise skip this look and say so.
  • Draw one full-size fragment shader on a single canvas (raw WebGL with one triangle, no three.js unless the page already ships it), re-coloured from tokens.json accent, accent2, surface and bg; ignore the mesh-gradient skill's fixed blue palette.
  • Keep motion slow (one cycle per 20–40 s), render at half resolution scaled up, and stop the loop when the canvas is off-screen or the tab is hidden.
  • Text over the field must pass AA against the darkest and lightest point of the gradient; add a solid panel if it doesn't.
  • Paint a static CSS gradient of the same colours first; mount the shader after first paint, and keep the static gradient under prefers-reduced-motion or when WebGL is unavailable.

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

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
mesh-gradient-dark-blue-clean
Procedural mesh-gradient background rendering; the technique is re-coloured from the design tokens. Source: MengTo/Skills, reviewed 2026-10-24 at 038cbff3ec13.
npx skills add MengTo/Skills#038cbff3ec13be857255459c57a05f6e40c65926 --skill mesh-gradient-dark-blue-clean

Running demo, in Frosted Glass

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

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

Booking projects from June 2026

launches shipped

140+

years independent

12

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

Booking projects from June 2026

launches shipped

140+

years independent

12

Phone

Reduced-motion fallback

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

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

Booking projects from June 2026

launches shipped

140+

years independent

12

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

Booking projects from June 2026

launches shipped

140+

years independent

12

Phone, reduced motion