@morphika/webframe 0.1.0

package/components/blocks/PageRenderer.tsx

@@ -0,0 +1,142 @@
+import type { Page, ContentBlock, ContentItem, PageSection, PageSectionV2, SectionColumn, CustomSectionInstance, ParallaxGroup } from "../../lib/sanity/types";
+import { isPageSection, isPageSectionV2, isCustomSectionInstance, isParallaxGroup } from "../../lib/sanity/types";
+import SectionRenderer from "./SectionRenderer";
+import SectionV2Renderer from "./SectionV2Renderer";
+import CustomSectionInstanceRenderer from "./CustomSectionInstanceRenderer";
+import ParallaxGroupRenderer from "./ParallaxGroupRenderer";
+import { PageNavColor } from "./PageNavColor";
+import { PageNavAnimation } from "./PageNavAnimation";
+import { PageBackground } from "./PageBackground";
+import { assetUrl } from "../../lib/assets";
+
+/**
+ * Find the first image-bearing block (CoverBlock or ImageBlock) in the page.
+ * Used to inject <link rel="preload"> for the above-the-fold hero image,
+ * reducing LCP by 200–500ms on mobile.
+ */
+/** Check a single block for an image/cover path */
+function getBlockImagePath(block: ContentBlock): string | null {
+  if (block._type === "coverBlock") {
+    const cover = block as Extract<ContentBlock, { _type: "coverBlock" }>;
+    if (cover.media_type !== "video" && cover.media_path) {
+      return cover.media_path;
+    }
+  }
+  if (block._type === "imageBlock") {
+    const img = block as Extract<ContentBlock, { _type: "imageBlock" }>;
+    if (img.asset_path) {
+      return img.asset_path;
+    }
+  }
+  return null;
+}
+
+function findFirstImagePath(items: ContentItem[]): string | null {
+  for (const item of items) {
+    if (isPageSection(item)) {
+      // Check inside PageSection blocks for image/cover blocks
+      const section = item as PageSection;
+      const sectionBlock = Array.isArray(section.block) ? section.block[0] : undefined;
+      if (sectionBlock) {
+        const path = getBlockImagePath(sectionBlock as unknown as ContentBlock);
+        if (path) return path;
+      }
+      continue;
+    }
+    if (isParallaxGroup(item)) {
+      // Check first slide's background image for preloading
+      const group = item as ParallaxGroup;
+      const firstSlide = group.slides?.[0];
+      if (firstSlide?.background_type !== "video" && firstSlide?.background_image) {
+        return firstSlide.background_image;
+      }
+      // Also check first slide's content blocks
+      if (firstSlide?.columns) {
+        for (const col of firstSlide.columns) {
+          for (const block of col.blocks || []) {
+            const path = getBlockImagePath(block);
+            if (path) return path;
+          }
+        }
+      }
+      break;
+    }
+    if (isPageSectionV2(item)) {
+      // Check inside V2 section columns for image/cover blocks
+      const section = item as PageSectionV2;
+      for (const col of section.columns || []) {
+        for (const block of col.blocks || []) {
+          const path = getBlockImagePath(block);
+          if (path) return path;
+        }
+      }
+      // Only check the first content item — above-the-fold
+      break;
+    }
+  }
+  return null;
+}
+
+export default function PageRenderer({ page }: { page: Page }) {
+  if (!page.content_rows?.length) {
+    return (
+      <div className="flex min-h-[50vh] items-center justify-center">
+        <p className="font-mono text-sm text-brand-muted">
+          This page has no content yet.
+        </p>
+      </div>
+    );
+  }
+
+  // Find the first image-bearing block for preloading
+  const preloadPath = findFirstImagePath(page.content_rows);
+
+  // Apply page-level settings (background color, text color)
+  const ps = page.page_settings;
+  const pageStyle: React.CSSProperties = {};
+  if (ps?.background_color && ps.background_color !== "transparent") {
+    pageStyle.backgroundColor = ps.background_color;
+  }
+  if (ps?.text_color) {
+    pageStyle.color = ps.text_color;
+  }
+
+  // Page-level enter animation config (passed as prop to section renderers)
+  const pageEnterAnimation = ps?.enter_animation;
+
+  return (
+    <>
+      {/* Preload above-the-fold image to reduce LCP */}
+      {preloadPath && (
+        <link
+          rel="preload"
+          as="image"
+          href={assetUrl(preloadPath)}
+        />
+      )}
+      <article style={Object.keys(pageStyle).length > 0 ? pageStyle : undefined}>
+        {ps?.nav_color && <PageNavColor color={ps.nav_color} />}
+        {(ps?.nav_entrance_animation || ps?.nav_entrance_duration || ps?.nav_entrance_delay || ps?.nav_entrance_disabled) && (
+          <PageNavAnimation
+            preset={ps.nav_entrance_animation}
+            duration={ps.nav_entrance_duration}
+            delay={ps.nav_entrance_delay}
+            disabled={ps.nav_entrance_disabled}
+          />
+        )}
+        <PageBackground color={ps?.background_color} />
+        {page.content_rows.map((item) =>
+          isCustomSectionInstance(item)
+            ? <CustomSectionInstanceRenderer key={item._key} instance={item as CustomSectionInstance} />
+            : isParallaxGroup(item)
+            ? <ParallaxGroupRenderer key={item._key} group={item as ParallaxGroup} pageEnterAnimation={pageEnterAnimation} />
+            : isPageSectionV2(item)
+            ? <SectionV2Renderer key={item._key} section={item as PageSectionV2} pageEnterAnimation={pageEnterAnimation} />
+            : isPageSection(item)
+            ? <SectionRenderer key={item._key} section={item as PageSection} pageEnterAnimation={pageEnterAnimation} />
+            : null
+        )}
+      </article>
+    </>
+  );
+}

package/components/blocks/ParallaxGroupRenderer.tsx

@@ -0,0 +1,448 @@
+"use client";
+
+/**
+ * ParallaxGroupRenderer — renders a group of parallax slides on the public site.
+ *
+ * Features:
+ *   - Parallax scroll engine (background at 40% of scroll speed, GPU-composited)
+ *   - Three transition effects: parallax (default), crossfade, reveal
+ *   - JS-based snap behavior (not CSS scroll-snap — avoids page scroll conflicts)
+ *   - Mobile: parallax disabled on touch devices, static backgrounds
+ *   - Respects prefers-reduced-motion
+ *   - Page exit animations (PageExitContext) work correctly
+ *   - Enter animations work on slide content (via SectionV2Renderer)
+ *
+ * Session 126: Created as part of Parallax V2 Phase 4 (Public Site Renderer).
+ */
+
+import { useRef, useEffect, useCallback } from "react";
+import type { ParallaxGroup } from "../../lib/sanity/types";
+import type { EnterAnimationConfig } from "../../lib/animation/enter-types";
+import { useNavColor } from "../../lib/contexts/NavColorContext";
+import { lerpHex, isValidHex } from "../../lib/color-utils";
+import ParallaxSlideRenderer from "./ParallaxSlideRenderer";
+
+// ── Constants ──
+
+/** Default parallax intensity — background moves at 40% of scroll speed */
+const DEFAULT_PARALLAX_INTENSITY = 0.4;
+
+/** Snap zone: if a slide boundary is within ±15vh of viewport top, snap to it */
+const SNAP_ZONE_VH = 0.15;
+
+/** Debounce time for snap after scroll stops (ms) */
+const SNAP_IDLE_MS = 150;
+
+/** Minimum percentage of viewport the group must occupy to enable snap */
+const SNAP_MIN_VIEWPORT_RATIO = 0.6;
+
+// ── Types ──
+
+interface SlideRefs {
+  slide: HTMLElement | null;
+  bg: HTMLDivElement | HTMLVideoElement | null;
+}
+
+interface ParallaxGroupRendererProps {
+  group: ParallaxGroup;
+  /** Page-level enter animation (passed through to slides) */
+  pageEnterAnimation?: EnterAnimationConfig;
+}
+
+// ── Helpers ──
+
+/** Detect touch device */
+function isTouchDevice(): boolean {
+  if (typeof window === "undefined") return false;
+  return "ontouchstart" in window || navigator.maxTouchPoints > 0;
+}
+
+/** Check prefers-reduced-motion */
+function prefersReducedMotion(): boolean {
+  if (typeof window === "undefined") return false;
+  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+
+// ── Component ──
+
+export default function ParallaxGroupRenderer({
+  group,
+  pageEnterAnimation,
+}: ParallaxGroupRendererProps) {
+  const groupRef = useRef<HTMLDivElement>(null);
+  const slideRefsMap = useRef<Map<string, SlideRefs>>(new Map());
+  const rafId = useRef<number>(0);
+  const snapTimeoutId = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const snapResetTimeoutId = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const isSnapping = useRef(false);
+  const isPointerDown = useRef(false);
+  const disableParallax = useRef(false);
+
+  const { setNavColor } = useNavColor();
+  /** Store the page-level nav color so we can restore it on unmount / when scrolling out */
+  const pageNavColorRef = useRef<string>("");
+
+  const effect = group.transition_effect || "parallax";
+  const snapEnabled = group.snap_enabled !== false;
+  const parallaxIntensity = group.parallax_intensity ?? DEFAULT_PARALLAX_INTENSITY;
+
+  // ── Build slide nav_color lookup (ordered, for interpolation) ──
+  const slideNavColors = (group.slides || []).map((s) => s.nav_color || "");
+
+  // ── Slide ref callbacks ──
+
+  const getSlideRef = useCallback((key: string) => {
+    return (el: HTMLElement | null) => {
+      const entry = slideRefsMap.current.get(key) || { slide: null, bg: null };
+      entry.slide = el;
+      slideRefsMap.current.set(key, entry);
+    };
+  }, []);
+
+  const getBgRef = useCallback((key: string) => {
+    return (el: HTMLDivElement | HTMLVideoElement | null) => {
+      const entry = slideRefsMap.current.get(key) || { slide: null, bg: null };
+      entry.bg = el;
+      slideRefsMap.current.set(key, entry);
+    };
+  }, []);
+
+  // ── Nav color interpolation helper ──
+
+  /**
+   * Compute the interpolated navbar color based on current scroll position.
+   * Uses slide centers: the viewport center's position between two adjacent
+   * slide centers determines the interpolation factor.
+   */
+  const computeNavColor = useCallback((scrollY: number, vh: number): string | null => {
+    const slideKeys = Array.from(slideRefsMap.current.keys());
+    if (slideKeys.length === 0) return null;
+
+    // Check if any slide has a nav_color set at all
+    const hasAnyNavColor = slideNavColors.some((c) => c && isValidHex(c));
+    if (!hasAnyNavColor) return null;
+
+    const viewCenter = scrollY + vh / 2;
+
+    // Build ordered array of {center, color} for each slide
+    const slideData: { center: number; color: string }[] = [];
+    const orderedSlides = group.slides || [];
+    for (let i = 0; i < orderedSlides.length; i++) {
+      const refs = slideRefsMap.current.get(orderedSlides[i]._key);
+      if (!refs?.slide) continue;
+      const el = refs.slide;
+      const center = el.offsetTop + el.offsetHeight / 2;
+      slideData.push({ center, color: slideNavColors[i] || "" });
+    }
+
+    if (slideData.length === 0) return null;
+
+    // If viewport center is before the first slide center, use first slide's color
+    if (viewCenter <= slideData[0].center) {
+      return slideData[0].color && isValidHex(slideData[0].color) ? slideData[0].color : null;
+    }
+
+    // If viewport center is after the last slide center, use last slide's color
+    const last = slideData[slideData.length - 1];
+    if (viewCenter >= last.center) {
+      return last.color && isValidHex(last.color) ? last.color : null;
+    }
+
+    // Find which two slides the viewport center is between
+    for (let i = 0; i < slideData.length - 1; i++) {
+      const a = slideData[i];
+      const b = slideData[i + 1];
+      if (viewCenter >= a.center && viewCenter <= b.center) {
+        const t = (viewCenter - a.center) / (b.center - a.center);
+
+        const colorA = a.color && isValidHex(a.color) ? a.color : null;
+        const colorB = b.color && isValidHex(b.color) ? b.color : null;
+
+        if (colorA && colorB) {
+          return lerpHex(colorA, colorB, t);
+        }
+        // One side has color, the other doesn't — use the one that has it
+        // with a fade: if approaching the no-color slide, we fade back to page color
+        if (colorA && !colorB) return colorA;
+        if (!colorA && colorB) return colorB;
+        return null;
+      }
+    }
+
+    return null;
+  }, [slideNavColors, group.slides]);
+
+  // ── Capture page-level nav color on mount, restore on unmount ──
+
+  useEffect(() => {
+    // Capture whatever the current nav color is (set by PageNavColor or default)
+    // We read it via a small trick: query the nav element's computed color
+    // But simpler: we just capture "" and let PageNavColor handle page-level.
+    // On unmount, reset to "" so PageNavColor can reclaim.
+    return () => {
+      setNavColor("");
+    };
+  }, [setNavColor]);
+
+  // ── Parallax scroll engine ──
+
+  useEffect(() => {
+    // Determine if parallax should be disabled
+    const isTouch = isTouchDevice();
+    const reducedMotion = prefersReducedMotion();
+    disableParallax.current = isTouch || reducedMotion;
+
+    // Nav color updates happen regardless of parallax/animation state
+    const hasNavColors = slideNavColors.some((c) => c && isValidHex(c));
+
+    if (disableParallax.current && !hasNavColors) {
+      // No animation loop needed and no nav color to track
+      return;
+    }
+
+    let ticking = false;
+
+    function onScroll() {
+      if (ticking) return;
+      ticking = true;
+      rafId.current = requestAnimationFrame(() => {
+        ticking = false;
+        updateParallax();
+      });
+    }
+
+    function updateParallax() {
+      const scrollY = window.scrollY;
+      const vh = window.innerHeight;
+
+      // ── Nav color interpolation (runs even on touch / reduced-motion) ──
+      if (hasNavColors) {
+        const groupEl = groupRef.current;
+        if (groupEl) {
+          const groupRect = groupEl.getBoundingClientRect();
+          const groupVisibleHeight = Math.min(groupRect.bottom, vh) - Math.max(groupRect.top, 0);
+          // Only apply nav color when parallax group is significantly in viewport
+          if (groupVisibleHeight / vh > 0.3) {
+            const interpolatedColor = computeNavColor(scrollY, vh);
+            if (interpolatedColor) {
+              setNavColor(interpolatedColor);
+            }
+          } else {
+            // Group is mostly off-screen — clear override so page color takes over
+            setNavColor("");
+          }
+        }
+      }
+
+      // Skip visual parallax effects on touch / reduced-motion
+      if (disableParallax.current) return;
+
+      slideRefsMap.current.forEach((refs) => {
+        const { slide, bg } = refs;
+        if (!slide || !bg) return;
+
+        // Only process slides within ±1 viewport of current scroll position
+        const slideTop = slide.offsetTop;
+        const slideBottom = slideTop + slide.offsetHeight;
+        const viewTop = scrollY - vh;
+        const viewBottom = scrollY + vh * 2;
+
+        if (slideBottom < viewTop || slideTop > viewBottom) return;
+
+        if (effect === "parallax" || effect === "reveal") {
+          // Parallax: translate background based on scroll offset
+          const offset = (scrollY - slideTop) * parallaxIntensity;
+          bg.style.transform = `translate3d(0, ${offset}px, 0)`;
+        }
+
+        if (effect === "crossfade") {
+          // Crossfade: calculate opacity based on slide visibility
+          const slideCenter = slideTop + slide.offsetHeight / 2;
+          const viewCenter = scrollY + vh / 2;
+          const distance = Math.abs(viewCenter - slideCenter);
+          const maxDistance = vh;
+          const opacity = Math.max(0, Math.min(1, 1 - distance / maxDistance));
+          bg.style.opacity = String(opacity);
+        }
+      });
+
+      // Reveal effect: clip-path on slides
+      if (effect === "reveal") {
+        applyRevealEffect(scrollY, vh);
+      }
+    }
+
+    function applyRevealEffect(scrollY: number, vh: number) {
+      const slides = Array.from(slideRefsMap.current.entries());
+      slides.forEach(([, refs], i) => {
+        const { slide } = refs;
+        if (!slide) return;
+
+        const slideTop = slide.offsetTop;
+        const progress = Math.max(0, Math.min(1, (scrollY - slideTop + vh) / vh));
+
+        if (i > 0) {
+          // For slides after the first, reveal from bottom via clip-path
+          // progress: 0 = fully hidden, 1 = fully revealed
+          const clipBottom = Math.max(0, (1 - progress) * 100);
+          slide.style.clipPath = `inset(0 0 ${clipBottom}% 0)`;
+        }
+      });
+    }
+
+    window.addEventListener("scroll", onScroll, { passive: true });
+
+    // Initial update
+    updateParallax();
+
+    return () => {
+      window.removeEventListener("scroll", onScroll);
+      if (rafId.current) cancelAnimationFrame(rafId.current);
+    };
+  }, [effect, parallaxIntensity, slideNavColors, computeNavColor, setNavColor]);
+
+  // ── Crossfade initial state: set opacity=0 for non-first slides ──
+
+  useEffect(() => {
+    if (effect !== "crossfade") return;
+
+    // On mount, set initial opacity for crossfade effect
+    // NOTE: no CSS transition — opacity is updated per-frame by the scroll engine
+    const slides = Array.from(slideRefsMap.current.entries());
+    slides.forEach(([, refs], i) => {
+      if (refs.bg) {
+        refs.bg.style.opacity = i === 0 ? "1" : "0";
+      }
+    });
+  }, [effect]);
+
+  // ── JS-based snap behavior ──
+
+  useEffect(() => {
+    if (!snapEnabled) return;
+    if (prefersReducedMotion()) return;
+
+    function onPointerDown() {
+      isPointerDown.current = true;
+      // Clear any pending snap while user is actively scrolling
+      if (snapTimeoutId.current) {
+        clearTimeout(snapTimeoutId.current);
+        snapTimeoutId.current = null;
+      }
+    }
+
+    function onPointerUp() {
+      isPointerDown.current = false;
+    }
+
+    function onScroll() {
+      if (isSnapping.current || isPointerDown.current) return;
+
+      // Debounce: wait for scroll to idle before attempting snap
+      if (snapTimeoutId.current) {
+        clearTimeout(snapTimeoutId.current);
+      }
+
+      snapTimeoutId.current = setTimeout(() => {
+        attemptSnap();
+      }, SNAP_IDLE_MS);
+    }
+
+    function attemptSnap() {
+      if (isPointerDown.current || isSnapping.current) return;
+
+      const groupEl = groupRef.current;
+      if (!groupEl) return;
+
+      const scrollY = window.scrollY;
+      const vh = window.innerHeight;
+
+      // Check if parallax group dominates the viewport
+      const groupRect = groupEl.getBoundingClientRect();
+      const groupVisibleHeight = Math.min(groupRect.bottom, vh) - Math.max(groupRect.top, 0);
+      if (groupVisibleHeight / vh < SNAP_MIN_VIEWPORT_RATIO) return;
+
+      // Find the closest slide boundary within snap zone
+      const snapZone = vh * SNAP_ZONE_VH;
+      let closestDist = Infinity;
+      let snapTarget: number | null = null;
+
+      slideRefsMap.current.forEach((refs) => {
+        const { slide } = refs;
+        if (!slide) return;
+
+        const slideTop = slide.offsetTop;
+        const dist = Math.abs(scrollY - slideTop);
+
+        if (dist < snapZone && dist < closestDist) {
+          closestDist = dist;
+          snapTarget = slideTop;
+        }
+      });
+
+      if (snapTarget !== null && closestDist > 2) {
+        // Don't snap if we're already at the target (within 2px)
+        isSnapping.current = true;
+        window.scrollTo({ top: snapTarget, behavior: "smooth" });
+
+        // Reset snapping flag after animation completes
+        if (snapResetTimeoutId.current) clearTimeout(snapResetTimeoutId.current);
+        snapResetTimeoutId.current = setTimeout(() => {
+          isSnapping.current = false;
+        }, 500);
+      }
+    }
+
+    // Use scrollend if available, otherwise fall back to debounced scroll
+    const hasScrollEnd = "onscrollend" in window;
+
+    if (hasScrollEnd) {
+      window.addEventListener("scrollend", attemptSnap, { passive: true });
+    }
+    // Always listen to scroll for debounce fallback (scrollend may not fire on all platforms)
+    window.addEventListener("scroll", onScroll, { passive: true });
+    window.addEventListener("pointerdown", onPointerDown, { passive: true });
+    window.addEventListener("pointerup", onPointerUp, { passive: true });
+
+    return () => {
+      if (hasScrollEnd) {
+        window.removeEventListener("scrollend", attemptSnap);
+      }
+      window.removeEventListener("scroll", onScroll);
+      window.removeEventListener("pointerdown", onPointerDown);
+      window.removeEventListener("pointerup", onPointerUp);
+      if (snapTimeoutId.current) clearTimeout(snapTimeoutId.current);
+      if (snapResetTimeoutId.current) clearTimeout(snapResetTimeoutId.current);
+    };
+  }, [snapEnabled]);
+
+  // ── Render ──
+
+  const slides = group.slides || [];
+
+  if (slides.length === 0) {
+    return null; // Empty parallax group — render nothing on public site
+  }
+
+  return (
+    <div
+      ref={groupRef}
+      className="parallax-group"
+      role="region"
+      aria-label="Parallax showcase"
+    >
+      {slides.map((slide, index) => (
+        <ParallaxSlideRenderer
+          key={slide._key}
+          slide={slide}
+          effect={effect}
+          pageEnterAnimation={pageEnterAnimation}
+          index={index}
+          bgRef={getBgRef(slide._key)}
+          slideRef={getSlideRef(slide._key)}
+          disableParallax={disableParallax.current || effect === "crossfade"}
+        />
+      ))}
+    </div>
+  );
+}