react-animation by notedit/happy-skills
npx skills add https://github.com/notedit/happy-skills --skill react-animation在创建需要美学精炼视觉效果的 Remotion 视频合成时使用此技能。组件为追求卓越的动态图形而精选,并按视觉风格分类。
npx shadcn@latest add https://reactbits.dev/r/<Component>-TS-CSS
按视觉风格组织的组件。避免在一个视频中混合超过 2 种风格。
流畅、电影感、精致。最适合奢侈品牌、情感叙事。
| 组件 | 安装 | 美学效果 |
|---|---|---|
| BlurText | npx shadcn add https://reactbits.dev/r/BlurText-TS-CSS | 模糊到清晰的电影式显现 |
| 组件 | 安装 |
|---|
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
| 美学效果 |
|---|
| Aurora | npx shadcn add https://reactbits.dev/r/Aurora-TS-CSS | 流动的北极光 |
| Silk | npx shadcn add https://reactbits.dev/r/Silk-TS-CSS | 极简主义织物波浪 |
| Grainient | npx shadcn add https://reactbits.dev/r/Grainient-TS-CSS | 颗粒感艺术渐变 |
| 组件 | 安装 | 美学效果 |
|---|---|---|
| Ribbons | npx shadcn add https://reactbits.dev/r/Ribbons-TS-CSS | 流动的丝绸缎带 |
| ShapeBlur | npx shadcn add https://reactbits.dev/r/ShapeBlur-TS-CSS | 柔和的抽象几何 |
使用模式:
const ElegantScene: React.FC = () => {
const frame = useCurrentFrame();
const { fps } = useVideoConfig();
return (
<AbsoluteFill>
<Aurora time={frame / fps} colorStops={['#3A29FF', '#FF94B4', '#FF3232']} />
<BlurText text="Elegant Title" startFrame={15} />
</AbsoluteFill>
);
};
前沿、动态、未来感。最适合科技产品、初创公司、创新。
| 组件 | 安装 | 美学效果 |
|---|---|---|
| GlitchText | npx shadcn add https://reactbits.dev/r/GlitchText-TS-CSS | 数字故障特效 |
| GradientText | npx shadcn add https://reactbits.dev/r/GradientText-TS-CSS | 流动的渐变扫描 |
| 组件 | 安装 | 美学效果 | 禁用鼠标交互 |
|---|---|---|---|
| Iridescence | npx shadcn add https://reactbits.dev/r/Iridescence-TS-CSS | 彩虹油膜色 | mouseReact={false} |
| LiquidChrome | npx shadcn add https://reactbits.dev/r/LiquidChrome-TS-CSS | 液态金属表面 | interactive={false} |
| Particles | npx shadcn add https://reactbits.dev/r/Particles-TS-CSS | 浮动数据点 | moveParticlesOnHover={false} |
| 组件 | 安装 | 美学效果 |
|---|---|---|
| MetaBalls | npx shadcn add https://reactbits.dev/r/MetaBalls-TS-CSS | 有机液体融合 |
| Antigravity | npx shadcn add https://reactbits.dev/r/Antigravity-TS-CSS | 空灵粒子场 |
使用模式:
const TechScene: React.FC = () => (
<AbsoluteFill style={{ background: '#000' }}>
<Iridescence mouseReact={false} color={[0.3, 0.1, 0.8]} speed={1} />
<GlitchText speed={0.5} enableShadows enableOnHover={false}>
FUTURE IS NOW
</GlitchText>
</AbsoluteFill>
);
金属感、精致、复杂。最适合奢侈品、金融、高端服务。
| 组件 | 安装 | 美学效果 |
|---|---|---|
| ShinyText | npx shadcn add https://reactbits.dev/r/ShinyText-TS-CSS | 金属光泽扫描 |
| 组件 | 安装 | 美学效果 |
|---|---|---|
| Silk | npx shadcn add https://reactbits.dev/r/Silk-TS-CSS | 高级织物纹理 |
| 组件 | 安装 | 美学效果 |
|---|---|---|
| StarBorder | npx shadcn add https://reactbits.dev/r/StarBorder-TS-CSS | 动画渐变边框 |
使用模式:
const LuxuryScene: React.FC = () => (
<AbsoluteFill style={{ background: '#0a0a0a' }}>
<Silk speed={0.5} color="#1a1a2e" />
<StarBorder color="#gold" speed="4s">
<ShinyText text="PREMIUM" color="#c9b037" shineColor="#fff" />
</StarBorder>
</AbsoluteFill>
);
怀旧、数字、低保真。最适合游戏、复古科技、蒸汽波美学。
| 组件 | 安装 | 美学效果 |
|---|---|---|
| TextType | npx shadcn add https://reactbits.dev/r/TextType-TS-CSS | 终端打字机 |
| DecryptedText | npx shadcn add https://reactbits.dev/r/DecryptedText-TS-CSS | 数据解密效果 |
| 组件 | 安装 | 美学效果 |
|---|---|---|
| PixelTransition | npx shadcn add https://reactbits.dev/r/PixelTransition-TS-CSS | 像素网格溶解 |
| 组件 | 安装 | 美学效果 |
|---|---|---|
| LetterGlitch | npx shadcn add https://reactbits.dev/r/LetterGlitch-TS-CSS | 矩阵代码雨 |
| Dither | npx shadcn add https://reactbits.dev/r/Dither-TS-CSS | 复古抖动 |
| FaultyTerminal | npx shadcn add https://reactbits.dev/r/FaultyTerminal-TS-CSS | CRT 显示器效果 |
使用模式:
const RetroScene: React.FC = () => (
<AbsoluteFill style={{ background: '#000' }}>
<LetterGlitch glitchSpeed={100} glitchColors={['#0f0', '#00ff41']} />
<GlitchText>SYSTEM OVERRIDE</GlitchText>
</AbsoluteFill>
);
高冲击力、动态、强大。最适合动作、体育、公告。
| 组件 | 安装 | 美学效果 | 禁用鼠标交互 |
|---|---|---|---|
| Lightning | npx shadcn add https://reactbits.dev/r/Lightning-TS-CSS | 电闪雷鸣 | 无 |
| Beams | npx shadcn add https://reactbits.dev/r/Beams-TS-CSS | 体积光柱 | 无 |
| LightRays | npx shadcn add https://reactbits.dev/r/LightRays-TS-CSS | 上帝之光,戏剧性 | followMouse={false} |
使用模式:
const DramaticScene: React.FC = () => (
<AbsoluteFill>
<Lightning hue={45} intensity={0.8} speed={2} />
<BlurText text="THUNDER STRIKE" />
</AbsoluteFill>
);
实验性、艺术性、独特。最适合创意项目、音乐视频。
| 组件 | 安装 | 美学效果 |
|---|---|---|
| DecryptedText | npx shadcn add https://reactbits.dev/r/DecryptedText-TS-CSS | 神秘揭示 |
| 组件 | 安装 | 美学效果 | 禁用鼠标交互 |
|---|---|---|---|
| Plasma | npx shadcn add https://reactbits.dev/r/Plasma-TS-CSS | 有机流动色彩 | mouseInteractive={false} |
| Prism | npx shadcn add https://reactbits.dev/r/Prism-TS-CSS | 光折射 | animationType='rotate' |
增强任何场景。
| 组件 | 安装 | 用途 |
|---|---|---|
| Noise | npx shadcn add https://reactbits.dev/r/Noise-TS-CSS | 胶片颗粒纹理叠加层 |
使用模式:
const SceneWithGrain: React.FC = () => {
const frame = useCurrentFrame();
const { width, height } = useVideoConfig();
const canvasRef = useRef<HTMLCanvasElement>(null);
useEffect(() => {
const ctx = canvasRef.current?.getContext('2d');
if (!ctx || frame % 2 !== 0) return;
const imageData = ctx.createImageData(width, height);
for (let i = 0; i < imageData.data.length; i += 4) {
const seed = frame * 100000 + i / 4;
const val = Math.floor((Math.sin(seed) * 10000 % 1) * 255);
imageData.data[i] = imageData.data[i + 1] = imageData.data[i + 2] = val;
imageData.data[i + 3] = 15;
}
ctx.putImageData(imageData, 0, 0);
}, [frame]);
return (
<>
<YourScene />
<canvas ref={canvasRef} style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }} />
</>
);
};
将所有基于时间的动画替换为 useCurrentFrame():
import { useCurrentFrame, useVideoConfig, interpolate, Easing } from 'remotion';
// 之前:时间累积
// 之后:基于帧的确定性
const frame = useCurrentFrame();
const { fps } = useVideoConfig();
const progress = interpolate(frame, [0, 30], [0, 1], {
easing: Easing.out(Easing.cubic),
extrapolateLeft: 'clamp',
extrapolateRight: 'clamp',
});
确保确定性渲染:
function seededRandom(seed: number): number {
const x = Math.sin(seed) * 10000;
return x - Math.floor(x);
}
const rand = seededRandom(frame * 1000 + index);
对于 WebGL/OGL 组件:
// 时间 uniform
uniforms.iTime.value = frame / fps;
// 脚本化的鼠标路径(可选)
uniforms.iMouse.value.set(
0.5 + 0.3 * Math.sin(frame / fps),
0.5 + 0.2 * Math.cos(frame / fps * 0.7)
);
建议:
不建议:
BlurText, GlitchText, GradientText, ShinyText, DecryptedText, TextType
Aurora, Silk, Grainient, Lightning, Iridescence, LiquidChrome, Particles, Galaxy, Plasma, LetterGlitch, Beams, LightRays, Dither, FaultyTerminal, DarkVeil, PixelSnow, Balatro, Prism
MetaBalls, Ribbons, ShapeBlur, Antigravity, StarBorder, PixelTransition
Noise
移除原因:
| 项目类型 | 文本 | 背景 | 效果 | 氛围 |
|---|---|---|---|---|
| 奢侈品牌 | ShinyText | Silk | StarBorder | 高端 |
| 科技初创公司 | GradientText | Iridescence | - | 创新 |
| 创意工作室 | BlurText | Aurora | Ribbons | 艺术 |
| 游戏 | GlitchText | LetterGlitch | PixelTransition | 前卫 |
| 纪录片 | BlurText | Grainient | Noise | 电影感 |
| 活动宣传 | DecryptedText | Lightning | - | 充满活力 |
每周安装次数
78
代码仓库
GitHub 星标数
325
首次出现
Feb 12, 2026
安全审计
已安装于
opencode77
kimi-cli76
gemini-cli76
codex76
github-copilot75
amp75
json-render生成式UI框架:AI驱动、多平台JSON渲染,安全构建动态界面
588 周安装
SkyPilot 多云编排指南:跨 AWS/GCP/Azure 自动优化机器学习成本与分布式训练
215 周安装
邮件序列设计指南:自动化营销策略、模板与最佳实践 | 提升转化率
218 周安装
开发者成长分析工具 - 基于Claude Code聊天历史识别编码模式和改进领域
218 周安装
高级全栈开发技能:项目脚手架与代码质量分析工具,快速搭建Next.js/FastAPI/MERN项目
215 周安装
PyMC贝叶斯建模指南:Python概率编程与MCMC采样实践教程
220 周安装
nnsight远程可解释性工具:透明访问PyTorch模型内部,支持本地与远程大模型
70 周安装