I Made a Promo Video Using Hyperframes Keyframes + Three.js + Hermes

Summary

The creator demonstrates building a 45-second promotional video for Onchain Agent using HyperFrames, Hermes Agent, image generation, and Three.js. The main feature being tested is HyperFrames’ newly open-sourced keyframes and arc motion, which let animated elements travel along curved paths instead of moving only in straight lines.

Workflow and Key Concepts

• Plan the video with an AI agent: The creator starts with a loose “thought dump” describing the goal, robot character, visual style, and tools. Hermes Agent turns it into a storyboard: a person enters a chaotic environment, a robot guides them, the video shows evidence and wallet-graph analysis, and it ends with a call to action.
• Prepare the tools: The setup uses Hermes Agent in WSL, HyperFrames, and FFmpeg. The creator also wants to use generated images for consistent characters and assets, plus a Three.js scene for a 3D wallet-graph visualization.
• Use keyframes and arc motion: HyperFrames’ keyframes control positions and animation over time. Arc motion gives objects—such as the robot, cards, and data elements—a smoother, curved trajectory. The local preview studio makes it possible to inspect the animation before rendering.
• Iterate on the preview: The first version has several problems: a person looks like a stick figure, text and graphics overlap, some elements are poorly aligned, and the robot moves in the wrong direction. The creator gives Hermes a specific list of changes and reviews successive previews.
• Verify that requested technology is actually used: Hermes initially substitutes a pseudo-3D CSS wallet graph instead of implementing Three.js. The creator points out the mismatch and asks for real Three.js integration. The later version includes the intended 3D node-graph element.
• Give agents precise documentation and instructions: The creator recommends linking directly to the relevant HyperFrames documentation or skill. Otherwise, an agent may imitate the desired result without using the requested feature or tool.

Outcome and Assessment

After revisions, the promo has cleaner spacing, improved character placement, curved keyframe animation, and a Three.js node-graph scene. The creator considers it a good result and a potential visual style for future ads. The work took about two hours. Most tools used were free; the creator says the paid item was a CodeEx subscription. A voiceover and light music were planned for the video.

Main Speaker and Sources

• Main speaker: Tonbi, creator and presenter from Tonbi’s AI Garage.
• Tools discussed: Hermes Agent, HyperFrames, Three.js, FFmpeg, and image generation.