用AI编程 + Remotion Skill,实现直播间刷礼物特效?

这是骁哥，纯用AI编程，实现出来的效果🧑‍🎨

厉害吧～手把手教会你！🤓

前情提要：Remotion Skill 安装与基础技巧

为了照顾新人观众，骁哥还是前置讲下这个环节🧑‍🏫

https://github.com/remotion-dev/skills/blob/main/skills/remotion/SKILL.md

👆安装一下这个skill，只需一行指令，即可安装👇

npx skills add remotion-dev/skills

(如果不用指令，直接拷贝下文件夹也行)

安装完后，在对应的AI编程工具里确认下，看是否安装成功👇

我们可以使用Remotion Skill，来完成绿幕视频合成

以上就是我们前两期Remotion Skill的内容

一句话让AI编程，完成视频抠绿幕 —— Remotion Skill的使用技巧

AI编程可以直接生成视频了？Remotion Skill 初体验

接下来，我们进入正片！用Remotion Skill，来完成文章开头这个炫酷的，礼物特效😼

实战环节：手把手教你完成刷礼物特效

首先，我们需要从素材开始准备

先随便用哪个生图工具（豆包、即梦、banana、lovart...都行），生成一张：（蓝or绿or红）纯色底的图片❗️

比如骁哥这个图，就必须选择蓝色🔵底，为啥🧏‍♀️

因为骁哥这个小猫身上，已经有红色🔴和绿色🟢了，假如骁哥还选绿色🟢作为底色，那么后期小猫就会被误伤🐱

然后，我们再用AI视频生成工具（即梦、可灵...都行），让这个图片，动起来🧙

效果如下💁

🧏这里有一个小经验：

最好是用纯色底图片，来生成视频。而不是让AI 直接生成纯色底视频❌

因为AI往往给背景加一些特效，导致背景底色不纯，后期不好处理

然后就可以有请我们的主角，AI编程工具登场了🙆

今天的案例，除了我们文章中的remotion skill，还要使用agent-browser 这个skill

agent-broswer skill可以赋予Agent感知浏览器的能力，从而让AI实现效果自我验收和自动改良🥸（有关agent browser skill可以参考之前文章👉浏览器自动化Skill：Agent Browser究极攻略（含登录态解决方案））

我们直接把小猫的“蓝幕”视频，扔给Agent，最好再随便配一帧视频截图，让AI对“蓝幕”的参数有一个基础认知

“把这个视频蓝幕变成透明底，使得这个视频可以透明播放，技术选型上，选用WebM（VP9 + alpha）”

（WebM和HEVC是浏览器视频领域的相关技术，感兴趣的朋友可以自行了解）

好！在remotion skill的帮助下，我们很快就得到了初版视频！😀

不过这个格式的视频，本地无法直接打开，我们可以通过以下方式来进行预览👇

“随便做一个网页，试一下这个透明视频效果”

Agent很快就完成了一个网页，我们可以直接在浏览器中预览效果

嗯，效果还不错！可以看到蓝幕处理的比较干净了😃

我们继续对Agent提出要求

“现在基于这套方案，做一个直播间刷礼物的小demo”

效果如下，可以说，基本已经成型了！

但骁哥觉得，效果还可以更近一步😼

“用three.js，做一些雪花特效，增加氛围感”

“下雪特效要和小猫一起出现和消失，然后要有一些雪花在小猫图层的前面，视觉效果就像小猫在雪花中飞舞”

（three.js是一个专门做3D动画粒子特效的库，感兴趣同学可以自行了解）

做完啦！🥳

最终成品效果🤩

小结

之前想要实现这个效果，可能需要可怜的设计同学 + 研发同学，要消耗掉半条命☠️

但骁哥今天就用了两个小时😂

这就是AI啊...这就是AI时代

一定要跟上时代，持续学习！📚

哦对了，今天这个技巧，不限于刷礼物，对很多场景都适用，比如炫酷的网页开屏动画啥的🌈

那本期就这样，我是AI编程骁哥，跟上我，一起在AI时代共同进步！😼

往期Skill实践👇

一句话让AI编程，完成视频抠绿幕 —— Remotion Skill的使用技巧

浏览器自动化Skill：Agent Browser究极攻略（含登录态解决方案）

AI编程可以直接生成视频了？Remotion Skill 初体验

0基础小白建站：Supabase免费数据库手把手教学

这个SKILL，自动操作我的浏览器，扒出了我的网购记录0.0！？

自媒体取标题太耗时间？我把它做成了一个SKILL

用AI独立开发产品，域名想不出来就用这招！

为什么你用AI做的产品总是不满意？因为跳过了这个环节

小白如何使用AI编程，快速打造商用级UI

如何在Cursor、TRAE中，用Skills 3分钟制作精美PPT

给8岁宝宝的Agent Skill入门教程