mcpField
E
e-commerce-retail

e-commerce-retail

github.com/dylantarreDesign & UI132651 installsUpdated 43w ago
Repository

About e-commerce-retail

A design skill for applying Disney’s 12 animation principles to e-commerce and retail experiences. It offers interface examples and timing guidance for shopping flows, while emphasizing motion that supports confidence without delaying purchase.

Key features

  1. 01Applies 12 principles to shopping interfaces
  2. 02Examples for products, carts, and checkout
  3. 03Covers hierarchy, feedback, and trust cues
  4. 04Provides animation timing references

Use cases

  1. 01Designing add-to-cart and cart update motion
  2. 02Animating product browsing and quick views
  3. 03Creating clear transitions through checkout

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/dylantarre/animation-principles --skill e-commerce-retail

After installing, type/e-commerce-retailin Claude Code to confirm it loaded.

Details

From the project README

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

ActionDurationEasing
Add to Cart200msease-out
Quick View250msease-in-out
Checkout Step350msease-in-out
Cart Update150msease-out
Image Zoom300msease-out

Key Principle

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

Comments

Markdown supported