@stackvibe-studio/motion 0.3.0 → 0.3.1

package/dist/components/magnetic.d.ts

@@ -2,6 +2,10 @@ import { type ReactNode } from 'react';
 export interface MagneticProps {
     children: ReactNode;
     strength?: number;
+    damping?: number;
+    stiffness?: number;
+    mass?: number;
+    disabled?: boolean;
     className?: string;
 }
-export declare function Magnetic({ children, strength, className }: MagneticProps): import("react").JSX.Element;
+export declare function Magnetic({ children, strength, damping, stiffness, mass, disabled, className, }: MagneticProps): import("react").JSX.Element;

package/dist/components/tilt-card.d.ts

@@ -2,7 +2,12 @@ import { type ReactNode } from 'react';
 export interface TiltCardProps {
     children: ReactNode;
     maxTilt?: number;
+    perspective?: number;
+    scale?: number;
     glare?: boolean;
+    glareOpacity?: number;
+    glareColor?: string;
+    speed?: number;
     className?: string;
 }
-export declare function TiltCard({ children, maxTilt, glare, className, }: TiltCardProps): import("react").JSX.Element;
+export declare function TiltCard({ children, maxTilt, perspective, scale, glare, glareOpacity, glareColor, speed, className, }: TiltCardProps): import("react").JSX.Element;

package/dist/index.cjs

@@ -59,15 +59,23 @@ function FadeInSection({
 var import_react2 = require("motion/react");
 var import_react3 = require("react");
 var import_jsx_runtime2 = require("react/jsx-runtime");
-function Magnetic({ children, strength = 0.35, className = "" }) {
+function Magnetic({
+  children,
+  strength = 0.35,
+  damping = 15,
+  stiffness = 150,
+  mass = 0.1,
+  disabled = false,
+  className = ""
+}) {
   const ref = (0, import_react3.useRef)(null);
   const x = (0, import_react2.useMotionValue)(0);
   const y = (0, import_react2.useMotionValue)(0);
-  const springConfig = { damping: 15, stiffness: 150, mass: 0.1 };
+  const springConfig = { damping, stiffness, mass };
   const springX = (0, import_react2.useSpring)(x, springConfig);
   const springY = (0, import_react2.useSpring)(y, springConfig);
   const handleMouseMove = (e) => {
-    if (!ref.current) return;
+    if (disabled || !ref.current) return;
     const { clientX, clientY } = e;
     const { left, top, width, height } = ref.current.getBoundingClientRect();
     const middleX = clientX - (left + width / 2);
@@ -86,7 +94,7 @@ function Magnetic({ children, strength = 0.35, className = "" }) {
       onMouseMove: handleMouseMove,
       onMouseLeave: handleMouseLeave,
       style: { x: springX, y: springY },
-      className: ["inline-block cursor-pointer", className].join(" "),
+      className: ["inline-block", className].join(" "),
       children
     }
   );
@@ -241,12 +249,18 @@ var import_jsx_runtime7 = require("react/jsx-runtime");
 function TiltCard({
   children,
   maxTilt = 15,
+  perspective = 1e3,
+  scale = 1.02,
   glare = true,
+  glareOpacity = 0.25,
+  glareColor = "rgba(255, 255, 255, 0.4)",
+  speed = 300,
   className = ""
 }) {
   const cardRef = (0, import_react7.useRef)(null);
   const [rotateX, setRotateX] = (0, import_react7.useState)(0);
   const [rotateY, setRotateY] = (0, import_react7.useState)(0);
+  const [currentScale, setCurrentScale] = (0, import_react7.useState)(1);
   const [glarePos, setGlarePos] = (0, import_react7.useState)({ x: 50, y: 50, opacity: 0 });
   const handleMouseMove = (e) => {
     if (!cardRef.current) return;
@@ -259,23 +273,25 @@ function TiltCard({
     const rotY = (x - centerX) / centerX * maxTilt;
     setRotateX(rotX);
     setRotateY(rotY);
+    setCurrentScale(scale);
     if (glare) {
       setGlarePos({
         x: x / rect.width * 100,
         y: y / rect.height * 100,
-        opacity: 0.25
+        opacity: glareOpacity
       });
     }
   };
   const handleMouseLeave = () => {
     setRotateX(0);
     setRotateY(0);
+    setCurrentScale(1);
     setGlarePos((prev) => ({ ...prev, opacity: 0 }));
   };
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "div",
     {
-      style: { perspective: "1000px" },
+      style: { perspective: `${perspective}px` },
       className: "inline-block w-full",
       children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
         "div",
@@ -284,26 +300,26 @@ function TiltCard({
           onMouseMove: handleMouseMove,
           onMouseLeave: handleMouseLeave,
           style: {
-            transform: `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`,
-            transition: "transform 0.15s ease-out",
+            transform: `rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(${currentScale}, ${currentScale}, ${currentScale})`,
+            transition: `transform ${speed}ms cubic-bezier(0.03, 0.98, 0.52, 0.99)`,
             transformStyle: "preserve-3d"
           },
           className: [
-            "relative overflow-hidden rounded-3xl border border-white/10 bg-slate-900/80 p-6 backdrop-blur-xl",
+            "relative overflow-hidden rounded-3xl border border-white/10 bg-slate-900/80 p-6 shadow-2xl backdrop-blur-md",
             className
           ].join(" "),
           children: [
             glare && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
               "div",
               {
-                className: "pointer-events-none absolute -inset-px transition-opacity duration-300",
+                className: "pointer-events-none absolute inset-0 transition-opacity duration-300",
                 style: {
                   opacity: glarePos.opacity,
-                  background: `radial-gradient(circle at ${glarePos.x}% ${glarePos.y}%, rgba(255,255,255,0.4), transparent 60%)`
+                  background: `radial-gradient(circle at ${glarePos.x}% ${glarePos.y}%, ${glareColor}, transparent 60%)`
                 }
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { transform: "translateZ(20px)" }, children })
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { transform: "translateZ(30px)" }, children })
           ]
         }
       )

package/dist/index.js

@@ -28,15 +28,23 @@ function FadeInSection({
 import { motion as motion2, useMotionValue, useSpring } from "motion/react";
 import { useRef } from "react";
 import { jsx as jsx2 } from "react/jsx-runtime";
-function Magnetic({ children, strength = 0.35, className = "" }) {
+function Magnetic({
+  children,
+  strength = 0.35,
+  damping = 15,
+  stiffness = 150,
+  mass = 0.1,
+  disabled = false,
+  className = ""
+}) {
   const ref = useRef(null);
   const x = useMotionValue(0);
   const y = useMotionValue(0);
-  const springConfig = { damping: 15, stiffness: 150, mass: 0.1 };
+  const springConfig = { damping, stiffness, mass };
   const springX = useSpring(x, springConfig);
   const springY = useSpring(y, springConfig);
   const handleMouseMove = (e) => {
-    if (!ref.current) return;
+    if (disabled || !ref.current) return;
     const { clientX, clientY } = e;
     const { left, top, width, height } = ref.current.getBoundingClientRect();
     const middleX = clientX - (left + width / 2);
@@ -55,7 +63,7 @@ function Magnetic({ children, strength = 0.35, className = "" }) {
       onMouseMove: handleMouseMove,
       onMouseLeave: handleMouseLeave,
       style: { x: springX, y: springY },
-      className: ["inline-block cursor-pointer", className].join(" "),
+      className: ["inline-block", className].join(" "),
       children
     }
   );
@@ -210,12 +218,18 @@ import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 function TiltCard({
   children,
   maxTilt = 15,
+  perspective = 1e3,
+  scale = 1.02,
   glare = true,
+  glareOpacity = 0.25,
+  glareColor = "rgba(255, 255, 255, 0.4)",
+  speed = 300,
   className = ""
 }) {
   const cardRef = useRef3(null);
   const [rotateX, setRotateX] = useState2(0);
   const [rotateY, setRotateY] = useState2(0);
+  const [currentScale, setCurrentScale] = useState2(1);
   const [glarePos, setGlarePos] = useState2({ x: 50, y: 50, opacity: 0 });
   const handleMouseMove = (e) => {
     if (!cardRef.current) return;
@@ -228,23 +242,25 @@ function TiltCard({
     const rotY = (x - centerX) / centerX * maxTilt;
     setRotateX(rotX);
     setRotateY(rotY);
+    setCurrentScale(scale);
     if (glare) {
       setGlarePos({
         x: x / rect.width * 100,
         y: y / rect.height * 100,
-        opacity: 0.25
+        opacity: glareOpacity
       });
     }
   };
   const handleMouseLeave = () => {
     setRotateX(0);
     setRotateY(0);
+    setCurrentScale(1);
     setGlarePos((prev) => ({ ...prev, opacity: 0 }));
   };
   return /* @__PURE__ */ jsx6(
     "div",
     {
-      style: { perspective: "1000px" },
+      style: { perspective: `${perspective}px` },
       className: "inline-block w-full",
       children: /* @__PURE__ */ jsxs4(
         "div",
@@ -253,26 +269,26 @@ function TiltCard({
           onMouseMove: handleMouseMove,
           onMouseLeave: handleMouseLeave,
           style: {
-            transform: `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`,
-            transition: "transform 0.15s ease-out",
+            transform: `rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(${currentScale}, ${currentScale}, ${currentScale})`,
+            transition: `transform ${speed}ms cubic-bezier(0.03, 0.98, 0.52, 0.99)`,
             transformStyle: "preserve-3d"
           },
           className: [
-            "relative overflow-hidden rounded-3xl border border-white/10 bg-slate-900/80 p-6 backdrop-blur-xl",
+            "relative overflow-hidden rounded-3xl border border-white/10 bg-slate-900/80 p-6 shadow-2xl backdrop-blur-md",
             className
           ].join(" "),
           children: [
             glare && /* @__PURE__ */ jsx6(
               "div",
               {
-                className: "pointer-events-none absolute -inset-px transition-opacity duration-300",
+                className: "pointer-events-none absolute inset-0 transition-opacity duration-300",
                 style: {
                   opacity: glarePos.opacity,
-                  background: `radial-gradient(circle at ${glarePos.x}% ${glarePos.y}%, rgba(255,255,255,0.4), transparent 60%)`
+                  background: `radial-gradient(circle at ${glarePos.x}% ${glarePos.y}%, ${glareColor}, transparent 60%)`
                 }
               }
             ),
-            /* @__PURE__ */ jsx6("div", { style: { transform: "translateZ(20px)" }, children })
+            /* @__PURE__ */ jsx6("div", { style: { transform: "translateZ(30px)" }, children })
           ]
         }
       )

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stackvibe-studio/motion",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "type": "module",
   "description": "Motion primitives for StackVibe UI.",
   "repository": {
@@ -12,6 +12,24 @@
     "url": "https://github.com/StackVibe-Studio/stackvibe-ui/issues"
   },
   "license": "MIT",
+  "keywords": [
+    "react",
+    "react-19",
+    "motion",
+    "framer-motion",
+    "spring-physics",
+    "magnetic",
+    "tilt",
+    "3d-tilt",
+    "ticker",
+    "number-ticker",
+    "marquee",
+    "spotlight",
+    "text-reveal",
+    "animation",
+    "micro-interactions",
+    "stackvibe"
+  ],
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {