正在加载视频...

视频加载失败

Introducing the HyperFrames MCP in Claude Design The difference between prototyping a design and shipping it as video Animate in Claude Design, hit share, and hyperframes agent scores it, adds sfx, tightens the motion and renders the MP4 Just send it to HyperFrames. We'll take it from there.

63,426 次观看 • 3 个月前 •via X (Twitter)

22 条评论

Juan Barahona 的头像
Juan Barahona3 个月前

I just did a 20 minute video for my Google Cloud App Submission. I recorded my computer screen and @HyperFrames_ built it following a script, adding a voiceover, captions and generating the final mp4. I have a full video editing studio in my server now. Next: Onboarding Videos.

Matt Madonna 的头像
Matt Madonna3 个月前

Oh, look, another weekend of playing with new toys! Nice work.

Miguel Ángel 的头像
Miguel Ángel3 个月前

@ASomansh 🐐🐐🐐

Macc 🐍 的头像
Macc 🐍3 个月前

amazing 👏🏽

AdrianB 的头像
AdrianB3 个月前

can I use Hyperframes mcp in Replit?

Design Tool Radar 的头像
Design Tool Radar3 个月前

Motion output as a default instead of an afterthought. That's the part more prototyping tools should copy. Curious how it holds up on complex sequences, not just the demo reel.

安叫兽|Bird🕊️ 🔶 BNB 的头像
安叫兽|Bird🕊️ 🔶 BNB3 个月前

从动效到成片,差的就是这一步。

Malzahran 的头像
Malzahran3 个月前

@em_wagdy

Andres Rafael 的头像
Andres Rafael3 个月前

lfg

starl3xx 的头像
starl3xx3 个月前

Sick!

_alphashark_ 的头像
_alphashark_3 个月前

remotion renders locally, no agent scoring step needed. animate in react, npx remotion render spits out the mp4. sfx timing runs off @remotion/media-utils against the waveform, codec flag set by hand.

Cathal Canavan 的头像
Cathal Canavan3 个月前

Whoa!

Yashas 的头像
Yashas3 个月前

@liu8in @grok what's hyperframes pricing!

Somansh 的头像
Somansh3 个月前

🚀🚀🚀

Zunaira 的头像
Zunaira3 个月前

Design to polished video in one seamless workflow. 🔥

Bertan Topbac 的头像
Bertan Topbac3 个月前

damn all the AE animators are gonna be left without a job

Lucas Bennett 的头像
Lucas Bennett3 个月前

This is the kind of workflow creators have been waiting for. From design to polished MP4 with minimal effort very impressive. 🔥

Keshaw Singh 的头像
Keshaw Singh3 个月前

Eats all my credits, never do full video, use it for shots or scenes

Miguel Ángel 的头像
Miguel Ángel3 个月前

lesgo

AI Mastery Guide 的头像
AI Mastery Guide3 个月前

Score, sfx, and render handled for you, that's a smooth pipeline.

Nikita Ostapenko 的头像
Nikita Ostapenko3 个月前

Can I redesign this video?

Evaa AI 的头像
Evaa AI3 个月前

This is real gold

相关视频

Holy sh*t I spent weeks turning Claude Code into a design studio. no Figma license. no agency. no plugins I had to pay for. here's the stack I used and it's embarrassingly simple: -> graphify: teach Claude your brand dump your guidelines, logos, PDFs and old projects into one folder. graphify turns it into a knowledge graph, so every design Claude makes follows your rules instead of guessing. 134k stars, Y Combinator. uv tool install graphifyy -> graphify install -> /graphify . -> Figma-Context-MCP: Figma straight to code it hands your actual Figma file to the agent. the README says it builds designs in one shot, and does it better than pasting screenshots. -> Penpot: the open-source Figma free, open source, and its MCP server lets AI read and edit your designs, then hand them to code and back. -> React Bits: the "expensive" look, for free the biggest open-source library of animated React components. those smooth hover effects and text animations you see on high-end sites? copy, paste, done. -> HyperFrames: designs that move write HTML, get a finished video. made by HeyGen for AI agents. your landing page can now have its own launch video by tonight. claude plugin marketplace add heygen-com/hyperframes -> claude plugin install hyperframes@hyperframes -> MCP for Blender: 3D without learning Blender connects Claude to Blender. describe a scene, the agent builds and edits it in real 3D. the order that works: brand into graphify -> design in Figma or Penpot -> Claude builds it with React Bits -> HyperFrames makes the promo -> Blender adds the 3D hero shot the uncomfortable part: tools used to be the moat. now everyone has them for free. the only thing that still separates good design from AI slop is taste. and taste is the one thing you can't install. bookmark this. your next client will ask why you're suddenly so fast.

kiosa

73,242 次观看 • 14 天前

this is pure f*cking treasure Netflix engineers posted 20 GitHub repos that turn your Opus 5.5 into a f*cking motion empire: built for Opus 5.5 1. claude-motion: taste, checks its own frames, sound written in code. the author built it for Opus 5.5 2. claude-motion-design: HTML, Playwright and ffmpeg, no Remotion. the demo was made on Opus 5.5 3. motion-graphics-skills: 13 skills for launch videos. the README tells you to run it on Opus 5.5 4. claude-remotion-skill: a Remotion editor from one prompt. captions, B-roll, sound 5. klik-anim-skill-creation: the laws of animation and camera, built on Opus 6. hyperframes-motion-reel-skill: a showreel cut to the beat at 120 BPM, on HyperFrames 7. product-launch-motion: a full launch film. voice-over, camera, color grade 8. animate: a short clip in one canvas file, storyboarded as it goes 9. motion-design-skills: timing, color, typography, logos, Remotion 10. hyperframes-student-kit: 14 skills and 406 motion graphics cards the engines these skills render with 11. hyperframes: HTML to MP4. the one almost everyone installs 12. remotion: video written in React 13. remotion skills: the official Remotion skills for your agent 14. GSAP: the timelines HyperFrames runs on. skills: npx skills add greensock/gsap-skills taste and everything around it 15. motion-design-skill: motion principles that work with any engine 16. awesome-motion-design-agent-skills: a map of GSAP, Remotion, Lottie and Rive skills 17. motion-graphics: B-roll built straight from your transcript 18. motion-dev-animations-skill: web animation on not video 19. motion: Motion itself, formerly Framer Motion 20. lottie-web: when you need Lottie, not MP4 the stack in one line: Opus 5.5 writes the code, a skill sets the timing and the camera, an engine renders the MP4. check each repo before you install. save this.

NO1ennn

537,284 次观看 • 1 个月前

I don't f*cking understand why motion designers aren't running this setup HyperFrames, HeyGen's tool that turns HTML into finished video, is past 68k stars on GitHub. hand Claude Code one folder, plug in a video engine, an animation library and Blender, and it stops being a chatbot. it storyboards, animates, renders and checks its own frames before you ever see them. motion designer, founder, marketer, doesn't matter. this is for you. here's the whole thing: > make a folder called STUDIO, open Claude Code in it, and add a CLAUDE.md with one rule: "save every brand color, font, logo and approved style to brand/" > run claude plugin marketplace add heygen-com/hyperframes, then claude plugin install hyperframes@hyperframes. type /hyperframes:hyperframes, describe a 10-second product intro, and it plans, animates and renders the MP4 > run npx skills add remotion-dev/skills. now it can also write videos in React with Remotion, the official skills straight from the Remotion team > run npx skills add it learns proper GSAP: timelines, scroll animations, text effects. and GSAP is 100% free now, every plugin included > run npx skills add LottieFiles/motion-design-skill. it picks up real motion principles: timing, easing, choreography, the classic Disney rules adapted for UI. this is where the taste comes from > run curl -LsSf | sh. Claude gets hands inside Blender to build and edit actual 3D scenes > type /schedule and tell it "every Monday at 9, turn last week's launches into 3 short promo clips and wait for my yes". now it runs on a routine 15 minutes of setup, and you never start from a blank timeline again. all the repos: -> -> -> -> -> bookmark this and test asap

kiosa

46,359 次观看 • 20 天前

Motion graphics used to take me an hour per scene (or more) Now I'm creating them in 3-5 minutes — without After Effects, without Premiere, without writing a single line of code. I'm a former LA filmmaker (still PGA). My entire video stack is now 3 tools: Claude Code + HyperFrames (from HeyGen) + Descript Here's how the workflow runs: 1. Drop my brand style guide into a folder (colors, fonts, components Claude reuses forever) 2. Paste a line from my Descript transcript into Claude Code: "Create a scene for this part of the video" 3. Claude Code reads my brand, generates the HyperFrames scene, renders it to MP4 4. Drag the MP4 into Descript, drop it on the matching line of the transcript 5. Done. 3-5 minutes per scene. The unlock is the brand style guide. Once Claude has your colors, fonts, and reusable components, every scene inherits your look automatically. Bonus — you can take a Claude Design export (.zip), hand it to Claude Code, and it'll convert the HTML into a HyperFrames video you can render and edit. I built a GitHub repo with all the skills pre-loaded. Non-developers can clone it, open Claude Code, and be rendering scenes in under 10 minutes. Full walkthrough (20 min video) below Repo (skills + brand template + music-from-transcript plugin): Bookmark this if you make videos. The brand-style-guide pattern alone will save you hours every week. If you're a creator or operator using AI for content — share this with someone who's still living in After Effects.

JJ Englert

103,908 次观看 • 6 个月前