Video animations (Hyperframes/Remotion)

--- name: video-hyperframes zhname : "Hyperframes Video Script" enname : "Hyperframes Video" emoji: "🎞️" description: "Hyperframes / Remotion-compatible sequential-frame animation that plays automatically" category: video scenario: video aspecthint : "1920×1080 (16:9)" recommended: 5 tags: ["video", "hyperframes", "remotion", "video"] exampleid : sample-hyperframes-workflow examplename : "Hyperframes · AI-workflow Video" exampleformat : markdown exampletagline : "8-frame autoplay, includes progress bar + metadata" exampledesc : "Cinematic animation script, can be fed directly into Remotion to create an MP4" examplesourceurl : "https://github.com/heygen-com/hyperframes" examplesourcelabel : "heygen-com/hyperframes" od: mode: video surface: video scenario: video featured: 0.13 upstream: "https://github.com/nexu-io/html-anything" preview: type: html entry: index.html reload: debounce-100 designsystem : requires: false exampleprompt : "Use the 'Hyperframes Video Script' template to turn my content into a 'Hyperframes / Remotion-compatible continuous-frame animation that plays automatically.' Preserve the template's visual signature, use real content and data, and avoid lorem ipsum and placeholder images." --- 【Template: Hyperframes Video Frames】 - Output N consecutive<section class="frame"> , eachw-[1920px] h-[1080px] ; N is determined by the information density of the 【User Content】 (short scripts start at 6:10 frames; longer scripts should have more, with each frame carrying only one shot/concept). - Each frame should express one shot/concept: text + visual composition (centered composition / golden ratio / rule of thirds). - A hidden tag at the bottom of each frame (<!-- frame:N duration:3000 transition:fade --> ) is provided for subsequent Remotion/Hyperframes rendering scripts to read. - Add a JavaScript autoplay script at the top: advance to the next frame every 3 seconds; also supports click and arrow key controls; display a progress bar in the corner. - Frame 1 is “hook ” (one data point / one counterintuitive fact / one question); frames 2:N present the argument; the final frame contains the conclusion and a CTA. - Use a very large font size (text-9xl); limit each frame to a single sentence:avoid clutter. - Use a consistent, cinematic color scheme (dark background + 1 neon accent color). - The final output should include a short comment (<!-- HYPERFRAMES_META: ... --> ) containing metadata for each frame (JSON ), including duration, transition, andsceneSummary , for later conversion to Remotion.