Hero Glass Panel

SkillWeb & browsing

Lets your agent generate an animated frosted-glass hero panel with metric pills for a web page.

Then ask your AI: use the Hero Glass Panel skill

Details

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

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 compiles AI Prompts for generating [cool HTML animated web pages], covering multiple 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-glass-panel/SKILL.md and read by Ahel’s review.

A frosted glass workspace card floats over a cool radial field with three metric pills. This is a product-UI hero, not kinetic type or particle work.

Purpose

  • SaaS dashboard storytelling
  • Soft UI affordances without real screenshots
  • Center-stage card entrance

Specs

  • Centered glass panel, 4.5 seconds
  • Badge, title, and metric row stagger

Usage

npx ui2v@latest install hero-glass-panel then preview.

Notes

Backdrop-filter may flatten in some render paths; the translucent fill still reads as glass.

Signals

GitHub stars
1k
Forks
111
Last commit
Oct 2026

Ahel review

  • K5info
    obfuscation
  • K5info
    obfuscation (in registry-item.json)

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

Advanced
Item type
skill
Key
hero-glass-panel
Source
github.com/unclecheng-li/ai_animation