Murmuration GitHub

An open agent skill · for any coding agent

Murmuration reads your subject, finds its verb and builds the site in plain HTML, CSS and JS, with real 3D made in code. A roastery roasts. A ledger balances. A tide goes out.

Install the skill See six sites it built

The problem

Ask an AI for an animated landing page and you get the same page every time.

  • a gradient blob
  • drifting particles
  • a globe of dots
  • cards that tilt
  • a glowing orb
  • a marquee of logos
  • steam off a cup
  • equaliser bars

Murmuration starts from the subject instead. It finds what the subject does, the way a roaster watches a curve, a ledger balances, a frame goes up and a tide goes out, and builds the one motion only that subject could have.

How it works

From one sentence to a site that moves.

Six steps, in order. You can stop it at any of them.

  1. 01

    Reads your project

    The product, the brand's colours and fonts, the photos, renders or models that exist, the stack.

  2. 02

    Interviews you

    Two short rounds: what the first five seconds should feel like, then what is real. "You decide" is always an answer, and "just build it" skips the questions.

  3. 03

    Offers directions

    Two or three that genuinely differ, each drawn from your subject. You pick.

  4. 04

    Writes MOTION.md

    The signature, the verb it comes from, an intensity from 1 to 10, the timing tokens and what the page looks like with the motion removed.

  5. 05

    Builds it

    Real content first, then 3D built in code, with a drawn stand-in where WebGL is missing and finished stills under reduced motion.

  6. 06

    Checks it with its own eyes

    Screenshots in both themes, a short laptop window, a phone, no WebGL, reduced motion and a real GPU browser.

MOTION.mdLedgerly, written by the skill
Signature
A 3D desk built in code. As you scroll, the receipts sort themselves into piles and the top quarter of the payment lifts into its own amber tax pot.
Verb
Set aside, sort, balance.
Intensity
3 of 10. Money software has to feel calm and exact.
Avoided
Floating gold coins, rising-arrow charts, glowing fintech gradients.
At rest
Every section complete as text and a working card; a drawn SVG of three balanced columns without WebGL.

Same skill, six worlds

Six one-line briefs.
Six ways of moving.

Each site was built by the skill in a fresh session from the prompt shown, told to decide everything itself. None of them chose the same motion, and none of them reached for particles. The same SKILL.md runs in any agent. Each site was then opened in a real browser and fixed where it broke, which is the skill's last step.

01Coffee roastery

Ember & Ash

The prompt

Make a landing page for Ember & Ash, a small-batch coffee roastery that roasts every Tuesday and ships the same week. Plain HTML, CSS and JS in ./site. It should feel premium and animated, with light and dark mode. Don't ask me questions first: make the decisions yourself and tell me what you chose.

It built
A drum roaster made in code. Scroll follows one Tuesday batch: the burner lights at 06:00, the camera pushes in to the porthole as the beans turn from green to brown, and the door drops them into the cooling tray.
Its verb
“The roastery's verbs are roast and drop, once a week, and its promise is time: roasted Tuesday, posted the same week.”
It refused
Steam curling off a cup and coffee beans floating in space.

Open the site Read its brief

The Ember & Ash site at night: a 3D drum roaster in oxblood and brass, beans glowing behind its porthole, beside the headline.

02Accounting app

Ledgerly

The prompt

Create the launch page for Ledgerly, an accounting app that helps freelancers send invoices, track expenses and set money aside for tax. Plain HTML, CSS and JS in ./site. Animated, but it has to feel trustworthy. Don't ask me questions first: make the decisions yourself and tell me what you chose.

It built
A 3D desk of paper. The invoice stands up to be read, the receipts sort into three piles, and the tax share of the payment lifts into its own amber pot until the books balance.
Its verb
“The verbs of bookkeeping are set aside, sort and balance.”
It refused
Floating gold coins, rising-arrow charts, glowing fintech gradients.

Open the site Read its brief

The Ledgerly site: a 3D stack of paper slips and an invoice on a desk.

03Architecture studio

Atelier Brenner

The prompt

Design a site for Atelier Brenner, a five-person architecture studio that builds timber houses and small public buildings. Plain HTML, CSS and JS in ./site, with tasteful motion. Don't ask me questions first: make the decisions yourself and tell me what you chose.

It built
A timber house raised as you read: five frames swing up on load, then the ridge with a small spruce for the topping-out, the walls, the roof and the larch cladding, through one working day from first light to lit windows at night.
Its verb
“A timber building's verb is raise. Its frame is cut in the workshop, raised bent by bent in a couple of days and topped out with a tree.”
It refused
A white massing model turning on a plinth, or a blueprint grid that draws itself.

Open the site Read its brief

The Atelier Brenner site: a 3D timber frame of five bents, raised beside the headline.

04Music festival

Lowtide

The prompt

Make a website for Lowtide, a three-day electronic music festival on a beach in late August. Plain HTML, CSS and JS in ./site. Bold, loud and animated. Don't ask me questions first: make the decisions yourself and tell me what you chose.

It built
A 3D bay where scroll takes the tide out. The sea walks back across the sand and uncovers the Ring, a 26 m ring of light on the flats, while a 124 BPM kick pulses the Ring, its beams and the crowd. The flood returns at dawn.
Its verb
“The festival's verb is the ebb. The sea walks out about a kilometre and the party happens on the sand it leaves.”
It refused
Equaliser bars, an audio-reactive blob, a synthwave grid sun, palm trees and surfboards.

Open the site Read its brief

The Lowtide site at night: a glowing ring of light standing in the sea, with a line of lamps leading out to it.

05Children's science museum

Sprout Lab

The prompt

Build a website for Sprout Lab, a hands-on science museum for children aged 5 to 12. Plain HTML, CSS and JS in ./site. Playful and animated, and parents need to find opening times and tickets easily. Don't ask me questions first: make the decisions yourself and tell me what you chose.

It built
A seedling in a lab beaker that sprouts as you read. One leaf unfurls for each zone of the museum, in that zone's colour, and a flower opens at Tickets.
Its verb
“The museum's name is a verb, sprout, and so is its promise: curiosity grows by doing.”
It refused
Cartoon mascots, rainbow chaos, a bubbling green flask.

Open the site Read its brief

The Sprout Lab site: a 3D beaker with a sprouting seedling beside the opening times.

06Freight forwarder

Northline

The prompt

Build a homepage for Northline, an ocean and air freight forwarder that moves containers between ports across Asia and Europe. Put it in ./site as plain HTML, CSS and JS. Make it cinematic, like an Awwwards site of the day. Don't ask me questions first: make the decisions yourself and tell me what you chose.

It built
One container ship on a simulated ocean. Scroll sails it from Shanghai to Rotterdam, loaded at dawn, at sea through the night, arriving under the cranes at the next dawn.
Its verb
“The forwarder's verbs are load, sail, clear, arrive.”
It refused
A blue globe of dots with glowing arcs.

Open the site Read its brief

The Northline site: a 3D container ship loading at a quay at dawn.

And the first demo, Vesper: a made-up night-train company, told with one particle cloud that becomes a train, a route, a cabin window, snow over a pass and the sun rising over the sea.

The catalogue

Nineteen signatures. Particles are one of them.

The skill picks one per page from your subject and the assets you have, then two to four quiet supporting moves. Each technique has a recipe: what it fits, how to build it without a framework, what it costs and what the page shows at rest.

Scenes and objects

  • A 3D object, turning or relit
  • A 3D world or flythrough
  • A particle cloud that re-forms
  • A globe or map with routes
  • An image sequence scrubbed by scroll
  • Video

Surfaces and fields

  • A shader field: mesh, aurora, liquid metal, dither, halftone, ASCII
  • A generative canvas
  • Physics

Drawing and type

  • Line drawing and mask reveals
  • Type as the image
  • Illustration in motion

Space and structure

  • Depth layers
  • Pinned chapters
  • Image transitions

Interaction and pacing

  • Cursor-led reveals
  • Page choreography
  • A mechanic: hold to advance, a small game
  • Data in motion

Install

Give your next site a verb.

Murmuration is an open agent skill: one folder with a SKILL.md, read the same way by every agent that supports the standard.

Any agent

npx skills add aniketshukla1/murmuration

It asks which agents to install into. Add -a codex (or cursor, gemini-cli, github-copilot) to pick one, and -g to install it for every project.

  • Claude Code
  • Codex
  • Cursor
  • GitHub Copilot
  • Gemini CLI
  • OpenCode
  • Windsurf
  • Goose
  • Amp
  • Kiro
  • Roo Code
  • Cline
  • Junie
  • Antigravity
  • OpenClaw
  • and 60 more
Then ask your agent

Make a website for my pottery studio, Kiln & Clay. Make it 3D and mind-blowing.

Claude Code plugin

/plugin marketplace add aniketshukla1/murmuration
/plugin install murmuration@murmuration

By hand

Copy skills/murmuration into your agent's skills folder: .agents/skills/ for Codex, Cursor, Copilot, Gemini CLI, OpenCode, Amp and Cline, or .claude/skills/ for Claude Code. Chat apps that take skill uploads, such as claude.ai, take murmuration-skill.zip from the latest release.

Latest release