Generate configurable animation components for the project. Each effect is provided as a previewable HTML template; after the AI detects the target project framework, it follows component-spec.md specifications to convert the HTML into the corresponding component—React / Vue / Svelte / native, etc. are all supported.
How It Works
The skill matches user intent to the animation templates under the templates/ directory. Each template contains a README (keywords, framework-neutral data schema, adjustable parameters) and effect.html (a complete implementation that can be opened directly in a browser for preview). The skill reads the matched template, detects the target framework, converts and outputs according to the component-spec.md specifications.
Trigger Recognition
Match user requests to the following patterns (Chinese and English supported):
| Effect | Keywords | What the user wants |
|---|---|---|
| Number Scroll | number-scroll, number scrolling, counter, counting, number increment, number animation, number counting, statistics animation, data scrolling | Numbers increment from 0 to a target value when scrolled into the viewport—data display sections, achievement statistics |
| Hover Glow | hover-glow, hover glow effect, glow effect, light sweep, card glow effect, mouse-follow glow effect, card glow, product card, product showcase card, mouse hover effect | A sweep light and radial glow effect appears on the card when the mouse hovers—product display |
| Accordion | accordion, accordion, collapsible panel, hover expand, hover expand, horizontal expand, image expand, category showcase, interactive panels | Horizontally arranged panels expand on hover to show details—category display |
| Fixed Scroll | fixed-scroll, fixed-screen scrolling, sticky scroll, fixed scrolling, fixed left scroll right, parallax scroll, corporate culture page, about us page, sticky sidebar scroll | Left side fixed while the right side scrolls with the page—corporate culture, about us pages |
| Typewriter Text | typewriter, typing effect, typewriter, typing effect, text typing, character-by-character text display, character-by-character animation, text animation, typing animation, terminal typing | Text is typed character by character and cycles through multiple lines—homepage slogans, code display |
If the user request does not match any keyword, read all templates/*/README.md files and list all available effects for the user to choose from.
Workflow
- Identify Effect — Match the user's description to a template via keywords, or show a list of options
- Read Template — Load the matched
templates/<效果>/effect.htmlandREADME.md - Detect Target Framework — Determine according to the order in
component-spec.mdSection 1 "Framework Detection"; if it cannot be determined or multiple framework features conflict within the same project, explicitly ask the user - Convert Component — Apply the
component-spec.mdspecifications to convert the HTML + README schema into a target framework component, outputting: complete component code, usage example, installation command (if there are dependencies), implementation tips - Follow-up Adjustments — Ask the user whether they need to adjust colors, animation duration, or data to fit the project style
Template loading
Read template files on demand — do not load all templates into context at once. After matching an effect, only read that effect's effect.html and README.md：
templates/<效果名>/effect.html — 可预览效果实现（纯 CSS + 原生 JS）
templates/<效果名>/README.md — 数据结构、可调参数、依赖
Component specification
When converting to a component, read and follow all specification constraints of component-spec.md (framework detection, Props-driven, TS types, self-contained styles, minimal dependencies, idiomatic writing, naming conventions, responsive + accessibility, conversion output checklist).When to read: Read once before step 4 "Convert component" in the workflow.
Available effects
Number scrolling
- Directory:
templates/number-scroll/ - Effect: Numbers increment from 0 to the target value, and the animation triggers when scrolled into the viewport. Suitable for data display sections.
- Dependencies: None
Hover glow effect
- Directory:
templates/hover-glow/ - Effect: When the card is hovered, a light sweep and radial glow effect appear, following the mouse movement. Suitable for product showcases.
- Dependencies: None
Accordion
- Directory:
templates/accordion/ - Effect: Horizontally arranged panels smoothly expand on hover to display detailed content. Suitable for category showcases.
- Dependencies: None
Fixed-screen scrolling
- Directory:
templates/fixed-scroll/ - Effect: The left side is fixed, and the right side scrolls with the page. Commonly used for corporate culture pages.
- Dependencies: gsap (including ScrollTrigger)
Text typing
- Directory:
templates/typewriter/ - Effect: Text is typed character by character and loops through multiple lines of text, with a blinking cursor. Suitable for homepage slogans and terminal-style interfaces.
- Dependencies: None
Extending new effects
When adding a new animation effect template, read and follow the 3-phase confirmation process of adding-templates.md (define → implement → integrate). At the end of each phase, you must present the output to the user and wait for confirmation; do not skip the gate and write files directly.When to read: Read only when the user requests to add a new effect that does not yet exist under templates/ .