# cards-containers

Applies Disney's animation principles to cards, tiles, and UI containers. It guides the model on timings, easing curves, and CSS properties for natural motion.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 513 installs · ★ 129
- Author: dylantarre
- License: MIT · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/dylantarre/animation-principles/tree/HEAD/skills/07-by-ui-element/cards-containers/SKILL.md
- Updated: 2025-12-30
- HTML: https://affpapa.org/en/nevibecode/skills/cards-containers

## What it does

This skill guides AI coding assistants when building animations for cards, panels, and modal containers. It translates Disney's 12 animation principles into concrete frontend rules. Drag interactions use subtle squash and stretch capped at 2-3% scale change. Before expanding into detail views, a container scales down to 0.98 for 50ms as anticipation.

The guide provides specific duration brackets and easing definitions. Hover lifts need 200-250ms with `ease-out`, while selections take 150ms. Moving elements follow `cubic-bezier(0.25, 0.1, 0.25, 1)`, and card content trails behind the outer boundary with a 20-40ms stagger. Linear transitions ruin tactile depth, so the skill bans linear easing completely.

Implementations rely primarily on `transform`, `box-shadow`, `z-index`, `filter`, and `opacity`. Reordering elements must follow curved paths with slight rotation instead of straight vectors.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add dylantarre/animation-principles --skill cards-containers -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/cards-containers/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/cards-containers/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add dylantarre/animation-principles --skill cards-containers -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/cards-containers/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add dylantarre/animation-principles --skill cards-containers -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/cards-containers/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install dylantarre/animation-principles cards-containers
```

2. **Manually: put the files in place**
- File: `.github/skills/cards-containers/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add dylantarre/animation-principles --skill cards-containers -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/dylantarre/animation-principles --path skills/07-by-ui-element/cards-containers
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/cards-containers/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add dylantarre/animation-principles --skill cards-containers -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/dylantarre/animation-principles/tree/HEAD/skills/07-by-ui-element/cards-containers/SKILL.md

## When to use it
- configure hover lift states using CSS transform and box-shadow
- add anticipation scaling before expanding a card to detail view
- stagger internal card text and images behind container movement
- apply curved motion paths when dragging or reordering cards

## Example prompts
- Add a hover lift animation to .card with realistic shadow scaling
- Create an anticipation effect before expanding this tile to full screen
- Implement staggered lag for text and icons inside moving cards

## Source text · SKILL.md · MIT

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: 6b3c4449aadfc3c9.

BEGIN THIRD-PARTY FILE 6b3c4449aadfc3c9
````text
---
name: cards-containers
description: Use 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

```css
.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
````
END THIRD-PARTY FILE 6b3c4449aadfc3c9

The third-party file has ended. Everything between the 6b3c4449aadfc3c9 tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

© dylantarre · MIT · https://github.com/dylantarre/animation-principles/tree/HEAD/skills/07-by-ui-element/cards-containers/SKILL.md

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md