+
+
+
+ Title
+1
+ 2
+ 3
+ 4
+ 5
+
+
+```
+
+## Selector Contract
+
+1. Role ownership is strict: `scrollSource` owns the scroll runway, `stickyStage` owns sticky pinning and clipping, `collection` (the deck) owns the fixed card-sized coordinate box, and `repeatedCard` owns the absolute overlap, the shared pivot (`transform-origin`), and the fan rotation.
+2. `stickyStage` and `collection` must be different selectors. The sticky stage is a full-viewport wrapper; the deck is a small card-sized box centered inside it. In Wix, `stickyStage` is the internal-container-root `#comp-...` and `collection` is its `[data-testid="internal-container-content"]` child.
+3. Every `repeatedCard` must share the same `transform-origin` (a point below the deck) or the cards will not fan from a common pivot.
+4. Cards are `position: absolute` and fully overlapped in the deck at rest — do not lay them out in a flex/grid row; the fan is created purely by rotation around the shared origin.
+5. Keep the fan rotation on the card roots, not on `img` descendants, and use rendered `#comp-...` ids rather than `DESKTOP--...` ids.
+
+## Role Guidance
+
+| Role | Guidance |
+| --- | --- |
+| `scrollSource` | The tall wrapper (multiples of viewport height) that drives the `viewProgress` trigger. |
+| `stickyStage` | A sticky viewport-height wrapper that centers and clips the deck while the source scrolls. |
+| `collection` | A small card-sized, `position: relative` deck that establishes the shared coordinate box for the overlapped cards. |
+| `repeatedCard` | Overlapped sibling cards that share a pivot below the deck and rotate to fan out symmetrically. |
+
+## Adaptation Notes
+
+1. Preserve the section-root outer layout; the sticky stage and centered deck are inner roles, not section-root roles.
+2. The deck should match one card's dimensions; cards are absolutely positioned to fill it, so they all stack at the same spot before rotating.
+3. Set `transform-origin` to a point below the card (e.g. `center 140%`) so rotation swings cards around a hand-of-cards pivot rather than spinning each in place. Deeper pivots produce shallower, wider arcs.
+4. Fan angles are index-relative: for `CARDS` items with middle index `MID = floor(CARDS/2)`, each card's offset is `off = index - MID`; end angle is `off * spreadAngle` and start angle is `off * smallRestAngle`. Recompute both when item count changes instead of copying demo angles.
+5. `z-index` should increase with card order so the fan layers cleanly; the demo assigns `#card-1..7` z-index `1..7`.
+6. If outer cards rotate past the visible/clipped stage, reduce the spread angle or increase pivot depth before returning the result.
+7. Reject the pattern if you cannot keep a distinct sticky stage and card-sized deck, or cannot give all cards one shared pivot.
+
+## Required Elements
+
+| Key | Role | Demo Selector | Purpose |
+| --- | --- | --- | --- |
+| `scrollSection` | `scrollSource` | `#scroll-wrapper` | The `viewProgress` source for the whole pattern; owns the tall runway. |
+| `stickyStage` | `stickyStage` | `.sticky-container` | Sticky pin + centering + clip: `position: sticky`, `100vh`, `overflow: clip`. Wix: `#comp-...` with `data-testid="internal-container-root"`, distinct from the deck. |
+| `collection` | `collection` | `.deck` | Card-sized `position: relative` box that anchors the overlapped cards. Wix must be `#
+
+
+ ![]()
+ ![]()
+ ![]()
+ ![]()
+ ![]()
+ ![]()
+ ![]()
+
+ …
…
…
…
…
…
…
` layered over (or wrapping) the section and give it the `stickyStage` styles. **Never** assign the `stickyStage` role to an element that already exists in the section — no gallery `…__content` wrapper, no `.g-item` container, no grid/flex layout div, no `#comp-…` root. A reused container drags along its own text/structure and its (or an ancestor's) `overflow`/`transform`/`filter`/`opacity` silently kills `position: sticky`.
+4. **Clone only the image into fresh empty wrappers.** For each subject, create a brand-new empty `
`, clone ONLY the `![]()
` into it, and append it to the synthesized stage. The card wrapper owns its own `aspect-ratio`/box sizing. The original bundled cells stay in flow or are hidden — they never enter the stage and never get a card key.
+5. **Synthesize the sticky caption layer (if text was extracted).** Create a NEW `
` on the stage and put each subject's text into its own `
+
+```
+
+> `.sticky-wrapper` is a freshly synthesized stage; each `.card` holds ONLY the cloned image; `.caption-layer` holds the lifted texts, stacked top-left, alternating opacity. Captions, numbers, titles, and buttons are never inside a flying card. The `.caption-layer` is omitted entirely when the images have no attached text.
+
+## Selector Contract
+
+1. Role ownership is strict: `scrollSource` owns the tall runway, `stickyStage` owns sticky pinning + clipping + perspective, `repeatedCard` owns absolute centering plus the diagonal fly-in transform, and `stickyCaption` owns a pinned top-left text slot with alternating opacity. **These roles cannot be collapsed** — in particular, `stickyStage` is not optional and cannot be replaced by the section's existing in-flow layout container.
+2. **`stickyStage` MUST be a synthesized standalone wrapper — reusing an existing container is an automatic reject.** Do not bind it to a gallery/grid/section container (`.comp-…__content`, `.g-item`, a flex/grid layout div, an internal `#comp-…` root), *even if it renders correctly in one preview*. Such wrappers, or an ancestor, frequently carry `overflow: hidden/auto`, `transform`, `filter`, or `opacity < 1` that *silently* kill `position: sticky` and freeze ViewTimeline — the stage scrolls out of view and the converged cards leave the viewport (blank frames). Always create a fresh `
`, stacked at the same top-left anchor. Bind each caption to a key so it can alternate opacity (see template). Captions are synthesized nodes, never the source text nodes left in place.
+6. **Bind keys only to synthesized wrappers.** `repeatedCard` must resolve to a card node you created; `stickyCaption` must resolve to a caption node you created. If any key resolves to a pre-existing element (a cell, figure, `.g-item`, or a deep descendant like `.g-item:nth-of-type(n) .g-image` / `… img`), that is an **automatic reject of the mapping**. Fix by cloning into fresh wrappers, or reject the section.
+
+> Structural enforcement: because the card is always a wrapper you created around only an ``, and the caption is always synthesized text, carrying text into the stack becomes impossible and deep/fragile selectors never arise. If you find yourself typing a selector that points into the section's original markup for the stage, a card, or a caption, stop — you have left the sanctioned build.
+
+## Demo HTML
+
+```html
+
+ ![]()
+ ![]()
+ ![]()
+ ![]()
+ ![]()
+
+
+
+ …
+…
+…
+…
+…
+` layered over the section.
+3. **`repeatedCard` MUST resolve to a node you synthesized in this build — binding it to any pre-existing DOM element is an automatic reject.** The card is a fresh empty wrapper into which you clone ONLY the `![]()
`. It must NEVER be a bundle/cell/`.g-item`/figure that also holds a caption, number, title, link, button, or paragraph, and it must NEVER be a deep descendant chain (`.g-item:nth-of-type(3) .g-image`, `.g-item:nth-of-type(n) img`, etc.) — those are fragile even when the node happens to be image-only. If the repeated unit bundles image + text, you extract the image out; you may not point at an inner node inside the cell.
+4. **`stickyCaption` (only when images carry text) MUST be a synthesized text node in a sticky layer — never the source text left in place.** Each caption is pinned top-left on the stage and alternates opacity in sync with its card. Captions never sit inside a card wrapper (they would ride the stack) and never stay in the original scattered grid (they would drift with the layout). If a section's text cannot be reduced to a short sticky caption — because it is a rich heading+paragraph+button block — that is a Gate REJECT, not a caption.
+5. **There is no "animate in place" option.** For a multi-column flex/grid of cells whose content includes headings, paragraphs, buttons, captions, or numbering, the ONLY allowed responses are (a) if IMAGE-PRIMARY, run the Build Procedure (synthesize a stage, image-only clones, sticky captions) — or (b) REJECT. Mapping those cells to `repeatedCard` and animating them where they sit is forbidden and disqualifying.
+6. **Deep descendant card selectors are a rejection-worthy defect, not a warning.** Brittle chains into a gallery's internal DOM are rejected because they (a) break on re-render/re-order, (b) still leave the card nested inside the caption-bearing cell so its text rides along, and (c) target an inner node that has *lost* the card's own `aspect-ratio`/box sizing, so the animated element collapses or distorts. Every card is a stable, synthesized single-node clone wrapper.
+7. Repeated cards are absolute children centered on `stickyStage` via `top/left: 50%` + a base `translate(-50%, -50%)`. **Every keyframe transform MUST re-declare that centering translate before adding the fly-in offset.** Omitting it means the cards never gather at center — the #1 motion failure and a direct symptom of skipping the sticky stage.
+8. This pattern has no `collection` grid role — cards stack directly on the sticky stage. Do not introduce or reuse a flex/grid wrapper that removes the absolute centering.
+9. Keep the fly-in transform on the card roots, not on raw `img` descendants; the `img` fills the card via `object-cover` and must not carry the animation.
+10. Use rendered `#comp-...` ids only for locating the source `![]()
`/text nodes to clone, never `DESKTOP--...` ids. Do NOT map `stickyStage`, `repeatedCard`, or `stickyCaption` to any `#comp-...` element — those roles are always synthesized.
+
+## Role Guidance
+
+| Role | Guidance |
+| --- | --- |
+| `scrollSource` | The tall section that drives the shared `viewProgress` trigger for every card and caption. This is the one role that may map to an existing section element. |
+| `stickyStage` | A **freshly synthesized** sticky viewport-sized wrapper that pins during scroll, clips the flying cards, and provides `perspective`. **Mandatory, always synthesized, never a reused gallery/grid/`…__content`/`#comp-…` container**, and it must stay pinned for the entire scroll range — not just at the start. |
+| `repeatedCard` | Absolutely centered sibling cards, each a **freshly synthesized** single-node **image-only** clone wrapper — no caption, number, title, or button, and no pre-existing/deep-descendant selector — that fly in from an alternating corner over a staggered range. Binding this role to any pre-existing DOM node is an automatic reject. |
+| `stickyCaption` | **Present only for image-primary sections whose images carry text.** A **freshly synthesized** text node in a sticky top-left layer that fades in while its image is centered and fades out as the next image arrives, so one caption reads at a time. Never a card child; never the original text left in the grid. If the text is a rich heading+paragraph+button block, do not create captions — the section is a Gate REJECT. |
+
+## Adaptation Notes
+
+1. **Run the Gate before anything else.** Image-primary → build. Text-content card (heading+paragraph+button) or no isolable image → clean REJECT with no animation. The one section type that reproduces easily (clean product images) and image galleries with short captions take the *same* build; text-content grids take *no* build.
+2. **Recognize the bundle, then split it.** The repeated unit is almost always `image + attached text`. Never animate the bundle. Clone ONLY the `![]()
` into a fresh card wrapper; lift the short caption into the sticky caption layer; hide or leave the original cell in flow. The captions/numbers must never enter the stage as card children and never get a card key.
+3. **Handle attached text as a sticky, alternating caption.** Pin the caption layer top-left on the stage. Each caption's opacity ramps 0→1 over its own card's fly-in range and 1→0 as the next card flies in (last caption stays visible to the end). This keeps the text readable and in sync while the images pile up cleanly at center. If there is no attached text, omit the caption layer entirely.
+4. **Always synthesize even when the source offers a working selector.** A deep selector like `.g-image` may render correctly today because it happens to be image-only, but it is fragile and leaves the node nested in its caption cell. Clone the image into a fresh wrapper anyway — reliability across sections comes from a uniform synthesized build.
+5. **Never reuse the gallery's own containers for the stage.** Their internal wrappers (`…__content`, item containers, `#comp-…` roots) are the single most common place sticky silently dies and the most common source of text artifacts and zero-box collapse. Overlay a fresh `
` and place the image-only clones + caption layer into it.
+6. **Ancestor safety check (required, on the synthesized stage).** After creating the stage, verify that NONE of its ancestors up to the scroll source carries `overflow: hidden`/`auto`, `transform`, `filter`, or `opacity < 1`. Any one breaks `position: sticky` and freezes ViewTimeline. If an offending ancestor exists and cannot be neutralized, hoist the stage above it (or reject).
+7. Alternate the fly-in side by index: odd cards enter from bottom-left (negative X, negative rotate), even from bottom-right (positive X, positive rotate). Preserve the small settle rotation so the final stack stays loose.
+8. **Stagger from the real card count so the LAST card settles before scroll end.** Do not hard-code the demo's 5-card offsets. Distribute the staggered windows across a usable range that ends around 90% of `cover`, and derive the step from `N`, so the final card fully arrives while the stage is still pinned (never off-screen at the last frame). See the template's `cardRange`. Captions inherit the same per-card timing.
+9. Size the runway from card count: `~90vh` per card plus intro/outro slack (demo `450vh` covers five).
+10. Off-screen distances are viewport-relative (`±80vw`, `50vh`); keep them in `vw/vh`. Reduce on wide screens if cards feel too far-flung.
+11. Cards start visible (`opacity: 1`) and rely on being off-stage + clipped by `overflow: clip`. Captions are the exception — they use explicit opacity keyframes to alternate.
+12. **Verify the convergence — motion, cleanliness, and captions, at BOTH ends AND the middle.** Scrub the full scroll range:
+ - **Start:** every card off-screen; only the first caption (if any) is beginning to appear.
+ - **Mid-scroll (critical):** the stage is STILL pinned at center and the accumulating stack is visible — frames must not go blank after the first card. A blank mid-range means the stage un-pinned (clip/transform ancestor per §6, or a reused wrapper that should never have been used).
+ - **Settle:** every card overlaps at center in a tilted stack, none in a distinct layout slot; the **last** card is fully arrived before scroll end, not still off-screen.
+ - **Clean stack (mandatory):** the stacked cards show ONLY imagery — no caption text, numbers, titles, or buttons piled in the stack or scattered at the stage bottom. Any text on the flying/stacked cards means a bundle/cell was animated or a deep node targeted — re-run the Build Procedure or reject.
+ - **Caption sync (when captions exist):** exactly one caption is legible at a time, pinned top-left, switching as each new image reaches center.
+ If any check fails, fix the offending role or reject. "Cards fly in" alone is NOT sufficient evidence.
+
+## Required Elements
+
+| Key | Role | Demo Selector | Purpose |
+| --- | --- | --- | --- |
+| `scrollSection` | `scrollSource` | `#scroll-section` | The `viewProgress` source for all card and caption effects. May map to an existing section element. |
+| `stickyStage` | `stickyStage` | `#scroll-section .sticky-wrapper` | Sticky pin + clip + perspective. Mandatory and **always a synthesized standalone wrapper** — never a reused gallery/grid/`…__content`/`#comp-…` container. Confirm no clip/transform ancestor (Adaptation §6). |
+| `card1` | `repeatedCard` | `#card-1` | Minimum repeated fly-in card — a synthesized single-node **image-only** clone wrapper (odd → from left); extend outward for `card4..cardN`. |
+| `card2` | `repeatedCard` | `#card-2` | Repeated fly-in card (even → from right). |
+| `card3` | `repeatedCard` | `#card-3` | Repeated fly-in card (odd → from left). |
+| `card4` | `repeatedCard` | `#card-4` | Repeated fly-in card (even → from right). |
+| `card5` | `repeatedCard` | `#card-5` | Repeated fly-in card (odd → from left). |
+| `caption1` | `stickyCaption` | `#caption-1` | **Only when images carry text.** Synthesized sticky top-left text, fades in/out in sync with `card1`; extend for `caption4..captionN`. Omit the whole caption row if there is no attached text. |
+| `caption2` | `stickyCaption` | `#caption-2` | Sticky caption synced with `card2`. |
+| `caption3` | `stickyCaption` | `#caption-3` | Sticky caption synced with `card3`. |
+| `caption4` | `stickyCaption` | `#caption-4` | Sticky caption synced with `card4`. |
+| `caption5` | `stickyCaption` | `#caption-5` | Sticky caption synced with `card5`. |
+
+> Repeated card and caption keys keep their trailing index (`card1`/`caption1`, …) so they compact into `card{n}`/`caption{n}` groups; extend the rows for more items, alternating card entry side by parity. **Each card key MUST resolve to a synthesized image-only clone wrapper; each caption key to a synthesized sticky text node — both created in this build.** If any key resolves to a pre-existing cell that carries text/buttons, or to a deep descendant, that is an automatic reject. If the Gate classified the section as a text-content card, produce NO elements — reject the section.
+
+## Required Styles
+
+### `scrollSource` — `#scroll-section`
+
+```css
+#scroll-section {
+ position: relative;
+ height: 450vh;
+}
+```
+
+Reason: creates enough scroll distance for all staggered fly-in ranges to play out.
+
+### `stickyStage` — `#scroll-section .sticky-wrapper`
+
+```css
+#scroll-section .sticky-wrapper {
+ position: sticky;
+ top: 0;
+ height: 100vh;
+ width: 100vw;
+ overflow: clip;
+ perspective: 1200px;
+}
+```
+
+Reason: pins the stage so cards have a single fixed anchor to converge onto, clips off-screen cards without breaking ViewTimeline (`clip`, not `hidden`), and adds depth for the tilt. Never omit it; **always create it fresh**. Sticky only holds if no ancestor between this wrapper and `#scroll-section` sets `overflow: hidden/auto`, `transform`, `filter`, or `opacity < 1` (Adaptation §5–6).
+
+### `repeatedCard` — `#scroll-section .card`
+
+```css
+#scroll-section .card {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: 90vw;
+ max-width: 400px;
+ aspect-ratio: 3 / 4;
+ border-radius: 1rem;
+ transform-style: preserve-3d;
+ will-change: transform, opacity;
+ overflow: hidden;
+}
+
+#scroll-section .card > img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+
+@media (min-width: 768px) {
+ #scroll-section .card {
+ aspect-ratio: 4 / 3;
+ }
+}
+```
+
+Reason: absolutely centers each card and establishes the base box the keyframe transforms build on; the base `translate(-50%, -50%)` depends on this. If the card is `position: static/relative` (as in-flow grid cells are), the centering translate has nothing to anchor to and the convergence fails. **The card must be a synthesized wrapper that owns its box sizing and contains ONLY the cloned image.**
+
+### `stickyCaption` — `#scroll-section .caption-layer` / `.caption`
+
+```css
+#scroll-section .caption-layer {
+ position: absolute;
+ top: 6vh;
+ left: 6vw;
+ max-width: min(90vw, 32rem);
+ pointer-events: none;
+ z-index: 2;
+}
+
+#scroll-section .caption {
+ position: absolute; /* all captions share the same top-left anchor */
+ top: 0;
+ left: 0;
+ margin: 0;
+ opacity: 0; /* alternated by the caption effect */
+ will-change: opacity;
+}
+```
+
+Reason: pins every caption to a single top-left slot above the stack (`z-index` over the cards) and defaults them hidden; the caption effect ramps opacity so exactly one reads at a time, synced to its card. Omit this block entirely for sections whose images have no attached text. Never bind these styles to the original text cells — the captions are synthesized nodes.
+
+## Suggested Controls
+
+Expose the fly-in distance and the entrance scale by default; add scroll length only when the section owns its own runway height.
+
+### `fly-distance`
+
+- **Label:** `Fly-In Distance`
+- **Group:** `Motion`
+- **Type:** `range`
+- **Default:** `80`
+- **Description:** How far off-screen (horizontally) each card starts before shuffling to center.
+- **Constraints:** `min: 40`, `max: 100`, `step: 5`, `unit: vw`
+- **Binding:** `variable` `--card-fly-distance` using template `${value}vw`
+
+### `start-scale`
+
+- **Label:** `Entrance Scale`
+- **Group:** `Motion`
+- **Type:** `range`
+- **Default:** `0.7`
+- **Description:** The scale of each card at the start of its fly-in, before it grows to full size.
+- **Constraints:** `min: 0.5`, `max: 1`, `step: 0.05`, `unit: x`
+- **Binding:** `variable` `--card-start-scale` using a direct value
+
+### `scroll-length`
+
+- **Label:** `Scroll Length`
+- **Group:** `Layout`
+- **Type:** `range`
+- **Default:** `450`
+- **Description:** Total scroll runway height; increase for more cards or slower shuffling.
+- **Constraints:** `min: 300`, `max: 700`, `step: 25`, `unit: vh`
+- **Binding:** `style` `#scroll-section` property `height` using template `${value}vh`
+
+## Interact Template
+
+```ts
+const EASING = 'ease-out';
+
+const CARD_COUNT = 5; // set from the real number of extracted images
+const RANGE_START = 5; // percent of 'cover' where the first card begins
+const RANGE_END = 90; // percent where the LAST card must be fully settled (< 100 so it lands before scroll end)
+const CARD_DURATION = 20; // percent of 'cover' each card takes to fly in
+
+// Count-aware stagger: step so the last card ENDS at RANGE_END, never off-screen at the final frame.
+// step = (RANGE_END - RANGE_START - CARD_DURATION) / (CARD_COUNT - 1) -> a small overlap between neighbours.
+const STEP =
+ CARD_COUNT > 1 ? (RANGE_END - RANGE_START - CARD_DURATION) / (CARD_COUNT - 1) : 0;
+const cardStart = (index: number) => RANGE_START + index * STEP;
+
+const cardRange = (index: number) => ({
+ rangeStart: { name: 'cover', offset: { unit: 'percentage', value: cardStart(index) } },
+ rangeEnd: { name: 'cover', offset: { unit: 'percentage', value: cardStart(index) + CARD_DURATION } },
+ easing: EASING,
+ fill: 'both' as const,
+});
+
+// Odd cards fly in from bottom-left, even from bottom-right; small settle rotation keeps the stack loose.
+// --card-fly-distance (default 80vw) and --card-start-scale (default 0.7) drive the entrance.
+// NOTE: the leading `translate(-50%, -50%)` is REQUIRED in BOTH keyframes — it re-declares the
+// absolute centering so the card converges onto the stage center.
+// GATE (run first): only IMAGE-PRIMARY sections reach this template. Text-content cards (heading +
+// paragraph + button) are a clean REJECT — do NOT emit any card/caption effects for them.
+// BUILD: `stickyStage` is a FRESHLY SYNTHESIZED wrapper (never a reused gallery/grid/#comp-… container),
+// each `card{n}` resolves to a wrapper holding ONLY a cloned ![]()
, and any attached text lives in the
+// synthesized sticky caption layer below — never inside a card.
+const flyInEffect = (key: string, index: number, settleRotate: number) => {
+ const fromLeft = index % 2 === 0; // index 0,2,4 => card1,card3,card5 => left
+ const dx = fromLeft ? 'calc(-1 * var(--card-fly-distance, 80vw))' : 'var(--card-fly-distance, 80vw)';
+ const startRotate = fromLeft ? -45 : 45;
+ return {
+ key,
+ keyframeEffect: {
+ name: `${key}-fly-in`,
+ keyframes: [
+ {
+ transform: `translate(-50%, -50%) translate(${dx}, 50vh) rotate(${startRotate}deg) scale(var(--card-start-scale, 0.7))`,
+ opacity: 1,
+ },
+ {
+ transform: `translate(-50%, -50%) translate(0, 0) rotate(${settleRotate}deg) scale(1)`,
+ opacity: 1,
+ },
+ ],
+ },
+ ...cardRange(index),
+ };
+};
+
+// Sticky caption: text lifted out of each image's bundle, pinned top-left, alternating.
+// Caption i fades in as card i arrives (its own range) and fades out as card i+1 arrives;
+// the last caption holds to scroll end. Emit these ONLY when the images carried short captions.
+const captionEffect = (key: string, index: number) => {
+ const isLast = index === CARD_COUNT - 1;
+ const start = cardStart(index);
+ const end = isLast ? 100 : cardStart(index + 1) + CARD_DURATION;
+ return {
+ key,
+ keyframeEffect: {
+ name: `${key}-caption`,
+ keyframes: isLast
+ ? [{ opacity: 0, offset: 0 }, { opacity: 1, offset: 0.35 }, { opacity: 1, offset: 1 }]
+ : [
+ { opacity: 0, offset: 0 },
+ { opacity: 1, offset: 0.3 },
+ { opacity: 1, offset: 0.7 },
+ { opacity: 0, offset: 1 },
+ ],
+ },
+ rangeStart: { name: 'cover', offset: { unit: 'percentage', value: start } },
+ rangeEnd: { name: 'cover', offset: { unit: 'percentage', value: end } },
+ easing: EASING,
+ fill: 'both' as const,
+ };
+};
+
+// Final settle tilts taper toward 0 on the last card — recompute for a different count.
+const SETTLE_ROTATIONS = [-4, 3, -2, 1, 0];
+
+const HAS_CAPTIONS = true; // false when the extracted images had no attached text
+
+const interactions = SETTLE_ROTATIONS.slice(0, CARD_COUNT).map((rotate, index) => ({
+ key: 'scrollSection',
+ trigger: 'viewProgress',
+ effects: [
+ flyInEffect(`card${index + 1}`, index, rotate),
+ ...(HAS_CAPTIONS ? [captionEffect(`caption${index + 1}`, index)] : []),
+ ],
+}));
+```
diff --git a/Ani-Mate Prompts/Gallery-and-Carousel/DiagonalShuffle.md b/Ani-Mate Prompts/Gallery-and-Carousel/DiagonalShuffle.md
new file mode 100644
index 0000000..cfe9c5a
--- /dev/null
+++ b/Ani-Mate Prompts/Gallery-and-Carousel/DiagonalShuffle.md
@@ -0,0 +1,339 @@
+# Diagonal Shuffle
+
+Cards fly in diagonally from alternating corners, rotating and scaling into a loose center stack as the section scrolls. Any text attached to the images is lifted out into a sticky caption that alternates in sync with the stack.
+
+## Summary
+
+- **ID:** `diagonal-shuffle`
+- **Target shape:** Best for 3–7 similarly sized **image-primary** subjects (photos/thumbnails, optionally with a short caption/number/label) that can be absolutely centered inside one sticky viewport stage, where each can animate independently over a staggered scroll range. **Not for text-content grids** (blog/feature/amenity cards built from heading + paragraph + button) — those are a reject (see the Gate).
+- **Description:** Several centered image cards each fly in from an alternating bottom corner (odd from bottom-left, even from bottom-right), un-rotating and scaling up to settle at a slight tilt as the section scrolls past, converging into a loose pinned stack. Any text that belonged to each image is displayed separately as a sticky caption that fades in while its image is the one at center and fades out as the next image arrives.
+- **Core motion (non-negotiable):** This is a **CONVERGENCE**. Cards must start off-screen and *gather* onto a single point at the center of a **sticky, pinned stage**. If the cards end up in their normal in-flow layout slots (a spread-out row/grid), the pattern has NOT been reproduced. Sticky pinning + absolute centering is what makes the convergence exist. **A convergence that flies cards in but then lets the stage scroll away — leaving frames mostly blank after the first card — is an equally severe failure: the pattern only counts as reproduced if the stack forms AND remains pinned at center through the full scroll range.**
+- **A "Card" in the source is a BUNDLE: image + the text/button beneath or beside it.** The most common misread of this pattern is failing to see that the image and the paragraph/number/button under it are **one repeated unit**. Recognize the whole bundle — then *never* animate the bundle. What flies is ONLY the image extracted from it; the text is handled separately (lifted to a sticky caption) or the section is rejected. Binding a card to the bundle (or to the text-bearing part of it) tilts whole text blocks and buttons into a diagonal mess with no convergence — the single most disqualifying outcome.
+- **What flies is ONE clean image node — never a bundle, cell, or caption-bearing node.** The animated card must be a single, text-free visual node (an image-only clone). If any label, caption, number, heading, or button rides along on the converging card, the pattern is NOT reproduced. This holds even when the convergence itself (sticky + centering) works.
+- **Attached text becomes a sticky, alternating caption — it does NOT ride the stack and does NOT stay in the scattered grid.** When each image has an associated short caption/label/number, lift that text into a separate sticky caption layer pinned top-left on the stage. Each caption fades in as its image reaches center and fades out as the next image flies in, so exactly one caption reads at a time. This is how the text stays legible and synced without polluting the image stack.
+- **THE ONE SANCTIONED BUILD:** There is exactly **one** way to build this pattern: **synthesize a fresh standalone sticky stage layered over the section, clone ONLY each `![]()
` into fresh empty wrappers as the cards, and (if images carry text) lift each caption into a synthesized sticky caption layer.** You do not reuse the section's grid/gallery containers as the stage, you do not bind cards to any pre-existing DOM node, and you do not "animate the existing cells in place." Those are the failure modes this pattern keeps falling into, and each is an **automatic build-time reject**. The only decision per section is: run the sanctioned build, or reject the section entirely.
+
+## The Gate (mandatory — decide BEFORE mapping anything)
+
+Run this classification on the repeated unit first. It has exactly three outcomes and there is **no fourth "animate the cells" path**.
+
+1. **Identify the repeated bundle.** For each subject, find the whole repeated unit as authored — this is almost always `image + attached text` (caption, number, or heading/paragraph/button). Treat that bundle as one Card conceptually.
+2. **Classify the bundle:**
+ - **IMAGE-PRIMARY (proceed):** the unit is dominated by a standalone `![]()
` you can cleanly isolate, and any text is a *short* caption / number / one-line label. → Run the Build Procedure (synthesize stage + clone images), and if text is present, lift it into a sticky alternating caption layer.
+ - **TEXT-CONTENT CARD (REJECT):** the repeated unit is a rich content block — heading **and** paragraph **and/or** a button/link ("Read More", "Learn More", CTA) — where the meaning lives in the text, OR there is no image cleanly separable from that text. This describes blog cards, feature cards, and amenity/service cards. → **REJECT the section. Produce a clean rejection and nothing else.** Do NOT converge the images, do NOT lift the text into captions, do NOT animate the cells. Stripping the text would destroy the content, and animating the bundle produces flying tilted text blocks and buttons — the exact forbidden result.
+3. **Reject on any doubt.** If you cannot cleanly clone an image into a standalone text-free wrapper (image inseparable from text, no isolable `![]()
`, or the unit reads as a text block), **reject.** There is no third path — animating the existing cells in place is forbidden and disqualifying.
+
+> The decision to reject is not a fallback you weigh against "just animate the cells." When the bundle is a text-content card, rejection is the **only** valid output. A fly-in on text-bearing cells is never acceptable, even if it renders without error.
+
+## Build Procedure (mandatory — for IMAGE-PRIMARY sections only)
+
+Apply these steps for every section that passed the Gate. Do not branch on "the images look clean" — always synthesize (this also fixes fragile deep selectors like `.g-image` that happen to work today but break tomorrow).
+
+1. **Extract the visual subjects.** Find the `![]()
` (or equivalent thumbnail) node for each of the 3–7 subjects. This is the only visual thing you extract from the existing DOM.
+2. **Extract the attached text (if any).** For each subject, capture the short caption/number/label text that belonged to its bundle. You will re-home this text in a synthesized sticky caption layer — never leave it bound to the source cell, and never let it enter a card wrapper.
+3. **Synthesize a fresh stage.** Create a NEW `
` layered over (or wrapping) the section and give it the `stickyStage` styles. **Never** assign the `stickyStage` role to an element that already exists in the section — no gallery `…__content` wrapper, no `.g-item` container, no grid/flex layout div, no `#comp-…` root. A reused container drags along its own text/structure and its (or an ancestor's) `overflow`/`transform`/`filter`/`opacity` silently kills `position: sticky`.
+4. **Clone only the image into fresh empty wrappers.** For each subject, create a brand-new empty `
`, clone ONLY the `![]()
` into it, and append it to the synthesized stage. The card wrapper owns its own `aspect-ratio`/box sizing. The original bundled cells stay in flow or are hidden — they never enter the stage and never get a card key.
+5. **Synthesize the sticky caption layer (if text was extracted).** Create a NEW `
` on the stage and put each subject's text into its own `
+
+```
+
+> `.sticky-wrapper` is a freshly synthesized stage; each `.card` holds ONLY the cloned image; `.caption-layer` holds the lifted texts, stacked top-left, alternating opacity. Captions, numbers, titles, and buttons are never inside a flying card. The `.caption-layer` is omitted entirely when the images have no attached text.
+
+## Selector Contract
+
+1. Role ownership is strict: `scrollSource` owns the tall runway, `stickyStage` owns sticky pinning + clipping + perspective, `repeatedCard` owns absolute centering plus the diagonal fly-in transform, and `stickyCaption` owns a pinned top-left text slot with alternating opacity. **These roles cannot be collapsed** — in particular, `stickyStage` is not optional and cannot be replaced by the section's existing in-flow layout container.
+2. **`stickyStage` MUST be a synthesized standalone wrapper — reusing an existing container is an automatic reject.** Do not bind it to a gallery/grid/section container (`.comp-…__content`, `.g-item`, a flex/grid layout div, an internal `#comp-…` root), *even if it renders correctly in one preview*. Such wrappers, or an ancestor, frequently carry `overflow: hidden/auto`, `transform`, `filter`, or `opacity < 1` that *silently* kill `position: sticky` and freeze ViewTimeline — the stage scrolls out of view and the converged cards leave the viewport (blank frames). Always create a fresh `
`, stacked at the same top-left anchor. Bind each caption to a key so it can alternate opacity (see template). Captions are synthesized nodes, never the source text nodes left in place.
+6. **Bind keys only to synthesized wrappers.** `repeatedCard` must resolve to a card node you created; `stickyCaption` must resolve to a caption node you created. If any key resolves to a pre-existing element (a cell, figure, `.g-item`, or a deep descendant like `.g-item:nth-of-type(n) .g-image` / `… img`), that is an **automatic reject of the mapping**. Fix by cloning into fresh wrappers, or reject the section.
+
+> Structural enforcement: because the card is always a wrapper you created around only an ``, and the caption is always synthesized text, carrying text into the stack becomes impossible and deep/fragile selectors never arise. If you find yourself typing a selector that points into the section's original markup for the stage, a card, or a caption, stop — you have left the sanctioned build.
+
+## Demo HTML
+
+```html
+
+ ![]()
+ ![]()
+ ![]()
+ ![]()
+ ![]()
+
+
+
+ …
+…
+…
+…
+…
+` layered over the section.
+3. **`repeatedCard` MUST resolve to a node you synthesized in this build — binding it to any pre-existing DOM element is an automatic reject.** The card is a fresh empty wrapper into which you clone ONLY the `![]()
`. It must NEVER be a bundle/cell/`.g-item`/figure that also holds a caption, number, title, link, button, or paragraph, and it must NEVER be a deep descendant chain (`.g-item:nth-of-type(3) .g-image`, `.g-item:nth-of-type(n) img`, etc.) — those are fragile even when the node happens to be image-only. If the repeated unit bundles image + text, you extract the image out; you may not point at an inner node inside the cell.
+4. **`stickyCaption` (only when images carry text) MUST be a synthesized text node in a sticky layer — never the source text left in place.** Each caption is pinned top-left on the stage and alternates opacity in sync with its card. Captions never sit inside a card wrapper (they would ride the stack) and never stay in the original scattered grid (they would drift with the layout). If a section's text cannot be reduced to a short sticky caption — because it is a rich heading+paragraph+button block — that is a Gate REJECT, not a caption.
+5. **There is no "animate in place" option.** For a multi-column flex/grid of cells whose content includes headings, paragraphs, buttons, captions, or numbering, the ONLY allowed responses are (a) if IMAGE-PRIMARY, run the Build Procedure (synthesize a stage, image-only clones, sticky captions) — or (b) REJECT. Mapping those cells to `repeatedCard` and animating them where they sit is forbidden and disqualifying.
+6. **Deep descendant card selectors are a rejection-worthy defect, not a warning.** Brittle chains into a gallery's internal DOM are rejected because they (a) break on re-render/re-order, (b) still leave the card nested inside the caption-bearing cell so its text rides along, and (c) target an inner node that has *lost* the card's own `aspect-ratio`/box sizing, so the animated element collapses or distorts. Every card is a stable, synthesized single-node clone wrapper.
+7. Repeated cards are absolute children centered on `stickyStage` via `top/left: 50%` + a base `translate(-50%, -50%)`. **Every keyframe transform MUST re-declare that centering translate before adding the fly-in offset.** Omitting it means the cards never gather at center — the #1 motion failure and a direct symptom of skipping the sticky stage.
+8. This pattern has no `collection` grid role — cards stack directly on the sticky stage. Do not introduce or reuse a flex/grid wrapper that removes the absolute centering.
+9. Keep the fly-in transform on the card roots, not on raw `img` descendants; the `img` fills the card via `object-cover` and must not carry the animation.
+10. Use rendered `#comp-...` ids only for locating the source `![]()
`/text nodes to clone, never `DESKTOP--...` ids. Do NOT map `stickyStage`, `repeatedCard`, or `stickyCaption` to any `#comp-...` element — those roles are always synthesized.
+
+## Role Guidance
+
+| Role | Guidance |
+| --- | --- |
+| `scrollSource` | The tall section that drives the shared `viewProgress` trigger for every card and caption. This is the one role that may map to an existing section element. |
+| `stickyStage` | A **freshly synthesized** sticky viewport-sized wrapper that pins during scroll, clips the flying cards, and provides `perspective`. **Mandatory, always synthesized, never a reused gallery/grid/`…__content`/`#comp-…` container**, and it must stay pinned for the entire scroll range — not just at the start. |
+| `repeatedCard` | Absolutely centered sibling cards, each a **freshly synthesized** single-node **image-only** clone wrapper — no caption, number, title, or button, and no pre-existing/deep-descendant selector — that fly in from an alternating corner over a staggered range. Binding this role to any pre-existing DOM node is an automatic reject. |
+| `stickyCaption` | **Present only for image-primary sections whose images carry text.** A **freshly synthesized** text node in a sticky top-left layer that fades in while its image is centered and fades out as the next image arrives, so one caption reads at a time. Never a card child; never the original text left in the grid. If the text is a rich heading+paragraph+button block, do not create captions — the section is a Gate REJECT. |
+
+## Adaptation Notes
+
+1. **Run the Gate before anything else.** Image-primary → build. Text-content card (heading+paragraph+button) or no isolable image → clean REJECT with no animation. The one section type that reproduces easily (clean product images) and image galleries with short captions take the *same* build; text-content grids take *no* build.
+2. **Recognize the bundle, then split it.** The repeated unit is almost always `image + attached text`. Never animate the bundle. Clone ONLY the `![]()
` into a fresh card wrapper; lift the short caption into the sticky caption layer; hide or leave the original cell in flow. The captions/numbers must never enter the stage as card children and never get a card key.
+3. **Handle attached text as a sticky, alternating caption.** Pin the caption layer top-left on the stage. Each caption's opacity ramps 0→1 over its own card's fly-in range and 1→0 as the next card flies in (last caption stays visible to the end). This keeps the text readable and in sync while the images pile up cleanly at center. If there is no attached text, omit the caption layer entirely.
+4. **Always synthesize even when the source offers a working selector.** A deep selector like `.g-image` may render correctly today because it happens to be image-only, but it is fragile and leaves the node nested in its caption cell. Clone the image into a fresh wrapper anyway — reliability across sections comes from a uniform synthesized build.
+5. **Never reuse the gallery's own containers for the stage.** Their internal wrappers (`…__content`, item containers, `#comp-…` roots) are the single most common place sticky silently dies and the most common source of text artifacts and zero-box collapse. Overlay a fresh `
` and place the image-only clones + caption layer into it.
+6. **Ancestor safety check (required, on the synthesized stage).** After creating the stage, verify that NONE of its ancestors up to the scroll source carries `overflow: hidden`/`auto`, `transform`, `filter`, or `opacity < 1`. Any one breaks `position: sticky` and freezes ViewTimeline. If an offending ancestor exists and cannot be neutralized, hoist the stage above it (or reject).
+7. Alternate the fly-in side by index: odd cards enter from bottom-left (negative X, negative rotate), even from bottom-right (positive X, positive rotate). Preserve the small settle rotation so the final stack stays loose.
+8. **Stagger from the real card count so the LAST card settles before scroll end.** Do not hard-code the demo's 5-card offsets. Distribute the staggered windows across a usable range that ends around 90% of `cover`, and derive the step from `N`, so the final card fully arrives while the stage is still pinned (never off-screen at the last frame). See the template's `cardRange`. Captions inherit the same per-card timing.
+9. Size the runway from card count: `~90vh` per card plus intro/outro slack (demo `450vh` covers five).
+10. Off-screen distances are viewport-relative (`±80vw`, `50vh`); keep them in `vw/vh`. Reduce on wide screens if cards feel too far-flung.
+11. Cards start visible (`opacity: 1`) and rely on being off-stage + clipped by `overflow: clip`. Captions are the exception — they use explicit opacity keyframes to alternate.
+12. **Verify the convergence — motion, cleanliness, and captions, at BOTH ends AND the middle.** Scrub the full scroll range:
+ - **Start:** every card off-screen; only the first caption (if any) is beginning to appear.
+ - **Mid-scroll (critical):** the stage is STILL pinned at center and the accumulating stack is visible — frames must not go blank after the first card. A blank mid-range means the stage un-pinned (clip/transform ancestor per §6, or a reused wrapper that should never have been used).
+ - **Settle:** every card overlaps at center in a tilted stack, none in a distinct layout slot; the **last** card is fully arrived before scroll end, not still off-screen.
+ - **Clean stack (mandatory):** the stacked cards show ONLY imagery — no caption text, numbers, titles, or buttons piled in the stack or scattered at the stage bottom. Any text on the flying/stacked cards means a bundle/cell was animated or a deep node targeted — re-run the Build Procedure or reject.
+ - **Caption sync (when captions exist):** exactly one caption is legible at a time, pinned top-left, switching as each new image reaches center.
+ If any check fails, fix the offending role or reject. "Cards fly in" alone is NOT sufficient evidence.
+
+## Required Elements
+
+| Key | Role | Demo Selector | Purpose |
+| --- | --- | --- | --- |
+| `scrollSection` | `scrollSource` | `#scroll-section` | The `viewProgress` source for all card and caption effects. May map to an existing section element. |
+| `stickyStage` | `stickyStage` | `#scroll-section .sticky-wrapper` | Sticky pin + clip + perspective. Mandatory and **always a synthesized standalone wrapper** — never a reused gallery/grid/`…__content`/`#comp-…` container. Confirm no clip/transform ancestor (Adaptation §6). |
+| `card1` | `repeatedCard` | `#card-1` | Minimum repeated fly-in card — a synthesized single-node **image-only** clone wrapper (odd → from left); extend outward for `card4..cardN`. |
+| `card2` | `repeatedCard` | `#card-2` | Repeated fly-in card (even → from right). |
+| `card3` | `repeatedCard` | `#card-3` | Repeated fly-in card (odd → from left). |
+| `card4` | `repeatedCard` | `#card-4` | Repeated fly-in card (even → from right). |
+| `card5` | `repeatedCard` | `#card-5` | Repeated fly-in card (odd → from left). |
+| `caption1` | `stickyCaption` | `#caption-1` | **Only when images carry text.** Synthesized sticky top-left text, fades in/out in sync with `card1`; extend for `caption4..captionN`. Omit the whole caption row if there is no attached text. |
+| `caption2` | `stickyCaption` | `#caption-2` | Sticky caption synced with `card2`. |
+| `caption3` | `stickyCaption` | `#caption-3` | Sticky caption synced with `card3`. |
+| `caption4` | `stickyCaption` | `#caption-4` | Sticky caption synced with `card4`. |
+| `caption5` | `stickyCaption` | `#caption-5` | Sticky caption synced with `card5`. |
+
+> Repeated card and caption keys keep their trailing index (`card1`/`caption1`, …) so they compact into `card{n}`/`caption{n}` groups; extend the rows for more items, alternating card entry side by parity. **Each card key MUST resolve to a synthesized image-only clone wrapper; each caption key to a synthesized sticky text node — both created in this build.** If any key resolves to a pre-existing cell that carries text/buttons, or to a deep descendant, that is an automatic reject. If the Gate classified the section as a text-content card, produce NO elements — reject the section.
+
+## Required Styles
+
+### `scrollSource` — `#scroll-section`
+
+```css
+#scroll-section {
+ position: relative;
+ height: 450vh;
+}
+```
+
+Reason: creates enough scroll distance for all staggered fly-in ranges to play out.
+
+### `stickyStage` — `#scroll-section .sticky-wrapper`
+
+```css
+#scroll-section .sticky-wrapper {
+ position: sticky;
+ top: 0;
+ height: 100vh;
+ width: 100vw;
+ overflow: clip;
+ perspective: 1200px;
+}
+```
+
+Reason: pins the stage so cards have a single fixed anchor to converge onto, clips off-screen cards without breaking ViewTimeline (`clip`, not `hidden`), and adds depth for the tilt. Never omit it; **always create it fresh**. Sticky only holds if no ancestor between this wrapper and `#scroll-section` sets `overflow: hidden/auto`, `transform`, `filter`, or `opacity < 1` (Adaptation §5–6).
+
+### `repeatedCard` — `#scroll-section .card`
+
+```css
+#scroll-section .card {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: 90vw;
+ max-width: 400px;
+ aspect-ratio: 3 / 4;
+ border-radius: 1rem;
+ transform-style: preserve-3d;
+ will-change: transform, opacity;
+ overflow: hidden;
+}
+
+#scroll-section .card > img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+
+@media (min-width: 768px) {
+ #scroll-section .card {
+ aspect-ratio: 4 / 3;
+ }
+}
+```
+
+Reason: absolutely centers each card and establishes the base box the keyframe transforms build on; the base `translate(-50%, -50%)` depends on this. If the card is `position: static/relative` (as in-flow grid cells are), the centering translate has nothing to anchor to and the convergence fails. **The card must be a synthesized wrapper that owns its box sizing and contains ONLY the cloned image.**
+
+### `stickyCaption` — `#scroll-section .caption-layer` / `.caption`
+
+```css
+#scroll-section .caption-layer {
+ position: absolute;
+ top: 6vh;
+ left: 6vw;
+ max-width: min(90vw, 32rem);
+ pointer-events: none;
+ z-index: 2;
+}
+
+#scroll-section .caption {
+ position: absolute; /* all captions share the same top-left anchor */
+ top: 0;
+ left: 0;
+ margin: 0;
+ opacity: 0; /* alternated by the caption effect */
+ will-change: opacity;
+}
+```
+
+Reason: pins every caption to a single top-left slot above the stack (`z-index` over the cards) and defaults them hidden; the caption effect ramps opacity so exactly one reads at a time, synced to its card. Omit this block entirely for sections whose images have no attached text. Never bind these styles to the original text cells — the captions are synthesized nodes.
+
+## Suggested Controls
+
+Expose the fly-in distance and the entrance scale by default; add scroll length only when the section owns its own runway height.
+
+### `fly-distance`
+
+- **Label:** `Fly-In Distance`
+- **Group:** `Motion`
+- **Type:** `range`
+- **Default:** `80`
+- **Description:** How far off-screen (horizontally) each card starts before shuffling to center.
+- **Constraints:** `min: 40`, `max: 100`, `step: 5`, `unit: vw`
+- **Binding:** `variable` `--card-fly-distance` using template `${value}vw`
+
+### `start-scale`
+
+- **Label:** `Entrance Scale`
+- **Group:** `Motion`
+- **Type:** `range`
+- **Default:** `0.7`
+- **Description:** The scale of each card at the start of its fly-in, before it grows to full size.
+- **Constraints:** `min: 0.5`, `max: 1`, `step: 0.05`, `unit: x`
+- **Binding:** `variable` `--card-start-scale` using a direct value
+
+### `scroll-length`
+
+- **Label:** `Scroll Length`
+- **Group:** `Layout`
+- **Type:** `range`
+- **Default:** `450`
+- **Description:** Total scroll runway height; increase for more cards or slower shuffling.
+- **Constraints:** `min: 300`, `max: 700`, `step: 25`, `unit: vh`
+- **Binding:** `style` `#scroll-section` property `height` using template `${value}vh`
+
+## Interact Template
+
+```ts
+const EASING = 'ease-out';
+
+const CARD_COUNT = 5; // set from the real number of extracted images
+const RANGE_START = 5; // percent of 'cover' where the first card begins
+const RANGE_END = 90; // percent where the LAST card must be fully settled (< 100 so it lands before scroll end)
+const CARD_DURATION = 20; // percent of 'cover' each card takes to fly in
+
+// Count-aware stagger: step so the last card ENDS at RANGE_END, never off-screen at the final frame.
+// step = (RANGE_END - RANGE_START - CARD_DURATION) / (CARD_COUNT - 1) -> a small overlap between neighbours.
+const STEP =
+ CARD_COUNT > 1 ? (RANGE_END - RANGE_START - CARD_DURATION) / (CARD_COUNT - 1) : 0;
+const cardStart = (index: number) => RANGE_START + index * STEP;
+
+const cardRange = (index: number) => ({
+ rangeStart: { name: 'cover', offset: { unit: 'percentage', value: cardStart(index) } },
+ rangeEnd: { name: 'cover', offset: { unit: 'percentage', value: cardStart(index) + CARD_DURATION } },
+ easing: EASING,
+ fill: 'both' as const,
+});
+
+// Odd cards fly in from bottom-left, even from bottom-right; small settle rotation keeps the stack loose.
+// --card-fly-distance (default 80vw) and --card-start-scale (default 0.7) drive the entrance.
+// NOTE: the leading `translate(-50%, -50%)` is REQUIRED in BOTH keyframes — it re-declares the
+// absolute centering so the card converges onto the stage center.
+// GATE (run first): only IMAGE-PRIMARY sections reach this template. Text-content cards (heading +
+// paragraph + button) are a clean REJECT — do NOT emit any card/caption effects for them.
+// BUILD: `stickyStage` is a FRESHLY SYNTHESIZED wrapper (never a reused gallery/grid/#comp-… container),
+// each `card{n}` resolves to a wrapper holding ONLY a cloned ![]()
, and any attached text lives in the
+// synthesized sticky caption layer below — never inside a card.
+const flyInEffect = (key: string, index: number, settleRotate: number) => {
+ const fromLeft = index % 2 === 0; // index 0,2,4 => card1,card3,card5 => left
+ const dx = fromLeft ? 'calc(-1 * var(--card-fly-distance, 80vw))' : 'var(--card-fly-distance, 80vw)';
+ const startRotate = fromLeft ? -45 : 45;
+ return {
+ key,
+ keyframeEffect: {
+ name: `${key}-fly-in`,
+ keyframes: [
+ {
+ transform: `translate(-50%, -50%) translate(${dx}, 50vh) rotate(${startRotate}deg) scale(var(--card-start-scale, 0.7))`,
+ opacity: 1,
+ },
+ {
+ transform: `translate(-50%, -50%) translate(0, 0) rotate(${settleRotate}deg) scale(1)`,
+ opacity: 1,
+ },
+ ],
+ },
+ ...cardRange(index),
+ };
+};
+
+// Sticky caption: text lifted out of each image's bundle, pinned top-left, alternating.
+// Caption i fades in as card i arrives (its own range) and fades out as card i+1 arrives;
+// the last caption holds to scroll end. Emit these ONLY when the images carried short captions.
+const captionEffect = (key: string, index: number) => {
+ const isLast = index === CARD_COUNT - 1;
+ const start = cardStart(index);
+ const end = isLast ? 100 : cardStart(index + 1) + CARD_DURATION;
+ return {
+ key,
+ keyframeEffect: {
+ name: `${key}-caption`,
+ keyframes: isLast
+ ? [{ opacity: 0, offset: 0 }, { opacity: 1, offset: 0.35 }, { opacity: 1, offset: 1 }]
+ : [
+ { opacity: 0, offset: 0 },
+ { opacity: 1, offset: 0.3 },
+ { opacity: 1, offset: 0.7 },
+ { opacity: 0, offset: 1 },
+ ],
+ },
+ rangeStart: { name: 'cover', offset: { unit: 'percentage', value: start } },
+ rangeEnd: { name: 'cover', offset: { unit: 'percentage', value: end } },
+ easing: EASING,
+ fill: 'both' as const,
+ };
+};
+
+// Final settle tilts taper toward 0 on the last card — recompute for a different count.
+const SETTLE_ROTATIONS = [-4, 3, -2, 1, 0];
+
+const HAS_CAPTIONS = true; // false when the extracted images had no attached text
+
+const interactions = SETTLE_ROTATIONS.slice(0, CARD_COUNT).map((rotate, index) => ({
+ key: 'scrollSection',
+ trigger: 'viewProgress',
+ effects: [
+ flyInEffect(`card${index + 1}`, index, rotate),
+ ...(HAS_CAPTIONS ? [captionEffect(`caption${index + 1}`, index)] : []),
+ ],
+}));
+```
\ No newline at end of file
diff --git a/Ani-Mate Prompts/Gallery-and-Carousel/DiagonalShuffle.md.history.json b/Ani-Mate Prompts/Gallery-and-Carousel/DiagonalShuffle.md.history.json
new file mode 100644
index 0000000..9470a50
--- /dev/null
+++ b/Ani-Mate Prompts/Gallery-and-Carousel/DiagonalShuffle.md.history.json
@@ -0,0 +1,39 @@
+{
+ "working": "# Diagonal Shuffle\n\nCards fly in diagonally from alternating corners, rotating and scaling into a loose center stack as the section scrolls.\n\n## Summary\n\n- **ID:** `diagonal-shuffle`\n- **Target shape:** Best for 3–7 similarly sized sibling cards absolutely centered inside one sticky viewport stage, where each card can animate independently over a staggered scroll range.\n- **Description:** Five centered cards each fly in from an alternating bottom corner (odd from bottom-left, even from bottom-right), un-rotating and scaling up to settle at a slight tilt as the section scrolls past.\n\n## Demo HTML\n\n```html\n\n\n \n```\n\n## Selector Contract\n\n1. Role ownership is strict: `scrollSource` owns the tall runway, `stickyStage` owns sticky pinning + clipping + perspective, and `repeatedCard` owns absolute centering plus the diagonal fly-in transform.\n2. Repeated cards are absolute children centered on `stickyStage` via `top/left: 50%` + a base `translate(-50%, -50%)`. Every keyframe transform MUST re-declare that centering translate before adding the fly-in offset, or the cards jump off center.\n3. This pattern has no `collection` grid role — cards stack directly on the sticky stage. Do not introduce a flex/grid wrapper that removes the absolute centering.\n4. Keep the fly-in transform on the card roots, not on raw `img` descendants; the `img` fills the card via `object-cover` and must not carry the animation.\n5. Use rendered `#comp-...` ids for cards, never `DESKTOP--...` ids. In Wix, map `stickyStage` to the internal-container-root `#comp-...` and place the absolutely-centered cards inside it.\n\n## Role Guidance\n\n| Role | Guidance |\n| --- | --- |\n| `scrollSource` | The tall section that drives the shared `viewProgress` trigger for every card. |\n| `stickyStage` | A sticky viewport-sized wrapper that pins during scroll, clips the flying cards, and provides `perspective` for depth. |\n| `repeatedCard` | Absolutely centered sibling cards that each fly in from an alternating corner over a staggered range. |\n\n## Adaptation Notes\n\n1. Alternate the fly-in side by index: odd cards enter from bottom-left (negative X, negative rotate), even cards from bottom-right (positive X, positive rotate). Preserve the small settle rotation so the final stack stays loose, not perfectly aligned.\n2. Stagger each card's range across the scroll source. Demo uses `start = 5 + (n-1)·15`, `end = start + 20` (percent of `cover`), giving a 5% overlap between consecutive cards. Recompute the step from the real card count so the last card finishes before scroll end.\n3. Size the runway from card count: more cards need a longer `scroll-section` height. The demo's `450vh` covers five staggered ranges; scale roughly `~90vh` per card plus intro/outro slack.\n4. Off-screen distances are viewport-relative (`±80vw`, `50vh`); keep them in `vw/vh` so the entrance clears the frame on any width. Reduce the distance if cards feel too far-flung on wide screens.\n5. Cards start visible (`opacity: 1`) and rely on being off-stage + clipped by `overflow: clip`; if you instead fade them, add an opacity keyframe rather than the base `opacity: 0` default.\n6. Reject the pattern if you cannot keep a distinct sticky stage that both pins and clips the absolutely-centered cards.\n\n## Required Elements\n\n| Key | Role | Demo Selector | Purpose |\n| --- | --- | --- | --- |\n| `scrollSection` | `scrollSource` | `#scroll-section` | The `viewProgress` source for all card effects. |\n| `stickyStage` | `stickyStage` | `#scroll-section .sticky-wrapper` | Sticky pin + clip + perspective. Wix: `#comp-...` with `data-testid=\"internal-container-root\"`. |\n| `card1` | `repeatedCard` | `#card-1` | Minimum repeated fly-in card (odd → from left); extend outward for `card4..cardN`. |\n| `card2` | `repeatedCard` | `#card-2` | Repeated fly-in card (even → from right). |\n| `card3` | `repeatedCard` | `#card-3` | Repeated fly-in card (odd → from left). |\n| `card4` | `repeatedCard` | `#card-4` | Repeated fly-in card (even → from right). |\n| `card5` | `repeatedCard` | `#card-5` | Repeated fly-in card (odd → from left). |\n\n> Repeated card keys must keep their trailing index (`card1`, `card2`, …) so they compact into the `card{n}` group; extend the row as `card4..cardN` for more items, alternating entry side by parity.\n\n## Required Styles\n\n### `scrollSource` — `#scroll-section`\n\n```css\n#scroll-section {\n position: relative;\n height: 450vh;\n}\n```\n\nReason: creates enough scroll distance for all five staggered fly-in ranges to play out.\n\n### `stickyStage` — `#scroll-section .sticky-wrapper`\n\n```css\n#scroll-section .sticky-wrapper {\n position: sticky;\n top: 0;\n height: 100vh;\n width: 100vw;\n overflow: clip;\n perspective: 1200px;\n}\n```\n\nReason: pins the stage to the viewport, clips the off-screen cards without breaking ViewTimeline (`clip`, not `hidden`), and adds depth for the tilt.\n\n### `repeatedCard` — `#scroll-section .card`\n\n```css\n#scroll-section .card {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 90vw;\n max-width: 400px;\n aspect-ratio: 3 / 4;\n border-radius: 1rem;\n transform-style: preserve-3d;\n will-change: transform, opacity;\n overflow: hidden;\n}\n\n@media (min-width: 768px) {\n #scroll-section .card {\n aspect-ratio: 4 / 3;\n }\n}\n```\n\nReason: absolutely centers each card on the stage and establishes the base box the keyframe transforms build on; the base `translate(-50%, -50%)` in the animation depends on this centering.\n\n## Suggested Controls\n\nExpose the fly-in distance and the entrance scale by default; add scroll length only when the section owns its own runway height.\n\n### `fly-distance`\n\n- **Label:** `Fly-In Distance`\n- **Group:** `Motion`\n- **Type:** `range`\n- **Default:** `80`\n- **Description:** How far off-screen (horizontally) each card starts before shuffling to center.\n- **Constraints:** `min: 40`, `max: 100`, `step: 5`, `unit: vw`\n- **Binding:** `variable` `--card-fly-distance` using template `${value}vw`\n\n### `start-scale`\n\n- **Label:** `Entrance Scale`\n- **Group:** `Motion`\n- **Type:** `range`\n- **Default:** `0.7`\n- **Description:** The scale of each card at the start of its fly-in, before it grows to full size.\n- **Constraints:** `min: 0.5`, `max: 1`, `step: 0.05`, `unit: x`\n- **Binding:** `variable` `--card-start-scale` using a direct value\n\n### `scroll-length`\n\n- **Label:** `Scroll Length`\n- **Group:** `Layout`\n- **Type:** `range`\n- **Default:** `450`\n- **Description:** Total scroll runway height; increase for more cards or slower shuffling.\n- **Constraints:** `min: 300`, `max: 700`, `step: 25`, `unit: vh`\n- **Binding:** `style` `#scroll-section` property `height` using template `${value}vh`\n\n## Interact Template\n\n```ts\nconst EASING = 'ease-out';\n\n// Per-card staggered range: start = 5 + (n-1)*15, end = start + 20 (percent of 'cover').\n// Recompute the step and count from the real number of cards.\nconst cardRange = (index: number) => ({\n rangeStart: { name: 'cover', offset: { unit: 'percentage', value: 5 + index * 15 } },\n rangeEnd: { name: 'cover', offset: { unit: 'percentage', value: 25 + index * 15 } },\n easing: EASING,\n fill: 'both' as const,\n});\n\n// Odd cards fly in from bottom-left, even from bottom-right; small settle rotation keeps the stack loose.\n// --card-fly-distance (default 80vw) and --card-start-scale (default 0.7) drive the entrance.\nconst flyInEffect = (key: string, index: number, settleRotate: number) => {\n const fromLeft = index % 2 === 0; // index 0,2,4 => card1,card3,card5 => left\n const dx = fromLeft ? 'calc(-1 * var(--card-fly-distance, 80vw))' : 'var(--card-fly-distance, 80vw)';\n const startRotate = fromLeft ? -45 : 45;\n return {\n key,\n keyframeEffect: {\n name: `${key}-fly-in`,\n keyframes: [\n {\n transform: `translate(-50%, -50%) translate(${dx}, 50vh) rotate(${startRotate}deg) scale(var(--card-start-scale, 0.7))`,\n opacity: 1,\n },\n {\n transform: `translate(-50%, -50%) translate(0, 0) rotate(${settleRotate}deg) scale(1)`,\n opacity: 1,\n },\n ],\n },\n ...cardRange(index),\n };\n};\n\n// Final settle tilts taper toward 0 on the last card — recompute for a different count.\nconst SETTLE_ROTATIONS = [-4, 3, -2, 1, 0];\n\nconst interactions = SETTLE_ROTATIONS.map((rotate, index) => ({\n key: 'scrollSection',\n trigger: 'viewProgress',\n effects: [flyInEffect(`card${index + 1}`, index, rotate)],\n}));\n```",
+ "rounds": [
+ {
+ "round": 1,
+ "guideline": "# Diagonal Shuffle\n\nCards fly in diagonally from alternating corners, rotating and scaling into a loose center stack as the section scrolls.\n\n## Summary\n\n- **ID:** `diagonal-shuffle`\n- **Target shape:** Best for 3–7 similarly sized sibling cards absolutely centered inside one sticky viewport stage, where each card can animate independently over a staggered scroll range.\n- **Description:** Five centered cards each fly in from an alternating bottom corner (odd from bottom-left, even from bottom-right), un-rotating and scaling up to settle at a slight tilt as the section scrolls past.\n\n## Demo HTML\n\n```html\n\n\n \n```\n\n## Selector Contract\n\n1. Role ownership is strict: `scrollSource` owns the tall runway, `stickyStage` owns sticky pinning + clipping + perspective, and `repeatedCard` owns absolute centering plus the diagonal fly-in transform.\n2. Repeated cards are absolute children centered on `stickyStage` via `top/left: 50%` + a base `translate(-50%, -50%)`. Every keyframe transform MUST re-declare that centering translate before adding the fly-in offset, or the cards jump off center.\n3. This pattern has no `collection` grid role — cards stack directly on the sticky stage. Do not introduce a flex/grid wrapper that removes the absolute centering.\n4. Keep the fly-in transform on the card roots, not on raw `img` descendants; the `img` fills the card via `object-cover` and must not carry the animation.\n5. Use rendered `#comp-...` ids for cards, never `DESKTOP--...` ids. In Wix, map `stickyStage` to the internal-container-root `#comp-...` and place the absolutely-centered cards inside it.\n\n## Role Guidance\n\n| Role | Guidance |\n| --- | --- |\n| `scrollSource` | The tall section that drives the shared `viewProgress` trigger for every card. |\n| `stickyStage` | A sticky viewport-sized wrapper that pins during scroll, clips the flying cards, and provides `perspective` for depth. |\n| `repeatedCard` | Absolutely centered sibling cards that each fly in from an alternating corner over a staggered range. |\n\n## Adaptation Notes\n\n1. Alternate the fly-in side by index: odd cards enter from bottom-left (negative X, negative rotate), even cards from bottom-right (positive X, positive rotate). Preserve the small settle rotation so the final stack stays loose, not perfectly aligned.\n2. Stagger each card's range across the scroll source. Demo uses `start = 5 + (n-1)·15`, `end = start + 20` (percent of `cover`), giving a 5% overlap between consecutive cards. Recompute the step from the real card count so the last card finishes before scroll end.\n3. Size the runway from card count: more cards need a longer `scroll-section` height. The demo's `450vh` covers five staggered ranges; scale roughly `~90vh` per card plus intro/outro slack.\n4. Off-screen distances are viewport-relative (`±80vw`, `50vh`); keep them in `vw/vh` so the entrance clears the frame on any width. Reduce the distance if cards feel too far-flung on wide screens.\n5. Cards start visible (`opacity: 1`) and rely on being off-stage + clipped by `overflow: clip`; if you instead fade them, add an opacity keyframe rather than the base `opacity: 0` default.\n6. Reject the pattern if you cannot keep a distinct sticky stage that both pins and clips the absolutely-centered cards.\n\n## Required Elements\n\n| Key | Role | Demo Selector | Purpose |\n| --- | --- | --- | --- |\n| `scrollSection` | `scrollSource` | `#scroll-section` | The `viewProgress` source for all card effects. |\n| `stickyStage` | `stickyStage` | `#scroll-section .sticky-wrapper` | Sticky pin + clip + perspective. Wix: `#comp-...` with `data-testid=\"internal-container-root\"`. |\n| `card1` | `repeatedCard` | `#card-1` | Minimum repeated fly-in card (odd → from left); extend outward for `card4..cardN`. |\n| `card2` | `repeatedCard` | `#card-2` | Repeated fly-in card (even → from right). |\n| `card3` | `repeatedCard` | `#card-3` | Repeated fly-in card (odd → from left). |\n| `card4` | `repeatedCard` | `#card-4` | Repeated fly-in card (even → from right). |\n| `card5` | `repeatedCard` | `#card-5` | Repeated fly-in card (odd → from left). |\n\n> Repeated card keys must keep their trailing index (`card1`, `card2`, …) so they compact into the `card{n}` group; extend the row as `card4..cardN` for more items, alternating entry side by parity.\n\n## Required Styles\n\n### `scrollSource` — `#scroll-section`\n\n```css\n#scroll-section {\n position: relative;\n height: 450vh;\n}\n```\n\nReason: creates enough scroll distance for all five staggered fly-in ranges to play out.\n\n### `stickyStage` — `#scroll-section .sticky-wrapper`\n\n```css\n#scroll-section .sticky-wrapper {\n position: sticky;\n top: 0;\n height: 100vh;\n width: 100vw;\n overflow: clip;\n perspective: 1200px;\n}\n```\n\nReason: pins the stage to the viewport, clips the off-screen cards without breaking ViewTimeline (`clip`, not `hidden`), and adds depth for the tilt.\n\n### `repeatedCard` — `#scroll-section .card`\n\n```css\n#scroll-section .card {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 90vw;\n max-width: 400px;\n aspect-ratio: 3 / 4;\n border-radius: 1rem;\n transform-style: preserve-3d;\n will-change: transform, opacity;\n overflow: hidden;\n}\n\n@media (min-width: 768px) {\n #scroll-section .card {\n aspect-ratio: 4 / 3;\n }\n}\n```\n\nReason: absolutely centers each card on the stage and establishes the base box the keyframe transforms build on; the base `translate(-50%, -50%)` in the animation depends on this centering.\n\n## Suggested Controls\n\nExpose the fly-in distance and the entrance scale by default; add scroll length only when the section owns its own runway height.\n\n### `fly-distance`\n\n- **Label:** `Fly-In Distance`\n- **Group:** `Motion`\n- **Type:** `range`\n- **Default:** `80`\n- **Description:** How far off-screen (horizontally) each card starts before shuffling to center.\n- **Constraints:** `min: 40`, `max: 100`, `step: 5`, `unit: vw`\n- **Binding:** `variable` `--card-fly-distance` using template `${value}vw`\n\n### `start-scale`\n\n- **Label:** `Entrance Scale`\n- **Group:** `Motion`\n- **Type:** `range`\n- **Default:** `0.7`\n- **Description:** The scale of each card at the start of its fly-in, before it grows to full size.\n- **Constraints:** `min: 0.5`, `max: 1`, `step: 0.05`, `unit: x`\n- **Binding:** `variable` `--card-start-scale` using a direct value\n\n### `scroll-length`\n\n- **Label:** `Scroll Length`\n- **Group:** `Layout`\n- **Type:** `range`\n- **Default:** `450`\n- **Description:** Total scroll runway height; increase for more cards or slower shuffling.\n- **Constraints:** `min: 300`, `max: 700`, `step: 25`, `unit: vh`\n- **Binding:** `style` `#scroll-section` property `height` using template `${value}vh`\n\n## Interact Template\n\n```ts\nconst EASING = 'ease-out';\n\n// Per-card staggered range: start = 5 + (n-1)*15, end = start + 20 (percent of 'cover').\n// Recompute the step and count from the real number of cards.\nconst cardRange = (index: number) => ({\n rangeStart: { name: 'cover', offset: { unit: 'percentage', value: 5 + index * 15 } },\n rangeEnd: { name: 'cover', offset: { unit: 'percentage', value: 25 + index * 15 } },\n easing: EASING,\n fill: 'both' as const,\n});\n\n// Odd cards fly in from bottom-left, even from bottom-right; small settle rotation keeps the stack loose.\n// --card-fly-distance (default 80vw) and --card-start-scale (default 0.7) drive the entrance.\nconst flyInEffect = (key: string, index: number, settleRotate: number) => {\n const fromLeft = index % 2 === 0; // index 0,2,4 => card1,card3,card5 => left\n const dx = fromLeft ? 'calc(-1 * var(--card-fly-distance, 80vw))' : 'var(--card-fly-distance, 80vw)';\n const startRotate = fromLeft ? -45 : 45;\n return {\n key,\n keyframeEffect: {\n name: `${key}-fly-in`,\n keyframes: [\n {\n transform: `translate(-50%, -50%) translate(${dx}, 50vh) rotate(${startRotate}deg) scale(var(--card-start-scale, 0.7))`,\n opacity: 1,\n },\n {\n transform: `translate(-50%, -50%) translate(0, 0) rotate(${settleRotate}deg) scale(1)`,\n opacity: 1,\n },\n ],\n },\n ...cardRange(index),\n };\n};\n\n// Final settle tilts taper toward 0 on the last card — recompute for a different count.\nconst SETTLE_ROTATIONS = [-4, 3, -2, 1, 0];\n\nconst interactions = SETTLE_ROTATIONS.map((rotate, index) => ({\n key: 'scrollSection',\n trigger: 'viewProgress',\n effects: [flyInEffect(`card${index + 1}`, index, rotate)],\n}));\n```",
+ "sections": [
+ {
+ "id": "portfolio",
+ "config": "{\n \"$schema\": \"interact-experience/1.0\",\n \"id\": \"diagonal-shuffle-gallery\",\n \"name\": \"Diagonal Shuffle Gallery\",\n \"description\": \"The four gallery cards fly in diagonally from alternating bottom corners, un-rotating and scaling up into place over a staggered scroll range across the section.\",\n \"elements\": {\n \"scrollSection\": {\n \"selector\": \".comp-mqryiq7r\",\n \"styles\": {\n \"--card-fly-distance\": \"80vw\",\n \"--card-start-scale\": \"0.7\",\n \"--card-fly-rise\": \"50vh\",\n \"--card-fly-rotate\": \"45deg\"\n }\n },\n \"card1\": {\n \"selector\": \".comp-mqryiqa5 .g-item:nth-child(1)\"\n },\n \"card2\": {\n \"selector\": \".comp-mqryiqa5 .g-item:nth-child(2)\"\n },\n \"card3\": {\n \"selector\": \".comp-mqryiqa5 .g-item:nth-child(3)\"\n },\n \"card4\": {\n \"selector\": \".comp-mqryiqa5 .g-item:nth-child(4)\"\n }\n },\n \"styles\": [\n {\n \"selector\": \".comp-mqryiq7r__content\",\n \"properties\": {\n \"overflow\": \"clip\"\n }\n },\n {\n \"selector\": \".comp-mqryiqa5\",\n \"properties\": {\n \"perspective\": \"1200px\",\n \"overflow\": \"clip\"\n }\n },\n {\n \"selector\": \".comp-mqryiqa5 .g-item\",\n \"properties\": {\n \"transform-style\": \"preserve-3d\",\n \"will-change\": \"transform, opacity\"\n }\n }\n ],\n \"interact\": {\n \"effects\": {},\n \"interactions\": [\n {\n \"key\": \"scrollSection\",\n \"trigger\": \"viewProgress\",\n \"effects\": [\n {\n \"key\": \"card1\",\n \"easing\": \"ease-out\",\n \"fill\": \"both\",\n \"rangeStart\": { \"name\": \"cover\", \"offset\": { \"unit\": \"percentage\", \"value\": 5 } },\n \"rangeEnd\": { \"name\": \"cover\", \"offset\": { \"unit\": \"percentage\", \"value\": 25 } },\n \"keyframeEffect\": {\n \"name\": \"card1-fly-in\",\n \"keyframes\": [\n {\n \"transform\": \"translate(calc(-1 * var(--card-fly-distance, 80vw)), var(--card-fly-rise, 50vh)) rotate(calc(-1 * var(--card-fly-rotate, 45deg))) scale(var(--card-start-scale, 0.7))\",\n \"opacity\": \"1\"\n },\n {\n \"transform\": \"translate(0, 0) rotate(-4deg) scale(1)\",\n \"opacity\": \"1\"\n }\n ]\n }\n },\n {\n \"key\": \"card2\",\n \"easing\": \"ease-out\",\n \"fill\": \"both\",\n \"rangeStart\": { \"name\": \"cover\", \"offset\": { \"unit\": \"percentage\", \"value\": 20 } },\n \"rangeEnd\": { \"name\": \"cover\", \"offset\": { \"unit\": \"percentage\", \"value\": 40 } },\n \"keyframeEffect\": {\n \"name\": \"card2-fly-in\",\n \"keyframes\": [\n {\n \"transform\": \"translate(var(--card-fly-distance, 80vw), var(--card-fly-rise, 50vh)) rotate(var(--card-fly-rotate, 45deg)) scale(var(--card-start-scale, 0.7))\",\n \"opacity\": \"1\"\n },\n {\n \"transform\": \"translate(0, 0) rotate(3deg) scale(1)\",\n \"opacity\": \"1\"\n }\n ]\n }\n },\n {\n \"key\": \"card3\",\n \"easing\": \"ease-out\",\n \"fill\": \"both\",\n \"rangeStart\": { \"name\": \"cover\", \"offset\": { \"unit\": \"percentage\", \"value\": 35 } },\n \"rangeEnd\": { \"name\": \"cover\", \"offset\": { \"unit\": \"percentage\", \"value\": 55 } },\n \"keyframeEffect\": {\n \"name\": \"card3-fly-in\",\n \"keyframes\": [\n {\n \"transform\": \"translate(calc(-1 * var(--card-fly-distance, 80vw)), var(--card-fly-rise, 50vh)) rotate(calc(-1 * var(--card-fly-rotate, 45deg))) scale(var(--card-start-scale, 0.7))\",\n \"opacity\": \"1\"\n },\n {\n \"transform\": \"translate(0, 0) rotate(-2deg) scale(1)\",\n \"opacity\": \"1\"\n }\n ]\n }\n },\n {\n \"key\": \"card4\",\n \"easing\": \"ease-out\",\n \"fill\": \"both\",\n \"rangeStart\": { \"name\": \"cover\", \"offset\": { \"unit\": \"percentage\", \"value\": 50 } },\n \"rangeEnd\": { \"name\": \"cover\", \"offset\": { \"unit\": \"percentage\", \"value\": 70 } },\n \"keyframeEffect\": {\n \"name\": \"card4-fly-in\",\n \"keyframes\": [\n {\n \"transform\": \"translate(var(--card-fly-distance, 80vw), var(--card-fly-rise, 50vh)) rotate(var(--card-fly-rotate, 45deg)) scale(var(--card-start-scale, 0.7))\",\n \"opacity\": \"1\"\n },\n {\n \"transform\": \"translate(0, 0) rotate(1deg) scale(1)\",\n \"opacity\": \"1\"\n }\n ]\n }\n }\n ]\n }\n ]\n },\n \"controls\": [\n {\n \"id\": \"fly-distance\",\n \"label\": \"Fly-In Distance\",\n \"description\": \"How far off-screen horizontally each card starts before shuffling into place.\",\n \"group\": \"Motion\",\n \"type\": \"range\",\n \"defaultValue\": 80,\n \"constraints\": { \"min\": 40, \"max\": 100, \"step\": 5, \"unit\": \"vw\" },\n \"bindings\": [\n {\n \"target\": \"variable\",\n \"targetId\": \"--card-fly-distance\",\n \"transform\": { \"type\": \"template\", \"template\": \"${value}vw\" }\n }\n ]\n },\n {\n \"id\": \"start-scale\",\n \"label\": \"Entrance Scale\",\n \"description\": \"Scale of each card at the start of its fly-in, before it grows to full size.\",\n \"group\": \"Motion\",\n \"type\": \"range\",\n \"defaultValue\": 0.7,\n \"constraints\": { \"min\": 0.5, \"max\": 1, \"step\": 0.05, \"unit\": \"x\" },\n \"bindings\": [\n {\n \"target\": \"variable\",\n \"targetId\": \"--card-start-scale\",\n \"transform\": { \"type\": \"direct\" }\n }\n ]\n },\n {\n \"id\": \"fly-rise\",\n \"label\": \"Rise Distance\",\n \"description\": \"How far below its resting position each card starts before rising into place.\",\n \"group\": \"Motion\",\n \"type\": \"range\",\n \"defaultValue\": 50,\n \"constraints\": { \"min\": 0, \"max\": 100, \"step\": 5, \"unit\": \"vh\" },\n \"bindings\": [\n {\n \"target\": \"variable\",\n \"targetId\": \"--card-fly-rise\",\n \"transform\": { \"type\": \"template\", \"template\": \"${value}vh\" }\n }\n ]\n },\n {\n \"id\": \"fly-rotate\",\n \"label\": \"Entrance Rotation\",\n \"description\": \"Starting rotation of each card before it un-rotates toward its loose settle tilt.\",\n \"group\": \"Motion\",\n \"type\": \"range\",\n \"defaultValue\": 45,\n \"constraints\": { \"min\": 0, \"max\": 90, \"step\": 5, \"unit\": \"deg\" },\n \"bindings\": [\n {\n \"target\": \"variable\",\n \"targetId\": \"--card-fly-rotate\",\n \"transform\": { \"type\": \"template\", \"template\": \"${value}deg\" }\n }\n ]\n }\n ]\n}",
+ "html": "\n \n ",
+ "css": ".container {\n position: relative;\n width: 100%;\n height: 100%;\n}\n\n.backgroundLayer {\n position: absolute;\n inset: 0;\n overflow: clip;\n}\n\n.backgroundLayer .background {\n position: absolute;\n inset: 0;\n background-size: cover;\n background-position: center;\n}\n\n.content {\n position: relative;\n}\n\n.presetWrapper {\n display: contents;\n}\n\n.image3,\n.imageLayer {\n width: 100%;\n height: 100%;\n}\n\n.imageLayer {\n overflow: hidden;\n}\n\n.imageLayer > img {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n.logo-wrapper .linkLayer {\n display: block;\n width: 100%;\n height: 100%;\n}\n\n.logo-wrapper img {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: contain;\n}\n\n.line-wrapper {\n display: flex;\n align-items: center;\n}\n\n.line-wrapper > .line {\n width: 100%;\n border-top: 1px solid currentColor;\n}\n\n.menu .navbar {\n display: flex;\n}\n\n.ph-box {\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n background: #ededed;\n border: 1px dashed #c4c4c4;\n font: 500 13px/1.3 system-ui, -apple-system, sans-serif;\n color: #8a8a8a;\n letter-spacing: 0.04em;\n}\n\n.imageLayer > .ph-box,\n.logo-wrapper > .ph-box {\n width: 100%;\n height: 100%;\n}\n\n.comp-mqryiq7r {\n height: auto;\n min-height: 0px;\n max-height: 99999px;\n}\n\n.comp-mqryiq7r__bg {\n border-bottom-style: solid;\n border-bottom-width: 0px;\n border-bottom-color: transparent;\n border-start-end-radius: 0px;\n box-shadow: none;\n border-inline-end-width: 0px;\n border-top-width: 0px;\n border-inline-start-color: transparent;\n border-start-start-radius: 0px;\n border-inline-start-width: 0px;\n border-top-style: solid;\n border-end-start-radius: 0px;\n border-inline-start-style: solid;\n border-inline-end-style: solid;\n border-inline-end-color: transparent;\n border-top-color: transparent;\n border-end-end-radius: 0px;\n background-color: #ffffff;\n}\n\n.comp-mqryiq7r__content {\n display: grid;\n grid-template-columns: repeat(1, minmax(0, 1fr));\n grid-template-rows: min-content min-content 1fr;\n}\n\n.comp-mqryiq8r3 {\n margin-left: 3.91%;\n margin-right: 0%;\n margin-top: 68px;\n margin-bottom: 4px;\n width: 23.6%;\n min-width: 0px;\n max-width: 99999px;\n grid-column-start: 1;\n grid-column-end: 2;\n grid-row-start: 1;\n grid-row-end: 2;\n place-self: start;\n color: #000000;\n font: normal normal 400 18px/1.5em 'Madefor', sans-serif;\n letter-spacing: 0em;\n mix-blend-mode: normal;\n}\n\n.comp-mqryiq8r3 :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, blockquote, figure) {\n margin: 0;\n font: inherit;\n color: inherit;\n letter-spacing: inherit;\n}\n\n.comp-mqryiq9r {\n margin-left: 3.91%;\n margin-right: 0%;\n margin-bottom: 73.836px;\n width: 29.4%;\n min-width: 0px;\n max-width: 99999px;\n grid-column-start: 1;\n grid-column-end: 2;\n grid-row-start: 2;\n grid-row-end: 3;\n place-self: start;\n color: #000000;\n font: normal normal 700 22px/1.3em 'Madefor', sans-serif;\n letter-spacing: 0em;\n mix-blend-mode: normal;\n}\n\n.comp-mqryiq9r :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, blockquote, figure) {\n margin: 0;\n font: inherit;\n color: inherit;\n letter-spacing: inherit;\n}\n\n.comp-mqryiqa5 {\n margin-left: 3.91%;\n margin-right: 0%;\n margin-bottom: 86.297px;\n width: 92.2%;\n min-width: 0px;\n max-width: 99999px;\n grid-column-start: 1;\n grid-column-end: 2;\n grid-row-start: 3;\n grid-row-end: 4;\n place-self: start;\n border-bottom-left-radius: 0px;\n border-left-color: #000000;\n padding-left: 0px;\n padding-top: 0px;\n border-left-width: 0px;\n padding-bottom: 0px;\n border-right-style: solid;\n border-right-color: #000000;\n border-bottom-width: 0px;\n border-bottom-right-radius: 0px;\n background-color: transparent;\n padding-right: 0px;\n border-top-style: solid;\n border-left-style: solid;\n border-top-right-radius: 0px;\n border-right-width: 0px;\n border-bottom-style: solid;\n box-shadow: 0px 0px 30px 1px rgba(0, 0, 0, 0);\n border-top-color: #000000;\n border-top-width: 0px;\n border-bottom-color: #000000;\n border-top-left-radius: 0px;\n}\n\n.comp-mqryiqa5 {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n column-gap: 11px;\n row-gap: 11px;\n}\n\n.comp-mqryiqa5 .g-item {\n display: flex;\n flex-direction: column;\n border-bottom-width: 0px;\n border-left-color: #000000;\n border-top-style: solid;\n border-left-style: solid;\n padding-top: 0px;\n border-left-width: 0px;\n border-top-left-radius: 0px;\n border-top-right-radius: 0px;\n border-bottom-color: #000000;\n border-top-width: 0px;\n border-top-color: #000000;\n border-bottom-style: solid;\n padding-bottom: 0px;\n padding-left: 0px;\n box-shadow: 0px 0px 30px 1px rgba(0, 0, 0, 0);\n border-right-style: solid;\n padding-right: 0px;\n border-right-width: 0px;\n border-right-color: #000000;\n background-color: transparent;\n border-bottom-left-radius: 0px;\n border-bottom-right-radius: 0px;\n}\n\n.comp-mqryiqa5 .g-image {\n box-sizing: border-box;\n padding-left: 0px;\n background-color: transparent;\n border-top-left-radius: 0px;\n border-top-color: #000000;\n border-right-style: solid;\n border-left-style: solid;\n border-left-color: #000000;\n border-bottom-width: 0px;\n border-bottom-style: solid;\n padding-right: 0px;\n border-right-width: 0px;\n box-shadow: 0px 0px 30px 1px rgba(0, 0, 0, 0);\n border-top-width: 0px;\n border-left-width: 0px;\n border-top-style: solid;\n padding-top: 0px;\n border-bottom-left-radius: 0px;\n padding-bottom: 0px;\n border-bottom-right-radius: 0px;\n border-right-color: #000000;\n border-bottom-color: #000000;\n border-top-right-radius: 0px;\n}\n\n.comp-mqryiqa5 .g-row {\n display: flex;\n justify-content: space-between;\n align-items: baseline;\n}\n\n.comp-mqryiqa5 .g-title {\n text-decoration-line: none;\n background-color: transparent;\n text-transform: none;\n text-shadow: none;\n padding-right: 20px;\n color: #ffffff;\n text-align: center;\n padding-top: 12px;\n font: normal normal 700 36px/1.2em 'Madefor', sans-serif;\n letter-spacing: 0em;\n line-height: 1.2em;\n padding-bottom: 12px;\n font-size: 24px;\n padding-left: 20px;\n display: none;\n}\n\n.comp-mqryiqa5 .g-counter {\n text-decoration-line: none;\n background-color: #ffffff;\n text-transform: none;\n text-shadow: 1px 0px transparent, -1px 0px transparent, 0px 1px transparent, 0px -1px transparent;\n padding-right: 20px;\n color: #ffffff;\n text-align: center;\n padding-top: 12px;\n font: normal normal 400 16px/1.5em 'Madefor', sans-serif;\n letter-spacing: 0em;\n line-height: 1.4em;\n padding-bottom: 12px;\n font-size: 15px;\n padding-left: 20px;\n display: none;\n}\n\n.comp-mqryiqa5 .g-desc {\n text-decoration-line: none;\n background-color: rgba(255, 255, 255, 0);\n text-transform: none;\n text-shadow: 1px 0px transparent, -1px 0px transparent, 0px 1px transparent, 0px -1px transparent;\n padding-right: 20px;\n color: rgba(255, 255, 255, 1);\n text-align: center;\n padding-top: 0px;\n font: normal normal 400 16px/1.5em 'Madefor', sans-serif;\n letter-spacing: 0em;\n line-height: 1.4em;\n padding-bottom: 12px;\n font-size: 15px;\n padding-left: 20px;\n display: none;\n}\n\n.comp-mqryiq9y5 {\n margin-left: 36.96%;\n margin-right: 0%;\n margin-top: 4.438px;\n margin-bottom: 59.805px;\n width: 45.6%;\n min-width: 0px;\n max-width: 99999px;\n grid-column-start: 1;\n grid-column-end: 2;\n grid-row-start: 2;\n grid-row-end: 3;\n place-self: start;\n color: #000000;\n font: normal normal 400 16px/1.5em 'Madefor', sans-serif;\n letter-spacing: 0em;\n mix-blend-mode: normal;\n}\n\n.comp-mqryiq9y5 :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, blockquote, figure) {\n margin: 0;\n font: inherit;\n color: inherit;\n letter-spacing: inherit;\n}"
+ }
+ ],
+ "score": 5,
+ "notes": "it got the ranges wrong and finishes the scroll prematurel; which results in the final image not scrolling into screen and shown"
+ },
+ {
+ "round": 2,
+ "guideline": "# Diagonal Shuffle\n\nCards fly in diagonally from alternating corners, rotating and scaling into a loose center stack as the section scrolls.\n\n## Summary\n\n- **ID:** `diagonal-shuffle`\n- **Target shape:** Best for 3–7 similarly sized sibling cards absolutely centered inside one sticky viewport stage, where each card can animate independently over a staggered scroll range.\n- **Description:** Five centered cards each fly in from an alternating bottom corner (odd from bottom-left, even from bottom-right), un-rotating and scaling up to settle at a slight tilt as the section scrolls past.\n\n## Demo HTML\n\n```html\n\n\n \n```\n\n## Selector Contract\n\n1. Role ownership is strict: `scrollSource` owns the tall runway, `stickyStage` owns sticky pinning + clipping + perspective, and `repeatedCard` owns absolute centering plus the diagonal fly-in transform.\n2. Repeated cards are absolute children centered on `stickyStage` via `top/left: 50%` + a base `translate(-50%, -50%)`. Every keyframe transform MUST re-declare that centering translate before adding the fly-in offset, or the cards jump off center.\n3. This pattern has no `collection` grid role — cards stack directly on the sticky stage. Do not introduce a flex/grid wrapper that removes the absolute centering.\n4. Keep the fly-in transform on the card roots, not on raw `img` descendants; the `img` fills the card via `object-cover` and must not carry the animation.\n5. Use rendered `#comp-...` ids for cards, never `DESKTOP--...` ids. In Wix, map `stickyStage` to the internal-container-root `#comp-...` and place the absolutely-centered cards inside it.\n\n## Role Guidance\n\n| Role | Guidance |\n| --- | --- |\n| `scrollSource` | The tall section that drives the shared `viewProgress` trigger for every card. |\n| `stickyStage` | A sticky viewport-sized wrapper that pins during scroll, clips the flying cards, and provides `perspective` for depth. |\n| `repeatedCard` | Absolutely centered sibling cards that each fly in from an alternating corner over a staggered range. |\n\n## Adaptation Notes\n\n1. Alternate the fly-in side by index: odd cards enter from bottom-left (negative X, negative rotate), even cards from bottom-right (positive X, positive rotate). Preserve the small settle rotation so the final stack stays loose, not perfectly aligned.\n2. Stagger each card's range across the scroll source. Demo uses `start = 5 + (n-1)·15`, `end = start + 20` (percent of `cover`), giving a 5% overlap between consecutive cards. Recompute the step from the real card count so the last card finishes before scroll end.\n3. Size the runway from card count: more cards need a longer `scroll-section` height. The demo's `450vh` covers five staggered ranges; scale roughly `~90vh` per card plus intro/outro slack.\n4. Off-screen distances are viewport-relative (`±80vw`, `50vh`); keep them in `vw/vh` so the entrance clears the frame on any width. Reduce the distance if cards feel too far-flung on wide screens.\n5. Cards start visible (`opacity: 1`) and rely on being off-stage + clipped by `overflow: clip`; if you instead fade them, add an opacity keyframe rather than the base `opacity: 0` default.\n6. Reject the pattern if you cannot keep a distinct sticky stage that both pins and clips the absolutely-centered cards.\n\n## Required Elements\n\n| Key | Role | Demo Selector | Purpose |\n| --- | --- | --- | --- |\n| `scrollSection` | `scrollSource` | `#scroll-section` | The `viewProgress` source for all card effects. |\n| `stickyStage` | `stickyStage` | `#scroll-section .sticky-wrapper` | Sticky pin + clip + perspective. Wix: `#comp-...` with `data-testid=\"internal-container-root\"`. |\n| `card1` | `repeatedCard` | `#card-1` | Minimum repeated fly-in card (odd → from left); extend outward for `card4..cardN`. |\n| `card2` | `repeatedCard` | `#card-2` | Repeated fly-in card (even → from right). |\n| `card3` | `repeatedCard` | `#card-3` | Repeated fly-in card (odd → from left). |\n| `card4` | `repeatedCard` | `#card-4` | Repeated fly-in card (even → from right). |\n| `card5` | `repeatedCard` | `#card-5` | Repeated fly-in card (odd → from left). |\n\n> Repeated card keys must keep their trailing index (`card1`, `card2`, …) so they compact into the `card{n}` group; extend the row as `card4..cardN` for more items, alternating entry side by parity.\n\n## Required Styles\n\n### `scrollSource` — `#scroll-section`\n\n```css\n#scroll-section {\n position: relative;\n height: 450vh;\n}\n```\n\nReason: creates enough scroll distance for all five staggered fly-in ranges to play out.\n\n### `stickyStage` — `#scroll-section .sticky-wrapper`\n\n```css\n#scroll-section .sticky-wrapper {\n position: sticky;\n top: 0;\n height: 100vh;\n width: 100vw;\n overflow: clip;\n perspective: 1200px;\n}\n```\n\nReason: pins the stage to the viewport, clips the off-screen cards without breaking ViewTimeline (`clip`, not `hidden`), and adds depth for the tilt.\n\n### `repeatedCard` — `#scroll-section .card`\n\n```css\n#scroll-section .card {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 90vw;\n max-width: 400px;\n aspect-ratio: 3 / 4;\n border-radius: 1rem;\n transform-style: preserve-3d;\n will-change: transform, opacity;\n overflow: hidden;\n}\n\n@media (min-width: 768px) {\n #scroll-section .card {\n aspect-ratio: 4 / 3;\n }\n}\n```\n\nReason: absolutely centers each card on the stage and establishes the base box the keyframe transforms build on; the base `translate(-50%, -50%)` in the animation depends on this centering.\n\n## Suggested Controls\n\nExpose the fly-in distance and the entrance scale by default; add scroll length only when the section owns its own runway height.\n\n### `fly-distance`\n\n- **Label:** `Fly-In Distance`\n- **Group:** `Motion`\n- **Type:** `range`\n- **Default:** `80`\n- **Description:** How far off-screen (horizontally) each card starts before shuffling to center.\n- **Constraints:** `min: 40`, `max: 100`, `step: 5`, `unit: vw`\n- **Binding:** `variable` `--card-fly-distance` using template `${value}vw`\n\n### `start-scale`\n\n- **Label:** `Entrance Scale`\n- **Group:** `Motion`\n- **Type:** `range`\n- **Default:** `0.7`\n- **Description:** The scale of each card at the start of its fly-in, before it grows to full size.\n- **Constraints:** `min: 0.5`, `max: 1`, `step: 0.05`, `unit: x`\n- **Binding:** `variable` `--card-start-scale` using a direct value\n\n### `scroll-length`\n\n- **Label:** `Scroll Length`\n- **Group:** `Layout`\n- **Type:** `range`\n- **Default:** `450`\n- **Description:** Total scroll runway height; increase for more cards or slower shuffling.\n- **Constraints:** `min: 300`, `max: 700`, `step: 25`, `unit: vh`\n- **Binding:** `style` `#scroll-section` property `height` using template `${value}vh`\n\n## Interact Template\n\n```ts\nconst EASING = 'ease-out';\n\n// Per-card staggered range: start = 5 + (n-1)*15, end = start + 20 (percent of 'cover').\n// Recompute the step and count from the real number of cards.\nconst cardRange = (index: number) => ({\n rangeStart: { name: 'cover', offset: { unit: 'percentage', value: 5 + index * 15 } },\n rangeEnd: { name: 'cover', offset: { unit: 'percentage', value: 25 + index * 15 } },\n easing: EASING,\n fill: 'both' as const,\n});\n\n// Odd cards fly in from bottom-left, even from bottom-right; small settle rotation keeps the stack loose.\n// --card-fly-distance (default 80vw) and --card-start-scale (default 0.7) drive the entrance.\nconst flyInEffect = (key: string, index: number, settleRotate: number) => {\n const fromLeft = index % 2 === 0; // index 0,2,4 => card1,card3,card5 => left\n const dx = fromLeft ? 'calc(-1 * var(--card-fly-distance, 80vw))' : 'var(--card-fly-distance, 80vw)';\n const startRotate = fromLeft ? -45 : 45;\n return {\n key,\n keyframeEffect: {\n name: `${key}-fly-in`,\n keyframes: [\n {\n transform: `translate(-50%, -50%) translate(${dx}, 50vh) rotate(${startRotate}deg) scale(var(--card-start-scale, 0.7))`,\n opacity: 1,\n },\n {\n transform: `translate(-50%, -50%) translate(0, 0) rotate(${settleRotate}deg) scale(1)`,\n opacity: 1,\n },\n ],\n },\n ...cardRange(index),\n };\n};\n\n// Final settle tilts taper toward 0 on the last card — recompute for a different count.\nconst SETTLE_ROTATIONS = [-4, 3, -2, 1, 0];\n\nconst interactions = SETTLE_ROTATIONS.map((rotate, index) => ({\n key: 'scrollSection',\n trigger: 'viewProgress',\n effects: [flyInEffect(`card${index + 1}`, index, rotate)],\n}));\n```",
+ "sections": [
+ {
+ "id": "portfolio",
+ "config": "{\n \"$schema\": \"interact-experience/1.0\",\n \"id\": \"diagonal-shuffle-comp-mqryiq7r\",\n \"name\": \"Diagonal Shuffle\",\n \"description\": \"The four gallery cards fly in diagonally from alternating bottom corners, un-rotating and scaling up to settle in a loose centered stack on a sticky stage as the section scrolls.\",\n \"elements\": {\n \"scrollSection\": {\n \"selector\": \".comp-mqryiq7r\"\n },\n \"stickyStage\": {\n \"selector\": \".comp-mqryiqa5\"\n },\n \"card1\": {\n \"selector\": \".comp-mqryiqa5 .g-item:nth-child(1)\"\n },\n \"card2\": {\n \"selector\": \".comp-mqryiqa5 .g-item:nth-child(2)\"\n },\n \"card3\": {\n \"selector\": \".comp-mqryiqa5 .g-item:nth-child(3)\"\n },\n \"card4\": {\n \"selector\": \".comp-mqryiqa5 .g-item:nth-child(4)\"\n }\n },\n \"styles\": [\n {\n \"selector\": \".comp-mqryiq7r\",\n \"properties\": {\n \"position\": \"relative\",\n \"height\": \"400vh\",\n \"max-height\": \"none\",\n \"--card-fly-distance\": \"80vw\",\n \"--card-start-scale\": \"0.7\"\n }\n },\n {\n \"selector\": \".comp-mqryiq7r__content\",\n \"properties\": {\n \"grid-template-rows\": \"min-content min-content 1fr\"\n }\n },\n {\n \"selector\": \".comp-mqryiqa5\",\n \"properties\": {\n \"display\": \"block\",\n \"position\": \"sticky\",\n \"top\": \"0\",\n \"height\": \"100vh\",\n \"width\": \"100%\",\n \"margin-left\": \"0\",\n \"margin-bottom\": \"0\",\n \"overflow\": \"clip\",\n \"perspective\": \"1200px\"\n }\n },\n {\n \"selector\": \".comp-mqryiqa5 .g-item\",\n \"properties\": {\n \"position\": \"absolute\",\n \"top\": \"50%\",\n \"left\": \"50%\",\n \"width\": \"90vw\",\n \"max-width\": \"400px\",\n \"transform\": \"translate(-50%, -50%)\",\n \"transform-style\": \"preserve-3d\",\n \"will-change\": \"transform\"\n }\n },\n {\n \"selector\": \".comp-mqryiqa5 .g-item .ph-box\",\n \"properties\": {\n \"width\": \"100%\"\n }\n }\n ],\n \"interact\": {\n \"effects\": {},\n \"conditions\": {\n \"motion-ok\": {\n \"type\": \"media\",\n \"predicate\": \"(prefers-reduced-motion: no-preference)\"\n }\n },\n \"interactions\": [\n {\n \"id\": \"cards-diagonal-shuffle\",\n \"key\": \"scrollSection\",\n \"trigger\": \"viewProgress\",\n \"conditions\": [\"motion-ok\"],\n \"effects\": [\n {\n \"key\": \"card1\",\n \"keyframeEffect\": {\n \"name\": \"card1-fly-in\",\n \"keyframes\": [\n {\n \"transform\": \"translate(-50%, -50%) translate(calc(-1 * var(--card-fly-distance, 80vw)), 50vh) rotate(-45deg) scale(var(--card-start-scale, 0.7))\",\n \"opacity\": 1\n },\n {\n \"transform\": \"translate(-50%, -50%) translate(0px, 0px) rotate(-4deg) scale(1)\",\n \"opacity\": 1\n }\n ]\n },\n \"rangeStart\": { \"name\": \"cover\", \"offset\": { \"value\": 5, \"unit\": \"percentage\" } },\n \"rangeEnd\": { \"name\": \"cover\", \"offset\": { \"value\": 25, \"unit\": \"percentage\" } },\n \"easing\": \"ease-out\",\n \"fill\": \"both\"\n },\n {\n \"key\": \"card2\",\n \"keyframeEffect\": {\n \"name\": \"card2-fly-in\",\n \"keyframes\": [\n {\n \"transform\": \"translate(-50%, -50%) translate(var(--card-fly-distance, 80vw), 50vh) rotate(45deg) scale(var(--card-start-scale, 0.7))\",\n \"opacity\": 1\n },\n {\n \"transform\": \"translate(-50%, -50%) translate(0px, 0px) rotate(3deg) scale(1)\",\n \"opacity\": 1\n }\n ]\n },\n \"rangeStart\": { \"name\": \"cover\", \"offset\": { \"value\": 25, \"unit\": \"percentage\" } },\n \"rangeEnd\": { \"name\": \"cover\", \"offset\": { \"value\": 45, \"unit\": \"percentage\" } },\n \"easing\": \"ease-out\",\n \"fill\": \"both\"\n },\n {\n \"key\": \"card3\",\n \"keyframeEffect\": {\n \"name\": \"card3-fly-in\",\n \"keyframes\": [\n {\n \"transform\": \"translate(-50%, -50%) translate(calc(-1 * var(--card-fly-distance, 80vw)), 50vh) rotate(-45deg) scale(var(--card-start-scale, 0.7))\",\n \"opacity\": 1\n },\n {\n \"transform\": \"translate(-50%, -50%) translate(0px, 0px) rotate(-2deg) scale(1)\",\n \"opacity\": 1\n }\n ]\n },\n \"rangeStart\": { \"name\": \"cover\", \"offset\": { \"value\": 45, \"unit\": \"percentage\" } },\n \"rangeEnd\": { \"name\": \"cover\", \"offset\": { \"value\": 65, \"unit\": \"percentage\" } },\n \"easing\": \"ease-out\",\n \"fill\": \"both\"\n },\n {\n \"key\": \"card4\",\n \"keyframeEffect\": {\n \"name\": \"card4-fly-in\",\n \"keyframes\": [\n {\n \"transform\": \"translate(-50%, -50%) translate(var(--card-fly-distance, 80vw), 50vh) rotate(45deg) scale(var(--card-start-scale, 0.7))\",\n \"opacity\": 1\n },\n {\n \"transform\": \"translate(-50%, -50%) translate(0px, 0px) rotate(0deg) scale(1)\",\n \"opacity\": 1\n }\n ]\n },\n \"rangeStart\": { \"name\": \"cover\", \"offset\": { \"value\": 65, \"unit\": \"percentage\" } },\n \"rangeEnd\": { \"name\": \"cover\", \"offset\": { \"value\": 85, \"unit\": \"percentage\" } },\n \"easing\": \"ease-out\",\n \"fill\": \"both\"\n }\n ]\n }\n ]\n },\n \"controls\": [\n {\n \"id\": \"fly-distance\",\n \"label\": \"Fly-In Distance\",\n \"description\": \"How far off-screen (horizontally) each card starts before shuffling to center.\",\n \"group\": \"Motion\",\n \"type\": \"range\",\n \"defaultValue\": 80,\n \"constraints\": { \"min\": 40, \"max\": 100, \"step\": 5, \"unit\": \"vw\" },\n \"bindings\": [\n {\n \"target\": \"variable\",\n \"targetId\": \"--card-fly-distance\",\n \"transform\": { \"type\": \"template\", \"template\": \"${value}vw\" }\n }\n ]\n },\n {\n \"id\": \"start-scale\",\n \"label\": \"Entrance Scale\",\n \"description\": \"The scale of each card at the start of its fly-in, before it grows to full size.\",\n \"group\": \"Motion\",\n \"type\": \"range\",\n \"defaultValue\": 0.7,\n \"constraints\": { \"min\": 0.5, \"max\": 1, \"step\": 0.05, \"unit\": \"x\" },\n \"bindings\": [\n {\n \"target\": \"variable\",\n \"targetId\": \"--card-start-scale\",\n \"transform\": { \"type\": \"direct\" }\n }\n ]\n },\n {\n \"id\": \"scroll-length\",\n \"label\": \"Scroll Length\",\n \"description\": \"Total scroll runway height; increase for slower shuffling.\",\n \"group\": \"Layout\",\n \"type\": \"range\",\n \"defaultValue\": 400,\n \"constraints\": { \"min\": 300, \"max\": 700, \"step\": 25, \"unit\": \"vh\" },\n \"bindings\": [\n {\n \"target\": \"style\",\n \"targetId\": \".comp-mqryiq7r\",\n \"property\": \"height\",\n \"transform\": { \"type\": \"template\", \"template\": \"${value}vh\" }\n }\n ]\n },\n {\n \"id\": \"card-width\",\n \"label\": \"Card Width\",\n \"description\": \"Maximum width of each stacked card on the sticky stage.\",\n \"group\": \"Layout\",\n \"type\": \"range\",\n \"defaultValue\": 400,\n \"constraints\": { \"min\": 260, \"max\": 640, \"step\": 20, \"unit\": \"px\" },\n \"bindings\": [\n {\n \"target\": \"style\",\n \"targetId\": \".comp-mqryiqa5 .g-item\",\n \"property\": \"max-width\",\n \"transform\": { \"type\": \"template\", \"template\": \"${value}px\" }\n }\n ]\n }\n ],\n \"disableWhen\": [\n {\n \"mediaQuery\": \"(prefers-reduced-motion: reduce)\",\n \"label\": \"Reduced motion\"\n }\n ],\n \"meta\": {\n \"category\": \"scroll\",\n \"tags\": [\"diagonal-shuffle\", \"viewProgress\", \"sticky\", \"cards\", \"stack\"]\n }\n}",
+ "html": "\n \n ",
+ "css": ".container {\n position: relative;\n width: 100%;\n height: 100%;\n}\n\n.backgroundLayer {\n position: absolute;\n inset: 0;\n overflow: clip;\n}\n\n.backgroundLayer .background {\n position: absolute;\n inset: 0;\n background-size: cover;\n background-position: center;\n}\n\n.content {\n position: relative;\n}\n\n.presetWrapper {\n display: contents;\n}\n\n.image3,\n.imageLayer {\n width: 100%;\n height: 100%;\n}\n\n.imageLayer {\n overflow: hidden;\n}\n\n.imageLayer > img {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n.logo-wrapper .linkLayer {\n display: block;\n width: 100%;\n height: 100%;\n}\n\n.logo-wrapper img {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: contain;\n}\n\n.line-wrapper {\n display: flex;\n align-items: center;\n}\n\n.line-wrapper > .line {\n width: 100%;\n border-top: 1px solid currentColor;\n}\n\n.menu .navbar {\n display: flex;\n}\n\n.ph-box {\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n background: #ededed;\n border: 1px dashed #c4c4c4;\n font: 500 13px/1.3 system-ui, -apple-system, sans-serif;\n color: #8a8a8a;\n letter-spacing: 0.04em;\n}\n\n.imageLayer > .ph-box,\n.logo-wrapper > .ph-box {\n width: 100%;\n height: 100%;\n}\n\n.comp-mqryiq7r {\n height: auto;\n min-height: 0px;\n max-height: 99999px;\n}\n\n.comp-mqryiq7r__bg {\n border-bottom-style: solid;\n border-bottom-width: 0px;\n border-bottom-color: transparent;\n border-start-end-radius: 0px;\n box-shadow: none;\n border-inline-end-width: 0px;\n border-top-width: 0px;\n border-inline-start-color: transparent;\n border-start-start-radius: 0px;\n border-inline-start-width: 0px;\n border-top-style: solid;\n border-end-start-radius: 0px;\n border-inline-start-style: solid;\n border-inline-end-style: solid;\n border-inline-end-color: transparent;\n border-top-color: transparent;\n border-end-end-radius: 0px;\n background-color: #ffffff;\n}\n\n.comp-mqryiq7r__content {\n display: grid;\n grid-template-columns: repeat(1, minmax(0, 1fr));\n grid-template-rows: min-content min-content 1fr;\n}\n\n.comp-mqryiq8r3 {\n margin-left: 3.91%;\n margin-right: 0%;\n margin-top: 68px;\n margin-bottom: 4px;\n width: 23.6%;\n min-width: 0px;\n max-width: 99999px;\n grid-column-start: 1;\n grid-column-end: 2;\n grid-row-start: 1;\n grid-row-end: 2;\n place-self: start;\n color: #000000;\n font: normal normal 400 18px/1.5em 'Madefor', sans-serif;\n letter-spacing: 0em;\n mix-blend-mode: normal;\n}\n\n.comp-mqryiq8r3 :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, blockquote, figure) {\n margin: 0;\n font: inherit;\n color: inherit;\n letter-spacing: inherit;\n}\n\n.comp-mqryiq9r {\n margin-left: 3.91%;\n margin-right: 0%;\n margin-bottom: 73.836px;\n width: 29.4%;\n min-width: 0px;\n max-width: 99999px;\n grid-column-start: 1;\n grid-column-end: 2;\n grid-row-start: 2;\n grid-row-end: 3;\n place-self: start;\n color: #000000;\n font: normal normal 700 22px/1.3em 'Madefor', sans-serif;\n letter-spacing: 0em;\n mix-blend-mode: normal;\n}\n\n.comp-mqryiq9r :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, blockquote, figure) {\n margin: 0;\n font: inherit;\n color: inherit;\n letter-spacing: inherit;\n}\n\n.comp-mqryiqa5 {\n margin-left: 3.91%;\n margin-right: 0%;\n margin-bottom: 86.297px;\n width: 92.2%;\n min-width: 0px;\n max-width: 99999px;\n grid-column-start: 1;\n grid-column-end: 2;\n grid-row-start: 3;\n grid-row-end: 4;\n place-self: start;\n border-bottom-left-radius: 0px;\n border-left-color: #000000;\n padding-left: 0px;\n padding-top: 0px;\n border-left-width: 0px;\n padding-bottom: 0px;\n border-right-style: solid;\n border-right-color: #000000;\n border-bottom-width: 0px;\n border-bottom-right-radius: 0px;\n background-color: transparent;\n padding-right: 0px;\n border-top-style: solid;\n border-left-style: solid;\n border-top-right-radius: 0px;\n border-right-width: 0px;\n border-bottom-style: solid;\n box-shadow: 0px 0px 30px 1px rgba(0, 0, 0, 0);\n border-top-color: #000000;\n border-top-width: 0px;\n border-bottom-color: #000000;\n border-top-left-radius: 0px;\n}\n\n.comp-mqryiqa5 {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n column-gap: 11px;\n row-gap: 11px;\n}\n\n.comp-mqryiqa5 .g-item {\n display: flex;\n flex-direction: column;\n border-bottom-width: 0px;\n border-left-color: #000000;\n border-top-style: solid;\n border-left-style: solid;\n padding-top: 0px;\n border-left-width: 0px;\n border-top-left-radius: 0px;\n border-top-right-radius: 0px;\n border-bottom-color: #000000;\n border-top-width: 0px;\n border-top-color: #000000;\n border-bottom-style: solid;\n padding-bottom: 0px;\n padding-left: 0px;\n box-shadow: 0px 0px 30px 1px rgba(0, 0, 0, 0);\n border-right-style: solid;\n padding-right: 0px;\n border-right-width: 0px;\n border-right-color: #000000;\n background-color: transparent;\n border-bottom-left-radius: 0px;\n border-bottom-right-radius: 0px;\n}\n\n.comp-mqryiqa5 .g-image {\n box-sizing: border-box;\n padding-left: 0px;\n background-color: transparent;\n border-top-left-radius: 0px;\n border-top-color: #000000;\n border-right-style: solid;\n border-left-style: solid;\n border-left-color: #000000;\n border-bottom-width: 0px;\n border-bottom-style: solid;\n padding-right: 0px;\n border-right-width: 0px;\n box-shadow: 0px 0px 30px 1px rgba(0, 0, 0, 0);\n border-top-width: 0px;\n border-left-width: 0px;\n border-top-style: solid;\n padding-top: 0px;\n border-bottom-left-radius: 0px;\n padding-bottom: 0px;\n border-bottom-right-radius: 0px;\n border-right-color: #000000;\n border-bottom-color: #000000;\n border-top-right-radius: 0px;\n}\n\n.comp-mqryiqa5 .g-row {\n display: flex;\n justify-content: space-between;\n align-items: baseline;\n}\n\n.comp-mqryiqa5 .g-title {\n text-decoration-line: none;\n background-color: transparent;\n text-transform: none;\n text-shadow: none;\n padding-right: 20px;\n color: #ffffff;\n text-align: center;\n padding-top: 12px;\n font: normal normal 700 36px/1.2em 'Madefor', sans-serif;\n letter-spacing: 0em;\n line-height: 1.2em;\n padding-bottom: 12px;\n font-size: 24px;\n padding-left: 20px;\n display: none;\n}\n\n.comp-mqryiqa5 .g-counter {\n text-decoration-line: none;\n background-color: #ffffff;\n text-transform: none;\n text-shadow: 1px 0px transparent, -1px 0px transparent, 0px 1px transparent, 0px -1px transparent;\n padding-right: 20px;\n color: #ffffff;\n text-align: center;\n padding-top: 12px;\n font: normal normal 400 16px/1.5em 'Madefor', sans-serif;\n letter-spacing: 0em;\n line-height: 1.4em;\n padding-bottom: 12px;\n font-size: 15px;\n padding-left: 20px;\n display: none;\n}\n\n.comp-mqryiqa5 .g-desc {\n text-decoration-line: none;\n background-color: rgba(255, 255, 255, 0);\n text-transform: none;\n text-shadow: 1px 0px transparent, -1px 0px transparent, 0px 1px transparent, 0px -1px transparent;\n padding-right: 20px;\n color: rgba(255, 255, 255, 1);\n text-align: center;\n padding-top: 0px;\n font: normal normal 400 16px/1.5em 'Madefor', sans-serif;\n letter-spacing: 0em;\n line-height: 1.4em;\n padding-bottom: 12px;\n font-size: 15px;\n padding-left: 20px;\n display: none;\n}\n\n.comp-mqryiq9y5 {\n margin-left: 36.96%;\n margin-right: 0%;\n margin-top: 4.438px;\n margin-bottom: 59.805px;\n width: 45.6%;\n min-width: 0px;\n max-width: 99999px;\n grid-column-start: 1;\n grid-column-end: 2;\n grid-row-start: 2;\n grid-row-end: 3;\n place-self: start;\n color: #000000;\n font: normal normal 400 16px/1.5em 'Madefor', sans-serif;\n letter-spacing: 0em;\n mix-blend-mode: normal;\n}\n\n.comp-mqryiq9y5 :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, blockquote, figure) {\n margin: 0;\n font: inherit;\n color: inherit;\n letter-spacing: inherit;\n}"
+ },
+ {
+ "id": "grid-cards 2",
+ "config": "{\n \"$schema\": \"interact-experience/1.0\",\n \"id\": \"diagonal-shuffle-comp-mqs0pkfm\",\n \"name\": \"Diagonal Shuffle\",\n \"description\": \"Six content cards fly in diagonally from alternating bottom corners, un-rotating and scaling up to settle into a loose center stack on a sticky stage as the section scrolls.\",\n \"elements\": {\n \"scrollSection\": {\n \"selector\": \".comp-mqs0pkfm\"\n },\n \"stickyStage\": {\n \"selector\": \".comp-mqs0pkfm__content\"\n },\n \"card1\": {\n \"selector\": \".comp-mqs0pkfu\"\n },\n \"card2\": {\n \"selector\": \".comp-mqs0pkgz\"\n },\n \"card3\": {\n \"selector\": \".comp-mqs0pkj02\"\n },\n \"card4\": {\n \"selector\": \".comp-mqs0pkkb1\"\n },\n \"card5\": {\n \"selector\": \".comp-mqs0pkld2\"\n },\n \"card6\": {\n \"selector\": \".comp-mqs0pkme4\"\n }\n },\n \"styles\": [\n {\n \"selector\": \".comp-mqs0pkfm\",\n \"properties\": {\n \"position\": \"relative\",\n \"height\": \"550vh\",\n \"max-height\": \"none\"\n }\n },\n {\n \"selector\": \".comp-mqs0pkfm__content\",\n \"properties\": {\n \"display\": \"block\",\n \"position\": \"sticky\",\n \"top\": \"0\",\n \"height\": \"100vh\",\n \"width\": \"100%\",\n \"overflow\": \"clip\",\n \"perspective\": \"1200px\"\n }\n },\n {\n \"selector\": \".comp-mqs0pkfu, .comp-mqs0pkgz, .comp-mqs0pkj02, .comp-mqs0pkkb1, .comp-mqs0pkld2, .comp-mqs0pkme4\",\n \"properties\": {\n \"position\": \"absolute\",\n \"top\": \"50%\",\n \"left\": \"50%\",\n \"margin\": \"0\",\n \"width\": \"90vw\",\n \"max-width\": \"400px\",\n \"height\": \"auto\",\n \"min-height\": \"260px\",\n \"transform\": \"translate(-50%, -50%)\",\n \"transform-style\": \"preserve-3d\",\n \"will-change\": \"transform\",\n \"border-radius\": \"1rem\",\n \"overflow\": \"clip\",\n \"box-shadow\": \"0 24px 48px rgba(0, 0, 0, 0.25)\"\n }\n },\n {\n \"selector\": \".comp-mqs0pkhv1, .comp-mqs0pkig2, .comp-mqs0pkjs4, .comp-mqs0pkl41, .comp-mqs0pkm53, .comp-mqs0pkn62, .comp-mqs0pkng2\",\n \"properties\": {\n \"display\": \"none\"\n }\n },\n {\n \"selector\": \".comp-mqs0pkfu, .comp-mqs0pkgz, .comp-mqs0pkj02, .comp-mqs0pkkb1, .comp-mqs0pkld2, .comp-mqs0pkme4\",\n \"mediaQuery\": \"(max-width: 767px)\",\n \"properties\": {\n \"max-width\": \"340px\"\n }\n }\n ],\n \"interact\": {\n \"effects\": {},\n \"conditions\": {\n \"reduced-motion-ok\": {\n \"type\": \"media\",\n \"predicate\": \"(prefers-reduced-motion: no-preference)\"\n }\n },\n \"interactions\": [\n {\n \"id\": \"diagonal-shuffle-scroll\",\n \"key\": \"scrollSection\",\n \"trigger\": \"viewProgress\",\n \"conditions\": [\"reduced-motion-ok\"],\n \"effects\": [\n {\n \"key\": \"card1\",\n \"keyframeEffect\": {\n \"name\": \"card1-fly-in\",\n \"keyframes\": [\n {\n \"transform\": \"translate(-50%, -50%) translate(calc(-1 * var(--card-fly-distance, 80vw)), 50vh) rotate(-45deg) scale(var(--card-start-scale, 0.7))\",\n \"opacity\": 1\n },\n {\n \"transform\": \"translate(-50%, -50%) translate(0, 0) rotate(-4deg) scale(1)\",\n \"opacity\": 1\n }\n ]\n },\n \"rangeStart\": { \"name\": \"cover\", \"offset\": { \"value\": 5, \"unit\": \"percentage\" } },\n \"rangeEnd\": { \"name\": \"cover\", \"offset\": { \"value\": 23, \"unit\": \"percentage\" } },\n \"easing\": \"ease-out\",\n \"fill\": \"both\"\n },\n {\n \"key\": \"card2\",\n \"keyframeEffect\": {\n \"name\": \"card2-fly-in\",\n \"keyframes\": [\n {\n \"transform\": \"translate(-50%, -50%) translate(var(--card-fly-distance, 80vw), 50vh) rotate(45deg) scale(var(--card-start-scale, 0.7))\",\n \"opacity\": 1\n },\n {\n \"transform\": \"translate(-50%, -50%) translate(0, 0) rotate(3deg) scale(1)\",\n \"opacity\": 1\n }\n ]\n },\n \"rangeStart\": { \"name\": \"cover\", \"offset\": { \"value\": 18, \"unit\": \"percentage\" } },\n \"rangeEnd\": { \"name\": \"cover\", \"offset\": { \"value\": 36, \"unit\": \"percentage\" } },\n \"easing\": \"ease-out\",\n \"fill\": \"both\"\n },\n {\n \"key\": \"card3\",\n \"keyframeEffect\": {\n \"name\": \"card3-fly-in\",\n \"keyframes\": [\n {\n \"transform\": \"translate(-50%, -50%) translate(calc(-1 * var(--card-fly-distance, 80vw)), 50vh) rotate(-45deg) scale(var(--card-start-scale, 0.7))\",\n \"opacity\": 1\n },\n {\n \"transform\": \"translate(-50%, -50%) translate(0, 0) rotate(-2deg) scale(1)\",\n \"opacity\": 1\n }\n ]\n },\n \"rangeStart\": { \"name\": \"cover\", \"offset\": { \"value\": 31, \"unit\": \"percentage\" } },\n \"rangeEnd\": { \"name\": \"cover\", \"offset\": { \"value\": 49, \"unit\": \"percentage\" } },\n \"easing\": \"ease-out\",\n \"fill\": \"both\"\n },\n {\n \"key\": \"card4\",\n \"keyframeEffect\": {\n \"name\": \"card4-fly-in\",\n \"keyframes\": [\n {\n \"transform\": \"translate(-50%, -50%) translate(var(--card-fly-distance, 80vw), 50vh) rotate(45deg) scale(var(--card-start-scale, 0.7))\",\n \"opacity\": 1\n },\n {\n \"transform\": \"translate(-50%, -50%) translate(0, 0) rotate(2deg) scale(1)\",\n \"opacity\": 1\n }\n ]\n },\n \"rangeStart\": { \"name\": \"cover\", \"offset\": { \"value\": 44, \"unit\": \"percentage\" } },\n \"rangeEnd\": { \"name\": \"cover\", \"offset\": { \"value\": 62, \"unit\": \"percentage\" } },\n \"easing\": \"ease-out\",\n \"fill\": \"both\"\n },\n {\n \"key\": \"card5\",\n \"keyframeEffect\": {\n \"name\": \"card5-fly-in\",\n \"keyframes\": [\n {\n \"transform\": \"translate(-50%, -50%) translate(calc(-1 * var(--card-fly-distance, 80vw)), 50vh) rotate(-45deg) scale(var(--card-start-scale, 0.7))\",\n \"opacity\": 1\n },\n {\n \"transform\": \"translate(-50%, -50%) translate(0, 0) rotate(-1deg) scale(1)\",\n \"opacity\": 1\n }\n ]\n },\n \"rangeStart\": { \"name\": \"cover\", \"offset\": { \"value\": 57, \"unit\": \"percentage\" } },\n \"rangeEnd\": { \"name\": \"cover\", \"offset\": { \"value\": 75, \"unit\": \"percentage\" } },\n \"easing\": \"ease-out\",\n \"fill\": \"both\"\n },\n {\n \"key\": \"card6\",\n \"keyframeEffect\": {\n \"name\": \"card6-fly-in\",\n \"keyframes\": [\n {\n \"transform\": \"translate(-50%, -50%) translate(var(--card-fly-distance, 80vw), 50vh) rotate(45deg) scale(var(--card-start-scale, 0.7))\",\n \"opacity\": 1\n },\n {\n \"transform\": \"translate(-50%, -50%) translate(0, 0) rotate(0deg) scale(1)\",\n \"opacity\": 1\n }\n ]\n },\n \"rangeStart\": { \"name\": \"cover\", \"offset\": { \"value\": 70, \"unit\": \"percentage\" } },\n \"rangeEnd\": { \"name\": \"cover\", \"offset\": { \"value\": 88, \"unit\": \"percentage\" } },\n \"easing\": \"ease-out\",\n \"fill\": \"both\"\n }\n ]\n }\n ]\n },\n \"controls\": [\n {\n \"id\": \"fly-distance\",\n \"label\": \"Fly-In Distance\",\n \"description\": \"How far off-screen (horizontally) each card starts before shuffling to center.\",\n \"group\": \"Motion\",\n \"type\": \"range\",\n \"defaultValue\": 80,\n \"constraints\": { \"min\": 40, \"max\": 100, \"step\": 5, \"unit\": \"vw\" },\n \"bindings\": [\n {\n \"target\": \"variable\",\n \"targetId\": \"--card-fly-distance\",\n \"transform\": { \"type\": \"template\", \"template\": \"${value}vw\" }\n }\n ]\n },\n {\n \"id\": \"start-scale\",\n \"label\": \"Entrance Scale\",\n \"description\": \"The scale of each card at the start of its fly-in, before it grows to full size.\",\n \"group\": \"Motion\",\n \"type\": \"range\",\n \"defaultValue\": 0.7,\n \"constraints\": { \"min\": 0.5, \"max\": 1, \"step\": 0.05, \"unit\": \"x\" },\n \"bindings\": [\n {\n \"target\": \"variable\",\n \"targetId\": \"--card-start-scale\",\n \"transform\": { \"type\": \"direct\" }\n }\n ]\n },\n {\n \"id\": \"scroll-length\",\n \"label\": \"Scroll Length\",\n \"description\": \"Total scroll runway height; increase for slower shuffling.\",\n \"group\": \"Layout\",\n \"type\": \"range\",\n \"defaultValue\": 550,\n \"constraints\": { \"min\": 350, \"max\": 800, \"step\": 25, \"unit\": \"vh\" },\n \"bindings\": [\n {\n \"target\": \"style\",\n \"targetId\": \".comp-mqs0pkfm\",\n \"property\": \"height\",\n \"transform\": { \"type\": \"template\", \"template\": \"${value}vh\" }\n }\n ]\n },\n {\n \"id\": \"card-width\",\n \"label\": \"Card Width\",\n \"description\": \"Maximum width of each stacked card.\",\n \"group\": \"Layout\",\n \"type\": \"range\",\n \"defaultValue\": 400,\n \"constraints\": { \"min\": 300, \"max\": 640, \"step\": 20, \"unit\": \"px\" },\n \"bindings\": [\n {\n \"target\": \"style\",\n \"targetId\": \".comp-mqs0pkfu, .comp-mqs0pkgz, .comp-mqs0pkj02, .comp-mqs0pkkb1, .comp-mqs0pkld2, .comp-mqs0pkme4\",\n \"property\": \"max-width\",\n \"transform\": { \"type\": \"template\", \"template\": \"${value}px\" }\n }\n ]\n }\n ],\n \"disableWhen\": [\n {\n \"mediaQuery\": \"(prefers-reduced-motion: reduce)\",\n \"label\": \"Reduced motion\"\n }\n ],\n \"meta\": {\n \"category\": \"scroll\",\n \"tags\": [\"diagonal-shuffle\", \"viewProgress\", \"sticky\", \"cards\", \"stack\"]\n }\n}",
+ "html": "\n \n ",
+ "css": ".container {\n position: relative;\n width: 100%;\n height: 100%;\n}\n\n.backgroundLayer {\n position: absolute;\n inset: 0;\n overflow: clip;\n}\n\n.backgroundLayer .background {\n position: absolute;\n inset: 0;\n background-size: cover;\n background-position: center;\n}\n\n.content {\n position: relative;\n}\n\n.presetWrapper {\n display: contents;\n}\n\n.image3,\n.imageLayer {\n width: 100%;\n height: 100%;\n}\n\n.imageLayer {\n overflow: hidden;\n}\n\n.imageLayer > img {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n.logo-wrapper .linkLayer {\n display: block;\n width: 100%;\n height: 100%;\n}\n\n.logo-wrapper img {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: contain;\n}\n\n.line-wrapper {\n display: flex;\n align-items: center;\n}\n\n.line-wrapper > .line {\n width: 100%;\n border-top: 1px solid currentColor;\n}\n\n.menu .navbar {\n display: flex;\n}\n\n.ph-box {\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n background: #ededed;\n border: 1px dashed #c4c4c4;\n font: 500 13px/1.3 system-ui, -apple-system, sans-serif;\n color: #8a8a8a;\n letter-spacing: 0.04em;\n}\n\n.imageLayer > .ph-box,\n.logo-wrapper > .ph-box {\n width: 100%;\n height: 100%;\n}\n\n.comp-mqs0pkfm {\n height: auto;\n min-height: 0px;\n max-height: 99999px;\n}\n\n.comp-mqs0pkfm__bg {\n border-bottom-style: solid;\n border-bottom-width: 0px;\n border-bottom-color: transparent;\n border-start-end-radius: 0px;\n box-shadow: none;\n border-inline-end-width: 0px;\n border-top-width: 0px;\n border-inline-start-color: transparent;\n border-start-start-radius: 0px;\n border-inline-start-width: 0px;\n border-top-style: solid;\n border-end-start-radius: 0px;\n border-inline-start-style: solid;\n border-inline-end-style: solid;\n border-inline-end-color: transparent;\n border-top-color: transparent;\n border-end-end-radius: 0px;\n background-color: #000000;\n}\n\n.comp-mqs0pkfm__content {\n display: grid;\n grid-template-columns: 1fr 1fr;\n grid-template-rows: minmax(164.969px,auto) minmax(276.969px,auto) minmax(210.969px,auto) minmax(278.969px,auto) minmax(208.969px,auto) minmax(283.984px,auto) minmax(207.969px,auto);\n}\n\n.comp-mqs0pkfu {\n margin: 0%;\n width: auto;\n height: auto;\n min-height: 0px;\n max-height: 99999px;\n min-width: 0px;\n max-width: 99999px;\n grid-column-start: 2;\n grid-column-end: 3;\n grid-row-start: 7;\n grid-row-end: 8;\n place-self: stretch;\n}\n\n.comp-mqs0pkfu__bg {\n border-bottom-style: solid;\n border-bottom-width: 1px;\n border-bottom-color: #000000;\n border-start-end-radius: 0px;\n box-shadow: none;\n border-inline-end-width: 0px;\n border-top-width: 0px;\n border-inline-start-color: transparent;\n border-start-start-radius: 0px;\n border-inline-start-width: 0px;\n border-top-style: solid;\n border-end-start-radius: 0px;\n border-inline-start-style: solid;\n border-inline-end-style: solid;\n border-inline-end-color: transparent;\n border-top-color: transparent;\n border-end-end-radius: 0px;\n background-color: #ffffff;\n}\n\n.comp-mqs0pkfu__content {\n padding-bottom: 8.18px;\n display: grid;\n grid-template-columns: repeat(1, minmax(0, 1fr));\n grid-template-rows: min-content min-content 1fr;\n}\n\n.comp-mqs0pkg43 {\n margin-left: 3.13%;\n margin-right: 0%;\n margin-top: 17.891px;\n margin-bottom: 33.836px;\n width: 47.2%;\n min-width: 0px;\n max-width: 99999px;\n grid-column-start: 1;\n grid-column-end: 2;\n grid-row-start: 1;\n grid-row-end: 2;\n place-self: start;\n color: #000000;\n font: normal normal 700 18px/1.3em 'Madefor', sans-serif;\n letter-spacing: 0em;\n mix-blend-mode: normal;\n}\n\n.comp-mqs0pkg43 :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, blockquote, figure) {\n margin: 0;\n font: inherit;\n color: inherit;\n letter-spacing: inherit;\n}\n\n.comp-mqs0pkgc {\n margin-left: 3.13%;\n margin-right: 0%;\n margin-bottom: 30.461px;\n width: 71.8%;\n min-width: 0px;\n max-width: 99999px;\n grid-column-start: 1;\n grid-column-end: 2;\n grid-row-start: 2;\n grid-row-end: 3;\n place-self: start;\n color: #000000;\n font: normal normal 400 14px/1.5em 'Madefor', sans-serif;\n letter-spacing: 0em;\n mix-blend-mode: normal;\n}\n\n.comp-mqs0pkgc :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, blockquote, figure) {\n margin: 0;\n font: inherit;\n color: inherit;\n letter-spacing: inherit;\n}\n\n.comp-mqs0pkgi5 {\n margin-left: 3.28%;\n margin-right: 0%;\n width: 25%;\n height: auto;\n min-height: 32.438px;\n max-height: 99999px;\n min-width: 0px;\n max-width: 99999px;\n grid-column-start: 1;\n grid-column-end: 2;\n grid-row-start: 3;\n grid-row-end: 4;\n place-self: start;\n}\n\n.comp-mqs0pkgz {\n margin: 0%;\n width: auto;\n height: auto;\n min-height: 0px;\n max-height: 99999px;\n min-width: 0px;\n max-width: 99999px;\n grid-column-start: 1;\n grid-column-end: 2;\n grid-row-start: 7;\n grid-row-end: 8;\n place-self: stretch;\n}\n\n.comp-mqs0pkgz__bg {\n border-bottom-style: solid;\n border-bottom-width: 1px;\n border-bottom-color: #000000;\n border-start-end-radius: 0px;\n box-shadow: none;\n border-inline-end-width: 1px;\n border-top-width: 0px;\n border-inline-start-color: transparent;\n border-start-start-radius: 0px;\n border-inline-start-width: 0px;\n border-top-style: solid;\n border-end-start-radius: 0px;\n border-inline-start-style: solid;\n border-inline-end-style: solid;\n border-inline-end-color: #000000;\n border-top-color: transparent;\n border-end-end-radius: 0px;\n background-color: #ffffff;\n}\n\n.comp-mqs0pkgz__content {\n padding-bottom: 8.102px;\n display: grid;\n grid-template-columns: repeat(1, minmax(0, 1fr));\n grid-template-rows: min-content min-content 1fr;\n}\n\n.comp-mqs0pkh6 {\n margin-left: 3.13%;\n margin-right: 0%;\n margin-top: 17.891px;\n margin-bottom: 27.734px;\n width: 47.2%;\n min-width: 0px;\n max-width: 99999px;\n grid-column-start: 1;\n grid-column-end: 2;\n grid-row-start: 1;\n grid-row-end: 2;\n place-self: start;\n color: #000000;\n font: normal normal 700 18px/1.3em 'Madefor', sans-serif;\n letter-spacing: 0em;\n mix-blend-mode: normal;\n}\n\n.comp-mqs0pkh6 :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, blockquote, figure) {\n margin: 0;\n font: inherit;\n color: inherit;\n letter-spacing: inherit;\n}\n\n.comp-mqs0pkhc4 {\n margin-left: 3.13%;\n margin-right: 0%;\n margin-bottom: 36.641px;\n width: 71.8%;\n min-width: 0px;\n max-width: 99999px;\n grid-column-start: 1;\n grid-column-end: 2;\n grid-row-start: 2;\n grid-row-end: 3;\n place-self: start;\n color: #000000;\n font: normal normal 400 14px/1.5em 'Madefor', sans-serif;\n letter-spacing: 0em;\n mix-blend-mode: normal;\n}\n\n.comp-mqs0pkhc4 :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, blockquote, figure) {\n margin: 0;\n font: inherit;\n color: inherit;\n letter-spacing: inherit;\n}\n\n.comp-mqs0pkhj5 {\n margin-left: 3.13%;\n margin-right: 0%;\n width: 25%;\n height: auto;\n min-height: 32.438px;\n max-height: 99999px;\n min-width: 0px;\n max-width: 99999px;\n grid-column-start: 1;\n grid-column-end: 2;\n grid-row-start: 3;\n grid-row-end: 4;\n place-self: start;\n}\n\n.comp-mqs0pkhv1 {\n margin: 0%;\n width: auto;\n height: auto;\n min-height: 0px;\n max-height: 99999px;\n min-width: 0px;\n max-width: 99999px;\n grid-column-start: 2;\n grid-column-end: 3;\n grid-row-start: 6;\n grid-row-end: 7;\n place-self: stretch;\n}\n\n.comp-mqs0pkhv1__bg {\n border-bottom-style: solid;\n border-bottom-width: 1px;\n border-bottom-color: #000000;\n border-start-end-radius: 0px;\n box-shadow: none;\n border-inline-end-width: 0px;\n border-top-width: 0px;\n border-inline-start-color: transparent;\n border-start-start-radius: 0px;\n border-inline-start-width: 0px;\n border-top-style: solid;\n border-end-start-radius: 0px;\n border-inline-start-style: solid;\n border-inline-end-style: solid;\n border-inline-end-color: transparent;\n border-top-color: transparent;\n border-end-end-radius: 0px;\n background-color: #ffffff;\n}\n\n.comp-mqs0pkhv1__content {\n padding-bottom: 18px;\n display: grid;\n grid-template-columns: repeat(1, minmax(0, 1fr));\n grid-template-rows: 1fr;\n}\n\n.comp-mqs0pki14 {\n margin-left: 3.28%;\n margin-right: 0%;\n margin-top: -50.891px;\n width: 25%;\n height: auto;\n min-height: 32.438px;\n max-height: 99999px;\n min-width: 0px;\n max-width: 99999px;\n grid-column-start: 1;\n grid-column-end: 2;\n grid-row-start: 1;\n grid-row-end: 2;\n place-self: start;\n}\n\n.comp-mqs0pkig2 {\n margin: 0%;\n width: auto;\n height: auto;\n min-height: 0px;\n max-height: 99999px;\n min-width: 0px;\n max-width: 99999px;\n grid-column-start: 1;\n grid-column-end: 2;\n grid-row-start: 6;\n grid-row-end: 7;\n place-self: stretch;\n}\n\n.comp-mqs0pkig2__bg {\n border-bottom-style: solid;\n border-bottom-width: 1px;\n border-bottom-color: #000000;\n border-start-end-radius: 0px;\n box-shadow: none;\n border-inline-end-width: 1px;\n border-top-width: 0px;\n border-inline-start-color: transparent;\n border-start-start-radius: 0px;\n border-inline-start-width: 0px;\n border-top-style: solid;\n border-end-start-radius: 0px;\n border-inline-start-style: solid;\n border-inline-end-style: solid;\n border-inline-end-color: #000000;\n border-top-color: transparent;\n border-end-end-radius: 0px;\n background-color: #ffffff;\n}\n\n.comp-mqs0pkig2__content {\n padding-bottom: 18px;\n display: grid;\n grid-template-columns: repeat(1, minmax(0, 1fr));\n grid-template-rows: 1fr;\n}\n\n.comp-mqs0pkim4 {\n margin-left: 3.13%;\n margin-right: 0%;\n margin-top: -51.953px;\n width: 25%;\n height: auto;\n min-height: 32.438px;\n max-height: 99999px;\n min-width: 0px;\n max-width: 99999px;\n grid-column-start: 1;\n grid-column-end: 2;\n grid-row-start: 1;\n grid-row-end: 2;\n place-self: start;\n}\n\n.comp-mqs0pkj02 {\n margin: 0%;\n width: auto;\n height: auto;\n min-height: 0px;\n max-height: 99999px;\n min-width: 0px;\n max-width: 99999px;\n grid-column-start: 2;\n grid-column-end: 3;\n grid-row-start: 5;\n grid-row-end: 6;\n place-self: stretch;\n}\n\n.comp-mqs0pkj02__bg {\n border-bottom-style: solid;\n border-bottom-width: 1px;\n border-bottom-color: #000000;\n border-start-end-radius: 0px;\n box-shadow: none;\n border-inline-end-width: 0px;\n border-top-width: 0px;\n border-inline-start-color: transparent;\n border-start-start-radius: 0px;\n border-inline-start-width: 0px;\n border-top-style: solid;\n border-end-start-radius: 0px;\n border-inline-start-style: solid;\n border-inline-end-style: solid;\n border-inline-end-color: transparent;\n border-top-color: transparent;\n border-end-end-radius: 0px;\n background-color: #ffffff;\n}\n\n.comp-mqs0pkj02__content {\n padding-bottom: 9.203px;\n display: grid;\n grid-template-columns: repeat(1, minmax(0, 1fr));\n grid-template-rows: min-content min-content 1fr;\n}\n\n.comp-mqs0pkj7 {\n margin-left: 3.28%;\n margin-right: 0%;\n margin-top: 18.828px;\n margin-bottom: 31.094px;\n width: 47.2%;\n min-width: 0px;\n max-width: 99999px;\n grid-column-start: 1;\n grid-column-end: 2;\n grid-row-start: 1;\n grid-row-end: 2;\n place-self: start;\n color: #000000;\n font: normal normal 700 18px/1.3em 'Madefor', sans-serif;\n letter-spacing: 0em;\n mix-blend-mode: normal;\n}\n\n.comp-mqs0pkj7 :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, blockquote, figure) {\n margin: 0;\n font: inherit;\n color: inherit;\n letter-spacing: inherit;\n}\n\n.comp-mqs0pkjc5 {\n margin-left: 2.97%;\n margin-right: 0%;\n margin-bottom: 32.242px;\n width: 71.8%;\n min-width: 0px;\n max-width: 99999px;\n grid-column-start: 1;\n grid-column-end: 2;\n grid-row-start: 2;\n grid-row-end: 3;\n place-self: start;\n color: #000000;\n font: normal normal 400 14px/1.5em 'Madefor', sans-serif;\n letter-spacing: 0em;\n mix-blend-mode: normal;\n}\n\n.comp-mqs0pkjc5 :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, blockquote, figure) {\n margin: 0;\n font: inherit;\n color: inherit;\n letter-spacing: inherit;\n}\n\n.comp-mqs0pkjh5 {\n margin-left: 2.97%;\n margin-right: 0%;\n width: 25%;\n height: auto;\n min-height: 32.438px;\n max-height: 99999px;\n min-width: 0px;\n max-width: 99999px;\n grid-column-start: 1;\n grid-column-end: 2;\n grid-row-start: 3;\n grid-row-end: 4;\n place-self: start;\n}\n\n.comp-mqs0pkjs4 {\n margin: 0%;\n width: auto;\n height: auto;\n min-height: 0px;\n max-height: 99999px;\n min-width: 0px;\n max-width: 99999px;\n grid-column-start: 2;\n grid-column-end: 3;\n grid-row-start: 4;\n grid-row-end: 5;\n place-self: stretch;\n}\n\n.comp-mqs0pkjs4__bg {\n border-bottom-style: solid;\n border-bottom-width: 1px;\n border-bottom-color: #000000;\n border-start-end-radius: 0px;\n box-shadow: none;\n border-inline-end-width: 0px;\n border-top-width: 0px;\n border-inline-start-color: transparent;\n border-start-start-radius: 0px;\n border-inline-start-width: 0px;\n border-top-style: solid;\n border-end-start-radius: 0px;\n border-inline-start-style: solid;\n border-inline-end-style: solid;\n border-inline-end-color: transparent;\n border-top-color: transparent;\n border-end-end-radius: 0px;\n background-color: #ffffff;\n}\n\n.comp-mqs0pkjs4__content {\n padding-bottom: 18px;\n display: grid;\n grid-template-columns: repeat(1, minmax(0, 1fr));\n grid-template-rows: 1fr;\n}\n\n.comp-mqs0pkjz4 {\n margin-left: 3.59%;\n margin-right: 0%;\n margin-top: -53.016px;\n width: 25%;\n height: auto;\n min-height: 32.438px;\n max-height: 99999px;\n min-width: 0px;\n max-width: 99999px;\n grid-column-start: 1;\n grid-column-end: 2;\n grid-row-start: 1;\n grid-row-end: 2;\n place-self: start;\n}\n\n.comp-mqs0pkkb1 {\n margin: 0%;\n width: auto;\n height: auto;\n min-height: 0px;\n max-height: 99999px;\n min-width: 0px;\n max-width: 99999px;\n grid-column-start: 1;\n grid-column-end: 2;\n grid-row-start: 5;\n grid-row-end: 6;\n place-self: stretch;\n}\n\n.comp-mqs0pkkb1__bg {\n border-bottom-style: solid;\n border-bottom-width: 1px;\n border-bottom-color: #000000;\n border-start-end-radius: 0px;\n box-shadow: none;\n border-inline-end-width: 1px;\n border-top-width: 0px;\n border-inline-start-color: transparent;\n border-start-start-radius: 0px;\n border-inline-start-width: 0px;\n border-top-style: solid;\n border-end-start-radius: 0px;\n border-inline-start-style: solid;\n border-inline-end-style: solid;\n border-inline-end-color: #000000;\n border-top-color: transparent;\n border-end-end-radius: 0px;\n background-color: #ffffff;\n}\n\n.comp-mqs0pkkb1__content {\n padding-bottom: 8.196px;\n display: grid;\n grid-template-columns: repeat(1, minmax(0, 1fr));\n grid-template-rows: min-content min-content 1fr;\n}\n\n.comp-mqs0pkkh4 {\n margin-left: 3.75%;\n margin-right: 0%;\n margin-top: 18.828px;\n margin-bottom: 37.469px;\n width: 47.2%;\n min-width: 0px;\n max-width: 99999px;\n grid-column-start: 1;\n grid-column-end: 2;\n grid-row-start: 1;\n grid-row-end: 2;\n place-self: start;\n color: #000000;\n font: normal normal 700 18px/1.3em 'Madefor', sans-serif;\n letter-spacing: 0em;\n mix-blend-mode: normal;\n}\n\n.comp-mqs0pkkh4 :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, blockquote, figure) {\n margin: 0;\n font: inherit;\n color: inherit;\n letter-spacing: inherit;\n}\n\n.comp-mqs0pkkm5 {\n margin-left: 3.75%;\n margin-right: 0%;\n margin-bottom: 26.875px;\n width: 71.8%;\n min-width: 0px;\n max-width: 99999px;\n grid-column-start: 1;\n grid-column-end: 2;\n grid-row-start: 2;\n grid-row-end: 3;\n place-self: start;\n color: #000000;\n font: normal normal 400 14px/1.5em 'Madefor', sans-serif;\n letter-spacing: 0em;\n mix-blend-mode: normal;\n}\n\n.comp-mqs0pkkm5 :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, blockquote, figure) {\n margin: 0;\n font: inherit;\n color: inherit;\n letter-spacing: inherit;\n}\n\n.comp-mqs0pkkr5 {\n margin-left: 3.13%;\n margin-right: 0%;\n width: 25%;\n height: auto;\n min-height: 32.438px;\n max-height: 99999px;\n min-width: 0px;\n max-width: 99999px;\n grid-column-start: 1;\n grid-column-end: 2;\n grid-row-start: 3;\n grid-row-end: 4;\n place-self: start;\n}\n\n.comp-mqs0pkl41 {\n margin: 0%;\n width: auto;\n height: auto;\n min-height: 0px;\n max-height: 99999px;\n min-width: 0px;\n max-width: 99999px;\n grid-column-start: 1;\n grid-column-end: 2;\n grid-row-start: 4;\n grid-row-end: 5;\n place-self: stretch;\n}\n\n.comp-mqs0pkl41__bg {\n border-bottom-style: solid;\n border-bottom-width: 1px;\n border-bottom-color: #000000;\n border-start-end-radius: 0px;\n box-shadow: none;\n border-inline-end-width: 1px;\n border-top-width: 0px;\n border-inline-start-color: transparent;\n border-start-start-radius: 0px;\n border-inline-start-width: 0px;\n border-top-style: solid;\n border-end-start-radius: 0px;\n border-inline-start-style: solid;\n border-inline-end-style: solid;\n border-inline-end-color: #000000;\n border-top-color: transparent;\n border-end-end-radius: 0px;\n background-color: #ffffff;\n}\n\n.comp-mqs0pkl41__content {\n padding-bottom: 18px;\n display: grid;\n grid-template-columns: repeat(1, minmax(0, 1fr));\n grid-template-rows: 1fr;\n}\n\n.comp-mqs0pkld2 {\n margin: 0%;\n width: auto;\n height: auto;\n min-height: 0px;\n max-height: 99999px;\n min-width: 0px;\n max-width: 99999px;\n grid-column-start: 2;\n grid-column-end: 3;\n grid-row-start: 3;\n grid-row-end: 4;\n place-self: stretch;\n}\n\n.comp-mqs0pkld2__bg {\n border-bottom-style: solid;\n border-bottom-width: 1px;\n border-bottom-color: #000000;\n border-start-end-radius: 0px;\n box-shadow: none;\n border-inline-end-width: 0px;\n border-top-width: 0px;\n border-inline-start-color: transparent;\n border-start-start-radius: 0px;\n border-inline-start-width: 0px;\n border-top-style: solid;\n border-end-start-radius: 0px;\n border-inline-start-style: solid;\n border-inline-end-style: solid;\n border-inline-end-color: transparent;\n border-top-color: transparent;\n border-end-end-radius: 0px;\n background-color: #ffffff;\n}\n\n.comp-mqs0pkld2__content {\n padding-bottom: 10.336px;\n display: grid;\n grid-template-columns: repeat(1, minmax(0, 1fr));\n grid-template-rows: min-content min-content 1fr;\n}\n\n.comp-mqs0pklj3 {\n margin-left: 3.59%;\n margin-right: 0%;\n margin-top: 19.766px;\n margin-bottom: 26.656px;\n width: 47.2%;\n min-width: 0px;\n max-width: 99999px;\n grid-column-start: 1;\n grid-column-end: 2;\n grid-row-start: 1;\n grid-row-end: 2;\n place-self: start;\n color: #000000;\n font: normal normal 700 18px/1.3em 'Madefor', sans-serif;\n letter-spacing: 0em;\n mix-blend-mode: normal;\n}\n\n.comp-mqs0pklj3 :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, blockquote, figure) {\n margin: 0;\n font: inherit;\n color: inherit;\n letter-spacing: inherit;\n}\n\n.comp-mqs0pklo5 {\n margin-left: 3.59%;\n margin-right: 0%;\n margin-bottom: 36.609px;\n width: 71.8%;\n min-width: 0px;\n max-width: 99999px;\n grid-column-start: 1;\n grid-column-end: 2;\n grid-row-start: 2;\n grid-row-end: 3;\n place-self: start;\n color: #000000;\n font: normal normal 400 14px/1.5em 'Madefor', sans-serif;\n letter-spacing: 0em;\n mix-blend-mode: normal;\n}\n\n.comp-mqs0pklo5 :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, blockquote, figure) {\n margin: 0;\n font: inherit;\n color: inherit;\n letter-spacing: inherit;\n}\n\n.comp-mqs0pklt5 {\n margin-left: 3.59%;\n margin-right: 0%;\n width: 25%;\n height: auto;\n min-height: 32.438px;\n max-height: 99999px;\n min-width: 0px;\n max-width: 99999px;\n grid-column-start: 1;\n grid-column-end: 2;\n grid-row-start: 3;\n grid-row-end: 4;\n place-self: start;\n}\n\n.comp-mqs0pkm53 {\n margin: 0%;\n width: auto;\n height: auto;\n min-height: 0px;\n max-height: 99999px;\n min-width: 0px;\n max-width: 99999px;\n grid-column-start: 2;\n grid-column-end: 3;\n grid-row-start: 2;\n grid-row-end: 3;\n place-self: stretch;\n}\n\n.comp-mqs0pkm53__bg {\n border-bottom-style: solid;\n border-bottom-width: 1px;\n border-bottom-color: #000000;\n border-start-end-radius: 0px;\n box-shadow: none;\n border-inline-end-width: 0px;\n border-top-width: 0px;\n border-inline-start-color: transparent;\n border-start-start-radius: 0px;\n border-inline-start-width: 0px;\n border-top-style: solid;\n border-end-start-radius: 0px;\n border-inline-start-style: solid;\n border-inline-end-style: solid;\n border-inline-end-color: transparent;\n border-top-color: transparent;\n border-end-end-radius: 0px;\n background-color: #ffffff;\n}\n\n.comp-mqs0pkm53__content {\n padding-bottom: 18px;\n display: grid;\n grid-template-columns: repeat(1, minmax(0, 1fr));\n grid-template-rows: 1fr;\n}\n\n.comp-mqs0pkme4 {\n margin: 0%;\n width: auto;\n height: auto;\n min-height: 0px;\n max-height: 99999px;\n min-width: 0px;\n max-width: 99999px;\n grid-column-start: 1;\n grid-column-end: 2;\n grid-row-start: 3;\n grid-row-end: 4;\n place-self: stretch;\n}\n\n.comp-mqs0pkme4__bg {\n border-bottom-style: solid;\n border-bottom-width: 1px;\n border-bottom-color: #000000;\n border-start-end-radius: 0px;\n box-shadow: none;\n border-inline-end-width: 1px;\n border-top-width: 0px;\n border-inline-start-color: transparent;\n border-start-start-radius: 0px;\n border-inline-start-width: 0px;\n border-top-style: solid;\n border-end-start-radius: 0px;\n border-inline-start-style: solid;\n border-inline-end-style: solid;\n border-inline-end-color: #000000;\n border-top-color: transparent;\n border-end-end-radius: 0px;\n background-color: #ffffff;\n}\n\n.comp-mqs0pkme4__content {\n padding-bottom: 10.227px;\n display: grid;\n grid-template-columns: repeat(1, minmax(0, 1fr));\n grid-template-rows: min-content min-content 1fr;\n}\n\n.comp-mqs0pkmk4 {\n margin-left: 3.13%;\n margin-right: 0%;\n margin-top: 19.766px;\n margin-bottom: 19.906px;\n width: 47.2%;\n min-width: 0px;\n max-width: 99999px;\n grid-column-start: 1;\n grid-column-end: 2;\n grid-row-start: 1;\n grid-row-end: 2;\n place-self: start;\n color: #000000;\n font: normal normal 700 18px/1.3em 'Madefor', sans-serif;\n letter-spacing: 0em;\n mix-blend-mode: normal;\n}\n\n.comp-mqs0pkmk4 :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, blockquote, figure) {\n margin: 0;\n font: inherit;\n color: inherit;\n letter-spacing: inherit;\n}\n\n.comp-mqs0pkmp4 {\n margin-left: 3.13%;\n margin-right: 0%;\n margin-bottom: 43.469px;\n width: 71.8%;\n min-width: 0px;\n max-width: 99999px;\n grid-column-start: 1;\n grid-column-end: 2;\n grid-row-start: 2;\n grid-row-end: 3;\n place-self: start;\n color: #000000;\n font: normal normal 400 14px/1.5em 'Madefor', sans-serif;\n letter-spacing: 0em;\n mix-blend-mode: normal;\n}\n\n.comp-mqs0pkmp4 :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, blockquote, figure) {\n margin: 0;\n font: inherit;\n color: inherit;\n letter-spacing: inherit;\n}\n\n.comp-mqs0pkmu5 {\n margin-left: 3.13%;\n margin-right: 0%;\n width: 25%;\n height: auto;\n min-height: 32.438px;\n max-height: 99999px;\n min-width: 0px;\n max-width: 99999px;\n grid-column-start: 1;\n grid-column-end: 2;\n grid-row-start: 3;\n grid-row-end: 4;\n place-self: start;\n}\n\n.comp-mqs0pkn62 {\n margin: 0%;\n width: auto;\n height: auto;\n min-height: 0px;\n max-height: 99999px;\n min-width: 0px;\n max-width: 99999px;\n grid-column-start: 1;\n grid-column-end: 2;\n grid-row-start: 2;\n grid-row-end: 3;\n place-self: stretch;\n}\n\n.comp-mqs0pkn62__bg {\n border-bottom-style: solid;\n border-bottom-width: 1px;\n border-bottom-color: #000000;\n border-start-end-radius: 0px;\n box-shadow: none;\n border-inline-end-width: 1px;\n border-top-width: 0px;\n border-inline-start-color: transparent;\n border-start-start-radius: 0px;\n border-inline-start-width: 0px;\n border-top-style: solid;\n border-end-start-radius: 0px;\n border-inline-start-style: solid;\n border-inline-end-style: solid;\n border-inline-end-color: #000000;\n border-top-color: transparent;\n border-end-end-radius: 0px;\n background-color: #ffffff;\n}\n\n.comp-mqs0pkn62__content {\n padding-bottom: 18px;\n display: grid;\n grid-template-columns: repeat(1, minmax(0, 1fr));\n grid-template-rows: 1fr;\n}\n\n.comp-mqs0pkng2 {\n margin: 0%;\n width: auto;\n height: auto;\n min-height: 0px;\n max-height: 99999px;\n min-width: 0px;\n max-width: 99999px;\n grid-column-start: 1;\n grid-column-end: 3;\n grid-row-start: 1;\n grid-row-end: 2;\n place-self: stretch;\n}\n\n.comp-mqs0pkng2__bg {\n border-bottom-style: solid;\n border-bottom-width: 1px;\n border-bottom-color: #000000;\n border-start-end-radius: 0px;\n box-shadow: none;\n border-inline-end-width: 0px;\n border-top-width: 0px;\n border-inline-start-color: transparent;\n border-start-start-radius: 0px;\n border-inline-start-width: 0px;\n border-top-style: solid;\n border-end-start-radius: 0px;\n border-inline-start-style: solid;\n border-inline-end-style: solid;\n border-inline-end-color: transparent;\n border-top-color: transparent;\n border-end-end-radius: 0px;\n background-color: #ffffff;\n}\n\n.comp-mqs0pkng2__content {\n padding-bottom: 18px;\n display: grid;\n grid-template-columns: repeat(1, minmax(0, 1fr));\n grid-template-rows: 1fr;\n}\n\n.comp-mqs0pknj2 {\n margin-left: 1.56%;\n margin-right: 0%;\n margin-top: 82.438px;\n width: 33.1%;\n min-width: 0px;\n max-width: 99999px;\n grid-column-start: 1;\n grid-column-end: 2;\n grid-row-start: 1;\n grid-row-end: 2;\n place-self: start;\n color: #000000;\n font: normal normal 700 28px/1.2em 'Madefor', sans-serif;\n letter-spacing: 0em;\n mix-blend-mode: normal;\n}\n\n.comp-mqs0pknj2 :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, blockquote, figure) {\n margin: 0;\n font: inherit;\n color: inherit;\n letter-spacing: inherit;\n}"
+ }
+ ],
+ "score": 5,
+ "notes": "the portfolio example didn't do sticky; and it broke the layout; I only see two images out of 4; I think in a situation like that I would've wanted the final position of the animation to be the same as the original layout (so the cards scroll in diagonally to fit in their original positions)\n\ngrid-cards 2 actually did the animation perfectly; but the agent thought that the cards are the text and buttons; but what I wanted was for the images to be the main thing (and maybe the text could've been sticky to the left and change when each image changes)"
+ }
+ ]
+}
\ No newline at end of file
diff --git a/Ani-Mate Prompts/Gallery-and-Carousel/HorizontalAndVerticalScroll.md b/Ani-Mate Prompts/Gallery-and-Carousel/HorizontalAndVerticalScroll.md
new file mode 100644
index 0000000..c59afe4
--- /dev/null
+++ b/Ani-Mate Prompts/Gallery-and-Carousel/HorizontalAndVerticalScroll.md
@@ -0,0 +1,201 @@
+
+# Horizontal And Vertical Scroll
+
+Cards enter vertically into a sticky viewport frame, then the row pans horizontally.
+
+## Summary
+
+- **ID:** `horizontal-and-vertical-scroll`
+- **Target shape:** Best for 3 or more sibling cards/images that can share one horizontal row inside a sticky viewport-height frame.
+- **Description:** A sticky carousel sequence where cards rise into a clipped frame, then the full row pans sideways through the viewport.
+
+## Demo HTML
+
+```html
+
+
+```
+
+## Selector Contract
+
+1. Role ownership is strict: `scrollSection` owns runway, `stickyFrame` owns sticky/clipping, `horizontalTrack` owns horizontal translateX, and `repeatedCard` owns vertical entry.
+2. `scrollSection`, `stickyFrame`, and `horizontalTrack` must stay distinct. In Wix, `stickyFrame` is usually the internal-container-root and `horizontalTrack` is its `[data-testid="internal-container-content"]` child.
+3. Cards are not sticky. Only the shared `stickyFrame` pins the scene, and only `horizontalTrack` pans sideways.
+4. Use viewport units only for the runway and sticky frame. If cards use percentage heights, `horizontalTrack` must establish the composition height.
+5. Compute horizontal pan from real overflow width. Three cards are the minimum useful pattern.
+
+## Role Guidance
+
+| Role | Guidance |
+| --- | --- |
+| `scrollSource` | The tall section whose `viewProgress` drives both the vertical entrances and horizontal pan. |
+| `stickyFrame` | The shared sticky viewport frame that centers and clips the carousel while the section scrolls. |
+| `horizontalTrack` | The flex row that contains repeated cards and receives the horizontal translateX effect. |
+| `repeatedCard` | Cards/images in the horizontal row; each receives an individual vertical entrance effect. |
+
+## Adaptation Notes
+
+1. The source section does not need to already be a carousel; repeated siblings can be reorganized into a horizontal row with CSS.
+2. Preserve the section root outer layout and keep card size relative to the sticky frame instead of converting cards to viewport-height blocks.
+3. When cards use percentage heights, set `height: 100%` on `horizontalTrack` so those percentages resolve against a real stage height.
+4. Cards should enter with stage-relative `translateY(...)` on the card roots, and the horizontal pan should start only after the row is already visible.
+5. If the row does not overflow the frame, reduce or skip the horizontal pan instead of forcing a meaningless translateX.
+
+## Required Elements
+
+| Key | Role | Demo Selector | Purpose |
+| --- | --- | --- | --- |
+| `scrollSection` | `scrollSource` | `.scroll-section` | The `viewProgress` source for the combined vertical-entry and horizontal-pan sequence. |
+| `stickyFrame` | `stickyFrame` | `.sticky-frame` | The shared sticky frame that pins the row and clips cards while they enter and pan. |
+| `horizontalTrack` | `horizontalTrack` | `#horizontal-track` | The moving row of cards; this element receives the horizontal translateX effect. |
+| `card1` | `repeatedCard` | `.scroll-section #card-1` | Minimum repeated row card; extend for `card4..cardN`. |
+| `card2` | `repeatedCard` | `.scroll-section #card-2` | Repeated row card. |
+| `card3` | `repeatedCard` | `.scroll-section #card-3` | Repeated row card. |
+
+> Repeated card keys must keep their trailing index (`card1`, `card2`, …) so they compact into the `card{n}` group; extend the row as `card4..cardN` for more items.
+
+## Required Styles
+
+### `scrollSource` — `.scroll-section`
+
+```css
+.scroll-section {
+ position: relative;
+ min-height: 700vh;
+}
+```
+
+Reason: creates enough scroll distance for staged vertical entrances followed by horizontal pan.
+
+### `stickyFrame` — `.sticky-frame`
+
+```css
+.sticky-frame {
+ position: sticky;
+ top: 12.5vh;
+ height: 75vh;
+ width: 100%;
+ overflow: clip;
+}
+```
+
+Reason: pins and clips the visible carousel frame; top should center the frame based on card height.
+
+### `horizontalTrack` — `#horizontal-track`
+
+```css
+#horizontal-track {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ height: 100%;
+ width: max-content;
+ gap: 4px;
+ will-change: transform;
+}
+```
+
+Reason: creates the row whose width exceeds the viewport and establishes a real composition height for percentage-sized cards.
+
+### `repeatedCard` — `#horizontal-track > .card`
+
+```css
+#horizontal-track > .card {
+ flex: 0 0 auto;
+ width: auto;
+ height: 75%;
+ aspect-ratio: 4 / 5;
+ transform: translateY(140%);
+ will-change: transform;
+ overflow: clip;
+}
+```
+
+Reason: keep card size relative to the sticky frame instead of using viewport-height cards. Preserve the source aspect ratio (or measured width), size the card inside the frame, and start it just below that frame with a stage-relative translateY.
+
+### `repeatedCard` — `.card`
+
+```css
+.card {
+ margin: 0;
+}
+```
+
+Reason: prevents default or inherited spacing from corrupting row width calculations.
+
+## Suggested Controls
+
+Expose the sideways pan distance and the row spacing; add more only when the adapted experience introduces new stable knobs.
+
+### `pan-distance`
+
+- **Label:** `Pan Distance`
+- **Group:** `Motion`
+- **Type:** `range`
+- **Default:** `55`
+- **Description:** How far the row pans sideways through the frame (magnitude of the negative translateX).
+- **Constraints:** `min: 20`, `max: 80`, `step: 5`, `unit: %`
+- **Binding:** `variable` `--hv-pan-distance` using template `${value}%`
+
+### `card-gap`
+
+- **Label:** `Card Gap`
+- **Group:** `Layout`
+- **Type:** `range`
+- **Default:** `4`
+- **Description:** Spacing between cards in the horizontal row.
+- **Constraints:** `min: 0`, `max: 40`, `step: 2`, `unit: px`
+- **Binding:** `variable` `--hv-card-gap` using template `${value}px`
+
+## Interact Template
+
+```ts
+const RANGE = {
+ easing: 'linear',
+ fill: 'both' as const,
+};
+const ENTRY_RANGE_ENDS = [40, 50, 60] as const;
+
+const verticalEntryEffect = (key: string, end: number) => ({
+ key,
+ keyframeEffect: {
+ name: `${key}-vertical-entry`,
+ keyframes: [
+ { transform: 'translateY(125%)' },
+ { transform: 'translateY(0)' },
+ ],
+ },
+ rangeStart: { name: 'cover', offset: { unit: 'percentage', value: 10 } },
+ rangeEnd: { name: 'cover', offset: { unit: 'percentage', value: end } },
+ ...RANGE,
+});
+
+const horizontalTrackEffect = (endTranslate: string) => ({
+ key: 'horizontalTrack',
+ keyframeEffect: {
+ name: 'horizontal-track-scroll',
+ keyframes: [{ transform: 'translateX(0)' }, { transform: endTranslate }],
+ },
+ rangeStart: { name: 'cover', offset: { unit: 'percentage', value: 50 } },
+ rangeEnd: { name: 'cover', offset: { unit: 'percentage', value: 90 } },
+ ...RANGE,
+});
+
+const interaction = {
+ key: 'scrollSection',
+ trigger: 'viewProgress',
+ effects: [
+ horizontalTrackEffect('translateX(-55%)'),
+ ...ENTRY_RANGE_ENDS.map((end, index) =>
+ verticalEntryEffect(`card${index + 1}`, end),
+ ),
+ ],
+};
+```
diff --git a/Ani-Mate Prompts/Gallery-and-Carousel/HorizontalLanes.md b/Ani-Mate Prompts/Gallery-and-Carousel/HorizontalLanes.md
new file mode 100644
index 0000000..906be80
--- /dev/null
+++ b/Ani-Mate Prompts/Gallery-and-Carousel/HorizontalLanes.md
@@ -0,0 +1,213 @@
+# Horizontal Lanes
+
+Multiple rows of items scroll sideways forever at different speeds and directions.
+
+## Summary
+
+- **ID:** `horizontal-lanes`
+- **Target shape:** Best for 2–5 stacked rows of similarly sized items (image strips, logo walls, card marquees) that should drift horizontally on a loop while in view.
+- **Description:** Each lane clips an over-wide track holding two identical copies of its items; the track loops between `translateX(0)` and `translateX(-50%)` continuously, so items scroll past seamlessly. Odd lanes drift one way, even lanes the other, each at its own speed.
+
+## Demo HTML
+
+```html
+
+
+```
+
+## Selector Contract
+
+1. Role ownership is strict: `scrollSection` owns the tall runway, `copyBlock` owns the fixed text column, `panelStage` owns the shared 3D rotation, and each `repeatedPanel` owns its own size, depth, and subtle horizontal drift.
+2. Keep `copyBlock` and `panelStage` as separate fixed siblings inside the same scroll section. Do not wrap the text into the rotating 3D stage.
+3. Only `panelStage` receives the `rotateY(...)` reveal. Individual panels keep their own centered transform plus per-item scale and horizontal drift.
+4. Depth belongs on the repeated panel roots via `translateZ(...)` or the CSS `translate` longhand. Do not fake the stack by offsetting margins or rotating the whole section.
+5. On narrow screens, collapse to a static stacked column and remove the motion. The source example disables the animation at `max-width: 1280px`.
+
+## Role Guidance
+
+| Role | Guidance |
+| --- | --- |
+| `scrollSource` | The tall section whose `viewProgress` drives the wrapper reveal and all per-panel drift effects. |
+| `copyBlock` | Fixed left-side copy that stays readable and does not rotate with the 3D stage. |
+| `panelStage` | Fixed right-side perspective container that stays centered and owns the shared `rotateY` reveal. |
+| `repeatedPanel` | Overlapped image/card panels centered in the stage; each keeps its own size, scale, and z-depth. |
+
+## Adaptation Notes
+
+1. Preserve the split layout when the section already has one text column and one visual column. This pattern depends on the text remaining still while the panel stack rotates independently.
+2. Recompute panel size, scale, and z-depth from the real item count instead of copying the demo numbers literally. The source ramps panel width from roughly `45vw` to `65vw`, height from `30vw` to `42vw`, and scale from `0.75` to `1.15`.
+3. Keep all panels anchored to the same center point with `left: 50%` plus `translateX(-50%)`; vary only depth and small horizontal drift.
+4. If the source section uses cards instead of pure images, animate the card root and keep media filling that root with `width/height: 100%` and `object-fit: cover`.
+5. If there is no real split layout, this pattern can still work with centered copy above the stage, but the fixed-copy/sidebar feel is part of the original example and should be preserved when possible.
+6. For reduced motion or small screens, fall back to a normal vertical list of panels and skip the interaction entirely rather than forcing a broken 3D layout.
+
+## Required Elements
+
+| Key | Role | Demo Selector | Purpose |
+| --- | --- | --- | --- |
+| `scrollSection` | `scrollSource` | `.intro` | The `viewProgress` source for the whole sequence. |
+| `copyBlock` | `copyBlock` | `.text-block` | Fixed text column that stays outside the animated 3D stage. |
+| `panelStage` | `panelStage` | `.panel-wrapper` | Shared perspective container that rotates from `-180deg` to `0deg`. |
+| `panel1` | `repeatedPanel` | `.panel-wrapper #panel-0` | Repeated centered panel; extend as `panel4..panelN`. |
+| `panel2` | `repeatedPanel` | `.panel-wrapper #panel-1` | Repeated centered panel. |
+| `panel3` | `repeatedPanel` | `.panel-wrapper #panel-2` | Repeated centered panel. |
+| `panel4` | `repeatedPanel` | `.panel-wrapper #panel-3` | Repeated centered panel. |
+
+> Repeated panel keys should keep their trailing index (`panel1`, `panel2`, …) even if the DOM ids start at `panel-0`; extend the pattern through `panelN` for more items.
+
+## Required Styles
+
+### `scrollSource` — `.intro`
+
+```css
+.intro {
+ position: relative;
+ min-height: 300vh;
+ padding: 20px;
+}
+```
+
+Reason: creates the full scroll runway for the wrapper reveal and the scrubbed panel drift.
+
+### `copyBlock` — `.text-block`
+
+```css
+.text-block {
+ position: fixed;
+ top: 50%;
+ left: 3%;
+ z-index: 10;
+ width: 18%;
+ min-width: 200px;
+ transform: translateY(-50%);
+}
+```
+
+Reason: keeps the copy readable and stationary while the 3D panel stage animates beside it.
+
+### `panelStage` — `.panel-wrapper`
+
+```css
+.panel-wrapper {
+ position: fixed;
+ top: 50%;
+ left: calc(3% + 18% + 1%);
+ width: calc(100% - (3% + 18% + 4%));
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ perspective: var(--panel-perspective, 2000px);
+ transform: translateY(-50%);
+ transform-style: preserve-3d;
+}
+```
+
+Reason: creates the shared fixed 3D viewport and supplies the exact transform baseline the wrapper reveal animates on top of.
+
+### `repeatedPanel` — `.panel-wrapper > .panel`
+
+```css
+.panel-wrapper > .panel {
+ position: absolute;
+ left: 50%;
+ width: var(--panel-width, 45vw);
+ height: var(--panel-height, 30vw);
+ transform: translateX(-50%) scale(var(--panel-scale, 1));
+ translate: 0 0 var(--panel-z, 0px);
+ transform-origin: center center;
+ transform-style: preserve-3d;
+ will-change: transform, translate;
+}
+```
+
+Reason: centers every repeated panel on the same anchor while allowing per-panel size, scale, and z-depth to vary independently.
+
+### `repeatedPanel` — `.panel-wrapper > .panel > img`
+
+```css
+.panel-wrapper > .panel > img {
+ display: block;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+```
+
+Reason: makes image panels fill the animated card root without introducing inner layout drift.
+
+## Suggested Controls
+
+Expose the stack spacing and the per-panel horizontal spread first; they are the most stable knobs in the source pattern.
+
+### `panel-gap`
+
+- **Label:** `Panel Gap`
+- **Group:** `Layout`
+- **Type:** `range`
+- **Default:** `120`
+- **Description:** Distance in pixels between successive panels on the z-axis.
+- **Constraints:** `min: 40`, `max: 220`, `step: 10`, `unit: px`
+- **Binding:** `variable` `--panel-gap` using a direct value
+
+### `panel-drift`
+
+- **Label:** `Panel Drift`
+- **Group:** `Motion`
+- **Type:** `range`
+- **Default:** `20`
+- **Description:** Horizontal drift per panel index by the end of the scroll.
+- **Constraints:** `min: 0`, `max: 60`, `step: 2`, `unit: px`
+- **Binding:** `variable` `--panel-drift` using template `${value}px`
+
+### `stage-perspective`
+
+- **Label:** `Perspective`
+- **Group:** `Layout`
+- **Type:** `range`
+- **Default:** `2000`
+- **Description:** Depth strength for the shared 3D stage.
+- **Constraints:** `min: 800`, `max: 3000`, `step: 100`, `unit: px`
+- **Binding:** `variable` `--panel-perspective` using template `${value}px`
+
+## Interact Template
+
+```ts
+const FULL_RANGE = {
+ rangeStart: { name: 'cover', offset: { unit: 'percentage', value: 0 } },
+ rangeEnd: { name: 'cover', offset: { unit: 'percentage', value: 100 } },
+ easing: 'linear',
+ fill: 'both' as const,
+};
+
+const configurePanelLayout = (panel: HTMLElement, index: number, count: number) => {
+ const progress = count > 1 ? index / (count - 1) : 1;
+ panel.style.setProperty('--panel-width', `${45 + progress * 20}vw`);
+ panel.style.setProperty('--panel-height', `${30 + progress * 12}vw`);
+ panel.style.setProperty('--panel-scale', `${0.75 + progress * 0.4}`);
+ panel.style.setProperty('--panel-z', `calc(var(--panel-gap) * ${-index} * 1px)`);
+};
+
+const wrapperReveal = {
+ key: 'panelStage',
+ keyframeEffect: {
+ name: 'panel-stage-rotate-in',
+ keyframes: [
+ { transform: 'translateY(-50%) rotateY(-180deg)' },
+ { transform: 'translateY(-50%) rotateY(0deg)' },
+ ],
+ },
+ rangeStart: { name: 'cover', offset: { unit: 'percentage', value: 0 } },
+ rangeEnd: { name: 'cover', offset: { unit: 'percentage', value: 50 } },
+ easing: 'ease-out',
+ fill: 'both' as const,
+};
+
+const panelDriftEffect = (key: string, index: number, count: number) => {
+ const progress = count > 1 ? index / (count - 1) : 1;
+ const scale = 0.75 + progress * 0.4;
+ const xEnd = (index - (count - 1) / 2) * 20;
+
+ return {
+ key,
+ keyframeEffect: {
+ name: `${key}-drift`,
+ keyframes: [
+ { transform: `translateX(-50%) translateX(0px) scale(${scale})` },
+ { transform: `translateX(-50%) translateX(${xEnd}px) scale(${scale})` },
+ ],
+ },
+ ...FULL_RANGE,
+ };
+};
+
+const interaction = {
+ key: 'scrollSection',
+ trigger: 'viewProgress',
+ effects: [
+ wrapperReveal,
+ ...Array.from({ length: panelCount }, (_, index) =>
+ panelDriftEffect(`panel${index + 1}`, index, panelCount),
+ ),
+ ],
+};
+```
+
+## Source
+
+Derived from [`Scroll_3D_Animation.html`](https://github.com/wix-incubator/interact-examples/blob/main/Gallery-and-Carousel/Scroll_3D_Animation.html).
diff --git a/Ani-Mate Prompts/Gallery-and-Carousel/WheelCarousel.md b/Ani-Mate Prompts/Gallery-and-Carousel/WheelCarousel.md
new file mode 100644
index 0000000..de2360d
--- /dev/null
+++ b/Ani-Mate Prompts/Gallery-and-Carousel/WheelCarousel.md
@@ -0,0 +1,243 @@
+# Top-Arc Wheel Carousel
+
+Image cards ride a slowly spinning wheel while staying upright, with only the top arc revealed.
+
+## Summary
+
+- **ID:** `wheel-carousel`
+- **Target shape:** Best for a gallery of 8–12 similarly sized square images that can share one circular stage inside a clipping frame; suits hero or promo sections where only the top arc of the wheel is visible above copy.
+- **Description:** A dozen image cards are positioned around a circle on a wheel that rotates continuously; each card counter-rotates to stay upright, the frame clips everything but the top arc, and hovering a card zooms its image.
+
+## Demo HTML
+
+```html
+
+
+```
+
+## Selector Contract
+
+1. Role ownership is strict: `viewportFrame` owns clipping and edge masks, `wheelStage` owns the continuous rotation and the radial layout origin, `repeatedCard` owns radial placement plus the counter-rotation, and `cardImage` owns the hover zoom.
+2. `viewportFrame` and `wheelStage` must be different selectors. The frame never rotates; only the wheel rotates. Rotating the frame would drag the clip mask and fade edges with it.
+3. The card counter-rotation effect must use the same duration, easing, and iterations as the wheel spin with the opposite direction (`-360deg` vs `360deg`). Any mismatch makes the cards visibly tumble instead of staying upright.
+4. Keep radial placement and counter-rotation on the card roots (`#card-n`), not on the raw `img` descendants. The hover zoom is the only effect that targets the inner image.
+5. Each card and each inner image must be wrapped in its own `interact-element`, because cards are counter-rotation targets and images are independent hover targets.
+
+## Role Guidance
+
+| Role | Guidance |
+| --- | --- |
+| `viewportFrame` | The clipping section that reveals only the top arc and applies the edge/bottom fade masks; never animated. |
+| `wheelStage` | The circular turntable that holds all cards and rotates continuously via a `viewEnter` loop. |
+| `repeatedCard` | Repeated card roots placed at even angular intervals around the wheel; each counter-rotates to stay upright. |
+| `cardImage` | The image inside each card; the sole target of the hover zoom effect. |
+
+## Adaptation Notes
+
+1. Place cards with a radial formula, not literal demo offsets: for card index `i` of `N` cards, `angle = i * (360 / N)` degrees, `x = r * cos(angle)`, `y = r * sin(angle)`, then `margin-left: calc((x − cs/2) * 1vmin)` and `margin-top: calc((y − cs/2) * 1vmin)`, where `--r` is the radius and `--cs` the card size. The demo hard-codes 12 cards at 30° with precomputed cosines — recompute these when `N` changes.
+2. Keep radius and card size expressed through the `--r` / `--cs` custom properties in `vmin` so the wheel scales with the viewport and the responsive breakpoints keep working.
+3. Reveal the top arc by giving the wheel a positive `margin-top` and clipping with the frame height; the bottom fade layer hides the lower half. Adjust `margin-top` and frame height together when you change the radius.
+4. Assign z-index by arc depth (front/lower cards higher) so overlapping cards stack believably; derive it from vertical position rather than copying the demo's exact numbers.
+5. The rotation is a continuous `viewEnter` loop (`iterations: Infinity`), not a scroll-driven effect — there is no runway height to size and no ViewTimeline to protect.
+6. If the section cannot host a distinct non-rotating frame and a rotating wheel, reject the pattern; collapsing them breaks the clip mask.
+
+## Required Elements
+
+| Key | Role | Demo Selector | Purpose |
+| --- | --- | --- | --- |
+| `viewportFrame` | `viewportFrame` | `.arc-viewport` | Clipping frame that reveals the top arc; `position: relative`, fixed height, `overflow: hidden`. |
+| `wheelStage` | `wheelStage` | `#wheel` | Rotating turntable; the `viewEnter` trigger source and radial layout origin. Must differ from `viewportFrame`. |
+| `card1` | `repeatedCard` | `#card-1` | Minimum repeated radial card; extend outward for `card4..cardN`. |
+| `card2` | `repeatedCard` | `#card-2` | Repeated radial card. |
+| `card3` | `repeatedCard` | `#card-3` | Repeated radial card. |
+| `cardImg1` | `cardImage` | `#card-1-img` | Hover-zoom image inside `card1`; extend for `cardImg4..cardImgN`. |
+| `cardImg2` | `cardImage` | `#card-2-img` | Hover-zoom image inside `card2`. |
+| `cardImg3` | `cardImage` | `#card-3-img` | Hover-zoom image inside `card3`. |
+
+> Repeated keys must keep their trailing index (`card1`, `card2`, … and `cardImg1`, `cardImg2`, …) so they compact into the `card{n}` and `cardImg{n}` groups. Extend both rows to match the real card count (`card4..cardN`, `cardImg4..cardImgN`); the demo uses 12 of each.
+
+## Required Styles
+
+### `viewportFrame` — `.arc-viewport`
+
+```css
+.arc-viewport {
+ position: relative;
+ width: 100%;
+ height: 68vh;
+ overflow: hidden;
+ display: flex;
+ justify-content: center;
+ align-items: flex-start;
+}
+```
+
+Reason: fixes the visible window and clips the wheel so only the top arc shows above the copy; centers the wheel horizontally and anchors it to the top.
+
+### `wheelStage` — `#wheel`
+
+```css
+#wheel {
+ position: relative;
+ width: calc(var(--r) * 2vmin + var(--cs) * 1vmin);
+ height: calc(var(--r) * 2vmin + var(--cs) * 1vmin);
+ transform-origin: center center;
+ margin-top: 10vh;
+ flex-shrink: 0;
+}
+```
+
+Reason: sizes the turntable to the circle diameter plus one card, centers its rotation, and pushes it down so the clip frame exposes the upper arc.
+
+### `repeatedCard` — `.card`
+
+```css
+.card {
+ position: absolute;
+ width: calc(var(--cs) * 1vmin);
+ height: calc(var(--cs) * 1vmin);
+ left: 50%;
+ top: 50%;
+ border-radius: var(--cr);
+ overflow: hidden;
+ transform-origin: center center;
+}
+```
+
+Reason: anchors every card to the wheel center so the radial `margin` offsets place them on the circle, and centers `transform-origin` so the counter-rotation keeps each card upright.
+
+### `repeatedCard` — `#card-n` (per-card radial placement)
+
+```css
+#card-1 {
+ margin-left: calc((var(--r) * 1 - var(--cs) / 2) * 1vmin);
+ margin-top: calc((var(--r) * 0 - var(--cs) / 2) * 1vmin);
+ z-index: 100;
+}
+```
+
+Reason: positions each card at its angle on the circle (`cos`/`sin` of `i * 360 / N`) offset by half the card size; recompute the multipliers and z-index per card when the count or radius changes.
+
+### `cardImage` — `.card img`
+
+```css
+.card img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ display: block;
+}
+```
+
+Reason: fills the card frame so the hover scale zooms a cropped image cleanly with no letterboxing.
+
+## Suggested Controls
+
+Expose the wheel geometry and its rotation speed; these are the stable knobs that reshape the pattern without breaking the counter-rotation contract.
+
+### `radius`
+
+- **Label:** `Wheel Radius`
+- **Group:** `Layout`
+- **Type:** `range`
+- **Default:** `65`
+- **Description:** Controls how large the circle is; larger values push cards farther from the center.
+- **Constraints:** `min: 20`, `max: 80`, `step: 1`, `unit: vmin`
+- **Binding:** `variable` `--r` using a direct value
+
+### `card-size`
+
+- **Label:** `Card Size`
+- **Group:** `Layout`
+- **Type:** `range`
+- **Default:** `20`
+- **Description:** Controls the width and height of each image card.
+- **Constraints:** `min: 8`, `max: 30`, `step: 1`, `unit: vmin`
+- **Binding:** `variable` `--cs` using a direct value
+
+### `spin-duration`
+
+- **Label:** `Spin Speed`
+- **Group:** `Motion`
+- **Type:** `range`
+- **Default:** `30000`
+- **Description:** Controls how long one full wheel revolution takes; the card counter-rotation duration must match.
+- **Constraints:** `min: 8000`, `max: 60000`, `step: 1000`, `unit: ms`
+- **Binding:** `effect` `wheel-spin` property `duration` using a direct value, and `effect` `card-counter` property `duration` using the same value
+
+## Interact Template
+
+```ts
+// How many cards ride the wheel — recompute radial CSS placement when this changes.
+const CARD_COUNT = 12;
+const SPIN_DURATION = 30000; // ms per revolution; wheel and counter must match.
+
+// Continuous clockwise spin on the wheel stage.
+const wheelSpin = {
+ keyframeEffect: {
+ name: 'wheel-spin-kf',
+ keyframes: [{ transform: 'rotate(0deg)' }, { transform: 'rotate(360deg)' }],
+ },
+ duration: SPIN_DURATION,
+ iterations: Infinity,
+ easing: 'linear',
+};
+
+// Counter-rotation so cards stay upright — opposite direction, identical timing.
+const cardCounter = {
+ keyframeEffect: {
+ name: 'card-counter-kf',
+ keyframes: [{ transform: 'rotate(0deg)' }, { transform: 'rotate(-360deg)' }],
+ },
+ duration: SPIN_DURATION,
+ iterations: Infinity,
+ easing: 'linear',
+};
+
+// Hover zoom for the image inside a card.
+const imgHover = {
+ keyframeEffect: {
+ name: 'img-hover-kf',
+ keyframes: [{ transform: 'scale(1)' }, { transform: 'scale(1.1)' }],
+ },
+ duration: 250,
+ easing: 'ease-out',
+ fill: 'both' as const,
+};
+
+const cardKeys = Array.from({ length: CARD_COUNT }, (_, i) => `card${i + 1}`);
+
+const config = {
+ effects: {
+ 'wheel-spin': wheelSpin,
+ 'card-counter': cardCounter,
+ 'img-hover': imgHover,
+ },
+ interactions: [
+ // Start the loop when the wheel enters view: spin the stage, counter-rotate every card.
+ {
+ key: 'wheelStage',
+ trigger: 'viewEnter',
+ effects: [
+ { key: 'wheelStage', effectId: 'wheel-spin' },
+ ...cardKeys.map((key) => ({ key, effectId: 'card-counter' })),
+ ],
+ },
+ // One hover interaction per card, zooming its own image.
+ ...cardKeys.map((key, i) => ({
+ key,
+ trigger: 'hover',
+ effects: [
+ { key: `cardImg${i + 1}`, effectId: 'img-hover', triggerType: 'alternate' },
+ ],
+ })),
+ ],
+};
+```
\ No newline at end of file
diff --git a/Ani-Mate Prompts/Image_Background/column-squeeze-reveal.md b/Ani-Mate Prompts/Image_Background/column-squeeze-reveal.md
new file mode 100644
index 0000000..88e9006
--- /dev/null
+++ b/Ani-Mate Prompts/Image_Background/column-squeeze-reveal.md
@@ -0,0 +1,222 @@
+# Column Squeeze Reveal
+
+A left text column squeezes narrow while its headline shrinks and the background image zooms, all pinned on scroll.
+
+## Summary
+
+- **ID:** `column-squeeze-reveal`
+- **Target shape:** Best for a full-bleed section with a vertical text/label column overlaid on a single background image, where the column can pin to the viewport and reveal more of the image as it narrows.
+- **Description:** A sticky stage holds a narrow left column over a background image; as the section scrolls, the column's inner panel squeezes from wide to narrow, the headline scales down, and the background image zooms in.
+
+## Demo HTML
+
+```html
+
+
+```
+
+## Selector Contract
+
+1. Role ownership is strict: `scrollSource` owns the tall runway, `stickyStage` owns the pin and clip, `squeezePanel` owns the width animation, `headline` owns the text scale, and `backgroundLayer` owns the zoom.
+2. `scrollSource` and `stickyStage` must be different selectors; the runway (`300vh`) sits on the outer section and the pin (`sticky`, `100vh`) sits on the inner stage.
+3. The width animation targets the panel's own inner wrapper (`.left-inner`), not the positioned `left-col` overlay — animating the overlay's own width would move its absolute anchoring, not reveal the image.
+4. The zoom targets the background media element (`.bg-image`), never the sticky stage or an ancestor of the `viewProgress` targets; scaling an ancestor freezes ViewTimeline sampling.
+5. Keep the background and column as distinct stacked layers (`z-index` ordered); collapsing them into one element breaks the reveal.
+
+## Role Guidance
+
+| Role | Guidance |
+| --- | --- |
+| `scrollSource` | The tall outer section whose height creates the `viewProgress` scroll distance. |
+| `stickyStage` | A sticky viewport-height frame that pins the composition and clips overflow during scroll. |
+| `squeezePanel` | The inner wrapper of the overlaid text column whose width animates from wide to narrow. |
+| `headline` | The oversized display text inside the column that scales down as the column narrows. |
+| `backgroundLayer` | The background image element behind the column that zooms in over the same range. |
+
+## Adaptation Notes
+
+1. Put scroll distance on `scrollSource` (`~300vh`) and pinning on `stickyStage` (`100vh`); never merge them onto one element.
+2. Squeeze the column by animating `width` on `squeezePanel` (e.g. `22vw → 9vw`); recompute both endpoints from the real column width so the ending panel still fits its content legibly.
+3. Scale the headline on `headline` with `transform: scale()`; pick the end scale so the text fits the narrowed column (demo uses `1 → 0.41`) rather than copying the literal factor.
+4. Zoom the background with `transform: scale()` on `backgroundLayer` only (demo `1 → 1.4`); keep `overflow: clip` on the stage and column so the zoom and squeeze stay masked.
+5. All three effects share one range on the single `scrollSource` trigger — keep their `rangeStart`/`rangeEnd` identical so squeeze, scale, and zoom stay synchronized.
+6. Reject the pattern if you cannot keep a distinct sticky stage, a clip-masked column panel, and a separate zoomable background layer.
+
+## Required Elements
+
+| Key | Role | Demo Selector | Purpose |
+| --- | --- | --- | --- |
+| `scrollDriver` | `scrollSource` | `.scroll-driver` | The `viewProgress` source; tall runway for the whole pattern. |
+| `stickyStage` | `stickyStage` | `.sticky-stage` | Sticky pin and clip frame; not itself animated. |
+| `squeezePanel` | `squeezePanel` | `.left-inner` | Inner column wrapper whose `width` animates wide → narrow. |
+| `headline` | `headline` | `.hero-text-inner` | Display text wrapper that scales down over the range. |
+| `bgImage` | `backgroundLayer` | `.bg-image` | Background media element that zooms in over the range. |
+
+## Required Styles
+
+### `scrollSource` — `.scroll-driver`
+
+```css
+.scroll-driver {
+ height: 300vh;
+}
+```
+
+Reason: creates enough scroll distance for the squeeze, scale, and zoom to play out fully.
+
+### `stickyStage` — `.sticky-stage`
+
+```css
+.sticky-stage {
+ position: sticky;
+ top: 1.5rem;
+ width: calc(100vw - 3rem);
+ height: calc(100vh - 3rem);
+ overflow: hidden;
+}
+```
+
+Reason: pins the composition to the viewport and clips the zooming image and squeezing column while the section scrolls.
+
+### `squeezePanel` — `.left-inner`
+
+```css
+.left-inner {
+ width: 22vw;
+ height: 100%;
+ position: relative;
+ overflow: clip;
+ background: #0a0a0a;
+}
+```
+
+Reason: establishes the starting column width and clips its contents so the headline is masked as the panel narrows, progressively revealing the background.
+
+### `backgroundLayer` — `.bg-image`
+
+```css
+.bg-image {
+ width: 100%;
+ height: 100%;
+ background-size: cover;
+ background-position: center top;
+ transform-origin: center center;
+}
+```
+
+Reason: fills the stage so a `scale()` zoom stays covered, and centers the transform origin so the zoom reads as a push-in rather than a drift.
+
+### `headline` — `.hero-text-inner`
+
+```css
+.hero-text-inner {
+ position: relative;
+ width: 100%;
+ height: 100%;
+ transform-origin: left bottom;
+}
+```
+
+Reason: anchors the scale to the bottom-left so the shrinking headline stays pinned to the column corner instead of floating toward center.
+
+## Suggested Controls
+
+Expose the squeeze range and the background zoom as the primary knobs; add the headline end scale when the composition needs fine tuning.
+
+### `squeeze-end`
+
+- **Label:** `Column End Width`
+- **Group:** `Layout`
+- **Type:** `range`
+- **Default:** `9`
+- **Description:** Controls how narrow the text column becomes at the end of the scroll, and thus how much of the background image is revealed.
+- **Constraints:** `min: 4`, `max: 18`, `step: 1`, `unit: vw`
+- **Binding:** `variable` `--column-end-width` using template `${value}vw`
+
+### `image-zoom`
+
+- **Label:** `Image Zoom`
+- **Group:** `Motion`
+- **Type:** `range`
+- **Default:** `1.4`
+- **Description:** Controls the ending scale of the background image as the section scrolls past.
+- **Constraints:** `min: 1`, `max: 1.8`, `step: 0.05`, `unit: x`
+- **Binding:** `variable` `--bg-end-scale` using a direct value
+
+### `text-scale`
+
+- **Label:** `Headline End Scale`
+- **Group:** `Motion`
+- **Type:** `range`
+- **Default:** `0.41`
+- **Description:** Controls how small the headline shrinks so it stays inside the narrowed column.
+- **Constraints:** `min: 0.25`, `max: 0.8`, `step: 0.01`, `unit: x`
+- **Binding:** `variable` `--headline-end-scale` using a direct value
+
+## Interact Template
+
+```ts
+// Shared scroll range for all three effects — keep identical so they stay synchronized.
+const RANGE = {
+ rangeStart: { name: 'entry', offset: { value: 100, unit: 'percentage' } },
+ rangeEnd: { name: 'exit', offset: { value: 0, unit: 'percentage' } },
+ fill: 'both' as const,
+ easing: 'ease-in-out',
+};
+
+// Recompute endpoints from the real column width, headline size, and desired reveal.
+const squeezeEffect = {
+ key: 'squeezePanel',
+ selector: '.left-inner',
+ keyframeEffect: {
+ name: 'squeeze-column',
+ keyframes: [{ width: '22vw' }, { width: '9vw' }],
+ },
+ ...RANGE,
+};
+
+const headlineScaleEffect = {
+ key: 'headline',
+ selector: '.hero-text-inner',
+ keyframeEffect: {
+ name: 'scale-headline',
+ keyframes: [{ transform: 'scale(1)' }, { transform: 'scale(0.41)' }],
+ },
+ ...RANGE,
+};
+
+const zoomEffect = {
+ key: 'bgImage',
+ selector: '.bg-image',
+ keyframeEffect: {
+ name: 'zoom-image',
+ keyframes: [{ transform: 'scale(1)' }, { transform: 'scale(1.4)' }],
+ },
+ ...RANGE,
+};
+
+const interaction = {
+ key: 'scrollDriver',
+ trigger: 'viewProgress',
+ effects: [squeezeEffect, headlineScaleEffect, zoomEffect],
+};
+```
\ No newline at end of file
diff --git a/Ani-Mate Prompts/Image_Background/lumina-orbit-scroll.md b/Ani-Mate Prompts/Image_Background/lumina-orbit-scroll.md
new file mode 100644
index 0000000..73d02bd
--- /dev/null
+++ b/Ani-Mate Prompts/Image_Background/lumina-orbit-scroll.md
@@ -0,0 +1,74 @@
+ {
+ "id": "lumina-orbit-scroll",
+ "name": "Lumina Orbit Scroll",
+ "description": "A single large image stays pinned, then shrinks into a tilted luminous card and fades away through scroll.",
+ "targetShape": "Best for one dominant hero image or media surface, optionally with centered overlay copy above it.",
+ "selectorContract": [
+ "Role ownership is strict: scrollSection owns runway, stickyFrame owns sticky/clipping, and primaryImage owns the transform/filter animation.",
+ "Animate only the dominant image/media root. Do not bind the transform to stickyFrame or to a wrapper that also contains copy.",
+ "In Wix, stickyFrame is usually the internal-container-root and primaryImage should be the concrete image comp or stable image-only wrapper inside it.",
+ "Use viewport units only for the runway and sticky frame. Recompute runway height from the desired pacing instead of copying the demo number."
+ ],
+ "roleGuidance": {
+ "scrollSource": "Tall section whose viewProgress drives the image orbit.",
+ "stickyFrame": "Pinned viewport-sized frame that centers and clips the large image.",
+ "primaryImage": "The single large image or image-only media wrapper that receives the transform/filter sequence."
+ },
+ "adaptationNotes": [
+ "Keep the source image sizing model unless the image needs explicit stage fill; `width/height: 100%` with `object-fit: cover` is the normal baseline.",
+ "If the section has overlay copy, leave it static or animate it separately with its own selector.",
+ "Use the image root or image-only wrapper as primaryImage so text does not shrink and tilt with the image.",
+ "If the image should not disappear fully, stop the last keyframe earlier instead of copying the demo fade-out literally."
+ ],
+ "requiredElements": [
+ { "key": "scrollSection", "role": "scrollSource", "demoSelector": ".sticky-track" },
+ { "key": "stickyFrame", "role": "stickyFrame", "demoSelector": "#sticky-frame" },
+ { "key": "primaryImage", "role": "primaryImage", "demoSelector": "#hero-image" }
+ ],
+ "requiredStyles": [
+ {
+ "targetRole": "scrollSource",
+ "declarations": { "position": "relative", "minHeight": "500vh" }
+ },
+ {
+ "targetRole": "stickyFrame",
+ "declarations": {
+ "position": "sticky",
+ "top": "0",
+ "height": "100vh",
+ "display": "flex",
+ "alignItems": "center",
+ "justifyContent": "center",
+ "overflow": "clip"
+ }
+ },
+ {
+ "targetRole": "primaryImage",
+ "declarations": {
+ "display": "block",
+ "width": "100vw",
+ "height": "100vh",
+ "objectFit": "cover",
+ "willChange": "transform, filter, opacity, border-radius"
+ }
+ }
+ ],
+ "interactionRecipe": {
+ "trigger": "viewProgress",
+ "target": "scrollSection",
+ "effects": [
+ {
+ "key": "primaryImage",
+ "kind": "imageOrbitAway",
+ "rangeStart": "contain 0%",
+ "rangeEnd": "contain 100%",
+ "keyframeSummary": [
+ "start: slightly enlarged full-stage image",
+ "mid: shrink into tilted luminous card",
+ "end: tiny desaturated faded image"
+ ],
+ "notes": "Scale, 3D tilt, border radius, filter, and opacity all evolve together."
+ }
+ ]
+ }
+ }
\ No newline at end of file
diff --git a/Ani-Mate Prompts/Image_Background/manifest-expand-scroll.md b/Ani-Mate Prompts/Image_Background/manifest-expand-scroll.md
new file mode 100644
index 0000000..fe8de2c
--- /dev/null
+++ b/Ani-Mate Prompts/Image_Background/manifest-expand-scroll.md
@@ -0,0 +1,181 @@
+# Manifest Expand Scroll
+
+Single-image block expands from a corner card into a full-frame hero through scroll.
+
+## Summary
+
+- **ID:** `manifest-expand-scroll`
+- **Name:** `Manifest Expand Scroll`
+- **Description:** A single large image begins as a cropped anchored block and expands through a sticky frame until it nearly fills the viewport, while the image zoom settles back to full scale.
+- **Best for:** one dominant image or media block that can grow from a smaller anchored composition into a near full-bleed hero.
+
+## Demo HTML
+
+```html
+
+
+```
+
+## Selector Contract
+
+1. Role ownership is strict: `scrollSection` owns runway, `stickyFrame` owns sticky/clipping, `imageBox` owns expansion geometry, and `primaryImage` owns zoom.
+2. `stickyFrame`, `imageBox`, and `primaryImage` must stay distinct selectors. `imageBox` is the absolute block inside the frame; `primaryImage` is the actual media surface inside it.
+3. Use viewport units only for the outer runway and sticky frame. Animate `imageBox` with inset/top/right/bottom/left values inside the frame, not by resizing the section.
+4. Prefer a concrete media selector over a broad `img` descendant. Recompute the start/end inset values from the real composition.
+
+## Role Guidance
+
+| Role | Guidance |
+| --- | --- |
+| `scrollSource` | Tall section whose `viewProgress` drives the expansion of the image block. |
+| `stickyFrame` | Pinned viewport-sized frame that clips the expanding image composition. |
+| `imageBox` | Absolute positioned image block that expands from a smaller anchored crop toward full-frame. |
+| `primaryImage` | The image/media surface inside `imageBox` that zooms from 1.25 back to 1 as the box expands. |
+
+## Adaptation Notes
+
+1. Treat this as a single-image hero pattern, not a gallery pattern.
+2. Adapt the start box to the real editorial crop; the demo corner and margin values are illustrative.
+3. Usually keep the end box slightly inset from the viewport unless the section truly wants full bleed.
+4. Keep width/height 100% and object-fit cover on `primaryImage` so the zoom reads as camera motion, not layout resize.
+5. If the image has no dimensions after adaptation, `primaryImage` was probably mapped too deep; move it to the actual media root or stable media wrapper.
+
+## Required Elements
+
+| Key | Role | Demo Selector | Purpose |
+| --- | --- | --- | --- |
+| `scrollSection` | `scrollSource` | `.sticky-track` | The `viewProgress` source for the expanding single-image composition. |
+| `stickyFrame` | `stickyFrame` | `#sticky-frame` | The pinned/clipped viewport frame around the expanding image. |
+| `imageBox` | `imageBox` | `#image-box` | The expanding image block whose absolute geometry changes through scroll. |
+| `primaryImage` | `primaryImage` | `#hero-image` | The image/media surface inside `imageBox` that settles from an enlarged crop to its final scale. |
+
+## Required Styles
+
+### `scrollSource`
+
+Selector: `.sticky-track`
+
+```css
+.sticky-track {
+ position: relative;
+ min-height: 400vh;
+}
+```
+
+Reason: creates the runway needed for the full anchored-block-to-hero expansion.
+
+### `stickyFrame`
+
+Selector: `#sticky-frame`
+
+```css
+#sticky-frame {
+ position: sticky;
+ top: 0;
+ height: 100vh;
+ width: 100vw;
+ overflow: clip;
+}
+```
+
+Reason: pins and clips the expanding image composition inside the viewport.
+
+### `imageBox`
+
+Selector: `#image-box`
+
+```css
+#image-box {
+ position: absolute;
+ top: calc(60% - 24px);
+ right: calc(75% - 24px);
+ bottom: 24px;
+ left: 24px;
+ overflow: clip;
+ will-change: top, right, bottom, left;
+}
+```
+
+Reason: defines the anchored starting crop that expands across the sticky frame. Recompute these inset values from the actual section composition.
+
+### `primaryImage`
+
+Selector: `#hero-image`
+
+```css
+#hero-image {
+ display: block;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ will-change: transform;
+}
+```
+
+Reason: keeps the image/media surface itself filling the expanding block while the internal zoom settles back to `scale(1)`. Apply these dimensions on the `primaryImage` selector, not only on a descendant `img` tag.
+
+## Interact Template
+
+### Range
+
+```ts
+const RANGE = {
+ rangeStart: { name: 'contain', offset: { value: 0, unit: 'percentage' } },
+ rangeEnd: { name: 'contain', offset: { value: 100, unit: 'percentage' } },
+ fill: 'both' as const,
+};
+```
+
+### Image Box Expand Effect
+
+```ts
+const imageBoxExpandEffect = {
+ key: 'imageBox',
+ keyframeEffect: {
+ name: 'manifest-expand-container',
+ keyframes: [
+ { top: 'calc(60% - 24px)', right: 'calc(75% - 24px)', offset: 0 },
+ { top: 'calc(60% - 24px)', right: '24px', offset: 0.5 },
+ { top: '24px', right: '24px', offset: 1 },
+ ],
+ },
+ ...RANGE,
+};
+```
+
+### Primary Image Zoom Effect
+
+```ts
+const primaryImageZoomEffect = {
+ key: 'primaryImage',
+ keyframeEffect: {
+ name: 'manifest-expand-image-zoom-out',
+ keyframes: [
+ { transform: 'scale(1.25)', offset: 0 },
+ { transform: 'scale(1)', offset: 1 },
+ ],
+ },
+ ...RANGE,
+};
+```
+
+### Interaction
+
+```ts
+{
+ key: 'scrollSection',
+ trigger: 'viewProgress',
+ effects: [imageBoxExpandEffect, primaryImageZoomEffect],
+}
+```
+
+## Source
+
+This Markdown file was derived from [example.ts](/Users/marinebr/dev/responsive-editor-packages/packages/editor-package-ani-mate/src/examples/ManifestExpandScroll/example.ts).
diff --git a/Ani-Mate Prompts/Typographic_interactions/cards-peel-off-scroll.md b/Ani-Mate Prompts/Typographic_interactions/cards-peel-off-scroll.md
new file mode 100644
index 0000000..1c1b509
--- /dev/null
+++ b/Ani-Mate Prompts/Typographic_interactions/cards-peel-off-scroll.md
@@ -0,0 +1,222 @@
+# Cards Peel Off Scroll
+
+Stacked text cards pin in place and peel away one by one as you scroll.
+
+## Summary
+
+- **ID:** `cards-peel-off-scroll`
+- **Target shape:** Best for 3–6 full-screen, similarly sized "story" cards that should stack and reveal sequentially — each card needs its own tall scroll runway, not a single shared sticky stage.
+- **Description:** A series of centered cards rest at slight alternating tilts; as the page scrolls each top card rotates a little further and fades out, peeling away to reveal the next card pinned beneath it. The last card tilts in and stays.
+
+## Demo HTML
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+```
+
+## Selector Contract
+
+1. Role ownership is strict and **per card**: each `scrollSource` (card section) owns its own runway + stacking offset (min-height, negative margin, z-index), each `stickyFrame` (card wrap) owns the sticky pin, and each `repeatedCard` (card root) owns the resting tilt + peel transform.
+2. Cards do **not** share one sticky stage. Every card has its own section + sticky wrap; sections overlap via negative `margin-top`. Collapsing them into a single sticky container turns this into a fan/spread pattern, not a peel-off.
+3. `z-index` must **descend** from the first card to the last (first on top). Equal or ascending z-index breaks the reveal order — the top card must peel away to expose the one beneath.
+4. The peel transform belongs on the card root (the `data-interact-key` element), never on the icon, heading, or text descendants.
+5. Do not clip the sticky frame — cards rotate beyond their own box as they peel. Keep `overflow` visible on the frame; only the page/body may use `overflow-x: hidden`. Use rendered `#comp-...` ids in Wix, never `DESKTOP--...` ids.
+
+## Role Guidance
+
+| Role | Guidance |
+| --- | --- |
+| `scrollSource` | The tall card section that drives one card's `viewProgress` exit; owns the stacking offset (min-height = runway, negative margin pulling it over the previous section, descending z-index). |
+| `stickyFrame` | A `position: sticky`, `100dvh` wrapper that pins a single card centered in the viewport while its section scrolls past. |
+| `repeatedCard` | The card root that rests at a slight tilt and rotates further while fading to transparent as it peels off — or, for the final card, tilts in on enter and stays. |
+
+## Adaptation Notes
+
+1. Each card is a self-contained stack: `scrollSource` section (runway) → `stickyFrame` wrap (pin) → `repeatedCard` card. Repeat the unit per card; do not merge them into one shared stage.
+2. Stacking-offset formula for card *n* (1-based): `min-height` is the peel runway (≈ `(2 + n) × 100dvh`; longer = slower peel), `margin-top` of every card after the first = `-(previous section's min-height)` so it begins overlapping where the previous card pinned, and `z-index = count − n + 1` (first card highest).
+3. Resting tilt alternates sign with a small magnitude (≈ ±2.5–5°). On peel, the card rotates a further ~6° **in the same direction** while `opacity` goes `1 → 0` across the `exit` range.
+4. The **last** card uses `viewEnter` (tilt in once) instead of a `viewProgress` exit — it is the final layer and must not peel away.
+5. Cards are viewport-relative (≈`57.6dvh` wide, `5 / 4` aspect). Keep each card inside its sticky frame; on narrow widths clamp width to `min(57.6dvh, calc(100vw - gutter))`.
+6. The hero is an optional fixed entrance accent (fade + rise on `viewEnter`); include or drop it independently of the card stack.
+7. When item count changes, extend `card4..cardN` by repeating the section/frame/card unit and continuing the min-height / margin / z-index formulas. The last card is always the enter-only one.
+
+## Required Elements
+
+| Key | Role | Demo Selector | Purpose |
+| --- | --- | --- | --- |
+| `card1` | `repeatedCard` | `.card-section.first .card` | Top card; rests at a slight tilt and peels off (rotate + fade) over its exit range. |
+| `card2` | `repeatedCard` | `.card-section.second .card` | Peels off to reveal `card3`. |
+| `card3` | `repeatedCard` | `.card-section.third .card` | Peels off to reveal `card4`. |
+| `card4` | `repeatedCard` | `.card-section.fourth .card` | Final layer; tilts in on `viewEnter` and stays (does not peel). |
+
+> Repeated card keys must keep their trailing index (`card1`, `card2`, …) so they compact into the `card{n}` group; extend the row as `card4..cardN` for more items, keeping the last key as the enter-only card.
+
+## Required Styles
+
+### `scrollSource` — `.card-section`
+
+```css
+.card-section {
+ position: relative;
+}
+.card-section.first { min-height: 280dvh; z-index: 4; }
+.card-section.second { min-height: 440dvh; margin-top: -280dvh; z-index: 3; }
+.card-section.third { min-height: 600dvh; margin-top: -440dvh; z-index: 2; }
+.card-section.fourth { min-height: 700dvh; margin-top: -600dvh; z-index: 1; }
+```
+
+Reason: each section supplies its card's scroll runway; the negative `margin-top` overlaps it onto the previous section so the next card pins beneath the current one, and descending `z-index` keeps earlier cards on top so they peel away first. Recompute heights/margins/z-index from real card count — these literals are for four cards.
+
+### `stickyFrame` — `.card-wrap`
+
+```css
+.card-wrap {
+ position: sticky;
+ top: 0;
+ height: 100dvh;
+ display: grid;
+ place-items: start center;
+ padding: max(10rem, 27dvh) 2rem 2rem;
+}
+```
+
+Reason: pins one card centered near the top of the viewport while its section scrolls; no `overflow` clip so the card can rotate past its box during the peel.
+
+### `repeatedCard` — `.card`
+
+```css
+.card {
+ --tilt: 0deg;
+ width: var(--card-width, 57.6dvh);
+ aspect-ratio: 5 / 4;
+ transform: rotate(var(--tilt));
+ transform-origin: center center;
+ will-change: transform, opacity;
+}
+.card-section.first .card { --tilt: -4deg; }
+.card-section.second .card { --tilt: 5deg; }
+.card-section.third .card { --tilt: -3.5deg; }
+.card-section.fourth .card { --tilt: 2.5deg; }
+```
+
+Reason: sets each card's resting tilt and viewport-relative size; the peel keyframes start from this resting `rotate(var(--tilt))` and carry it further while fading. `will-change` keeps the rotate/opacity animation smooth.
+
+## Suggested Controls
+
+Expose the pattern's core feel knobs — resting tilt, peel intensity, and card size. The adapting agent wires each variable into the styles and keyframes it emits.
+
+### `card-tilt`
+
+- **Label:** `Card Tilt`
+- **Group:** `Layout`
+- **Type:** `range`
+- **Default:** `4`
+- **Description:** Base magnitude of each card's resting tilt; the sign alternates per card.
+- **Constraints:** `min: 0`, `max: 10`, `step: 0.5`, `unit: deg`
+- **Binding:** `variable` `--card-tilt` using template `${value}deg`
+
+### `peel-rotation`
+
+- **Label:** `Peel Rotation`
+- **Group:** `Motion`
+- **Type:** `range`
+- **Default:** `6`
+- **Description:** Extra degrees a card rotates while it fades out and peels away.
+- **Constraints:** `min: 2`, `max: 20`, `step: 1`, `unit: deg`
+- **Binding:** `variable` `--card-peel-rotation` using template `${value}deg`
+
+### `card-width`
+
+- **Label:** `Card Width`
+- **Group:** `Layout`
+- **Type:** `range`
+- **Default:** `57.6`
+- **Description:** Card width relative to viewport height; cards keep a 5 / 4 aspect ratio.
+- **Constraints:** `min: 30`, `max: 80`, `step: 1`, `unit: dvh`
+- **Binding:** `variable` `--card-width` using template `${value}dvh`
+
+## Interact Template
+
+```ts
+// Each top card peels across its EXIT range; progress is the card leaving the viewport.
+const exitRange = {
+ rangeStart: { name: 'exit', offset: { value: 0, unit: 'percentage' } },
+ rangeEnd: { name: 'exit', offset: { value: 100, unit: 'percentage' } },
+ easing: 'ease-in',
+ fill: 'both' as const,
+};
+
+// Resting tilt per card — alternating, small. Recompute for the real card count.
+const TILTS = [-4, 5, -3.5, 2.5];
+const PEEL_EXTRA = 6; // extra degrees rotated while fading out (see peel-rotation control)
+
+// Top cards: rotate further in the same direction + fade to 0 as they leave.
+const peelEffect = (key: string, tilt: number) => ({
+ key,
+ trigger: 'viewProgress',
+ conditions: ['full-motion'],
+ effects: [{
+ keyframeEffect: {
+ name: `${key}-peel`,
+ keyframes: [
+ { transform: `rotate(${tilt}deg)`, opacity: 1 },
+ { transform: `rotate(${tilt + Math.sign(tilt) * PEEL_EXTRA}deg)`, opacity: 0 },
+ ],
+ },
+ ...exitRange,
+ }],
+});
+
+// Final card: tilts in once on enter and stays (does not peel).
+const enterTiltEffect = (key: string, tilt: number) => ({
+ key,
+ trigger: 'viewEnter',
+ params: { type: 'once' },
+ conditions: ['full-motion'],
+ effects: [{
+ keyframeEffect: {
+ name: `${key}-enter`,
+ keyframes: [{ transform: 'rotate(0deg)' }, { transform: `rotate(${tilt}deg)` }],
+ },
+ duration: 600,
+ easing: 'cubic-bezier(0.16, 1, 0.3, 1)',
+ fill: 'forwards',
+ }],
+});
+
+const interactions = [
+ // every card except the last peels off…
+ ...TILTS.slice(0, -1).map((tilt, i) => peelEffect(`card${i + 1}`, tilt)),
+ // …the last card tilts in and stays.
+ enterTiltEffect(`card${TILTS.length}`, TILTS[TILTS.length - 1]),
+];
+
+// Gate motion on user preference.
+const conditions = {
+ 'full-motion': { type: 'media', predicate: '(prefers-reduced-motion: no-preference)' },
+};
+```
diff --git a/Ani-Mate Prompts/Typographic_interactions/text-cards-slide-in.md b/Ani-Mate Prompts/Typographic_interactions/text-cards-slide-in.md
new file mode 100644
index 0000000..5c34ab6
--- /dev/null
+++ b/Ani-Mate Prompts/Typographic_interactions/text-cards-slide-in.md
@@ -0,0 +1,261 @@
+# Text Cards Slide In
+
+Stacked cards slide into a fixed center stage on scroll, alternating from left and right.
+
+## Summary
+
+- **ID:** `text-cards-slide-in`
+- **Target shape:** Best for 3–6 similarly sized content cards that should reveal one-at-a-time over a fixed backdrop, each driven by its own full-viewport scroll step.
+- **Description:** A fixed, centered stage holds a stack of cards; as the page scrolls, each card slides in from alternating sides (odd from the left, even from the right) with a 3D perspective swing and lands centered on top of the previous one.
+
+## Demo HTML
+
+```html
+
+
\n ![]()
\n ![]()
\n ![]()
\n ![]()
\n ![]()
\n
\n…
…
…
…
…
\n ![]()
\n ![]()
\n ![]()
\n ![]()
\n ![]()
\n
\n…
…
…
…
…
\n \n \n \n
\nPortfolio
Our work
\n ![\"\"](\"https://static.wixstatic.com/media/9afeef_07191e86f3f9423c84eb6867b0bef541~mv2.jpg\")
\n ![\"\"](\"https://static.wixstatic.com/media/9afeef_003536cd5d924edd89c0a22940f93b40~mv2.jpg\")
\n ![\"\"](\"https://static.wixstatic.com/media/9afeef_84484d814fd84fb3b568145ac9daaecf~mv2.jpg\")
\n ![\"\"](\"https://static.wixstatic.com/media/9afeef_fe6dc7d60c1245e0b6d269d27f93708b~mv2.jpg\")
\n
\n 01
02
03
04
This is the space to introduce your Projects section. Take this opportunity to give visitors a brief overview of the types of projects they'll find featured in the showcase below. Consider adding an image or video to spark their interest.
\n ![]()
\n ![]()
\n ![]()
\n ![]()
\n ![]()
\n
\n…
…
…
…
…
\n \n \n \n
\nPortfolio
Our work
\n \n \n \n \n
\n 01
02
03
04
This is the space to introduce your Projects section. Take this opportunity to give visitors a brief overview of the types of projects they'll find featured in the showcase below. Consider adding an image or video to spark their interest.
\n
\n\n \n
\n \n \n \n \n
\n Amenity 6
This is the space to highlight the additional services and conveniences you provide to enhance the client or visitor experience.
\n \n
\n \n \n \n \n
\n Amenity 5
This is the space to highlight the additional services and conveniences you provide to enhance the client or visitor experience.
\n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n \n
\n \n \n \n \n
\n Amenity 4
This is the space to highlight the additional services and conveniences you provide to enhance the client or visitor experience.
\n
\n \n
\n \n
\n \n \n
\n \n \n \n \n
\n Amenity 3
This is the space to highlight the additional services and conveniences you provide to enhance the client or visitor experience.
\n
\n \n \n
\n \n
\n \n \n \n \n
\n Amenity 2
This is the space to highlight the additional services and conveniences you provide to enhance the client or visitor experience.
\n
\n \n \n
\n \n
\n \n \n \n \n
\n Amenity 1
This is the space to highlight the additional services and conveniences you provide to enhance the client or visitor experience.
\n
\n \n \n
\n \n
\n \n \n
\n Amenities
+
+
+
+ 1
+ 2
+ 3
+
+
+
+```
+
+## Selector Contract
+
+1. Role ownership is strict: each `marqueeLane` owns the `viewEnter` source plus the clipping; each `marqueeTrack` owns the slide transform; `trackHalf` owns the duplicated-set structure; `laneItem` owns item sizing.
+2. The track MUST contain exactly **two** identical content sets (`trackHalf` × 2, same items in the same order). The `translateX(-50%)` loop assumes the track is exactly two sets wide — one set shows a gap, three or more breaks the 50% math.
+3. The `viewEnter` source and the animated target must be **different** elements: source is the lane (`lane{n}`), target is the track (`track{n}`). The raw demo animates the track as its own source with `type: 'state'`; per `@wix/interact` that risks re-trigger/never-firing, so map the source to the lane instead.
+4. The track must be `width: max-content` inside an `overflow: hidden` lane, so it can exceed the lane and be clipped. Use rendered ids/classes, not invented ones.
+
+## Role Guidance
+
+| Role | Guidance |
+| --- | --- |
+| `marqueeLane` | A fixed-height row that clips its track and acts as the `viewEnter` source so the loop only runs while on screen. |
+| `marqueeTrack` | The over-wide flex row that actually moves; `width: max-content`, animated on `transform`. The effect target. |
+| `trackHalf` | One of the two identical content sets inside the track; the duplication is what makes the `-50%` loop seamless. |
+| `laneItem` | A repeated item carried by the track; keeps its own width and never shrinks. |
+
+## Adaptation Notes
+
+1. Render each lane's items **twice**, in order, as two `trackHalf` children — the loop math (`translateX(0) ↔ translateX(-50%)`) depends on the track being exactly two sets wide.
+2. Direction alternates by lane parity: odd lanes `[-50% → 0]` (drift right), even lanes `[0 → -50%]` (drift left). Set each track's CSS initial `transform` to match its first keyframe so there's no jump before the loop starts.
+3. Speed is `trackWidth / duration`. The illustrative 40–55s are tuned to the demo's set width; when item count or size changes, scale each lane's `duration` proportionally to keep a constant pixels-per-second, and keep durations slightly different per lane for a natural multi-speed feel.
+4. `@wix/interact` runs in JSON, which has no `Infinity` — serialize the endless loop as `iterations: 0` (treated as infinite). The TS template below writes `Infinity` only for readability.
+5. Keep `viewEnter` with `type: 'state'` (plays while the lane is visible, pauses off-screen) — do not switch to `once`, which would stop the marquee after the first entry. To add lanes, extend `lane4..laneN` + `track4..trackN` as pairs; hiding the lower lanes under a mobile breakpoint is optional.
+
+## Required Elements
+
+| Key | Role | Demo Selector | Purpose |
+| --- | --- | --- | --- |
+| `lane1` | `marqueeLane` | `#lane-1` (`.gallery-row`) | `viewEnter` source + clip for track 1; extend outward for `lane4..laneN`. |
+| `lane2` | `marqueeLane` | `#lane-2` (`.gallery-row`) | `viewEnter` source + clip for track 2. |
+| `lane3` | `marqueeLane` | `#lane-3` (`.gallery-row`) | `viewEnter` source + clip for track 3. |
+| `track1` | `marqueeTrack` | `#wrapper-1` | Moving flex track (two duplicated sets); marquee target for lane 1. |
+| `track2` | `marqueeTrack` | `#wrapper-2` | Marquee target for lane 2. |
+| `track3` | `marqueeTrack` | `#wrapper-3` | Marquee target for lane 3. |
+
+> Repeated keys keep their trailing index and are paired: `lane{n}` is the source for `track{n}`. Extend the rows together as matched `lane4`+`track4` … `laneN`+`trackN` pairs.
+
+## Required Styles
+
+### `marqueeLane` — `.gallery-row`
+
+```css
+.gallery-row {
+ height: var(--row-height, 240px);
+ position: relative;
+ overflow: hidden;
+}
+```
+
+Reason: a fixed-height lane that clips the wider moving track so only one lane's worth of items shows at a time.
+
+### `marqueeTrack` — `.animation-wrapper`
+
+```css
+.animation-wrapper {
+ display: flex;
+ flex-direction: row;
+ height: 100%;
+ width: max-content;
+ will-change: transform;
+}
+```
+
+Reason: a single horizontal row sized to its full content so it can slide left/right and be clipped by the lane; `will-change` hints compositing for the perpetual transform.
+
+### `trackHalf` — `.animation-wrapper > div`
+
+```css
+.animation-wrapper > div {
+ display: flex;
+ flex-direction: row;
+ height: 100%;
+}
+```
+
+Reason: the two identical sets sit side-by-side so a `-50%` shift equals exactly one set width — the moment the first set scrolls out, the second is in the same place, making the loop seamless.
+
+### `laneItem` — `.image-container`
+
+```css
+.image-container {
+ position: relative;
+ height: 100%;
+ flex-shrink: 0;
+}
+```
+
+Reason: items keep their natural width and never compress, so the track's total width (and therefore the loop distance) stays stable.
+
+### `laneItem` — `.gallery-image`
+
+```css
+.gallery-image {
+ height: 100%;
+ width: auto;
+ object-fit: cover;
+ box-sizing: border-box;
+ padding: var(--img-padding, 15px);
+ border-radius: var(--img-border-radius, 24px);
+ display: block;
+}
+```
+
+Reason: images size to the lane height and keep their aspect ratio, which sets each item's width (hence the track width); the padding creates the visible gap between items.
+
+## Suggested Controls
+
+Expose the loop speed and the lane height as the core knobs; item padding is a secondary spacing knob.
+
+### `speed`
+
+- **Label:** `Scroll Speed`
+- **Group:** `Motion`
+- **Type:** `range`
+- **Default:** `45`
+- **Description:** How long one full loop takes; lower is faster. Applied as each lane's effect duration (vary slightly per lane).
+- **Constraints:** `min: 15`, `max: 90`, `step: 1`, `unit: s`
+- **Suggested variable:** `--marquee-duration`
+
+### `row-height`
+
+- **Label:** `Lane Height`
+- **Group:** `Layout`
+- **Type:** `range`
+- **Default:** `240`
+- **Description:** Height of each lane, which also scales the items (they size to lane height).
+- **Constraints:** `min: 120`, `max: 420`, `step: 10`, `unit: px`
+- **Suggested variable:** `--row-height`
+
+### `item-padding`
+
+- **Label:** `Item Gap`
+- **Group:** `Layout`
+- **Type:** `range`
+- **Default:** `15`
+- **Description:** Padding around each item — the visible gap between items in a lane.
+- **Constraints:** `min: 0`, `max: 40`, `step: 1`, `unit: px`
+- **Suggested variable:** `--img-padding`
+
+## Interact Template
+
+```ts
+// viewEnter `state` plays the marquee while the lane is on screen and pauses it
+// when the lane scrolls away (cheap off-screen). Source = lane, target = track,
+// so source and target are different elements (see Selector Contract #3).
+
+// Two seamless directions. The track holds TWO identical sets, so a -50% shift
+// equals exactly one set width.
+const moveRight = [{ transform: 'translateX(-50%)' }, { transform: 'translateX(0)' }];
+const moveLeft = [{ transform: 'translateX(0)' }, { transform: 'translateX(-50%)' }];
+
+// Illustrative per-lane durations (ms). Recompute from real track width to hold
+// a constant pixels/second; keep them slightly different per lane.
+const LANE_DURATIONS = [40000, 50000, 45000];
+```
+
+```ts
+// One marquee effect per lane. Direction alternates by index parity.
+// NOTE: in serialized JSON use `iterations: 0` (treated as infinite) — JSON has
+// no `Infinity`.
+const marqueeEffect = (trackKey: string, index: number) => ({
+ key: trackKey,
+ keyframeEffect: {
+ name: `${trackKey}-marquee`,
+ keyframes: index % 2 === 0 ? moveRight : moveLeft,
+ },
+ duration: LANE_DURATIONS[index] ?? 45000,
+ easing: 'linear',
+ iterations: Infinity, // serialize as 0
+});
+
+const laneKeys = ['lane1', 'lane2', 'lane3'] as const;
+const trackKeys = ['track1', 'track2', 'track3'] as const;
+
+// Each lane is its own viewEnter(state) source driving only its own track.
+const interactions = laneKeys.map((laneKey, i) => ({
+ key: laneKey,
+ trigger: 'viewEnter',
+ params: { type: 'state' },
+ effects: [marqueeEffect(trackKeys[i], i)],
+}));
+```
diff --git a/Ani-Mate Prompts/Gallery-and-Carousel/Scroll_3D_Animation.md b/Ani-Mate Prompts/Gallery-and-Carousel/Scroll_3D_Animation.md
new file mode 100644
index 0000000..d2ba4d2
--- /dev/null
+++ b/Ani-Mate Prompts/Gallery-and-Carousel/Scroll_3D_Animation.md
@@ -0,0 +1,251 @@
+# Scroll 3D Animation
+
+Split-screen copy with a rotating 3D panel stack that subtly fans out on scroll.
+
+## Summary
+
+- **ID:** `scroll-3d-animation`
+- **Target shape:** Best for one tall scroll section with fixed intro copy on one side and `4-8` overlapped image/card panels centered in a separate 3D stage.
+- **Description:** A fixed panel stage starts turned away in 3D, rotates toward the viewer over the first half of the scroll, and keeps a stack of depth-layered panels centered while each panel drifts slightly sideways according to its index.
+
+## Demo HTML
+
+```html
+
+
+
+
+
+
+ 
+
+
+
+ …
…
+
+
+
+
+
+ Title 01
+Scroll-driven 3D animation with horizontal subtle movement.
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Static intro copy…
+
+
+ Built
+ Space
+
+ …
+
+
+
+
+
+ ![]()
+
+ The Journey
+From idea to completion
+
+
+…
+
+
+…
+
+
+…
+
+
+…
+
+
+
+
+
+The Journey
From idea to completion
+
+
+
+…
…
…
…
+
+```
+
+## Selector Contract
+
+1. Role ownership is strict: each `scrollTrigger` owns one card's scroll runway and `viewProgress` source, `cardStage` owns the fixed centered pinning, and `repeatedCard` owns the slide transform plus stacking `z-index`.
+2. The pairing is one-to-one: `trigger{n}` drives `card{n}`. Do not collapse all cards onto a single trigger — each card needs its own scroll step or they all animate at once.
+3. `cardStage` must be a different element from the scroll triggers. The stage is a fixed overlay; the triggers live in normal document flow because they are what create the scroll distance.
+4. Cards stack with increasing `z-index` so each new card lands on top. Keep that ordering when adding cards.
+5. The animated node is the card wrapper (`data-interact-key="card-{n}"`), not the inner content element. Start it hidden and let the effect reveal it.
+
+## Role Guidance
+
+| Role | Guidance |
+| --- | --- |
+| `scrollTrigger` | A full-viewport (`100vh`) section in normal flow; its `viewProgress` drives exactly one card. One per card. |
+| `cardStage` | A fixed, full-viewport, centered overlay that pins every card in the same spot. `pointer-events: none` so it never blocks scrolling. |
+| `repeatedCard` | Absolutely positioned card wrappers, all overlapping at the stage center, stacked by `z-index`, that slide in from off-screen. |
+| `staticBackdrop` | Optional fixed hero behind the cards that fades in once on first view. Decorative, not required for the slide mechanic. |
+
+## Adaptation Notes
+
+1. Scroll distance is one `100vh` step per card plus one trailing spacer section. `N` cards → `N` trigger sections + 1 spacer.
+2. The off-screen start distance (`120vw` in the demo) must exceed half the viewport so cards fully clear the stage before sliding in; reduce it if the stage is narrow or the runway feels too long.
+3. `cardStage` is `position: fixed`, not `sticky` — it floats above the scroll canvas via `z-index` and uses `pointer-events: none` so the page still scrolls through it.
+4. Alternate `enter-from-left` / `enter-from-right` by card index parity (odd → left, even → right). For a calmer look, pick one direction for every card.
+5. Always provide a reduced-motion fallback: swap the slide for a plain opacity `fade-center` under a `(prefers-reduced-motion: reduce)` condition.
+6. Cards start hidden and use `fill: both` so they persist after entering and accumulate centered. Do not reset them at range end.
+7. To change card count, extend `card4..cardN` and `trigger4..triggerN` together as matched pairs, continuing the z-index increase and the left/right alternation.
+
+## Required Elements
+
+| Key | Role | Demo Selector | Purpose |
+| --- | --- | --- | --- |
+| `scrollCanvas` | container | `.scroll-canvas` | Holds the per-card scroll steps; `z-index: 0` so it sits below the fixed stage. |
+| `trigger1` | `scrollTrigger` | `.scroll-canvas > interact-element:nth-child(1)` | `viewProgress` source for `card1`; extend outward for `trigger4..triggerN`. |
+| `trigger2` | `scrollTrigger` | `.scroll-canvas > interact-element:nth-child(2)` | `viewProgress` source for `card2`. |
+| `trigger3` | `scrollTrigger` | `.scroll-canvas > interact-element:nth-child(3)` | `viewProgress` source for `card3`. |
+| `cardStage` | `cardStage` | `.card-stage` | Fixed, centered overlay pinning the cards; `pointer-events: none`. |
+| `card1` | `repeatedCard` | `[data-interact-key="card-1"]` | Minimum slide-in card (odd → from left); extend for `card4..cardN`. |
+| `card2` | `repeatedCard` | `[data-interact-key="card-2"]` | Slide-in card (even → from right). |
+| `card3` | `repeatedCard` | `[data-interact-key="card-3"]` | Slide-in card (odd → from left). |
+| `heroTitle` | `staticBackdrop` | `[data-interact-key="hero-title"]` | Optional: backdrop title that fades up once on first view. |
+| `heroSubtitle` | `staticBackdrop` | `[data-interact-key="hero-subtitle"]` | Optional: backdrop subtitle, fades up shortly after the title. |
+
+> Repeated keys must keep their trailing index (`card1`/`trigger1`, `card2`/`trigger2`, …) so they compact into the `card{n}` / `trigger{n}` groups; extend the rows as matched `card4`+`trigger4` … `cardN`+`triggerN` pairs.
+
+## Required Styles
+
+### `scrollTrigger` — `.scroll-section`
+
+```css
+.scroll-section {
+ height: 100vh;
+}
+```
+
+Reason: gives each card one full viewport of scroll so its `viewProgress` (entry 0%→100%) plays out across a single screen.
+
+### `cardStage` — `.card-stage`
+
+```css
+.card-stage {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100vh;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ pointer-events: none;
+ z-index: 10;
+}
+```
+
+Reason: pins every card to the same centered spot above the scroll canvas while letting scroll events pass straight through.
+
+### `repeatedCard` — `.card-wrapper`
+
+```css
+.card-wrapper {
+ position: absolute;
+ width: var(--card-stage-width, 630px);
+ aspect-ratio: 4 / 3.2;
+ opacity: 0;
+ transform-origin: center center;
+ will-change: transform, opacity;
+}
+
+.card-wrapper:nth-child(1) { z-index: 1; }
+.card-wrapper:nth-child(2) { z-index: 2; }
+.card-wrapper:nth-child(3) { z-index: 3; }
+.card-wrapper:nth-child(4) { z-index: 4; }
+```
+
+Reason: overlaps all cards at the stage center, hides them until their effect reveals them, and stacks them so each new card lands on top of the last.
+
+## Suggested Controls
+
+Expose the slide travel and the perspective swing as the core feel knobs; card width is a secondary layout knob.
+
+### `slide-distance`
+
+- **Label:** `Slide Distance`
+- **Group:** `Motion`
+- **Type:** `range`
+- **Default:** `120`
+- **Description:** How far off-screen each card starts before sliding to the center stage.
+- **Constraints:** `min: 60`, `max: 160`, `step: 10`, `unit: vw`
+- **Suggested variable:** `--card-slide-distance`
+
+### `tilt`
+
+- **Label:** `Swing Tilt`
+- **Group:** `Motion`
+- **Type:** `range`
+- **Default:** `14`
+- **Description:** The 3D Y-axis rotation applied as a card swings in; `0` gives a flat horizontal slide.
+- **Constraints:** `min: 0`, `max: 30`, `step: 1`, `unit: deg`
+- **Suggested variable:** `--card-tilt`
+
+### `card-width`
+
+- **Label:** `Card Width`
+- **Group:** `Layout`
+- **Type:** `range`
+- **Default:** `630`
+- **Description:** Width of the cards on the centered stage; the height follows from the `4 / 3.2` aspect ratio.
+- **Constraints:** `min: 360`, `max: 800`, `step: 10`, `unit: px`
+- **Suggested variable:** `--card-stage-width`
+
+## Interact Template
+
+```ts
+// Each card's viewProgress runs across the entry of its own scroll step.
+const entryRange = {
+ rangeStart: { name: 'entry', offset: { value: 0, unit: 'percentage' } },
+ rangeEnd: { name: 'entry', offset: { value: 100, unit: 'percentage' } },
+ easing: 'ease-out',
+ fill: 'both' as const,
+};
+
+// Illustrative travel/tilt — wire these to --card-slide-distance / --card-tilt.
+const SLIDE = '120vw';
+const TILT = '14deg';
+```
+
+```ts
+const conditions = {
+ 'full-motion': { type: 'media', predicate: '(prefers-reduced-motion: no-preference)' },
+ 'reduced-motion': { type: 'media', predicate: '(prefers-reduced-motion: reduce)' },
+};
+
+const effects = {
+ 'enter-from-left': {
+ keyframeEffect: {
+ name: 'enter-left',
+ keyframes: [
+ { opacity: -0.6, transform: `perspective(800px) translateX(-${SLIDE}) rotateX(-6deg) rotateY(${TILT})` },
+ { opacity: 1, transform: 'perspective(800px) translateX(0) rotateX(0) rotateY(0)' },
+ ],
+ },
+ ...entryRange,
+ },
+ 'enter-from-right': {
+ keyframeEffect: {
+ name: 'enter-right',
+ keyframes: [
+ { opacity: -0.6, transform: `perspective(800px) translateX(${SLIDE}) rotateX(-6deg) rotateY(-${TILT})` },
+ { opacity: 1, transform: 'perspective(800px) translateX(0) rotateX(0) rotateY(0)' },
+ ],
+ },
+ ...entryRange,
+ },
+ // Reduced-motion fallback: no travel, just a fade.
+ 'fade-center': {
+ keyframeEffect: { name: 'fade-center', keyframes: [{ opacity: 0 }, { opacity: 1 }] },
+ ...entryRange,
+ },
+};
+```
+
+```ts
+// One interaction per card: trigger{n} drives card{n}, direction by index parity.
+const cardKeys = ['card1', 'card2', 'card3'] as const;
+
+const cardInteractions = cardKeys.map((cardKey, i) => ({
+ key: `trigger${i + 1}`,
+ trigger: 'viewProgress',
+ effects: [
+ { key: cardKey, effectId: i % 2 === 0 ? 'enter-from-left' : 'enter-from-right', conditions: ['full-motion'] },
+ { key: cardKey, effectId: 'fade-center', conditions: ['reduced-motion'] },
+ ],
+}));
+
+// Optional backdrop: hero fades up once when it first enters the viewport.
+const heroInteractions = [
+ {
+ key: 'heroTitle',
+ trigger: 'viewEnter',
+ params: { type: 'once' },
+ effects: [{
+ keyframeEffect: { name: 'hero-title-fade', keyframes: [
+ { opacity: 0, transform: 'translateY(16px)' },
+ { opacity: 1, transform: 'translateY(0)' },
+ ] },
+ duration: 800, easing: 'ease-out', fill: 'forwards',
+ }],
+ },
+ {
+ key: 'heroSubtitle',
+ trigger: 'viewEnter',
+ params: { type: 'once' },
+ effects: [{
+ keyframeEffect: { name: 'hero-sub-fade', keyframes: [
+ { opacity: 0, transform: 'translateY(16px)' },
+ { opacity: 1, transform: 'translateY(0)' },
+ ] },
+ duration: 800, delay: 400, easing: 'ease-out', fill: 'forwards',
+ }],
+ },
+];
+
+const interactions = [...heroInteractions, ...cardInteractions];
+```
diff --git a/Gallery-and-Carousel/3DSmallCarousel.html b/Gallery-and-Carousel/3DSmallCarousel.html
index 6347273..93b4cb3 100644
--- a/Gallery-and-Carousel/3DSmallCarousel.html
+++ b/Gallery-and-Carousel/3DSmallCarousel.html
@@ -264,7 +264,7 @@