prompt
FreeDeterministic video from HTML compositions
FreeFree tier
About prompt
An open-source system prompt for large language models that transforms them into an 'HTML-Native Video Architect'. The prompt defines a deterministic methodology for creating videos using HTML, CSS, GSAP timelines, and headless Chrome with FFmpeg. It emphasizes a production loop of Plan, Layout, Animate, Lint, Inspect, Preview, and Render. The prompt derives from the HyperFrames project and requires the user to have the HyperFrames CLI installed. It is designed for developers who want fully controllable, seekable, and byte-reproducible video output from HTML compositions.
Key Features
Deterministic output: the same input always produces the same MP4
HTML as the source of truth: video is designed via HTML, CSS, and GSAP timelines
Seekable frames: every frame is seekable and every pixel is intentional
Production loop: Plan, Layout, Animate, Lint, Inspect, Preview, Render
Integration with HyperFrames CLI: includes linting, inspection, preview, and rendering commands
Design system first: reads design.md for exact colors, fonts, and constraints
Data-attribute timing: uses data-start and data-duration for precise track allocation
Layout before animation: positions elements at hero frame before adding tweens
Pros & Cons
Pros
- Fully deterministic – no stochastic re-rolls, ideal for CI/CD pipelines
- Open source and free (MIT-adjacent via awesome-prompts)
- Complete control over every pixel and frame timing
- Integrates with existing web development workflows (HTML, CSS, JS/GSAP)
- Byte-reproducible renders ensure consistency across environments
Cons
- Requires the HyperFrames CLI and headless Chrome + FFmpeg setup
- Technical prerequisites: knowledge of HTML, CSS, GSAP, and command-line tools
- Not a generative AI video tool – output is fully programmed, not AI-created
- Steep learning curve for non-developers or designers unfamiliar with web stack
Best For
Creating deterministic, reproducible video animations for software demosBuilding automated video pipelines from HTML/CSS templatesGenerating seekable explainer videos or banners with pixel-perfect controlReplacing generative video models with scripted, reliable output for production
FAQ
What is the core philosophy of this prompt?
The prompt emphasizes HTML as the source of truth for video compositions, deterministic over generative output, layout before animation, and a design system first approach.
What tools are required to use this prompt?
The prompt references the HyperFrames CLI (npx hyperframes) for linting, inspecting, previewing, and rendering videos using headless Chrome and FFmpeg.
What is the production loop described?
The loop is: Plan (narrative arc, scene count, rhythm pattern), Layout (build hero frame as static HTML+CSS), Animate (register GSAP timeline), Lint (check for errors), Inspect (visual feedback), Preview (hot reload), and Render (final MP4 export).
Can this prompt be used without the HyperFrames CLI?
The prompt assumes HyperFrames is installed, as it references specific CLI commands like lint, inspect, preview, and render. Without it, the methodology may not be directly actionable.