Opening workflow…
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.
- Steps
- 4
- Time estimate
- 24 min
- Source
- Included
Move your pointer or use the arrow keys to control the artwork. Move away or press Escape to return to automatic motion.The exact result, requirements, and steps.
Learn how this result was made, one step at a time. The workflow includes the tools, code, and an in-browser workspace for following along.
CodexHTML / CSS / JavaScriptHyperFrames
Codex
GPT-6 Astra · gpt-6-astra · xhigh reasoning
AI authoring; an AI account is optional when using the included sourceHTML / CSS / JavaScript
Browser-native inline SVG
No paid runtime servicesHyperFrames
0.8.27
Animated preview rendererOriginal 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.
Interactive browser artwork authored with AI. Move your pointer over the live preview to explore it; the included video is rendered from the same project.
EXECUTION STEPS
ABOUT 24 MIN4 steps from input to result.
- 01Draw one shape with a clear frameIncluded free
- 02Turn the shape into a systemIncluded free
- 03Connect the controlsIncluded free
- 04Export the actual artworkIncluded free