Skip to content
SloplessTry the picker

Signature look · generative

Generative grid pattern

A seeded pattern of grid cells (Truchet tiles, arcs, bars, dots) in the palette colours fills a band or the hero's media slot, generated once as static SVG.

Id
generative-grid-pattern
Cost
about 1 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 the algorithmic-art skill to design a seeded tiling rule on a square grid aligned to the 12-column layout (cell = one column width or half of it).
  • Generate the pattern at build time (or server render) as inline SVG with a fixed seed, using only colours from tokens.json; no runtime library.
  • Optionally re-roll a few cells on hover with a 200 ms cross-fade; skip that under prefers-reduced-motion.
  • Keep the SVG under 30 KB and mark it aria-hidden; it is decoration, never content.

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 Bauhaus

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

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
Desktop
Northfold
  • About
  • Contact

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
Phone

Reduced-motion fallback

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

Northfold
  • About
  • Contact

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
Desktop, prefers-reduced-motion: reduce
Northfold
  • About
  • Contact

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
Phone, reduced motion

Styles it suits

BauhausBento TechConstructivistMemphisMid-Century ModernNeo-BrutalismRisograph PrintSwiss InternationalSynthwave Retro-FutureTerminal Mono