Skip to content
SloplessTry the picker

Signature look · generative

Generative flow field

Thousands of fine particle trails follow a seeded noise field and slowly draw an organic pattern in the palette colours behind the hero; the same seed always draws the same picture.

Id
generative-flow-field
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

  • Design the flow field with the algorithmic-art skill (seeded noise, particles, trails), then port the final sketch to plain Canvas 2D for production: do not ship p5.js on the site.
  • Seed it from a fixed number so every visit draws the same composition; use only accent, accent2, text and bg colours from tokens.json.
  • Run the simulation for a fixed number of frames (under 6 s) and then stop, leaving the finished drawing; pause when off-screen.
  • Under prefers-reduced-motion, draw the final frame immediately (or show a pre-rendered image of it) with no animation.
  • Start the canvas after first paint and cap it to the hero's media area; text never sits on the busiest part of the field.

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

algorithmic-art
Seeded generative art with p5.js: flow fields, particle systems, parameter exploration. Used by the generative looks. Source: anthropics/skills, reviewed 2026-10-24 at ef740771ac90.
npx skills add anthropics/skills#ef740771ac901e03fbca3ce4e1c453a96010f30a --skill algorithmic-art

Running demo, in Japanese Minimal

The preview renderer's stand-in for this look on the hero of a Japanese Minimal 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

We make complicated companies simple to choose

Brand & product studio

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

Start a project
Desktop
Northfold
  • About
  • Contact

We make complicated companies simple to choose

Brand & product studio

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

Start a project
Phone

Reduced-motion fallback

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

Northfold
  • About
  • Contact

We make complicated companies simple to choose

Brand & product studio

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

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

We make complicated companies simple to choose

Brand & product studio

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

Start a project
Phone, reduced motion

Styles it suits

Japanese MinimalOrganic Earth