@okinoxis/hero-scene 0.2.0

package/README.md

@@ -0,0 +1,124 @@
+# @okinoxis/hero-scene
+
+Compound component for cinematic hero backgrounds in Next.js — image rotation, parallax, vignettes, blur, and patterns.
+
+## Install
+
+```bash
+npm install @okinoxis/hero-scene
+```
+
+## Usage
+
+```tsx
+import { HeroScene } from '@okinoxis/hero-scene'
+
+const images = [
+  { src: '/karate.jpg', color: '70, 150, 220' },
+  { src: '/surf.jpg', color: '220, 160, 60' },
+  { src: '/tennis.jpg', color: '200, 110, 50' },
+]
+
+<HeroScene images={images} interval={30000} className="min-h-svh">
+  <HeroScene.Parallax />
+  <HeroScene.Vignette />
+  <HeroScene.Blur />
+  <HeroScene.Pattern />
+  <HeroScene.DarkOverlay />
+  <HeroScene.Content>
+    <h1>Your headline</h1>
+  </HeroScene.Content>
+</HeroScene>
+```
+
+Only include the sub-components you need. All are optional.
+
+## Layers
+
+```
+Background    z:0   — images (crossfade) + fallback color, moved by Parallax
+DarkOverlay   z:10  — dark mode only overlay
+Blur          z:15  — backdrop blur with radial mask (clear center)
+Vignette      z:20  — color-matched radial gradient per image
+Pattern       z:20  — repeating dot grid
+Content       z:30  — your content
+```
+
+## API
+
+### `<HeroScene>`
+
+| Prop | Type | Default |
+|------|------|---------|
+| `images` * | `{ src: string, color: string }[]` | — |
+| `initialIndex` | `number` | `0` |
+| `interval` | `number` | `30000` |
+| `transitionDuration` | `number` | `700` |
+| `className` | `string` | — |
+| `onIndexChange` | `(index: number) => void` | — |
+
+`color` is `"r, g, b"` (e.g. `"210, 100, 60"`) for CSS `color-mix()`.
+
+### `<HeroScene.Parallax>`
+
+| Prop | Type | Default |
+|------|------|---------|
+| `speed` | `number` | `0.4` |
+| `mouseShiftX` | `number` | `25` |
+| `mouseShiftY` | `number` | `15` |
+| `mouseLerp` | `number` | `0.04` |
+
+### `<HeroScene.Vignette>`
+
+| Prop | Type | Default |
+|------|------|---------|
+| `centerX` | `number` | `50` |
+| `centerY` | `number` | `100` |
+| `shape` | `'circle' \| 'ellipse'` | `'circle'` |
+| `stops` | `[number, number][]` | `[[0,0]...[100,0.6]]` |
+| `transitionDuration` | `number` | `1000` |
+
+### `<HeroScene.Blur>`
+
+| Prop | Type | Default |
+|------|------|---------|
+| `amount` | `number` | `24` |
+| `centerX` | `number` | `50` |
+| `centerY` | `number` | `65` |
+| `innerRadius` | `number` | `15` |
+| `outerRadius` | `number` | `55` |
+
+### `<HeroScene.Pattern>`
+
+| Prop | Type | Default |
+|------|------|---------|
+| `dotSize` | `number` | `1` |
+| `spacing` | `number` | `20` |
+| `lightColor` | `string` | `'rgba(0 0 0 / 0.15)'` |
+| `darkColor` | `string` | `'rgba(255 255 255 / 0.1)'` |
+
+### `<HeroScene.DarkOverlay>`
+
+| Prop | Type | Default |
+|------|------|---------|
+| `opacity` | `number` | `0.4` |
+
+### `<HeroScene.Content>`
+
+| Prop | Type | Default |
+|------|------|---------|
+| `className` | `string` | — |
+
+## Accessibility
+
+- Respects `prefers-reduced-motion` — disables all animations
+- Pauses off-screen via Intersection Observer
+- All decorative layers are `aria-hidden`
+
+## Requirements
+
+React 18+, Next.js 14+, Tailwind CSS (for `dark:` variant)
+
+## License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1,424 @@
+"use client";
+"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, {
+  HeroScene: () => HeroScene,
+  buildBlurMask: () => buildBlurMask,
+  buildVignetteGradient: () => buildVignetteGradient,
+  useReducedMotion: () => useReducedMotion
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/hero-scene.tsx
+var import_image = __toESM(require("next/image"), 1);
+var import_react4 = require("react");
+
+// src/hero-scene-context.ts
+var import_react = require("react");
+var HeroSceneContext = (0, import_react.createContext)(null);
+function useHeroScene() {
+  const ctx = (0, import_react.useContext)(HeroSceneContext);
+  if (!ctx) {
+    throw new Error(
+      "HeroScene compound components (Parallax, Vignette, Blur, Pattern, DarkOverlay, Content) must be rendered inside a <HeroScene> parent."
+    );
+  }
+  return ctx;
+}
+
+// src/utils.ts
+var DEFAULT_STOPS = [
+  [0, 0],
+  [15, 0.08],
+  [30, 0.15],
+  [45, 0.25],
+  [60, 0.35],
+  [75, 0.45],
+  [88, 0.55],
+  [100, 0.6]
+];
+function buildVignetteGradient(color, config) {
+  const shape = config.shape ?? "circle";
+  const cx = config.centerX ?? 50;
+  const cy = config.centerY ?? 100;
+  const stops = config.stops ?? DEFAULT_STOPS;
+  const gradientStops = stops.map(
+    ([pos, opacity]) => opacity === 0 ? `transparent ${pos}%` : `color-mix(in srgb, rgb(${color}) ${Math.round(opacity * 100)}%, transparent) ${pos}%`
+  ).join(", ");
+  return `radial-gradient(${shape} at ${cx}% ${cy}%, ${gradientStops})`;
+}
+function buildBlurMask(config) {
+  const cx = config.centerX ?? 50;
+  const cy = config.centerY ?? 65;
+  const inner = config.innerRadius ?? 15;
+  const outer = config.outerRadius ?? 55;
+  return `radial-gradient(circle at ${cx}% ${cy}%, transparent ${inner}%, black ${outer}%)`;
+}
+
+// src/use-in-viewport.ts
+var import_react2 = require("react");
+function useInViewport(ref) {
+  const [inViewport, setInViewport] = (0, import_react2.useState)(true);
+  (0, import_react2.useEffect)(() => {
+    const el = ref.current;
+    if (!el) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        setInViewport(entry.isIntersecting);
+      },
+      { threshold: 0 }
+    );
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [ref]);
+  return inViewport;
+}
+
+// src/use-reduced-motion.ts
+var import_react3 = require("react");
+function useReducedMotion() {
+  const [reduced, setReduced] = (0, import_react3.useState)(false);
+  (0, import_react3.useEffect)(() => {
+    const mql = globalThis.matchMedia("(prefers-reduced-motion: reduce)");
+    setReduced(mql.matches);
+    function onChange(e) {
+      setReduced(e.matches);
+    }
+    mql.addEventListener("change", onChange);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+  return reduced;
+}
+
+// src/hero-scene.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function HeroSceneRoot({
+  images,
+  initialIndex = 0,
+  interval = 3e4,
+  transitionDuration = 700,
+  className,
+  onIndexChange,
+  children
+}) {
+  const [index, setIndex] = (0, import_react4.useState)(initialIndex);
+  const rootRef = (0, import_react4.useRef)(null);
+  const reducedMotion = useReducedMotion();
+  const isInViewport = useInViewport(rootRef);
+  (0, import_react4.useEffect)(() => {
+    if (interval <= 0 || images.length <= 1) return;
+    let current = initialIndex;
+    const id = setInterval(() => {
+      const next = (current + 1) % images.length;
+      current = next;
+      setIndex(next);
+      setTimeout(() => {
+        onIndexChange?.(next);
+      }, 0);
+    }, interval);
+    return () => clearInterval(id);
+  }, [initialIndex, interval, images.length, onIndexChange]);
+  const activeColor = images[index]?.color ?? "128, 128, 128";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    HeroSceneContext.Provider,
+    {
+      value: {
+        images,
+        index,
+        transitionDuration,
+        reducedMotion,
+        isInViewport,
+        containerRef: rootRef
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "div",
+        {
+          ref: rootRef,
+          className,
+          style: { position: "relative", overflow: "hidden" },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "div",
+              {
+                "data-hero-images": "",
+                "aria-hidden": "true",
+                style: {
+                  position: "absolute",
+                  inset: 0,
+                  backgroundColor: `rgb(${activeColor})`,
+                  transition: reducedMotion ? "none" : "background-color 1s ease"
+                },
+                children: images.map((img, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_image.default,
+                  {
+                    src: img.src,
+                    alt: "",
+                    width: 1920,
+                    height: 1080,
+                    priority: i === initialIndex,
+                    sizes: "100vw",
+                    style: {
+                      position: "absolute",
+                      inset: 0,
+                      width: "100%",
+                      height: "100%",
+                      objectFit: "cover",
+                      opacity: i === index ? 1 : 0,
+                      transition: reducedMotion ? "none" : `opacity ${transitionDuration}ms ease`
+                    }
+                  },
+                  img.src
+                ))
+              }
+            ),
+            children
+          ]
+        }
+      )
+    }
+  );
+}
+function Parallax({
+  speed = 0.4,
+  mouseShiftX = 25,
+  mouseShiftY = 15,
+  mouseLerp = 0.04
+}) {
+  const { reducedMotion, isInViewport, containerRef } = useHeroScene();
+  const scrollY = (0, import_react4.useRef)(0);
+  const targetMouseX = (0, import_react4.useRef)(0);
+  const targetMouseY = (0, import_react4.useRef)(0);
+  const currentMouseX = (0, import_react4.useRef)(0);
+  const currentMouseY = (0, import_react4.useRef)(0);
+  (0, import_react4.useEffect)(() => {
+    if (reducedMotion) return;
+    const root = containerRef.current;
+    if (!root) return;
+    const imagesEl = root.querySelector("[data-hero-images]");
+    if (!imagesEl) return;
+    imagesEl.style.inset = "-15%";
+    imagesEl.style.willChange = "transform";
+    return () => {
+      imagesEl.style.inset = "0";
+      imagesEl.style.willChange = "";
+      imagesEl.style.transform = "";
+    };
+  }, [reducedMotion, containerRef]);
+  (0, import_react4.useEffect)(() => {
+    if (reducedMotion) return;
+    const root = containerRef.current;
+    if (!root) return;
+    const imagesEl = root.querySelector("[data-hero-images]");
+    if (!imagesEl) return;
+    let rafId;
+    let running = true;
+    function loop() {
+      if (!running) return;
+      currentMouseX.current += (targetMouseX.current - currentMouseX.current) * mouseLerp;
+      currentMouseY.current += (targetMouseY.current - currentMouseY.current) * mouseLerp;
+      const y = scrollY.current * speed;
+      const mx = currentMouseX.current * mouseShiftX;
+      const my = currentMouseY.current * mouseShiftY;
+      imagesEl.style.transform = `translate3d(${mx}px, ${y + my}px, 0)`;
+      rafId = requestAnimationFrame(loop);
+    }
+    function onScroll() {
+      if (!isInViewport) return;
+      scrollY.current = globalThis.scrollY;
+    }
+    function onMouseMove(e) {
+      if (!isInViewport) return;
+      targetMouseX.current = (e.clientX / globalThis.innerWidth - 0.5) * 2;
+      targetMouseY.current = (e.clientY / globalThis.innerHeight - 0.5) * 2;
+    }
+    globalThis.addEventListener("scroll", onScroll, { passive: true });
+    globalThis.addEventListener("mousemove", onMouseMove, { passive: true });
+    rafId = requestAnimationFrame(loop);
+    return () => {
+      running = false;
+      globalThis.removeEventListener("scroll", onScroll);
+      globalThis.removeEventListener("mousemove", onMouseMove);
+      cancelAnimationFrame(rafId);
+    };
+  }, [
+    reducedMotion,
+    isInViewport,
+    containerRef,
+    speed,
+    mouseShiftX,
+    mouseShiftY,
+    mouseLerp
+  ]);
+  return null;
+}
+function Vignette({
+  centerX = 50,
+  centerY = 100,
+  shape = "circle",
+  stops,
+  transitionDuration = 1e3
+}) {
+  const { images, index, reducedMotion } = useHeroScene();
+  const transitionMs = reducedMotion ? "0ms" : `${transitionDuration}ms`;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: images.map((img, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      "aria-hidden": "true",
+      style: {
+        position: "absolute",
+        inset: 0,
+        zIndex: 20,
+        pointerEvents: "none",
+        opacity: i === index ? 1 : 0,
+        transition: `opacity ${transitionMs} ease`,
+        background: buildVignetteGradient(img.color, {
+          centerX,
+          centerY,
+          shape,
+          stops
+        })
+      }
+    },
+    `vignette-${img.color}`
+  )) });
+}
+function Blur({
+  amount = 24,
+  centerX = 50,
+  centerY = 65,
+  innerRadius = 15,
+  outerRadius = 55
+}) {
+  useHeroScene();
+  const mask = buildBlurMask({ centerX, centerY, innerRadius, outerRadius });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      "aria-hidden": "true",
+      style: {
+        position: "absolute",
+        inset: 0,
+        zIndex: 15,
+        backdropFilter: `blur(${amount}px)`,
+        WebkitBackdropFilter: `blur(${amount}px)`,
+        maskImage: mask,
+        WebkitMaskImage: mask,
+        pointerEvents: "none"
+      }
+    }
+  );
+}
+function Pattern({
+  dotSize = 1,
+  spacing = 20,
+  lightColor = "rgba(0 0 0 / 0.15)",
+  darkColor = "rgba(255 255 255 / 0.1)"
+}) {
+  useHeroScene();
+  const bgImage = (color) => `radial-gradient(circle, ${color} ${dotSize}px, transparent ${dotSize}px)`;
+  const bgSize = `${spacing}px ${spacing}px`;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        "aria-hidden": "true",
+        className: "dark:hidden",
+        style: {
+          position: "absolute",
+          inset: 0,
+          zIndex: 20,
+          pointerEvents: "none",
+          backgroundImage: bgImage(lightColor),
+          backgroundSize: bgSize
+        }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        "aria-hidden": "true",
+        className: "hidden dark:block",
+        style: {
+          position: "absolute",
+          inset: 0,
+          zIndex: 20,
+          pointerEvents: "none",
+          backgroundImage: bgImage(darkColor),
+          backgroundSize: bgSize
+        }
+      }
+    )
+  ] });
+}
+function DarkOverlay({ opacity = 0.4 }) {
+  useHeroScene();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: "pointer-events-none hidden dark:block",
+      style: {
+        position: "absolute",
+        inset: 0,
+        zIndex: 10,
+        backgroundColor: `rgba(0 0 0 / ${opacity})`
+      }
+    }
+  );
+}
+function Content({ className, children }) {
+  useHeroScene();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className,
+      style: { position: "relative", zIndex: 30 },
+      children
+    }
+  );
+}
+var HeroScene = Object.assign(HeroSceneRoot, {
+  Parallax,
+  Vignette,
+  Blur,
+  Pattern,
+  DarkOverlay,
+  Content
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  HeroScene,
+  buildBlurMask,
+  buildVignetteGradient,
+  useReducedMotion
+});
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/hero-scene.tsx","../src/hero-scene-context.ts","../src/utils.ts","../src/use-in-viewport.ts","../src/use-reduced-motion.ts"],"sourcesContent":["export { HeroScene } from './hero-scene'\nexport { buildVignetteGradient, buildBlurMask } from './utils'\nexport { useReducedMotion } from './use-reduced-motion'\n\nexport type {\n  HeroSceneProps,\n  HeroImage,\n  ParallaxProps,\n  VignetteProps,\n  BlurProps,\n  PatternProps,\n  DarkOverlayProps,\n  ContentProps,\n} from './types'\n","'use client'\n\nimport Image from 'next/image'\nimport { useEffect, useRef, useState } from 'react'\n\nimport { HeroSceneContext, useHeroScene } from './hero-scene-context'\nimport type {\n  BlurProps,\n  ContentProps,\n  DarkOverlayProps,\n  HeroSceneProps,\n  ParallaxProps,\n  PatternProps,\n  VignetteProps,\n} from './types'\nimport { buildBlurMask, buildVignetteGradient } from './utils'\nimport { useInViewport } from './use-in-viewport'\nimport { useReducedMotion } from './use-reduced-motion'\n\n// ─── Root Component ──────────────────────────────────────────\n\nfunction HeroSceneRoot({\n  images,\n  initialIndex = 0,\n  interval = 30_000,\n  transitionDuration = 700,\n  className,\n  onIndexChange,\n  children,\n}: HeroSceneProps) {\n  const [index, setIndex] = useState(initialIndex)\n  const rootRef = useRef<HTMLDivElement>(null)\n  const reducedMotion = useReducedMotion()\n  const isInViewport = useInViewport(rootRef)\n\n  // ── Image rotation ──\n  useEffect(() => {\n    if (interval <= 0 || images.length <= 1) return\n\n    let current = initialIndex\n    const id = setInterval(() => {\n      const next = (current + 1) % images.length\n      current = next\n      setIndex(next)\n      setTimeout(() => {\n        onIndexChange?.(next)\n      }, 0)\n    }, interval)\n    return () => clearInterval(id)\n  }, [initialIndex, interval, images.length, onIndexChange])\n\n  const activeColor = images[index]?.color ?? '128, 128, 128'\n\n  return (\n    <HeroSceneContext.Provider\n      value={{\n        images,\n        index,\n        transitionDuration,\n        reducedMotion,\n        isInViewport,\n        containerRef: rootRef,\n      }}\n    >\n      <div\n        ref={rootRef}\n        className={className}\n        style={{ position: 'relative', overflow: 'hidden' }}\n      >\n        {/* ── Background images (no parallax — Parallax child wraps these) ── */}\n        <div\n          data-hero-images=\"\"\n          aria-hidden=\"true\"\n          style={{\n            position: 'absolute',\n            inset: 0,\n            backgroundColor: `rgb(${activeColor})`,\n            transition: reducedMotion ? 'none' : 'background-color 1s ease',\n          }}\n        >\n          {images.map((img, i) => (\n            <Image\n              key={img.src}\n              src={img.src}\n              alt=\"\"\n              width={1920}\n              height={1080}\n              priority={i === initialIndex}\n              sizes=\"100vw\"\n              style={{\n                position: 'absolute',\n                inset: 0,\n                width: '100%',\n                height: '100%',\n                objectFit: 'cover',\n                opacity: i === index ? 1 : 0,\n                transition: reducedMotion\n                  ? 'none'\n                  : `opacity ${transitionDuration}ms ease`,\n              }}\n            />\n          ))}\n        </div>\n\n        {children}\n      </div>\n    </HeroSceneContext.Provider>\n  )\n}\n\n// ─── Parallax ────────────────────────────────────────────────\n\nfunction Parallax({\n  speed = 0.4,\n  mouseShiftX = 25,\n  mouseShiftY = 15,\n  mouseLerp = 0.04,\n}: ParallaxProps) {\n  const { reducedMotion, isInViewport, containerRef } = useHeroScene()\n\n  const scrollY = useRef(0)\n  const targetMouseX = useRef(0)\n  const targetMouseY = useRef(0)\n  const currentMouseX = useRef(0)\n  const currentMouseY = useRef(0)\n\n  useEffect(() => {\n    if (reducedMotion) return\n\n    const root = containerRef.current\n    if (!root) return\n\n    const imagesEl = root.querySelector<HTMLDivElement>('[data-hero-images]')\n    if (!imagesEl) return\n\n    // Expand the images container to allow parallax overflow\n    imagesEl.style.inset = '-15%'\n    imagesEl.style.willChange = 'transform'\n\n    return () => {\n      imagesEl.style.inset = '0'\n      imagesEl.style.willChange = ''\n      imagesEl.style.transform = ''\n    }\n  }, [reducedMotion, containerRef])\n\n  useEffect(() => {\n    if (reducedMotion) return\n\n    const root = containerRef.current\n    if (!root) return\n\n    const imagesEl = root.querySelector<HTMLDivElement>('[data-hero-images]')\n    if (!imagesEl) return\n\n    let rafId: number\n    let running = true\n\n    function loop() {\n      if (!running) return\n\n      currentMouseX.current +=\n        (targetMouseX.current - currentMouseX.current) * mouseLerp\n      currentMouseY.current +=\n        (targetMouseY.current - currentMouseY.current) * mouseLerp\n\n      const y = scrollY.current * speed\n      const mx = currentMouseX.current * mouseShiftX\n      const my = currentMouseY.current * mouseShiftY\n      imagesEl!.style.transform = `translate3d(${mx}px, ${y + my}px, 0)`\n\n      rafId = requestAnimationFrame(loop)\n    }\n\n    function onScroll() {\n      if (!isInViewport) return\n      scrollY.current = globalThis.scrollY\n    }\n\n    function onMouseMove(e: MouseEvent) {\n      if (!isInViewport) return\n      targetMouseX.current = (e.clientX / globalThis.innerWidth - 0.5) * 2\n      targetMouseY.current = (e.clientY / globalThis.innerHeight - 0.5) * 2\n    }\n\n    globalThis.addEventListener('scroll', onScroll, { passive: true })\n    globalThis.addEventListener('mousemove', onMouseMove, { passive: true })\n    rafId = requestAnimationFrame(loop)\n\n    return () => {\n      running = false\n      globalThis.removeEventListener('scroll', onScroll)\n      globalThis.removeEventListener('mousemove', onMouseMove)\n      cancelAnimationFrame(rafId)\n    }\n  }, [\n    reducedMotion,\n    isInViewport,\n    containerRef,\n    speed,\n    mouseShiftX,\n    mouseShiftY,\n    mouseLerp,\n  ])\n\n  // Parallax is a behavior-only component — renders nothing\n  return null\n}\n\n// ─── Vignette ────────────────────────────────────────────────\n\nfunction Vignette({\n  centerX = 50,\n  centerY = 100,\n  shape = 'circle',\n  stops,\n  transitionDuration = 1000,\n}: VignetteProps) {\n  const { images, index, reducedMotion } = useHeroScene()\n  const transitionMs = reducedMotion ? '0ms' : `${transitionDuration}ms`\n\n  return (\n    <>\n      {images.map((img, i) => (\n        <div\n          key={`vignette-${img.color}`}\n          aria-hidden=\"true\"\n          style={{\n            position: 'absolute',\n            inset: 0,\n            zIndex: 20,\n            pointerEvents: 'none',\n            opacity: i === index ? 1 : 0,\n            transition: `opacity ${transitionMs} ease`,\n            background: buildVignetteGradient(img.color, {\n              centerX,\n              centerY,\n              shape,\n              stops,\n            }),\n          }}\n        />\n      ))}\n    </>\n  )\n}\n\n// ─── Blur ────────────────────────────────────────────────────\n\nfunction Blur({\n  amount = 24,\n  centerX = 50,\n  centerY = 65,\n  innerRadius = 15,\n  outerRadius = 55,\n}: BlurProps) {\n  useHeroScene() // validate context\n\n  const mask = buildBlurMask({ centerX, centerY, innerRadius, outerRadius })\n\n  return (\n    <div\n      aria-hidden=\"true\"\n      style={{\n        position: 'absolute',\n        inset: 0,\n        zIndex: 15,\n        backdropFilter: `blur(${amount}px)`,\n        WebkitBackdropFilter: `blur(${amount}px)`,\n        maskImage: mask,\n        WebkitMaskImage: mask,\n        pointerEvents: 'none',\n      }}\n    />\n  )\n}\n\n// ─── Pattern ─────────────────────────────────────────────────\n\nfunction Pattern({\n  dotSize = 1,\n  spacing = 20,\n  lightColor = 'rgba(0 0 0 / 0.15)',\n  darkColor = 'rgba(255 255 255 / 0.1)',\n}: PatternProps) {\n  useHeroScene() // validate context\n\n  const bgImage = (color: string) =>\n    `radial-gradient(circle, ${color} ${dotSize}px, transparent ${dotSize}px)`\n  const bgSize = `${spacing}px ${spacing}px`\n\n  return (\n    <>\n      <div\n        aria-hidden=\"true\"\n        className=\"dark:hidden\"\n        style={{\n          position: 'absolute',\n          inset: 0,\n          zIndex: 20,\n          pointerEvents: 'none',\n          backgroundImage: bgImage(lightColor),\n          backgroundSize: bgSize,\n        }}\n      />\n      <div\n        aria-hidden=\"true\"\n        className=\"hidden dark:block\"\n        style={{\n          position: 'absolute',\n          inset: 0,\n          zIndex: 20,\n          pointerEvents: 'none',\n          backgroundImage: bgImage(darkColor),\n          backgroundSize: bgSize,\n        }}\n      />\n    </>\n  )\n}\n\n// ─── DarkOverlay ─────────────────────────────────────────────\n\nfunction DarkOverlay({ opacity = 0.4 }: DarkOverlayProps) {\n  useHeroScene() // validate context\n\n  return (\n    <div\n      aria-hidden=\"true\"\n      className=\"pointer-events-none hidden dark:block\"\n      style={{\n        position: 'absolute',\n        inset: 0,\n        zIndex: 10,\n        backgroundColor: `rgba(0 0 0 / ${opacity})`,\n      }}\n    />\n  )\n}\n\n// ─── Content ─────────────────────────────────────────────────\n\nfunction Content({ className, children }: ContentProps) {\n  useHeroScene() // validate context\n\n  return (\n    <div\n      className={className}\n      style={{ position: 'relative', zIndex: 30 }}\n    >\n      {children}\n    </div>\n  )\n}\n\n// ─── Compound export ─────────────────────────────────────────\n\nexport const HeroScene = Object.assign(HeroSceneRoot, {\n  Parallax,\n  Vignette,\n  Blur,\n  Pattern,\n  DarkOverlay,\n  Content,\n})\n","'use client'\n\nimport { createContext, useContext } from 'react'\nimport type { HeroSceneContextValue } from './types'\n\nexport const HeroSceneContext = createContext<HeroSceneContextValue | null>(null)\n\nexport function useHeroScene(): HeroSceneContextValue {\n  const ctx = useContext(HeroSceneContext)\n  if (!ctx) {\n    throw new Error(\n      'HeroScene compound components (Parallax, Vignette, Blur, Pattern, DarkOverlay, Content) ' +\n        'must be rendered inside a <HeroScene> parent.',\n    )\n  }\n  return ctx\n}\n","import type { VignetteProps, BlurProps } from './types'\n\nconst DEFAULT_STOPS: [number, number][] = [\n  [0, 0],\n  [15, 0.08],\n  [30, 0.15],\n  [45, 0.25],\n  [60, 0.35],\n  [75, 0.45],\n  [88, 0.55],\n  [100, 0.6],\n]\n\nexport function buildVignetteGradient(\n  color: string,\n  config: Pick<VignetteProps, 'shape' | 'centerX' | 'centerY' | 'stops'>,\n): string {\n  const shape = config.shape ?? 'circle'\n  const cx = config.centerX ?? 50\n  const cy = config.centerY ?? 100\n  const stops = config.stops ?? DEFAULT_STOPS\n\n  const gradientStops = stops\n    .map(([pos, opacity]) =>\n      opacity === 0\n        ? `transparent ${pos}%`\n        : `color-mix(in srgb, rgb(${color}) ${Math.round(opacity * 100)}%, transparent) ${pos}%`,\n    )\n    .join(', ')\n\n  return `radial-gradient(${shape} at ${cx}% ${cy}%, ${gradientStops})`\n}\n\nexport function buildBlurMask(\n  config: Pick<BlurProps, 'centerX' | 'centerY' | 'innerRadius' | 'outerRadius'>,\n): string {\n  const cx = config.centerX ?? 50\n  const cy = config.centerY ?? 65\n  const inner = config.innerRadius ?? 15\n  const outer = config.outerRadius ?? 55\n\n  return `radial-gradient(circle at ${cx}% ${cy}%, transparent ${inner}%, black ${outer}%)`\n}\n","'use client'\n\nimport { useEffect, useState } from 'react'\nimport type { RefObject } from 'react'\n\n/**\n * Returns true when the referenced element is at least partially visible\n * in the viewport, using IntersectionObserver. SSR-safe — defaults to true\n * so effects run immediately on first paint before the observer fires.\n */\nexport function useInViewport(ref: RefObject<HTMLElement | null>): boolean {\n  const [inViewport, setInViewport] = useState(true)\n\n  useEffect(() => {\n    const el = ref.current\n    if (!el) return\n\n    const observer = new IntersectionObserver(\n      ([entry]) => {\n        setInViewport(entry.isIntersecting)\n      },\n      { threshold: 0 },\n    )\n\n    observer.observe(el)\n    return () => observer.disconnect()\n  }, [ref])\n\n  return inViewport\n}\n","'use client'\n\nimport { useEffect, useState } from 'react'\n\n/**\n * Returns true when the user has enabled \"prefers-reduced-motion: reduce\"\n * in their OS or browser settings. SSR-safe — defaults to false.\n */\nexport function useReducedMotion(): boolean {\n  const [reduced, setReduced] = useState(false)\n\n  useEffect(() => {\n    const mql = globalThis.matchMedia('(prefers-reduced-motion: reduce)')\n    setReduced(mql.matches)\n\n    function onChange(e: MediaQueryListEvent) {\n      setReduced(e.matches)\n    }\n\n    mql.addEventListener('change', onChange)\n    return () => mql.removeEventListener('change', onChange)\n  }, [])\n\n  return reduced\n}\n"],"mappings":"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","names":["import_react","import_react","import_react","Image"]}

package/dist/index.d.cts

@@ -0,0 +1,106 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type HeroImage = {
+    /** Image URL */
+    src: string;
+    /** Dominant color as "r, g, b" string — used for vignette and fallback bg */
+    color: string;
+};
+type HeroSceneProps = {
+    /** Array of images to rotate through */
+    images: HeroImage[];
+    /** Index of the initial image to show. Default: 0 */
+    initialIndex?: number;
+    /** Rotation interval in ms. 0 disables rotation. Default: 30000 */
+    interval?: number;
+    /** Image transition duration in ms. Default: 700 */
+    transitionDuration?: number;
+    /** Extra className for the container */
+    className?: string;
+    /** Callback when the active image index changes */
+    onIndexChange?: (index: number) => void;
+    /** Compound children — HeroScene.Parallax, HeroScene.Vignette, etc. */
+    children?: React.ReactNode;
+};
+type ParallaxProps = {
+    /** Vertical parallax speed (0 = fixed, 1 = normal scroll). Default: 0.4 */
+    speed?: number;
+    /** Max horizontal shift from mouse in px. Default: 25 */
+    mouseShiftX?: number;
+    /** Max vertical shift from mouse in px. Default: 15 */
+    mouseShiftY?: number;
+    /** Mouse follow lerp factor (0-1, lower = smoother). Default: 0.04 */
+    mouseLerp?: number;
+};
+type VignetteProps = {
+    /** Vignette shape center X position (%). Default: 50 */
+    centerX?: number;
+    /** Vignette shape center Y position (%). Default: 100 */
+    centerY?: number;
+    /** Vignette shape type. Default: 'circle' */
+    shape?: 'circle' | 'ellipse';
+    /** Opacity stops — array of [percentage, opacity] pairs from center to edge.
+     *  Default: [[0, 0], [15, 0.08], [30, 0.15], [45, 0.25], [60, 0.35], [75, 0.45], [88, 0.55], [100, 0.6]] */
+    stops?: [number, number][];
+    /** Transition duration in ms when color changes. Default: 1000 */
+    transitionDuration?: number;
+};
+type BlurProps = {
+    /** Blur amount in px. Default: 24 (backdrop-blur-xl) */
+    amount?: number;
+    /** Blur mask center X (%). Default: 50 */
+    centerX?: number;
+    /** Blur mask center Y (%). Default: 65 */
+    centerY?: number;
+    /** Inner radius where blur starts (%). Default: 15 */
+    innerRadius?: number;
+    /** Outer radius where blur is full (%). Default: 55 */
+    outerRadius?: number;
+};
+type PatternProps = {
+    /** Dot size in px. Default: 1 */
+    dotSize?: number;
+    /** Grid spacing in px. Default: 20 */
+    spacing?: number;
+    /** Dot color for light mode. Default: 'rgba(0 0 0 / 0.15)' */
+    lightColor?: string;
+    /** Dot color for dark mode. Default: 'rgba(255 255 255 / 0.1)' */
+    darkColor?: string;
+};
+type DarkOverlayProps = {
+    /** Overlay opacity. Default: 0.4 */
+    opacity?: number;
+};
+type ContentProps = {
+    /** Extra className for the content wrapper */
+    className?: string;
+    /** Content to render above all layers */
+    children?: React.ReactNode;
+};
+
+declare function HeroSceneRoot({ images, initialIndex, interval, transitionDuration, className, onIndexChange, children, }: HeroSceneProps): react_jsx_runtime.JSX.Element;
+declare function Parallax({ speed, mouseShiftX, mouseShiftY, mouseLerp, }: ParallaxProps): null;
+declare function Vignette({ centerX, centerY, shape, stops, transitionDuration, }: VignetteProps): react_jsx_runtime.JSX.Element;
+declare function Blur({ amount, centerX, centerY, innerRadius, outerRadius, }: BlurProps): react_jsx_runtime.JSX.Element;
+declare function Pattern({ dotSize, spacing, lightColor, darkColor, }: PatternProps): react_jsx_runtime.JSX.Element;
+declare function DarkOverlay({ opacity }: DarkOverlayProps): react_jsx_runtime.JSX.Element;
+declare function Content({ className, children }: ContentProps): react_jsx_runtime.JSX.Element;
+declare const HeroScene: typeof HeroSceneRoot & {
+    Parallax: typeof Parallax;
+    Vignette: typeof Vignette;
+    Blur: typeof Blur;
+    Pattern: typeof Pattern;
+    DarkOverlay: typeof DarkOverlay;
+    Content: typeof Content;
+};
+
+declare function buildVignetteGradient(color: string, config: Pick<VignetteProps, 'shape' | 'centerX' | 'centerY' | 'stops'>): string;
+declare function buildBlurMask(config: Pick<BlurProps, 'centerX' | 'centerY' | 'innerRadius' | 'outerRadius'>): string;
+
+/**
+ * Returns true when the user has enabled "prefers-reduced-motion: reduce"
+ * in their OS or browser settings. SSR-safe — defaults to false.
+ */
+declare function useReducedMotion(): boolean;
+
+export { type BlurProps, type ContentProps, type DarkOverlayProps, type HeroImage, HeroScene, type HeroSceneProps, type ParallaxProps, type PatternProps, type VignetteProps, buildBlurMask, buildVignetteGradient, useReducedMotion };

package/dist/index.d.ts

@@ -0,0 +1,106 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type HeroImage = {
+    /** Image URL */
+    src: string;
+    /** Dominant color as "r, g, b" string — used for vignette and fallback bg */
+    color: string;
+};
+type HeroSceneProps = {
+    /** Array of images to rotate through */
+    images: HeroImage[];
+    /** Index of the initial image to show. Default: 0 */
+    initialIndex?: number;
+    /** Rotation interval in ms. 0 disables rotation. Default: 30000 */
+    interval?: number;
+    /** Image transition duration in ms. Default: 700 */
+    transitionDuration?: number;
+    /** Extra className for the container */
+    className?: string;
+    /** Callback when the active image index changes */
+    onIndexChange?: (index: number) => void;
+    /** Compound children — HeroScene.Parallax, HeroScene.Vignette, etc. */
+    children?: React.ReactNode;
+};
+type ParallaxProps = {
+    /** Vertical parallax speed (0 = fixed, 1 = normal scroll). Default: 0.4 */
+    speed?: number;
+    /** Max horizontal shift from mouse in px. Default: 25 */
+    mouseShiftX?: number;
+    /** Max vertical shift from mouse in px. Default: 15 */
+    mouseShiftY?: number;
+    /** Mouse follow lerp factor (0-1, lower = smoother). Default: 0.04 */
+    mouseLerp?: number;
+};
+type VignetteProps = {
+    /** Vignette shape center X position (%). Default: 50 */
+    centerX?: number;
+    /** Vignette shape center Y position (%). Default: 100 */
+    centerY?: number;
+    /** Vignette shape type. Default: 'circle' */
+    shape?: 'circle' | 'ellipse';
+    /** Opacity stops — array of [percentage, opacity] pairs from center to edge.
+     *  Default: [[0, 0], [15, 0.08], [30, 0.15], [45, 0.25], [60, 0.35], [75, 0.45], [88, 0.55], [100, 0.6]] */
+    stops?: [number, number][];
+    /** Transition duration in ms when color changes. Default: 1000 */
+    transitionDuration?: number;
+};
+type BlurProps = {
+    /** Blur amount in px. Default: 24 (backdrop-blur-xl) */
+    amount?: number;
+    /** Blur mask center X (%). Default: 50 */
+    centerX?: number;
+    /** Blur mask center Y (%). Default: 65 */
+    centerY?: number;
+    /** Inner radius where blur starts (%). Default: 15 */
+    innerRadius?: number;
+    /** Outer radius where blur is full (%). Default: 55 */
+    outerRadius?: number;
+};
+type PatternProps = {
+    /** Dot size in px. Default: 1 */
+    dotSize?: number;
+    /** Grid spacing in px. Default: 20 */
+    spacing?: number;
+    /** Dot color for light mode. Default: 'rgba(0 0 0 / 0.15)' */
+    lightColor?: string;
+    /** Dot color for dark mode. Default: 'rgba(255 255 255 / 0.1)' */
+    darkColor?: string;
+};
+type DarkOverlayProps = {
+    /** Overlay opacity. Default: 0.4 */
+    opacity?: number;
+};
+type ContentProps = {
+    /** Extra className for the content wrapper */
+    className?: string;
+    /** Content to render above all layers */
+    children?: React.ReactNode;
+};
+
+declare function HeroSceneRoot({ images, initialIndex, interval, transitionDuration, className, onIndexChange, children, }: HeroSceneProps): react_jsx_runtime.JSX.Element;
+declare function Parallax({ speed, mouseShiftX, mouseShiftY, mouseLerp, }: ParallaxProps): null;
+declare function Vignette({ centerX, centerY, shape, stops, transitionDuration, }: VignetteProps): react_jsx_runtime.JSX.Element;
+declare function Blur({ amount, centerX, centerY, innerRadius, outerRadius, }: BlurProps): react_jsx_runtime.JSX.Element;
+declare function Pattern({ dotSize, spacing, lightColor, darkColor, }: PatternProps): react_jsx_runtime.JSX.Element;
+declare function DarkOverlay({ opacity }: DarkOverlayProps): react_jsx_runtime.JSX.Element;
+declare function Content({ className, children }: ContentProps): react_jsx_runtime.JSX.Element;
+declare const HeroScene: typeof HeroSceneRoot & {
+    Parallax: typeof Parallax;
+    Vignette: typeof Vignette;
+    Blur: typeof Blur;
+    Pattern: typeof Pattern;
+    DarkOverlay: typeof DarkOverlay;
+    Content: typeof Content;
+};
+
+declare function buildVignetteGradient(color: string, config: Pick<VignetteProps, 'shape' | 'centerX' | 'centerY' | 'stops'>): string;
+declare function buildBlurMask(config: Pick<BlurProps, 'centerX' | 'centerY' | 'innerRadius' | 'outerRadius'>): string;
+
+/**
+ * Returns true when the user has enabled "prefers-reduced-motion: reduce"
+ * in their OS or browser settings. SSR-safe — defaults to false.
+ */
+declare function useReducedMotion(): boolean;
+
+export { type BlurProps, type ContentProps, type DarkOverlayProps, type HeroImage, HeroScene, type HeroSceneProps, type ParallaxProps, type PatternProps, type VignetteProps, buildBlurMask, buildVignetteGradient, useReducedMotion };

package/dist/index.js

@@ -0,0 +1,385 @@
+"use client";
+
+// src/hero-scene.tsx
+import Image from "next/image";
+import { useEffect as useEffect3, useRef, useState as useState3 } from "react";
+
+// src/hero-scene-context.ts
+import { createContext, useContext } from "react";
+var HeroSceneContext = createContext(null);
+function useHeroScene() {
+  const ctx = useContext(HeroSceneContext);
+  if (!ctx) {
+    throw new Error(
+      "HeroScene compound components (Parallax, Vignette, Blur, Pattern, DarkOverlay, Content) must be rendered inside a <HeroScene> parent."
+    );
+  }
+  return ctx;
+}
+
+// src/utils.ts
+var DEFAULT_STOPS = [
+  [0, 0],
+  [15, 0.08],
+  [30, 0.15],
+  [45, 0.25],
+  [60, 0.35],
+  [75, 0.45],
+  [88, 0.55],
+  [100, 0.6]
+];
+function buildVignetteGradient(color, config) {
+  const shape = config.shape ?? "circle";
+  const cx = config.centerX ?? 50;
+  const cy = config.centerY ?? 100;
+  const stops = config.stops ?? DEFAULT_STOPS;
+  const gradientStops = stops.map(
+    ([pos, opacity]) => opacity === 0 ? `transparent ${pos}%` : `color-mix(in srgb, rgb(${color}) ${Math.round(opacity * 100)}%, transparent) ${pos}%`
+  ).join(", ");
+  return `radial-gradient(${shape} at ${cx}% ${cy}%, ${gradientStops})`;
+}
+function buildBlurMask(config) {
+  const cx = config.centerX ?? 50;
+  const cy = config.centerY ?? 65;
+  const inner = config.innerRadius ?? 15;
+  const outer = config.outerRadius ?? 55;
+  return `radial-gradient(circle at ${cx}% ${cy}%, transparent ${inner}%, black ${outer}%)`;
+}
+
+// src/use-in-viewport.ts
+import { useEffect, useState } from "react";
+function useInViewport(ref) {
+  const [inViewport, setInViewport] = useState(true);
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        setInViewport(entry.isIntersecting);
+      },
+      { threshold: 0 }
+    );
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [ref]);
+  return inViewport;
+}
+
+// src/use-reduced-motion.ts
+import { useEffect as useEffect2, useState as useState2 } from "react";
+function useReducedMotion() {
+  const [reduced, setReduced] = useState2(false);
+  useEffect2(() => {
+    const mql = globalThis.matchMedia("(prefers-reduced-motion: reduce)");
+    setReduced(mql.matches);
+    function onChange(e) {
+      setReduced(e.matches);
+    }
+    mql.addEventListener("change", onChange);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+  return reduced;
+}
+
+// src/hero-scene.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function HeroSceneRoot({
+  images,
+  initialIndex = 0,
+  interval = 3e4,
+  transitionDuration = 700,
+  className,
+  onIndexChange,
+  children
+}) {
+  const [index, setIndex] = useState3(initialIndex);
+  const rootRef = useRef(null);
+  const reducedMotion = useReducedMotion();
+  const isInViewport = useInViewport(rootRef);
+  useEffect3(() => {
+    if (interval <= 0 || images.length <= 1) return;
+    let current = initialIndex;
+    const id = setInterval(() => {
+      const next = (current + 1) % images.length;
+      current = next;
+      setIndex(next);
+      setTimeout(() => {
+        onIndexChange?.(next);
+      }, 0);
+    }, interval);
+    return () => clearInterval(id);
+  }, [initialIndex, interval, images.length, onIndexChange]);
+  const activeColor = images[index]?.color ?? "128, 128, 128";
+  return /* @__PURE__ */ jsx(
+    HeroSceneContext.Provider,
+    {
+      value: {
+        images,
+        index,
+        transitionDuration,
+        reducedMotion,
+        isInViewport,
+        containerRef: rootRef
+      },
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: rootRef,
+          className,
+          style: { position: "relative", overflow: "hidden" },
+          children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                "data-hero-images": "",
+                "aria-hidden": "true",
+                style: {
+                  position: "absolute",
+                  inset: 0,
+                  backgroundColor: `rgb(${activeColor})`,
+                  transition: reducedMotion ? "none" : "background-color 1s ease"
+                },
+                children: images.map((img, i) => /* @__PURE__ */ jsx(
+                  Image,
+                  {
+                    src: img.src,
+                    alt: "",
+                    width: 1920,
+                    height: 1080,
+                    priority: i === initialIndex,
+                    sizes: "100vw",
+                    style: {
+                      position: "absolute",
+                      inset: 0,
+                      width: "100%",
+                      height: "100%",
+                      objectFit: "cover",
+                      opacity: i === index ? 1 : 0,
+                      transition: reducedMotion ? "none" : `opacity ${transitionDuration}ms ease`
+                    }
+                  },
+                  img.src
+                ))
+              }
+            ),
+            children
+          ]
+        }
+      )
+    }
+  );
+}
+function Parallax({
+  speed = 0.4,
+  mouseShiftX = 25,
+  mouseShiftY = 15,
+  mouseLerp = 0.04
+}) {
+  const { reducedMotion, isInViewport, containerRef } = useHeroScene();
+  const scrollY = useRef(0);
+  const targetMouseX = useRef(0);
+  const targetMouseY = useRef(0);
+  const currentMouseX = useRef(0);
+  const currentMouseY = useRef(0);
+  useEffect3(() => {
+    if (reducedMotion) return;
+    const root = containerRef.current;
+    if (!root) return;
+    const imagesEl = root.querySelector("[data-hero-images]");
+    if (!imagesEl) return;
+    imagesEl.style.inset = "-15%";
+    imagesEl.style.willChange = "transform";
+    return () => {
+      imagesEl.style.inset = "0";
+      imagesEl.style.willChange = "";
+      imagesEl.style.transform = "";
+    };
+  }, [reducedMotion, containerRef]);
+  useEffect3(() => {
+    if (reducedMotion) return;
+    const root = containerRef.current;
+    if (!root) return;
+    const imagesEl = root.querySelector("[data-hero-images]");
+    if (!imagesEl) return;
+    let rafId;
+    let running = true;
+    function loop() {
+      if (!running) return;
+      currentMouseX.current += (targetMouseX.current - currentMouseX.current) * mouseLerp;
+      currentMouseY.current += (targetMouseY.current - currentMouseY.current) * mouseLerp;
+      const y = scrollY.current * speed;
+      const mx = currentMouseX.current * mouseShiftX;
+      const my = currentMouseY.current * mouseShiftY;
+      imagesEl.style.transform = `translate3d(${mx}px, ${y + my}px, 0)`;
+      rafId = requestAnimationFrame(loop);
+    }
+    function onScroll() {
+      if (!isInViewport) return;
+      scrollY.current = globalThis.scrollY;
+    }
+    function onMouseMove(e) {
+      if (!isInViewport) return;
+      targetMouseX.current = (e.clientX / globalThis.innerWidth - 0.5) * 2;
+      targetMouseY.current = (e.clientY / globalThis.innerHeight - 0.5) * 2;
+    }
+    globalThis.addEventListener("scroll", onScroll, { passive: true });
+    globalThis.addEventListener("mousemove", onMouseMove, { passive: true });
+    rafId = requestAnimationFrame(loop);
+    return () => {
+      running = false;
+      globalThis.removeEventListener("scroll", onScroll);
+      globalThis.removeEventListener("mousemove", onMouseMove);
+      cancelAnimationFrame(rafId);
+    };
+  }, [
+    reducedMotion,
+    isInViewport,
+    containerRef,
+    speed,
+    mouseShiftX,
+    mouseShiftY,
+    mouseLerp
+  ]);
+  return null;
+}
+function Vignette({
+  centerX = 50,
+  centerY = 100,
+  shape = "circle",
+  stops,
+  transitionDuration = 1e3
+}) {
+  const { images, index, reducedMotion } = useHeroScene();
+  const transitionMs = reducedMotion ? "0ms" : `${transitionDuration}ms`;
+  return /* @__PURE__ */ jsx(Fragment, { children: images.map((img, i) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-hidden": "true",
+      style: {
+        position: "absolute",
+        inset: 0,
+        zIndex: 20,
+        pointerEvents: "none",
+        opacity: i === index ? 1 : 0,
+        transition: `opacity ${transitionMs} ease`,
+        background: buildVignetteGradient(img.color, {
+          centerX,
+          centerY,
+          shape,
+          stops
+        })
+      }
+    },
+    `vignette-${img.color}`
+  )) });
+}
+function Blur({
+  amount = 24,
+  centerX = 50,
+  centerY = 65,
+  innerRadius = 15,
+  outerRadius = 55
+}) {
+  useHeroScene();
+  const mask = buildBlurMask({ centerX, centerY, innerRadius, outerRadius });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-hidden": "true",
+      style: {
+        position: "absolute",
+        inset: 0,
+        zIndex: 15,
+        backdropFilter: `blur(${amount}px)`,
+        WebkitBackdropFilter: `blur(${amount}px)`,
+        maskImage: mask,
+        WebkitMaskImage: mask,
+        pointerEvents: "none"
+      }
+    }
+  );
+}
+function Pattern({
+  dotSize = 1,
+  spacing = 20,
+  lightColor = "rgba(0 0 0 / 0.15)",
+  darkColor = "rgba(255 255 255 / 0.1)"
+}) {
+  useHeroScene();
+  const bgImage = (color) => `radial-gradient(circle, ${color} ${dotSize}px, transparent ${dotSize}px)`;
+  const bgSize = `${spacing}px ${spacing}px`;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-hidden": "true",
+        className: "dark:hidden",
+        style: {
+          position: "absolute",
+          inset: 0,
+          zIndex: 20,
+          pointerEvents: "none",
+          backgroundImage: bgImage(lightColor),
+          backgroundSize: bgSize
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-hidden": "true",
+        className: "hidden dark:block",
+        style: {
+          position: "absolute",
+          inset: 0,
+          zIndex: 20,
+          pointerEvents: "none",
+          backgroundImage: bgImage(darkColor),
+          backgroundSize: bgSize
+        }
+      }
+    )
+  ] });
+}
+function DarkOverlay({ opacity = 0.4 }) {
+  useHeroScene();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: "pointer-events-none hidden dark:block",
+      style: {
+        position: "absolute",
+        inset: 0,
+        zIndex: 10,
+        backgroundColor: `rgba(0 0 0 / ${opacity})`
+      }
+    }
+  );
+}
+function Content({ className, children }) {
+  useHeroScene();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className,
+      style: { position: "relative", zIndex: 30 },
+      children
+    }
+  );
+}
+var HeroScene = Object.assign(HeroSceneRoot, {
+  Parallax,
+  Vignette,
+  Blur,
+  Pattern,
+  DarkOverlay,
+  Content
+});
+export {
+  HeroScene,
+  buildBlurMask,
+  buildVignetteGradient,
+  useReducedMotion
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hero-scene.tsx","../src/hero-scene-context.ts","../src/utils.ts","../src/use-in-viewport.ts","../src/use-reduced-motion.ts"],"sourcesContent":["'use client'\n\nimport Image from 'next/image'\nimport { useEffect, useRef, useState } from 'react'\n\nimport { HeroSceneContext, useHeroScene } from './hero-scene-context'\nimport type {\n  BlurProps,\n  ContentProps,\n  DarkOverlayProps,\n  HeroSceneProps,\n  ParallaxProps,\n  PatternProps,\n  VignetteProps,\n} from './types'\nimport { buildBlurMask, buildVignetteGradient } from './utils'\nimport { useInViewport } from './use-in-viewport'\nimport { useReducedMotion } from './use-reduced-motion'\n\n// ─── Root Component ──────────────────────────────────────────\n\nfunction HeroSceneRoot({\n  images,\n  initialIndex = 0,\n  interval = 30_000,\n  transitionDuration = 700,\n  className,\n  onIndexChange,\n  children,\n}: HeroSceneProps) {\n  const [index, setIndex] = useState(initialIndex)\n  const rootRef = useRef<HTMLDivElement>(null)\n  const reducedMotion = useReducedMotion()\n  const isInViewport = useInViewport(rootRef)\n\n  // ── Image rotation ──\n  useEffect(() => {\n    if (interval <= 0 || images.length <= 1) return\n\n    let current = initialIndex\n    const id = setInterval(() => {\n      const next = (current + 1) % images.length\n      current = next\n      setIndex(next)\n      setTimeout(() => {\n        onIndexChange?.(next)\n      }, 0)\n    }, interval)\n    return () => clearInterval(id)\n  }, [initialIndex, interval, images.length, onIndexChange])\n\n  const activeColor = images[index]?.color ?? '128, 128, 128'\n\n  return (\n    <HeroSceneContext.Provider\n      value={{\n        images,\n        index,\n        transitionDuration,\n        reducedMotion,\n        isInViewport,\n        containerRef: rootRef,\n      }}\n    >\n      <div\n        ref={rootRef}\n        className={className}\n        style={{ position: 'relative', overflow: 'hidden' }}\n      >\n        {/* ── Background images (no parallax — Parallax child wraps these) ── */}\n        <div\n          data-hero-images=\"\"\n          aria-hidden=\"true\"\n          style={{\n            position: 'absolute',\n            inset: 0,\n            backgroundColor: `rgb(${activeColor})`,\n            transition: reducedMotion ? 'none' : 'background-color 1s ease',\n          }}\n        >\n          {images.map((img, i) => (\n            <Image\n              key={img.src}\n              src={img.src}\n              alt=\"\"\n              width={1920}\n              height={1080}\n              priority={i === initialIndex}\n              sizes=\"100vw\"\n              style={{\n                position: 'absolute',\n                inset: 0,\n                width: '100%',\n                height: '100%',\n                objectFit: 'cover',\n                opacity: i === index ? 1 : 0,\n                transition: reducedMotion\n                  ? 'none'\n                  : `opacity ${transitionDuration}ms ease`,\n              }}\n            />\n          ))}\n        </div>\n\n        {children}\n      </div>\n    </HeroSceneContext.Provider>\n  )\n}\n\n// ─── Parallax ────────────────────────────────────────────────\n\nfunction Parallax({\n  speed = 0.4,\n  mouseShiftX = 25,\n  mouseShiftY = 15,\n  mouseLerp = 0.04,\n}: ParallaxProps) {\n  const { reducedMotion, isInViewport, containerRef } = useHeroScene()\n\n  const scrollY = useRef(0)\n  const targetMouseX = useRef(0)\n  const targetMouseY = useRef(0)\n  const currentMouseX = useRef(0)\n  const currentMouseY = useRef(0)\n\n  useEffect(() => {\n    if (reducedMotion) return\n\n    const root = containerRef.current\n    if (!root) return\n\n    const imagesEl = root.querySelector<HTMLDivElement>('[data-hero-images]')\n    if (!imagesEl) return\n\n    // Expand the images container to allow parallax overflow\n    imagesEl.style.inset = '-15%'\n    imagesEl.style.willChange = 'transform'\n\n    return () => {\n      imagesEl.style.inset = '0'\n      imagesEl.style.willChange = ''\n      imagesEl.style.transform = ''\n    }\n  }, [reducedMotion, containerRef])\n\n  useEffect(() => {\n    if (reducedMotion) return\n\n    const root = containerRef.current\n    if (!root) return\n\n    const imagesEl = root.querySelector<HTMLDivElement>('[data-hero-images]')\n    if (!imagesEl) return\n\n    let rafId: number\n    let running = true\n\n    function loop() {\n      if (!running) return\n\n      currentMouseX.current +=\n        (targetMouseX.current - currentMouseX.current) * mouseLerp\n      currentMouseY.current +=\n        (targetMouseY.current - currentMouseY.current) * mouseLerp\n\n      const y = scrollY.current * speed\n      const mx = currentMouseX.current * mouseShiftX\n      const my = currentMouseY.current * mouseShiftY\n      imagesEl!.style.transform = `translate3d(${mx}px, ${y + my}px, 0)`\n\n      rafId = requestAnimationFrame(loop)\n    }\n\n    function onScroll() {\n      if (!isInViewport) return\n      scrollY.current = globalThis.scrollY\n    }\n\n    function onMouseMove(e: MouseEvent) {\n      if (!isInViewport) return\n      targetMouseX.current = (e.clientX / globalThis.innerWidth - 0.5) * 2\n      targetMouseY.current = (e.clientY / globalThis.innerHeight - 0.5) * 2\n    }\n\n    globalThis.addEventListener('scroll', onScroll, { passive: true })\n    globalThis.addEventListener('mousemove', onMouseMove, { passive: true })\n    rafId = requestAnimationFrame(loop)\n\n    return () => {\n      running = false\n      globalThis.removeEventListener('scroll', onScroll)\n      globalThis.removeEventListener('mousemove', onMouseMove)\n      cancelAnimationFrame(rafId)\n    }\n  }, [\n    reducedMotion,\n    isInViewport,\n    containerRef,\n    speed,\n    mouseShiftX,\n    mouseShiftY,\n    mouseLerp,\n  ])\n\n  // Parallax is a behavior-only component — renders nothing\n  return null\n}\n\n// ─── Vignette ────────────────────────────────────────────────\n\nfunction Vignette({\n  centerX = 50,\n  centerY = 100,\n  shape = 'circle',\n  stops,\n  transitionDuration = 1000,\n}: VignetteProps) {\n  const { images, index, reducedMotion } = useHeroScene()\n  const transitionMs = reducedMotion ? '0ms' : `${transitionDuration}ms`\n\n  return (\n    <>\n      {images.map((img, i) => (\n        <div\n          key={`vignette-${img.color}`}\n          aria-hidden=\"true\"\n          style={{\n            position: 'absolute',\n            inset: 0,\n            zIndex: 20,\n            pointerEvents: 'none',\n            opacity: i === index ? 1 : 0,\n            transition: `opacity ${transitionMs} ease`,\n            background: buildVignetteGradient(img.color, {\n              centerX,\n              centerY,\n              shape,\n              stops,\n            }),\n          }}\n        />\n      ))}\n    </>\n  )\n}\n\n// ─── Blur ────────────────────────────────────────────────────\n\nfunction Blur({\n  amount = 24,\n  centerX = 50,\n  centerY = 65,\n  innerRadius = 15,\n  outerRadius = 55,\n}: BlurProps) {\n  useHeroScene() // validate context\n\n  const mask = buildBlurMask({ centerX, centerY, innerRadius, outerRadius })\n\n  return (\n    <div\n      aria-hidden=\"true\"\n      style={{\n        position: 'absolute',\n        inset: 0,\n        zIndex: 15,\n        backdropFilter: `blur(${amount}px)`,\n        WebkitBackdropFilter: `blur(${amount}px)`,\n        maskImage: mask,\n        WebkitMaskImage: mask,\n        pointerEvents: 'none',\n      }}\n    />\n  )\n}\n\n// ─── Pattern ─────────────────────────────────────────────────\n\nfunction Pattern({\n  dotSize = 1,\n  spacing = 20,\n  lightColor = 'rgba(0 0 0 / 0.15)',\n  darkColor = 'rgba(255 255 255 / 0.1)',\n}: PatternProps) {\n  useHeroScene() // validate context\n\n  const bgImage = (color: string) =>\n    `radial-gradient(circle, ${color} ${dotSize}px, transparent ${dotSize}px)`\n  const bgSize = `${spacing}px ${spacing}px`\n\n  return (\n    <>\n      <div\n        aria-hidden=\"true\"\n        className=\"dark:hidden\"\n        style={{\n          position: 'absolute',\n          inset: 0,\n          zIndex: 20,\n          pointerEvents: 'none',\n          backgroundImage: bgImage(lightColor),\n          backgroundSize: bgSize,\n        }}\n      />\n      <div\n        aria-hidden=\"true\"\n        className=\"hidden dark:block\"\n        style={{\n          position: 'absolute',\n          inset: 0,\n          zIndex: 20,\n          pointerEvents: 'none',\n          backgroundImage: bgImage(darkColor),\n          backgroundSize: bgSize,\n        }}\n      />\n    </>\n  )\n}\n\n// ─── DarkOverlay ─────────────────────────────────────────────\n\nfunction DarkOverlay({ opacity = 0.4 }: DarkOverlayProps) {\n  useHeroScene() // validate context\n\n  return (\n    <div\n      aria-hidden=\"true\"\n      className=\"pointer-events-none hidden dark:block\"\n      style={{\n        position: 'absolute',\n        inset: 0,\n        zIndex: 10,\n        backgroundColor: `rgba(0 0 0 / ${opacity})`,\n      }}\n    />\n  )\n}\n\n// ─── Content ─────────────────────────────────────────────────\n\nfunction Content({ className, children }: ContentProps) {\n  useHeroScene() // validate context\n\n  return (\n    <div\n      className={className}\n      style={{ position: 'relative', zIndex: 30 }}\n    >\n      {children}\n    </div>\n  )\n}\n\n// ─── Compound export ─────────────────────────────────────────\n\nexport const HeroScene = Object.assign(HeroSceneRoot, {\n  Parallax,\n  Vignette,\n  Blur,\n  Pattern,\n  DarkOverlay,\n  Content,\n})\n","'use client'\n\nimport { createContext, useContext } from 'react'\nimport type { HeroSceneContextValue } from './types'\n\nexport const HeroSceneContext = createContext<HeroSceneContextValue | null>(null)\n\nexport function useHeroScene(): HeroSceneContextValue {\n  const ctx = useContext(HeroSceneContext)\n  if (!ctx) {\n    throw new Error(\n      'HeroScene compound components (Parallax, Vignette, Blur, Pattern, DarkOverlay, Content) ' +\n        'must be rendered inside a <HeroScene> parent.',\n    )\n  }\n  return ctx\n}\n","import type { VignetteProps, BlurProps } from './types'\n\nconst DEFAULT_STOPS: [number, number][] = [\n  [0, 0],\n  [15, 0.08],\n  [30, 0.15],\n  [45, 0.25],\n  [60, 0.35],\n  [75, 0.45],\n  [88, 0.55],\n  [100, 0.6],\n]\n\nexport function buildVignetteGradient(\n  color: string,\n  config: Pick<VignetteProps, 'shape' | 'centerX' | 'centerY' | 'stops'>,\n): string {\n  const shape = config.shape ?? 'circle'\n  const cx = config.centerX ?? 50\n  const cy = config.centerY ?? 100\n  const stops = config.stops ?? DEFAULT_STOPS\n\n  const gradientStops = stops\n    .map(([pos, opacity]) =>\n      opacity === 0\n        ? `transparent ${pos}%`\n        : `color-mix(in srgb, rgb(${color}) ${Math.round(opacity * 100)}%, transparent) ${pos}%`,\n    )\n    .join(', ')\n\n  return `radial-gradient(${shape} at ${cx}% ${cy}%, ${gradientStops})`\n}\n\nexport function buildBlurMask(\n  config: Pick<BlurProps, 'centerX' | 'centerY' | 'innerRadius' | 'outerRadius'>,\n): string {\n  const cx = config.centerX ?? 50\n  const cy = config.centerY ?? 65\n  const inner = config.innerRadius ?? 15\n  const outer = config.outerRadius ?? 55\n\n  return `radial-gradient(circle at ${cx}% ${cy}%, transparent ${inner}%, black ${outer}%)`\n}\n","'use client'\n\nimport { useEffect, useState } from 'react'\nimport type { RefObject } from 'react'\n\n/**\n * Returns true when the referenced element is at least partially visible\n * in the viewport, using IntersectionObserver. SSR-safe — defaults to true\n * so effects run immediately on first paint before the observer fires.\n */\nexport function useInViewport(ref: RefObject<HTMLElement | null>): boolean {\n  const [inViewport, setInViewport] = useState(true)\n\n  useEffect(() => {\n    const el = ref.current\n    if (!el) return\n\n    const observer = new IntersectionObserver(\n      ([entry]) => {\n        setInViewport(entry.isIntersecting)\n      },\n      { threshold: 0 },\n    )\n\n    observer.observe(el)\n    return () => observer.disconnect()\n  }, [ref])\n\n  return inViewport\n}\n","'use client'\n\nimport { useEffect, useState } from 'react'\n\n/**\n * Returns true when the user has enabled \"prefers-reduced-motion: reduce\"\n * in their OS or browser settings. SSR-safe — defaults to false.\n */\nexport function useReducedMotion(): boolean {\n  const [reduced, setReduced] = useState(false)\n\n  useEffect(() => {\n    const mql = globalThis.matchMedia('(prefers-reduced-motion: reduce)')\n    setReduced(mql.matches)\n\n    function onChange(e: MediaQueryListEvent) {\n      setReduced(e.matches)\n    }\n\n    mql.addEventListener('change', onChange)\n    return () => mql.removeEventListener('change', onChange)\n  }, [])\n\n  return reduced\n}\n"],"mappings":"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","names":["useEffect","useState","useEffect","useState","useState","useEffect"]}

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@okinoxis/hero-scene",
+  "version": "0.2.0",
+  "description": "Cinematic hero sections for Next.js — compound component API with image rotation, parallax, vignette overlays, blur masks, and dot patterns.",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "files": ["dist"],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "publint": "publint",
+    "size": "size-limit",
+    "prepublishOnly": "npm run build && npm run publint && npm run size"
+  },
+  "size-limit": [
+    {
+      "path": "./dist/index.js",
+      "limit": "10 KB"
+    }
+  ],
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "next": ">=14.0.0"
+  },
+  "devDependencies": {
+    "@size-limit/preset-small-lib": "^11.2.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "next": "^16.1.6",
+    "publint": "^0.3.12",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "size-limit": "^11.2.0",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3"
+  },
+  "keywords": [
+    "hero",
+    "parallax",
+    "vignette",
+    "nextjs",
+    "react",
+    "cinematic",
+    "compound-component"
+  ],
+  "license": "MIT"
+}