Opening workflow…
Websites · Intermediate
Build a holographic launch card
Make the Aurora card: an iridescent foil surface, an engraved orbital seal and a raised metallic insignia with real parallax. It moves on its own, then follows your pointer. Edit the headline right here in your browser. Includes the working result and four runnable source checkpoints.
- 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 + CSS 3D transforms
No paid runtime servicesHyperFrames
0.8.27
Animated preview rendererOriginal HTML, CSS and JavaScript 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, CSS transforms and Pointer Events. A recent desktop browser is recommended; reduced-motion preferences disable automatic motion while deliberate pointer and keyboard controls remain available. Current artwork uses layered inline SVG and CSS preserve-3d parallax.
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.
- 01Build the card and its artworkIncluded free
- 02Add the foil surfaceIncluded free
- 03Make the light follow the pointerIncluded free
- 04Customize and take it with youIncluded free