Manual

Everything the machine does, and how to take what it makes into the rest of your work.

Start here

Create-o-matic has five instruments so far: Motion, for type and marks that move; the Texture lab, for treating images and video; the Type tester, for comparing type; the Colour lab, for studying palettes; and the Brand bench, for putting a brand together. They share the same controls, patches, keyframes and exports. Open Motion. On the left is the stage: the loop, a play button, and the playhead. On the right is the rack of controls, in groups. Everything you change is kept in the page's address as you go, so a reload never loses work and the address bar is always a link to exactly what's on screen.

1. Pick a preset from Presets, or start from what's there.
2. Change the words in Content, one per line.
3. Pick a Format: 9:16 for Reels and Stories, 4:5 for the feed, 16:9 for YouTube, A3 for print.
4. Press Vary a few times. It deals a new grid and motion and leaves your type, colour and format alone.
5. Export: MP4 for social, PNG for a still.

The rack's groups have workshop names, each with a plain description beside it: Patch bay (presets and saving), Paper (size and time), Type case (words, marks, fonts), Loom (the grid), Stencil (shape fill), Clockwork (motion and keyframes), Ink well (colour), Stage (gradient, image, video), Darkroom (effects) and Print shop (export). Hover any control's name for what it does.

Keyboard: Space plays and pauses, ← and → step a frame. Drop a font, an SVG, an image, a video or a patch anywhere on the page.

The Texture lab

The Texture lab is a darkroom for any image or video. Drop a file anywhere on the page and it's on the Light table; the frame takes its exact size (up to 6,000 pixels on the long side; export at double for more). Choose another Format to reframe it, for instance a landscape video as 9:16. Zoom and Pan can be keyframed for a slow camera move across a still.

The stack

The Darkroom is a stack of layers, applied from the top down. Add an effect… puts a new layer at the bottom. On each layer: the dot switches it on and off, the arrows move it, × removes it, and its name opens its settings, including a Blend mode and Opacity. The same effect can be used as many times as you like.

Blend modes work as they do in Photoshop. Multiply for paper, dirt and ink. Screen for light leaks, dust on black and glows. Overlay and Soft light for gradients and colour washes. Colour and Luminosity to move just the hue or just the tone.

The textures are generated in code from the seed, so they're original, never repeat, and come out the same every time. Reroll gives you new dust, fibre and grain without changing anything else. For your own textures, add a Texture overlay layer and choose the file; photographs of real paper, risograph prints and photocopies make the best ones.

Presets here are looks: choosing one changes the stack and keeps your image. Vary nudges every setting in the stack a little either way. A video plays through its loop, and every exported frame waits for the video to reach its exact time.

The Type tester

The Type tester sets your own words as a specimen sheet. The Galley holds the rows: open a row to type in it and set its font (Browse searches the open library, your Adobe Fonts project, installed fonts and My fonts), size or Fill the width, weight, italic, tracking, leading, case and ink. The arrows reorder rows, ⧉ copies one, and Add a row copies the last. Drop a font file anywhere and it arrives as a new row, so comparing a font you've just bought against its rivals is one drag.

Double-click any row on the stage to type straight into it, in its own font and size; Escape or a click elsewhere finishes. In the font browser, the arrow keys step through the list and try each font on the page as you go; Enter keeps the one you're on.

The Chase sets the page: rows stacked or in a grid of columns (side-by-side pairings), aligned left, centre or right, sitting at the top, middle or bottom, with hairline rules and small labels naming each row's font, weight and size. Clockwork sets it moving: Weight sweep (a variable font's weight axis, rows staggered), Tracking breathes, Size pulse, Wave, Marquee (each row a ticker, alternating direction) and Typewriter. Every row runs a little behind the one above by the Stagger.

Vary deals every row a different open font of the same kind, chosen from real text families (Latin Extended, three weights or a variable axis), a quick way to meet faces you'd never have scrolled to. Export the sheet as PNG, or the motion as MP4, WebM or GIF.

The Colour lab

The Colour lab lays out your own colours as a study. The Swatch book holds the inks: two to twelve, picked with the swatch picker, pasted as hex codes, or dropped on the page as a palette file (Adobe .ase, GIMP .gpl, .json, or any text with hex codes in it, such as a stylesheet). Colour codes label each ink with its hex, RGB and OKLCH values, just hex, or nothing (Hidden) for a clean image.

The maths happens in OKLab and OKLCH, colour spaces where equal steps look equal. Blends don't sag into grey halfway, tints keep their hue, and colours a screen can't show are brought into range by giving up chroma, not hue or lightness. Vary deals a new palette in the harmony set under Vary deals: neighbours, opposites, split complementary, triad, one hue in many lights, print inks, or Albers' greys and earths. It keeps the number of inks, and spreads them from dark to light so they read against one another.

Clockwork sets the palette moving. Hue swing turns every ink round the colour wheel and back. Lights up lifts each ink's lightness in turn. Carousel passes the inks along, going round the hue wheel between them so nothing turns muddy on the way. Breathe swells and shrinks the shapes. The Print shop exports the study as PNG, MP4, WebM or GIF, and the palette as CSS custom properties (Copy CSS), JSON, or an Adobe swatch file for Illustrator, Photoshop and InDesign.

The Brand bench

The Brand bench puts a brand on one board: the logo on paper, the logo reversed out of each ink, the palette with its codes, and the faces set in their roles. Drop a logo anywhere on the page. An SVG keeps its own colours; a PNG or JPEG has its background taken out (its colour is read from the corners). Take its colours makes the logo's colours the inks. Under Type case, give each role (headline, subhead, body, caption, accent) a face from the library, your Adobe Fonts project or your own files; the arrow keys step through fonts in the browser.

Board shows the whole board or one part of it. The logo alone is for animating a logo: choose how it moves under Clockwork (breathe, float, coin flip, through the inks), turn on an effect such as ASCII or halftone, which applies to the logo wherever it's drawn, and export it as MP4, GIF or PNG (No paper gives a transparent PNG).

Type and marks

Each line of Content is a slot. Content mode decides which slot goes in which cell:

Marks: logos and graphics

Drop an SVG on the page, or use Add mark… under Content. It becomes a line such as @logo, and from then on it behaves exactly like a word: it stretches, takes the inks, blends and goes through the effects. Marks fit can keep a logo's proportions; Marks colour can keep its own colours.

SVG gives the best result: it's drawn as vectors, sharp at any export size, and travels inside the patch. Only filled shapes come through, so outline strokes and text first (in Illustrator: Object › Expand and Type › Create Outlines). PNG and JPEG work too: transparent images use their alpha as the shape, opaque ones use their darkness. Those stay in your browser rather than in the patch.

Fonts

Press Browse beside Family to search everything the machine can reach, each name set in its own face:

• Font library: every Google family and about 120 more open-source faces, around 2,100 in all, served by Fontsource. Free to use and ship.
• Adobe kit: the families in your own Adobe Fonts web project. Choose the source and enter the project ID from fonts.adobe.com › Web Projects. Its families appear in the browser; use each family's CSS name.
• Installed: fonts on your computer (Chrome and Edge ask permission first). Fine for exports; an embed on your website can't use them.
• My fonts: font files you add, from any foundry. They stay in this browser.

With a variable font, set Weight, small and Weight, large apart and the weight follows the cell: light when it's squeezed, heavy when it swells.

Colour

Every swatch opens the picker: recent colours, swatch folders (primaries, process CMYK, greys, papers, inks and named palettes), a mixer with HSB, RGB and CMYK, an eyedropper for anything on screen, and a hex field. Use as inks applies a whole folder.

Brand palettes load from an Adobe .ase file (export one from Illustrator, Photoshop or InDesign: Swatches › Save Swatch Exchange), a GIMP .gpl, a .json, or any .css or .txt with hex codes in it. Ink by decides which ink each cell gets; Blocks fills the cells with ink and cuts the type out of them. Type blend sets how type sits over a backdrop.

Grid and motion

The frame is a grid of strips (columns when the direction is vertical, rows when it's horizontal), each cut into cells. Every cell has a place on a wave. As the wave passes, cells swell and their neighbours give way.

Golden section

Set Layout to Golden section and the frame is cut into a spiral of golden rectangles: each cut takes 1/φ (0.618) of the long side, leaving a smaller golden rectangle to cut again, turning a quarter each time. Choose the First cut, the Spiral's direction and the number of Golden cuts; Golden swing lets the cuts breathe away from φ and back as the wave passes (0 holds them exactly golden). With Fit set to Keep proportions (editorial), words sit in their blocks at their true proportions, aligned like a page; with Ink by: Blocks the blocks themselves take the inks.

Shape fill

Pick any mark as the Shape and the type fills its silhouette, or flows around it. Fill cuts the type to the edge or keeps only whole cells; Around makes the shape negative space. Shape size, across and down can be keyframed, so a logo can grow, pulse or sweep through the type. Thin shapes like a signature want many small cells: try 30 or more columns.

Keyframes

Every number and colour has a small diamond beside its name. Click it to set a key at the playhead; the name turns to the accent colour. Move the playhead and change the value to set another. Under the stage, each animated setting gets a lane: drag keys to move them, double-click a key to change its easing (smooth, linear, hold), select one and press Delete to remove it.

Keyframes play decides how the timeline maps onto the loop:

• Boomerang plays forwards over the first half of the loop and back over the second. It always ends where it began, so it's always seamless.
• Loop, easing back plays forwards, then eases from the last key round to the first.
• Loop, jumping back plays forwards and cuts back to the start.

Effects

Applied in this order, each off at zero:

Gradients and backdrops

The Stage group sits behind the type. Gradient makes a moving gradient from its own inks: Mesh (soft blobs of colour drifting on their own orbits), Linear (bands that turn) or Radial (rings that travel outwards). Drift is how many times it comes round per loop. Leave Content empty and it's a gradient maker on its own; add a little grain and export.

Drop an image or video anywhere on the page (not on the Marks row) and it sits behind the type. Set the format first: to reframe a 16:9 video as 9:16, pick Vertical and set Fit to fill the frame. Video speed sets the playback rate; the video restarts with each loop. In exports, every frame waits for the video to reach its exact time. Backdrops stay in your browser; the patch only names them.

Exporting

Everything is rendered offline, frame by frame, through the same code as the preview, so a slow computer makes a slower export, never a stuttering one. Exports carry on in a background tab.

Patches

A patch is the complete recipe for a loop, as a small JSON file. Like a patch sheet for a synthesizer: hand it to someone and they get exactly the same thing.

{
  "name": "Campaign button",
  "instrument": "elastic",
  "version": "0.4.0",
  "seed": 1984,                       // every random choice comes from this
  "params": {                         // the controls; anything left out takes its default
    "format": "square",
    "content": "PLAY\nMORE",
    "font": "Anton",
    "palette": ["#F3EBD8", "#E4372B"],
    "shape": "button"
  },
  "keys": {                           // keyframes, t from 0 to 1 along the timeline
    "shapeScale": [{ "t": 0, "v": 0.9, "ease": "smooth" }, { "t": 1, "v": 1 }]
  },
  "marks": { "button": "<svg …>" }   // SVG marks travel inside the patch
}

Patches are forgiving: unknown settings are ignored, values are clamped into range, and missing ones take their defaults. So a patch you write by hand, or one an AI writes from a description, always opens. The full list of settings, with their ranges, is in instrument.json.

Presets

Save keeps a patch in your browser. To make it a preset everyone gets, run the machine locally (below), set it up, name it, and press Add to presets. It's written into web/instruments/elastic/presets/ and listed in index.json, ready to commit. By hand: put the patch file in that folder, add its name to index.json, and run npm run check.

A studio can keep its own fork with its own presets, so a team gets a menu of on-brand starting points.

On your website

Press Copy embed code in the machine, or write it yourself. It runs the real engine, so it's a few kilobytes rather than a video, sharp on any screen, and it rests while it's scrolled out of view. Visitors who ask their system for reduced motion get the still frame.

<div id="hero" style="aspect-ratio: 16 / 9"></div>
<script type="module">
  import { mount } from "https://createomatic.xyz/instruments/elastic/embed.js"
  mount(document.getElementById("hero"), "/patches/hero.json")
</script>

mount takes a patch object or the address of a .json, plus an optional backdrop: mount(el, patch, { backdrop: "/clip.mp4" }). It returns a function that stops it. For the most control, host the web/ folder yourself. Fonts from the font library, Adobe web projects and SVG marks all work on any site.

Rather a file? Export WebM and use <video autoplay muted loop playsinline>.

In Figma

• Stills: export PNG and drag it onto the canvas.
• Motion: drag a GIF or MP4 onto a frame. GIFs play in prototypes; video is supported on paid Figma plans.
• Colour: export your Figma palette as hex codes and paste them into Inks, or load them as a brand palette.
• Logos: copy a vector from Figma as SVG (Copy as › Copy as SVG), save it as a .svg file, and drop it into the machine as a mark.

With Claude and other agents

The machine can be operated from code exactly as it's operated by hand. In the browser, window.instrument exposes it:

instrument.setPatch({ params: { content: "HELLO", format: "square", halftone: 8 } })
instrument.set("ease", 3.2)
instrument.key("copier", 0, 1); instrument.key("copier", 1, 0)
const png = await instrument.render("png")   // a Blob, no download
await instrument.export("mp4")               // downloads

Because every control is described in instrument.json, an agent such as Claude Code can turn a brief ("a slow, pink, photocopied loop of our tagline, 9:16") into a patch, open it, look at it and refine it. The repository includes a CLAUDE.md for exactly that.

Running it yourself

git clone https://github.com/thisisnickdecker/create-o-matic
cd create-o-matic
npm run dev        # http://localhost:4173
npm run check      # manifests, presets and tests

That's all: Node 22 or later, no install, no build. The site is the web/ folder, as static files. To publish your own copy, connect the repository to Cloudflare Pages (or any static host) with web as the output directory and no build command.

Writing an effect

An effect is one file in web/packages/core/effects/. It declares its controls and draws onto the finished frame:

export default {
  id: "invert",
  label: "Invert",
  params: [{ key: "invert", label: "Invert", type: "number", min: 0, max: 1, step: 0.01, default: 0 }],
  active: (p) => p.invert > 0,
  apply(ctx, p, { t, frame, scale, seed, background }) {
    ctx.globalCompositeOperation = "difference"
    ctx.globalAlpha = p.invert
    ctx.fillStyle = "#fff"
    ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height)
    ctx.globalAlpha = 1
    ctx.globalCompositeOperation = "source-over"
  },
}

Add it to the list in effects/index.js and to the instrument's "effects". Its controls, keyframes, presets and agent access come with no more code. Two rules keep loops perfect and exports faithful: anything that moves completes whole cycles as t goes from 0 to 1, and sizes are measured in output pixels times scale.

What it can't do yet

• Bend or melt individual letter outlines. Melt and liquid move pixels, so true glyph distortion and SVG or PDF export are next.
• Sync to audio.
• Reorder effects, or use one twice.
• Carry fonts, images or videos you've added from one computer to another: add the files again.
• Run liquid, melt and photocopy in real time at full size. They're computed on the CPU, so the preview lightens while they play; exports are full quality.