Gateway Flow

"use client"; import { useEffect, useMemo, useRef, useState, type CSSProperties } from "react"; type NeuformMode = "dark" | "light"; type NeuformModePreference = NeuformMode | "auto"; type FocusTarget = { selector: string; role: "background" | "ui"; width?: string; }; type BakeKnobs = { size: number; gap: number; length: number; density: number; strokeWidth: number; mode: NeuformMode; }; type EffectDefinition = { title: string; source: string; background: string | ((mode: NeuformMode) => string); defaultMode?: NeuformModePreference; supportsMode?: boolean; targets: readonly FocusTarget[]; focusCss?: string; patch?: (source: string, knobs: BakeKnobs) => string; }; export type GatewayFlowProps = { mode?: NeuformModePreference; speed?: number; size?: number; gap?: number; length?: number; density?: number; strokeWidth?: number; opacity?: number; hue?: number; saturation?: number; brightness?: number; className?: string; style?: CSSProperties; }; const GATEWAY_FLOW_DEFAULTS = { mode: "dark" as NeuformMode, speed: 1, size: 1, gap: 2, length: 1, density: 1, strokeWidth: 1, opacity: 1, hue: 0, saturation: 1, brightness: 1, } as const; function clamp(value: number, minimum: number, maximum: number) { return Math.min(maximum, Math.max(minimum, value)); } function scaleCount(base: number, density: number, minimum = 1) { return Math.max(minimum, Math.round(base * density)); } function resolveMode( mode: NeuformMode | number | string | undefined, fallback: NeuformMode = "dark", ): NeuformMode { if (mode === undefined || mode === null) return fallback; if (mode === "light" || mode === 1 || mode === "1") return "light"; return "dark"; } function readAutomaticMode(): NeuformMode { if (typeof document === "undefined" || typeof window === "undefined") return "dark"; const root = document.documentElement; const declared = root.dataset.scheme ?? root.dataset.theme; if (declared === "light" || declared === "dark") return declared; if (root.classList.contains("dark")) return "dark"; if (root.classList.contains("light")) return "light"; return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; } function useAutomaticMode(enabled: boolean) { const [mode, setMode] = useState(readAutomaticMode); useEffect(() => { if (!enabled || typeof document === "undefined" || typeof window === "undefined") return undefined; const root = document.documentElement; const media = window.matchMedia("(prefers-color-scheme: dark)"); const update = () => setMode(readAutomaticMode()); const observer = new MutationObserver(update); observer.observe(root, { attributes: true, attributeFilter: ["class", "data-scheme", "data-theme"], }); media.addEventListener("change", update); update(); return () => { observer.disconnect(); media.removeEventListener("change", update); }; }, [enabled]); return mode; } function resolveBackground(background: EffectDefinition["background"], mode: NeuformMode) { return typeof background === "function" ? background(mode) : background; } const gatewayFlowSource = ` Gateway Flow

`; // WACRM-brand adaptation: light mode uses a transparent document and brand- // green lines. Dark mode uses a black document that the host iframe composites // with `screen`, making the black surface disappear while preserving the white // flow lines. This avoids Chromium painting a transparent srcDoc viewport white. const GATEWAY_FLOW_DEFINITION: EffectDefinition = { title: "Gateway Flow", source: gatewayFlowSource, supportsMode: true, background: (mode) => (mode === "light" ? "transparent" : "#000000"), targets: [{ selector: "#flow-canvas", role: "background" }], patch(source, { size, density, mode }) { let next = source .replace("const numPaths = 80;", `const numPaths = ${scaleCount(80, density, 12)};`) .replace( "p.t += p.speed;", "p.t += p.speed * ((window.__SF_CONTROLS&&window.__SF_CONTROLS.speed)||1);", ) .replace("ctx.lineWidth = 1.2;", `ctx.lineWidth = ${Number((1.2 * size).toFixed(2))};`); if (mode === "light") { next = next .replace( "ctx.strokeStyle = 'rgba(255, 255, 255, 0.35)';", "ctx.strokeStyle = 'rgba(1, 89, 65, 0.3)';", ) .replace( "ctx.fillStyle = `rgba(255, 255, 255, 0.7)`;", "ctx.fillStyle = `rgba(1, 89, 65, 0.6)`;", ); } return next; }, }; function buildFocusedDocument( definition: EffectDefinition, knobs: BakeKnobs & { speed: number; opacity: number }, ) { const mode = knobs.mode; const background = resolveBackground(definition.background, mode); const targetJson = JSON.stringify(definition.targets).replace(/ html, body { width: 100% !important; height: 100% !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: ${background} !important; } body { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; } body > * { visibility: hidden !important; } body[data-threeui-ready] > [data-threeui-role] { visibility: visible !important; } [data-threeui-residual] { display: none !important; } [data-threeui-role="background"] { position: fixed !important; inset: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; z-index: 0 !important; opacity: 1 !important; pointer-events: none !important; } [data-threeui-role="ui"] { position: relative !important; z-index: 1 !important; width: min(calc(100% - 32px), var(--threeui-target-width, 1040px)) !important; max-width: none !important; max-height: calc(100% - 32px) !important; margin: auto !important; overflow: auto !important; opacity: 1 !important; transform: none !important; filter: none !important; flex: none !important; box-sizing: border-box !important; } ${definition.focusCss ?? ""} `; const controlScript = ``; const focusScript = ``; return patchedSource .replace(/]*)>/i, `${controlScript}${focusStyle}`) .replace(/<\/body>/i, `${focusScript}`); } function GatewayFlowFrame({ definition, mode, speed = GATEWAY_FLOW_DEFAULTS.speed, size = GATEWAY_FLOW_DEFAULTS.size, gap = GATEWAY_FLOW_DEFAULTS.gap, length = GATEWAY_FLOW_DEFAULTS.length, density = GATEWAY_FLOW_DEFAULTS.density, strokeWidth = GATEWAY_FLOW_DEFAULTS.strokeWidth, opacity = GATEWAY_FLOW_DEFAULTS.opacity, hue = GATEWAY_FLOW_DEFAULTS.hue, saturation = GATEWAY_FLOW_DEFAULTS.saturation, brightness = GATEWAY_FLOW_DEFAULTS.brightness, className, style, }: GatewayFlowProps & { definition: EffectDefinition }) { const iframeRef = useRef(null); const requestedMode = mode ?? definition.defaultMode ?? GATEWAY_FLOW_DEFAULTS.mode; const automaticMode = useAutomaticMode(requestedMode === "auto"); const resolvedMode = requestedMode === "auto" ? automaticMode : resolveMode(requestedMode, GATEWAY_FLOW_DEFAULTS.mode); const background = resolveBackground(definition.background, resolvedMode); const safeSpeed = clamp(speed, 0, 3); const safeSize = clamp(size, 0.05, 200); const safeGap = clamp(gap, 0, 64); const safeLength = clamp(length, 0.35, 2.5); const safeDensity = clamp(density, 0.25, 2.5); const safeStrokeWidth = clamp(strokeWidth, 0.25, 8); const safeOpacity = clamp(opacity, 0.05, 1); const safeHue = clamp(hue, -180, 180); const safeSaturation = clamp(saturation, 0, 2); const safeBrightness = clamp(brightness, 0.35, 1.65); // Rebuild when baked geometry/mode knobs change. Speed/opacity stay live via postMessage + time wrap. const source = useMemo( () => buildFocusedDocument(definition, { mode: resolvedMode, speed: GATEWAY_FLOW_DEFAULTS.speed, size: safeSize, gap: safeGap, length: safeLength, density: safeDensity, strokeWidth: safeStrokeWidth, opacity: GATEWAY_FLOW_DEFAULTS.opacity, }), [definition, resolvedMode, safeDensity, safeGap, safeLength, safeSize, safeStrokeWidth], ); useEffect(() => { const frame = iframeRef.current?.contentWindow; if (!frame) return; frame.postMessage( { type: "threeui-controls", controls: { mode: resolvedMode, speed: safeSpeed, size: safeSize, gap: safeGap, length: safeLength, density: safeDensity, strokeWidth: safeStrokeWidth, opacity: safeOpacity, }, }, "*", ); }, [ resolvedMode, safeDensity, safeGap, safeLength, safeOpacity, safeSize, safeSpeed, safeStrokeWidth, source, ]); const filter = safeHue === 0 && safeSaturation === 1 && safeBrightness === 1 ? undefined : `hue-rotate(${safeHue}deg) saturate(${safeSaturation}) brightness(${safeBrightness})`; return (