@stackvibe-studio/motion 0.1.0 → 0.2.0

package/README.md

@@ -0,0 +1,35 @@
+# @stackvibe-studio/motion
+
+Motion primitives and reveal patterns for premium product experiences.
+
+## Highlights
+
+- 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
+
+```bash
+npm install @stackvibe-studio/motion
+```
+
+## Example
+
+```tsx
+import { FadeInSection, SpotlightCard } from '@stackvibe-studio/motion';
+
+export function Example() {
+  return (
+    <FadeInSection>
+      <SpotlightCard className="p-6">Premium motion without the bloat.</SpotlightCard>
+    </FadeInSection>
+  );
+}
+```
+
+## Related packages
+
+- @stackvibe-studio/ui
+- @stackvibe-studio/three

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/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,39 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  FadeInSection: () => FadeInSection,
   SpotlightCard: () => SpotlightCard,
   TextReveal: () => TextReveal
 });
 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/spotlight-card.tsx
+var import_react2 = require("motion/react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
 function SpotlightCard({
   children,
   glowColor = "#8b5cf6",
@@ -36,8 +62,8 @@ function SpotlightCard({
   className = "",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    import_react.motion.div,
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    import_react2.motion.div,
     {
       ...props,
       whileHover: { scale: 1.01, y: -4 },
@@ -48,8 +74,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_runtime2.jsx)(
+          import_react2.motion.div,
           {
             "aria-hidden": "true",
             className: "pointer-events-none absolute inset-0 opacity-90",
@@ -60,33 +86,34 @@ function SpotlightCard({
             }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "relative z-10", children })
+        /* @__PURE__ */ (0, import_jsx_runtime2.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_react3 = require("motion/react");
+var import_jsx_runtime3 = 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_runtime3.jsx)(
+    import_react3.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_runtime3.jsx)(Component, { ...props, className, children })
     }
   );
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  FadeInSection,
   SpotlightCard,
   TextReveal
 });

package/dist/index.d.ts

@@ -1,2 +1,3 @@
+export * from './components/fade-in';
 export * from './components/spotlight-card';
 export * from './components/text-reveal';

package/dist/index.js

@@ -1,6 +1,32 @@
-// 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/spotlight-card.tsx
+import { motion as motion2 } from "motion/react";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 function SpotlightCard({
   children,
   glowColor = "#8b5cf6",
@@ -10,7 +36,7 @@ function SpotlightCard({
   ...props
 }) {
   return /* @__PURE__ */ jsxs(
-    motion.div,
+    motion2.div,
     {
       ...props,
       whileHover: { scale: 1.01, y: -4 },
@@ -21,8 +47,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__ */ jsx2(
+          motion2.div,
           {
             "aria-hidden": "true",
             className: "pointer-events-none absolute inset-0 opacity-90",
@@ -33,32 +59,33 @@ function SpotlightCard({
             }
           }
         ),
-        /* @__PURE__ */ jsx("div", { className: "relative z-10", children })
+        /* @__PURE__ */ jsx2("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 motion3 } from "motion/react";
+import { jsx as jsx3 } from "react/jsx-runtime";
 function TextReveal({
   as: Component = "h1",
   children,
   className = "",
   ...props
 }) {
-  return /* @__PURE__ */ jsx2(
-    motion2.div,
+  return /* @__PURE__ */ jsx3(
+    motion3.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__ */ jsx3(Component, { ...props, className, children })
     }
   );
 }
 export {
+  FadeInSection,
   SpotlightCard,
   TextReveal
 };

package/package.json

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