# SW Cards Animated — AI Agent Documentation

**Module path:** `smithworks-2025/sw-modules/SW Cards Animated.module`  
**Last updated:** 2026.08.26.18.39  
**Internal name:** SW Cards Animated

Icons sit on a **curve** (desktop). Hover (or click/tap) **expands one card**. Phones always use a **stacked dock**. This is **not** the SW Cards grid/slider.

---

## 1. Overview

Use **SW Cards Animated** when the story is a **path of 1–6 steps** with one open card at a time. Chrome (Module Outer / Inner, Aurora, heading panel, Content Colors, card Effect) matches **SW Cards**. The loop is unique: path geometry, expand/bounce/reverse, stacked dock + swipe.

Use **SW Cards** for a normal grid or slider of independent cards. Use **SW Cards Blog** for blog posts. Use **SW Cards Products** for plan/bullet cards.

**Limits:** 1–6 items (extra rows are not rendered). **0 items** shows the heading panel and footer Buttons only (no path, no dock). **No video** on items. **No slider.** Heading overlap with an open card is allowed in v1.

**Default URL** on buttons/links: `https://smithworks.marketing/sw-module-documentation`.

---

## 2. Related Modules

| Module | Relationship |
|--------|--------------|
| **SW Cards** | Grid/slider of independent cards. Same Outer/Inner/Aurora chrome. Not a path. |
| **SW Cards Blog** | Blog-post cards. |
| **SW Cards Products** | Bullet + optional pricing per card. |
| **SW Pillar Section** | Image beside long copy; not a path of icons. |

---

## 3. Desktop path (fine pointer)

- **Hover** expands. **Click/tap** is the fallback. One card open at a time. **Load = all collapsed.**
- **Close** plays the same motion **in reverse**.
- Neighbors **shift along the path** just enough to stay visible (plus a little extra). End cards stay inside Module Inner with a **5px** gap from the Inner edge.
- **Leave-close ~100ms** so neighbor travel does not flicker-close. Heading panel and footer Buttons do **not** keep a card open.
- **Keyboard:** path tiles and dock icons are buttons. Enter/Space = click. **Esc closes desktop only.** Arrow keys are not wired.

### Path geometry

- Bounding box of Left / Middle / Right = **Module Inner**. Y=0 is Inner top; Y=100% is Inner bottom.
- **Left X** is locked to the **left Inner edge**. **Right X** is locked to the **right Inner edge**. Editors change **L/R Y only**.
- To inset one side, change **Module Inner left or right padding** — locked X% still means that Inner edge.
- **Middle** is **X + Y**. No runtime clamp if Middle is dragged into a fold (help text only).
- Quadratic through the three points: control `C = 2M − (L+R)/2`, path `M L Q C R`. **M is always t=0.5.** If L and R share a Y, M is the peak. Stroke is optional (off by default; custom hex when on).

### Open card

- Width comes from Style (sample ~236; never wider than Module Inner; centered if Inner is wider).
- Bottom of the card sits on the path point; the card grows **up**. Scale is anchored on the **icon** so the path tile does not jump.
- By default the open **icon stays on the path tile**. Turn on **Override Card Icon Size** to show a larger glyph in the open card (path/dock stay Resting size; desktop hides the path-tile glyph while that card is open).
- Desktop inner **hugs** copy / icon / chip (no square floor). Extra space sits above the chip.

---

## 4. Stacked (phones)

- **Always stacked at ≤767px.** Optional **Stack on MD** (tablet) is off by default.
- **First item is open** on load. There is always one open card — **Esc is a no-op.**
- **Dock** under the card. Tap a dock icon to swap. **Current dock tap is a no-op.** Swipe changes the open card; **no loop.** Swipe is off when there is only one item.
- Dock icons meet a **44×44** floor. Stacked cards share the **tallest card’s min-height** so the dock does not jump when copy length differs.
- Style → **Stacked Layout** → **Margin Top / Margin Bottom** (default **25px** each) gap the stacked card from the heading and the dock.

---

## 5. Item chrome (Chip vs Button)

Per item, footer chrome is **Off | Chip | Button** (one slot, not a button repeater).

- **Chip** = informational pill (no link) unless **Enable Chip as Link** is on — then Chip Text/paint hide and Button Text / Button Link / button chrome show.
- **Button** = one SW Button (not a repeater). Label groups: **Button Alignment**, **Buttons** (heading + module-bottom repeaters only).

**Link Entire Card** is the item linking control. There is **no** Style “Enable Card as Link.”

---

## 6. Sample / default view

| Setting | Default |
|---------|---------|
| Heading | **SW Cards Animated** |
| Module Outer padding | **0 / 25 / 0 / 25** |
| Module Inner padding | **50 / 0 / 50 / 0** |
| Module Outer background | **Custom Color** `#E8F4FC` |
| Items | **Five** sample cards (Hover, Click, Stack, Chip or Button, One to Six) |
| Resting Icon Padding | **5px** |
| Card Padding | **18px** all sides |
| Card Effect rim | **0** (full-panel glass; Resting Effect has **no rim**) |
| Resting Background | Color, custom white **55%** (disc). **None** = glyph only. |

Existing page instances keep **saved** spacing, copy, and Inner Bottom until the editor changes them or the module is re-dropped.

---

## 7. Content and Style (marketer map)

**Content**

- Enable Module, custom ID/classes
- Headings repeater + Heading Buttons + Content Area (description)
- **Cards** (1–6): media **Icon | Image | SVG** (no video); **Headings** repeater (default one `<p>` at Display **H4**); rich text; Chip/Button; Link Entire Card
- Footer Content: root **Headings** / rich text / Content Style (occurrence **0** until Add). **Footer Buttons** only in the button group
- Custom SVG paste fields (Outer/Inner Aurora, Animated, overlays, **Card Pattern — Custom SVG Code**, Resting pattern)

**Style**

- Module Settings (Outer/Inner spacing + widths + heights)
- Module Background Settings (outer_* then inner; Aurora / Animated / Effect)
- Content Colors: **Content Area Text Color** (also paints heading-repeater items on Color Auto) vs **Cards Text Color** (card body + Auto **card** headings). Cards do **not** use Content Area Settings for card heading Align — Auto on a card heading is **left**.
- Heading Panel Settings / Footer Content Settings
- **Path**, **Card** (Card Width, Resting Icon, then Card Icon, Chip, Motion, Card Padding), **Stacked Layout**

**Resting vs Card Icon:** Resting **Icon Size** and **Padding** control path and dock tiles (glyph = Size − Padding × 2). **Override Card Icon Size** (Style → Card → Card Icon, default off) sets a separate px size for the **expanded card** only — that value is the glyph itself (do not subtract Padding). Path/dock stay Resting. When override is on and a card is open on desktop, the large icon is the card media (the path-tile glyph is hidden). Stacked already shows card media. **Icon Position** is leftover Cards chrome and does **not** paint the path, dock, or expanded card.

**Card Border:** Override Image Border applies to **expanded card media** only. There is no “Zero inside corners” (no grid fuse).

**Performance:** `css_render_options.async: false` so layout-critical CSS is not late. Visual QA page: `https://smithworks.marketing/aurora-module-tester`. Clean-page performance QA is a follow-up.

---

## 8. Common Tasks

| Task | Where |
|------|--------|
| Change the arch | Style → Path (L/R **Y**, Middle **X+Y**, optional stroke) |
| Inset the path on one side | Module Inner left or right padding |
| Card width | Style → Card |
| Larger icon in the open card | Style → Card → Card Icon → Override Card Icon Size + Card Icon Size (path/dock stay Resting) |
| Grow / bounce timing | Style → Card → Motion (bounce ignored when stacked) |
| Force stacked on tablet | Style → Stacked Layout → Stack on MD |
| Chip colors | Style → Card → Chip (full-width color fields) |
| Make a chip a link | Item → Enable Chip as Link |
| Card glass | Style → Card Effect; rim **0** for full-card glass |
| Resting disc / glyph-only | Resting Background Options: Color vs None |
| Section band color | Module Outer Background Options (new instances default light blue `#E8F4FC`) |
| Footer heading | Content → Footer Content Headings (Add). Do not nest headings under Footer Buttons. |

---

## 9. Aliases (tester / WIP instances)

First official ship. Aliases exist so pages that used mid-build field paths keep data:

- Card title → `cards.heading_items.heading_text` (from `cards.title`)
- Footer headings / description / content style un-nested from `cta_buttons.*`
- Path / Chip / Motion / Resting size / Card Icon paths from earlier Style group nesting
- Card Icon Width/Height were **removed** (no alias — stored 50 would overwrite Size 64)

**Not in this module:** ITT accent class `sw-ca-heading-line`. Add that only on **ai-products-2026** if the client mockup needs the title underline.

---

## 10. Document Version

**Module:** SW Cards Animated. **Shipped:** **2026.08.26.18.39**. Override Card Icon Size (expanded glyph vs Resting path/dock); desktop open-card media visible when override is on. Prior **2026.08.26.12.17:** first official ship — path + expand + stacked; Cards chrome clone; Banshee Content Colors grouping; Documentation → `/faqs`.