J’ai laissé Claude Code monter mes vidéos | Le résultat est fou

This video introduces Hyperframe, a new tool developed by Hayen that allows users to create video animations through conversational AI, significantly streamlining the content creation process. The presenter explains that instead of using traditional software like Final Cut or After Effects, they now leverage Hyperframe, integrating it with agents like Cloud Code, Codex, and Gemini for automated video editing. This allows for the production of more high-quality videos for platforms like Instagram in a fraction of the time. Hyperframe's core functionality lies in its ability to translate AI-generated instructions into video animations. The process begins with an AI agent, such as Cloud Code, receiving a prompt. For instance, the presenter asks Cloud Code to create a presentation video about Hyperframe for a non-technical audience, specifically in a vertical video format suitable for platforms like TikTok. The AI then generates HTML files that describe the animations. These HTML files are subsequently converted into MP4 video files. This underlying technology relies on HTML and CSS, augmented by libraries like GSAP for complex animations, effectively creating dynamic visuals without manual frame-by-frame editing. The presenter highlights Hyperframe's advantage over other similar tools like Remotion, stating that Hyperframe offers greater power and flexibility. The Hyperframe website features a showcase of various animation possibilities, including data charts and transitions, all rendered from HTML and CSS. The rendering process itself can be resource-intensive, as it requires significant CPU power to convert the HTML into an MP4 file. The initial attempt to create a vertical video for TikTok resulted in some issues, with the presenter noting that the AI struggled with proper image display and window sizing for the vertical format. After providing feedback, the AI corrected the problem, and the resulting animation was deemed much better. The presenter was impressed by the ability to create complex visual elements, such as macOS-style notifications and Twitter-like post simulations, directly through conversational prompts. The video then delves into the practical application and integration of Hyperframe. It is recommended to use Hyperframe in conjunction with AI agents like Cloud Code, which utilize a specific Hyperframe skill to understand and execute commands. This skill acts as a bridge, enabling the agents to interact with Hyperframe's video generation capabilities. A key feature of Hyperframe is its accompanying video editor or "studio." Once a video is rendered, users can access this studio, which provides an interface resembling traditional video editing software. This studio displays the underlying HTML code on the left, allowing for direct inspection and modification of the composition. Each element, such as a "macOS notification" or a "Spotify card," can be viewed and edited individually. For example, changing text like "Hayen" to "Shouam" is reflected in real-time within the editor. This demonstrates that the editing is not pixel-based but rather HTML-based, with an AI facilitating the process. The studio also includes an assets section for images and generated files, and a timeline at the bottom. This timeline allows users to manipulate and arrange video blocks, functioning much like a standard video editor. A particularly useful feature is the ability to provide precise feedback to the AI. By using Shift and indicating a specific point in the timeline, users can instruct the AI to make targeted modifications, such as changing the font of specific elements. This prompt-based feedback mechanism is described as being even more precise than communicating with a human video editor. The presenter then walks through a real-world example of editing a video for Instagram and TikTok. After filming a short clip about five lesser-known Cloud Code skills, the video is uploaded for editing. The first step involves installing the Hyperframe skill within Cloud Code to enable its use. The presenter then prompts Cloud Code to edit the video, encouraging it to utilize the Hyperframe catalog to its fullest extent. The AI analyzes the video, identifies it as a "talking head" format, and suggests adding animated subtitles as a starting point. The process of adding subtitles involves transcription, which the AI handles effectively, even identifying potentially tricky words. The presenter notes the accuracy of the transcription and the automatic generation of a `caption.html` file. Following the subtitles, the presenter requests overlays, prompting the AI for suggestions. The AI proposes options like numbered lists (e.g., 1/5, 2/5), tool names, or emojis. The presenter opts for the numbered list and tool names, finding the dynamic appearance of these elements to be engaging. A minor issue arises where the AI misinterprets a word, saying "pencil" instead of "impeccable." This is corrected through further prompts, and the presenter also requests adjustments to the size and position of these elements. The presenter then asks for visual representations of the tools being discussed, specifically suggesting the capture of web pages being scrolled through. The AI attempts to find relevant URLs and generate screenshots. While successful for some tools, it struggles to find URLs for others, like "Browser." The presenter provides the URL for "Impeccable," and the AI generates visual elements, including a macOS-style window with scrolling web page previews, which is deemed impressive. Further refinements include adjusting the timing of subtitles, as they were found to be cutting off before the end of the video. The presenter also addresses the limitations of the AI model's context window, explaining that as the conversation grows, the model's performance can degrade. To mitigate this, the conversation is compacted to maintain a smaller context window. The presenter then requests more overlays to keep the viewer engaged on Instagram. The AI suggests floating keyword cards and a progress bar, which are incorporated. The presenter also asks the AI to fix a subtitle issue where the word "skill" was being mispronounced as "ski." This is handled by a sub-agent to maintain context efficiency. The resulting video now includes dynamic keyword cards and a progress bar, enhancing its visual appeal. A critical consideration for Instagram Reels is the "dead space" – areas of the screen obscured by the user interface. The presenter provides an image and instructs the AI to avoid placing important elements in these zones. The AI adjusts the placement of elements, moving them out of the dead space. It also adds a chapter progress bar at the top, a feature the presenter hadn't initially considered. However, the placement of cards in the center of the screen is not ideal, and the presenter guides the AI to reposition them to the right. Finally, the video undergoes the rendering process to convert the HTML into an MP4 file. This is a CPU-intensive task, with the presenter noting the strain on their computer. The presenter also shares that an intro was added, incorporating Cloud's design system for consistent branding, including colors and visual hooks. The final rendered video is then shared, with the presenter showcasing impressive engagement metrics on YouTube (50k views, 200 subscribers), Instagram (28k views), and TikTok (41k views). The presenter expresses satisfaction with the results and plans to create more videos using this workflow. The video concludes with a suggestion to watch another video on AI design and a humorous note about the presenter wearing the same shirt for continuity.