Docs
Everything here is short on purpose — the studio is the manual. Poke things; ⌘Z always brings the look back.
The studio in a minute
The left rail is the tool library: the layers (Color, Image, Pattern), the 3D pair (Text and Shape), and a stack of thirteen effects. Click one, or drag it onto the canvas, to add it to the composition. The right panel shows a section for everything that's in, ordered the way it renders: higher in the panel means later in the render, so the top section sits on top of the picture.
The whole composition is one stack — layers included. Every section has a ⠿ handle to re-stack it by drag, an eye to hide it without losing its settings, and a right-click (or ⋮) menu to hide, lock, or remove. A stage only ever affects what's below it, Photoshop-style: drag your photo above Halftone and it rides crisp over a halftoned gradient; drop it back below and the dots print over everything. Glass above halftone refracts the printed dots; halftone above glass prints the refraction. Fresh effects arrive collapsed so the stack stays easy to re-order — click a section's title to open its controls.
Every look is a link
The whole design serializes into a link — there is no account and no save button. Copy look (C) puts a shareable link on your clipboard; anyone who opens it gets your exact composition, sliders and all.
While you edit, the address bar stays clean — no history entry per slider nudge — and the studio remembers your working look on this device, so a plain reload picks up right where you left off.
One caveat: uploaded photos stay on your device, so links can't carry them. The bundled photos travel fine.
Randomize
Space rolls the dice. The scope picker next to the die chooses how far a roll reaches: Light re-rolls what's already in the composition, Full may add and remove effects too. Your photo is never touched, and anything locked (right-click a section) or hidden is frozen.
Pointer reactivity
Pointer is a stage in the effect stack, not a global setting. It only moves what's below it — so with Glass above Pointer, the flutes stay still while the content behind them bulges toward the cursor; drag Pointer to the top and the whole print bends instead. Five reactions: a following light, a warp bulge, a parallax drift, a vortex swirl that stirs the print around the cursor, and a shard scatter that breaks it into pieces which reassemble when you leave.
Stills are always neutral: PNGs, videos and thumbnails render the resting look no matter where the mouse was.
Animation
One switch (A) sets the whole composition in motion, and every stage carries its own: the gradient drifts, waves travel, light shimmers, glass gently swims, halftone dots breathe, ASCII glyphs flicker, dither and grain crawl, the pixel grid wanders. It all rides one shared cycle, so exported loops close seamlessly — and none of it touches your stills: with animation off, the look renders exactly as designed.
3D type & shapes
The palette's 3D pair — Text and Shape — puts one dimensional object into the composition: an extruded word or a primitive (torus, sphere, knot, box, cone — picked in its panel section). It joins the stack as a layer, so halftone rasters it and contour lines map it like terrain, and it re-stacks by drag like everything else. Camera, key light, material and surface color live in its panel section; with Animation on, the turntable spins whole revolutions per loop, so exported loops wrap seamlessly. Face the pointer turns the object to meet the cursor — live on the studio canvas, settling back to its pose the moment the cursor leaves, so stills never catch it mid-glance.
The 3D engine loads the moment the layer first joins — never before — and everything about the object travels in the link, typed text included. Embeds bake the object to a still at its rest pose: the embed runtime stays exactly as light as it was, and reduced-motion visitors see that same frame.
Export
The Export button (or E) offers PNG at screen size, 2K or 4K — always in the Frame's aspect ratio — and a seamless-loop video once Animation is on (4–12 s, your pick) or a video layer is present (the export matches the footage's length, so the wrap lands exactly on the file boundary). Browsers with WebCodecs get an H.264 MP4, rendered offline as fast as your GPU draws; everywhere else the loop records as WebM in real time. Either way the shader cycle ends exactly where it began.
Embed a look in your site
Export → Copy embed code hands you a two-line component: one <script> tag for the hosted runtime — cached once, shared by every look on your site — and an <overprint-bg> element carrying your look as the same hash you see in the studio URL. Different look? Change the look attribute; the runtime stays cached.
- Design the look; add a Pointer stage if you want it to react.
- Export → Copy embed code.
- Paste it inside any section with
position: relative— the component fills it and sits behind its content.
The component tracks the cursor on the parent section, so it reacts through your headline without ever eating a click. It pauses offscreen and in hidden tabs, renders a static frame under prefers-reduced-motion, and its comment header links back to the editable look in the studio. Bundled textures load from Overprint; a photo you uploaded travels inline as a data URI, capped at 1920 px. Download test page gives you the same snippet inside a ready-made hero to try locally.
Heads-up: some machines switch animations off at the OS level — Windows' Animation effects setting, macOS's Reduce Motion — and every browser on them then reports prefers-reduced-motion. On those machines the embed (and the hero on this site) shows its static frame and skips the pointer reaction. That's the component respecting the viewer's preference, not a bug — design looks that also hold up as stills.
Use a look in an Angular app
Export → Copy Angular component hands you a ready component built on the overprint-angular package: a <overprint-canvas [config]> element driven by a typed IOverprintConfig — every field of the look, spelled out and editable in your codebase instead of packed into a hash. The package's renderer is generated from the studio's own modules, so the component draws exactly what the studio shows.
npm install overprint-angular(Angular 22 or newer).- Export → Copy Angular component, paste the file in.
- Drop the selector inside any section with
position: relative— like the embed, it fills the section, sits behind your content, and never eats a click.
The config carries only what differs from the studio defaults, so a look reads like a recipe. Change any field and the canvas re-renders; pointer reactivity, animation and reduced-motion behavior match the embed exactly. Photos you uploaded travel inline as data URIs; a 3D layer rides along as a baked still (bake3d) — your bundle never ships three.js. React and Vue flavors are on the roadmap; the embed covers every framework in the meantime.
Shortcuts
Keyboard
- Randomize
- Space
- Undo
- ⌘Z
- Redo
- ⌘⇧Z / ⌘Y
- Copy look
- C
- Export menu
- E
- Toggle animation
- A
- Nudge the seed
- ← →
- Shortcuts panel
- ?
Mouse & trackpad
- Zoom the stage
- Scroll / pinch
- Pan the canvas
- Drag
- Reset zoom & pan
- Double-click
- Add it to the composition
- Click / drag a tool
- Hide · lock · remove
- Right-click a section
- Reorder the effect stack
- Drag ⠿