remotion-markup

关于在 Remotion 使用 React 写标记和动画的指导规范。

讲怎么用 React 在 Remotion 里写标记和驱动动画，给出实战级的编码建议。常用做法是用 useCurrentFrame() 配合 interpolate() 来驱动动画，优先用 interpolate 而不是 spring，必要时用 Easing.bezier() 或 Easing.spring() 调整节奏。适合在写 Remotion 组件或优化帧动画时参考。

This is guidance for writing Remotion React Markup.
If this is not relevant, load [Remotion Best Practices](../remotion-best-practices/SKILL.md) instead.

## General rules

Animate properties using `useCurrentFrame()` and `interpolate()`.

Use `interpolate()` over `spring()`.

Use `Easing.bezier()` to customize timing, including jumpy or overshooting motion.
Use `Easing.spring()` if you want spring animations

HTML Elements which make sense to be made interactive in the Studio should use `Interactive`: `<div>` -> `<Interactive.Div>`.  
Set a descriptive `name` prop such as `name="Hero title"` for `Interactive`, `Solid`, `Sequence`.

```tsx
import { useCurrentFrame, Easing, interpolate, Inter