Hero Flip Clock

SkillWeb & browsing

Lets your agent build an animated flip-clock countdown page for product launches.

Then ask your AI: use the Hero Flip Clock 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

This project collects AI Prompts for generating [cool HTML animated 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-flip-clock/SKILL.md and read by Ahel’s review.

Mechanical flip-clock cards roll toward a launch timestamp. This piece is about time-to-event, not abstract glow or kinetic slogans.

Purpose

Countdown and launch-window heroes
Analog flip metaphor without image assets
Dark instrument aesthetic for product opens

Specs

Canvas 1920×1080 @ 30fps, duration 4.5s
Entry: index.html
Digits rotate in on X, then tick via short flip pulses

Usage

npx hyperframes preview
ui2v motion publish . --version 1.0.0

Notes

Keep digit contrast high so the clock still reads at homepage thumbnail size. Avoid animating letter-spacing; only transform and textContent updates are used.

Signals

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

Advanced

Item type: skill
Key: hero-flip-clock
Source: github.com/unclecheng-li/ai_animation

github.com/unclecheng-li/ai_animation