Data display
Animated Counter — editable Remotion component
A clean transparent metric counter with responsive typography sized from its component box.
Component details
- Version
- 0.3.0
- License
- MIT
- Duration
- 4.0 seconds
- Dimensions
- 1080 × 1080
Prerequisite: Create a Remotion project
Agent Motion installs components into an existing Remotion project. If you are starting fresh, create the standard project structure first:
npx @agent-motion/cli create remotion my-remotion-video
Add editable source
Run this command from the root of your Remotion project. No separate Agent Motion CLI installation is required.
npx @agent-motion/cli add animated-counter@0.3.0
Agent guidance
- Use for one primary KPI or milestone.
- Prefer a short label of four words or fewer.
- Set suffix to %, K, M, or + when it improves comprehension.
- When x, y, width, and height are all omitted, the eighty-percent component box and its content are centered on both axes.
- When any geometry prop is supplied, the value begins at the resolved container's top-left edge without additional vertical centering.
- Set valueSizePercent and labelSizePercent relative to the container's shorter side so typography scales when either width or height changes.
- The component background is transparent; choose valueColor, labelColor, and accent for the surrounding scene.