Interactive layers for AI video
Hyperframes are dynamic HTML/CSS/JS overlays that sit on top of video, turning AI-generated scenes into interactive experiences with buttons, forms, and live data.
Air Pulse Max
Interactive product overlay
Shop nowVideo meets the web
A Hyperframe is an HTML/CSS/JS layer rendered on top of a video stream. It brings interactivity into the video itself - clickable buttons, live forms, real-time data, and dynamic content that responds to the viewer.
Overlay Layer
HTML and CSS rendered transparently over the video, with full support for animations, transitions, and responsive layouts.
Live Editing
Every Hyperframe is inspectable and editable. Update copy, styles, and layout without re-rendering the video underneath.
Context-Aware
Hyperframes read video metadata and AI agent state, adapting their content to what is happening in the scene in real time.
Three layers, one experience
Veo generates the video. Hyperframes overlay the interactivity. Hyperagent powers the AI logic. Together they create video experiences that feel alive.
Veo
Video generation
Google DeepMind's Veo generates high-fidelity, cinema-quality video from text prompts. It provides the visual foundation - the scene, the motion, the world that the interactive layer sits on.
Hyperframes
Interactive layer
Dynamic HTML/CSS/JS overlay rendered directly on the video stream. Buttons, forms, live data, and responsive UI that viewers can click, type into, and interact with in real time.
Hyperagent
AI logic
The AI agent driving the interaction. It processes viewer input, decides responses, updates Hyperframe content, and orchestrates the flow between the video and the interface.
Build a Hyperframe
Edit the HTML and CSS below to see your overlay rendered live on top of a simulated AI-generated video scene.
Build your first Hyperframe
Hyperframes turn passive video into interactive experiences. Layer HTML/CSS over AI-generated scenes, add forms and CTAs, and let Hyperagent handle the conversation.
Open the playground