Make a 15-second product launch video with Codex.
Meet ORBIT, a fictional app for collecting notes, connecting ideas and sharing what you make. Start with the finished video, then use the prompt and source to make it yours.
30 fps · H.264 · Silent
HTML Canvas + JavaScript
Same 15 seconds. A new product identity.
Left: the original Gather template. Right: the ORBIT version. Both start at the same time; the new version changes the copy, colors, illustrations and transitions.
A note-taking product with a clear Collect / Connect / Share story.
Purple and light surfaces become charcoal, warm white and orange.
Keep the editor and exporter; rework the visual sequence.
A prompt with the product context built in.
Copy this into Codex with the downloaded source folder. It explains the product, features, visual direction and export requirements, without relying on this conversation.
Create a 15-second product launch animation for ORBIT, a fictional note-taking and idea-organizing app, and export it as an MP4. PRODUCT ORBIT helps creators and knowledge workers turn scattered thoughts into something worth sharing. Its three core features are: • Collect: quickly capture ideas, excerpts and tasks in one place. • Connect: link related notes to discover themes and develop ideas. • Share: turn organized notes into a clean, readable sharing card. Its promise is to make room for your next good idea. Draw conceptual interfaces in code; you do not need to build a working app. VISUAL DIRECTION Use charcoal #11120F, warm white #F2EFE6 and orange #FF6938. Combine oversized sans-serif typography, rounded cards and fine orbital lines with moving dots to represent connected ideas. Keep the motion rhythmic and the text readable. Do not rely on external images, downloaded fonts, footage or music. 15-SECOND STORYBOARD 0–3s: On a dark background, reveal “Make room.” and “for the spark.”. Add an orange orbital graphic and a floating note on the right. Subtitle: “A little space for your next big idea.” 3–4.5s: Fill the frame with orange. Show a large “ORBIT” and “Less scattered. More connected.” 4.5–11.3s: Switch to warm white. Heading: “Ideas, in motion.” Subtitle: “From scattered thoughts to something worth sharing.” Bring in three feature cards: Collect. with stacked notes; Connect. with linked nodes; Share. with a published content card. Their captions are “Catch the thought.”, “Find the thread.” and “Put it out there.” 11.3–15s: Use an orange shape transition to a dark closing frame. Show ORBIT, “Good ideas go places.” and a button-shaped “MAKE YOUR NEXT MOVE”. Hold long enough to read. IMPLEMENTATION AND DELIVERABLES Use HTML, Canvas and JavaScript. If I supply a Product Launch template, reuse its editing controls and export workflow; otherwise create a minimal runnable project. Keep the product name, colors, headings and feature copy in config.js. Provide a local preview with play, pause and timeline seeking. Rendering at a given time must be deterministic for frame-by-frame export. Use Playwright and FFmpeg to export a silent 1920×1080, 30 fps, 15-second H.264 MP4. Deliver the video, complete source, install and export commands. Check text clipping, first and last frames, and duration. Generate files locally without deploying or publishing.
Rewritten from the finished example for reuse. This is not a verbatim generation transcript, and results may differ.
Change the copy. Pick a color. Export an MP4.
1. Open and customize
Unzip the source and open index.html. Replace the name, headings and feature descriptions. Change the accent color or upload a screenshot.
2. Save the config
Click Save config.js, then replace config.js in the source folder with the downloaded file. The MP4 renderer reads that saved file, not your unsaved browser edits.
3. Render the video
Install Node.js 22+ and FFmpeg first. In the source folder, run:
npm install npx playwright install chromium npm run check npm run render -- orbit.mp4
The output is a silent, 15-second 1080p MP4.
What we checked, and what to watch for.
Rendered and verified
450 frames at 30 fps, 1920×1080, 15 seconds. The exported video decoded without errors. We also checked seeking, text and color edits, screenshot upload, config saving and mobile layout.
Template adjustments
The screenshot moved from the opening to the first feature card, so its check moved to 7.8 seconds. We removed website and project-name controls because those fields no longer appeared in the redesigned film.
Scope and attribution
Built with Codex, not verified with Claude. ORBIT and its UI are fictional. The film is silent; fonts may look slightly different across operating systems. Source code is provided under MIT.
Make the next version yours.
Start with the source, or browse more prompts in the collection.