@yewdiel21/motion-kit 0.0.0-stage → 0.9.0

package/registry.json

@@ -0,0 +1,469 @@
+{
+  "version": 2,
+  "css": ["css/tokens.css", "css/default-theme.css", "css/base.css", "css/states.css"],
+  "entries": {
+    "spring-cards": {
+      "kind": "recipe",
+      "description": "Cards fanned out that spring into place and get pushed by the pointer (spencergabor.com hero).",
+      "files": ["recipes/spring-cards/create-spring-cards.ts", "recipes/spring-cards/spring-cards.css", "recipes/spring-cards/README.md"],
+      "react": "react/use-spring-cards.ts",
+      "since": "0.1.0"
+    },
+    "curved-carousel": {
+      "kind": "recipe",
+      "description": "Draggable carousel on an arc with inertia, snap, loop, wheel and keyboard (spencergabor.com).",
+      "files": [
+        "recipes/curved-carousel/create-curved-carousel.ts",
+        "recipes/curved-carousel/curved-carousel.css",
+        "recipes/curved-carousel/README.md"
+      ],
+      "react": "react/use-curved-carousel.ts",
+      "since": "0.1.0"
+    },
+    "pile": {
+      "kind": "recipe",
+      "description": "Project shown as a pile of rotated layers that scales in when visible (spencergabor.com grid).",
+      "files": ["recipes/pile/create-pile.ts", "recipes/pile/pile.css", "recipes/pile/README.md"],
+      "react": "react/use-pile.ts",
+      "since": "0.1.0"
+    },
+    "words": {
+      "kind": "recipe",
+      "description": "Words or letters grow from the baseline with an elastic stagger (spencergabor.com headlines).",
+      "files": ["recipes/words/create-words.ts", "recipes/words/README.md"],
+      "react": "react/use-words.ts",
+      "since": "0.1.0"
+    },
+    "flow": {
+      "kind": "recipe",
+      "description": "Children drop in from above, blurred, staggered (Stepbro flowIn).",
+      "files": ["recipes/flow/create-flow.ts", "recipes/flow/README.md"],
+      "react": "react/use-flow.ts",
+      "since": "0.1.0"
+    },
+    "pop": {
+      "kind": "recipe",
+      "description": "Single element pops in with an elastic scale.",
+      "files": ["recipes/pop/create-pop.ts", "recipes/pop/README.md"],
+      "react": "react/use-pop.ts",
+      "since": "0.1.0"
+    },
+    "fit-text": {
+      "kind": "recipe",
+      "description": "One-line text sized to fill its parent's width.",
+      "files": ["recipes/fit-text/create-fit-text.ts", "recipes/fit-text/fit-text.css", "recipes/fit-text/README.md"],
+      "react": "react/use-fit-text.ts",
+      "since": "0.1.0"
+    },
+    "stretch-footer": {
+      "kind": "recipe",
+      "description": "Fixed footer revealed behind the page whose giant title stretches with the scroll (spencergabor.com).",
+      "files": [
+        "recipes/stretch-footer/create-stretch-footer.ts",
+        "recipes/stretch-footer/stretch-footer.css",
+        "recipes/stretch-footer/README.md"
+      ],
+      "react": "react/use-stretch-footer.ts",
+      "since": "0.1.0"
+    },
+    "radial-menu": {
+      "kind": "recipe",
+      "description": "Round toggle whose options fan out in an arc (spencergabor.com colour picker).",
+      "files": ["recipes/radial-menu/create-radial-menu.ts", "recipes/radial-menu/radial-menu.css", "recipes/radial-menu/README.md"],
+      "react": "react/use-radial-menu.ts",
+      "since": "0.1.0"
+    },
+    "pill": {
+      "kind": "recipe",
+      "description": "Pill button and hover stretch with elastic CSS transitions.",
+      "files": ["recipes/pill/pill.css", "recipes/pill/README.md"],
+      "since": "0.1.0"
+    },
+    "tabs": {
+      "kind": "recipe",
+      "description": "Tabs whose indicator slides onto the selected tab on the signature curve (Stepbro PrettyTabs).",
+      "files": ["recipes/tabs/create-tabs.ts", "recipes/tabs/tabs.css", "recipes/tabs/README.md"],
+      "react": "react/use-tabs.ts",
+      "since": "0.2.0"
+    },
+    "counter": {
+      "kind": "recipe",
+      "description": "Number that counts to its value from the one shown (Stepbro animated number).",
+      "files": ["recipes/counter/create-counter.ts", "recipes/counter/README.md"],
+      "react": "react/use-counter.ts",
+      "since": "0.2.0"
+    },
+    "details": {
+      "kind": "recipe",
+      "description": "Disclosures that grow to their content and fade it in (Stepbro PrettyDetails).",
+      "files": ["recipes/details/create-details.ts", "recipes/details/README.md"],
+      "react": "react/use-details.ts",
+      "since": "0.2.0"
+    },
+    "reveal": {
+      "kind": "recipe",
+      "description": "A veil in the surface colour opens like a wave from a point (Stepbro reveal).",
+      "files": ["recipes/reveal/create-reveal.ts", "recipes/reveal/README.md"],
+      "react": "react/use-reveal.ts",
+      "since": "0.2.0"
+    },
+    "reflow": {
+      "kind": "recipe",
+      "description": "List items travel to their new place on a spring; new ones grow in (Stepbro layout reflow).",
+      "files": ["recipes/reflow/create-reflow.ts", "recipes/reflow/README.md"],
+      "react": "react/use-reflow.ts",
+      "since": "0.2.0"
+    },
+    "slot-text": {
+      "kind": "recipe",
+      "description": "Letters roll out and in when the text changes, with a slight tilt (Stepbro SlotText).",
+      "files": ["recipes/slot-text/create-slot-text.ts", "recipes/slot-text/slot-text.css", "recipes/slot-text/README.md"],
+      "react": "react/use-slot-text.ts",
+      "since": "0.2.0"
+    },
+    "sortable": {
+      "kind": "recipe",
+      "description": "Drag to reorder (lists and kanban) with a tilting floating copy, neighbours that make room, auto-scroll and keyboard (Stepbro Tasks useDragReorder).",
+      "files": ["recipes/sortable/create-sortable.ts", "recipes/sortable/sortable.css", "recipes/sortable/README.md"],
+      "react": "react/use-sortable.ts",
+      "since": "0.4.0"
+    },
+    "mask-text": {
+      "kind": "recipe",
+      "description": "Text rising out of its mask by lines, words or letters when it scrolls into view, hiding again when it leaves (OFFFICE masked type).",
+      "files": ["recipes/mask-text/create-mask-text.ts", "recipes/mask-text/README.md"],
+      "react": "react/use-mask-text.ts",
+      "since": "0.6.0"
+    },
+    "cascade": {
+      "kind": "recipe",
+      "description": "Rules, fades and rises entering one after another, 30 ms apart (Siena reveal group).",
+      "files": ["recipes/cascade/create-cascade.ts", "recipes/cascade/README.md"],
+      "react": "react/use-cascade.ts",
+      "since": "0.6.0"
+    },
+    "text-roll": {
+      "kind": "recipe",
+      "description": "A title whose letters spin like a slot machine and settle on themselves (Siena slot title).",
+      "files": ["recipes/text-roll/create-text-roll.ts", "recipes/text-roll/text-roll.css", "recipes/text-roll/README.md"],
+      "react": "react/use-text-roll.ts",
+      "since": "0.6.0"
+    },
+    "letters": {
+      "kind": "recipe",
+      "description": "Playful letters: springing up on hover or blinking in pastels (Dousan Miao hero).",
+      "files": ["recipes/letters/create-letters.ts", "recipes/letters/README.md"],
+      "react": "react/use-letters.ts",
+      "since": "0.6.0"
+    },
+    "parallax": {
+      "kind": "recipe",
+      "description": "A picture travelling and scaled inside its clipped frame as it crosses the screen (Siena).",
+      "files": ["recipes/parallax/create-parallax.ts", "recipes/parallax/README.md"],
+      "react": "react/use-parallax.ts",
+      "since": "0.6.0"
+    },
+    "depth-grid": {
+      "kind": "recipe",
+      "description": "Grid pictures arriving from far out and deep into the screen, assembled by the scroll (Siena About).",
+      "files": ["recipes/depth-grid/create-depth-grid.ts", "recipes/depth-grid/README.md"],
+      "react": "react/use-depth-grid.ts",
+      "since": "0.6.0"
+    },
+    "frame-zoom": {
+      "kind": "recipe",
+      "description": "A frame closing like a window as it leaves while the picture inside grows; open() fills it (Siena video mask).",
+      "files": ["recipes/frame-zoom/create-frame-zoom.ts", "recipes/frame-zoom/README.md"],
+      "react": "react/use-frame-zoom.ts",
+      "since": "0.6.0"
+    },
+    "contrast": {
+      "kind": "recipe",
+      "description": "Header tone from the section under the top 10 % of the screen (Siena).",
+      "files": ["recipes/contrast/create-contrast.ts", "recipes/contrast/README.md"],
+      "react": "react/use-contrast.ts",
+      "since": "0.6.0"
+    },
+    "marquee": {
+      "kind": "recipe",
+      "description": "Seamless infinite strip, horizontal or vertical, 2 s per item (Siena).",
+      "files": ["recipes/marquee/create-marquee.ts", "recipes/marquee/marquee.css", "recipes/marquee/README.md"],
+      "react": "react/use-marquee.ts",
+      "since": "0.6.0"
+    },
+    "card-dock": {
+      "kind": "recipe",
+      "description": "iyo.ai's product dock: glass cards stacked behind the front one that spread out on hover, focus or a first tap, names sliding out.",
+      "files": ["recipes/card-dock/create-card-dock.ts", "recipes/card-dock/card-dock.css", "recipes/card-dock/README.md"],
+      "react": "react/use-card-dock.ts",
+      "since": "0.7.0"
+    },
+    "snap-strip": {
+      "kind": "recipe",
+      "description": "iyo.ai's phone cards: a native scroll-snap strip that moves on every 5 s while on screen and waits after a touch.",
+      "files": ["recipes/snap-strip/create-snap-strip.ts", "recipes/snap-strip/snap-strip.css", "recipes/snap-strip/README.md"],
+      "react": "react/use-snap-strip.ts",
+      "since": "0.7.0"
+    },
+    "fill-text": {
+      "kind": "recipe",
+      "description": "iyo.ai's fill-text: letters go from 20 % to full one after another as the text scrolls up.",
+      "files": ["recipes/fill-text/create-fill-text.ts", "recipes/fill-text/README.md"],
+      "react": "react/use-fill-text.ts",
+      "since": "0.7.0"
+    },
+    "particle-hero": {
+      "kind": "recipe",
+      "description": "iyo.ai's particle hero (motion-kit/gl): GPU points settling on shifting Chladni patterns and drawing words, pushed by the pointer; Canvas2D fallback.",
+      "files": [
+        "gl/particle-hero/create-particle-hero.ts",
+        "gl/particle-hero/shaders.ts",
+        "gl/particle-hero/particle-hero.css",
+        "gl/particle-hero/README.md"
+      ],
+      "react": "react/use-particle-hero.ts",
+      "since": "0.7.0"
+    },
+    "ticket-menu": {
+      "kind": "recipe",
+      "description": "Menú boleto de Siena sobre menu: recorte, filas escalonadas, teclado y foco.",
+      "files": [
+        "recipes/ticket-menu/create-ticket-menu.ts",
+        "recipes/ticket-menu/README.md"
+      ],
+      "react": "react/use-ticket-menu.ts",
+      "requires": [
+        "menu"
+      ],
+      "since": "0.8.0"
+    },
+    "infinite-reel": {
+      "kind": "recipe",
+      "description": "Reel infinito horizontal o vertical con rueda, arrastre e inercia (Siena).",
+      "files": [
+        "recipes/infinite-reel/create-infinite-reel.ts",
+        "recipes/infinite-reel/infinite-reel.css",
+        "recipes/infinite-reel/README.md"
+      ],
+      "react": "react/use-infinite-reel.ts",
+      "since": "0.8.0"
+    },
+    "repel-bento": {
+      "kind": "recipe",
+      "description": "Bento con entrada spring y repulsión de tarjetas vecinas (Dousan).",
+      "files": [
+        "recipes/repel-bento/create-repel-bento.ts",
+        "recipes/repel-bento/repel-bento.css",
+        "recipes/repel-bento/README.md"
+      ],
+      "react": "react/use-repel-bento.ts",
+      "since": "0.8.0"
+    },
+    "rotator": {
+      "kind": "recipe",
+      "description": "Rotador de testimonios con autoplay, pausa al enfocar y controles manuales (Dousan).",
+      "files": [
+        "recipes/rotator/create-rotator.ts",
+        "recipes/rotator/rotator.css",
+        "recipes/rotator/README.md"
+      ],
+      "react": "react/use-rotator.ts",
+      "since": "0.8.0"
+    },
+    "drag-ruler": {
+      "kind": "recipe",
+      "description": "Regla numérica arrastrable de 60 px por unidad, paso y teclado (Dousan).",
+      "files": [
+        "recipes/drag-ruler/create-drag-ruler.ts",
+        "recipes/drag-ruler/drag-ruler.css",
+        "recipes/drag-ruler/README.md"
+      ],
+      "react": "react/use-drag-ruler.ts",
+      "since": "0.8.0"
+    },
+    "dock-pill": {
+      "kind": "recipe",
+      "description": "Indicador spring que sigue la opción activa de un dock (Dousan).",
+      "files": [
+        "recipes/dock-pill/create-dock-pill.ts",
+        "recipes/dock-pill/dock-pill.css",
+        "recipes/dock-pill/README.md"
+      ],
+      "react": "react/use-dock-pill.ts",
+      "since": "0.8.0"
+    },
+    "liquid-blend": {
+      "kind": "recipe",
+      "description": "Mezcla de dos texturas con deformación UV (OFFFICE, adaptación).",
+      "files": [
+        "gl/liquid-blend/create-liquid-blend.ts",
+        "gl/liquid-blend/shader.ts",
+        "gl/shared/shader.css",
+        "gl/liquid-blend/README.md"
+      ],
+      "react": "react/use-liquid-blend.ts",
+      "since": "0.9.0"
+    },
+    "matcap": {
+      "kind": "recipe",
+      "description": "Superficie esférica iluminada con matcap y hemisferio (OFFFICE, adaptación).",
+      "files": [
+        "gl/matcap/create-matcap.ts",
+        "gl/matcap/shader.ts",
+        "gl/shared/shader.css",
+        "gl/matcap/README.md"
+      ],
+      "react": "react/use-matcap.ts",
+      "since": "0.9.0"
+    },
+    "shader-grain": {
+      "kind": "recipe",
+      "description": "Grano de película animado por shader, intensidad .07 (Siena).",
+      "files": [
+        "gl/shader-grain/create-shader-grain.ts",
+        "gl/shader-grain/shader.ts",
+        "gl/shared/shader.css",
+        "gl/shader-grain/README.md"
+      ],
+      "react": "react/use-shader-grain.ts",
+      "since": "0.9.0"
+    },
+    "shader-blur": {
+      "kind": "recipe",
+      "description": "Desenfoque direccional de siete muestras por shader (Siena).",
+      "files": [
+        "gl/shader-blur/create-shader-blur.ts",
+        "gl/shader-blur/shader.ts",
+        "gl/shared/shader.css",
+        "gl/shader-blur/README.md"
+      ],
+      "react": "react/use-shader-blur.ts",
+      "since": "0.9.0"
+    },
+    "controls": {
+      "kind": "controls",
+      "description": "CSS-only controls in the Stepbro line: button (rolling label, press squash), field, switch, checkbox, chip, segmented, icon, burger; Dousan's glass.",
+      "files": [
+        "css/controls/button.css",
+        "css/controls/field.css",
+        "css/controls/switch.css",
+        "css/controls/checkbox.css",
+        "css/controls/chip.css",
+        "css/controls/segmented.css",
+        "css/controls/icon.css",
+        "css/controls/glass.css",
+        "css/controls/burger.css",
+        "css/controls/README.md"
+      ],
+      "since": "0.2.0"
+    },
+    "effects": {
+      "kind": "effects",
+      "description": "Stepbro's utility animations (exits, shake, highlight, loading sweeps, gradient text), Dousan's progressive frost, floating, film grain and success confetti, Siena's edge fades; animate() and leave() replay them.",
+      "files": [
+        "css/effects/anim.css",
+        "css/effects/loading.css",
+        "css/effects/text.css",
+        "css/effects/frost.css",
+        "css/effects/float.css",
+        "css/effects/grain.css",
+        "css/effects/success.css",
+        "css/effects/fade.css",
+        "motion/effects.ts",
+        "motion/confetti.ts",
+        "css/effects/README.md"
+      ],
+      "react": "react/frost.tsx",
+      "since": "0.5.0"
+    },
+    "theme-picker": {
+      "kind": "component",
+      "description": "Stepbro theme picker: colour balls that pop in and morph into a rounded square when chosen; applies the theme.",
+      "files": ["components/theme-picker/engine.ts", "components/theme-picker/theme-picker.css", "components/theme-picker/README.md"],
+      "element": "components/theme-picker/element.ts",
+      "react": "components/theme-picker/react.tsx",
+      "since": "0.2.0"
+    },
+    "dialog": {
+      "kind": "component",
+      "description": "Stepbro dialog on native <dialog>: grows out of its button (morph or liquid), shared items, auto-resize, drag to dismiss, floating window.",
+      "files": ["components/dialog/engine.ts", "components/dialog/dialog.css", "components/dialog/README.md"],
+      "element": "components/dialog/element.ts",
+      "react": "components/dialog/react.tsx",
+      "since": "0.3.0"
+    },
+    "menu": {
+      "kind": "component",
+      "description": "Stepbro options menu: translucent anchored panel that grows out of its button; options cascade in.",
+      "files": ["components/menu/engine.ts", "components/menu/menu.css", "components/menu/README.md"],
+      "element": "components/menu/element.ts",
+      "react": "components/menu/react.tsx",
+      "requires": ["dialog"],
+      "since": "0.3.0"
+    },
+    "toast": {
+      "kind": "component",
+      "description": "Stepbro toast deck: stack that opens on hover, grows out of its button, letters rise, swipe to dismiss.",
+      "files": ["components/toast/engine.ts", "components/toast/store.ts", "components/toast/toast.css", "components/toast/README.md"],
+      "element": "components/toast/element.ts",
+      "react": "components/toast/react.tsx",
+      "since": "0.3.0"
+    },
+    "chat-background": {
+      "kind": "component",
+      "description": "Stepbro chat background: two orbiting blobs and a grain; energy (microphone, busy) speeds and grows them.",
+      "files": [
+        "components/chat-background/engine.ts",
+        "components/chat-background/audio.ts",
+        "components/chat-background/chat-background.css",
+        "components/chat-background/README.md"
+      ],
+      "element": "components/chat-background/element.ts",
+      "react": "components/chat-background/react.tsx",
+      "since": "0.4.0"
+    },
+    "chat": {
+      "kind": "component",
+      "description": "Stepbro chat: glass bubbles that grow from their side with rising words, a delayed \"Pensando…\" that morphs into the reply, a composer that grows.",
+      "files": ["components/chat/engine.ts", "components/chat/chat.css", "components/chat/README.md"],
+      "element": "components/chat/element.ts",
+      "react": "components/chat/react.tsx",
+      "requires": ["chat-background"],
+      "since": "0.4.0"
+    },
+    "nav": {
+      "kind": "component",
+      "description": "Stepbro navigation: seven desktop styles (Clásica, Bonita, Dock, Guapa, Tasks, Melon, Tunnel), one glass bar on phones, app shell.",
+      "files": ["components/nav/engine.ts", "components/nav/nav.css", "components/nav/README.md"],
+      "element": "components/nav/element.ts",
+      "react": "components/nav/react.tsx",
+      "since": "0.4.0"
+    },
+    "steps": {
+      "kind": "component",
+      "description": "Stepbro onboarding: one step at a time, items flow out and in, the counter rolls, the background works while busy.",
+      "files": ["components/steps/engine.ts", "components/steps/steps.css", "components/steps/README.md"],
+      "element": "components/steps/element.ts",
+      "react": "components/steps/react.tsx",
+      "requires": ["chat-background"],
+      "since": "0.4.0"
+    },
+    "cursor": {
+      "kind": "component",
+      "description": "Two cursors: Dousan's glass chip that follows the pointer over [data-mk-cursor], and Siena's dot that replaces it inside a zone.",
+      "files": ["components/cursor/engine.ts", "components/cursor/cursor.css", "components/cursor/README.md"],
+      "element": "components/cursor/element.ts",
+      "react": "components/cursor/react.tsx",
+      "requires": ["controls"],
+      "since": "0.6.0"
+    },
+    "island": {
+      "kind": "component",
+      "description": "iyo.ai's floating navbar: a frosted glass pill that grows into a panel (grid rows), darkens the page and staggers its rows; menu and cart share the shell.",
+      "files": ["components/island/engine.ts", "components/island/island.css", "components/island/README.md"],
+      "element": "components/island/element.ts",
+      "react": "components/island/react.tsx",
+      "since": "0.7.0"
+    }
+  }
+}