@stackvibe-studio/motion 0.1.0 → 0.3.0

package/README.md

@@ -0,0 +1,64 @@
+# @stackvibe-studio/motion
+
+> Physics-based motion and animation primitives for StackVibe UI, powered by Framer Motion.
+
+[![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)
+
+## Installation
+
+```bash
+npm install @stackvibe-studio/motion framer-motion
+# or
+pnpm add @stackvibe-studio/motion framer-motion
+```
+
+## 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 { Magnetic, TiltCard, NumberTicker, Marquee } from '@stackvibe-studio/motion';
+import { Button } from '@stackvibe-studio/ui';
+
+export function MotionDemo() {
+  return (
+    <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>
+  );
+}
+```
+
+## Documentation
+
+[https://stackvibe-studio.github.io/stackvibe-ui/docs](https://stackvibe-studio.github.io/stackvibe-ui/docs)
+
+## License
+
+MIT © [StackVibe Studio](https://github.com/StackVibe-Studio)

package/dist/components/fade-in.d.ts

@@ -0,0 +1,8 @@
+import type { HTMLMotionProps } from 'motion/react';
+import type { ReactNode } from 'react';
+export interface FadeInSectionProps extends HTMLMotionProps<'section'> {
+    children: ReactNode;
+    delay?: number;
+    y?: number;
+}
+export declare function FadeInSection({ children, delay, y, className, ...props }: FadeInSectionProps): import("react").JSX.Element;

package/dist/components/magnetic.d.ts

@@ -0,0 +1,7 @@
+import { type ReactNode } from 'react';
+export interface MagneticProps {
+    children: ReactNode;
+    strength?: number;
+    className?: string;
+}
+export declare function Magnetic({ children, strength, 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,8 @@
+import { type ReactNode } from 'react';
+export interface TiltCardProps {
+    children: ReactNode;
+    maxTilt?: number;
+    glare?: boolean;
+    className?: string;
+}
+export declare function TiltCard({ children, maxTilt, glare, className, }: TiltCardProps): import("react").JSX.Element;

package/dist/index.cjs

@@ -1,4 +1,5 @@
 "use strict";
+"use client";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -20,14 +21,162 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 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);
 
-// src/components/spotlight-card.tsx
+// src/components/fade-in.tsx
 var import_react = require("motion/react");
 var import_jsx_runtime = require("react/jsx-runtime");
+function FadeInSection({
+  children,
+  delay = 0,
+  y = 24,
+  className = "",
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_react.motion.section,
+    {
+      ...props,
+      initial: { opacity: 0, y },
+      whileInView: { opacity: 1, y: 0 },
+      viewport: { once: true, amount: 0.2 },
+      transition: { duration: 0.5, delay, ease: "easeOut" },
+      className,
+      children
+    }
+  );
+}
+
+// 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, 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 springX = (0, import_react2.useSpring)(x, springConfig);
+  const springY = (0, import_react2.useSpring)(y, springConfig);
+  const handleMouseMove = (e) => {
+    if (!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 cursor-pointer", 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",
@@ -36,8 +185,8 @@ function SpotlightCard({
   className = "",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    import_react.motion.div,
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    import_react5.motion.div,
     {
       ...props,
       whileHover: { scale: 1.01, y: -4 },
@@ -48,8 +197,8 @@ function SpotlightCard({
         background: "linear-gradient(135deg, rgba(15,23,42,0.78), rgba(15,23,42,0.42))"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_react.motion.div,
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          import_react5.motion.div,
           {
             "aria-hidden": "true",
             className: "pointer-events-none absolute inset-0 opacity-90",
@@ -60,33 +209,114 @@ function SpotlightCard({
             }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime.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_react2 = require("motion/react");
-var import_jsx_runtime2 = 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_runtime2.jsx)(
-    import_react2.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_runtime2.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,
+  glare = true,
+  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 [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);
+    if (glare) {
+      setGlarePos({
+        x: x / rect.width * 100,
+        y: y / rect.height * 100,
+        opacity: 0.25
+      });
+    }
+  };
+  const handleMouseLeave = () => {
+    setRotateX(0);
+    setRotateY(0);
+    setGlarePos((prev) => ({ ...prev, opacity: 0 }));
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "div",
+    {
+      style: { perspective: "1000px" },
+      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)`,
+            transition: "transform 0.15s ease-out",
+            transformStyle: "preserve-3d"
+          },
+          className: [
+            "relative overflow-hidden rounded-3xl border border-white/10 bg-slate-900/80 p-6 backdrop-blur-xl",
+            className
+          ].join(" "),
+          children: [
+            glare && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              "div",
+              {
+                className: "pointer-events-none absolute -inset-px 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%)`
+                }
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { transform: "translateZ(20px)" }, 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,2 +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

@@ -1,6 +1,151 @@
-// src/components/spotlight-card.tsx
+"use client";
+
+// src/components/fade-in.tsx
 import { motion } from "motion/react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
+function FadeInSection({
+  children,
+  delay = 0,
+  y = 24,
+  className = "",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    motion.section,
+    {
+      ...props,
+      initial: { opacity: 0, y },
+      whileInView: { opacity: 1, y: 0 },
+      viewport: { once: true, amount: 0.2 },
+      transition: { duration: 0.5, delay, ease: "easeOut" },
+      className,
+      children
+    }
+  );
+}
+
+// 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, className = "" }) {
+  const ref = useRef(null);
+  const x = useMotionValue(0);
+  const y = useMotionValue(0);
+  const springConfig = { damping: 15, stiffness: 150, mass: 0.1 };
+  const springX = useSpring(x, springConfig);
+  const springY = useSpring(y, springConfig);
+  const handleMouseMove = (e) => {
+    if (!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 cursor-pointer", 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 motion3 } from "motion/react";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 function SpotlightCard({
   children,
   glowColor = "#8b5cf6",
@@ -9,8 +154,8 @@ function SpotlightCard({
   className = "",
   ...props
 }) {
-  return /* @__PURE__ */ jsxs(
-    motion.div,
+  return /* @__PURE__ */ jsxs3(
+    motion3.div,
     {
       ...props,
       whileHover: { scale: 1.01, y: -4 },
@@ -21,8 +166,8 @@ function SpotlightCard({
         background: "linear-gradient(135deg, rgba(15,23,42,0.78), rgba(15,23,42,0.42))"
       },
       children: [
-        /* @__PURE__ */ jsx(
-          motion.div,
+        /* @__PURE__ */ jsx4(
+          motion3.div,
           {
             "aria-hidden": "true",
             className: "pointer-events-none absolute inset-0 opacity-90",
@@ -33,32 +178,113 @@ function SpotlightCard({
             }
           }
         ),
-        /* @__PURE__ */ jsx("div", { className: "relative z-10", children })
+        /* @__PURE__ */ jsx4("div", { className: "relative z-10", children })
       ]
     }
   );
 }
 
 // src/components/text-reveal.tsx
-import { motion as motion2 } from "motion/react";
-import { jsx as jsx2 } 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__ */ jsx2(
-    motion2.div,
+  return /* @__PURE__ */ jsx5(
+    motion4.div,
     {
       initial: { opacity: 0, y: 18 },
       animate: { opacity: 1, y: 0 },
       transition: { duration: 0.5, ease: "easeOut" },
-      children: /* @__PURE__ */ jsx2(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,
+  glare = true,
+  className = ""
+}) {
+  const cardRef = useRef3(null);
+  const [rotateX, setRotateX] = useState2(0);
+  const [rotateY, setRotateY] = useState2(0);
+  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);
+    if (glare) {
+      setGlarePos({
+        x: x / rect.width * 100,
+        y: y / rect.height * 100,
+        opacity: 0.25
+      });
+    }
+  };
+  const handleMouseLeave = () => {
+    setRotateX(0);
+    setRotateY(0);
+    setGlarePos((prev) => ({ ...prev, opacity: 0 }));
+  };
+  return /* @__PURE__ */ jsx6(
+    "div",
+    {
+      style: { perspective: "1000px" },
+      className: "inline-block w-full",
+      children: /* @__PURE__ */ jsxs4(
+        "div",
+        {
+          ref: cardRef,
+          onMouseMove: handleMouseMove,
+          onMouseLeave: handleMouseLeave,
+          style: {
+            transform: `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`,
+            transition: "transform 0.15s ease-out",
+            transformStyle: "preserve-3d"
+          },
+          className: [
+            "relative overflow-hidden rounded-3xl border border-white/10 bg-slate-900/80 p-6 backdrop-blur-xl",
+            className
+          ].join(" "),
+          children: [
+            glare && /* @__PURE__ */ jsx6(
+              "div",
+              {
+                className: "pointer-events-none absolute -inset-px 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%)`
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx6("div", { style: { transform: "translateZ(20px)" }, children })
+          ]
+        }
+      )
     }
   );
 }
 export {
+  FadeInSection,
+  Magnetic,
+  Marquee,
+  NumberTicker,
   SpotlightCard,
-  TextReveal
+  TextReveal,
+  TiltCard
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stackvibe-studio/motion",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "type": "module",
   "description": "Motion primitives for StackVibe UI.",
   "repository": {