openreachtech/hora-skills-ort-furo/hof-animation
Claude Code and agent skill by openreachtech/hora-skills-ort-furo
- community
Checking that the SKILL.md file is still in the repository.
UI animation conventions for a Furo/Nuxt app — deciding whether and why an element animates, picking easing from the --transition-timing-* tokens, and the entry/popover/tooltip/blur techniques that keep motion feeling responsive. Use when adding transitions, animating component entry/exit, or polishing popovers, tooltips, and state changes.
Install
npx vskill@latest install openreachtech/hora-skills-ort-furo/hof-animationSKILL.md
UI Animation
Motion in this app exists to serve the interface, never to decorate it. Before adding a transition, decide whether the element should animate at all and why; then pick the technique that fits. Every animation is built from design tokens and .unit-* scoped styles — the same rules as [[hof-css]] apply, and animate only transform/opacity so the compositor does the work.
Priorities: responsiveness, clear purpose, GPU-friendly properties, motion that goes unnoticed because it feels right.
Deciding
| Topic | Description | Reference | |||
|---|---|---|---|---|---|
| Purpose | Every animation must answer "why does this animate?" — the valid purposes, and when to skip motion entirely | purpose | |||
| Easing | Choosing between the `--transition-timing-ease-in | out | in-out` tokens by whether the element enters, exits, moves, or changes color | easing |
Techniques
| Topic | Description | Reference | |
|---|---|---|---|
| Entry scale | Never animate from scale(0) — start from scale(0.95) with opacity so entrances don't appear from nothing | entry-scale | |
| Popover origin | Make popovers scale from their trigger with transform-origin, not from center (modals stay centered) | popover-origin | |
| Tooltip instancing | Delay the first tooltip, then open adjacent tooltips instantly with no animation | tooltip-instancing | |
| Blur masking | Add a subtle filter: blur() to mask an imperfect crossfade between two states | blur-masking |
Security
- Security scanPassed, 95 of 100Pattern checks on the skill's files.
- Model reviewPassed
Quality evaluation
- Task evaluationNot runNo evaluation yet. Run one in Skill Studio.
Source
- SKILL.md in the repositoryCheckingkit/skills/hof-animation/SKILL.md
Popularity
- 7-day trend score
- 5
Not refreshed yet.
Works with
Any agent vskill installs to: 56 targets in all. These 39 have a page on this site.
- Claude Code
- Cursor
- GitHub Copilot
- Windsurf
- Codex
- Gemini CLI
- Cline
- Amp
- Roo Code
- Goose
- Continue
- Kilo Code
- Junie
- Trae
- OpenHands
- Qwen Code
- AI Agent
- Tabnine Chat
- Sourcegraph Cody
- Amazon Q
- Firebase Genkit
- Sweep
- Devin
- Phind
- Mentat
- Claude Desktop
- Aider
- GPT Pilot
- Plandex
- bolt.new
- v0
- Replit Agent
- Anse
- TypingMind
- BetterChatGPT
- LibreChat
- Warp AI
- Pieces
- Fig AI
Embed badge
[](https://verified-skill.com/skills/openreachtech/hora-skills-ort-furo/hof-animation)