Skip to content
FunCoding

hero-battery-charge

Star
1,505
License
MIT
Last commit
Oct 5, 2026

skills/ui2v-motions/01_动效库/itelmn/hero-battery-charge/SKILL.md

View on GitHub

Hero Battery Charge

A oversized battery fills from 8% critical red to 100% lime. Function: power / charge / capacity status.

Purpose

  • Device health, energy, and capacity heroes
  • Color thresholds at 20% and 55%
  • Zinc night chrome

Specs

  • Width and percent share one state object
  • Charge ease is power1.inOut over 2.6s
  • Entry: index.html

Usage

npx hyperframes preview
ui2v motion publish . --version 1.0.0

Notes

Keep the tip static — only the inner fill should animate.

Similar Skills

prototype

MAmattpocock/skills288k10,178 new stars in the last 7 days

angular-developer

AFaffaan-m/ECC278k4,046 new stars in the last 7 days

Official

firecrawl-build-scrape

FIfirecrawl/firecrawl191k2,010 new stars in the last 7 days

Featured

frontend-design

Set visual direction and typography for UI, avoiding templated defaults.

ANanthropics/skills181k1,119 new stars in the last 7 days

Featured

theme-factory

Apply color and font themes to slides, docs and web pages, with 10 built-in themes.

ANanthropics/skills181k1,119 new stars in the last 7 days

Featured

web-artifacts-builder

Build complex HTML artifacts with React, Tailwind CSS, state management and routing.

ANanthropics/skills181k1,119 new stars in the last 7 days