Hero Progress Ring

SkillWeb & browsing

Lets your agent build an animated HTML progress ring card that fills to 100% for onboarding or sync screens.

Then ask your AI: use the Hero Progress Ring skill

Details

Instructions available. Your AI can read the instructions. Execution depends on the setup they require.

Account requirements not reviewed. Check the skill instructions before use; Ahel provides instructions and does not run this skill.

No other account needed.

Add it as a step in a pipeline you build on Ahel, or connect Ahel to Claude, ChatGPT, Cursor, Claude Code or Codex and ask your AI to use it.

About this skill

A collection of AI prompts for generating cool animated HTML web pages, covering categories such as animation effects, 3D visualization, PPT-style presentations, and UI beautification.

What this skill tells your AI

The instructions your AI receives, as published by unclecheng-li/ai_animation in skills/ui2v-motions/01_动效库/itelmn/hero-progress-ring/SKILL.md and read by Ahel’s review.

A slate SaaS card with a cyan circular meter that fills to 100%. Function: onboarding / sync / install completion.

Purpose

Setup wizards, import progress, and install complete heroes
Stroke-dashoffset ring + live percent counter
Dark product UI chrome

Specs

Circumference authored as stroke-dasharray: 1131 (r=180)
Counter and arc share the same 2.4s ease
Entry: index.html

Usage

npx hyperframes preview
ui2v motion publish . --version 1.0.0

Notes

If you change the radius, recompute circumference (2 * π * r) for dasharray/offset.

Signals

GitHub stars: 1k
Forks: 111
Last commit: Oct 2026

Ahel review

K5info
obfuscation (in hyperframes.json)
K5info
obfuscation (in meta.json)
K5info
obfuscation (in package.json)

Automated review, not a security audit. Ruleset v1+k2.

Advanced

Item type: skill
Key: hero-progress-ring
Source: github.com/unclecheng-li/ai_animation

github.com/unclecheng-li/ai_animation