@stackvibe-studio/motion 0.0.0-stage → 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 StackVibe
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,35 @@
-# Temporary Holding Version
+# @stackvibe-studio/motion
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+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/components/spotlight-card.d.ts

@@ -0,0 +1,8 @@
+import type { HTMLMotionProps } from 'motion/react';
+import type { ReactNode } from 'react';
+export interface SpotlightCardProps extends HTMLMotionProps<'div'> {
+    children: ReactNode;
+    glowColor?: string;
+    intensity?: number;
+}
+export declare function SpotlightCard({ children, glowColor, intensity, style, className, ...props }: SpotlightCardProps): import("react").JSX.Element;

package/dist/components/text-reveal.d.ts

@@ -0,0 +1,5 @@
+import type { HTMLAttributes } from 'react';
+export interface TextRevealProps extends HTMLAttributes<HTMLHeadingElement> {
+    as?: 'h1' | 'h2' | 'h3' | 'p' | 'span';
+}
+export declare function TextReveal({ as: Component, children, className, ...props }: TextRevealProps): import("react").JSX.Element;

package/dist/index.cjs

@@ -0,0 +1,119 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  FadeInSection: () => FadeInSection,
+  SpotlightCard: () => SpotlightCard,
+  TextReveal: () => TextReveal
+});
+module.exports = __toCommonJS(index_exports);
+
+// 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",
+  intensity = 0.6,
+  style,
+  className = "",
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    import_react2.motion.div,
+    {
+      ...props,
+      whileHover: { scale: 1.01, y: -4 },
+      transition: { type: "spring", stiffness: 180, damping: 18 },
+      className: ["relative overflow-hidden rounded-3xl", className].join(" "),
+      style: {
+        ...style,
+        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,
+          {
+            "aria-hidden": "true",
+            className: "pointer-events-none absolute inset-0 opacity-90",
+            style: {
+              background: `radial-gradient(circle at var(--pointer-x, 50%) var(--pointer-y, 50%), ${glowColor}${Math.round(
+                intensity * 255
+              ).toString(16).padStart(2, "0")}, rgba(255,255,255,0) 38%)`
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.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");
+function TextReveal({
+  as: Component = "h1",
+  children,
+  className = "",
+  ...props
+}) {
+  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_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

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

package/dist/index.js

@@ -0,0 +1,91 @@
+"use client";
+
+// src/components/fade-in.tsx
+import { motion } from "motion/react";
+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",
+  intensity = 0.6,
+  style,
+  className = "",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    motion2.div,
+    {
+      ...props,
+      whileHover: { scale: 1.01, y: -4 },
+      transition: { type: "spring", stiffness: 180, damping: 18 },
+      className: ["relative overflow-hidden rounded-3xl", className].join(" "),
+      style: {
+        ...style,
+        background: "linear-gradient(135deg, rgba(15,23,42,0.78), rgba(15,23,42,0.42))"
+      },
+      children: [
+        /* @__PURE__ */ jsx2(
+          motion2.div,
+          {
+            "aria-hidden": "true",
+            className: "pointer-events-none absolute inset-0 opacity-90",
+            style: {
+              background: `radial-gradient(circle at var(--pointer-x, 50%) var(--pointer-y, 50%), ${glowColor}${Math.round(
+                intensity * 255
+              ).toString(16).padStart(2, "0")}, rgba(255,255,255,0) 38%)`
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx2("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";
+function TextReveal({
+  as: Component = "h1",
+  children,
+  className = "",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(
+    motion3.div,
+    {
+      initial: { opacity: 0, y: 18 },
+      animate: { opacity: 1, y: 0 },
+      transition: { duration: 0.5, ease: "easeOut" },
+      children: /* @__PURE__ */ jsx3(Component, { ...props, className, children })
+    }
+  );
+}
+export {
+  FadeInSection,
+  SpotlightCard,
+  TextReveal
+};

package/package.json

@@ -1,6 +1,51 @@
 {
   "name": "@stackvibe-studio/motion",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.2.0",
+  "type": "module",
+  "description": "Motion primitives for StackVibe UI.",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/StackVibe-Studio/stackvibe-ui.git"
+  },
+  "homepage": "https://stackvibe-studio.github.io/stackvibe-ui/",
+  "bugs": {
+    "url": "https://github.com/StackVibe-Studio/stackvibe-ui/issues"
+  },
+  "license": "MIT",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "dependencies": {
+    "gsap": "^3.13.1",
+    "motion": "^12.23.12"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "tsup": "^8.1.0",
+    "typescript": "^5.7.0"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format esm,cjs --clean && tsc --project tsconfig.json --emitDeclarationOnly",
+    "typecheck": "tsc --noEmit"
+  }
 }