amvcp-anim-ambient-hover

Add reduced-motion safe ambient hover and loading effects with CSS tokens and JavaScript.

Updated May 8, 2026

Search Tags:#reduced-motion #loading-states #ui-animation #css-utilities #skeleton-loading #hover-polish #ambient-decor

Ready to run

npx skills add https://github.com/Emasoft/ai-maestro-visual-communicator-plugin --skill amvcp-anim-ambient-hover

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: amvcp-anim-ambient-hover
Source: https://github.com/Emasoft/ai-maestro-visual-communicator-plugin/tree/main/skills/amvcp-anim-ambient-hover
Command: npx skills add https://github.com/Emasoft/ai-maestro-visual-communicator-plugin --skill amvcp-anim-ambient-hover

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It eliminates visually flat UI by providing reduced-motion safe ambient loops, hover polish, and loading placeholders that feel intentional without distracting from content.

Core Features & Use Cases

Ambient decorative loops: Float-y, breathe, orbit, and rotate presets for hero/cover ornaments.
Hover polish utilities: Animated underline for links and 3D tilt for feature cards.
Loading-state visuals: Pulse-ring indicators and shimmering skeleton placeholders for streamed content.

Quick Start

Use the ambient classes float, bobbing, orbit, 3D card tilt, hover lift, pulse, skeleton, or shimmer on the appropriate elements and let the provided tokens and reduced-motion behavior handle the rest.

Frequently Asked Questions about amvcp-anim-ambient-hover

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I add reduced-motion safe ambient hover animations to my UI?▼

Reduced-motion safe ambient hover animations are added using token-driven CSS classes like va-float-y, va-breathe, and va-tilt, managed by a small JS runtime that pauses loops via IntersectionObserver. This ensures decorative motion remains intentional and accessible without distracting from content.

What is the best way to implement skeleton loading placeholders for streaming content?▼

Skeleton loading placeholders for streaming content are implemented using dedicated CSS utility classes such as va-skeleton and va-pulse. These classes provide shimmering visual states that indicate asynchronous loading, ensuring users understand content is actively streaming or loading.

How do CSS utility classes handle 3D card tilt and link hover polish?▼

CSS utility classes handle 3D card tilt and link hover polish by applying predefined token-driven styles such as va-tilt for interactive cards and va-link for animated link underlines. These classes trigger smooth visual affordances on hover without requiring complex custom JavaScript.

Does this ambient animation system work without external dependencies?▼

This ambient animation system expects the amvcp-animation.js foundation contract to manage its JavaScript runtime and IntersectionObserver loop pausing. While it has no listed package dependencies, it requires this specific animation foundation to enforce reduced-motion substitutes and class-based utility behaviors.

Why does my ambient UI animation need an IntersectionObserver?▼

An IntersectionObserver is needed for ambient UI animations to pause decorative loops when elements scroll off-screen. This mechanism optimizes performance and ensures reduced-motion safe behavior by halting unnecessary rendering cycles for ornaments users cannot see.

When should I use ambient decorative loops versus loading state visuals in CSS?▼

Ambient decorative loops like va-orbit and va-rotate should be used for static hero or cover ornamentation, while loading state visuals like va-skeleton and va-pulse are applied to asynchronous content states such as streaming headers and skeletoned layouts to indicate active data fetching.