SuperAPI AI 工具集

react-animation

前端与建站

查看项目

更新于 10-16 09:46

技能介绍

用途:在 Remotion 视频合成中使用 ReactBits 动画组件,制作视觉精良的动态图形效果。组件按美学风格分类,建议单个视频中混用的风格不超过 2 种。

安装:npx shadcn@latest add https://reactbits.dev/r/<Component>-TS-CSS,或对具体组件执行 npx shadcn add https://reactbits.dev/r/<组件名>-TS-CSS。

风格分类与代表组件:优雅柔和(BlurText、Aurora、Silk、Grainient、Ribbons、ShapeBlur);现代科技(GlitchText、GradientText、Iridescence、LiquidChrome、Particles、MetaBalls、Antigravity);奢华高端(ShinyText、Silk、StarBorder);复古像素(TextType、DecryptedText、PixelTransition、LetterGlitch、Dither、FaultyTerminal);能量戏剧(Lightning、Beams、LightRays);抽象艺术(Plasma、Prism、DecryptedText);通用工具(Noise 噪点叠加)。部分背景组件提供禁用鼠标交互的属性,如 mouseReact={false}、interactive={false}、followMouse={false}。

适配要点:把时间驱动动画改为基于帧的 useCurrentFrame() 与 useVideoConfig(),配合 interpolate、Easing;使用种子随机保证确定性渲染;WebGL/OGL 组件通过 uniforms.iTime.value = frame / fps 传递时间。

风格一致性建议:可混搭优雅+奢华、现代+复古,噪点叠加可用于任意场景;避免优雅+复古、奢华+故障混用,避免同时使用超过 2 个背景效果。

组件清单:文本 6 个、背景 18 个、效果 10 个、工具 1 个。已移除若干低美学价值、风格重叠或过时组件。

限制:资料未提供收费、价格、平台支持范围等信息,暂未提供。