mcpField
C
cards-containers

cards-containers

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

About cards-containers

A skill for applying Disney’s 12 animation principles to cards and containers in interfaces. It covers interaction states, layered motion, timing, and CSS properties for creating dimensional transitions.

Key features

  1. 01Define resting, hover, selected, and expanded states
  2. 02Use anticipation and easing in transitions
  3. 03Stagger content movement behind cards
  4. 04Animate reorder paths with arcs
  5. 05Apply depth with shadows and layering

Use cases

  1. 01Designing card hover and selection motion
  2. 02Animating card expansion to detail views
  3. 03Creating drag-and-drop reorder transitions

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/dylantarre/animation-principles --skill cards-containers

After installing, type/cards-containersin Claude Code to confirm it loaded.

Details

From the project README

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

Comments

Markdown supported