Ty-HA/animation

/animation — 100 种即用动画风格

作者：Ty — BTHA System (bthasystem.io)。

解析参数

接受的格式：

• /animation glitch → 风格 glitch，使用默认文本。
• /animation glitch "我的文本" → 风格 + 要动画化的文本（通过 text 属性传递）。
• /animation glitch 16:9 或 ... web → 指定格式或目标平台。
• 单独的 /animation 或 /animation liste → 显示下面的目录，按类别分组，并请求一个风格。

第一个词是标识符（slug）。每个标识符有其对应的文件：references/<slug>.md（在该技能所在的文件夹内）。始终在编写代码前阅读该文件：其中包含技术细节、确切的值以及一个 Remotion 启动组件。

未知标识符

如果标识符不存在：不要静默猜测。推荐 3 种最接近的风格（按名称、类别或描述的效果），附上一行描述，并请求选择其中之一。例如：「vhs」→ glitch、risograph、light-leak；「3d text」→ extruded-text、liquid-chrome、kinetic-type；「matrix」→ ascii、scramble、code-typing。

默认技术栈

• 视频（默认）：Remotion（React + TypeScript），1080×1920，30 帧/秒（TikTok、Reels、Shorts）。默认时长：5 秒（150 帧），除非另有要求。
• Web：如果用户需要网站动画，将参考文件中的内容转换为 HTML/CSS/JS（CSS keyframes、requestAnimationFrame、canvas 或 SVG）。“位置是时间的函数”这一逻辑保持不变。
• 其他格式：1080×1080（方形）、1920×1080（YouTube）。在 9:16 比例下注意安全区域：左右边距约 140 像素，底部 25% 区域不要放置重要内容（TikTok 界面）。

要遵循的 Remotion 规则：

• 一切依赖于 useCurrentFrame()：帧之间不得累积状态（帧以无序和并行方式渲染）。
• 仅通过 remotion 的 random('种子') 生成随机数，绝不使用 Math.random()。
• 媒体文件使用 staticFile()、<Img>、<OffthreadVideo>、<Audio>，以确保渲染等待加载完成。
• 字体：使用 @remotion/google-fonts/<字体> 保证渲染效果。

工作流程

1. 识别标识符（或推荐 3 种相近风格）。
2. 读取 references/<slug>.md。
3. 如需澄清（仅提一个问题并汇总，仅在未知且重要时提问）：格式（默认 9:16）、时长、文本、品牌颜色、现有 Remotion 项目或新建项目。
4. 构建：
   • 现有项目：添加 src/<Style>.tsx 并在 Root.tsx 中注册为 <Composition id=... durationInFrames fps={30} width={1080} height={1920} />。
   • 新项目：npx create-video@latest（空白模板），然后同上。
   • 从参考文件中的代码片段开始，根据文本/颜色进行调整，安装参考文件中指定的依赖项。
5. 验证：在 2-3 个关键帧上运行 npx remotion still <id> --frame=<n> out.png，查看图像，进行修正。
6. 渲染：npx remotion render <id> out/<id>.mp4（添加 --crf=18 以获得更高质量，如果 3D 渲染为黑色则添加 --gl=angle）。
7. 交付：文件路径、时长以及参考文件中提供的 2-3 种变体。

一次请求多种风格（/animation glitch + synthwave）：读取所有参考文件，在单个组件中进行组合（例如，synthwave 背景 + glitch 标题）。

目录（100 种风格）

🔤 动态文字与文字效果

• kinetic-type — Kinetic Type（头条）：震撼文字与语音同步，急促缩放，逐词呈现
• split-flap — Split-Flap Display：车站翻牌：字母旋转后固定
• glitch — Glitch & VHS 怀旧：失真、扫描线、模拟噪声、色差
• hud — HUD & 科幻终端：未来主义等宽界面、快速计数器、瞄准线
• ascii — ASCII 艺术动画：由字符实时变化的图像
• scramble — Scramble / Text Reveal：随机字母，类似解密，然后显示真实单词
• stacking — Kinetic Stacking：单词疯狂堆叠
• typewriter — Typewriter：打字机效果，逐字出现，光标闪烁
• karaoke — Karaoke Captions：TikTok 字幕，当前发音的词高亮
• handwriting — Handwriting / 签名：手写描边文本（SVG 路径）
• text-path — Text on Path：文本沿曲线、圆形、螺旋线排列
• variable-font — Variable Font Morph：字母变粗、拉伸、呼吸
• highlighter — Highlighter Sweep：词语下的高亮或下划线绘制
• rotating-words — Rotating Words：在固定句子中循环变化的单词
• mask-reveal — Mask Reveal：文本通过形状或图像揭示

🎨 有机运动、流畅与抽象

• liquid-morph — Liquid Morphing：形状相互变换
• particles — Particles System：受风和重力影响的数千个点
• neon — Neon Glow / 赛博朋克：发光线条，带光晕和拖尾
• topographic — Wave & Topographic：循环的等高线或数学波浪
• aurora — Aurora & 渐变网格：类似极光的模糊渐变移动
• metaballs — Blobs & Metaballs：类似粘液的圆润形状融合
• bioluminescence — Bioluminescence：深海风格的柔和光脉动
• flow-field — Flow Field（Perlin 噪声）：数千条线条跟随流场
• ink-water — Fluid / Ink in Water：墨汁在水中扩散
• fractal-zoom — Fractal Zoom：分形无限缩放
• voronoi — Voronoi Cells：有机细胞分裂和移动
• reaction-diffusion — Reaction-Diffusion：类似斑马皮或珊瑚的活体图案
• smoke-fire — Smoke & Fire Shader：实时生成的烟雾或火焰
• grain-gradient — Grain & Noise Gradient：颗粒感渐变，现代海报风格

🧊 3D 立体、浮雕与材质

• clay-3d — Clay 3D（粘土）：橡皮泥对象，带有物理和弹跳效果
• glassmorphism — Glassmorphism：磨砂玻璃面板模糊背景
• wireframe — Isometric & Wireframe 3D：等轴测视角或线框结构
• neumorphism — Neumorphism：通过阴影在背景中塑造形状
• low-poly — Low Poly：多面体 3D，捕捉光线
• skeuomorphism — Skeuomorphism：真实的按钮、开关、皮革或金属纹理
• liquid-chrome — Abstract Chrome / 液态金属：水银或反光液态金属
• product-spin — 3D Product Spin：3D 对象自动旋转（产品展示）
• extruded-text — 3D Extruded Text：带有光照和阴影的立体文本
• card-flip — Card Flip 3D：卡片以透视方式翻转
• cube-transition — Cube / Box Transition：立方体旋转过渡
• globe — 3D Globe：旋转的地球仪，带有发光点
• galaxy — Galaxy Particles 3D：深度空间的粒子星系
• holo-foil — Holographic Foil：彩虹色全息反射，类似全息卡
• voxel — Voxel Art：类似 Minecraft 的小方块 3D

📐 艺术美学、图形与历史风格

• swiss — Swiss Design：不对称网格、大型无衬线字体、几何过渡
• risograph — Risograph & 半色调：颗粒感的复古印刷、错位图层、12 帧/秒
• paper-cutout — Paper Cut-out：带阴影的剪纸、定格动画
• neobrutalism — Neobrutalism：粗黑轮廓、硬阴影、鲜艳颜色
• bauhaus — Bauhaus：圆形、方形、三角形、原色
• memphis — Memphis Style：锯齿、五彩纸屑、棋盘格、80 年代粉彩
• synthwave — Synthwave / 蒸汽波：向夕阳延伸的无限霓虹网格
• pixel-art — Pixel Art / 8-Bit：无抗锯齿的复古游戏风格
• comic — Comic Book / 卡通渲染：漫画、黑色轮廓、波普艺术网纹
• blueprint — Blueprint：在蓝色背景上绘制的建筑师图纸
• frutiger-aero — Frutiger Aero：气泡、蓝绿色玻璃、2000 年代风格
• corporate-memphis — Corporate Memphis：四肢拉伸的扁平角色
• psychedelic — Psychedelic Retro：70 年代、波动、饱和色彩
• line-boil — Line Boil：类似动画片的颤抖线条
• y2k — Y2K / 镀铬气泡：2000 年代、铬色、星星、气泡
• manga-speed-lines — Manga Speed Lines：速度线和漫画拟声词
• watercolor — Watercolor：扩散的水彩斑点
• chalkboard — Chalkboard / 素描：粉笔或铅笔绘制的线条
• art-deco — Art Deco：20 年代金色几何线条
• duotone — Duotone：两种高对比度颜色的图像

📊 仪表盘、数据与 UI 界面

• data-story — Data Storytelling：上升的条形图、绘制的曲线
• bento — Bento Grid：移动的不对称网格
• odometer — Count-up / Odometer：滚动到最终值的计数器
• micro-interactions — Micro-interactions UI：按钮、图标变换、涟漪效果
• marquee — Infinite Scroll / 跑马灯：无限滚动的横幅
• parallax — Parallax Scrolling：不同速度的图层
• skeleton — Skeleton Loading：内容加载前的脉动形状
• bar-race — Bar Chart Race：随时间变化的条形排名
• progress-rings — Progress Rings：类似 Apple Watch 的填充圆环
• map-route — Map Route Tracing：在地图上绘制的路径（跑步轨迹！）
• timeline — Timeline：前进的时间轴
• chat — Chat / iMessage 模拟：依次出现的对话气泡
• notifications — Notification Stack：落下并堆叠的通知
• phone-scroll — Phone Mockup Scroll：手机中滚动的应用界面
• code-typing — Code Typing / IDE：在编辑器中书写的代码
• cursor-demo — Cursor Demo：在界面中点击和导航的光标
• before-after — Before / After Slider：带滑动条的前后对比

🎬 过渡与摄像机运动

• whip-pan — Whip Pan：带运动模糊的超快速摇镜头
• zoom-punch — Zoom Punch：在关键时刻的强力缩放
• camera-shake — Camera Shake：震动感
• shape-wipe — Shape Wipe：形状扫过屏幕的过渡
• iris — Iris / 圆形揭示：圆形展开或闭合
• ink-transition — Ink / Paint 过渡：墨水渍占据屏幕
• light-leak — Light Leak & 镜头光晕：胶片风格的光泄漏
• ken-burns — Ken Burns：在照片上缓慢缩放
• split-screen — Split Screen：屏幕分割展开
• speed-ramp — Speed Ramp：慢动作后加速
• page-curl — Page Curl：翻页效果
• match-cut — Match Cut / Morph Cut：两个形状之间的完美匹配

🧸 角色与趣味效果

• lip-sync — Lip-Sync Avatar：嘴巴跟随语音的化身
• puppet-rig — Puppet Rig：可动关节角色（手臂、头部、眨眼）
• confetti — Confetti / Emoji 雨：五彩纸屑或表情符号雨
• sticker-pop — Sticker Pop：贴纸弹跳出现
• squash-stretch — Squash & Stretch：卡通风格的弹性物体
• morph-icons — Morphing Icons：一个图标演变为另一个
• fireworks — Firework / 爆发：庆祝粒子的爆炸