章节 1：概念引入：Claude Code 与 Remotion 的自动化视频生成

📝 本节摘要：

本章介绍了如何利用 Claude Code 和 Remotion 实现全自动视频生成。作者演示了仅需提供一个网页链接（如课程页面），AI 即可提取文本、颜色和素材生成推广视频。核心原理解析了 Remotion 如何将 React 组件转化为视频，以及 Claude Code 如何利用 "Skills"（技能上下文文件） 来增强对特定库（如 3D 特效）的编码能力。此外，简要提及了本地运行与云端 VPS 运行的区别。

[原文] [Speaker A]: let's talk about clot code and remotion the video that you see here has been completely generated with clot code and remotion i did not have to edit anything myself manually i could just prompt my way and got a pretty nice looking uh video here in literally a few minutes so I just supplied the link to my course page because let's say I want to create a promo video for a course that I sell and I was able to add images to the video as well it was able to retrieve all the text from the from that page and uh colors as well so it's really nice that you can just supply a link and based on that it can generate a video

[译文] [Speaker A]: 让我们来谈谈 Claude Code 和 Remotion，你在这里看到的视频完全是利用 Claude Code 和 Remotion 生成的，我不需要手动编辑任何东西，只需通过提示词（Prompt）引导，几分钟内就得到了一个相当不错的视频。 所以我只是提供了我的课程页面的链接，因为假设我想为我销售的课程制作一个推广视频，而且我还能向视频中添加图片。 它能够从那个页面提取所有的文本以及颜色，所以这真的很好，你只需提供一个链接，它就能据此生成一个视频。

[原文] [Speaker A]: now there are some other use cases as well like let's say you have an app and you want to create a uh like a promo that shows off a new feature that you have perhaps or you want to create a video for your homepage that shows the app you can just prompt your way there and actually the nice thing is that you can just uh use your existing app components so if you have an app and you have React components you may be able to use those in the video itself because with Remotion the video consists of React components it's just markup it's just code so you can have a div right and a div with a certain background styling that will be rendered here it will be part of the video,

[译文] [Speaker A]: 现在还有一些其他的用例，比如假设你有一个应用程序，你想制作一个推广视频来展示你也许刚推出的新功能，或者你想为主页制作一个展示该应用程序的视频，你都可以通过提示词来实现。 实际上最好的一点是，你可以直接使用你现有的应用程序组件。 所以如果你有一个应用程序，并且你有 React 组件，你也许能够在视频本身中使用它们，因为在 Remotion 中，视频就是由 React 组件组成的，它只是标记语言（markup），只是代码。 所以你可以有一个 div，对吧，一个带有特定背景样式的 div，它会被渲染在这里，它将成为视频的一部分。

[原文] [Speaker A]: so if you already have a component it should be able to use that so your videos can show a really realistic view of your app and then it can animate it and make it look fancy and such and use your existing branding and such now quick uh note here on Remotion what you will get with remote if you create a remotion app is actually this editor UI as well so you have the actual video but also a remote app in which uh you can edit the video and preview it and edit it now for editing typically you'll mostly be using uh cloud code or your AI agents cuz technically it should work with other AI agents as well and you'll mostly be prompting your way there so here we're just using it to preview the video and also we can render it out so ultimately it has to be packaged up into an actual MP4 file so we can actually upload it to social media or a hosting platform so we can then display it on our website let's say right,

[译文] [Speaker A]: 所以如果你已经有了一个组件，它应该能够使用该组件，这样你的视频就能展示出你应用程序非常真实的视图，然后它可以对其进行动画处理，让它看起来很炫酷之类的，并使用你现有的品牌形象等。 现在关于 Remotion 快速补充一点，如果你创建一个 Remotion 应用，你会得到其实还有这个编辑器 UI（用户界面），所以你既拥有实际的视频，也有一个 Remotion 应用，你可以在其中编辑视频、预览并进行修改。 现在对于编辑工作，通常你主要会使用 Claude Code 或者你的 AI 智能体（Agents），因为从技术上讲它应该也适用于其他 AI 智能体，你主要会通过提示词来完成操作。 所以在这里我们只是用它来预览视频，而且我们还可以将其渲染出来，最终它必须被打包成一个实际的 MP4 文件，这样我们才能将其上传到社交媒体或托管平台，以便我们随后可以在我们的网站上展示它，比如说，对吧。

[原文] [Speaker A]: so with Remotion we can create real MP4 videos with React and you can use like CSS animations and transitions to create animations so really awesome project actually i've used them a few years ago in a startup idea I had and at the time it was a bit tricky to use them because it's a little bit complex to use them sometimes so really nice that they are blowing up now because of these AI coding agents they have simplified it a lot you don't need to code yourself anymore you can just prompt the video that you want

[译文] [Speaker A]: 所以利用 Remotion，我们可以用 React 创建真正的 MP4 视频，你可以使用像 CSS 动画和过渡效果来制作动画，这真的是一个很棒的项目。 实际上我几年前在一个创业点子中使用过它们，当时使用起来有点棘手，因为有时用起来有点复杂。 所以很高兴看到它们现在因为这些 AI 编程智能体（AI coding agents）而爆发式增长，它们简化了很多流程，你不再需要自己写代码了，你只需通过提示词描述你想要的视频即可。

[原文] [Speaker A]: now this blew up recently because they have released a so-called clot code skill right so a skill for clot code is basically just it's just a bunch of context essentially so if you are prompting for a 3D effect in your video clot code can use that skill to look up the relevant information about that so it will look at this skill.md file but then this file itself can then reference other files as well so there is another file in as part of that skill that specifically describes how to do 3D things in reotion cl code can do that better so really nice to have seen them blown blown up they've been in the game for quite a few years uh works really well with these uh coding agents,

[译文] [Speaker A]: 最近这之所以火起来，是因为他们发布了一个所谓的 Claude Code Skill（技能），对吧。 对于 Claude Code 来说，一个 Skill 基本上就是一堆上下文（context）。 所以如果你在提示词中要求视频中有 3D 效果，Claude Code 可以使用那个 Skill 来查找相关的资料信息。 它会查看这个 skill.md 文件，但这个文件本身也可以引用其他文件，所以在那个 Skill 中还有另一个文件专门描述如何在 Remotion 中制作 3D 效果，这样 Claude Code 就能做得更好。, 真的很高兴看到他们火起来，他们在这个领域已经好几年了，这与这些编程智能体配合得非常好。

[原文] [Speaker A]: i guess technically it should also work with other coding agents but we'll take a look at cloud code in this video so we can do it locally on our own computer but there are actually also some benefits of doing it in a cloud on a VPS let's say you can then connect with it perhaps through your phone or use a VPS as like a render farm where you're actually rendering out the videos because the rendering can be uh time or resource intensive um and you can actually run clot code on a VPS as well so we'll see how we can combine that on a VPS a bit later in the video as well let's talk about how we can get this running on our own computers first and some of the things that we can do with that,

[译文] [Speaker A]: 我想从技术上讲，它应该也适用于其他编程智能体，但在这个视频中我们将主要关注 Claude Code。 我们可以通过自己的电脑在本地运行，但实际上在云端 VPS 上运行也有一些好处。 比如说，你可以通过手机连接它，或者将 VPS 用作渲染农场（render farm），在那里实际渲染视频，因为渲染过程可能会消耗大量的时间或资源。 而且你实际上也可以在 VPS 上运行 Claude Code，所以我们在视频稍后部分也会看看如何在 VPS 上结合使用它们。 让我们先谈谈如何在自己的电脑上运行它，以及我们可以用它做些什么。,

这是为您整理的第 2 章内容。

章节 2：本地环境搭建与 Agent Skills 配置

📝 本节摘要：

本章详细讲解了项目的初始化流程。作者建议在现有应用（如 Next.js）之外独立创建 Remotion 文件夹，以便复用 React 组件。接着演示了如何使用命令行创建空模板项目、安装依赖（`npm install`）以及运行开发预览（`npm run dev`）。核心部分在于安装 Agent Skills（技能包）：通过添加 .clot 文件夹中的 Markdown 文件，让 Claude Code 能够动态读取 Remotion 的最佳实践（例如 3D 特效文档），从而在不污染上下文的前提下增强编程能力。最后简述了如何在 VS Code 中启用 Claude Code 扩展。

[原文] [Speaker A]: all right so let's see how we can get started with this so in the remote docs they have a page here for clot code and they have a command here this will create a new appotion app um and it will have a studio so there's like a UI where we can edit the video as well

[译文] [Speaker A]: 好了，让我们看看如何开始吧。在 Remotion 文档中，他们有一个关于 Claude Code 的页面，这里有一条命令，这将创建一个新的 Remotion 应用，并且它会包含一个 Studio，也就是一个我们可以编辑视频的 UI 界面。

[原文] [Speaker A]: so I have opened an empty folder here on my computer but maybe you already have an app so what you could have the folder structure that you could have is let's say you have a nextjs app and then you may want to have the remote app in the workspace as well but these are two different folders this can be useful if you want the remote video to be aware of your react components in your actual app maybe you're creating a promo for a new feature for example it can it can use the components from your actual app to help create the video right so in that case you want to put the motion app in this folder okay

[译文] [Speaker A]: 我在电脑上打开了一个空文件夹，但也可能你已经有一个应用程序了。所以你可以采用的文件夹结构是，假设你有一个 Next.js 应用，然后你可能希望 Remotion 应用也在同一个工作区中，但这应该是两个不同的文件夹。如果你希望 Remotion 视频能识别你实际应用中的 React 组件，这会非常有用，比如你正在为新功能制作推广视频，它就可以使用你实际应用中的组件来辅助创建视频，对吧，所以在这种情况下，你要把 Remotion 应用放在这个文件夹里，好吗。

[原文] [Speaker A]: but for now I will just assume the only app that we will have is the motion app i'm going to put it in the current directory and it gives you a bunch of options here for the for boiler plate uh and we will go with a blank template here we will use Tilman CSS add agent skills yeah we might as well just do that however I might as well just show you how to do that without the without part of the setup here

[译文] [Speaker A]: 但现在我假设我们唯一的应用就是这个 Remotion 应用，我打算把它放在当前目录下。它这里提供了一些样板代码的选项，我们将选择一个空白模板（Blank Template）。我们会使用 Tailwind CSS，添加 Agent Skills（智能体技能），是的，我们不妨直接这么做，不过我也许该向你们展示一下如果不在这里设置要怎么做。

[原文] [Speaker A]: all right so then we have our app it is actually a React app and we should install the dependencies as well so I will do mpm install okay and now we can run the app we can do mpm rundev and it will open up the studio right so here we can see like a video editing app and we don't have a video yet so it's just empty here uh you will be able to preview the video in here and also do some editing but my guess is that most of the editing that you will do you will just do by prompting your AI agent

[译文] [Speaker A]: 好了，现在我们要有了我们的应用，它实际上是一个 React 应用，我们也应该安装依赖项，所以我将执行 npm install，好的。现在我们可以运行应用了，我们可以执行 npm run dev，它会打开 Studio。所以在这里我们可以看到一个类似视频编辑的应用，我们还没有视频，所以这里是空的。你可以在这里预览视频，也可以做一些编辑，但我猜你做的大部分编辑工作都将通过向你的 AI 智能体发送提示词（Prompting）来完成。

[原文] [Speaker A]: so let's see how we can now uh add that skill so technically we can already spin up clot code right now right I could actually just uh right start running cloth here try to create a video however with the skill that we're going to use it's just much better so we do want to add the skill it just provides some additional context for the agent so if you scroll down a little bit here in in the remotion docs they also have skills so we can just use that command now I will just clear out of here to add that here in this app

[译文] [Speaker A]: 所以让我们看看现在如何添加那个 Skill（技能）。从技术上讲，我们现在就可以启动 Claude Code 了，对吧，我实际上可以直接在这里运行 claude 并尝试创建一个视频。然而，使用我们要用的这个 Skill 效果会好得多，所以我们要添加这个 Skill，它只是为智能体提供了一些额外的上下文（Context）。如果你在 Remotion 文档这里向下滑动一点，他们也有 Skills 部分，所以我们可以直接使用那条命令。现在我把这里清空一下，以便在这个应用中添加它。

[原文] [Speaker A]: so we can specify which agent so it should work with the other agents as Oh by the way I'm using cloud code but but I assume it works with the other agents as well so this will just be a bunch of files and we're just going to add it together with the app here if you can also do it globally so you can use it in other projects but we'll just do it for this project and sim link yeah just the default options okay

[译文] [Speaker A]: 我们可以指定是哪个智能体，所以它应该也适用于其他智能体。哦，顺便说一下，我正在使用 Claude Code，但我假设它对其他智能体也有效。这其实就是一堆文件，我们只是要把它们和应用一起添加在这里。你也可以全局添加，这样你就可以在其他项目中使用它，但我们只为这个项目添加，关于软链接（symlink）之类的就选默认选项，好的。

[原文] [Speaker A]: so what you will get is a bunch of folders here i'm not sure why it also adds it for the other agents because I picked clot code so the only one that we're interested in is this this one.clot so now when we start clot code right it will recognize this because it sees cloth skills uh reotion best practices and it can read this markdown file right

[译文] [Speaker A]: 所以你会在这里得到一堆文件夹，我不确定为什么它也为其他智能体添加了文件夹，因为我选的是 Claude Code，所以我们要关注的只有这个 .clot 文件夹。现在当我们启动 Claude Code 时，对吧，它会识别出这一点，因为它看到了 Claude Skills 以及 Remotion 最佳实践，并且它能读取这个 Markdown 文件，对吧。

[原文] [Speaker A]: so here um it basically describes the other files that it has so if we want to do something with for example 3D animation in our video cloud code can see oh there is something about 3D in here i should probably look that up and then dynamically add this as part of the context right so here there are a bunch of uh instructions for how to create 3D effects in the video hotcode can dynamically load this up in the context as we are prompting for relevant things like that so it keeps the context clean from things that we are not prompting for that are not relevant right that's the main benefit of these scales sort of dynamically loading in relevant information in the context as the you as you are prompting cloud code

[译文] [Speaker A]: 所以在这里，它基本上描述了它拥有的其他文件。如果我们想在视频中做一些事情，例如 3D 动画，Claude Code 就能看到，哦，这里有一些关于 3D 的内容，我应该去查阅一下，然后动态地将其作为上下文的一部分添加进来，对吧。所以这里有一堆关于如何在视频中创建 3D 效果的说明，Claude Code 可以在我们提示相关内容时动态加载这些信息。这样它就能保持上下文整洁，排除那些我们没有提示的、不相关的内容，对吧，这就是这些 Skills 的主要好处，即在你向 Claude Code 发出提示时动态加载相关信息。

[原文] [Speaker A]: we can say something like uh well let's actually open up cloud code yeah so I like using cloud code here as an IDE extension uh it's here in Visual Studio Code uh that's what I will use and actually I got it from here right so you can install cloud code u as an extension here and actually initially it was not available for me under this I this chat icon here so what you then had to do is you had to open a file and then click on this icon here that's what I had to do i don't know why that's the case but after some time cloth code also appeared here

[译文] [Speaker A]: 我们可以说些什么，呃，实际上让我们打开 Claude Code 吧。是的，我喜欢把 Claude Code 作为 IDE 扩展来使用，它就在 Visual Studio Code 这里，这就是我要用的。实际上我是从这里获取它的，对吧，你可以把 Claude Code 作为扩展安装在这里。起初在这个聊天图标下我找不到它，所以我当时不得不打开一个文件，然后点击这边的图标，我就是这么做的，不知道为什么会这样，但过了一段时间 Claude Code 也出现在这里了。

[原文] [Speaker A]: you can also just use the terminal of course right so you can do clot and now you can do something like skills so if you write /kills in the terminal it should pick up on the fact that it has that remotion skill so that's available now and actually I think it's not possible yeah so here it doesn't have that skills command but it should technically still have access to it so shouldn't make any difference

[译文] [Speaker A]: 你当然也可以只使用终端，对吧，你可以输入 claude，然后你可以做一些像查看 Skills 的操作。如果你在终端输入 /skills，它应该能识别出它拥有那个 Remotion Skill，所以它现在是可用的。实际上我想这里可能不行，是的，这里没有那个 skills 命令，但从技术上讲它应该仍然可以访问它，所以应该没什么区别。

这是为您整理的第 3 章内容。

章节 3：实战演练：基于 URL 生成课程推广视频

📝 本节摘要：

本章进入实战环节，作者演示了如何通过简单的 URL 提示词生成一个完整的课程推广视频。Claude Code 成功抓取了目标网页（bitegrad.com）上的文本和配色方案，并自动下载了所需的 Remotion 依赖包,。生成的初稿视频时长 13 秒，包含 5 个动画场景。作者在预览后分析了结果：虽然部分设计元素（如紫色渐变）与预期有出入，且文字偏小，但视频逻辑结构清晰（包含页头、项目展示、行动号召），作为一个全自动生成的初版草稿是非常合格的。

[原文] [Speaker A]: so now let's actually try creating a video so I want to create a video a promo video let's say for a course that I sell on my website so on biteg.com we sell this uh react and xjs course um and I want to perhaps create a video for this right or maybe you want to create a video for your SAS on the homepage or maybe you have a new feature and you want to create a promo for social media um bunch of use cases here but I would like to have a video for this page

[译文] [Speaker A]: 那么现在让我们实际尝试创建一个视频，我想制作一个视频，比如为我在网站上销售的课程制作一个推广视频。所以在 bitegrad.com 上，我们销售这个 React 和 Next.js 课程，我想或许可以为此制作一个视频，对吧。或者也许你想为你的 SaaS 软件主页制作一个视频，或者你有一个新功能，你想为社交媒体制作一个推广视频，这里有很多用例，但我想要为这个页面制作一个视频。

[原文] [Speaker A]: now ideally I can just uh copy the link here and now if I say something like use remotion to create a short promo video for this course okay let's see what it can do with that right so it should be able to pick up on some of the colors on that page for example and perhaps even images or assets we'll talk more about assets later and that's already quite of a stretch perhaps so we'll maybe we'll have to manually add a logo but it should be able to pick up a a lot of copy as well right

[译文] [Speaker A]: 现在理想情况下，我只需复制这里的链接，然后如果我说类似“使用 Remotion 为这门课程制作一个简短的推广视频”之类的话，好的，让我们看看它能做些什么，对吧。它应该能够提取该页面上的一些颜色，甚至可能是图片或素材——我们稍后会详细讨论素材，这可能稍微有点难，所以或许我们得手动添加 Logo，但它应该也能够提取大量的文案，对吧。

[原文] [Speaker A]: so I have a bunch of text here so typically the things that you have on your website already are quite curated so that's typically what you want to use so yes we want to allow fetching all right so now here we can see something remotion best practices skill so it looks like it's able to use the skill now uh it may take a little bit of time before it has a video okay so here it has something yeah so let me read the key remotion rules to understand best practices

[译文] [Speaker A]: 所以我这里有一堆文本，通常你在网站上已有的内容都是经过精心策划的，所以这通常就是你想要使用的内容。所以是的，我们要允许抓取（fetching），好的。现在我们在这里可以看到“Remotion 最佳实践 Skill”，看来它现在能够使用这个 Skill 了。这可能需要一点时间才能生成视频，好的，这里有一些进展了，是的，它说“让我阅读关键的 Remotion 规则以了解最佳实践”。

[原文] [Speaker A]: now I had a very generic prompt like create a promo video um so we'll we'll hone in on that a bit later so actually it's uh downloaded the packages for me i didn't even know that I needed them um so that's already nice cuz Remotion has been around for some time but you know it's pretty complex uh project so I think uh they really have a breakthrough now with these coding agents because they make it much easier to uh use it

[译文] [Speaker A]: 我刚才用的提示词非常宽泛，就像“制作一个推广视频”，所以我们稍后会对此进行微调。实际上它已经为我下载了相关的包，我甚至都不知道我需要它们，这真的很不错。因为 Remotion 已经存在一段时间了，但你知道它是一个相当复杂的项目，所以我认为随着这些编程智能体的出现，他们真的取得了突破，因为它们让使用变得容易多了。

[原文] [Speaker A]: so create promo video now with multiple scenes right so a scene is like uh one part of the video all right so now it's actually trying to change the code right because a video with reotion is just react code so we're just going to allow all edits okay so pretty fast actually and actually 13 seconds with five animated scenes open it up for me please so we'll see what happens so kind of curious now

[译文] [Speaker A]: 所以现在正在创建包含多个场景（scenes）的推广视频，对吧，一个场景就像是视频的一个部分。好了，现在它实际上正在尝试更改代码，对吧，因为用 Remotion 制作的视频就是 React 代码，所以我们将允许所有编辑。好的，实际上非常快，实际上生成了 13 秒包含 5 个动画场景的视频。请为我打开它，让我们看看会发生什么，我现在有点好奇了。

[原文] [Speaker A]: all right right so here we go all right so I see something with purple here a purple gradient which is kind of interesting because uh we do have this like in the pro in one of the projects of the course we do have like a little purple there maybe that's why it has that but let's see

[译文] [Speaker A]: 好的，开始了。好的，所以我在这里看到了一些紫色的东西，一个紫色的渐变，这有点意思，因为在这门课程的一个项目中，我们确实有一点紫色，也许这就是为什么它用了这个颜色，但让我们继续看。

[原文] [Speaker A]: all right so here we have something master of modern web development okay so it's a bit small let me make it bigger build seven real projects modern text tag start your journey and it shows the price as of recording uh so yeah actually quite interesting really I think a good place to start i think the the way that has split up these scenes into distinct parts like it makes sense like it starts off with like an intro or a hero section uh the text makes kind of sense as well we have we have some projects we have some you know things that we're learning and ultimately like a call to action so you know pretty decent uh first version I would say

[译文] [Speaker A]: 好的，这里写着“掌握现代 Web 开发”（Master of Modern Web Development），好的，字有点小，让我把它放大点。“构建 7 个真实项目”、“现代技术栈”（Modern Tech Stack）、“开始你的旅程”，并且它显示了录制时的价格。所以是的，实际上挺有趣的，真的，我认为这是一个很好的起点。我觉得它将这些场景划分为不同部分的方式很有道理，比如它以介绍或英雄区域（Hero Section）开始，文本也挺合理的，我们展示了一些项目，我们学到的一些东西，最后是一个行动号召（Call to Action）。所以你知道，我想说这作为一个初版还算不错。

这是为您整理的第 4 章内容。

章节 4：迭代优化：实时预览与 React 组件样式调整

📝 本节摘要：

在生成初版视频后，作者对细节进行了微调。他指出 Studio UI 中的文字过小且颜色未完全符合品牌预期，因此通过提示词（Prompting）要求“将所有场景的文字显著放大”。这一过程展示了 Claude Code 的“热重载（Hot Reload）”能力，即代码修改后视频预览会实时更新。作者进一步深入底层代码，解释了视频本质上是由 React 组件 和 Tailwind CSS（文中转录为 Tilman CSS）构成的，演示了如何通过修改 CSS 类名（如将白色改为橙色）来手动控制样式。最后，通过提取“购买按钮”的渐变色代码，成功将品牌配色应用到了整个视频的动画中。

[原文] [Speaker A]: so what we have in the studio here is you can just sort of scroll back and forth um you can also try hiding something here you won't really be using much of the UI here to be honest you're just going to prompt for any changes right so for example the text is a bit small here in the middle and also the colors are not really uh what I would want although I can see why it used some of the colors but I would like it to use more of this green color for example as like an accent color and also use images right

[译文] [Speaker A]: 所以我们在 Studio 这里拥有的是，你可以前后滚动浏览，你也可以尝试在这里隐藏一些东西。老实说，你真的不会怎么使用这里的 UI，你只会通过提示词来进行任何更改，对吧。比如，中间这里的文字有点小，而且颜色也不是我真正想要的，虽然我明白它为什么使用某些颜色，但我希望它更多地使用这种绿色，例如作为强调色（accent color），并且还要使用图片，对吧。

[原文] [Speaker A]: so how would we now continue you would simply continue prompting right so we would say something like significantly bigger for all scenes right so each of these parts is essentially a scene but you can see we already have animations out of the box i don't know any faster way to create a promo video cuz if you had to do it from scratch and you had to copy a bunch of things from your landing page this would have been a lot of work actually so pretty slick that uh we can do it so fast

[译文] [Speaker A]: 那么我们现在该如何继续呢？你只需继续发送提示词，对吧。所以我们会说类似“把所有场景（的文字）变得显著更大”，对吧。这些部分的每一个本质上都是一个场景，但你可以看到我们需要开箱即用的动画。我不知道还有什么更快的制作推广视频的方法，因为如果你必须从头开始做，而且必须从你的着陆页复制一堆东西，这实际上会是大量的工作。所以我们能做得这么快真的很利索。

[原文] [Speaker A]: and actually as it's making the updates here in code right so it's still going the text is already bigger so actually it sort of is hot hot uh hot reload right so here we have uh a bigger text now okay so this looks good it should also improve this soon right so this is all just react code react components that and CSS animations and things like that

[译文] [Speaker A]: 实际上当它在这里更新代码时，对吧，它还在进行中，但文字已经变大了。所以实际上这有点像是热...热重载（hot reload），对吧。所以我们现在这里的文字变大了，好的，这看起来不错，它应该很快也会改进这个，对吧。所以这都只是 React 代码、React 组件以及 CSS 动画之类的东西。

[原文] [Speaker A]: uh if we check take a look at the uh code here right so you can see the video that we are looking at there is just this component right so it's using an absolute fill to create like a background uh gradient and here's the text right professional React and Next.js that's the text that we see here and it's been styled in some way right so the font size is a certain size it has a certain opacity uh it has text of white this professional so it has right so that's why it has white right so it's all just uh right so it's all just a plain markup essentially right

[译文] [Speaker A]: 呃，如果我们检查一下这里的代码，对吧，你可以看到我们要看的视频实际上只是这个组件，对吧。所以它使用了一个 absolute fill（绝对填充）来创建一个类似背景渐变的效果。这里是文本，对吧，“Professional React and Next.js”，这就是我们在这里看到的文本，它以某种方式进行了样式设置，对吧。所以字体大小是特定的大小，它有一定的透明度，它的文本是白色的，“Professional”这个词，所以它是...对吧，这就是为什么它是白色的，对吧。所以这都只是...对吧，这本质上都只是纯标记语言（markup），对吧。

[原文] [Speaker A]: so if I would change the text here from white to um orange 500 it's just a tilman CSS class now it's orange right so you can see how that works all right so now we can see the text is bigger that is much better I think and yeah I mean we could fine-tune the colors and such um you know maybe you can provide the actual accent color and so here for example Oh I have the uh buy button with a certain gradient i like this gradient we can use that can use this gradient throughout the video okay so let's see right so it's all just uh React code here and so if you already have an app an React app you should be able to simply reuse that component in here as well

[译文] [Speaker A]: 所以如果我要把这里的文本从白色改为，嗯，“orange 500”，这只是一个 Tailwind CSS（文中误识别为 tilman CSS）类，现在它是橙色的，对吧，所以你可以看到它是如何工作的。好的，现在我们可以看到文字变大了，我觉得这好多了。是的，我的意思是我们可以微调颜色之类的，你知道，也许你可以提供实际的强调色。所以在这里，例如，哦，我有一个带有特定渐变的购买按钮，我喜欢这个渐变，我们可以使用它，可以在整个视频中使用这个渐变。好的，让我们看看，对吧，所以这里全都是 React 代码，因此如果你已经有一个应用，一个 React 应用，你应该能够直接在这里复用那个组件。

[原文] [Speaker A]: all right so now you can see it has used that uh gradient here in the text actually so yeah it has Yeah it's now using it throughout the video and it has the background looks a bit better I think so uh yeah yeah that makes sense nice animations here at the end as well now it's actually really good

[译文] [Speaker A]: 好的，现在你可以看到它实际上在文本中使用了那个渐变色。所以是的，它已经...是的，它现在在整个视频中都使用了它，而且背景看起来也好了一点，我觉得。所以，呃，是的，是的，这很有道理，结尾这里的动画也很棒，现在它实际上非常好了。

这是为您整理的第 5 章内容。

章节 5：高级功能：插入自定义素材与 3D 特效

📝 本节摘要：

掌握基础视频生成后，作者演示了如何通过 Prompt 添加更复杂的自定义内容。首先，他将讲师照片放入 `public` 文件夹，并要求 Claude Code 生成一个“讲师介绍场景”。随后，他测试了 Remotion 的 3D 能力，成功给静态图片添加了 3D 动效。最后，作者展示了 Remotion 在技术视频中的杀手锏功能：自动生成代码演示动画（包含代码片段、终端窗口和模拟浏览器视图），并支持“打字机”输入效果，极大地简化了技术教程视频的制作流程。

[原文] [Speaker A]: and um there's one more scene that I would like to add here as well which is like an instructor like this is the instructor like I have here so now I want to add my image so I want to add an image here so let's actually just try copying it and we'll place it here can you add an instructor scene as well look up the info from that page okay so first let me save that image to the public folder,

[译文] [Speaker A]: 嗯，还有一个场景我也想加在这里，就是类似讲师介绍的场景，比如这就是讲师，就像我这里有的这张，所以现在我想添加我的照片，我想在这里加一张图。所以我们试着直接复制它，然后放在这里。你能加一个讲师场景吗？从那个页面查找相关信息。好的，首先让我把那张图片保存到 public 文件夹中。

[原文] [Speaker A]: okay so now and it has added it now to the public folder here so I guess technically you could also do it manually or if you already had assets in the public folder it should be able to use that now in the video test that out so here we have All right so let's All right here we go so now if we uh go to that new scene we see an instructor view with our asset right here

[译文] [Speaker A]: 好的，现在它已经把它添加到这里的 public 文件夹了。所以我猜从技术上讲，你也可以手动完成，或者如果你的 public 文件夹里已经有了素材，它现在应该能够在视频中使用它们。让我们测试一下。好的，我们来看看，好的，开始了。现在如果我们跳转到那个新场景，我们能看到一个包含我们素材的讲师视图就在这里。

[原文] [Speaker A]: all right so pretty cool uh so you can add your own images can be a logo as well you should also be able to add your own videos actually so that you can actually play uh videos inside this video that should also work um let's actually try like a 3D effect on the image as well can you give the image a 3D effect there's a very subtle effect but it's too subtle

[译文] [Speaker A]: 好的，这太酷了。所以你可以添加你自己的图片，也可以是 Logo，实际上你应该也能添加你自己的视频，这样你就可以在这个视频里播放……视频，这应该也是可行的。嗯，我们实际上来试试给图片加个 3D 效果吧。你能给这张图片加上 3D 效果吗？有一个非常微妙的效果，但太微妙了。

[原文] [Speaker A]: all right so now uh yeah so now we can see there's a very well interesting effect here as that scene starts so really interesting to see how easy it is to create something like this this would have taken a lot of like like time uh frames or whatever that's called in these editing programs and now you just prompt for it

[译文] [Speaker A]: 好的，现在，呃，是的，现在我们可以看到在这个场景开始时有一个非常……有趣的 3D 效果。真的很有趣，看到创建这种效果是多么容易。这在那些剪辑软件里本来要花很多……比如时间、关键帧（time frames）或者是叫什么来着的东西，而现在你只需要通过提示词就能搞定。

[原文] [Speaker A]: so really now the other thing that remotion is pretty good at as well is when you have a code block or like a terminal command that you want to show in the video so let's simply prompt for those all right so it has added this as a new scene in one scene so we can see actually if I go back there yeah so it's able to render like a a code snippet uh UI as well as a terminal UI and like a fake uh browser view as well

[译文] [Speaker A]: 真的，现在 Remotion 还有一点非常擅长，就是当你有代码块或者像终端命令想要在视频中展示的时候。所以让我们简单地为此发送提示词。好的，它已经把它作为一个新场景添加进来了。实际上如果我回退一点，是的，它能够渲染出一个代码片段 UI，以及一个终端 UI，还有一个像伪造的浏览器视图（fake browser view）。

[原文] [Speaker A]: uh it's a bit smaller here so we could split it out but if I play the video you can see that is also animated so you can have like a a typewriter a typewriter effect so that as you can show the code being actually typed um but let's say we are satisfied with the video that we have right now so it can get pretty advanced actually

[译文] [Speaker A]: 呃，这里显示得有点小，所以我们可以把它拆分出来。但如果我播放视频，你可以看到它也是有动画的，所以你可以拥有像打字机……打字机效果，这样你就可以展示代码实际上被输入的过程。嗯，假设我们要对目前的视频感到满意了，实际上它可以变得非常高级。

这是为您整理的第 6 章内容。

章节 6：音频处理思路与 MP4 本地渲染

📝 本节摘要：

视频视觉部分完成后，作者探讨了音频处理的高级工作流。他建议利用 MCP 服务器将 ElevenLabs 等文本转语音（TTS）服务连接到智能体，先生成脚本再合成语音，最终由 Claude Code 自动添加音轨。随后，作者演示了最后一步：将 React 项目渲染（Render）为通用的 MP4 文件。对于短视频，该过程非常迅速。作者感叹，相比传统剪辑软件的繁琐操作，这种“通过 Prompt 直接获得 MP4”的体验极具颠覆性，并展望了未来几个月该技术的潜力。

[原文] [Speaker A]: and the next step would be to actually add audio to the video so what you could do is um if you have like a text to speech uh service like 11 Labs for example you can connect that as an MCP server to your a to your agent as well and then uh maybe first you want to generate a script right because first it needs uh text and then you can pass the text to the audio service and it will be able to generate the audio and then with cloud code it can it can add that as an audio track to the video as well

[译文] [Speaker A]: 下一步实际上就是给视频添加音频。所以你可以做的是，嗯，如果你有像 ElevenLabs 这样的文本转语音（TTS）服务，你可以把它作为一个 MCP 服务器（Model Context Protocol server）连接到你的智能体上。然后，也许首先你要生成一个脚本，对吧，因为它首先需要文本，然后你可以把文本传给音频服务，它就能生成音频，接着利用 Claude Code，它也可以把那个音频作为音轨添加到视频中。

[原文] [Speaker A]: you could even do something similar for captions or like uh subtitles but let's say that we like the video as it currently is and we want to get an MP4 file so we can upload it to maybe some social media platform or some hosting platform so we can then display it on our website

[译文] [Speaker A]: 你甚至可以对字幕或类似的东西做同样的操作。但假设我们喜欢视频目前的样子，并且我们想得到一个 MP4 文件，这样我们要么可以把它上传到某个社交媒体平台，要么上传到某个托管平台，以便我们随后可以在我们的网站上展示它。

[原文] [Speaker A]: so you have to render the video as it's called you know for a short video like this it should be pretty fast and not so resource intensive but for a bigger video or I guess if you have a lot of assets it may actually take quite a lot of time and resources as well but I'm just going to stick to the default options here so let's just click on render video,

[译文] [Speaker A]: 所以你必须“渲染”视频，正如它的术语所说。你知道，对于像这样短的视频，它应该相当快，而且不会占用太多资源；但对于更大的视频，或者我想如果你有很多素材的话，它实际上可能会消耗相当多的时间和资源。但我这里就直接使用默认选项了，所以让我们直接点击“渲染视频”。

[原文] [Speaker A]: so now you can see it's starting a job and so it should be pretty fast so it should it's just a few uh seconds here okay so now we are finished here if I open this up on my computer we have an MP4 file if I double click it to open it up with the video right here huh this is pretty cool to see

[译文] [Speaker A]: 好的，现在你可以看到它开始了一个任务，应该会很快，也就是几秒钟的事。好的，现在我们这里完成了。如果在我的电脑上打开这个，我们就有了一个 MP4 文件。如果我双击打开它，视频就在这里，哈，这看着真酷。

[原文] [Speaker A]: so before I would have to go into some editing program and do a lot of painstaking work and now I can just prompt it and get an MP4 file I think it's just amazing and uh looks pretty good as well of course I didn't spend that much time on it but if I would spend maybe a half an hour on it a little bit more and find tweak things a little bit here and there um it would be generally useful and you can just imagine how good this will be in a few months from now

[译文] [Speaker A]: 以前我必须进入某个剪辑软件，做大量辛苦繁琐的工作，而现在我只需通过提示词就能得到一个 MP4 文件，我觉得这简直太神奇了，而且看起来也很不错。当然我没在上面花太多时间，但如果我花个半小时或者再多一点时间，在这里那里微调一下，它就会变得非常实用，你完全可以想象几个月后这东西会有多好。

这是为您整理的第 7 章内容。

章节 7：进阶部署：为什么选择 VPS 以及环境初始化

📝 本节摘要：

本章探讨了将工作流迁移至云端 VPS（虚拟专用服务器） 的优势，包括释放本地电脑资源、利用云端更强大的 CPU/RAM 加速渲染，以及便于团队通过 IP 地址协作预览。作者演示了如何在 Hostinger 上选择预装 Claude Code 模板的 VPS 方案，免去了繁琐的环境配置。随后，详细介绍了通过 SSH 或浏览器终端连接服务器、登录 Claude 账号以及创建项目文件夹的初始化步骤。

[原文] [Speaker A]: so far we've looked at how we can do this on our own local computer but there are actually many downside of doing that instead you may want to use it on a VPS and I'm going to use Hoster in this video yes they're sponsoring the video but I've had a great time using them and I like them because they already have a clot code VPS template out of the box so we don't really have to do any setup with clot code to get this working and it also shows that they are on the cutting edge they know they know what we're doing we're not doing something strange on the VPS so uh that's what I will use in the video

[译文] [Speaker A]: 到目前为止，我们已经看了如何在自己的本地电脑上做这些，但这样做其实有很多缺点，取而代之的是，你可能想在 VPS 上使用它。在这个视频中我将使用 Hostinger，是的，他们赞助了这个视频，但我使用他们的体验很棒。我喜欢他们是因为他们已经有了开箱即用的 Claude Code VPS 模板，所以我们真的不需要对 Claude Code 做任何设置就能让它工作。这也表明他们走在前沿，他们知道我们在做什么，我们并没有在 VPS 上做些奇怪的事情，所以这也是我在视频中要使用的。

[原文] [Speaker A]: now why would you want to do it on a VPS well it would free up your own local computer's uh resources right so if you close your laptop for example or your computer stops working it doesn't interfere with the video rendering for example but also the FPS that you can get may be more powerful may more CPU or RAM than your own computer so so the workflow may be smoother or the rendering of the video may be faster

[译文] [Speaker A]: 那么为什么要在这个 VPS 上做呢？好吧，这会释放你自己本地电脑的资源，对吧。所以如果你合上笔记本电脑，或者你的电脑停止工作了，它不会干扰视频渲染。而且你能获得的 VPS 实例（注：原文口误为 FPS）可能更强大，可能比你自己的电脑拥有更多的 CPU 或内存，所以工作流可能会更顺畅，或者视频渲染会更快。

[原文] [Speaker A]: or maybe you want to use the VPS as the place where you render the videos like a render farm and especially if you're doing it as part of an app and your users are creating these videos and you're rendering it for them you want to run the rendering uh in parallel perhaps it makes more sense to do that on a VPS also what if other people should be able to access it as well it's much easier to do that through a VPS than if other people have to connect to your own computer

[译文] [Speaker A]: 或者也许你想把 VPS 用作渲染视频的地方，就像一个渲染农场（render farm）。特别是如果你是作为一个应用程序的一部分来做这件事，你的用户正在创建这些视频，而你正在为他们渲染，你可能希望并行运行渲染任务，那么在 VPS 上做这件事也许更有意义。另外，如果其他人也应该能够访问它呢？通过 VPS 做到这一点要比其他人必须连接到你自己的电脑容易得多。

[原文] [Speaker A]: so let's quickly spin up a VPS so if you check out the link in description you will see a link for Hostinger's VPS hosting so these are the options and the pricing as of recording uh I will go with the KVM2 plan

[译文] [Speaker A]: 所以让我们快速启动一个 VPS。如果你查看描述中的链接，你会看到 Hostinger VPS 托管的链接。这些是录制时的选项和价格，我会选择 KVM2 套餐。

[原文] [Speaker A]: but what is really nice is they have all these templates out of the box i have used them in some other videos as well like Koolifi to host apps for example uh but in this case we are interested in cloud code we will confirm and now we can check out and go through the onboarding all right after payment we can go through the onboarding process here you can pick a location

[译文] [Speaker A]: 但真正好的一点是，他们有所有这些开箱即用的模板。我在其他一些视频中也用过它们，比如用 Coolify 来托管应用。但在这种情况下，我们对 Claude Code 感兴趣，我们将确认，现在我们可以结账并完成引导流程。好的，付款后，我们可以在这里完成引导流程，你可以选择一个（服务器）位置。

[原文] [Speaker A]: all right so now it is finished we can go to manage VPS and we can see cloud code is part of this right and by the way here we have all the VPS settings and you can also just use your own terminal app on your computer uh to SSH into that right you need to use the password that you use to set up the VPS a few minutes ago

[译文] [Speaker A]: 好的，现在完成了，我们可以去管理 VPS，我们可以看到 Claude Code 已经包含在其中了，对吧。顺便说一下，这里有所有的 VPS 设置。你也可以直接使用你电脑上自己的终端应用通过 SSH 连接进去，对吧，你需要使用你几分钟前设置 VPS 时用的密码。

[原文] [Speaker A]: but they actually also have a built-in browser terminal so you can also you can also just go here and here we are now in that terminal if I try cloth what should we see yeah here we see cloth code welcome to cloud code particular version um I will just press enter here

[译文] [Speaker A]: 但他们实际上也有一个内置的浏览器终端，所以你也可以直接去这里，现在我们就在那个终端里了。如果我尝试输入 claude，我们会看到什么？是的，这里我们看到了 Claude Code，欢迎使用 Claude Code 特定版本，我就在这里按回车键。

[原文] [Speaker A]: now here we can log in so I will log in here with uh my existing subscription but if you have a console account and you prefer that or a third party that's also possible but let's go with the subscription here going to open a new browser tab and actually we should copy it ourselves and just go there and here you can log in with your account

[译文] [Speaker A]: 现在我们可以在这里登录了，所以我将使用我现有的订阅在这里登录。但如果你有一个控制台账号并且你更喜欢那样，或者第三方账号，那也是可以的。但我们要用订阅方式，打开一个新的浏览器标签页，实际上我们应该自己复制它（链接）然后去那里，在这里你可以用你的账号登录。

[原文] [Speaker A]: all right so here we can authorize and login successful press enter to continue um some security notes right so you want to be careful with this but I do like the fact that it's running in a VPS not on my own computer okay so we will uh yes proceed here and I can say hi what is oneplus 1 we should see a response yeah so now we are good to go with cloud code here

[译文] [Speaker A]: 好的，这里我们可以授权，登录成功，按回车键继续。嗯，有一些安全提示，对吧，所以你要小心这一点，但我确实喜欢它在 VPS 上运行而不是在我自己的电脑上这一点。好的，我们将……是的，继续，我可以说“嗨，1加1等于几”，我们应该能看到回复。是的，现在我们在 Claude Code 这边已经准备就绪了。

[原文] [Speaker A]: now if I do slashkills we do not see any skills here now actually we are running uh we we have launched cloth in the home directory so we may want to create a project directory let's actually do that i will actually exit cloth here i will clear this out we will simply create a new directory we will say awesome project okay so now we can go into awesome project and then we can run cloth from there proceed here yes

[译文] [Speaker A]: 现在如果我输入 /skills，我们在这里看不到任何 Skill。实际上我们正在运行……我们在主目录（home directory）启动了 Claude，所以我们可能想要创建一个项目目录。让我们实际操作一下，我会在这里退出 Claude，清空屏幕，我们简单地创建一个新目录，就叫 awesome project。好的，现在我们可以进入 awesome project，然后从那里运行 Claude，继续，是的。

这是为您整理的第 8 章内容（即最终章）。

章节 8：云端工作流：在 VPS 上运行 Remotion 与最终总结

📝 本节摘要：

在本章中，作者完整演示了在 VPS 上复现本地工作流的全过程。他首先在云端创建了新的 Remotion 项目，并确认了 Skill（技能包） 的正确安装。随后，他生成了一个新的推广视频，并展示了云端部署的核心优势：通过 VPS 的 IP 地址加端口号（:3000），用户可以直接在浏览器中远程预览视频 Studio，极大便利了团队协作。为了验证智能体是否真正调用了 Remotion 文档，作者再次要求添加 3D 特效，并观察到了成功的代码调用。最后，作者总结了使用 VPS 运行 Claude Code 的安全性与资源优势，并以推荐语结束了本次教程。

[原文] [Speaker A]: so now let's see how we can uh get something like what we had before with reotion so here we can create a new project again a remotion app and again we could put this side by side with an existing app uh let's actually create the remote app ourselves here so it's not with cloud code just this command i will put it in the current directory so it cannot run mpm uh commands like that yet so I have to install that okay

[译文] [Speaker A]: 那么现在让我们看看如何获得像我们要之前用 Remotion 得到的那种结果。所以在这里我们可以再次创建一个新项目，一个 Remotion 应用，同样我们可以把它和现有的应用放在一起。呃，让我们实际上在这里自己创建这个 Remotion 应用，不是通过 Claude Code，而是直接用这个命令，我会把它放在当前目录下。它目前还不能运行 npm 相关的命令，所以我必须先安装那个（npm），好的。

[原文] [Speaker A]: all right so now let's try that again we will go with the blank template again till CSS add agent skills so my assumption is that if we do yes here we do not have to separately install the agent skill so let's actually do do that this time okay so looks like it went well if we check it out uh actually I do not see the skills but if we run clot do/skills yeah so it actually does pick up on that so it properly installed the skill as well when setting up a remote app like that so that's kind of nice

[译文] [Speaker A]: 好的，现在让我们再试一次。我们将再次选择空白模板，使用 Tailwind CSS，添加 Agent Skills。所以我的假设是，如果我们在这里选“是”，就不需要单独安装 Agent Skill 了，所以这次我们就这么做吧。好的，看起来进行得很顺利。如果我们检查一下，呃，实际上我没看到那些 skills（文件夹），但如果我们运行 Claude 并输入 /skills，是的，它实际上确实识别到了。所以在像这样设置 Remotion 应用时，它也正确地安装了 Skill，这挺不错的。

[原文] [Speaker A]: so let's actually ask it to generate a simple video i will just take the homepage this time as a reference can you use Remotion to create a short video promoting bite.com and run the app so I can preview it so let's see what it can do all right so it wants to uh make a fetch call that's allowed so it receives it here all right now I'll create a promotional video for bite grant with multi-seene composition

[译文] [Speaker A]: 所以让我们实际要求它生成一个简单的视频，这次我就以主页作为参考。你能用 Remotion 制作一个推广 bite.com（注：应为 bitegrad.com）的短视频并运行该应用，以便我可以预览它吗？让我们看看它能做什么。好的，它想要发起一个抓取请求（fetch call），这是允许的，所以它在这里接收到了数据。好的，现在我将为 Bite Grad 创建一个包含多场景组合的推广视频。

[原文] [Speaker A]: all right so it's starting to make edits here now I hope that it actually found the agent scale i did read somewhere that you may want to be very explicit about it so when you have a prompt like create a video you may need to say something like uh use uh the remotion skill technically it should still work without the skill as well cuz it's just code and it can change the it can edit the file itself but uh ideally it can use the skill so it's much better

[译文] [Speaker A]: 好的，它现在开始在这里进行编辑了。我希望它实际上找到了 Agent Skill，我确实在某处读到过，你可能需要对此非常明确。所以当你有一个像“制作视频”这样的提示词时，你可能需要说类似“使用 Remotion Skill”之类的话。从技术上讲，即使没有 Skill 它应该也能工作，因为它只是代码，它可以更改……它可以自己编辑文件，但理想情况下它能利用 Skill，那样效果会好得多。

[原文] [Speaker A]: all right so it says it's finished now and it has and it's running the remote studio on localhost port 3000 but we are running this in the hosting or VPS so the way to find it is to take the IP of the VPS so you can find it here in the dashboard and then it's port 3000 so you do have to add that you may get a warning about that there is no HTTPS but uh if you continue you should see the studio here not running on your own computer but actually running on a VPS

[译文] [Speaker A]: 好的，它说现在完成了，并且它正在本地主机（localhost）端口 3000 上运行 Remotion Studio。但我们要是在 Hostinger 的 VPS 上运行这个，所以找到它的方法是获取 VPS 的 IP 地址，你可以在仪表盘这里找到它，然后端口是 3000，所以你必须加上它。你可能会收到一个关于没有 HTTPS 的警告，但如果你继续访问，你应该会在这里看到 Studio，它不是在你自己的电脑上运行，而是实际运行在 VPS 上。

[原文] [Speaker A]: so that's really nice because now if you want to share it with other people they can just type in the address and they should be able to see the video here right so you can see it's still using some Right so it has all these animations and actually really nice quick video to get started still has that purple color i don't know why it's getting the color but uh yeah really nice i I like how it's uh I like how it's animating things and overall how good it is for the first version of course I would have to spend maybe half an hour to get it uh right

[译文] [Speaker A]: 这真的很好，因为现在如果你想和别人分享，他们只需输入这个地址，应该就能在这里看到视频了，对吧。所以你可以看到它仍然在使用一些……对吧，所以它有所有这些动画，实际上作为一个快速入门的视频真的很不错。还是有那种紫色，我不知道它为什么会选这个颜色，但是，呃，是的，真的很不错。我喜欢它的……我喜欢它处理动画的方式，总的来说作为初版它的质量很好。当然，我可能得花半个小时来把它调整好。

[原文] [Speaker A]: the nice thing is um it does not run on my own computer anymore you know if you're on a lap if you're on a phone or you have an idea for a video or if you want to outsource the rendering of videos you