Skip to content

CLAUDE.md

Latest commit

 

History

History
157 lines (132 loc) · 6.28 KB

CLAUDE.md

File metadata and controls

157 lines (132 loc) · 6.28 KB
Raw

Gem - Remotion Video Project

Declarative Remotion video project. Scenes are defined as data config, rendered by reusable template components.

Commands

  • pnpm dev - Launch Remotion Studio
  • pnpm build - Bundle the project
  • pnpm lint - ESLint + TypeScript check

Architecture

三层设计

数据层    sceneConfig.tsx  ← SceneConfig[] 场景配置数组（AI 生成/修改这层）
模板层    components/text/ ← WordReveal, TypewriterSequence, MotionTrailAssembly
原语层    hooks/ + utils/  ← useTyping, useStepSequence, getProgress, etc.

数据驱动场景

scenes/sceneConfig.tsx 定义了：

  • SceneType — 场景类型枚举 (word-reveal, flowing-gradient, typewriter, motion-trail, typewriter-flip)
  • SceneConfig — 场景配置结构 ({ id, type, duration, transition?, props? })
  • PROMO_SCENES — 当前视频的场景配置数组
  • renderScene() — 根据 type 分发到对应模板组件
  • computeTimeline() — 自动计算累计 from 帧数

添加新场景只需在 PROMO_SCENES 数组中插入一项。

独立场景（复杂效果）

以下场景因 3D/camera 复杂度保持为独立组件：

  • AiChatReveal — 聊天 UI + 相机运动
  • FisheyeScene — Three.js 鱼眼畸变
  • YouKnow — 文字弹跳 + 3D logo 环
  • TypewriterInput — 输入框打字机 + 相机平移
  • AnswerQuestions — 简单聊天 UI

Video-Specific Projects

Each promo video lives under src/videos/<name>/:

videos/<name>/
  index.tsx              - Composition (TransitionSeries) + duration export
  VIDEO.md               - Scene inventory, conventions, editing guide
  scenes/
    Scene1.tsx ... SceneN.tsx  - One file per scene
    shared.tsx           - Shared icons, constants, helpers
  ui/                    - Video-specific UI components (optional)

The root LingYuPromo.tsx / LingwuPromo.tsx etc. re-export from their videos/ directory.

When working on src/videos/lingyu/, read src/videos/lingyu/VIDEO.md first for scene inventory and conventions.

Project Structure

src/
  Root.tsx                    - Composition + Zod schema
  videos/
    lingyu/                   - 凌域实训平台 V2 (current)
      index.tsx               - TransitionSeries + duration
      scenes/                 - Scene1-10.tsx, shared.tsx
    lingwu/                   - 凌域 V1
    obsidian/ remotion/ vercel/
  templates/                  - Reusable template components
    middle/                   - SideBySide, Carousel, FeatureCards, TrapezoidSplice, ...
    opening/                  - BrandOpen, CinematicTitle, ...
    ending/                   - ActionCTA, SloganCTA
    CameraMotion.tsx          - Shared camera motion wrapper
  components/text/            - Text effect primitives (WordReveal, SpreadText, ...)
  hooks/                      - useTyping, useStepSequence, useCameraMotion, ...
  presets/                    - fonts, colors, springs, easings, dimensions
    TypewriterInput.tsx       - 独立场景
    AnswerQuestions.tsx       - 独立场景
  components/
    text/                     - 文字效果组件库
      WordReveal.tsx          - 逐词弹簧入场（模板）
      TypewriterSequence.tsx  - 多步骤打字机（模板）
      MotionTrailAssembly.tsx - 字母散射飞入（模板）
      FlowingGradientText.tsx - CSS 渐变流动文字
      WaveGhostText.tsx       - 正弦弹跳 + ghost 拖影
      MotionTrailLetter.tsx   - 单字母运动模糊拖尾
      GradientRevealText.tsx  - 渐变覆盖文字揭示
      Cursor.tsx              - 闪烁光标
      AnimatedTitle.tsx       - 多动画风格标题
      ... (13 total)
    backgrounds/              - GradientBackground, GridPattern, ParticleField
    diagrams/                 - AnimatedBar, Chart, Table, FlowDiagram
    layout/                   - PictureInPicture, SafeArea, SplitScreen
    media/                    - AudioTrack, FitImage, Slideshow
    overlays/                 - CallToAction, ProgressBar, Watermark
    transitions/              - TransitionPresets
    ui/                       - ChatUIFrame
  hooks/
    useTyping.ts              - 逐字符打字/删除
    useStepSequence.ts        - 多步骤打字序列
    useCameraMotion.ts        - 透视相机关键帧插值
    useWordBounce.ts          - 弹跳入场
    useWordFadeIn.ts          - 淡入入场
    useTextWidths.ts          - Canvas measureText
    useCaptions.ts            - 字幕转换
    ...
  presets/
    fonts.ts                  - FONT_FAMILIES (heading/body/mono/google/inter)
    colors.ts                 - 7 调色板 + SCENE_GRADIENTS + SCENE_COLORS
    springs.ts                - SPRING_PRESETS (default/gentle/snappy/light/heavy)
    easings.ts                - 12 缓动预设
    dimensions.ts             - 9 平台尺寸预设
  utils/
    animations.ts             - stagger, getProgress, easeOut, easeIn
    random.ts                 - createRng, seededShuffle, hashRandom
  shaders/
    fisheye.ts                - 鱼眼 GLSL

Key Patterns

场景配置

const SCENES: SceneConfig[] = [
  { id: "intro", type: "word-reveal", duration: 65,
    transition: { direction: "from-right" },
    props: { words: ["Hello", { text: "World", ghost: true }] } },
  { id: "typing", type: "typewriter", duration: 75,
    props: { steps: [{targetText: "to", action: "typing"}, ...], speed: 4 } },
];

模板组件 API

  • WordReveal — words: (string | {text, delay?, ghost?, gradient?})[], staggerFrames, fontSize, fontFamily
  • TypewriterSequence — steps: StepDef[], frame, speed, gradientWhileTyping?, doneContent?
  • MotionTrailAssembly — text, fontSize, trailColors?, scatterMinDist?, seed?

动画

  • 弹簧入场: getProgress(frame, startFrame, fps) → spring 0~1
  • 缓动: easeOut(t, 3) 或 Easing.bezier(...)
  • 逐词: WordReveal 组件
  • 打字机: useTyping hook
  • 相机: useCameraMotion hook

预设系统

  • 字体: FONT_FAMILIES.google / .inter / .heading / .body
  • 弹簧: SPRING_PRESETS.default / .gentle / .snappy
  • 颜色: SCENE_GRADIENTS.bardToGemini / SCENE_COLORS.textDark

External Dependencies

  • remotion 4.0.464
  • @remotion/transitions — TransitionSeries
  • @remotion/motion-blur — Trail effect
  • @remotion/three + three + @react-three/fiber — 3D
  • react 19.2.3