Hero Blueprint Draw

SkillWeb & browsing

Lets your agent build an animated blueprint-style hero section for engineering and architecture web pages.

Then ask your AI: use the Hero Blueprint Draw 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 compiles AI Prompts for generating [cool HTML animated web pages], covering multiple categories including 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-blueprint-draw/SKILL.md and read by Ahel’s review.

A navy blueprint grid fills as construction lines draft across the sheet and lock a plan box. Function: engineering / architecture reveal.

Purpose

Infra, CAD-adjacent, and systems product heroes
Line-draw choreography (scaleX from origin)
Blueprint blue aesthetic

Specs

Grid background is static; lines animate in sequence
Plan box fades/scales in after the path completes
Entry: index.html

Usage

npx hyperframes preview
ui2v motion publish . --version 1.0.0

Notes

Lines use transformOrigin 0% 50% so they draw from their start points. Do not center-scale them or the draft reads as a wipe.

Signals

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

Advanced

Item type: skill
Key: hero-blueprint-draw
Source: github.com/unclecheng-li/ai_animation

github.com/unclecheng-li/ai_animation