@morphika/webframe 0.1.0

package/components/blocks/ShaderCanvas.tsx

@@ -0,0 +1,392 @@
+"use client";
+
+/**
+ * ShaderCanvas — OGL WebGL canvas component.
+ *
+ * Renders a full-size canvas with a fragment shader applied to an image texture.
+ * Handles mouse tracking, scroll progress, lerp smoothing, IntersectionObserver
+ * visibility pausing, and clean lifecycle.
+ *
+ * This component is only mounted on the public site (never in the builder).
+ *
+ * Session 71.
+ */
+
+import { useEffect, useRef, useCallback, useState } from "react";
+import type { ResolvedShaderEffectConfig } from "../../lib/animation/hover-effect-types";
+import { getFragmentShader, vertexShader } from "../../lib/shader/glsl";
+
+// ── Lerp helper ─────────────────────────────────────────────────────
+
+function lerp(a: number, b: number, t: number): number {
+  return a + (b - a) * t;
+}
+
+// ── Max simultaneous WebGL contexts ─────────────────────────────────
+
+let activeContextCount = 0;
+const MAX_CONTEXTS = 6;
+
+// ── Component ───────────────────────────────────────────────────────
+
+interface ShaderCanvasProps {
+  src: string;
+  config: ResolvedShaderEffectConfig;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export default function ShaderCanvas({ src, config, className, style }: ShaderCanvasProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const rafRef = useRef<number>(0);
+  const rendererRef = useRef<unknown>(null);
+  const isVisibleRef = useRef(true);
+  const contextClaimedRef = useRef(false);
+  /** Track observers created inside the async .then() for cleanup */
+  const observersRef = useRef<{ io?: IntersectionObserver; ro?: ResizeObserver }>({});
+  /** If true, shader init failed — component renders plain image fallback */
+  const [shaderFailed, setShaderFailed] = useState(false);
+
+  // Mutable state for animation loop (avoid re-renders)
+  const mouseRef = useRef({ x: 0.5, y: 0.5 });
+  const targetMouseRef = useRef({ x: 0.5, y: 0.5 });
+  const hoverRef = useRef(0);
+  const targetHoverRef = useRef(0);
+  const scrollProgressRef = useRef(0);
+  const targetScrollRef = useRef(0);
+  const startTimeRef = useRef(0);
+
+  // ── Mouse handlers ──────────────────────────────────────────────
+
+  const onMouseMove = useCallback((e: MouseEvent) => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const rect = canvas.getBoundingClientRect();
+    targetMouseRef.current = {
+      x: (e.clientX - rect.left) / rect.width,
+      y: 1.0 - (e.clientY - rect.top) / rect.height, // Flip Y for GL
+    };
+  }, []);
+
+  const onMouseEnter = useCallback(() => {
+    targetHoverRef.current = 1;
+  }, []);
+
+  const onMouseLeave = useCallback(() => {
+    targetHoverRef.current = 0;
+  }, []);
+
+  // ── Scroll handler (for scroll trigger) ─────────────────────────
+
+  const onScroll = useCallback(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const rect = canvas.getBoundingClientRect();
+    const viewportH = window.innerHeight;
+    // 0 = element just entered bottom, 1 = element just left top
+    const progress = 1 - (rect.top + rect.height) / (viewportH + rect.height);
+    targetScrollRef.current = Math.max(0, Math.min(1, progress));
+  }, []);
+
+  // ── Main effect: init OGL, animation loop, cleanup ──────────────
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    const container = containerRef.current;
+    if (!canvas || !container) return;
+
+    // Context limit check
+    if (activeContextCount >= MAX_CONTEXTS) return;
+    activeContextCount++;
+    contextClaimedRef.current = true;
+
+    // Dynamic import OGL (tree-shaken)
+    let destroyed = false;
+
+    import("ogl").then(({ Renderer, Program, Mesh, Texture, Triangle }) => {
+      if (destroyed || !canvas) return;
+
+      try {
+        // ── Helper: set renderer size without killing CSS layout ────
+        // OGL's setSize() overwrites canvas.style.width/height with px values,
+        // which destroys the CSS `width:100%; height:100%` that makes the canvas
+        // fill its container. We restore CSS immediately after.
+        function setRendererSize(renderer: { setSize: (w: number, h: number) => void }, w: number, h: number) {
+          renderer.setSize(w, h);
+          // Restore CSS so the canvas stays responsive
+          const c = canvasRef.current;
+          if (c) {
+            c.style.width = "100%";
+            c.style.height = "100%";
+          }
+        }
+
+        // ── Init renderer ───────────────────────────────────────────
+        const dpr = Math.min(window.devicePixelRatio, 2);
+        const renderer = new Renderer({
+          canvas,
+          dpr,
+          alpha: false,
+          antialias: false,
+          powerPreference: "low-power",
+        });
+        rendererRef.current = renderer;
+        const gl = renderer.gl;
+
+        // Size to container (measure the wrapper div, not the canvas)
+        const rect = container.getBoundingClientRect();
+        setRendererSize(renderer, rect.width, rect.height);
+
+        // ── Load texture from image ─────────────────────────────────
+        // Use fetch → blob → object URL to avoid CORS + redirect issues.
+        // Both asset proxies (/api/assets/ and /api/admin/assets/) normally
+        // return a 302 redirect to R2, which fails in WebGL because the
+        // cross-origin target lacks CORS headers. The ?texture=1 parameter
+        // tells the proxy to stream actual image bytes (same-origin response),
+        // avoiding CORS entirely. This covers both public and preview modes.
+        const texture = new Texture(gl);
+        const needsTextureParam =
+          src.startsWith("/api/assets/") ||
+          src.startsWith("/api/admin/assets/");
+        const textureSrc = needsTextureParam
+          ? `${src}${src.includes("?") ? "&" : "?"}texture=1`
+          : src;
+        fetch(textureSrc)
+          .then((res) => {
+            if (!res.ok) throw new Error(`HTTP ${res.status}`);
+            return res.blob();
+          })
+          .then((blob) => {
+            if (destroyed) return;
+            const objectUrl = URL.createObjectURL(blob);
+            const img = new Image();
+            img.onload = () => {
+              if (destroyed) {
+                URL.revokeObjectURL(objectUrl);
+                return;
+              }
+              texture.image = img;
+              // Revoke after a short delay to ensure OGL has uploaded the texture
+              setTimeout(() => URL.revokeObjectURL(objectUrl), 100);
+            };
+            img.onerror = () => {
+              URL.revokeObjectURL(objectUrl);
+              // eslint-disable-next-line no-console
+              console.warn("[ShaderCanvas] Blob image decode failed");
+              setShaderFailed(true);
+            };
+            img.src = objectUrl;
+          })
+          .catch((err) => {
+            if (destroyed) return;
+            // eslint-disable-next-line no-console
+            console.warn("[ShaderCanvas] Texture fetch failed, falling back to plain image:", err);
+            setShaderFailed(true);
+          });
+
+        // ── Fragment shader ─────────────────────────────────────────
+        const fragmentSource = getFragmentShader(config.preset);
+        if (!fragmentSource) {
+          // eslint-disable-next-line no-console
+          console.warn(`[ShaderCanvas] No fragment shader for preset "${config.preset}"`);
+          return;
+        }
+
+        // ── Program ─────────────────────────────────────────────────
+        const program = new Program(gl, {
+          vertex: vertexShader,
+          fragment: fragmentSource,
+          uniforms: {
+            uTexture: { value: texture },
+            uMouse: { value: [0.5, 0.5] },
+            uIntensity: { value: config.intensity },
+            uSpeed: { value: config.speed },
+            uTime: { value: 0 },
+            uHover: { value: 0 },
+            uResolution: { value: [rect.width * dpr, rect.height * dpr] },
+          },
+        });
+
+        // ── Geometry (fullscreen triangle) ──────────────────────────
+        const geometry = new Triangle(gl);
+        const mesh = new Mesh(gl, { geometry, program });
+
+        // ── Mouse events (hover trigger) ────────────────────────────
+        if (config.trigger === "hover") {
+          canvas.addEventListener("mousemove", onMouseMove);
+          canvas.addEventListener("mouseenter", onMouseEnter);
+          canvas.addEventListener("mouseleave", onMouseLeave);
+        }
+
+        // ── Scroll events (scroll trigger) ──────────────────────────
+        if (config.trigger === "scroll") {
+          window.addEventListener("scroll", onScroll, { passive: true });
+          onScroll(); // Initial position
+          targetHoverRef.current = 1; // Always "active" for scroll
+        }
+
+        // ── IntersectionObserver: pause when off-screen ─────────────
+        const observer = new IntersectionObserver(
+          ([entry]) => {
+            isVisibleRef.current = entry.isIntersecting;
+          },
+          { threshold: 0 }
+        );
+        observer.observe(canvas);
+        observersRef.current.io = observer;
+
+        // ── Resize observer — watches the CONTAINER, not the canvas ─
+        // (OGL's setSize overwrites canvas CSS dimensions, so the canvas
+        //  itself won't trigger resize events after init)
+        const resizeObserver = new ResizeObserver(([entry]) => {
+          if (destroyed) return;
+          const { width, height } = entry.contentRect;
+          if (width > 0 && height > 0) {
+            setRendererSize(renderer, width, height);
+            program.uniforms.uResolution.value = [width * dpr, height * dpr];
+          }
+        });
+        resizeObserver.observe(container);
+        observersRef.current.ro = resizeObserver;
+
+        // ── Animation loop ──────────────────────────────────────────
+        startTimeRef.current = performance.now();
+        const smoothing = config.smoothing;
+
+        function animate() {
+          if (destroyed) return;
+          rafRef.current = requestAnimationFrame(animate);
+
+          // Skip rendering when off-screen
+          if (!isVisibleRef.current) return;
+
+          try {
+            const now = performance.now();
+            const elapsed = (now - startTimeRef.current) / 1000;
+
+            // Lerp mouse position
+            mouseRef.current.x = lerp(mouseRef.current.x, targetMouseRef.current.x, smoothing);
+            mouseRef.current.y = lerp(mouseRef.current.y, targetMouseRef.current.y, smoothing);
+
+            // Lerp hover state
+            hoverRef.current = lerp(hoverRef.current, targetHoverRef.current, smoothing);
+
+            // Lerp scroll progress
+            if (config.trigger === "scroll") {
+              scrollProgressRef.current = lerp(
+                scrollProgressRef.current,
+                targetScrollRef.current,
+                smoothing
+              );
+            }
+
+            // Update uniforms
+            const u = program.uniforms;
+            u.uMouse.value = [mouseRef.current.x, mouseRef.current.y];
+            u.uTime.value = elapsed;
+
+            if (config.trigger === "scroll") {
+              // For scroll trigger, hover uniform carries scroll progress
+              u.uHover.value = scrollProgressRef.current;
+            } else {
+              u.uHover.value = hoverRef.current;
+            }
+
+            renderer.render({ scene: mesh });
+          } catch {
+            // Render error (e.g. lost WebGL context) — stop animation loop gracefully
+            destroyed = true;
+          }
+        }
+
+        rafRef.current = requestAnimationFrame(animate);
+      } catch (err) {
+        // Shader compilation, WebGL context creation, or OGL init failure.
+        // Fall back to plain image — never crash the page.
+        // eslint-disable-next-line no-console
+        console.warn("[ShaderCanvas] WebGL init failed, falling back to plain image:", err);
+        if (contextClaimedRef.current) {
+          activeContextCount--;
+          contextClaimedRef.current = false;
+        }
+        setShaderFailed(true);
+      }
+    }).catch((err) => {
+      // OGL dynamic import failure (e.g. network error, missing module)
+      // eslint-disable-next-line no-console
+      console.warn("[ShaderCanvas] Failed to load OGL:", err);
+      if (contextClaimedRef.current) {
+        activeContextCount--;
+        contextClaimedRef.current = false;
+      }
+      setShaderFailed(true);
+    });
+
+    return () => {
+      destroyed = true;
+      cancelAnimationFrame(rafRef.current);
+
+      if (contextClaimedRef.current) {
+        activeContextCount--;
+        contextClaimedRef.current = false;
+      }
+
+      // Disconnect observers created inside .then()
+      observersRef.current.io?.disconnect();
+      observersRef.current.ro?.disconnect();
+      observersRef.current = {};
+
+      const canvas = canvasRef.current;
+      if (canvas) {
+        canvas.removeEventListener("mousemove", onMouseMove);
+        canvas.removeEventListener("mouseenter", onMouseEnter);
+        canvas.removeEventListener("mouseleave", onMouseLeave);
+
+        // Attempt to lose context cleanly
+        const gl = canvas.getContext("webgl");
+        if (gl) {
+          const ext = gl.getExtension("WEBGL_lose_context");
+          if (ext) ext.loseContext();
+        }
+      }
+
+      window.removeEventListener("scroll", onScroll);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [src, config.preset, config.trigger, config.intensity, config.speed, config.smoothing]);
+
+  // If shader init failed, render plain image instead of crashing the page
+  if (shaderFailed) {
+    return (
+      <div className={className} style={{ width: "100%", height: "100%", ...style }}>
+        <img
+          src={src}
+          alt=""
+          style={{ display: "block", width: "100%", height: "100%", objectFit: "cover" }}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div
+      ref={containerRef}
+      className={className}
+      style={{
+        width: "100%",
+        height: "100%",
+        ...style,
+      }}
+    >
+      <canvas
+        ref={canvasRef}
+        style={{
+          display: "block",
+          width: "100%",
+          height: "100%",
+        }}
+      />
+    </div>
+  );
+}

package/components/blocks/SpacerBlockRenderer.tsx

@@ -0,0 +1,17 @@
+import type { SpacerBlock } from "../../lib/sanity/types";
+
+const heightMap: Record<string, string> = {
+  small: "h-8",
+  medium: "h-16",
+  large: "h-24",
+  xlarge: "h-40",
+};
+
+export default function SpacerBlockRenderer({ block }: { block: SpacerBlock }) {
+  if (block.height === "custom" && block.custom_height) {
+    return <div style={{ height: `${block.custom_height}px` }} aria-hidden />;
+  }
+  return (
+    <div className={heightMap[block.height ?? "medium"]} aria-hidden />
+  );
+}

package/components/blocks/TextBlockRenderer.tsx

@@ -0,0 +1,87 @@
+import type { TextBlock } from "../../lib/sanity/types";
+import { PortableText } from "next-sanity";
+
+/** Resolve fontSize: supports numeric px and legacy string enum */
+function resolvePublicFontSize(fontSize?: number | string): string | undefined {
+  if (typeof fontSize === "number") return `${fontSize}px`;
+  // Legacy Tailwind class mapping
+  const tailwindMap: Record<string, string> = {
+    small: "text-sm",
+    base: "text-base",
+    large: "text-lg",
+    xl: "text-xl",
+    "2xl": "text-2xl",
+    "3xl": "text-3xl",
+  };
+  return tailwindMap[fontSize || "base"];
+}
+
+/** Resolve fontWeight: supports string numbers and legacy names */
+function resolvePublicFontWeight(fw?: string): string | undefined {
+  if (!fw) return "font-normal";
+  const num = parseInt(fw, 10);
+  if (!isNaN(num)) {
+    // Use inline style instead of Tailwind for numeric weights
+    return undefined;
+  }
+  const twMap: Record<string, string> = {
+    normal: "font-normal",
+    medium: "font-medium",
+    bold: "font-bold",
+  };
+  return twMap[fw] || "font-normal";
+}
+
+const alignmentMap: Record<string, string> = {
+  left: "text-left",
+  center: "text-center",
+  right: "text-right",
+  justify: "text-justify",
+};
+
+/**
+ * Extract CSS class and inline style from a TextBlock's style settings.
+ * Shared between TextBlockRenderer (rich text) and TypewriterWrapper (plain text phase).
+ */
+export function getTextBlockStyles(block: TextBlock): { className: string; style: React.CSSProperties } {
+  const s = block.style;
+  const isNumericFontSize = typeof s?.fontSize === "number";
+  const isNumericWeight = s?.fontWeight && !isNaN(parseInt(s.fontWeight, 10));
+
+  const classes = [
+    "font-mono",
+    !isNumericFontSize ? resolvePublicFontSize(s?.fontSize) : undefined,
+    alignmentMap[s?.alignment ?? "left"],
+    !isNumericWeight ? resolvePublicFontWeight(s?.fontWeight) : undefined,
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  const inlineStyle: React.CSSProperties = {};
+  if (isNumericFontSize) inlineStyle.fontSize = `${s!.fontSize}px`;
+  if (isNumericWeight) inlineStyle.fontWeight = parseInt(s!.fontWeight!, 10);
+  if (s?.color) inlineStyle.color = s.color;
+  if (s?.lineHeight) inlineStyle.lineHeight = s.lineHeight;
+  if (s?.letterSpacing) inlineStyle.letterSpacing = s.letterSpacing;
+  if (s?.maxWidth) inlineStyle.maxWidth = s.maxWidth;
+  if (s?.opacity != null) inlineStyle.opacity = s.opacity;
+  if (s?.textTransform && s.textTransform !== "none") inlineStyle.textTransform = s.textTransform;
+  if (block.columns && block.columns > 1) {
+    inlineStyle.columnCount = block.columns;
+    inlineStyle.columnGap = "var(--grid-gutter, 24px)";
+  }
+
+  return { className: classes, style: inlineStyle };
+}
+
+export default function TextBlockRenderer({ block }: { block: TextBlock }) {
+  if (!block.text?.length) return null;
+
+  const { className, style } = getTextBlockStyles(block);
+
+  return (
+    <div className={`${className} space-y-[0.75em]`} style={style}>
+      <PortableText value={block.text} />
+    </div>
+  );
+}