Claude Code Plugins

Community-maintained marketplace

Feedback

e-commerce-retail

@dylantarre/animation-principles
0
0

Use when designing animations for shopping apps, product catalogs, checkout flows, or retail experiences

Install Skill

1Download skill
2Enable skills in Claude

Open claude.ai/settings/capabilities and find the "Skills" section

3Upload to Claude

Click "Upload skill" and select the downloaded ZIP file

Note: Please verify skill by going through its instructions before using it.

SKILL.md

name e-commerce-retail
description Use when designing animations for shopping apps, product catalogs, checkout flows, or retail experiences

E-Commerce & Retail Animation Principles

Apply Disney's 12 principles to create shopping experiences that feel premium, trustworthy, and encourage conversion.

The 12 Principles Applied

1. Squash & Stretch

  • Add to Cart: Button compresses on tap, product thumbnail squishes into cart icon
  • Quantity Badges: Numbers stretch when incrementing quickly
  • Sale Tags: Pulse with slight stretch to draw attention

2. Anticipation

  • Buy Button: Subtle lift before purchase confirmation
  • Image Zoom: Brief pause before expanding product image
  • Checkout Steps: Progress indicator hints at next section

3. Staging

  • Product Hero: Center product with dimmed background
  • Price Display: Animate price prominently, discounts secondary
  • CTA Hierarchy: Primary actions draw eye first

4. Straight Ahead & Pose to Pose

  • Browse Flow: Smooth scroll for catalog browsing (straight ahead)
  • Checkout: Defined steps with clear transitions (pose to pose)
  • Search Results: Staggered reveal for product grid

5. Follow Through & Overlapping Action

  • Product Cards: Image settles before price text
  • Cart Drawer: Items slide in, total updates after
  • Filters: Tags animate before results refresh

6. Slow In & Slow Out

  • Modal Opens: Ease-out for product quick-view
  • Image Carousel: Smooth deceleration between slides
  • Checkout Transitions: 300-400ms with ease-in-out

7. Arc

  • Add to Cart: Product thumbnail arcs toward cart icon
  • Wishlist: Heart icon arcs to saved section
  • Drag to Compare: Items follow natural curved path

8. Secondary Action

  • Purchase Success: Confetti while confirmation loads
  • Review Stars: Sparkle while rating saves
  • Discount Applied: Price crosses out while new price appears

9. Timing

  • Quick Add: 150-200ms for snappy cart additions
  • Checkout Steps: 300-400ms for confident transitions
  • Loading States: Skeleton screens for perceived speed

10. Exaggeration

  • Flash Sales: Urgent countdown with bold pulses
  • Low Stock: Warning badge with attention-grabbing shake
  • Big Discounts: Strike-through with dramatic reveal

11. Solid Drawing

  • Product Images: Maintain aspect ratios during zoom
  • 3D Views: Consistent lighting and perspective
  • Icons: Uniform weight across cart, search, menu

12. Appeal

  • Micro-Delights: Subtle bounce on successful actions
  • Brand Personality: Premium = smooth, Playful = bouncy
  • Trust Signals: Gentle animations for security badges

Industry Timing Standards

Action Duration Easing
Add to Cart 200ms ease-out
Quick View 250ms ease-in-out
Checkout Step 350ms ease-in-out
Cart Update 150ms ease-out
Image Zoom 300ms ease-out

Key Principle

Never let animation slow the path to purchase. Every motion should feel efficient and build buying confidence.