kuinetic 0.1.0 → 0.1.2

package/dist/kuinetic.js

@@ -1536,7 +1536,7 @@ var kuinetic = (() => {
       "animation-timeline": config.timeline === "scroll" ? "scroll()" : "view()"
     };
     if (capabilities.animationRange) {
-      properties["animation-range"] = config.range || "entry 0% cover 60%";
+      properties["animation-range"] = config.range || (config.timeline === "scroll" ? "0% 100%" : "entry 0% cover 60%");
     }
     return properties;
   }
@@ -2028,7 +2028,8 @@ var kuinetic = (() => {
   };
   var pulse = {
     duration: { type: "time", default: "2.2s", cssProperty: "--kui-duration" },
-    ease: { type: "easing", default: "ease-in-out", cssProperty: "--kui-ease" }
+    ease: { type: "easing", default: "ease-in-out", cssProperty: "--kui-ease" },
+    scale: { type: "number", default: "1.15", cssProperty: "--kui-pulse-scale", finite: true, minimum: 1 }
   };
   var AMBIENT_PRIMITIVES = [
     cssPrimitive("ambient-gradient", [CHANNEL.background], {
@@ -2131,7 +2132,8 @@ var kuinetic = (() => {
   };
   var dotPulse = {
     duration: { type: "time", default: "1.2s", cssProperty: "--kui-duration" },
-    ease: { type: "easing", default: "ease-in-out", cssProperty: "--kui-ease" }
+    ease: { type: "easing", default: "ease-in-out", cssProperty: "--kui-ease" },
+    dotSize: { type: "length", default: "8px", cssProperty: "--kui-dot-size" }
   };
   var progressTrack = {
     duration: { type: "time", default: "1.4s", cssProperty: "--kui-duration" },
@@ -2148,7 +2150,8 @@ var kuinetic = (() => {
   };
   var pop = {
     duration: { type: "time", default: "420ms", cssProperty: "--kui-duration" },
-    ease: { type: "easing", default: "back-out", cssProperty: "--kui-ease" }
+    ease: { type: "easing", default: "back-out", cssProperty: "--kui-ease" },
+    scale: { type: "number", default: "1.18", cssProperty: "--kui-pop-scale", finite: true, minimum: 1 }
   };
   var ripple = {
     duration: { type: "time", default: "600ms", cssProperty: "--kui-duration" },
@@ -2159,6 +2162,9 @@ var kuinetic = (() => {
     duration: { type: "time", default: "1400ms", cssProperty: "--kui-duration" },
     ease: { type: "easing", default: "linear", cssProperty: "--kui-ease" }
   };
+  var pull = {
+    distance: { type: "length", default: "36px", cssProperty: "--kui-pull-distance" }
+  };
   var FEEDBACK_PRIMITIVES = [
     cssPrimitive("feedback-shimmer", [CHANNEL.background], {
       parameters: loop,
@@ -2230,6 +2236,7 @@ var kuinetic = (() => {
       defaultActivation: "click"
     }),
     cssPrimitive("feedback-pull", [CHANNEL.translate], {
+      parameters: pull,
       defaultActivation: "manual"
     })
   ];
@@ -2260,18 +2267,23 @@ var kuinetic = (() => {
     },
     { name: "ripple", primitive: "feedback-ripple", keyframes: "kui-ripple" },
     { name: "badge-pop", primitive: "feedback-pop", keyframes: "kui-badge-pop" },
-    { name: "count-bump", primitive: "feedback-pop", keyframes: "kui-count-bump", params: { duration: "280ms" } },
+    {
+      name: "count-bump",
+      primitive: "feedback-pop",
+      keyframes: "kui-count-bump",
+      params: { duration: "280ms", scale: "1.3" }
+    },
     {
       name: "heart-burst",
       primitive: "feedback-burst",
       keyframes: "kui-heart-burst",
-      params: { duration: "700ms" }
+      params: { duration: "700ms", scale: "1.4" }
     },
     {
       name: "confetti-burst",
       primitive: "feedback-burst",
       keyframes: "kui-confetti-burst",
-      params: { duration: "900ms" }
+      params: { duration: "900ms", scale: "1.15" }
     },
     { name: "copy-confirm", primitive: "feedback-confirm", keyframes: "kui-copy-confirm" },
     {
@@ -2416,12 +2428,15 @@ var kuinetic = (() => {
     duration: { type: "time", default: "220ms", cssProperty: "--kui-duration" },
     ease: { type: "easing", default: "ease-out", cssProperty: "--kui-ease" }
   };
-  function hoverPrimitive(id, channels) {
+  var liftParams = {
+    distance: { type: "length", default: "6px", cssProperty: "--kui-lift-distance" }
+  };
+  function hoverPrimitive(id, channels, extraParams = {}) {
     return {
       id,
       renderer: "javascript",
       channels,
-      parameters: hoverTiming,
+      parameters: { ...hoverTiming, ...extraParams },
       supportedTimelines: ["time"],
       supportedActivations: ["load"],
       defaultActivation: "load",
@@ -2436,8 +2451,8 @@ var kuinetic = (() => {
     };
   }
   var HOVER_PRIMITIVES = [
-    hoverPrimitive("lift", ["translate"]),
-    hoverPrimitive("lift-shadow", ["translate", "shadow"]),
+    hoverPrimitive("lift", ["translate"], liftParams),
+    hoverPrimitive("lift-shadow", ["translate", "shadow"], liftParams),
     hoverPrimitive("shine-sweep", ["sweep"]),
     hoverPrimitive("split-flap", ["rotate"]),
     hoverPrimitive("border-draw", ["border"]),
@@ -2486,6 +2501,13 @@ var kuinetic = (() => {
       finite: true,
       minimum: 0.1,
       maximum: 1e3
+    },
+    mass: {
+      type: "number",
+      default: "1",
+      cssProperty: "--kui-mass",
+      finite: true,
+      minimum: 0.1
     }
   };
   function pointerPrimitive(id, channels, parameters, prepare) {
@@ -2509,7 +2531,8 @@ var kuinetic = (() => {
     return {
       ...DEFAULT_SPRING,
       stiffness: params.num("stiffness", DEFAULT_SPRING.stiffness),
-      damping: params.num("damping", DEFAULT_SPRING.damping)
+      damping: params.num("damping", DEFAULT_SPRING.damping),
+      mass: params.num("mass", DEFAULT_SPRING.mass)
     };
   }
   function springDepsFor(ctx) {
@@ -2766,7 +2789,7 @@ var kuinetic = (() => {
       perfClass: "paint"
     }),
     cssPrimitive("media-blur-up", [CHANNEL.translate, CHANNEL.filter], {
-      parameters: geometry,
+      parameters: { ...geometry, blur: { type: "length", default: "16px", cssProperty: "--kui-blur" } },
       perfClass: "paint"
     }),
     cssPrimitive("media-parallax-frame", [CHANNEL.translate], {
@@ -3329,11 +3352,18 @@ var kuinetic = (() => {
   };
   var fontSlantParams = {
     from: { type: "angle", default: "0deg", cssProperty: "--kui-from-slant" },
-    to: { type: "angle", default: "-10deg", cssProperty: "--kui-to-slant" }
+    to: { type: "angle", default: "10deg", cssProperty: "--kui-to-slant" }
+  };
+  var textSweepParams = {
+    color: { type: "color", default: "currentColor", cssProperty: "--kui-sweep-color" }
+  };
+  var extrudeParams = {
+    angle: { type: "angle", default: "-20deg", cssProperty: "--kui-from-angle" },
+    distance: { type: "length", default: "32px", cssProperty: "--kui-distance" }
   };
   var TEXT_CSS_PRIMITIVES = [
     cssPrimitive("text-shimmer", [CHANNEL.background], { reducedMotion: "disable" }),
-    cssPrimitive("text-sweep", [CHANNEL.background]),
+    cssPrimitive("text-sweep", [CHANNEL.background], { parameters: textSweepParams }),
     cssPrimitive("text-outline-fill", [CHANNEL.stroke, CHANNEL.color]),
     cssPrimitive("var-weight", ["font"], { parameters: fontWeightParams }),
     cssPrimitive("var-width", ["font"], { parameters: fontWidthParams }),
@@ -3343,12 +3373,17 @@ var kuinetic = (() => {
       reducedMotion: "disable"
     }),
     cssPrimitive("redaction-reveal", [CHANNEL.clip]),
-    cssPrimitive("text-3d-extrude", [CHANNEL.rotate, CHANNEL.translate])
+    cssPrimitive("text-3d-extrude", [CHANNEL.rotate, CHANNEL.translate], { parameters: extrudeParams })
   ];
   var TEXT_CSS_PRESETS = [
     { name: "gradient-shimmer", primitive: "text-shimmer", keyframes: "kui-gradient-shimmer" },
     { name: "gradient-sweep", primitive: "text-sweep", keyframes: "kui-gradient-sweep" },
-    { name: "highlight-sweep", primitive: "text-sweep", keyframes: "kui-highlight-sweep" },
+    {
+      name: "highlight-sweep",
+      primitive: "text-sweep",
+      keyframes: "kui-highlight-sweep",
+      params: { color: "gold" }
+    },
     { name: "underline-draw", primitive: "text-sweep", keyframes: "kui-underline-draw" },
     { name: "text-outline-fill", primitive: "text-outline-fill", keyframes: "kui-text-outline-fill" },
     { name: "var-weight", primitive: "var-weight", keyframes: "kui-var-weight" },
@@ -3822,6 +3857,29 @@ var kuinetic = (() => {
     reducedMotion: "disable",
     prepare: () => inertInstance()
   };
+  function prepareSiblingScale(cssProperty) {
+    return (el, params) => {
+      const sibling = el.nextElementSibling;
+      sibling?.style.setProperty(cssProperty, String(params.num("scale", 1)));
+      return () => sibling?.style.removeProperty(cssProperty);
+    };
+  }
+  function siblingScalePrimitive(id, cssProperty) {
+    return {
+      id,
+      renderer: "javascript",
+      channels: [CHANNEL.translate, CHANNEL.scale, CHANNEL.opacity, CHANNEL.stroke, CHANNEL.color],
+      parameters: { scale: { type: "number", default: "1", cssProperty } },
+      supportedTimelines: ["time"],
+      supportedActivations: ["load"],
+      defaultActivation: "load",
+      perfClass: "compositor",
+      reducedMotion: "disable",
+      prepare: deferPrepare(prepareSiblingScale(cssProperty))
+    };
+  }
+  var TOGGLE_MORPH_PRIMITIVE = siblingScalePrimitive("toggle-morph", "--kui-toggle-scale");
+  var RADIO_FILL_PRIMITIVE = siblingScalePrimitive("radio-fill", "--kui-radio-scale");
   var FOCUS_RING_PRIMITIVE = cssPrimitive("focus-ring", ["shadow"], {
     activations: ["focus", "manual"],
     defaultActivation: "focus"
@@ -3914,7 +3972,7 @@ var kuinetic = (() => {
   var STEP_PROGRESS_PRIMITIVE = jsInputPrimitive(
     "step-progress",
     ["state"],
-    { steps: { type: "number", default: "4", cssProperty: "--kui-steps", minimum: 1, integer: true } },
+    { steps: { type: "number", default: "4", cssProperty: "--kui-steps", minimum: 1, maximum: 20, integer: true } },
     deferPrepare(prepareStepProgress)
   );
   function nextSubmitStage(stage) {
@@ -3968,6 +4026,8 @@ var kuinetic = (() => {
     VALIDATE_SHAKE_PRIMITIVE,
     VALIDATE_CHECK_PRIMITIVE,
     STRENGTH_METER_PRIMITIVE,
+    TOGGLE_MORPH_PRIMITIVE,
+    RADIO_FILL_PRIMITIVE,
     RANGE_FILL_PRIMITIVE,
     STEP_PROGRESS_PRIMITIVE,
     SUBMIT_FLOW_PRIMITIVE
@@ -3979,9 +4039,9 @@ var kuinetic = (() => {
     { name: "validate-shake", primitive: "validate-shake", keyframes: "kui-validate-shake" },
     { name: "validate-check", primitive: "validate-check", keyframes: "kui-validate-check" },
     { name: "strength-meter", primitive: "strength-meter" },
-    { name: "toggle-morph", primitive: "native-state" },
+    { name: "toggle-morph", primitive: "toggle-morph" },
     { name: "checkbox-draw", primitive: "native-state" },
-    { name: "radio-fill", primitive: "native-state" },
+    { name: "radio-fill", primitive: "radio-fill" },
     { name: "range-fill", primitive: "range-fill" },
     { name: "submit-to-spinner-to-check", primitive: "submit-flow" },
     { name: "step-progress", primitive: "step-progress" }
@@ -4022,6 +4082,7 @@ var kuinetic = (() => {
     let origin = null;
     let active = false;
     let longPressTimer = null;
+    let longPressFired = false;
     function sampleOf(event) {
       return { x: event.clientX, y: event.clientY, time: deps.now() };
     }
@@ -4038,9 +4099,13 @@ var kuinetic = (() => {
       origin = sampleOf(event);
       samples = [origin];
       active = false;
+      longPressFired = false;
       el.setPointerCapture?.(event.pointerId);
       if (longPressMs > 0) {
-        longPressTimer = deps.setTimer(() => handlers.onLongPress?.(origin), longPressMs);
+        longPressTimer = deps.setTimer(() => {
+          longPressFired = true;
+          handlers.onLongPress?.(origin);
+        }, longPressMs);
       }
     }
     function onMove(event) {
@@ -4068,9 +4133,12 @@ var kuinetic = (() => {
         handlers.onEnd?.(vector, sample);
         const direction = swipeDirection(vector, swipeVelocity);
         if (direction) handlers.onSwipe?.(direction, vector);
+      } else if (longPressFired) {
+        handlers.onEnd?.(vector, sample);
       }
       origin = null;
       active = false;
+      longPressFired = false;
       samples = [];
     }
     el.addEventListener("pointerdown", onDown);
@@ -4116,6 +4184,13 @@ var kuinetic = (() => {
       finite: true,
       minimum: 0.1,
       maximum: 1e3
+    },
+    mass: {
+      type: "number",
+      default: "1",
+      cssProperty: "--kui-mass",
+      finite: true,
+      minimum: 0.1
     }
   };
   function gesturePrimitive(id, channels, parameters, prepare) {
@@ -4136,7 +4211,8 @@ var kuinetic = (() => {
     return {
       ...DEFAULT_SPRING,
       stiffness: params.num("stiffness", DEFAULT_SPRING.stiffness),
-      damping: params.num("damping", DEFAULT_SPRING.damping)
+      damping: params.num("damping", DEFAULT_SPRING.damping),
+      mass: params.num("mass", DEFAULT_SPRING.mass)
     };
   }
   function springDeps(ctx) {
@@ -4150,6 +4226,8 @@ var kuinetic = (() => {
     const bounds = params.num("bounds", 0);
     const returns = params.is("return");
     const inertia = params.is("inertia");
+    const resistance = params.num("resistance", 0.55);
+    const momentum = params.num("momentum", 0.2);
     const offset = { x: 0, y: 0 };
     const deps = springDeps(ctx);
     const runners = {
@@ -4170,11 +4248,11 @@ var kuinetic = (() => {
           el.setAttribute("data-kui-dragging", "true");
         },
         onMove(vector) {
-          write({ x: resist(vector.dx, bounds), y: resist(vector.dy, bounds) });
+          write({ x: resist(vector.dx, bounds, resistance), y: resist(vector.dy, bounds, resistance) });
         },
         onEnd(vector) {
           el.setAttribute("data-kui-dragging", "false");
-          settle(runners, offset, vector, { returns, inertia });
+          settle(runners, offset, vector, { returns, inertia, momentum });
         }
       },
       { axis: params.text("axis", "both") }
@@ -4187,8 +4265,8 @@ var kuinetic = (() => {
       el.removeAttribute("data-kui-dragging");
     };
   }
-  function resist(delta, bounds) {
-    return bounds > 0 ? rubberBand(delta, bounds) : delta;
+  function resist(delta, bounds, tension) {
+    return bounds > 0 ? rubberBand(delta, bounds, tension) : delta;
   }
   function settle(runners, offset, vector, mode) {
     runners.x.set(offset.x, mode.inertia ? vector.vx : 0);
@@ -4198,8 +4276,8 @@ var kuinetic = (() => {
       runners.y.to(0);
       return;
     }
-    runners.x.to(offset.x + vector.vx * 0.2);
-    runners.y.to(offset.y + vector.vy * 0.2);
+    runners.x.to(offset.x + vector.vx * mode.momentum);
+    runners.y.to(offset.y + vector.vy * mode.momentum);
   }
   function prepareSwipeable(el, params) {
     const stop = recognise(
@@ -4286,7 +4364,16 @@ var kuinetic = (() => {
           default: "false",
           cssProperty: "--kui-inertia",
           values: ["true", "false"]
-        }
+        },
+        resistance: {
+          type: "number",
+          default: "0.55",
+          cssProperty: "--kui-resistance",
+          finite: true,
+          minimum: 0,
+          maximum: 1
+        },
+        momentum: { type: "number", default: "0.2", cssProperty: "--kui-momentum", finite: true }
       },
       deferPrepare(prepareDraggable)
     ),

package/dist/types/effects/forms/primitives.d.ts

@@ -1,5 +1,7 @@
 import type { Primitive } from '../../core/types.js';
 export declare const NATIVE_STATE_PRIMITIVE: Primitive;
+export declare const TOGGLE_MORPH_PRIMITIVE: Primitive;
+export declare const RADIO_FILL_PRIMITIVE: Primitive;
 export declare const FOCUS_RING_PRIMITIVE: Primitive;
 export declare const VALIDATE_SHAKE_PRIMITIVE: Primitive;
 export declare const VALIDATE_CHECK_PRIMITIVE: Primitive;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kuinetic",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Declarative web animation from HTML attributes. Native CSS where possible, JS only where necessary.",
   "type": "module",
   "license": "MIT",
@@ -40,7 +40,7 @@
     "lint:deps": "depcruise src --config .dependency-cruiser.cjs",
     "lint:dead": "knip",
     "size": "npm run build:dist && size-limit",
-    "build": "npm run generate:css && esbuild src/index.ts --bundle --format=iife --global-name=kuinetic --outfile=demo/kuinetic.js && esbuild src/css/index.css --bundle --outfile=demo/kuinetic.css && npx @tailwindcss/cli -i demo/tailwind-entry.css -o demo/tailwind.css",
+    "build": "npm run generate:css && esbuild src/index.ts --bundle --format=iife --global-name=kuinetic --outfile=demo/kuinetic.js && esbuild src/css/index.css --bundle --outfile=demo/kuinetic.css && npx @tailwindcss/cli -i demo/tailwind-entry.css -o demo/tailwind.css && node scripts/build-standalone.mjs demo",
     "build:dist": "npm run clean:dist && npm run generate:css && esbuild src/index.ts src/core/index.ts src/effects/index.ts --bundle --format=esm --splitting --outdir=dist/esm --out-extension:.js=.mjs && esbuild src/index.ts --bundle --format=iife --global-name=kuinetic --outfile=dist/kuinetic.js && esbuild src/css/index.css --bundle --outfile=dist/kuinetic.css && tsc -p tsconfig.build.json && node scripts/build-standalone.mjs",
     "verify:standalone": "npm run build:dist && node scripts/verify-standalone.mjs",
     "verify:pack": "npm run build:dist && node scripts/verify-pack.mjs",