@luna-park/plugin-motion 1.3.0 → 1.4.0

package/README.md

@@ -8,11 +8,13 @@ Powered by [anime.js](https://animejs.com), and what you see in the editor previ
 
 | | |
 |---|---|
-| 🎬 **18 ready-made presets** | Enter, emphasis and ambient animations, one click away. |
+| 🎬 **19 ready-made presets** | Enter, emphasis and ambient animations, one click away. |
 | 🔢 **Count-up** | Numbers count up from 0 (e.g. `0 → 4.9`) when they appear, or as you scroll. |
 | 🌄 **Scroll-linked & parallax** | Tie any animation to the scroll position, stopping at the center of the page or continuing past it. |
 | 🧈 **Smooth scroll** | Lenis-powered inertia scrolling for the whole app, in one switch. |
-| 🎛️ **Custom from/to** | Animate opacity, position, scale, rotation and blur between your own values. |
+| 🔗 **Smooth anchor links** | Links to a section scroll to it smoothly, stopping below your sticky header. |
+| 📰 **Marquee** | Turn a row into an endless ticker or logo strip. Items are repeated for you. |
+| 🎛️ **Custom from/to** | Animate opacity, position, scale, rotation and blur between your own values, with optional keyframes in between. |
 | 🎯 **7 triggers** | On mount, when visible, synced with scroll, on hover, on press, on focus, or driven by a state. |
 | 🌊 **Stagger** | Cascade the animation over children, over sibling elements (lists!), from the first, last, center or at random. |
 | 🔤 **Split text** | Animate a text letter by letter, word by word, or line by line. |
@@ -30,8 +32,8 @@ Powered by [anime.js](https://animejs.com), and what you see in the editor previ
 |---|---|---|
 | **Enter** | `fade`, `slide-up`, `slide-down`, `slide-left`, `slide-right`, `zoom`, `blur`, `count` | Make an element appear (on mount, when scrolled into view…). |
 | **Emphasis** | `grow`, `shrink`, `lift`, `tilt` | Small feedback on interaction, best with hover, press, focus or state. |
-| **Ambient** | `pulse`, `float`, `spin`, `shake`, `blink`, `wiggle` | Loop forever to draw attention. |
-| **Custom** | `custom` | Animate from your **From** values to your **To** values (`opacity`, `x`, `y`, `scale`, `rotate`, `blur`). |
+| **Ambient** | `pulse`, `float`, `spin`, `shake`, `blink`, `wiggle`, `marquee` | Loop forever to draw attention. |
+| **Custom** | `custom` | Animate from your **From** values to your **To** values (`opacity`, `x`, `y`, `scale`, `scaleX`, `scaleY`, `rotate`, `blur`). |
 
 ## 🎯 Triggers
 
@@ -53,6 +55,8 @@ Powered by [anime.js](https://animejs.com), and what you see in the editor previ
 | **Easing** | `linear`, `outQuad`, `outCubic`, `outExpo`, `inOutSine`, `outBack`, `outElastic`, `outBounce`. |
 | **Loops** | Number of repetitions, `-1` for infinite. Ambient presets loop by default. |
 | **Alternate** | Play back and forth instead of restarting each loop. |
+| **Keyframes** | With a **Custom** animation, steps played between **From** and **To**, evenly spaced. Use them for a squash, a wiggle or a bounce. |
+| **Stepped** | Jump through that many frames instead of moving smoothly, for a retro or stop-motion feel. |
 | **Stagger** | Delay between each animated item, in milliseconds. |
 | **Stagger from** | Where the cascade starts: `first`, `center`, `last` or `random`. |
 | **Scroll anchor** / **Scroll target** / **Scroll mode** | With **Synced with scroll**, see [Scroll options](#-scroll-options). |
@@ -63,6 +67,9 @@ Powered by [anime.js](https://animejs.com), and what you see in the editor previ
 >
 > **Parallax**: pick **Synced with scroll**, **Continue past target** and a **Custom** animation with **From → Y** set to e.g. `100px`. The element is `100px` low when it enters, in place at the target, and keeps rising at the same pace afterwards, so it moves faster than the page. Use a negative value to make it lag behind, like a background. **Continue past target** uses `linear` easing unless you pick one.
 
+> [!TIP]
+> **Marquee**: put it on a row (`display: flex`) inside a parent with `overflow: hidden`, and list your items once. Motion repeats them so the loop is seamless, and hides the copies from screen readers. **Duration** is the time of one pass.
+
 > [!TIP]
 > **Stagger** adapts to what you put it on:
 > - On a **single element**, its children are animated one after the other. Children added later are animated too.
@@ -94,6 +101,8 @@ With the defaults, the animation starts when the top of the element appears and
 | **Default easing** | `outExpo` | Used by every animation without its own easing (ambient presets have their own). |
 | **Smooth scroll** | `false` | Smooth the scroll of the whole app with [Lenis](https://lenis.darkroom.engineering). |
 | **Smooth scroll intensity** | `0.1` | Lenis `lerp`, between `0.01` and `1`. Lower is smoother. |
+| **Smooth anchor links** | `false` | Links to a section of the page (`#pricing`) scroll to it smoothly. |
+| **Anchor offset** | `0` | Space kept above the section, in pixels, e.g. the height of a sticky header. |
 | **Reduced motion** | `reduce` | With `reduce`, visitors who prefer reduced motion get instant transitions, no delays, no looping or scroll-synced animations, and no smooth scroll. Use `ignore` to always play everything. |
 
 ## 📦 In your deployed app

package/dist/index.js

@@ -1,5 +1,5 @@
-(function(){try{if(typeof document<`u`){var e=document.createElement(`style`);e.appendChild(document.createTextNode(`.motion-card[data-v-0dfc3339]{gap:var(--length-xxs);background:var(--color-background-dark);padding:var(--length-xs);border-radius:var(--length-radius-s);flex-direction:column;display:flex}.motion-card .header[data-v-0dfc3339]{font-size:var(--font-size-xs);color:var(--color-content-lite);align-items:center;gap:var(--length-xxs);display:flex}.motion-card .header .title[data-v-0dfc3339]{align-items:center;gap:var(--length-xxs);flex:1;display:flex}.motion-card .header .title .icon[data-v-0dfc3339]{font-size:var(--font-icon-xxs);color:var(--color-content-liter)}.motion-card .header .title .hint[data-v-0dfc3339]{color:var(--color-content-litest)}.motion-panel[data-v-7f091a1a]{flex-direction:column;display:flex}.motion-panel .cards[data-v-7f091a1a]{margin:var(--length-xs);gap:var(--length-xs);flex-direction:column;display:flex}.motion-panel .option[data-v-7f091a1a]{align-items:center;gap:var(--length-xs);display:flex}.motion-panel .option .label[data-v-7f091a1a]{width:48px;font-size:var(--font-size-xs);color:var(--color-content-liter)}.motion-panel .option .input[data-v-7f091a1a]{flex:1}.motion-panel .curve[data-v-7f091a1a]{width:16px;height:16px}.motion-panel .curve polyline[data-v-7f091a1a]{fill:none;stroke:currentColor;stroke-width:1.5px;stroke-linecap:round;stroke-linejoin:round}/*$vite$:1*/`)),document.head.appendChild(e)}}catch(e){console.error(`vite-plugin-css-injected-by-js`,e)}})();
-import { a as e, c as t, i as n, l as r, n as i, o as a, r as o, s as ee, t as te } from "./runtime-BDFfjVth.js";
+(function(){try{if(typeof document<`u`){var e=document.createElement(`style`);e.appendChild(document.createTextNode(`.motion-card[data-v-0dfc3339]{gap:var(--length-xxs);background:var(--color-background-dark);padding:var(--length-xs);border-radius:var(--length-radius-s);flex-direction:column;display:flex}.motion-card .header[data-v-0dfc3339]{font-size:var(--font-size-xs);color:var(--color-content-lite);align-items:center;gap:var(--length-xxs);display:flex}.motion-card .header .title[data-v-0dfc3339]{align-items:center;gap:var(--length-xxs);flex:1;display:flex}.motion-card .header .title .icon[data-v-0dfc3339]{font-size:var(--font-icon-xxs);color:var(--color-content-liter)}.motion-card .header .title .hint[data-v-0dfc3339]{color:var(--color-content-litest)}.motion-panel[data-v-a6164aab]{flex-direction:column;display:flex}.motion-panel .cards[data-v-a6164aab]{margin:var(--length-xs);gap:var(--length-xs);flex-direction:column;display:flex}.motion-panel .option[data-v-a6164aab]{align-items:center;gap:var(--length-xs);display:flex}.motion-panel .option .label[data-v-a6164aab]{width:48px;font-size:var(--font-size-xs);color:var(--color-content-liter)}.motion-panel .option .input[data-v-a6164aab]{flex:1}.motion-panel .curve[data-v-a6164aab]{width:16px;height:16px}.motion-panel .curve polyline[data-v-a6164aab]{fill:none;stroke:currentColor;stroke-width:1.5px;stroke-linecap:round;stroke-linejoin:round}/*$vite$:1*/`)),document.head.appendChild(e)}}catch(e){console.error(`vite-plugin-css-injected-by-js`,e)}})();
+import { a as e, c as t, i as n, l as r, n as i, o as a, r as o, s as ee, t as te } from "./runtime-cHamDyz2.js";
 import { Fragment as ne, computed as re, createBlock as ie, createCommentVNode as ae, createElementBlock as oe, createElementVNode as se, createSlots as ce, createTextVNode as le, createVNode as ue, defineComponent as de, markRaw as fe, openBlock as pe, ref as me, renderList as he, renderSlot as ge, toDisplayString as _e, unref as s, watch as ve, withCtx as ye } from "vue";
 import { LIcon as be, LInput as xe, LSegmented as Se } from "@luna-park/design";
 //#region \0rolldown/runtime.js
@@ -3234,7 +3234,7 @@ function Ld(e) {
 }
 //#endregion
 //#region src/llm.md?raw
-var Rd = "# Motion plugin\n\nAnimates any layout element. Set its fields as `plugin.motion.<field>` attributes, with `:` for numbers, booleans, objects and bindings: `<div plugin.motion.preset=\"slide-up\" plugin.motion.trigger=\"visible\" :plugin.motion.duration=\"800\" />`.\n\n## Presets\n- Enter, from a start state to the element's normal look: `fade`, `slide-up`, `slide-down`, `slide-left`, `slide-right`, `zoom`, `blur`, `count` (counts the first number in the text from `countFrom` up to its value).\n- Emphasis, from the normal look to a target: `grow`, `shrink`, `lift`, `tilt`.\n- Ambient, looping forever: `pulse`, `float`, `spin`, `shake`, `blink`, `wiggle`.\n- `custom`: animates from `from` to `to`, both objects with `x`, `y` (px), `scale`, `rotate` (degrees), `opacity` and `blur` (px). Missing keys use the normal look (`x: 0, y: 0, scale: 1, rotate: 0, opacity: 1, blur: 0`). `from`/`to` are ignored by other presets.\n\n## Triggers\n- `mount` (default): plays when the element is mounted.\n- `visible`: plays once, the first time the element enters the screen.\n- `scroll`: progress follows the scroll position. `scrollAnchor` (`top`/`center`), `scrollTarget` (screen % where it ends, default 50) and `scrollMode` (`stop`, `continue`, `hold`) tune it.\n- `hover`, `press`, `focus`: plays forward on enter and backward on leave.\n- `state`: follows the `state` boolean, e.g. `:plugin.motion.state=\"menuOpen\"`. The first value is applied instantly (`true` shows the end, `false` the start); later changes play forward (`true`) or backward (`false`).\n\n## Timing\n- `duration` and `delay` are in milliseconds. `duration` defaults to the plugin setting (600 ms), `delay` to 0.\n- `loop`: extra repetitions. `0` plays once, `-1` repeats forever. Without it, ambient presets loop forever and the others play once.\n- `alternate`: plays every other repetition backward.\n- `ease`: `linear`, `outQuad`, `outCubic`, `outExpo` (default), `inOutSine`, `outBack`, `outElastic`, `outBounce`.\n- `stagger` (ms) plays the children one after another, from `staggerFrom` (`first`, `center`, `last`, `random`). Sibling elements with the same settings are staggered together.\n- `split` (`chars`, `words`, `lines`) splits the text and staggers the pieces. It rewrites the element's text, so only use it on static text.\n\n## Notes\n- Motion sets inline `transform`, `opacity` and `filter` styles, and turns `inline` targets into `inline-block`.\n- When the visitor prefers reduced motion (plugin setting `reducedMotion: \"reduce\"`), animations finish instantly and looping or scroll animations are skipped.\n- The Motion panel's Replay button replays the selected element's animation in the editor. It does not rerun the page's logic or reset its variables; reopen the page for that.\n- To replay an animation from logic, prefer the `state` trigger and toggle its variable, instead of hiding and showing the element.\n", zd = "data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='utf-8'?%3e%3c!--%20Generator:%20Adobe%20Illustrator%2027.5.0,%20SVG%20Export%20Plug-In%20.%20SVG%20Version:%206.00%20Build%200)%20--%3e%3csvg%20version='1.1'%20id='Calque_1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20x='0px'%20y='0px'%20viewBox='0%200%20100%20100'%20style='enable-background:new%200%200%20100%20100;'%20xml:space='preserve'%3e%3cstyle%20type='text/css'%3e%20.st0{clip-path:url(%23SVGID_00000047022933307920725830000016124621795394122405_);fill:url(%23SVGID_00000173862278939040857730000006968173594089226137_);}%20%3c/style%3e%3cg%3e%3cdefs%3e%3cpath%20id='SVGID_1_'%20d='M90.2,51c0,1.8-0.2,3.7-0.5,5.5c-0.2,1.3-1.9,1.9-2.8,0.9L69,39.4C58.5,29,41.5,29,31.1,39.4L13.1,57.4%20c-1,1-2.6,0.4-2.8-0.9c-3.7-22,12.3-43.9,34.9-46.4C69.2,7,91,26.8,90.2,51z%20M55.7,44.4c-3.6-1.5-7.7-1.5-11.3,0%20c-0.6,0.3-1,0.9-1,1.6v42.2c0,0.8,0.6,1.6,1.5,1.7c3.5,0.5,7,0.5,10.5,0c0.8-0.1,1.5-0.8,1.5-1.7V46%20C56.7,45.3,56.3,44.7,55.7,44.4z%20M83.2,70.3c-3.2-3.2-8.2-8.2-11.9-11.9c-1.1-1.1-2.9-0.3-2.9,1.2v23.3c0,1.3,1.4,2.1,2.5,1.4%20c4.9-3,9.2-7.1,12.4-11.9C83.9,71.7,83.8,70.8,83.2,70.3z%20M28.7,58.4C25,62.1,20,67.1,16.8,70.3c-0.6,0.6-0.6,1.5-0.2,2.1%20c3.2,4.8,7.5,8.9,12.4,11.9c1.1,0.7,2.5-0.1,2.5-1.4V59.5C31.6,58,29.8,57.3,28.7,58.4z'/%3e%3c/defs%3e%3cclipPath%20id='SVGID_00000176734456353677071660000015084933141304141444_'%3e%3cuse%20xlink:href='%23SVGID_1_'%20style='overflow:visible;'/%3e%3c/clipPath%3e%3cradialGradient%20id='SVGID_00000019658959786127304010000007409785301083503023_'%20cx='-322.5985'%20cy='231.969'%20r='47.68'%20fx='-327.6757'%20fy='225.8638'%20gradientTransform='matrix(0.7606%200%200%200.7606%20295.3712%20-126.4447)'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20offset='0'%20style='stop-color:%23187BFF'/%3e%3cstop%20offset='1'%20style='stop-color:%230066F1'/%3e%3c/radialGradient%3e%3crect%20x='9.8'%20y='9.8'%20style='clip-path:url(%23SVGID_00000176734456353677071660000015084933141304141444_);fill:url(%23SVGID_00000019658959786127304010000007409785301083503023_);'%20width='80.4'%20height='80.4'/%3e%3c/g%3e%3c/svg%3e", Bd = {
+var Rd = "# Motion plugin\n\nAnimates any layout element. Set its fields as `plugin.motion.<field>` attributes, with `:` for numbers, booleans, objects and bindings: `<div plugin.motion.preset=\"slide-up\" plugin.motion.trigger=\"visible\" :plugin.motion.duration=\"800\" />`.\n\n## Presets\n- Enter, from a start state to the element's normal look: `fade`, `slide-up`, `slide-down`, `slide-left`, `slide-right`, `zoom`, `blur`, `count` (counts the first number in the text from `countFrom` up to its value).\n- Emphasis, from the normal look to a target: `grow`, `shrink`, `lift`, `tilt`.\n- Ambient, looping forever: `pulse`, `float`, `spin`, `shake`, `blink`, `wiggle`, `marquee`.\n- `custom`: animates from `from` to `to`, both objects with `x`, `y` (px), `scale`, `scaleX`, `scaleY`, `rotate` (degrees), `opacity` and `blur` (px). Missing keys use the normal look (`x: 0, y: 0, scale: 1, scaleX: 1, scaleY: 1, rotate: 0, opacity: 1, blur: 0`). `from`/`to` are ignored by other presets.\n- `keyframes` adds evenly spaced steps between `from` and `to` of a `custom` preset, as an array of the same objects. A jelly squash on hover: `plugin.motion.preset=\"custom\" plugin.motion.trigger=\"hover\" :plugin.motion.keyframes=\"[{scaleX:1.08,scaleY:0.92},{scaleX:0.94,scaleY:1.06},{scaleX:1.03,scaleY:0.97}]\" :plugin.motion.duration=\"520\"`. A wiggle that ends where it started: `:plugin.motion.keyframes=\"[{rotate:-3},{rotate:3}]\"`.\n- `marquee` scrolls the children of a row sideways forever, for tickers and logo strips. Put it on a flex row (`display:flex`) inside a parent with `overflow:hidden`, and list the items once: Motion repeats them, hides the copies from screen readers and loops seamlessly, `gap` included. `duration` is the time of one pass (default 20000 ms).\n\n## Triggers\n- `mount` (default): plays when the element is mounted.\n- `visible`: plays once, the first time the element enters the screen.\n- `scroll`: progress follows the scroll position. `scrollAnchor` (`top`/`center`), `scrollTarget` (screen % where it ends, default 50) and `scrollMode` (`stop`, `continue`, `hold`) tune it.\n- `hover`, `press`, `focus`: plays forward on enter and backward on leave.\n- `state`: follows the `state` boolean, e.g. `:plugin.motion.state=\"menuOpen\"`. The first value is applied instantly (`true` shows the end, `false` the start); later changes play forward (`true`) or backward (`false`).\n\n## Timing\n- `duration` and `delay` are in milliseconds. `duration` defaults to the plugin setting (600 ms), `delay` to 0.\n- `loop`: extra repetitions. `0` plays once, `-1` repeats forever. Without it, ambient presets loop forever and the others play once.\n- `alternate`: plays every other repetition backward.\n- `ease`: `linear`, `outQuad`, `outCubic`, `outExpo` (default), `inOutSine`, `outBack`, `outElastic`, `outBounce`.\n- `stepped`: plays in that many jumps instead of a smooth move, like CSS `steps()`. `:plugin.motion.stepped=\"2\"` with `alternate` and `loop` makes a two-frame wobble.\n- `stagger` (ms) plays the children one after another, from `staggerFrom` (`first`, `center`, `last`, `random`). Sibling elements with the same settings are staggered together.\n- `split` (`chars`, `words`, `lines`) splits the text and staggers the pieces. It rewrites the element's text, so only use it on static text.\n\n## Loops and interaction states\n- Use Motion for looping decoration instead of `@keyframes` in `.inject/style.css`. Ambient presets cover the common loops: a blinking light is `plugin.motion.preset=\"blink\"`, a bobbing mascot `float`, a breathing badge `pulse`.\n- Any other two-state loop is a `custom` preset with `loop` and `alternate`: `plugin.motion.preset=\"custom\" :plugin.motion.to=\"{scale:0.55,rotate:45}\" :plugin.motion.loop=\"-1\" :plugin.motion.alternate=\"true\" plugin.motion.ease=\"inOutSine\" :plugin.motion.duration=\"1300\"`. `duration` is one direction, so a 2.6 s CSS cycle is 1300 ms. Without `alternate` the loop restarts from the start, which suits a one-way slide with `ease=\"linear\"`.\n- Offset identical loops with `delay` so they do not move in unison.\n- Hover, press and focus feedback that moves, scales or rotates the element uses the `hover`, `press` and `focus` triggers, e.g. `plugin.motion.preset=\"shrink\" plugin.motion.trigger=\"press\"`. Feedback that changes colours, shadows or outlines uses the layout's own `style:hover`, `style:active` and `style:focus-visible` states, never a `data-*` attribute styled from global CSS.\n- Keep `@keyframes` in `.inject/style.css` only for properties Motion does not animate (colours, shadows, clip paths). Multi-step moves use `keyframes`, stepped timing uses `stepped`, tickers use `marquee`.\n\n## Plugin settings\n- `anchorScroll` makes links to a section (`href=\"#pricing\"`) scroll smoothly, and `anchorOffset` (px) keeps that much space above the section, e.g. the height of a sticky header. Turn it on instead of writing `scroll-behavior` and `scroll-margin-top` in `.inject/style.css`. It follows `reducedMotion` and works with `smoothScroll`.\n- `smoothScroll` adds inertia to the whole page scroll (`smoothScrollLerp` tunes it).\n\n## Notes\n- Motion sets inline `transform`, `opacity` and `filter` styles, and turns `inline` targets into `inline-block`.\n- When the visitor prefers reduced motion (plugin setting `reducedMotion: \"reduce\"`), animations finish instantly and looping or scroll animations are skipped.\n- The Motion panel's Replay button replays the selected element's animation in the editor. It does not rerun the page's logic or reset its variables; reopen the page for that.\n- To replay an animation from logic, prefer the `state` trigger and toggle its variable, instead of hiding and showing the element.\n", zd = "data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='utf-8'?%3e%3c!--%20Generator:%20Adobe%20Illustrator%2027.5.0,%20SVG%20Export%20Plug-In%20.%20SVG%20Version:%206.00%20Build%200)%20--%3e%3csvg%20version='1.1'%20id='Calque_1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20x='0px'%20y='0px'%20viewBox='0%200%20100%20100'%20style='enable-background:new%200%200%20100%20100;'%20xml:space='preserve'%3e%3cstyle%20type='text/css'%3e%20.st0{clip-path:url(%23SVGID_00000047022933307920725830000016124621795394122405_);fill:url(%23SVGID_00000173862278939040857730000006968173594089226137_);}%20%3c/style%3e%3cg%3e%3cdefs%3e%3cpath%20id='SVGID_1_'%20d='M90.2,51c0,1.8-0.2,3.7-0.5,5.5c-0.2,1.3-1.9,1.9-2.8,0.9L69,39.4C58.5,29,41.5,29,31.1,39.4L13.1,57.4%20c-1,1-2.6,0.4-2.8-0.9c-3.7-22,12.3-43.9,34.9-46.4C69.2,7,91,26.8,90.2,51z%20M55.7,44.4c-3.6-1.5-7.7-1.5-11.3,0%20c-0.6,0.3-1,0.9-1,1.6v42.2c0,0.8,0.6,1.6,1.5,1.7c3.5,0.5,7,0.5,10.5,0c0.8-0.1,1.5-0.8,1.5-1.7V46%20C56.7,45.3,56.3,44.7,55.7,44.4z%20M83.2,70.3c-3.2-3.2-8.2-8.2-11.9-11.9c-1.1-1.1-2.9-0.3-2.9,1.2v23.3c0,1.3,1.4,2.1,2.5,1.4%20c4.9-3,9.2-7.1,12.4-11.9C83.9,71.7,83.8,70.8,83.2,70.3z%20M28.7,58.4C25,62.1,20,67.1,16.8,70.3c-0.6,0.6-0.6,1.5-0.2,2.1%20c3.2,4.8,7.5,8.9,12.4,11.9c1.1,0.7,2.5-0.1,2.5-1.4V59.5C31.6,58,29.8,57.3,28.7,58.4z'/%3e%3c/defs%3e%3cclipPath%20id='SVGID_00000176734456353677071660000015084933141304141444_'%3e%3cuse%20xlink:href='%23SVGID_1_'%20style='overflow:visible;'/%3e%3c/clipPath%3e%3cradialGradient%20id='SVGID_00000019658959786127304010000007409785301083503023_'%20cx='-322.5985'%20cy='231.969'%20r='47.68'%20fx='-327.6757'%20fy='225.8638'%20gradientTransform='matrix(0.7606%200%200%200.7606%20295.3712%20-126.4447)'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20offset='0'%20style='stop-color:%23187BFF'/%3e%3cstop%20offset='1'%20style='stop-color:%230066F1'/%3e%3c/radialGradient%3e%3crect%20x='9.8'%20y='9.8'%20style='clip-path:url(%23SVGID_00000176734456353677071660000015084933141304141444_);fill:url(%23SVGID_00000019658959786127304010000007409785301083503023_);'%20width='80.4'%20height='80.4'/%3e%3c/g%3e%3c/svg%3e", Bd = {
 	prefix: "fas",
 	iconName: "down-left-and-up-right-to-center",
 	icon: [
@@ -3603,6 +3603,16 @@ var Rd = "# Motion plugin\n\nAnimates any layout element. Set its fields as `plu
 		"M448 96c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 320c0 17.7 14.3 32 32 32s32-14.3 32-32l0-320zM310.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-128-128c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L210.7 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l178.7 0-73.4 73.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l128-128z"
 	]
 }, Cf = {
+	prefix: "fas",
+	iconName: "angles-left",
+	icon: [
+		512,
+		512,
+		[171, "angle-double-left"],
+		"f100",
+		"M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 246.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160zm352-160l-160 160c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L301.3 256 438.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0z"
+	]
+}, wf = {
 	prefix: "fas",
 	iconName: "arrow-up-from-line",
 	icon: [
@@ -3612,7 +3622,7 @@ var Rd = "# Motion plugin\n\nAnimates any layout element. Set its fields as `plu
 		"f342",
 		"M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-128 128c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.3l0 66.7 0 112c0 17.7 14.3 32 32 32s32-14.3 32-32l0-112 0-66.7 73.4 73.4c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-128-128zM32 416c-17.7 0-32 14.3-32 32s14.3 32 32 32l320 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L32 416z"
 	]
-}, wf = {
+}, Tf = {
 	prefix: "fas",
 	iconName: "up-right-and-down-left-from-center",
 	icon: [
@@ -3622,10 +3632,10 @@ var Rd = "# Motion plugin\n\nAnimates any layout element. Set its fields as `plu
 		"f424",
 		"M344 0L488 0c13.3 0 24 10.7 24 24l0 144c0 9.7-5.8 18.5-14.8 22.2s-19.3 1.7-26.2-5.2l-39-39-87 87c-9.4 9.4-24.6 9.4-33.9 0l-32-32c-9.4-9.4-9.4-24.6 0-33.9l87-87L327 41c-6.9-6.9-8.9-17.2-5.2-26.2S334.3 0 344 0zM168 512L24 512c-13.3 0-24-10.7-24-24L0 344c0-9.7 5.8-18.5 14.8-22.2s19.3-1.7 26.2 5.2l39 39 87-87c9.4-9.4 24.6-9.4 33.9 0l32 32c9.4 9.4 9.4 24.6 0 33.9l-87 87 39 39c6.9 6.9 8.9 17.2 5.2 26.2s-12.5 14.8-22.2 14.8z"
 	]
-}, Tf = { class: "motion-card" }, Ef = { class: "header" }, Df = { class: "title" }, Of = {
+}, Ef = { class: "motion-card" }, Df = { class: "header" }, Of = { class: "title" }, kf = {
 	key: 0,
 	class: "hint"
-}, kf = /*@__PURE__*/ de({
+}, Af = /*@__PURE__*/ de({
 	__name: "LMotionCard",
 	props: {
 		hint: {},
@@ -3633,23 +3643,23 @@ var Rd = "# Motion plugin\n\nAnimates any layout element. Set its fields as `plu
 		title: {}
 	},
 	setup(e) {
-		return (t, n) => (pe(), oe("div", Tf, [se("div", Ef, [se("div", Df, [
+		return (t, n) => (pe(), oe("div", Ef, [se("div", Df, [se("div", Of, [
 			ue(s(be), {
 				class: "icon",
 				icon: e.icon
 			}, null, 8, ["icon"]),
 			le(" " + _e(e.title) + " ", 1),
-			e.hint ? (pe(), oe("span", Of, _e(e.hint), 1)) : ae("", !0)
+			e.hint ? (pe(), oe("span", kf, _e(e.hint), 1)) : ae("", !0)
 		]), ge(t.$slots, "header", {}, void 0, !0)]), ge(t.$slots, "default", {}, void 0, !0)]));
 	}
-}), Af = (e, t) => {
+}), jf = (e, t) => {
 	let n = e.__vccOpts || e;
 	for (let [e, r] of t) n[e] = r;
 	return n;
-}, jf = /*#__PURE__*/ Af(kf, [["__scopeId", "data-v-0dfc3339"]]), Mf = { class: "motion-panel" }, Nf = { class: "cards" }, Pf = { class: "option" }, Ff = { class: "option" }, If = { class: "option" }, Lf = {
+}, Mf = /*#__PURE__*/ jf(Af, [["__scopeId", "data-v-0dfc3339"]]), Nf = { class: "motion-panel" }, Pf = { class: "cards" }, Ff = { class: "option" }, If = { class: "option" }, Lf = { class: "option" }, Rf = {
 	class: "curve",
 	viewBox: "0 0 24 24"
-}, Rf = ["points"], zf = /*#__PURE__*/ Af(/* @__PURE__ */ de({
+}, zf = ["points"], Bf = /*#__PURE__*/ jf(/* @__PURE__ */ de({
 	__name: "LMotionPanel",
 	props: {
 		getElements: { type: Function },
@@ -3664,8 +3674,9 @@ var Rd = "# Motion plugin\n\nAnimates any layout element. Set its fields as `plu
 			count: lf,
 			fade: bf,
 			float: Ud,
-			grow: wf,
-			lift: Cf,
+			grow: Tf,
+			lift: wf,
+			marquee: Cf,
 			pulse: Zd,
 			shake: nf,
 			shrink: Bd,
@@ -3812,8 +3823,8 @@ var Rd = "# Motion plugin\n\nAnimates any layout element. Set its fields as `plu
 				return `${3 + r * 18},${17 - n(r) * 10}`;
 			}).join(" ");
 		}
-		return (n, r) => (pe(), oe("div", Mf, [se("div", Nf, [
-			ue(jf, {
+		return (n, r) => (pe(), oe("div", Nf, [se("div", Pf, [
+			ue(Mf, {
 				hint: le.find((e) => e.value === t.modelValue.trigger)?.title,
 				icon: s(mf),
 				title: "Trigger"
@@ -3825,19 +3836,19 @@ var Rd = "# Motion plugin\n\nAnimates any layout element. Set its fields as `plu
 					wide: "",
 					"onUpdate:modelValue": r[0] ||= (e) => l("trigger", e)
 				}, null, 8, ["model-value"]), t.modelValue.trigger === "scroll" ? (pe(), oe(ne, { key: 0 }, [
-					se("div", Pf, [r[7] ||= se("span", { class: "label" }, "Anchor", -1), ue(s(Se), {
+					se("div", Ff, [r[7] ||= se("span", { class: "label" }, "Anchor", -1), ue(s(Se), {
 						"model-value": t.modelValue.scrollAnchor ?? "top",
 						options: fe,
 						small: "",
 						"onUpdate:modelValue": r[1] ||= (e) => l("scrollAnchor", e)
 					}, null, 8, ["model-value"])]),
-					se("div", Ff, [r[8] ||= se("span", { class: "label" }, "Mode", -1), ue(s(Se), {
+					se("div", If, [r[8] ||= se("span", { class: "label" }, "Mode", -1), ue(s(Se), {
 						"model-value": t.modelValue.scrollMode ?? "stop",
 						options: ge,
 						small: "",
 						"onUpdate:modelValue": r[2] ||= (e) => l("scrollMode", e)
 					}, null, 8, ["model-value"])]),
-					se("div", If, [r[9] ||= se("span", { class: "label" }, "Target", -1), ue(s(xe), {
+					se("div", Lf, [r[9] ||= se("span", { class: "label" }, "Target", -1), ue(s(xe), {
 						class: "input",
 						"model-value": t.modelValue.scrollTarget ?? 50,
 						options: {
@@ -3853,7 +3864,7 @@ var Rd = "# Motion plugin\n\nAnimates any layout element. Set its fields as `plu
 				], 64)) : ae("", !0)]),
 				_: 1
 			}, 8, ["hint", "icon"]),
-			ue(jf, {
+			ue(Mf, {
 				hint: Te(t.modelValue.preset),
 				icon: s(qd),
 				title: "Animation"
@@ -3874,7 +3885,7 @@ var Rd = "# Motion plugin\n\nAnimates any layout element. Set its fields as `plu
 				}, null, 8, ["model-value", "options"]))]),
 				_: 1
 			}, 8, ["hint", "icon"]),
-			ue(jf, {
+			ue(Mf, {
 				hint: t.modelValue.ease ?? `${s(e).ease} (default)`,
 				icon: s(af),
 				title: "Easing"
@@ -3887,15 +3898,15 @@ var Rd = "# Motion plugin\n\nAnimates any layout element. Set its fields as `plu
 					"onUpdate:modelValue": r[6] ||= (e) => l("ease", e)
 				}, ce({ _: 2 }, [he(s(o), (e) => ({
 					name: e,
-					fn: ye(() => [(pe(), oe("svg", Lf, [se("polyline", { points: Ee(e) }, null, 8, Rf)]))])
+					fn: ye(() => [(pe(), oe("svg", Rf, [se("polyline", { points: Ee(e) }, null, 8, zf)]))])
 				}))]), 1032, ["model-value", "options"])]),
 				_: 1
 			}, 8, ["hint", "icon"])
 		])]));
 	}
-}), [["__scopeId", "data-v-7f091a1a"]]), Bf = {
+}), [["__scopeId", "data-v-a6164aab"]]), Vf = {
 	name: "@luna-park/plugin-motion",
-	version: "1.3.0",
+	version: "1.4.0",
 	private: !1,
 	description: "Motion plugin for Luna Park.",
 	keywords: [
@@ -3950,7 +3961,7 @@ var Rd = "# Motion plugin\n\nAnimates any layout element. Set its fields as `plu
 		"@luna-park/design": "^1.6.0",
 		vue: "^3.5.24"
 	}
-}, Vf = [
+}, Hf = [
 	"mount",
 	"visible",
 	"scroll",
@@ -3958,46 +3969,57 @@ var Rd = "# Motion plugin\n\nAnimates any layout element. Set its fields as `plu
 	"press",
 	"focus",
 	"state"
-];
-function Hf(e) {
-	return l.object({
-		blur: l.number({
-			default: 0,
-			name: "Blur",
-			options: { suffix: "px" }
-		}),
-		opacity: l.number({
-			default: 1,
-			name: "Opacity"
-		}),
-		rotate: l.number({
-			default: 0,
-			name: "Rotate (deg)"
-		}),
-		scale: l.number({
-			default: 1,
-			name: "Scale"
-		}),
-		x: l.number({
-			default: 0,
-			name: "X",
-			options: { suffix: "px" }
-		}),
-		y: l.number({
-			default: 0,
-			name: "Y",
-			options: { suffix: "px" }
-		})
-	}, {
+], Uf = {
+	blur: l.number({
+		default: 0,
+		name: "Blur",
+		options: { suffix: "px" }
+	}),
+	opacity: l.number({
+		default: 1,
+		name: "Opacity"
+	}),
+	rotate: l.number({
+		default: 0,
+		name: "Rotate (deg)"
+	}),
+	scale: l.number({
+		default: 1,
+		name: "Scale"
+	}),
+	scaleX: l.number({
+		default: 1,
+		name: "Scale X"
+	}),
+	scaleY: l.number({
+		default: 1,
+		name: "Scale Y"
+	}),
+	x: l.number({
+		default: 0,
+		name: "X",
+		options: { suffix: "px" }
+	}),
+	y: l.number({
+		default: 0,
+		name: "Y",
+		options: { suffix: "px" }
+	})
+};
+function Wf(e) {
+	return e.preset !== "custom";
+}
+function Gf(e) {
+	return l.object(Uf, {
 		name: e,
-		options: { hidden: (e) => e.preset !== "custom" }
+		options: { hidden: Wf }
 	});
 }
-var Uf = {
-	component: fe(zf),
+var Kf = {
+	component: fe(Bf),
 	directive: {
 		build: {
-			from: `${Bf.name}/runtime`,
+			from: `${Vf.name}/runtime`,
 			name: "vMotion"
 		},
 		value: t
@@ -4040,7 +4062,14 @@ var Uf = {
 			optional: !0,
 			options: { hidden: !0 }
 		}),
-		from: Hf("From"),
+		from: Gf("From"),
+		keyframes: l.array(l.object(Uf, { name: "Step" }), {
+			default: [],
+			description: "Steps played between From and To, evenly spaced",
+			name: "Keyframes",
+			optional: !0,
+			options: { hidden: Wf }
+		}),
 		loop: l.number({
 			default: -1,
 			description: "-1 = infinite",
@@ -4113,37 +4142,54 @@ var Uf = {
 			name: "State",
 			options: { hidden: (e) => e.trigger !== "state" }
 		}),
-		to: Hf("To"),
+		stepped: l.number({
+			default: 2,
+			description: "Jumps through this many frames instead of moving smoothly",
+			name: "Stepped",
+			optional: !0
+		}),
+		to: Gf("To"),
 		trigger: l.string({
 			default: "mount",
-			enum: Vf,
+			enum: Hf,
 			name: "Trigger",
 			options: { hidden: !0 }
 		})
 	}
-}, Wf = l.object({
+}, qf = l.object({
+	anchorOffset: l.number({
+		default: 0,
+		description: "Space kept above a section reached from a link, e.g. the height of a sticky header.",
+		name: "Anchor offset",
+		options: { suffix: "px" }
+	}),
+	anchorScroll: l.boolean({
+		default: !1,
+		description: "Links to a section of the page (#pricing) scroll to it smoothly.",
+		name: "Smooth anchor links"
+	}),
 	duration: l.number({
-		name: "Default duration (ms)",
-		default: 600
+		default: 600,
+		name: "Default duration (ms)"
 	}),
 	ease: l.string({
-		name: "Default easing",
 		default: "outExpo",
-		enum: o
+		enum: o,
+		name: "Default easing"
 	}),
 	reducedMotion: l.string({
-		name: "Reduced motion",
 		default: "reduce",
-		enum: ["reduce", "ignore"]
+		enum: ["reduce", "ignore"],
+		name: "Reduced motion"
 	}),
 	smoothScroll: l.boolean({
-		name: "Smooth scroll",
-		default: !1
+		default: !1,
+		name: "Smooth scroll"
 	}),
 	smoothScrollLerp: l.number({
-		name: "Smooth scroll intensity",
 		default: .1,
 		description: "Lower is smoother.",
+		name: "Smooth scroll intensity",
 		options: {
 			clamp: !0,
 			max: 1,
@@ -4151,10 +4197,10 @@ var Uf = {
 			step: .01
 		}
 	})
-}), Gf = n(!0);
-function Kf({ config: e, mode: t }) {
+}), Jf = n(!0);
+function Yf({ config: e, mode: t }) {
 	if (t === "editor") return {
-		component: Gf,
+		component: Jf,
 		name: "MotionScroll"
 	};
 	if (e.smoothScroll) return {
@@ -4163,38 +4209,46 @@ function Kf({ config: e, mode: t }) {
 		name: "MotionScroll"
 	};
 }
-function qf({ config: e }) {
+function Xf({ config: e, mode: t }) {
+	if (t === "editor" || !e.anchorScroll) return "";
+	let n = `[id] { scroll-margin-top: ${e.anchorOffset}px; }`;
+	if (e.smoothScroll) return n;
+	let r = "html { scroll-behavior: smooth; }";
+	return `${n} ${e.reducedMotion === "reduce" ? `@media (prefers-reduced-motion: no-preference) { ${r} }` : r}`;
+}
+function Zf({ config: e }) {
 	i(e);
 }
-var Jf = Ld({
-	id: "motion",
-	name: "Motion",
-	description: "Animate elements with anime.js.",
-	llm: Rd,
+var Qf = Ld({
 	build: {
 		frontImports: [{
-			name: Bf.name,
-			version: Bf.version
+			name: Vf.name,
+			version: Vf.version
 		}],
 		injections: ({ config: e }) => ({
-			[Jl.AppImport]: `import { MotionScroll } from "${Bf.name}/runtime";`,
+			[Jl.AppImport]: `import { MotionScroll } from "${Vf.name}/runtime";`,
 			[Jl.AppBody]: "app.component(\"MotionScroll\", MotionScroll);",
 			[Jl.AppSetup]: `
-import { configureMotion } from "${Bf.name}/runtime";
+import { configureMotion } from "${Vf.name}/runtime";
 configureMotion(${JSON.stringify(e)});
 `
 		})
 	},
-	config: Wf,
+	config: qf,
+	description: "Animate elements with anime.js.",
 	editor: {
-		panel: { element: [Uf] },
-		wrapper: Kf
+		panel: { element: [Kf] },
+		wrapper: Yf
 	},
 	icon: zd,
+	id: "motion",
+	inject: { css: Xf },
 	lifecycle: {
-		mount: qf,
-		update: qf
-	}
+		mount: Zf,
+		update: Zf
+	},
+	llm: Rd,
+	name: "Motion"
 });
 //#endregion
-export { Jf as default };
+export { Qf as default };