@tamsensedev/runner 0.13.0 → 0.18.0

package/library/skills/motion-design/references/recipes.md

@@ -1,243 +1,243 @@
-# Motion recipes
-
-Read this when implementing a specific transition. Use the project's existing motion tokens and library if it has them; these recipes are CSS first, then examples in common libraries. Do not add a library to use a recipe.
-
-## Tokens
-
-```css
-:root {
-  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
-  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
-  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
-  --duration-press: 150ms;
-  --duration-popover: 180ms;
-  --duration-dialog: 240ms;
-}
-```
-
-## Reduced motion pattern
-
-Define movement only for people who have not asked to reduce it; keep the opacity change for everyone.
-
-```css
-.toast { transition: opacity 200ms ease; }
-
-@media (prefers-reduced-motion: no-preference) {
-  .toast {
-    transition:
-      opacity 200ms var(--ease-out),
-      transform 200ms var(--ease-out);
-  }
-}
-```
-
-## Press feedback
-
-```css
-.button {
-  transition: transform var(--duration-press) var(--ease-out);
-}
-.button:active:not(:disabled) { transform: scale(0.97); }
-```
-
-## Popover or menu (native popover, no JavaScript)
-
-```css
-.menu[popover] {
-  transform-origin: top left;
-  opacity: 0;
-  transform: scale(0.97);
-  transition:
-    opacity var(--duration-popover) var(--ease-out),
-    transform var(--duration-popover) var(--ease-out),
-    overlay var(--duration-popover) allow-discrete,
-    display var(--duration-popover) allow-discrete;
-}
-.menu[popover]:popover-open { opacity: 1; transform: scale(1); }
-
-@starting-style {
-  .menu[popover]:popover-open { opacity: 0; transform: scale(0.97); }
-}
-```
-
-Browsers without `@starting-style` simply show the menu without animation. Set `transform-origin` to the side of the trigger. With a headless library, use the origin variable it exposes (for example `var(--radix-popover-content-transform-origin)` or `var(--transform-origin)`).
-
-## Dialog
-
-Same pattern on `dialog[open]`, centred origin, `--duration-dialog`, plus a backdrop fade:
-
-```css
-dialog::backdrop { background: rgb(0 0 0 / 0.4); transition: opacity var(--duration-dialog) ease; }
-```
-
-Exit about 75% of the enter duration.
-
-## Drawer or bottom sheet
-
-```css
-.sheet {
-  transform: translateY(100%);
-  transition: transform 300ms var(--ease-drawer);
-}
-.sheet[data-open="true"] { transform: translateY(0); }
-```
-
-Percent translations move by the element's own size, so they work at any height. Add `overscroll-behavior: contain` on the sheet's scroll area.
-
-## Expand and collapse without animating height
-
-```css
-.collapsible {
-  display: grid;
-  grid-template-rows: 0fr;
-  transition: grid-template-rows 250ms var(--ease-out);
-}
-.collapsible[data-open="true"] { grid-template-rows: 1fr; }
-.collapsible > .inner { overflow: hidden; }
-```
-
-## Toast
-
-Enter from the edge it lives on, leave the same way, a little faster:
-
-```css
-.toast { transform: translateY(0); opacity: 1; }
-.toast[data-state="entering"], .toast[data-state="leaving"] { transform: translateY(100%); opacity: 0; }
-.toast[data-state="leaving"] { transition-duration: 150ms; }
-```
-
-Pause auto-dismiss timers while the toast is hovered or the tab is hidden.
-
-## Icon swap (copy to copied, play to pause)
-
-Keep both icons in the DOM, one positioned over the other, and cross-fade:
-
-```css
-.icon-swap { position: relative; display: inline-grid; }
-.icon-swap > * {
-  grid-area: 1 / 1;
-  transition:
-    opacity 250ms cubic-bezier(0.2, 0, 0, 1),
-    transform 250ms cubic-bezier(0.2, 0, 0, 1),
-    filter 250ms cubic-bezier(0.2, 0, 0, 1);
-}
-.icon-swap > [data-hidden="true"] { opacity: 0; transform: scale(0.25); filter: blur(4px); }
-```
-
-## Skeleton
-
-A flat muted block at the final size. If the project pulses skeletons, use a slow opacity pulse (1.5 to 2s) and stop it under reduced motion. No shimmer gradient sweeping across the screen.
-
-## Web Animations API
-
-```js
-const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches
-element.animate(
-  reduce
-    ? [{ opacity: 0 }, { opacity: 1 }]
-    : [{ opacity: 0, transform: 'translateY(8px)' }, { opacity: 1, transform: 'none' }],
-  { duration: 200, easing: 'cubic-bezier(0.23, 1, 0.32, 1)', fill: 'backwards' },
-)
-```
-
-## View Transitions
-
-```js
-function update(change) {
-  if (!document.startViewTransition) return change()
-  document.startViewTransition(change)
-}
-```
-
-```css
-::view-transition-old(root),
-::view-transition-new(root) { animation-duration: 200ms; }
-
-@media (prefers-reduced-motion: reduce) {
-  ::view-transition-group(*),
-  ::view-transition-old(*),
-  ::view-transition-new(*) { animation: none; }
-}
-```
-
-Use them when continuity between two states is the point (a card expanding into its detail), not on every route change. Many routers (Astro, Nuxt, SvelteKit, Next.js) have their own switch for this; use it.
-
-## Vue
-
-```vue
-<template>
-  <Transition name="pop">
-    <div v-if="open" class="menu">...</div>
-  </Transition>
-</template>
-
-<style>
-.pop-enter-active { transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out); }
-.pop-leave-active { transition: opacity 120ms var(--ease-out), transform 120ms var(--ease-out); }
-.pop-enter-from,
-.pop-leave-to { opacity: 0; transform: scale(0.97); }
-</style>
-```
-
-For lists, `<TransitionGroup>` with a `.list-move { transition: transform 200ms var(--ease-out); }` class animates reordering.
-
-## Svelte
-
-```svelte
-<script>
-  import { fly } from 'svelte/transition'
-  import { cubicOut } from 'svelte/easing'
-</script>
-
-{#if open}
-  <div class="menu" transition:fly={{ y: -4, duration: 180, easing: cubicOut }}>...</div>
-{/if}
-```
-
-## Motion for React
-
-Only if `motion` or `framer-motion` is already installed; import from whichever the project uses.
-
-```jsx
-import { AnimatePresence, motion } from 'motion/react'
-
-<AnimatePresence initial={false}>
-  {open && (
-    <motion.div
-      key="panel"
-      initial={{ opacity: 0, transform: 'scale(0.97)' }}
-      animate={{ opacity: 1, transform: 'scale(1)' }}
-      exit={{ opacity: 0, transform: 'scale(0.97)', transition: { duration: 0.12 } }}
-      transition={{ duration: 0.18, ease: [0.23, 1, 0.32, 1] }}
-    />
-  )}
-</AnimatePresence>
-```
-
-`initial={false}` stops elements already present on first render from animating in. Full `transform` strings stay on the compositor when the main thread is busy; the `x` and `y` shorthands do not. For gestures and drags, springs (`{ type: 'spring', duration: 0.3, bounce: 0 }`) keep their velocity when interrupted; keep bounce at 0 in product UI. `useReducedMotion()` returns the user's preference.
-
-## GSAP
-
-Only if GSAP is already installed.
-
-```js
-import { gsap } from 'gsap'
-
-const mm = gsap.matchMedia()
-mm.add('(prefers-reduced-motion: no-preference)', () => {
-  gsap.from('.step', { opacity: 0, y: 12, duration: 0.4, ease: 'power3.out', stagger: 0.06 })
-})
-```
-
-`gsap.matchMedia()` reverts the animation when the media query stops matching. Keep scroll-triggered work for marketing pages, and give it a version that leaves content visible.
-
-## Drag and gestures
-
-- Capture the pointer once dragging starts (`setPointerCapture`) so the drag continues outside the element.
-- Ignore extra touch points after the drag begins.
-- Dismiss on velocity as well as distance (a quick flick is enough).
-- Past a boundary, apply friction instead of a hard stop.
-- On `pointercancel`, `lostpointercapture` and window `blur`, clear the dragging state so the next drag works.
-- Offer a click or keyboard alternative for every gesture.
-
-Sources: adapted from emilkowalski/skills emil-design-eng (MIT, changed: examples made framework-neutral, Vue, Svelte and GSAP examples added), jakubkrehel/make-interfaces-feel-better animations reference (MIT, changed: icon swap duration aligned to 250ms, CSS grid variant) and pbakaus/impeccable animate and harden references (Apache-2.0, changed: rewritten).
+# Motion recipes
+
+Read this when implementing a specific transition. Use the project's existing motion tokens and library if it has them; these recipes are CSS first, then examples in common libraries. Do not add a library to use a recipe.
+
+## Tokens
+
+```css
+:root {
+  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
+  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
+  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
+  --duration-press: 150ms;
+  --duration-popover: 180ms;
+  --duration-dialog: 240ms;
+}
+```
+
+## Reduced motion pattern
+
+Define movement only for people who have not asked to reduce it; keep the opacity change for everyone.
+
+```css
+.toast { transition: opacity 200ms ease; }
+
+@media (prefers-reduced-motion: no-preference) {
+  .toast {
+    transition:
+      opacity 200ms var(--ease-out),
+      transform 200ms var(--ease-out);
+  }
+}
+```
+
+## Press feedback
+
+```css
+.button {
+  transition: transform var(--duration-press) var(--ease-out);
+}
+.button:active:not(:disabled) { transform: scale(0.97); }
+```
+
+## Popover or menu (native popover, no JavaScript)
+
+```css
+.menu[popover] {
+  transform-origin: top left;
+  opacity: 0;
+  transform: scale(0.97);
+  transition:
+    opacity var(--duration-popover) var(--ease-out),
+    transform var(--duration-popover) var(--ease-out),
+    overlay var(--duration-popover) allow-discrete,
+    display var(--duration-popover) allow-discrete;
+}
+.menu[popover]:popover-open { opacity: 1; transform: scale(1); }
+
+@starting-style {
+  .menu[popover]:popover-open { opacity: 0; transform: scale(0.97); }
+}
+```
+
+Browsers without `@starting-style` simply show the menu without animation. Set `transform-origin` to the side of the trigger. With a headless library, use the origin variable it exposes (for example `var(--radix-popover-content-transform-origin)` or `var(--transform-origin)`).
+
+## Dialog
+
+Same pattern on `dialog[open]`, centred origin, `--duration-dialog`, plus a backdrop fade:
+
+```css
+dialog::backdrop { background: rgb(0 0 0 / 0.4); transition: opacity var(--duration-dialog) ease; }
+```
+
+Exit about 75% of the enter duration.
+
+## Drawer or bottom sheet
+
+```css
+.sheet {
+  transform: translateY(100%);
+  transition: transform 300ms var(--ease-drawer);
+}
+.sheet[data-open="true"] { transform: translateY(0); }
+```
+
+Percent translations move by the element's own size, so they work at any height. Add `overscroll-behavior: contain` on the sheet's scroll area.
+
+## Expand and collapse without animating height
+
+```css
+.collapsible {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 250ms var(--ease-out);
+}
+.collapsible[data-open="true"] { grid-template-rows: 1fr; }
+.collapsible > .inner { overflow: hidden; }
+```
+
+## Toast
+
+Enter from the edge it lives on, leave the same way, a little faster:
+
+```css
+.toast { transform: translateY(0); opacity: 1; }
+.toast[data-state="entering"], .toast[data-state="leaving"] { transform: translateY(100%); opacity: 0; }
+.toast[data-state="leaving"] { transition-duration: 150ms; }
+```
+
+Pause auto-dismiss timers while the toast is hovered or the tab is hidden.
+
+## Icon swap (copy to copied, play to pause)
+
+Keep both icons in the DOM, one positioned over the other, and cross-fade:
+
+```css
+.icon-swap { position: relative; display: inline-grid; }
+.icon-swap > * {
+  grid-area: 1 / 1;
+  transition:
+    opacity 250ms cubic-bezier(0.2, 0, 0, 1),
+    transform 250ms cubic-bezier(0.2, 0, 0, 1),
+    filter 250ms cubic-bezier(0.2, 0, 0, 1);
+}
+.icon-swap > [data-hidden="true"] { opacity: 0; transform: scale(0.25); filter: blur(4px); }
+```
+
+## Skeleton
+
+A flat muted block at the final size. If the project pulses skeletons, use a slow opacity pulse (1.5 to 2s) and stop it under reduced motion. No shimmer gradient sweeping across the screen.
+
+## Web Animations API
+
+```js
+const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches
+element.animate(
+  reduce
+    ? [{ opacity: 0 }, { opacity: 1 }]
+    : [{ opacity: 0, transform: 'translateY(8px)' }, { opacity: 1, transform: 'none' }],
+  { duration: 200, easing: 'cubic-bezier(0.23, 1, 0.32, 1)', fill: 'backwards' },
+)
+```
+
+## View Transitions
+
+```js
+function update(change) {
+  if (!document.startViewTransition) return change()
+  document.startViewTransition(change)
+}
+```
+
+```css
+::view-transition-old(root),
+::view-transition-new(root) { animation-duration: 200ms; }
+
+@media (prefers-reduced-motion: reduce) {
+  ::view-transition-group(*),
+  ::view-transition-old(*),
+  ::view-transition-new(*) { animation: none; }
+}
+```
+
+Use them when continuity between two states is the point (a card expanding into its detail), not on every route change. Many routers (Astro, Nuxt, SvelteKit, Next.js) have their own switch for this; use it.
+
+## Vue
+
+```vue
+<template>
+  <Transition name="pop">
+    <div v-if="open" class="menu">...</div>
+  </Transition>
+</template>
+
+<style>
+.pop-enter-active { transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out); }
+.pop-leave-active { transition: opacity 120ms var(--ease-out), transform 120ms var(--ease-out); }
+.pop-enter-from,
+.pop-leave-to { opacity: 0; transform: scale(0.97); }
+</style>
+```
+
+For lists, `<TransitionGroup>` with a `.list-move { transition: transform 200ms var(--ease-out); }` class animates reordering.
+
+## Svelte
+
+```svelte
+<script>
+  import { fly } from 'svelte/transition'
+  import { cubicOut } from 'svelte/easing'
+</script>
+
+{#if open}
+  <div class="menu" transition:fly={{ y: -4, duration: 180, easing: cubicOut }}>...</div>
+{/if}
+```
+
+## Motion for React
+
+Only if `motion` or `framer-motion` is already installed; import from whichever the project uses.
+
+```jsx
+import { AnimatePresence, motion } from 'motion/react'
+
+<AnimatePresence initial={false}>
+  {open && (
+    <motion.div
+      key="panel"
+      initial={{ opacity: 0, transform: 'scale(0.97)' }}
+      animate={{ opacity: 1, transform: 'scale(1)' }}
+      exit={{ opacity: 0, transform: 'scale(0.97)', transition: { duration: 0.12 } }}
+      transition={{ duration: 0.18, ease: [0.23, 1, 0.32, 1] }}
+    />
+  )}
+</AnimatePresence>
+```
+
+`initial={false}` stops elements already present on first render from animating in. Full `transform` strings stay on the compositor when the main thread is busy; the `x` and `y` shorthands do not. For gestures and drags, springs (`{ type: 'spring', duration: 0.3, bounce: 0 }`) keep their velocity when interrupted; keep bounce at 0 in product UI. `useReducedMotion()` returns the user's preference.
+
+## GSAP
+
+Only if GSAP is already installed.
+
+```js
+import { gsap } from 'gsap'
+
+const mm = gsap.matchMedia()
+mm.add('(prefers-reduced-motion: no-preference)', () => {
+  gsap.from('.step', { opacity: 0, y: 12, duration: 0.4, ease: 'power3.out', stagger: 0.06 })
+})
+```
+
+`gsap.matchMedia()` reverts the animation when the media query stops matching. Keep scroll-triggered work for marketing pages, and give it a version that leaves content visible.
+
+## Drag and gestures
+
+- Capture the pointer once dragging starts (`setPointerCapture`) so the drag continues outside the element.
+- Ignore extra touch points after the drag begins.
+- Dismiss on velocity as well as distance (a quick flick is enough).
+- Past a boundary, apply friction instead of a hard stop.
+- On `pointercancel`, `lostpointercapture` and window `blur`, clear the dragging state so the next drag works.
+- Offer a click or keyboard alternative for every gesture.
+
+Sources: adapted from emilkowalski/skills emil-design-eng (MIT, changed: examples made framework-neutral, Vue, Svelte and GSAP examples added), jakubkrehel/make-interfaces-feel-better animations reference (MIT, changed: icon swap duration aligned to 250ms, CSS grid variant) and pbakaus/impeccable animate and harden references (Apache-2.0, changed: rewritten).