bellog-animations

Define reusable Framer Motion variants for Bellog UI animations.

2|Updated Feb 17, 2025

Search Tags:#animation #framer-motion #web-performance #ui-patterns #page-transitions #stagger-animations #hover-interactions

Ready to run

npx skills add https://github.com/whddltjdwhd/bellog --skill bellog-animations

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: bellog-animations
Source: https://github.com/whddltjdwhd/bellog/tree/main/.claude/skills/bellog-animations
Command: npx skills add https://github.com/whddltjdwhd/bellog --skill bellog-animations

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides a structured, reusable set of Framer Motion animation patterns and practices to standardize Bellog's UI motion.

Core Features & Use Cases

Staggered entrance patterns for lists and grids to create rhythm and readability.
Ambient "living" blob animations and decorative motion that avoids distraction.
Page transitions, hover interactions, and enter/exit animations to enhance navigation and interactivity.
Guidance on timing, easing, accessibility, and performance to maintain a consistent motion language.

Quick Start

Import the bellog-animations patterns and apply the provided variants to your Framer Motion components to start adding motion immediately.

Frequently Asked Questions about bellog-animations

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

FAQPage Schema

How do I standardize UI animations using Framer Motion variants?▼

Create staggered entrance animations in Framer Motion by using predefined variant patterns for lists and grids. These patterns establish visual rhythm and readability while maintaining consistent timing and easing across UI components.

How do I create staggered entrance animations for lists and grids in Framer Motion?▼

Create staggered entrance animations in Framer Motion by applying structured variant patterns to lists and grids. These reusable patterns establish visual rhythm and readability while maintaining consistent timing and easing across UI components.

Does Framer Motion support accessible fallbacks for users with reduced motion preferences?▼

Yes, accessible fallbacks for reduced motion are supported. The animation patterns include structured guidance ensuring that users with reduced motion preferences experience appropriate static or simplified UI states.

What is the best way to implement page transitions and hover interactions with Framer Motion?▼

The best way to implement page transitions and hover interactions is by using reusable Framer Motion variant patterns. These standardized patterns enhance navigation and interactivity while maintaining a consistent motion language across your web application.

Can I use Framer Motion to add ambient decorative animations without distracting users?▼

Yes, you can add ambient decorative animations using Framer Motion. The patterns include structured 'living' blob animations designed to provide engaging ambient motion that intentionally avoids distracting users from the core interface.

How do I maintain a consistent motion language across frontend web components?▼

Maintain a consistent motion language by applying a reusable set of Framer Motion patterns that standardize timing, easing, and accessibility. This structured approach ensures uniform animations across lists, cards, and navigation during UI development.