Progress Ring Counter
Progress Ring Counter is a mobile app Remotion shot (with a public demo.tsx). Watch the video preview, read the recipe notes, and copy the agent brief to implement it from tuned TSX.
- Category
- Mobile App
- Duration
- ~5.6s (168f @ 30fps, including ≥30f of stillness after settling)
- Energy
- Medium-low (the arc's steady growth is a low-energy peak; the completion checkmark gives one small pulse)
- Styles
- 1
Recipe notes
A circular progress ring grows from 0 to full (arc + ring-head dot advancing), the center percentage counter rolls in sync 0→100%, and when done a checkmark springs out with a subtle ring pulse, while stat cards at the bottom stagger in
When to use it
App promo showing progress data for health/goals/balance/learning; emphasizes the "progress ring + counter + completion" feedback loop
Intent
Shoot "goal completion" as a readable progress loop: the ring grows from 0, the ring-head dot advances along the arc, the center percentage rolls in sync, and at 100% a checkmark pops out with a slight pulse — the completion moment has a clear landing point. The core is "three lines in sync": the arc length, the percentage, and the ring-head position must all derive from the same progress value; if any one detaches, the viewer feels the data and the graphic don't match.