@stackvibe-studio/motion 0.2.0 → 0.3.1

package/README.md

@@ -1,35 +1,64 @@
 # @stackvibe-studio/motion
 
-Motion primitives and reveal patterns for premium product experiences.
+> Physics-based motion and animation primitives for StackVibe UI, powered by Framer Motion.
 
-## Highlights
+[![npm version](https://img.shields.io/npm/v/@stackvibe-studio/motion.svg)](https://www.npmjs.com/package/@stackvibe-studio/motion)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 
-- Scroll-aware reveal sections
-- Spotlight cards with soft glow lighting
-- Clean text reveal utilities
-- New in v0.2.0: FadeInSection for storytelling and landing pages
-
-## Install
+## Installation
 
 ```bash
-npm install @stackvibe-studio/motion
+npm install @stackvibe-studio/motion framer-motion
+# or
+pnpm add @stackvibe-studio/motion framer-motion
 ```
 
-## Example
+## Primitives Included
+
+- **`Magnetic`**: Physics-based cursor attraction that pulls buttons or badges toward the pointer.
+- **`TiltCard`**: 3D perspective mouse-tracking tilt card with realistic specular glare reflection.
+- **`NumberTicker`**: Smooth animated counter from 0 to N with cubic easing for metric showcases.
+- **`Marquee`**: Infinite looping ticker for partners, logos, or news with pause-on-hover.
+- **`SpotlightCard`**: Interactive card with dynamic radial cursor spotlight illumination.
+- **`FadeIn`**: Scroll-aware reveal wrapper for onboarding sections and storytelling layouts.
+- **`TextReveal`**: Typography entry animation for titles and headings.
+
+## Usage
 
 ```tsx
-import { FadeInSection, SpotlightCard } from '@stackvibe-studio/motion';
+import { Magnetic, TiltCard, NumberTicker, Marquee } from '@stackvibe-studio/motion';
+import { Button } from '@stackvibe-studio/ui';
 
-export function Example() {
+export function MotionDemo() {
   return (
-    <FadeInSection>
-      <SpotlightCard className="p-6">Premium motion without the bloat.</SpotlightCard>
-    </FadeInSection>
+    <div className="space-y-6">
+      <Magnetic strength={0.4}>
+        <Button size="lg">Magnetic Button</Button>
+      </Magnetic>
+
+      <TiltCard maxTilt={15} glare>
+        <h3>3D Tilt Surface</h3>
+        <p>Interactive mouse perspective.</p>
+      </TiltCard>
+
+      <div className="text-3xl font-bold">
+        <NumberTicker value={25000} prefix="$" suffix=" ARR" />
+      </div>
+
+      <Marquee speed={20}>
+        <span>Item 1</span>
+        <span>Item 2</span>
+        <span>Item 3</span>
+      </Marquee>
+    </div>
   );
 }
 ```
 
-## Related packages
+## Documentation
+
+[https://stackvibe-studio.github.io/stackvibe-ui/docs](https://stackvibe-studio.github.io/stackvibe-ui/docs)
+
+## License
 
-- @stackvibe-studio/ui
-- @stackvibe-studio/three
+MIT © [StackVibe Studio](https://github.com/StackVibe-Studio)

package/dist/components/magnetic.d.ts

@@ -0,0 +1,11 @@
+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, damping, stiffness, mass, disabled, className, }: MagneticProps): import("react").JSX.Element;

package/dist/components/marquee.d.ts

@@ -0,0 +1,9 @@
+import { type ReactNode } from 'react';
+export interface MarqueeProps {
+    children: ReactNode;
+    speed?: number;
+    direction?: 'left' | 'right';
+    pauseOnHover?: boolean;
+    className?: string;
+}
+export declare function Marquee({ children, speed, direction, pauseOnHover, className, }: MarqueeProps): import("react").JSX.Element;

package/dist/components/number-ticker.d.ts

@@ -0,0 +1,8 @@
+export interface NumberTickerProps {
+    value: number;
+    duration?: number;
+    className?: string;
+    prefix?: string;
+    suffix?: string;
+}
+export declare function NumberTicker({ value, duration, className, prefix, suffix, }: NumberTickerProps): import("react").JSX.Element;

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

@@ -0,0 +1,13 @@
+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, perspective, scale, glare, glareOpacity, glareColor, speed, className, }: TiltCardProps): import("react").JSX.Element;

package/dist/index.cjs

@@ -22,8 +22,12 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   FadeInSection: () => FadeInSection,
+  Magnetic: () => Magnetic,
+  Marquee: () => Marquee,
+  NumberTicker: () => NumberTicker,
   SpotlightCard: () => SpotlightCard,
-  TextReveal: () => TextReveal
+  TextReveal: () => TextReveal,
+  TiltCard: () => TiltCard
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -51,9 +55,136 @@ function FadeInSection({
   );
 }
 
-// src/components/spotlight-card.tsx
+// src/components/magnetic.tsx
 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,
+  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, stiffness, mass };
+  const springX = (0, import_react2.useSpring)(x, springConfig);
+  const springY = (0, import_react2.useSpring)(y, springConfig);
+  const handleMouseMove = (e) => {
+    if (disabled || !ref.current) return;
+    const { clientX, clientY } = e;
+    const { left, top, width, height } = ref.current.getBoundingClientRect();
+    const middleX = clientX - (left + width / 2);
+    const middleY = clientY - (top + height / 2);
+    x.set(middleX * strength);
+    y.set(middleY * strength);
+  };
+  const handleMouseLeave = () => {
+    x.set(0);
+    y.set(0);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_react2.motion.div,
+    {
+      ref,
+      onMouseMove: handleMouseMove,
+      onMouseLeave: handleMouseLeave,
+      style: { x: springX, y: springY },
+      className: ["inline-block", className].join(" "),
+      children
+    }
+  );
+}
+
+// src/components/marquee.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function Marquee({
+  children,
+  speed = 25,
+  direction = "left",
+  pauseOnHover = true,
+  className = ""
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
+    {
+      className: [
+        "group flex overflow-hidden select-none [mask-image:linear-gradient(to_right,transparent,white_10%,white_90%,transparent)]",
+        className
+      ].join(" "),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "div",
+          {
+            className: [
+              "flex min-w-full shrink-0 items-center justify-around gap-8",
+              direction === "left" ? "animate-marquee" : "animate-marquee-reverse",
+              pauseOnHover ? "group-hover:[animation-play-state:paused]" : ""
+            ].join(" "),
+            style: { animationDuration: `${speed}s` },
+            children
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "div",
+          {
+            "aria-hidden": "true",
+            className: [
+              "flex min-w-full shrink-0 items-center justify-around gap-8",
+              direction === "left" ? "animate-marquee" : "animate-marquee-reverse",
+              pauseOnHover ? "group-hover:[animation-play-state:paused]" : ""
+            ].join(" "),
+            style: { animationDuration: `${speed}s` },
+            children
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/number-ticker.tsx
+var import_react4 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function NumberTicker({
+  value,
+  duration = 1500,
+  className = "",
+  prefix = "",
+  suffix = ""
+}) {
+  const [current, setCurrent] = (0, import_react4.useState)(0);
+  const startTimeRef = (0, import_react4.useRef)(null);
+  (0, import_react4.useEffect)(() => {
+    let animationFrame;
+    const animate = (timestamp) => {
+      if (!startTimeRef.current) startTimeRef.current = timestamp;
+      const progress = Math.min((timestamp - startTimeRef.current) / duration, 1);
+      const easeOut = 1 - Math.pow(1 - progress, 3);
+      setCurrent(Math.floor(easeOut * value));
+      if (progress < 1) {
+        animationFrame = requestAnimationFrame(animate);
+      } else {
+        setCurrent(value);
+      }
+    };
+    animationFrame = requestAnimationFrame(animate);
+    return () => cancelAnimationFrame(animationFrame);
+  }, [value, duration]);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: ["tabular-nums font-mono", className].join(" "), children: [
+    prefix,
+    current.toLocaleString(),
+    suffix
+  ] });
+}
+
+// src/components/spotlight-card.tsx
+var import_react5 = require("motion/react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 function SpotlightCard({
   children,
   glowColor = "#8b5cf6",
@@ -62,8 +193,8 @@ function SpotlightCard({
   className = "",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-    import_react2.motion.div,
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    import_react5.motion.div,
     {
       ...props,
       whileHover: { scale: 1.01, y: -4 },
@@ -74,8 +205,8 @@ function SpotlightCard({
         background: "linear-gradient(135deg, rgba(15,23,42,0.78), rgba(15,23,42,0.42))"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-          import_react2.motion.div,
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          import_react5.motion.div,
           {
             "aria-hidden": "true",
             className: "pointer-events-none absolute inset-0 opacity-90",
@@ -86,34 +217,122 @@ function SpotlightCard({
             }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "relative z-10", children })
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "relative z-10", children })
       ]
     }
   );
 }
 
 // src/components/text-reveal.tsx
-var import_react3 = require("motion/react");
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_react6 = require("motion/react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function TextReveal({
   as: Component = "h1",
   children,
   className = "",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    import_react3.motion.div,
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    import_react6.motion.div,
     {
       initial: { opacity: 0, y: 18 },
       animate: { opacity: 1, y: 0 },
       transition: { duration: 0.5, ease: "easeOut" },
-      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Component, { ...props, className, children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Component, { ...props, className, children })
+    }
+  );
+}
+
+// src/components/tilt-card.tsx
+var import_react7 = require("react");
+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;
+    const rect = cardRef.current.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const y = e.clientY - rect.top;
+    const centerX = rect.width / 2;
+    const centerY = rect.height / 2;
+    const rotX = (y - centerY) / centerY * -maxTilt;
+    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: glareOpacity
+      });
+    }
+  };
+  const handleMouseLeave = () => {
+    setRotateX(0);
+    setRotateY(0);
+    setCurrentScale(1);
+    setGlarePos((prev) => ({ ...prev, opacity: 0 }));
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "div",
+    {
+      style: { perspective: `${perspective}px` },
+      className: "inline-block w-full",
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+        "div",
+        {
+          ref: cardRef,
+          onMouseMove: handleMouseMove,
+          onMouseLeave: handleMouseLeave,
+          style: {
+            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 shadow-2xl backdrop-blur-md",
+            className
+          ].join(" "),
+          children: [
+            glare && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              "div",
+              {
+                className: "pointer-events-none absolute inset-0 transition-opacity duration-300",
+                style: {
+                  opacity: glarePos.opacity,
+                  background: `radial-gradient(circle at ${glarePos.x}% ${glarePos.y}%, ${glareColor}, transparent 60%)`
+                }
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { transform: "translateZ(30px)" }, children })
+          ]
+        }
+      )
     }
   );
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   FadeInSection,
+  Magnetic,
+  Marquee,
+  NumberTicker,
   SpotlightCard,
-  TextReveal
+  TextReveal,
+  TiltCard
 });

package/dist/index.d.ts

@@ -1,3 +1,7 @@
 export * from './components/fade-in';
+export * from './components/magnetic';
+export * from './components/marquee';
+export * from './components/number-ticker';
 export * from './components/spotlight-card';
 export * from './components/text-reveal';
+export * from './components/tilt-card';

package/dist/index.js

@@ -24,9 +24,136 @@ function FadeInSection({
   );
 }
 
+// src/components/magnetic.tsx
+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,
+  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, stiffness, mass };
+  const springX = useSpring(x, springConfig);
+  const springY = useSpring(y, springConfig);
+  const handleMouseMove = (e) => {
+    if (disabled || !ref.current) return;
+    const { clientX, clientY } = e;
+    const { left, top, width, height } = ref.current.getBoundingClientRect();
+    const middleX = clientX - (left + width / 2);
+    const middleY = clientY - (top + height / 2);
+    x.set(middleX * strength);
+    y.set(middleY * strength);
+  };
+  const handleMouseLeave = () => {
+    x.set(0);
+    y.set(0);
+  };
+  return /* @__PURE__ */ jsx2(
+    motion2.div,
+    {
+      ref,
+      onMouseMove: handleMouseMove,
+      onMouseLeave: handleMouseLeave,
+      style: { x: springX, y: springY },
+      className: ["inline-block", className].join(" "),
+      children
+    }
+  );
+}
+
+// src/components/marquee.tsx
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+function Marquee({
+  children,
+  speed = 25,
+  direction = "left",
+  pauseOnHover = true,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: [
+        "group flex overflow-hidden select-none [mask-image:linear-gradient(to_right,transparent,white_10%,white_90%,transparent)]",
+        className
+      ].join(" "),
+      children: [
+        /* @__PURE__ */ jsx3(
+          "div",
+          {
+            className: [
+              "flex min-w-full shrink-0 items-center justify-around gap-8",
+              direction === "left" ? "animate-marquee" : "animate-marquee-reverse",
+              pauseOnHover ? "group-hover:[animation-play-state:paused]" : ""
+            ].join(" "),
+            style: { animationDuration: `${speed}s` },
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          "div",
+          {
+            "aria-hidden": "true",
+            className: [
+              "flex min-w-full shrink-0 items-center justify-around gap-8",
+              direction === "left" ? "animate-marquee" : "animate-marquee-reverse",
+              pauseOnHover ? "group-hover:[animation-play-state:paused]" : ""
+            ].join(" "),
+            style: { animationDuration: `${speed}s` },
+            children
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/number-ticker.tsx
+import { useEffect, useRef as useRef2, useState } from "react";
+import { jsxs as jsxs2 } from "react/jsx-runtime";
+function NumberTicker({
+  value,
+  duration = 1500,
+  className = "",
+  prefix = "",
+  suffix = ""
+}) {
+  const [current, setCurrent] = useState(0);
+  const startTimeRef = useRef2(null);
+  useEffect(() => {
+    let animationFrame;
+    const animate = (timestamp) => {
+      if (!startTimeRef.current) startTimeRef.current = timestamp;
+      const progress = Math.min((timestamp - startTimeRef.current) / duration, 1);
+      const easeOut = 1 - Math.pow(1 - progress, 3);
+      setCurrent(Math.floor(easeOut * value));
+      if (progress < 1) {
+        animationFrame = requestAnimationFrame(animate);
+      } else {
+        setCurrent(value);
+      }
+    };
+    animationFrame = requestAnimationFrame(animate);
+    return () => cancelAnimationFrame(animationFrame);
+  }, [value, duration]);
+  return /* @__PURE__ */ jsxs2("span", { className: ["tabular-nums font-mono", className].join(" "), children: [
+    prefix,
+    current.toLocaleString(),
+    suffix
+  ] });
+}
+
 // src/components/spotlight-card.tsx
-import { motion as motion2 } from "motion/react";
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+import { motion as motion3 } from "motion/react";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 function SpotlightCard({
   children,
   glowColor = "#8b5cf6",
@@ -35,8 +162,8 @@ function SpotlightCard({
   className = "",
   ...props
 }) {
-  return /* @__PURE__ */ jsxs(
-    motion2.div,
+  return /* @__PURE__ */ jsxs3(
+    motion3.div,
     {
       ...props,
       whileHover: { scale: 1.01, y: -4 },
@@ -47,8 +174,8 @@ function SpotlightCard({
         background: "linear-gradient(135deg, rgba(15,23,42,0.78), rgba(15,23,42,0.42))"
       },
       children: [
-        /* @__PURE__ */ jsx2(
-          motion2.div,
+        /* @__PURE__ */ jsx4(
+          motion3.div,
           {
             "aria-hidden": "true",
             className: "pointer-events-none absolute inset-0 opacity-90",
@@ -59,33 +186,121 @@ function SpotlightCard({
             }
           }
         ),
-        /* @__PURE__ */ jsx2("div", { className: "relative z-10", children })
+        /* @__PURE__ */ jsx4("div", { className: "relative z-10", children })
       ]
     }
   );
 }
 
 // src/components/text-reveal.tsx
-import { motion as motion3 } from "motion/react";
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { motion as motion4 } from "motion/react";
+import { jsx as jsx5 } from "react/jsx-runtime";
 function TextReveal({
   as: Component = "h1",
   children,
   className = "",
   ...props
 }) {
-  return /* @__PURE__ */ jsx3(
-    motion3.div,
+  return /* @__PURE__ */ jsx5(
+    motion4.div,
     {
       initial: { opacity: 0, y: 18 },
       animate: { opacity: 1, y: 0 },
       transition: { duration: 0.5, ease: "easeOut" },
-      children: /* @__PURE__ */ jsx3(Component, { ...props, className, children })
+      children: /* @__PURE__ */ jsx5(Component, { ...props, className, children })
+    }
+  );
+}
+
+// src/components/tilt-card.tsx
+import { useRef as useRef3, useState as useState2 } from "react";
+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;
+    const rect = cardRef.current.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const y = e.clientY - rect.top;
+    const centerX = rect.width / 2;
+    const centerY = rect.height / 2;
+    const rotX = (y - centerY) / centerY * -maxTilt;
+    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: glareOpacity
+      });
+    }
+  };
+  const handleMouseLeave = () => {
+    setRotateX(0);
+    setRotateY(0);
+    setCurrentScale(1);
+    setGlarePos((prev) => ({ ...prev, opacity: 0 }));
+  };
+  return /* @__PURE__ */ jsx6(
+    "div",
+    {
+      style: { perspective: `${perspective}px` },
+      className: "inline-block w-full",
+      children: /* @__PURE__ */ jsxs4(
+        "div",
+        {
+          ref: cardRef,
+          onMouseMove: handleMouseMove,
+          onMouseLeave: handleMouseLeave,
+          style: {
+            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 shadow-2xl backdrop-blur-md",
+            className
+          ].join(" "),
+          children: [
+            glare && /* @__PURE__ */ jsx6(
+              "div",
+              {
+                className: "pointer-events-none absolute inset-0 transition-opacity duration-300",
+                style: {
+                  opacity: glarePos.opacity,
+                  background: `radial-gradient(circle at ${glarePos.x}% ${glarePos.y}%, ${glareColor}, transparent 60%)`
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx6("div", { style: { transform: "translateZ(30px)" }, children })
+          ]
+        }
+      )
     }
   );
 }
 export {
   FadeInSection,
+  Magnetic,
+  Marquee,
+  NumberTicker,
   SpotlightCard,
-  TextReveal
+  TextReveal,
+  TiltCard
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stackvibe-studio/motion",
-  "version": "0.2.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": {