@mehshekari/gsap-motion 2.1.0

package/skill/reference/flip.md

@@ -0,0 +1,220 @@
+# Flip
+
+Animates between two layouts you did not have to compute. You change the DOM or
+the CSS however you like, and Flip works out the transform that makes the old
+state look like the new one, then animates it away.
+
+Use it when the animation's meaning is **continuity** — this thing is still that
+thing. A thumbnail becoming a hero image, a card expanding into a panel, an item
+moving between lists, a grid reflowing on filter.
+
+```ts
+import { Flip } from "gsap/Flip";
+gsap.registerPlugin(Flip);
+```
+
+## The pattern
+
+Three steps, always in this order:
+
+```ts
+const state = Flip.getState("[data-card]");   // 1. record
+
+container.classList.toggle("expanded");        // 2. change — anything at all
+
+Flip.from(state, {                             // 3. animate the difference
+  duration: 0.6,
+  ease: "power3.inOut",
+  absolute: true,
+});
+```
+
+Step 2 can be a class toggle, a React re-render, a reparent, a sort — Flip does
+not care how the layout changed, only what it was and what it is.
+
+## Options that matter
+
+```ts
+Flip.from(state, {
+  duration: 0.6,
+  ease: "power3.inOut",
+  absolute: true,          // position: absolute during the flip
+  nested: true,            // children also move — compensates their transforms
+  scale: true,             // scale instead of animating width/height
+  stagger: 0.05,
+  spin: true,
+  simple: true,            // skip rotation/skew maths when there is none
+  onEnter: (els) => gsap.fromTo(els, { opacity: 0 }, { opacity: 1 }),
+  onLeave: (els) => gsap.to(els, { opacity: 0 }),
+});
+```
+
+- **`absolute: true`** takes the moving elements out of flow for the duration.
+  Without it, siblings reflow during the animation and the whole grid jitters.
+  Reach for it whenever more than one element moves.
+- **`scale: true`** animates a transform instead of `width`/`height`. That is a
+  GPU-friendly property against a layout-triggering one — almost always the
+  right choice. The cost is that borders and text scale too; for a card with a
+  1px border, animating size may look better.
+- **`nested: true`** when the flipped elements contain their own flipped
+  children, so the child transform is compensated rather than compounded.
+- **`onEnter` / `onLeave`** handle elements that did not exist in one of the two
+  states. Flip cannot interpolate something that has no "before" — these are
+  where you fade them.
+
+## Shared element between routes or views
+
+The element must be identifiable in both states. `data-flip-id` is how Flip
+matches a node in the old state to a *different* node in the new one:
+
+```tsx
+<img data-flip-id="hero" … />   // in the grid
+<img data-flip-id="hero" … />   // in the detail view
+```
+
+```ts
+const state = Flip.getState("[data-flip-id]");
+setOpen(true);                                   // React swaps the tree
+Flip.from(state, { duration: 0.6, absolute: true });
+```
+
+In React, run `Flip.from` **after** the DOM has updated — in a layout effect
+keyed on the state that changed, so it measures the new layout before paint:
+
+```ts
+useGSAP(() => {
+  if (!state.current) return;
+  Flip.from(state.current, { duration: 0.6, absolute: true });
+}, { dependencies: [open] });
+```
+
+## Filtering a grid
+
+The case Flip is best at, and where hand-rolling is worst:
+
+```ts
+const state = Flip.getState(items);
+items.forEach((el) => {
+  el.style.display = el.dataset.tag === filter || filter === "all" ? "" : "none";
+});
+Flip.from(state, {
+  duration: 0.5,
+  scale: true,
+  absolute: true,
+  ease: "power2.inOut",
+  onEnter: (els) => gsap.fromTo(els, { opacity: 0, scale: 0.9 }, { opacity: 1, scale: 1 }),
+  onLeave: (els) => gsap.to(els, { opacity: 0, scale: 0.9 }),
+});
+```
+
+## Holding the container's height
+
+`absolute: true` lifts every target out of flow, so a container that took its
+height from them collapses to nothing and the whole page below jumps up. Flip's
+own docs prescribe holding the height and tweening it alongside:
+
+```ts
+tl.fromTo(grid, { height: fromHeight }, { height: toHeight, duration: D }, 0);
+```
+
+**Release it on Flip's completion, never on the parent timeline's.** Flip
+restores the targets to flow as the last child of its own timeline
+(`_setFinalStates`, added with `animation.call()` at its end — internals,
+verified against gsap 3.15), and its
+`onComplete` fires immediately after that:
+
+```ts
+tl.add(
+  Flip.from(state, {
+    targets: shells,
+    absolute: true,
+    onComplete: () => gsap.set(grid, { clearProps: "height" }),
+  }),
+  0,
+);
+```
+
+Hanging it on the parent's `onComplete` only looks equivalent. The parent ends
+when its **longest** child ends, so the gap between "Flip put things back in
+flow" and "the height was released" becomes whatever else happens to be on that
+timeline. Add a long sibling and it works; take that sibling away — a branch
+that skipped, an async tween that never got added — and the release lands on the
+same frame as the restore, for a one-frame collapse that only reproduces on the
+path where the sibling is missing. A card-to-panel Flip had exactly this:
+correct on every click but the first, where an image had not decoded and a
+sibling image pass was never added.
+
+The general rule: **tie the release of a held layout property to the event that
+actually restores the layout, not to a timeline whose length is incidental.**
+
+### The held height distorts the layout Flip is about to measure
+
+This one is worse, because it produces a wrong animation rather than a flicker.
+
+`gsap.fromTo(grid, { height: from }, { height: to })` renders its start value
+immediately, so by the time `Flip.from` measures where the targets should land,
+the container is already pinned to the **old** height. A grid or flex container
+that is taller than its content **stretches its auto rows to fill it** —
+`align-content` defaults to `normal`, which behaves as `stretch`. Flip therefore
+measures a stretched layout, animates everything to those positions, and the
+elements snap when it releases them into the real one.
+
+```
+held 744, natural 632, two rows  →  each row +56px
+  Flip's target:  138 + 476 + 24 = 638
+  where they go:  138 + 420 + 24 = 582     ← a 56px snap on release
+```
+
+The fix is on the container, not the animation:
+
+```tsx
+<ul className="grid content-start gap-6">   {/* align-content: start */}
+```
+
+The held height then sits as space at the foot instead of inflating every row,
+and it is inert whenever the height is not being held.
+
+It reproduces only when the held height **exceeds** the natural one — opening a
+panel that makes the grid shorter. Close it again, or switch between two open
+states, and the container is shorter than its content, nothing stretches, and
+the bug hides. That asymmetry is why it reads as "only on the first click".
+
+## `Flip.fit`
+
+Makes one element match another's position and size without changing the DOM —
+useful for an overlay that must land exactly on a card:
+
+```ts
+Flip.fit(overlay, card, { duration: 0.5, scale: true, ease: "power3.inOut" });
+```
+
+## When not to use it
+
+- **A simple show/hide.** Flip measures every target twice; a fade does not need
+  that.
+- **Something that is not the same object.** If the visitor would not say "that
+  became this", continuity is the wrong story and Flip is just an expensive
+  transition.
+- **Very large sets.** Two full layout reads plus a transform per element. A
+  hundred items is fine; a thousand is not.
+
+## Accessibility
+
+Flip moves things across the screen, which is exactly the motion
+`prefers-reduced-motion` exists for. Under `reduce`, apply the layout change
+with `duration: 0` — the state still changes, the travel does not. Never skip
+the change itself.
+
+Focus stays on the element being flipped, which is correct. Just make sure the
+focus ring is not clipped by an `overflow: hidden` ancestor during the flip.
+
+## Failures
+
+| Symptom | Cause |
+|---|---|
+| Siblings jitter during the flip | missing `absolute: true` |
+| Nothing animates | state captured after the change, not before |
+| New items pop in | no `onEnter` |
+| Children double-transform | missing `nested: true` |
+| Blurry text mid-flight | `scale: true` on text-heavy elements — animate size |
+| Wrong in React | `Flip.from` ran before the DOM updated |

package/skill/reference/frameworks.md

@@ -0,0 +1,153 @@
+# Frameworks other than React
+
+GSAP has no framework. What changes between frameworks is only **where an
+animation is created and where it is torn down** — the lifecycle. Everything
+else in this skill applies unchanged: motion design, timelines, ScrollTrigger,
+SVG, text, Flip, performance and accessibility.
+
+One pattern sits under every framework below:
+
+1. Create animations inside `gsap.context(fn, root)`, so selector strings
+   resolve inside the component's own root element.
+2. Build the reduced-motion branch with `gsap.matchMedia()` inside that context,
+   so it goes with it.
+3. Call `ctx.revert()` when the component goes away. That undoes every tween,
+   ScrollTrigger, SplitText and matchMedia created inside, and restores inline
+   styles.
+
+Timers, raw `addEventListener` calls and observers are not GSAP's — clear them
+yourself in the same cleanup.
+
+## Vanilla JavaScript
+
+```js
+import gsap from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+
+gsap.registerPlugin(ScrollTrigger);
+
+export function mountReveal(root) {
+  const ctx = gsap.context(() => {
+    const mm = gsap.matchMedia();
+    mm.add(
+      {
+        motion: "(prefers-reduced-motion: no-preference)",
+        reduced: "(prefers-reduced-motion: reduce)",
+      },
+      ({ conditions }) => {
+        if (conditions.reduced) {
+          gsap.set("[data-item]", { autoAlpha: 1, y: 0 });
+          return;
+        }
+        gsap.from("[data-item]", {
+          autoAlpha: 0,
+          y: 24,
+          stagger: { amount: 0.4 },
+          scrollTrigger: { trigger: root, start: "top 75%" },
+        });
+      },
+    );
+  }, root);
+
+  return () => ctx.revert(); // call when root is removed
+}
+```
+
+A static page that never removes the element can skip the cleanup. Anything that
+swaps content — a client-side router, HTMX, Turbo, a modal — cannot.
+
+## Vue 3 and Nuxt
+
+```vue
+<script setup>
+import gsap from "gsap";
+import { onMounted, onUnmounted, ref } from "vue";
+
+const root = ref(null);
+let ctx;
+
+onMounted(() => {
+  ctx = gsap.context(() => {
+    gsap.from("[data-item]", { autoAlpha: 0, y: 24, stagger: 0.06 });
+  }, root.value);
+});
+
+onUnmounted(() => ctx?.revert());
+</script>
+
+<template>
+  <section ref="root">…</section>
+</template>
+```
+
+- `onMounted` never runs during server rendering, so this is safe under Nuxt as
+  written.
+- Animation that reacts to state belongs in a `watch` that adds its tweens to
+  the same context with `ctx.add(() => { … })`, so they are reverted with it.
+
+## Svelte
+
+```svelte
+<script>
+  import gsap from "gsap";
+  import { onMount } from "svelte";
+
+  let root;
+
+  onMount(() => {
+    const ctx = gsap.context(() => {
+      gsap.from("[data-item]", { autoAlpha: 0, y: 24, stagger: 0.06 });
+    }, root);
+    return () => ctx.revert();
+  });
+</script>
+
+<section bind:this={root}>…</section>
+```
+
+A function returned from `onMount` runs when the component is destroyed.
+`onMount` does not run during server rendering. The markup uses Svelte's
+classic syntax; check how your Svelte version declares a `bind:this` variable
+before copying it.
+
+## Astro
+
+An Astro `<script>` runs once. With view transitions enabled, the page is
+swapped without a reload, so build on each page load and revert before each
+swap:
+
+```astro
+<script>
+  import gsap from "gsap";
+
+  let ctx;
+
+  document.addEventListener("astro:page-load", () => {
+    ctx = gsap.context(() => {
+      gsap.from("[data-item]", { autoAlpha: 0, y: 24, stagger: 0.06 });
+    });
+  });
+
+  document.addEventListener("astro:before-swap", () => ctx?.revert());
+</script>
+```
+
+Inside a React, Vue or Svelte island, use that framework's section instead.
+
+## Mounting twice
+
+Selector strings are scoped to the context's root, but `motionPath.path` and
+`morphSVG.shape` are resolved by the plugins against the whole document. A
+component rendered twice with a hardcoded id drives the first instance's
+geometry. Generate an id per instance in every framework, not only React.
+
+## What the audit covers here
+
+- `audit-gsap.mjs` reads `.js`, `.ts`, `.jsx`, `.tsx` and `.mjs` files only.
+  Logic inside `.vue`, `.svelte` or `.astro` files is not scanned — keep the
+  animation in a sibling module, like `mountReveal` above, if you want it
+  checked.
+- Its React-specific rules — `orphan-tween`, `state-per-event` and
+  `shared-plugin-id` — apply only to React files. The rest apply to every file
+  it reads: cost, loops, scrub, listeners, unmanaged instances, plugin
+  registration, reduced motion and shipped dev tooling.

package/skill/reference/interaction.md

@@ -0,0 +1,183 @@
+# Interaction
+
+Pointer-driven motion. The engineering constraint is that these fire at 60–120Hz,
+so the wrong architecture costs a frame budget rather than a few milliseconds.
+
+Every interaction has three parts, and the third is the one people skip:
+
+```text
+input → response → recovery
+```
+
+The recovery is what makes it feel physical. A button that springs toward the
+cursor and snaps back on leave feels broken; the same button easing back over
+0.6s feels alive.
+
+## The rule: `quickTo`, not a tween per event
+
+```ts
+// Wrong — allocates a tween per pointer event, and they fight each other
+onMouseMove = (e) => gsap.to(el, { x: e.clientX, duration: 0.5 });
+
+// Right — one tween, retargeted
+const moveX = gsap.quickTo(el, "x", { duration: 0.5, ease: "power3" });
+const moveY = gsap.quickTo(el, "y", { duration: 0.5, ease: "power3" });
+onMouseMove = (e) => { moveX(e.clientX); moveY(e.clientY); };
+```
+
+Create the `quickTo` functions once, inside the `useGSAP` body. This is the
+single most important performance decision in pointer work.
+
+## Magnetic element
+
+The element leans toward the cursor while it is near, and returns when it
+leaves.
+
+```ts
+const xTo = gsap.quickTo(el, "x", { duration: 0.6, ease: "power3" });
+const yTo = gsap.quickTo(el, "y", { duration: 0.6, ease: "power3" });
+
+const onMove = (e: PointerEvent) => {
+  const r = el.getBoundingClientRect();
+  xTo((e.clientX - (r.left + r.width / 2)) * 0.35);
+  yTo((e.clientY - (r.top + r.height / 2)) * 0.35);
+};
+
+const onLeave = () => { xTo(0); yTo(0); };
+```
+
+- **Strength 0.2–0.4.** Above that the element outruns the cursor and feels
+  unmoored.
+- **Measure in the handler, not once.** Scroll and layout change the rect. If
+  that shows up as cost, cache it on enter and invalidate on scroll.
+- **The hit area should be larger than the element** — a padded wrapper listens,
+  the inner element moves. That is what makes the pull feel like a field rather
+  than a hover state.
+
+## Cursor follower
+
+```ts
+const xTo = gsap.quickTo(dot, "x", { duration: 0.35, ease: "power3" });
+const yTo = gsap.quickTo(dot, "y", { duration: 0.35, ease: "power3" });
+
+window.addEventListener("pointermove", (e) => { xTo(e.clientX); yTo(e.clientY); });
+```
+
+- Two layers at different durations (0.1 and 0.5) give the trailing-ring look
+  without a trail of elements.
+- `pointer-events: none` on the follower, always.
+- **Only on devices that have a cursor.** Gate on
+  `(hover: hover) and (pointer: fine)` — a follower on a touch device is dead
+  weight and sits in the corner.
+- Hiding the native cursor is a real accessibility cost. Do it only if the
+  replacement is at least as legible over every surface, and never over text
+  inputs.
+
+## Observer
+
+One unified handler for wheel, touch, and pointer — the right tool when you want
+a gesture rather than a scroll position.
+
+```ts
+import { Observer } from "gsap/Observer";
+gsap.registerPlugin(Observer);
+
+const obs = Observer.create({
+  target: window,
+  type: "wheel,touch,pointer",
+  onUp: () => next(),
+  onDown: () => prev(),
+  tolerance: 10,
+  preventDefault: true,
+});
+
+obs.kill();   // only needed outside a useGSAP body — see react-nextjs.md
+```
+
+This is how full-screen section-snapping and swipe carousels are built without
+ScrollTrigger. `preventDefault: true` takes over native scrolling — a large
+commitment, and it must not trap a keyboard or screen-reader user.
+
+## Draggable and Inertia
+
+```ts
+import { Draggable } from "gsap/Draggable";
+import { InertiaPlugin } from "gsap/InertiaPlugin";
+gsap.registerPlugin(Draggable, InertiaPlugin);
+
+Draggable.create(el, {
+  type: "x",
+  bounds: container,
+  inertia: true,
+  snap: { x: (v) => Math.round(v / 320) * 320 },
+  onDragEnd() { /* ... */ },
+});
+```
+
+`inertia: true` gives the flick-and-settle that makes a drag feel native.
+`Draggable.create` returns instances — `.kill()` them on unmount.
+
+Anything draggable needs a keyboard path to the same outcome. A carousel that
+only responds to drag is unusable without a pointer.
+
+## Hover with a timeline
+
+Build once, play and reverse. Better than creating tweens per event, and the
+return matches the arrival for free.
+
+```ts
+const hover = gsap.timeline({ paused: true })
+  .to(el, { scale: 1.04, duration: 0.3, ease: "power2.out" })
+  .to(label, { y: -2, duration: 0.3 }, "<");
+
+onEnter = () => hover.play();
+onLeave = () => hover.reverse();
+```
+
+In React, if the timeline is built inside `useGSAP` and only *played* from the
+handler, no `contextSafe` is needed — see [react-nextjs.md](react-nextjs.md).
+
+## `overwrite: "auto"`
+
+The classic bug: enter, leave, enter fast, and the element sits halfway.
+Whatever retriggers needs `overwrite: "auto"` so the conflicting tween is killed
+rather than blended.
+
+## Spotlight
+
+A pointer-tracked gradient. Drive CSS variables rather than re-rendering:
+
+```ts
+const setX = gsap.quickSetter(card, "--spot-x", "px");
+const setY = gsap.quickSetter(card, "--spot-y", "px");
+```
+
+```css
+background: radial-gradient(
+  240px at var(--spot-x) var(--spot-y),
+  var(--glow), transparent 70%
+);
+```
+
+Cheap, and the styling stays in CSS where it can follow the theme.
+
+## Accessibility
+
+- **Everything reachable by pointer must be reachable by keyboard.** Hover state
+  and focus state should be the same visual.
+- Never destroy the focus ring with a transform that moves the element out from
+  under it.
+- Gate hover effects on `(hover: hover)`. On touch, `:hover` sticks after a tap.
+- Under `prefers-reduced-motion: reduce`, keep the state change and drop the
+  travel — see [accessibility.md](accessibility.md).
+
+## Failures
+
+| Symptom | Cause |
+|---|---|
+| Janky on move | a tween per event, or React state in the handler |
+| Element sticks halfway | missing `overwrite: "auto"` |
+| Magnetic pull feels wrong | strength too high, or rect measured once |
+| Follower stuck in a corner | mounted on a touch device |
+| Hover sticks after tap | no `(hover: hover)` gate |
+| Effects survive navigation | `Observer`/`Draggable` not killed, listeners not removed |

package/skill/reference/motion-design.md

@@ -0,0 +1,144 @@
+# Motion design
+
+The craft half. Read this when an animation compiles, runs, and still feels
+wrong — the fix is almost always here rather than in the API.
+
+## What motion is for
+
+Every animation earns its place by answering one of five questions. If it
+answers none, delete it.
+
+| It says | Example |
+|---|---|
+| **Hierarchy** — what matters | the heading arrives before the byline |
+| **Causality** — this caused that | the panel grows out of the button that opened it |
+| **Continuity** — it is the same thing | the thumbnail becomes the hero image |
+| **State** — something changed | the row settles into place after saving |
+| **Personality** — who this brand is | the mark writes itself rather than fading in |
+
+"It looked empty" is not one of them.
+
+## Duration
+
+Numbers people actually perceive, not a scale copied from a blog post.
+
+| Range | Reads as | Use for |
+|---|---|---|
+| 80–150ms | instant | hover, focus, toggle, press |
+| 200–300ms | responsive | dropdowns, tooltips, small reveals |
+| 350–500ms | deliberate | modals, panels, section reveals |
+| 600–900ms | considered | hero entrances, page transitions |
+| 1s+ | a performance | intros, loaders, scroll-scrubbed sequences |
+
+Two rules bend all of these. **Distance buys time**: something crossing the
+viewport may take three times as long as the same element moving 20px. And
+**exits are faster than entrances** — usually 60–70% — because the visitor has
+already decided and is waiting.
+
+## Easing
+
+The single biggest lever on how motion feels, and the one most often left at the
+default.
+
+| Ease | Feel | Use |
+|---|---|---|
+| `power2.out` | quick start, soft landing | the default for entrances |
+| `power3.out` / `power4.out` | sharper, more expensive-feeling | premium, cinematic |
+| `power2.in` | gathers then leaves | exits |
+| `power2.inOut` | symmetric | moves between two resting states |
+| `none` | mechanical, constant | **anything looping**, scrub, marquee |
+| `back.out(1.4)` | overshoot | playful — never on more than one thing at a time |
+| `elastic.out(1, 0.4)` | wobble | rarely; reads as a toy |
+| `sine.inOut` | gentle breath | ambient loops, pulses |
+| `expo.out` | dramatic arrival | one hero moment, not a list |
+
+Two failures worth naming. **An ease other than `none` on a repeating tween**
+puts a visible stutter at the seam — the loop decelerates into its own restart.
+And **`inOut` on an entrance** makes it feel like it is being pushed rather than
+arriving; entrances want `out`.
+
+A house ease beats a stock one. `CustomEase` is free:
+
+```ts
+CustomEase.create("brand", "M0,0 C0.16,1 0.3,1 1,1");
+```
+
+## Rhythm
+
+Stagger is where amateur motion shows. The wrong value makes a list look either
+simultaneous or like a queue.
+
+- **0.03–0.06s** — a wave. Reads as one gesture across many items.
+- **0.08–0.12s** — countable. The eye tracks each item. Best for 3–6 items.
+- **0.15s+** — a sequence of separate events. Only for a handful.
+
+For more than about eight items, stagger a *total* rather than a per-item gap,
+so twelve cards do not take four seconds:
+
+```ts
+stagger: { amount: 0.6, from: "start" }   // 0.6s total, however many items
+stagger: { each: 0.08 }                   // 0.08s apart, grows without limit
+```
+
+`from: "center"` and `from: "edges"` change the story: centre-out reads as
+radiating, start-to-end reads as reading order. In RTL, "reading order" is
+`from: "end"` — see [project-rules.md](project-rules.md).
+
+## Overlap
+
+Sequential beats look like a slideshow. Real choreography overlaps, and the
+overlap is where an animation stops feeling like a list of steps.
+
+```ts
+tl.to(a, { ... })
+  .to(b, { ... }, "-=0.3")   // b starts before a finishes
+  .to(c, { ... }, "<")       // c starts with b
+  .to(d, { ... }, "<0.15");  // d starts 0.15s after b started
+```
+
+A useful default: the next beat starts at **60–75%** of the previous one. Full
+sequence only when the second thing is genuinely *caused* by the first
+finishing.
+
+## The principles that matter here
+
+- **Weight** — a large or heavy-looking element should move slower and ease
+  harder than a small one. Same duration on a hero image and a caption reads as
+  a bug.
+- **Anticipation** — a small counter-move before the main one. Costs 80–120ms
+  and makes a gesture feel intentional. Use on one element, not a group.
+- **Follow-through** — elements should not all stop at once. A 0.05s offset on
+  the last beat is usually the difference between mechanical and alive.
+- **Contrast** — fast against slow is what creates emphasis. If everything moves
+  at 400ms, nothing is emphasised.
+- **Restraint** — the most premium-feeling motion is usually one or two things
+  moving well, not six things moving at all.
+
+## Reading a request
+
+| They say | They usually mean |
+|---|---|
+| "smoother" | longer duration, softer ease — or a cost problem; check which |
+| "snappier" | shorter duration, `power3.out`, less stagger |
+| "more premium" | fewer elements moving, longer eases, no overshoot |
+| "more playful" | overshoot on one element, tighter stagger |
+| "cinematic" | slower, sequential, one thing at a time, generous holds |
+| "subtle" | reduce distance before reducing duration |
+| "it feels cheap" | usually linear easing or uniform duration |
+| "it feels slow" | usually too sequential, not too long — try overlap first |
+
+## Validation
+
+Before calling an animation done:
+
+- Does it say one of the five things at the top of this file?
+- Is the rhythm intentional, or are the delays arbitrary?
+- Does anything looping use `ease: "none"`?
+- Is the seam of the loop invisible?
+- Do entrances use `out` easing and exits `in`?
+- Does one element carry the emphasis, rather than all of them?
+- Does it still read at 400px wide, and on a touch device with no hover?
+- Does the reduced-motion branch still communicate the same thing?
+- Is everything reverted on unmount?
+- Is every plugin justified, and would a transform have done it?
+- Watch it five times. Does anything start to irritate?