@allshift/ui 0.1.0 → 0.2.0

package/dist/index.cjs

@@ -0,0 +1,241 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  HolographicShine: () => HolographicShine,
+  ScrollGenerateCard: () => ScrollGenerateCard,
+  ShiftCard: () => ShiftCard,
+  TiltCard: () => TiltCard
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/ShiftCard.tsx
+var import_framer_motion = require("framer-motion");
+var import_jsx_runtime = require("react/jsx-runtime");
+function ShiftCard({ children, className = "", blur = 12, style, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_framer_motion.motion.div,
+    {
+      className: `shift-card ${className}`,
+      style: {
+        backdropFilter: `blur(${blur}px)`,
+        WebkitBackdropFilter: `blur(${blur}px)`,
+        ...style
+      },
+      ...props,
+      children
+    }
+  );
+}
+
+// src/components/TiltCard.tsx
+var import_react = require("react");
+var import_framer_motion2 = require("framer-motion");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function TiltCard({
+  children,
+  stiffness = 300,
+  damping = 28,
+  maxRotateX = 4,
+  maxRotateY = 7,
+  style,
+  ...rest
+}) {
+  const ref = (0, import_react.useRef)(null);
+  const rawX = (0, import_framer_motion2.useMotionValue)(0);
+  const rawY = (0, import_framer_motion2.useMotionValue)(0);
+  const rotateY = (0, import_framer_motion2.useSpring)((0, import_framer_motion2.useTransform)(rawX, [-1, 1], [-maxRotateY, maxRotateY]), {
+    stiffness,
+    damping
+  });
+  const rotateX = (0, import_framer_motion2.useSpring)((0, import_framer_motion2.useTransform)(rawY, [-1, 1], [maxRotateX, -maxRotateX]), {
+    stiffness,
+    damping
+  });
+  function onMouseMove(e) {
+    const el = ref.current;
+    if (!el) return;
+    const rect = el.getBoundingClientRect();
+    rawX.set(((e.clientX - rect.left) / rect.width - 0.5) * 2);
+    rawY.set(((e.clientY - rect.top) / rect.height - 0.5) * 2);
+  }
+  function onMouseLeave() {
+    rawX.set(0);
+    rawY.set(0);
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_framer_motion2.motion.div,
+    {
+      ref,
+      onMouseMove,
+      onMouseLeave,
+      style: { perspective: 900, rotateX, rotateY, ...style },
+      ...rest,
+      children
+    }
+  );
+}
+
+// src/components/HolographicShine.tsx
+var import_react2 = require("react");
+var import_framer_motion3 = require("framer-motion");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function HolographicShine({
+  rgb = "255,255,255",
+  intensity = 0.18,
+  children,
+  className,
+  style
+}) {
+  const ref = (0, import_react2.useRef)(null);
+  const mouseX = (0, import_framer_motion3.useMotionValue)(0);
+  const mouseY = (0, import_framer_motion3.useMotionValue)(0);
+  const springX = (0, import_framer_motion3.useSpring)(mouseX, { stiffness: 260, damping: 26 });
+  const springY = (0, import_framer_motion3.useSpring)(mouseY, { stiffness: 260, damping: 26 });
+  const background = import_framer_motion3.useMotionTemplate`radial-gradient(260px circle at ${springX}px ${springY}px, rgba(${rgb},${intensity}), transparent 70%)`;
+  function onMouseMove(e) {
+    const rect = ref.current?.getBoundingClientRect();
+    if (!rect) return;
+    mouseX.set(e.clientX - rect.left);
+    mouseY.set(e.clientY - rect.top);
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
+    {
+      ref,
+      onMouseMove,
+      className,
+      style: { position: "relative", ...style },
+      children: [
+        children,
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          import_framer_motion3.motion.div,
+          {
+            style: {
+              position: "absolute",
+              inset: 0,
+              borderRadius: "inherit",
+              background,
+              pointerEvents: "none"
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/ScrollGenerateCard.tsx
+var import_react3 = __toESM(require("react"), 1);
+var import_framer_motion4 = require("framer-motion");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var DEFAULT_WIDTHS = [72, 85, 60, 80];
+function ScrollGenerateCard({
+  children,
+  skeletonDuration = 360,
+  delay = 0,
+  margin = "-60px 0px",
+  className,
+  skeletonRows = 4,
+  skeletonWidths = DEFAULT_WIDTHS
+}) {
+  const ref = import_react3.default.useRef(null);
+  const inView = (0, import_framer_motion4.useInView)(ref, { once: true, margin });
+  const [phase, setPhase] = (0, import_react3.useState)("idle");
+  (0, import_react3.useEffect)(() => {
+    if (!inView) return;
+    const t1 = setTimeout(() => setPhase("skeleton"), delay);
+    const t2 = setTimeout(() => setPhase("live"), delay + skeletonDuration);
+    return () => {
+      clearTimeout(t1);
+      clearTimeout(t2);
+    };
+  }, [inView, delay, skeletonDuration]);
+  const widths = skeletonWidths.slice(0, skeletonRows);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { ref, className, style: { position: "relative" }, children: [
+    phase === "skeleton" && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      import_framer_motion4.motion.div,
+      {
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0 },
+        style: {
+          position: "absolute",
+          inset: 0,
+          borderRadius: "inherit",
+          padding: "1.5rem",
+          display: "flex",
+          flexDirection: "column",
+          gap: "0.75rem",
+          overflow: "hidden"
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            import_framer_motion4.motion.div,
+            {
+              animate: { x: ["-100%", "200%"] },
+              transition: { duration: 1.1, repeat: Infinity, ease: "linear" },
+              style: {
+                position: "absolute",
+                inset: 0,
+                background: "linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.06) 50%, transparent 100%)",
+                pointerEvents: "none"
+              }
+            }
+          ),
+          widths.map((w, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "div",
+            {
+              style: {
+                height: "0.7rem",
+                width: `${w}%`,
+                borderRadius: "0.4rem",
+                background: "rgba(255,255,255,0.08)",
+                animation: "pulse 1.8s ease-in-out infinite",
+                animationDelay: `${i * 120}ms`
+              }
+            },
+            i
+          ))
+        ]
+      }
+    ),
+    phase === "live" && children(phase),
+    phase === "idle" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { visibility: "hidden" }, children: children("idle") })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  HolographicShine,
+  ScrollGenerateCard,
+  ShiftCard,
+  TiltCard
+});

package/dist/index.d.cts

@@ -0,0 +1,82 @@
+import * as React from 'react';
+import React__default, { ReactNode, CSSProperties } from 'react';
+import { MotionProps } from 'framer-motion';
+
+interface ShiftCardProps extends MotionProps {
+    children: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+    blur?: number;
+}
+declare function ShiftCard({ children, className, blur, style, ...props }: ShiftCardProps): React.JSX.Element;
+
+interface TiltCardProps extends Omit<React__default.HTMLAttributes<HTMLDivElement>, keyof MotionProps>, MotionProps {
+    /** Spring stiffness for the tilt. Default 300. */
+    stiffness?: number;
+    /** Spring damping. Default 28. */
+    damping?: number;
+    /** Max degrees of X rotation. Default 4. */
+    maxRotateX?: number;
+    /** Max degrees of Y rotation. Default 7. */
+    maxRotateY?: number;
+}
+/**
+ * Drop-in wrapper that adds physics-spring 3-D tilt on mouse move.
+ * Renders a `motion.div`; all extra props forwarded.
+ */
+declare function TiltCard({ children, stiffness, damping, maxRotateX, maxRotateY, style, ...rest }: TiltCardProps): React__default.JSX.Element;
+
+interface HolographicShineProps {
+    /** RGB triplet for the shine tint, e.g. "0,229,240". Default neutral white. */
+    rgb?: string;
+    /** Intensity 0–1 of the shine overlay. Default 0.18. */
+    intensity?: number;
+    children?: React__default.ReactNode;
+    className?: string;
+    style?: React__default.CSSProperties;
+}
+/**
+ * Wrapper that paints a cursor-tracked radial holographic shine over its
+ * children. Combine with TiltCard for the full effect.
+ */
+declare function HolographicShine({ rgb, intensity, children, className, style, }: HolographicShineProps): React__default.JSX.Element;
+
+type Phase = "idle" | "skeleton" | "live";
+interface ScrollGenerateCardProps {
+    /**
+     * The real card content. Rendered in the "live" phase.
+     * Passed the current phase so content can animate itself in.
+     */
+    children: (phase: Phase) => React__default.ReactNode;
+    /**
+     * Milliseconds of skeleton phase before switching to live. Default 360.
+     */
+    skeletonDuration?: number;
+    /**
+     * Stagger delay in ms before the skeleton phase starts (for grid staggering). Default 0.
+     */
+    delay?: number;
+    /**
+     * IntersectionObserver margin. Default "-60px 0px".
+     */
+    margin?: string;
+    className?: string;
+    /** Skeleton placeholder rows to show. Default 4. */
+    skeletonRows?: number;
+    /** Widths (in %) of each skeleton row. Deterministic to avoid hydration mismatch. */
+    skeletonWidths?: number[];
+}
+/**
+ * Scroll-triggered three-phase card:
+ *   idle (off-screen invisible) → skeleton (shimmer placeholder) → live (real content)
+ *
+ * Usage:
+ * ```tsx
+ * <ScrollGenerateCard delay={index * 80}>
+ *   {(phase) => <MyCard className={phase === "live" ? "opacity-100" : "opacity-0"} />}
+ * </ScrollGenerateCard>
+ * ```
+ */
+declare function ScrollGenerateCard({ children, skeletonDuration, delay, margin, className, skeletonRows, skeletonWidths, }: ScrollGenerateCardProps): React__default.JSX.Element;
+
+export { HolographicShine, type HolographicShineProps, ScrollGenerateCard, type ScrollGenerateCardProps, ShiftCard, type ShiftCardProps, TiltCard, type TiltCardProps };

package/dist/index.d.ts

@@ -0,0 +1,82 @@
+import * as React from 'react';
+import React__default, { ReactNode, CSSProperties } from 'react';
+import { MotionProps } from 'framer-motion';
+
+interface ShiftCardProps extends MotionProps {
+    children: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+    blur?: number;
+}
+declare function ShiftCard({ children, className, blur, style, ...props }: ShiftCardProps): React.JSX.Element;
+
+interface TiltCardProps extends Omit<React__default.HTMLAttributes<HTMLDivElement>, keyof MotionProps>, MotionProps {
+    /** Spring stiffness for the tilt. Default 300. */
+    stiffness?: number;
+    /** Spring damping. Default 28. */
+    damping?: number;
+    /** Max degrees of X rotation. Default 4. */
+    maxRotateX?: number;
+    /** Max degrees of Y rotation. Default 7. */
+    maxRotateY?: number;
+}
+/**
+ * Drop-in wrapper that adds physics-spring 3-D tilt on mouse move.
+ * Renders a `motion.div`; all extra props forwarded.
+ */
+declare function TiltCard({ children, stiffness, damping, maxRotateX, maxRotateY, style, ...rest }: TiltCardProps): React__default.JSX.Element;
+
+interface HolographicShineProps {
+    /** RGB triplet for the shine tint, e.g. "0,229,240". Default neutral white. */
+    rgb?: string;
+    /** Intensity 0–1 of the shine overlay. Default 0.18. */
+    intensity?: number;
+    children?: React__default.ReactNode;
+    className?: string;
+    style?: React__default.CSSProperties;
+}
+/**
+ * Wrapper that paints a cursor-tracked radial holographic shine over its
+ * children. Combine with TiltCard for the full effect.
+ */
+declare function HolographicShine({ rgb, intensity, children, className, style, }: HolographicShineProps): React__default.JSX.Element;
+
+type Phase = "idle" | "skeleton" | "live";
+interface ScrollGenerateCardProps {
+    /**
+     * The real card content. Rendered in the "live" phase.
+     * Passed the current phase so content can animate itself in.
+     */
+    children: (phase: Phase) => React__default.ReactNode;
+    /**
+     * Milliseconds of skeleton phase before switching to live. Default 360.
+     */
+    skeletonDuration?: number;
+    /**
+     * Stagger delay in ms before the skeleton phase starts (for grid staggering). Default 0.
+     */
+    delay?: number;
+    /**
+     * IntersectionObserver margin. Default "-60px 0px".
+     */
+    margin?: string;
+    className?: string;
+    /** Skeleton placeholder rows to show. Default 4. */
+    skeletonRows?: number;
+    /** Widths (in %) of each skeleton row. Deterministic to avoid hydration mismatch. */
+    skeletonWidths?: number[];
+}
+/**
+ * Scroll-triggered three-phase card:
+ *   idle (off-screen invisible) → skeleton (shimmer placeholder) → live (real content)
+ *
+ * Usage:
+ * ```tsx
+ * <ScrollGenerateCard delay={index * 80}>
+ *   {(phase) => <MyCard className={phase === "live" ? "opacity-100" : "opacity-0"} />}
+ * </ScrollGenerateCard>
+ * ```
+ */
+declare function ScrollGenerateCard({ children, skeletonDuration, delay, margin, className, skeletonRows, skeletonWidths, }: ScrollGenerateCardProps): React__default.JSX.Element;
+
+export { HolographicShine, type HolographicShineProps, ScrollGenerateCard, type ScrollGenerateCardProps, ShiftCard, type ShiftCardProps, TiltCard, type TiltCardProps };

package/dist/index.js

@@ -0,0 +1,211 @@
+// src/components/ShiftCard.tsx
+import { motion } from "framer-motion";
+import { jsx } from "react/jsx-runtime";
+function ShiftCard({ children, className = "", blur = 12, style, ...props }) {
+  return /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      className: `shift-card ${className}`,
+      style: {
+        backdropFilter: `blur(${blur}px)`,
+        WebkitBackdropFilter: `blur(${blur}px)`,
+        ...style
+      },
+      ...props,
+      children
+    }
+  );
+}
+
+// src/components/TiltCard.tsx
+import { useRef } from "react";
+import {
+  motion as motion2,
+  useMotionValue,
+  useTransform,
+  useSpring
+} from "framer-motion";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function TiltCard({
+  children,
+  stiffness = 300,
+  damping = 28,
+  maxRotateX = 4,
+  maxRotateY = 7,
+  style,
+  ...rest
+}) {
+  const ref = useRef(null);
+  const rawX = useMotionValue(0);
+  const rawY = useMotionValue(0);
+  const rotateY = useSpring(useTransform(rawX, [-1, 1], [-maxRotateY, maxRotateY]), {
+    stiffness,
+    damping
+  });
+  const rotateX = useSpring(useTransform(rawY, [-1, 1], [maxRotateX, -maxRotateX]), {
+    stiffness,
+    damping
+  });
+  function onMouseMove(e) {
+    const el = ref.current;
+    if (!el) return;
+    const rect = el.getBoundingClientRect();
+    rawX.set(((e.clientX - rect.left) / rect.width - 0.5) * 2);
+    rawY.set(((e.clientY - rect.top) / rect.height - 0.5) * 2);
+  }
+  function onMouseLeave() {
+    rawX.set(0);
+    rawY.set(0);
+  }
+  return /* @__PURE__ */ jsx2(
+    motion2.div,
+    {
+      ref,
+      onMouseMove,
+      onMouseLeave,
+      style: { perspective: 900, rotateX, rotateY, ...style },
+      ...rest,
+      children
+    }
+  );
+}
+
+// src/components/HolographicShine.tsx
+import { useRef as useRef2 } from "react";
+import {
+  motion as motion3,
+  useMotionTemplate,
+  useMotionValue as useMotionValue2,
+  useSpring as useSpring2
+} from "framer-motion";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+function HolographicShine({
+  rgb = "255,255,255",
+  intensity = 0.18,
+  children,
+  className,
+  style
+}) {
+  const ref = useRef2(null);
+  const mouseX = useMotionValue2(0);
+  const mouseY = useMotionValue2(0);
+  const springX = useSpring2(mouseX, { stiffness: 260, damping: 26 });
+  const springY = useSpring2(mouseY, { stiffness: 260, damping: 26 });
+  const background = useMotionTemplate`radial-gradient(260px circle at ${springX}px ${springY}px, rgba(${rgb},${intensity}), transparent 70%)`;
+  function onMouseMove(e) {
+    const rect = ref.current?.getBoundingClientRect();
+    if (!rect) return;
+    mouseX.set(e.clientX - rect.left);
+    mouseY.set(e.clientY - rect.top);
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      onMouseMove,
+      className,
+      style: { position: "relative", ...style },
+      children: [
+        children,
+        /* @__PURE__ */ jsx3(
+          motion3.div,
+          {
+            style: {
+              position: "absolute",
+              inset: 0,
+              borderRadius: "inherit",
+              background,
+              pointerEvents: "none"
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/ScrollGenerateCard.tsx
+import React3, { useEffect, useState } from "react";
+import { motion as motion4, useInView } from "framer-motion";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var DEFAULT_WIDTHS = [72, 85, 60, 80];
+function ScrollGenerateCard({
+  children,
+  skeletonDuration = 360,
+  delay = 0,
+  margin = "-60px 0px",
+  className,
+  skeletonRows = 4,
+  skeletonWidths = DEFAULT_WIDTHS
+}) {
+  const ref = React3.useRef(null);
+  const inView = useInView(ref, { once: true, margin });
+  const [phase, setPhase] = useState("idle");
+  useEffect(() => {
+    if (!inView) return;
+    const t1 = setTimeout(() => setPhase("skeleton"), delay);
+    const t2 = setTimeout(() => setPhase("live"), delay + skeletonDuration);
+    return () => {
+      clearTimeout(t1);
+      clearTimeout(t2);
+    };
+  }, [inView, delay, skeletonDuration]);
+  const widths = skeletonWidths.slice(0, skeletonRows);
+  return /* @__PURE__ */ jsxs2("div", { ref, className, style: { position: "relative" }, children: [
+    phase === "skeleton" && /* @__PURE__ */ jsxs2(
+      motion4.div,
+      {
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0 },
+        style: {
+          position: "absolute",
+          inset: 0,
+          borderRadius: "inherit",
+          padding: "1.5rem",
+          display: "flex",
+          flexDirection: "column",
+          gap: "0.75rem",
+          overflow: "hidden"
+        },
+        children: [
+          /* @__PURE__ */ jsx4(
+            motion4.div,
+            {
+              animate: { x: ["-100%", "200%"] },
+              transition: { duration: 1.1, repeat: Infinity, ease: "linear" },
+              style: {
+                position: "absolute",
+                inset: 0,
+                background: "linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.06) 50%, transparent 100%)",
+                pointerEvents: "none"
+              }
+            }
+          ),
+          widths.map((w, i) => /* @__PURE__ */ jsx4(
+            "div",
+            {
+              style: {
+                height: "0.7rem",
+                width: `${w}%`,
+                borderRadius: "0.4rem",
+                background: "rgba(255,255,255,0.08)",
+                animation: "pulse 1.8s ease-in-out infinite",
+                animationDelay: `${i * 120}ms`
+              }
+            },
+            i
+          ))
+        ]
+      }
+    ),
+    phase === "live" && children(phase),
+    phase === "idle" && /* @__PURE__ */ jsx4("div", { style: { visibility: "hidden" }, children: children("idle") })
+  ] });
+}
+export {
+  HolographicShine,
+  ScrollGenerateCard,
+  ShiftCard,
+  TiltCard
+};

package/package.json

@@ -1,25 +1,53 @@
 {
   "name": "@allshift/ui",
-  "version": "0.1.0",
-  "description": "Shift family shared FEEL layer — themed face, shared smoothness. Motion, elevation, spacing/breathing-room primitives driven by per-product --shift-* theme tokens. Brand-neutral by design.",
+  "version": "0.2.0",
+  "description": "Shift family shared FEEL layer — glass morphism, 3D tilt physics, holographic shine, scroll-triggered generation. Brand-neutral by design.",
   "license": "UNLICENSED",
   "private": false,
   "type": "module",
   "files": [
+    "dist",
     "styles",
     "styles.css",
     "README.md"
   ],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
     "./styles.css": "./styles/shift-ui.css",
     "./package.json": "./package.json"
   },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "type-check": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "framer-motion": ">=10",
+    "react": ">=18"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.17",
+    "framer-motion": "^12.40.0",
+    "react": "^19.2.7",
+    "tsup": "^8.5.1",
+    "typescript": "^6.0.3"
+  },
   "publishConfig": {
     "access": "public"
   },
   "keywords": [
     "shift",
     "design-system",
-    "feel-layer"
+    "feel-layer",
+    "glass-morphism",
+    "framer-motion",
+    "3d-tilt"
   ]
 }