Prompt Generator

Fill in a website, app, brand, product, script, or rough idea, choose the video controls, then copy a complete AI prompt for generating a Cetus HTML composition.

Static by Design

This page runs only in your browser. It does not call an AI model. It builds a clear prompt you can paste into ChatGPT, Codex, Claude, Gemini, or another coding assistant.

Website, scenes, assets, and notes are optional. Leave them blank and the generated prompt will tell the AI to ask only when needed or create a polished plan itself.

For the Cetus file format and CLI flags, read the docs.

Video Brief

Assistant
Chooses code block output or direct file creation.
Source
Optional. Leave blank if you want the assistant to ask for source material.
Creative Direction
Scenes are optional. The assistant can create them.
Output
Cetus accepts positive FPS values. High FPS can be slow.
Assets and Audio
Open Docs

Generated Prompt

How The Controls Map To Cetus

FPS

data-fps sets the composition default. --fps overrides it at render time. Total frames are duration * fps.

Size

data-width and data-height define the HTML canvas. --width and --height override the output size at render time.

Format

.mp4 uses H.264 for broad compatibility. .webm uses VP9 and is useful for browser-native workflows.

Scale

--scale 480p, 720p, 1080p, 4k, or WxH resizes the output at encode time. No re-render needed — use it to produce delivery variants from one render.

Quality

--quality 0–51 sets the encoder CRF. Lower is better quality and larger file. For high-quality output use 18 or lower. For smaller delivery files use 28 or higher. Default (0) uses the codec default.

Higher Quality Output

For the best possible output: render at the native composition size with --quality 18 and no scaling, then use cetus encode to produce scaled-down delivery copies from the frame cache. This keeps maximum fidelity in the source render.

How the Seek Engine Works

GSAP Timeline Duration

Cetus calls tl.seek(cetusTime, false) on every timeline in window.__timelines. If the timeline's duration() is shorter than the composition, GSAP clamps at the end and all later frames show the same frozen state. Always add tl.set({}, {}, compositionDuration) as the last line before pushing — this forces the timeline to the correct length.

Clip Visibility and Overlays

Cetus sets .clip elements to display:none outside their active time window — not opacity:0 or visibility:hidden. Apply GSAP opacity tweens only to child elements inside the clip. An overlay that starts at opacity:1 for a fade-in effect will make cetus preview appear black — that is expected. The overlay is cleared at render time by window.__cetusRenderFrame.

Preview vs Render

cetus preview serves the HTML with live reload but does not run the seek engine. GSAP timelines stay paused, __cetusRenderFrame is never called, and no clips are hidden. Preview shows the initial t=0 CSS state only — use it for layout checks. To test a specific time, open the browser console during preview and call window.__cetusRenderFrame(2.5, {time:2.5, frame:75, fps:30}).

__cetusRenderFrame Hook

Define window.__cetusRenderFrame = async function(time, detail) { ... } for canvas, WebGL, Three.js, or any custom draw loop. Cetus calls it every frame before taking the screenshot. The hook must render the full visual state for the given time — not a delta from the previous frame. For Three.js always call renderer.render(scene, camera) explicitly inside the hook.

Frame Capture Order

Each frame: (1) seekTimelines(), (2) __cetusRenderFrame awaited, (3) seekTimelines() again, (4) clip display:none applied, (5) font and media waits, (6) two requestAnimationFrame cycles, (7) screenshot. Changes made in __cetusRenderFrame are captured. If a hook throws, the DOM is not updated for that frame.

window.__timelines Format

Push the plain GSAP timeline object directly: window.__timelines.push(tl). Do not use { timeline: tl, offset: N } or any wrapper — Cetus checks for timeline.seek on the object itself. You can also use window.__cetusFrameCallbacks (array of functions) or window.__cetusSeek (single function) as alternative hooks alongside or instead of window.__timelines.

Assistant Workflows

Chatbot

Generates a complete HTML code block plus save, preview, and render instructions. Best when the AI cannot edit your files.

Codex or Claude Code

Asks the agent to create cetus.html directly, list changed files, and provide the exact Cetus commands.

Terminal Agent

Requests a local file, safe command usage, validation when possible, and a final guide for changing FPS, duration, size, and format.

Template Ideas

Website Launch

Hero screenshot, product tagline, three feature callouts, final URL, 8 to 12 seconds.

Video Intro

Logo reveal, title, subtitle, quick motion accent, clean fade out, 3 to 6 seconds.

Product Demo

Interface panels, cursor path, feature labels, before/after result, 12 to 30 seconds.

Social Reel

Vertical 1080x1920 layout, fast captions, visual beats, strong final call to action.

Explainer

Problem statement, process steps, result screen, concise text, 20 to 45 seconds.

Brand System

Reusable colors, type scale, lower thirds, title cards, and end screens for repeated videos.

Example Render Commands

cetus validate cetus.html
cetus render cetus.html -o out.mp4
cetus render cetus.html -o reel.mp4
cetus render cetus.html -o transparent.webm

# Override HTML defaults only when needed
cetus render cetus.html -o smooth.mp4 --fps 60
cetus render cetus.html -o vertical.mp4 --width 1080 --height 1920
cetus render cetus.html -o out.mp4 --audio music.mp3 --audio-volume 0.7 --audio-loop
cetus render cetus.html -o out.mp4 --audio music.mp3 --audio-start 2.5 --audio-fade-in 1 --audio-fade-out 2

# Burn in subtitles
cetus render cetus.html -o out.mp4 --subtitles captions.srt

# Scale output at encode time (no re-render)
cetus render cetus.html -o out-720p.mp4 --scale 720p
cetus render cetus.html -o out-4k.mp4 --scale 4k

# Quality control (CRF — lower = better quality, larger file)
cetus render cetus.html -o archive.mp4 --quality 18
cetus render cetus.html -o delivery.mp4 --quality 28

# Resumable long render — PNG frames saved, auto-deleted after success
cetus render cetus.html -o out.mp4 --resume --frames-dir .cetus-frames --concurrency 4

# Keep frames and re-encode into multiple resolutions
cetus render cetus.html -o out.mp4 --resume --keep-frames
cetus encode .cetus-frames -o full-1080p.mp4 -o preview-480p.mp4 --scale 480p

# Extract a thumbnail from the frame cache
cetus encode .cetus-frames --thumbnail 5s -o thumb.png

# Inspect a single frame without rendering the full video
cetus seek cetus.html --at 5s -o frame.png

# Re-render automatically on every file change
cetus watch cetus.html -o preview.mp4