Video yükleniyor...

Video Yüklenemedi

Bu video yüklenirken bir sorun oluştu. Bu geçici bir ağ sorunundan kaynaklanıyor olabilir veya video kullanılamıyor olabilir.

Ana Sayfaya Dön

How I AI: wtf Remotion x claude code edition - had cc install remotion + skills - recreate app components pixel-for-pixel - brainstorm hype-video style storyboard - claude implements e2e - Suno for the banger, CapCut for the edit 0 to rendered in < 2 hours

claire vo 🖤

57,711 subscribers

66,309 görüntüleme • 6 ay önce •via X (Twitter)

Oyun Eğitim Bilim & Teknoloji

Anya Rossi• Live Now

Private livecam show

0 Yorum

Yorum bulunmuyor

Orijinal gönderinin yorumları burada görünecek

Benzer Videolar

🌶️ Spicy take: Codex is better at animation than Claude 1. Gave Codex HTML of a page (39,000 lines of code) 2. Told it to recreate the page pixel perfectly 3. Verified it was pixel perfect, told it animate with Remotion like a promo video 4. Three short prompts later...

🌶️ Spicy take: Codex is better at animation than Claude 1. Gave Codex HTML of a page (39,000 lines of code) 2. Told it to recreate the page pixel perfectly 3. Verified it was pixel perfect, told it animate with Remotion like a promo video 4. Three short prompts later...

Jason Zook

48,163 görüntüleme • 1 ay önce

one of my favorite ways to use claude code skills right now - combining remotion with claude-in-chrome for motion video creation. the workflow is addictive. the clip you see here was produced with minimal prompting effort let me know if you would like me to write a full break down of this process. you describe to claude code what you want, claude code writes the remotion components, opens the remotion studio (via browser) with claude-in-chrome, sees the actual rendered output, and iterates on it in real time. need the arrows pointing to the center of the bubbles instead of the edge? just say it. need the layout shifted to the center? say it. claude sees the preview, adjusts the code, re-renders. then when you're happy you tell claude code to render the final video. but skills are what make this possible. remotion knowledge + browser automation + the taste to iterate visually. no copy pasting screenshots back and forth. no "can you try moving it 10px to the right" over chat. it just looks and fixes. this is the kind of workflow that makes you realize how much further claude code can go beyond just writing code in a terminal. i didn't touch any code while working on the clip you see if you haven't tried combining skills together like this - start experimenting. the skills combos is where the magic is at.

one of my favorite ways to use claude code skills right now - combining remotion with claude-in-chrome for motion video creation. the workflow is addictive. the clip you see here was produced with minimal prompting effort let me know if you would like me to write a full break down of this process. you describe to claude code what you want, claude code writes the remotion components, opens the remotion studio (via browser) with claude-in-chrome, sees the actual rendered output, and iterates on it in real time. need the arrows pointing to the center of the bubbles instead of the edge? just say it. need the layout shifted to the center? say it. claude sees the preview, adjusts the code, re-renders. then when you're happy you tell claude code to render the final video. but skills are what make this possible. remotion knowledge + browser automation + the taste to iterate visually. no copy pasting screenshots back and forth. no "can you try moving it 10px to the right" over chat. it just looks and fixes. this is the kind of workflow that makes you realize how much further claude code can go beyond just writing code in a terminal. i didn't touch any code while working on the clip you see if you haven't tried combining skills together like this - start experimenting. the skills combos is where the magic is at.

elvis

46,485 görüntüleme • 5 ay önce

I’m building an agentic video editor app for social media it’s very similar to Remotion + Claude Code, but with no prompting at all you just upload your photos and videos. then the agent generates a script and edits your media accordingly

I’m building an agentic video editor app for social media it’s very similar to Remotion + Claude Code, but with no prompting at all you just upload your photos and videos. then the agent generates a script and edits your media accordingly

Kate Deyneka

99,686 görüntüleme • 6 ay önce

New feature in Claude Code 2.1.14 just dropped! You can now search and install plugins from the marketplaces installed in your current Claude Code session. This is huge if you’re building plugins on top of Claude Code’s marketplace layer (Skills, Agents, Hooks, etc). How it works: - Run /plugin - The official Claude marketplace is installed by default - Use the search bar to find the plugin you want - Select one or multiple plugins with space, then press i to install - Go to the Installed tab to browse and enable them With the exponential growth of Skills and Agent-based components running in the CLI, improving plugin discoverability is a big win. Pretty sure more marketplace-related features are coming

New feature in Claude Code 2.1.14 just dropped! You can now search and install plugins from the marketplaces installed in your current Claude Code session. This is huge if you’re building plugins on top of Claude Code’s marketplace layer (Skills, Agents, Hooks, etc). How it works: - Run /plugin - The official Claude marketplace is installed by default - Use the search bar to find the plugin you want - Select one or multiple plugins with space, then press i to install - Go to the Installed tab to browse and enable them With the exponential growth of Skills and Agent-based components running in the CLI, improving plugin discoverability is a big win. Pretty sure more marketplace-related features are coming

Daniel San

40,994 görüntüleme • 6 ay önce

How I use Claude for 2D website animations 👇 1. Ask Claude to create CSS keyframes for floating or bounce effects 2. Use Claude to write fade-up animations on scroll 3. Ask Claude for parallax code for backgrounds 4. Generate hover effects like glow, scale, rotate buttons 5. Use Claude to animate text word by word 6. Paste the code, adjust timing, launch Save this tutorial 🚀

How I use Claude for 2D website animations 👇 1. Ask Claude to create CSS keyframes for floating or bounce effects 2. Use Claude to write fade-up animations on scroll 3. Ask Claude for parallax code for backgrounds 4. Generate hover effects like glow, scale, rotate buttons 5. Use Claude to animate text word by word 6. Paste the code, adjust timing, launch Save this tutorial 🚀

FHILY👑

96,471 görüntüleme • 2 ay önce

your AI agent can watch any video now - paste a URL and it sees every frame, hears every word, all for free 🤯 bradautomates/claude-video gives Claude the ability to watch YouTube, Loom, TikTok, local files - anything yt-dlp supports what people actually use it for: → analyze a competitor launch - what hook, what visuals, what structure → debug from a screen recording - Claude reads the exact frame where it breaks → summarize a 49-min talk in 30 seconds with frame-accurate timestamps → strip the hype from product videos - "what's actually new, skip the pitch" the mechanism: yt-dlp pulls free captions first (zero cost). ffmpeg extracts frames at scene-aware intervals - not uniform sampling, so you don't waste tokens on 12 identical frames of the same slide. Claude reads every frame as an image with timestamp markers. Groq Whisper only kicks in when a video has no caption track how to set up (3 min): > claude code: /plugin marketplace add bradautomates/claude-video then /plugin install watch@claude-video > or npx skills add bradautomates/claude-video -g for codex, cursor, gemini cli > dependencies auto-install on macOS via brew two caveats: free captions cover most but not all videos. past 10 min use --start/--end for focused sections or the token-burner mode for full coverage your buddy still watches every tutorial at 2x speed taking manual notes. you paste a URL and your agent extracts the substance in seconds for $0

your AI agent can watch any video now - paste a URL and it sees every frame, hears every word, all for free 🤯 bradautomates/claude-video gives Claude the ability to watch YouTube, Loom, TikTok, local files - anything yt-dlp supports what people actually use it for: → analyze a competitor launch - what hook, what visuals, what structure → debug from a screen recording - Claude reads the exact frame where it breaks → summarize a 49-min talk in 30 seconds with frame-accurate timestamps → strip the hype from product videos - "what's actually new, skip the pitch" the mechanism: yt-dlp pulls free captions first (zero cost). ffmpeg extracts frames at scene-aware intervals - not uniform sampling, so you don't waste tokens on 12 identical frames of the same slide. Claude reads every frame as an image with timestamp markers. Groq Whisper only kicks in when a video has no caption track how to set up (3 min): > claude code: /plugin marketplace add bradautomates/claude-video then /plugin install watch@claude-video > or npx skills add bradautomates/claude-video -g for codex, cursor, gemini cli > dependencies auto-install on macOS via brew two caveats: free captions cover most but not all videos. past 10 min use --start/--end for focused sections or the token-burner mode for full coverage your buddy still watches every tutorial at 2x speed taking manual notes. you paste a URL and your agent extracts the substance in seconds for $0

Alvaro Cintas

302,548 görüntüleme • 13 gün önce

Here is the tool I built yesterday in Claude code in maybe 10-20 minutes? It truly baffles me when people say “the AI bubble” this simple tool would’ve took devs 2-5 days and would have cost me 500$-1000$ Claude code made it for me on a 20$ monthly subscription, and a free Gemini api key. I actually want to preform an experiment asking developers how much they would charge for such a tool to get a consensus on how much money Claude Code has saved me.

Here is the tool I built yesterday in Claude code in maybe 10-20 minutes? It truly baffles me when people say “the AI bubble” this simple tool would’ve took devs 2-5 days and would have cost me 500$-1000$ Claude code made it for me on a 20$ monthly subscription, and a free Gemini api key. I actually want to preform an experiment asking developers how much they would charge for such a tool to get a consensus on how much money Claude Code has saved me.

Chris

170,273 görüntüleme • 6 ay önce

🚀 🤖 I’m excited to release the first version of Laravel Loop, an MCP Server for Laravel that allows you to create custom tools and connect your Laravel app directly to AI tools like Cursor, Claude Code, Claude Desktop, and others. Let me show you how it works in... 👇

🚀 🤖 I’m excited to release the first version of Laravel Loop, an MCP Server for Laravel that allows you to create custom tools and connect your Laravel app directly to AI tools like Cursor, Claude Code, Claude Desktop, and others. Let me show you how it works in... 👇

Luis Dalmolin

28,467 görüntüleme • 1 yıl önce

Get beautiful text animations. We built a hand-crafted collection of text animations and wrapped them as a SKILL for your AI agent. Use it with Remotion, Motion, GSAP, WAAPI, or any animation library. It comes with clear animation specs - pacing, curves, transitions - so your output looks great from the first prompt. Install it with: npx skills add pixel-point/animate-text --skill animate-text Use it /animate-text apply soft-blur-in to hero section text

Get beautiful text animations. We built a hand-crafted collection of text animations and wrapped them as a SKILL for your AI agent. Use it with Remotion, Motion, GSAP, WAAPI, or any animation library. It comes with clear animation specs - pacing, curves, transitions - so your output looks great from the first prompt. Install it with: npx skills add pixel-point/animate-text --skill animate-text Use it /animate-text apply soft-blur-in to hero section text

Alex Barashkov

127,713 görüntüleme • 3 ay önce

Claude Design + Shopify is f*cking ridiculous 🤯 You can now publish pages from Claude Design → Claude Code → Shopify. Built 100% with Claude Design, Claude Code, and the Shopify CLI. Perfect for DTC brands and agencies who want to skip the design → dev handoff entirely. Here's how it works: → Design any landing page in Claude Design → Export as a zip and drop it into Claude Code → Install the Shopify + Shopify AI Toolkit plugins → Prompt Claude to convert the HTML into a Shopify page template + push to live theme → Claude uploads the images, deploys the files, and creates a published page No more handing designs off to a dev and waiting 2 weeks for a Shopify page. What you get: - A workflow that turns any Claude Design page into a real Shopify page template - Editable sections so your marketing team can swap copy, images, and CTAs without code - Images uploaded straight to Shopify Files automatically - A files-only deploy that only touches what's new in your live theme - A repeatable pipeline you can use every time you design a new landing page This is essentially the design-to-deploy pipeline brands have been waiting for. I put together a step-by-step playbook for going from Claude Design → published Shopify page. Every install, every plugin, every command, and the exact prompt that runs the whole thing. Want the playbook for free? > Like this post > Comment "SHOP" And I'll send it over (must be following so I can DM)

Claude Design + Shopify is f*cking ridiculous 🤯 You can now publish pages from Claude Design → Claude Code → Shopify. Built 100% with Claude Design, Claude Code, and the Shopify CLI. Perfect for DTC brands and agencies who want to skip the design → dev handoff entirely. Here's how it works: → Design any landing page in Claude Design → Export as a zip and drop it into Claude Code → Install the Shopify + Shopify AI Toolkit plugins → Prompt Claude to convert the HTML into a Shopify page template + push to live theme → Claude uploads the images, deploys the files, and creates a published page No more handing designs off to a dev and waiting 2 weeks for a Shopify page. What you get: - A workflow that turns any Claude Design page into a real Shopify page template - Editable sections so your marketing team can swap copy, images, and CTAs without code - Images uploaded straight to Shopify Files automatically - A files-only deploy that only touches what's new in your live theme - A repeatable pipeline you can use every time you design a new landing page This is essentially the design-to-deploy pipeline brands have been waiting for. I put together a step-by-step playbook for going from Claude Design → published Shopify page. Every install, every plugin, every command, and the exact prompt that runs the whole thing. Want the playbook for free? > Like this post > Comment "SHOP" And I'll send it over (must be following so I can DM)

Mike Futia

57,700 görüntüleme • 2 ay önce

a fun workflow for prepping a talk: > record a draft video without a script > have Claude Code turn the video into a Notion page with slides + transcript of what I said > ask people for feedback on the video; Claude processes their notes and attaches things as inline comments in the relevant spots > read through the page, manually edit to refine the wording of what I want to say Crucially, I'm in creative control. AI is *not* writing the talk for me in any way! It's providing tools that make it easier for me to think together with my team. h/t Thariq for inspiration, his video editing workflow got me thinking about how useful coding agents can be for video processing

a fun workflow for prepping a talk: > record a draft video without a script > have Claude Code turn the video into a Notion page with slides + transcript of what I said > ask people for feedback on the video; Claude processes their notes and attaches things as inline comments in the relevant spots > read through the page, manually edit to refine the wording of what I want to say Crucially, I'm in creative control. AI is not writing the talk for me in any way! It's providing tools that make it easier for me to think together with my team. h/t Thariq for inspiration, his video editing workflow got me thinking about how useful coding agents can be for video processing

Geoffrey Litt

56,171 görüntüleme • 1 ay önce

Today we're launching Goose Ads in Claude. This is a skill /goose-ads that lets anyone make high-performing ad creatives directly in Claude, Claude Code, Cowork, or Codex. It finds the ads companies are already paying real money to run and remakes them for your brand. Accurate logo, messaging, and assets. One prompt. Here's how it works: 1. Install: npx gooseworks install --all 2. Run: /goose-ads create ads for my brand [your-website] 3. Pick the templates you like That's it. Winning ad creative in minutes, inside Claude. But this is just the start. We open-sourced 100+ growth skills that some of the fastest-growing startups run every day. Ads, content, competitor research, GTM, SEO, all of it. Comment Goose and I'll DM you all 100+. For free

Soham Mehta

257,566 görüntüleme • 1 ay önce

Claude Code made key sections of my launch video for me (quoted) In this specific chunk, I had Claude write out a fake terminal interaction using ANSI codes so I could time it out to the music and create the ANSI explosion effect! There are a couple other tricks here too 1/

Claude Code made key sections of my launch video for me (quoted) In this specific chunk, I had Claude write out a fake terminal interaction using ANSI codes so I could time it out to the music and create the ANSI explosion effect! There are a couple other tricks here too 1/

Aaron Francis

31,592 görüntüleme • 6 ay önce

R.I.P. per-token API pricing for AI agents 😭 a Chinese AI lab just dropped a flat-rate model backend built specifically for agentic workloads. i swapped my Claude Code to it in under 5 minutes. here's the full breakdown:

R.I.P. per-token API pricing for AI agents 😭 a Chinese AI lab just dropped a flat-rate model backend built specifically for agentic workloads. i swapped my Claude Code to it in under 5 minutes. here's the full breakdown:

Muhammad Ayan

51,167 görüntüleme • 2 ay önce

Claude Code + Higgsfield MCP is f*cking cracked 🤯 I built an entire DTC ad campaign inside Claude Code using the new Higgsfield MCP. One product URL → hero static, animated hero shot, 2 UGC clips with a creator wearing the product. 5 assets. One Claude conversation. 3 Higgsfield models. All inside Claude Code. Perfect for DTC brands and agencies who need full campaign packages without booking a shoot or briefing a designer. If you're spending hours every week generating statics in one tool, briefing a motion designer for the hero clip, then chasing a UGC creator for the talking-head shots — this MCP eliminates the entire pipeline: → Drop a product URL into Claude Code → Claude pulls the brand brief — voice, hero SKUs, visual style, target customer → Generates the hero static with ChatGPT Images 2.0 → Animates it into a 5-second cinematic opener with Seedance 2.0 → Generates a UGC creator with GPT Image 2 → Drops her in the product and generates 2 native UGC video clips with Seedance 2.0 No tab-switching between tools. No copy-pasting prompts between platforms. No briefing 3 different vendors for one campaign. What you get: → A complete campaign package — static, animation, UGC — from one product URL → Brand-specific outputs that pull from a real brief, not generic AI slop → Claude making creative decisions between every step (which variation wins, which creator fits the persona, which clip needs a re-spin) → A repeatable pipeline you can run for any product in your catalog Built 100% in Claude Code with the Higgsfield MCP. I recorded a full walkthrough showing exactly how this works: the MCP setup, every prompt, every model, the full campaign output. Want the full video walkthrough? > Like this post > Comment "MCP" And I'll send it over (must be following so I can DM)

Mike Futia

29,570 görüntüleme • 3 ay önce

Claude Code Desktop now opens a new window for each session This makes it much easier to visualize multiple Claude Code agents running in parallel My current stack depends on the task: - Ghostty: when starting a project. Bash commands, git, env variables, provider connections. All manual through the terminal with a Claude panel running alongside. - Claude Code Desktop: once everything is configured. GitHub connected, CLAUDE.md, Skills, subagents and Hooks ready. Claude Code runs on its own, no more terminal setup, just panels running and outputs to review. - VSCode: when I need to review code by hand. I use it less and less, but there are moments where I have to confirm Claude got it right. I usually open the Claude extension inside VSCode, but it lacks most of the CLI features so it's limited Solid update. Worth trying once your workflows are already set up 👇

Claude Code Desktop now opens a new window for each session This makes it much easier to visualize multiple Claude Code agents running in parallel My current stack depends on the task: - Ghostty: when starting a project. Bash commands, git, env variables, provider connections. All manual through the terminal with a Claude panel running alongside. - Claude Code Desktop: once everything is configured. GitHub connected, CLAUDE.md, Skills, subagents and Hooks ready. Claude Code runs on its own, no more terminal setup, just panels running and outputs to review. - VSCode: when I need to review code by hand. I use it less and less, but there are moments where I have to confirm Claude got it right. I usually open the Claude extension inside VSCode, but it lacks most of the CLI features so it's limited Solid update. Worth trying once your workflows are already set up 👇

Daniel San

38,726 görüntüleme • 2 ay önce

How I use Claude Code and Remotion to make animated diagrams. Sorry, it's not a single prompt. 1. Find an input language the model knows well. For example, Mermaid for flowcharts. Claude writes it fluently, so it's my entry point. 2. Use Claude to build components that take that input and bake in the guardrails: design system, animation patterns, layout rules. 3. Now I can describe what I want in plain English e.g. "create a flowchart for the tier check section in the script", and Claude translates it to our input language: ``` flowchart TD t1[Tier 1 read-only] t2[Tier 2 in-project writes] t3[Tier 3 everything else] action[Action] --> t1 action --> t2 action --> t3 t1 --> skip([Skips classifier]) t2 --> skip t3 --> classifier{Classifier} classifier --> approve[Approve] classifier --> deny[Deny] ``` The component handles the rest: layout, styling, node and edge reveals. It also takes events for follow-ups like the trace dot that follows a path and lights up nodes. 4. To finish it off, I wrapped the board in a separate CRT shader component. It really helps to have a shared vocabulary with your agent. When I say "rise in fast on enter", it knows I mean fade in while translating up, from a set offset, faster than the default duration, with a specific bezier curve. For common language inspo: look into Matt Pocock `/grill-with-docs` and by Emil Kowalski and Glenn Hitchcock.

How I use Claude Code and Remotion to make animated diagrams. Sorry, it's not a single prompt. 1. Find an input language the model knows well. For example, Mermaid for flowcharts. Claude writes it fluently, so it's my entry point. 2. Use Claude to build components that take that input and bake in the guardrails: design system, animation patterns, layout rules. 3. Now I can describe what I want in plain English e.g. "create a flowchart for the tier check section in the script", and Claude translates it to our input language: ``` flowchart TD t1[Tier 1 read-only] t2[Tier 2 in-project writes] t3[Tier 3 everything else] action[Action] --> t1 action --> t2 action --> t3 t1 --> skip([Skips classifier]) t2 --> skip t3 --> classifier{Classifier} classifier --> approve[Approve] classifier --> deny[Deny] ``` The component handles the rest: layout, styling, node and edge reveals. It also takes events for follow-ups like the trace dot that follows a path and lights up nodes. 4. To finish it off, I wrapped the board in a separate CRT shader component. It really helps to have a shared vocabulary with your agent. When I say "rise in fast on enter", it knows I mean fade in while translating up, from a set offset, faster than the default duration, with a specific bezier curve. For common language inspo: look into Matt Pocock `/grill-with-docs` and by Emil Kowalski and Glenn Hitchcock.

Delba

61,047 görüntüleme • 1 ay önce

if you use claude code, this will save you real money. the problem: every time you make an edit, your ai rereads the whole codebase to figure out what changed. tens of thousands of tokens, every turn, for context it already had. this repo fixes it. it’s called code review graph, and it just maps your entire codebase: every file, every function, every connection laid out so you can see the actual shape of your project how to set up (2 min): 1. pip install code-review-graph 2. code-review-graph install - auto-configures Claude Code, Cursor, Codex, Gemini CLI + more 3. code-review-graph build change one function, and it traces exactly what that touches... every caller, every dependent file, every test. your ai only reads what's affected, not the whole repo. and the savings are wild. a task that used to burn ~100,000 tokens (about a dollar) now runs closer to a penny.

if you use claude code, this will save you real money. the problem: every time you make an edit, your ai rereads the whole codebase to figure out what changed. tens of thousands of tokens, every turn, for context it already had. this repo fixes it. it’s called code review graph, and it just maps your entire codebase: every file, every function, every connection laid out so you can see the actual shape of your project how to set up (2 min): 1. pip install code-review-graph 2. code-review-graph install - auto-configures Claude Code, Cursor, Codex, Gemini CLI + more 3. code-review-graph build change one function, and it traces exactly what that touches... every caller, every dependent file, every test. your ai only reads what's affected, not the whole repo. and the savings are wild. a task that used to burn ~100,000 tokens (about a dollar) now runs closer to a penny.

Alvaro Cintas

72,129 görüntüleme • 5 gün önce

In the new Pixel Pals update, to get PixelQuest working as a full iOS 17 home screen game, I had to code in actual procedural chunk loading for the map because loading the full massive map was crashing 💀 Plus there's full boundary detection haha

In the new Pixel Pals update, to get PixelQuest working as a full iOS 17 home screen game, I had to code in actual procedural chunk loading for the map because loading the full massive map was crashing 💀 Plus there's full boundary detection haha

Christian Selig

705,720 görüntüleme • 2 yıl önce