@morphika/webframe 0.1.0

package/components/blocks/ParallaxSlideRenderer.tsx

@@ -0,0 +1,175 @@
+"use client";
+
+/**
+ * ParallaxSlideRenderer — renders a single parallax slide on the public site.
+ *
+ * Two-layer structure:
+ *   1. Background layer (image or video) with parallax transform + overlay
+ *   2. Content layer — full V2 section rendering via SectionV2Renderer
+ *
+ * Session 126: Created as part of Parallax V2 Phase 4 (Public Site Renderer).
+ */
+
+import { useRef, useMemo } from "react";
+import type { ParallaxSlideV2, PageSectionV2 } from "../../lib/sanity/types";
+import type { EnterAnimationConfig } from "../../lib/animation/enter-types";
+import SectionV2Renderer from "./SectionV2Renderer";
+import { assetUrl } from "../../lib/assets";
+
+interface ParallaxSlideRendererProps {
+  slide: ParallaxSlideV2;
+  /** Transition effect for the group (affects how bg renders) */
+  effect: "parallax" | "crossfade" | "reveal";
+  /** Page-level enter animation (passed through to SectionV2Renderer) */
+  pageEnterAnimation?: EnterAnimationConfig;
+  /** Index of slide within group (for aria labels) */
+  index: number;
+  /** Ref callback to register the bg element for parallax scroll engine */
+  bgRef?: (el: HTMLDivElement | HTMLVideoElement | null) => void;
+  /** Ref callback to register the slide element for snap/intersection */
+  slideRef?: (el: HTMLElement | null) => void;
+  /** Whether parallax transform is disabled (mobile / reduced motion) */
+  disableParallax?: boolean;
+}
+
+export default function ParallaxSlideRenderer({
+  slide,
+  effect,
+  pageEnterAnimation,
+  index,
+  bgRef,
+  slideRef,
+  disableParallax,
+}: ParallaxSlideRendererProps) {
+  const internalSlideRef = useRef<HTMLElement>(null);
+
+  // Build a PageSectionV2-compatible object for SectionV2Renderer
+  const pseudoSection: PageSectionV2 = useMemo(() => ({
+    _type: "pageSectionV2" as const,
+    _key: slide._key,
+    section_type: "empty-v2" as const,
+    columns: slide.columns || [],
+    settings: slide.section_settings || {
+      preset: "full" as const,
+      grid_columns: 12,
+      col_gap: 20,
+      row_gap: 20,
+    },
+  }), [slide._key, slide.columns, slide.section_settings]);
+
+  // Resolve background URL
+  const bgType = slide.background_type || "image";
+  const bgPath = bgType === "video" ? slide.background_video : slide.background_image;
+  const bgUrl = bgPath ? assetUrl(bgPath) : null;
+  const bgPosition = slide.background_position || "center center";
+
+  // Overlay
+  const overlayColor = slide.background_overlay_color || "#000000";
+  const overlayOpacity = slide.background_overlay_opacity ?? 0;
+
+  // Background inner height: 130% for parallax travel room, 100% when static
+  const bgInnerHeight = disableParallax ? "100%" : "130%";
+  // Offset the oversized bg to center it (so parallax moves ±15%)
+  const bgInnerTop = disableParallax ? "0" : "-15%";
+
+  return (
+    <section
+      ref={(el) => {
+        (internalSlideRef as React.MutableRefObject<HTMLElement | null>).current = el;
+        slideRef?.(el);
+      }}
+      className="parallax-slide"
+      aria-label={`Slide ${index + 1}`}
+      style={{
+        height: "100vh",
+        position: "relative",
+        overflow: "hidden",
+      }}
+    >
+      {/* ── Background layer ── */}
+      {bgUrl && (
+        <div
+          style={{
+            position: "absolute",
+            inset: 0,
+            overflow: "hidden",
+            zIndex: 0,
+          }}
+        >
+          {/* Inner bg element — receives parallax transform */}
+          {bgType === "video" ? (
+            <video
+              ref={bgRef as React.Ref<HTMLVideoElement>}
+              src={bgUrl}
+              autoPlay
+              muted
+              loop
+              playsInline
+              aria-hidden="true"
+              data-parallax-bg=""
+              style={{
+                position: "absolute",
+                top: bgInnerTop,
+                left: 0,
+                width: "100%",
+                height: bgInnerHeight,
+                objectFit: "cover",
+                objectPosition: bgPosition,
+                willChange: disableParallax ? undefined : "transform",
+              }}
+            />
+          ) : (
+            <div
+              ref={bgRef}
+              role="presentation"
+              aria-hidden="true"
+              data-parallax-bg=""
+              style={{
+                position: "absolute",
+                top: bgInnerTop,
+                left: 0,
+                width: "100%",
+                height: bgInnerHeight,
+                backgroundImage: `url(${bgUrl})`,
+                backgroundSize: "cover",
+                backgroundPosition: bgPosition,
+                backgroundRepeat: "no-repeat",
+                willChange: disableParallax ? undefined : "transform",
+              }}
+            />
+          )}
+
+          {/* Overlay */}
+          {overlayOpacity > 0 && (
+            <div
+              style={{
+                position: "absolute",
+                inset: 0,
+                backgroundColor: overlayColor,
+                opacity: overlayOpacity / 100,
+                zIndex: 1,
+              }}
+            />
+          )}
+        </div>
+      )}
+
+      {/* ── Content layer — full V2 section ── */}
+      <div
+        style={{
+          position: "relative",
+          zIndex: 2,
+          height: "100%",
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "center",
+        }}
+      >
+        <SectionV2Renderer
+          section={pseudoSection}
+          pageEnterAnimation={pageEnterAnimation}
+        />
+      </div>
+    </section>
+  );
+}