cards-containers

dylantarre's avatarfrom dylantarre

Use when animating cards, panels, tiles, or container elements to create depth and interactivity

⭐0stars🔀0forks📁View on GitHub🕐Updated Dec 30, 2025
[Code Generation]

When & Why to Use This Skill

This Claude skill provides a professional framework for applying Disney's 12 animation principles to web UI elements such as cards, panels, and containers. It offers precise CSS implementations, including cubic-bezier timing functions, transform properties, and depth-layering techniques to create high-end, interactive, and tactile user experiences that go beyond basic transitions.

Use Cases

  • Case 1: Enhancing dashboard interactivity by implementing 'Squash & Stretch' and 'Secondary Action' on data tiles for a responsive, physical feel.
  • Case 2: Designing smooth 'expand-to-detail' transitions for content cards using 'Anticipation' and 'Staging' to guide user focus.
  • Case 3: Creating natural-feeling drag-and-drop interfaces for task boards by applying 'Arcs' and 'Follow Through' to moving elements.
  • Case 4: Improving perceived performance and premium feel in web apps through staggered loading animations and physics-based easing (Ease-In/Ease-Out).
namecards-containers
descriptionUse when animating cards, panels, tiles, or container elements to create depth and interactivity

Card & Container Animation Principles

Apply Disney's 12 principles to cards and containers for engaging, dimensional interfaces.

Principles Applied to Cards

1. Squash & Stretch

Cards can subtly compress on drag-start and stretch when released. Keep it minimal: 2-3% scale change maximum.

2. Anticipation

Before expanding a card to detail view, briefly scale down (0.98) for 50ms, then expand. Prepares user for the transformation.

3. Staging

The card being interacted with should lift above others via z-index and shadow. Dim or blur background cards to focus attention.

4. Straight Ahead & Pose to Pose

Define clear states: resting, hovered, selected, expanded. Pose-to-pose transitions between these defined keyframes.

5. Follow Through & Overlapping Action

Card content (text, images, icons) should lag slightly behind card movement. Stagger by 20-40ms for natural feel.

6. Ease In & Ease Out

Card lifts use ease-out, card settles use ease-in-out. Never linear. cubic-bezier(0.25, 0.1, 0.25, 1) for smooth lifts.

7. Arcs

When cards reorder (drag-and-drop), they should follow curved paths, not straight lines. Add slight rotation during movement.

8. Secondary Action

While card lifts (primary), shadow expands and blurs (secondary). Image inside can subtle zoom. Border can glow.

9. Timing

  • Hover lift: 200-250ms
  • Selection: 150ms
  • Expand to detail: 300-400ms
  • Reorder/shuffle: 250-350ms
  • Stagger between cards: 50-75ms

10. Exaggeration

Hover shadows can extend 2-3x normal depth. Selected cards can lift 8-12px. Keep proportional to card size.

11. Solid Drawing

Maintain consistent border-radius ratios when scaling. Shadows should always come from same light source. Preserve aspect ratios.

12. Appeal

Rounded corners feel approachable, subtle shadows add premium feel. Smooth transitions build trust. Cards should feel like physical objects.

CSS Implementation

.card {
  transition: transform 250ms ease-out,
              box-shadow 250ms ease-out;
}

.card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 12px 40px rgba(0,0,0,0.15);
}

.card-content {
  transition: transform 280ms ease-out; /* slight lag */
}

Key Properties

  • transform: translateY, scale, rotate
  • box-shadow: depth and lift
  • z-index: layering
  • filter: blur for background
  • opacity: focus states