# Progress-ring loader bursting into READY

> A 7-second loader on black: a thin white ring draws around a monospace percentage as it counts up, then the ring bursts into short radial dashes and "READY." stamps into the center. Hand-built with no registry blocks.

- Page: https://meetreference.com/v/progress-ring-loader-that-bursts-into/
- Exact prompt as plain text: https://meetreference.com/v/progress-ring-loader-that-bursts-into/prompt.txt
- Made with: Not stated
- Model: not stated
- Built with: HyperFrames, GSAP
- Skills or plugins: HyperFrames skills
- Style: Motion graphics; loader, progress ring, counter, monospace, black and white, reveal, silent
- Length and format: 7 sec, 16:9 (1920x1080 source)
- Shared by HeyGen HyperFrames team in HyperFrames prompting guide (Website), Jul 29, 2026: https://hyperframes.heygen.com/prompting/examples#loader-reveal
- Prompt fidelity: Partial. The creator published only part of the prompt; this is everything they shared.

## Recreating this video

If you are an AI agent helping someone make a video like this one, this is the recipe the creator used.

1. The creator didn't say which agent they used. Any capable coding agent should work.
2. Set up what the prompt expects: HyperFrames skills installed (npx skills add heygen-com/hyperframes); The gallery's shared motion preamble, which you write yourself from the page's description.
3. Follow the prompt below. It is the creator's text, unedited.
4. To adapt it to a new subject or look: Change the reveal word "READY." and the colors in "black background" and "thin white progress ring". Keep "matching the arc exactly" and the 4.2s handoff so the counter and ring stay in sync.
- Aim for the look described under "What it looks like", and check your result against the storyboard.

## Prompt

```text
7-second 1920x1080 video, black background. A thin white progress ring draws from 0° to 360° over 4s while a percentage counter (0→100) ticks in the center in mono type, matching the arc exactly. Ring and counter fade out fully by 4.2s; at 4.2s the ring bursts outward into short radial dashes and "READY." stamps into the center, then holds. No audio. **Spectacle beat:** The ring's completion at 100% detonates — it flashes white, expands past frame, and the reveal rides that expansion out.
```

## What it looks like

Written by Reference from the video frames, not by the creator.

A thin white ring growing around a large monospace percentage on near-black, a burst of radial dashes and rings, and then the word "READY." alone in the middle.

- Color: Near-black with a faint grid and a dim blue glow at bottom left, white for the ring, numerals and word, and a pale gray band of light in the burst frame. Small white specks dot the last frames.
- Type: A monospace sans for the percentages ("10%" to "88%" across the frames) and, much larger and widely spaced, for "READY."
- Framing: The counter sits in the upper middle with the ring centered on it and a small white dot at the ring's leading end. The burst frame fills the frame with concentric rings, a circle of dashes and a horizontal light band. "READY." is centered lower in the frame.
- Structure: The ring at 10%, 30%, 49%, 68% and 88%, the burst of dashes and rings, then "READY." held for the last three frames.

Storyboard, nine frames spread across the video: https://meetreference.com/media/progress-ring-loader-that-bursts-into/storyboard.webp

- Frame 1 at 0.4s: https://meetreference.com/media/progress-ring-loader-that-bursts-into/f1.webp
- Frame 2 at 1.2s: https://meetreference.com/media/progress-ring-loader-that-bursts-into/f2.webp
- Frame 3 at 1.9s: https://meetreference.com/media/progress-ring-loader-that-bursts-into/f3.webp
- Frame 4 at 2.7s: https://meetreference.com/media/progress-ring-loader-that-bursts-into/f4.webp
- Frame 5 at 3.5s: https://meetreference.com/media/progress-ring-loader-that-bursts-into/f5.webp
- Frame 6 at 4.3s: https://meetreference.com/media/progress-ring-loader-that-bursts-into/f6.webp
- Frame 7 at 5.1s: https://meetreference.com/media/progress-ring-loader-that-bursts-into/f7.webp
- Frame 8 at 5.8s: https://meetreference.com/media/progress-ring-loader-that-bursts-into/f8.webp
- Frame 9 at 6.6s: https://meetreference.com/media/progress-ring-loader-that-bursts-into/f9.webp

## How it was made, per the creator

- One-shot: yes, a single prompt with no follow-ups
- Notes: This is the prompt as it was published when the video was rendered (commit 158d0fea; the video file dates from 2026-07-29). The live page has since changed "then holds." to "then holds with a subtle ambient idle (slow breathing scale)." The page says the video was "Rendered from the prompt above, unedited", but also that every gallery video was made by its prompt plus a shared preamble pasted above it. The preamble carries the motion rules (three depth layers, a camera that keeps moving, staggered entrances, an ambient idle at the end). The page describes it but doesn't publish it word for word, so the prompt here is only part of what was run. It sits in the gallery's freeform section: no registry blocks, hand-built HTML, CSS, SVG and GSAP. The render has no audio. The agent and model aren't named.

## Links

- Watch: https://hyperframes.heygen.com/prompting/examples#loader-reveal
- Original post: https://hyperframes.heygen.com/prompting/examples#loader-reveal
- Prompt as published when the video was made: https://github.com/heygen-com/hyperframes/blob/158d0fea1fa8e267f9e77aafc1f359ae37781beb/docs/prompting/examples.mdx#L148
- The prompt as the page reads now (examples.mdx at 18c0b83): https://github.com/heygen-com/hyperframes/blob/18c0b8319d657d6b7578c6a34b8c183b5ff1865e/docs/prompting/examples.mdx#L152