Data display
Progress Ring — editable Remotion component
A transparent circular progress indicator with constant-speed animation for percentages, scores, completion states, and SaaS metrics.
Component details
- Version
- 0.2.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 progress-ring@0.2.0
Agent guidance
- Use Progress Ring for one bounded value between zero and one hundred; use Animated Counter for unbounded totals.
- Import calculateProgressRingDuration from the component entrypoint to include both animation time and holdDurationInFrames in the scene duration.
- The component background is fully transparent, so choose textColor for contrast with the consuming scene.
- Leave x, y, width, and height unset for a centered component occupying 80% of the composition on each axis.
- All ring geometry, numbers, labels, and spacing scale from the smaller of width and height, including very small custom sizes.
- Animate or transition the whole component externally; Progress Ring only owns the constant-speed value animation.