Opening workflow…
Move your pointer or use the arrow keys to control the artwork. Move away or press Escape to return to automatic motion.Art & design · Intermediate
Build a generative poster studio
Create Orbit, a working poster designer with adjustable geometry, three color stories, custom typography, and SVG export. Build the small rendering function, connect the controls, and leave with artwork you can resize without losing sharpness.
Before you start
No extra cost- You’ll need
CodexOptional helper- HTML, CSS & JavaScriptBrowser-native inline SVG
HyperFrames0.8.27
- What it uses
- Nothing to buy · runs in your browserHand each of the 4 steps to your assistant if you like, or build it yourself.
- The tutorial
- Free with an account · 4 steps
Tutorial outline
4 steps, in order. Open the tutorial for the instructions, prompts, settings and checks.
Draw one shape with a clear frame
Turn the shape into a system
Connect the controls
Export the actual artwork
Exactly what the creator used
- Codex
- GPT-6 Astra · gpt-6-astra · xhigh reasoning · AI authoring; an AI account is optional when using the included source
- HTML / CSS / JavaScript
- Browser-native inline SVG · No paid runtime services
- HyperFrames
- 0.8.27 · Animated preview renderer
Original HTML, CSS, JavaScript and SVG authored in Codex with GPT-6 Astra (model ID: gpt-6-astra; reasoning: xhigh) on September 4, 2026. The task records provide the model ID, not a dated snapshot. Preview rendered with HyperFrames 0.8.27. Uses SVG ellipses, standard form input events and the browser Blob download API.