类型：3D · 分类：Backgrounds · 收录：2026-09-16 20:35:01 · 源码：会员可见
# Predictive Arc
Eight animated arc, signal, ribbon, void, and halftone scenes collected in one Canvas 2D, raw-WebGL, and Three.js family.
> 来源：ThreeUI Community · https://threeui.com · MIT License（Meng To / Design+Code）
> 组件页：https://threeui.com/component/predictive-arc · 预览动画：https://threeui.com/previews/predictive-arc.webm
> 分类：Backgrounds
> 包含变体（8）：predictive、data-pixel、signal-particles、override-grid、ribbon-field、void-field、halftone-flow、amber-halftone
/* ===== src/shaders/predictive-arc/PredictiveArcCollection.tsx (tsx) ===== */
import { lazy, Suspense } from "react";
import type { RibbonFieldBackgroundProps } from "../ribbon-field/RibbonFieldBackground";
import type { NeuformBatchEffectProps } from "../neuform-isolated/NeuformBatchEffects";
import type { NeuformCraftEffectProps } from "../neuform-isolated/NeuformCraftEffects";
import type { NeuformIsolatedEffectProps } from "../neuform-isolated/NeuformIsolatedEffects";
import {
PredictiveArcCanvas as PredictiveArcCore,
type PredictiveArcCanvasProps as PredictiveArcCoreProps,
type PredictiveArcVariant as PredictiveArcCoreVariant,
} from "./PredictiveArcCanvas";
export type PredictiveArcVariant = PredictiveArcCoreVariant | "ribbon-field" | "void-field" | "halftone-flow" | "amber-halftone";
type RibbonFieldVariantProps = RibbonFieldBackgroundProps & {
variant: "ribbon-field";
};
type VoidFieldVariantProps = NeuformIsolatedEffectProps & {
variant: "void-field";
};
type HalftoneFlowVariantProps = NeuformCraftEffectProps & {
variant: "halftone-flow";
};
type AmberHalftoneVariantProps = NeuformBatchEffectProps & {
variant: "amber-halftone";
};
export type PredictiveArcCanvasProps =
| PredictiveArcCoreProps
| RibbonFieldVariantProps
| VoidFieldVariantProps
| HalftoneFlowVariantProps
| AmberHalftoneVariantProps;
const RibbonFieldVariant = lazy(() =>
import("../ribbon-field/RibbonFieldBackground").then((module) => ({ default: module.RibbonFieldBackground })),
);
const VoidFieldVariant = lazy(() =>
import("../neuform-isolated/NeuformIsolatedEffects").then((module) => ({ default: module.VoidField })),
);
const HalftoneFlowVariant = lazy(() =>
import("../neuform-isolated/NeuformCraftEffects").then((module) => ({ default: module.HalftoneFlow })),
);
const AmberHalftoneVariant = lazy(() =>
import("../neuform-isolated/NeuformBatchEffects").then((module) => ({ default: module.AmberHalftone })),
);
const FALLBACK = <div className="threeui-background predictive-arc" />;
export function PredictiveArcCanvas(props: PredictiveArcCanvasProps) {
if (props.variant === "ribbon-field") {
const { variant: _variant, ...ribbonProps } = props;
return <Suspense fallback={FALLBACK}><RibbonFieldVariant {...ribbonProps} /></Suspense>;
}
if (props.variant === "void-field") {
const { variant: _variant, ...voidProps } = props;
return <Suspense fallback={FALLBACK}><VoidFieldVariant {...voidProps} /></Suspense>;
}
if (props.variant === "halftone-flow") {
const { variant: _variant, ...halftoneProps } = props;
return <Suspense fallback={FALLBACK}><HalftoneFlowVariant {...halftoneProps} /></Suspense>;
}
if (props.variant === "amber-halftone") {
const { variant: _variant, ...amberProps } = props;
return <Suspense fallback={FALLBACK}><AmberHalftoneVariant {...amberProps} /></Suspense>;
}
return <PredictiveArcCore {...props} />;
}
/* ===== src/shaders/ribbon-field/RibbonFieldBackground.tsx (tsx) ===== */
import { useEffect, useRef } from "react";
import { RIBBON_FIELD_FRAGMENT_SHADER, RIBBON_FIELD_VERTEX_SHADER } from "./ribbonFieldShaders";
export type RibbonFieldBackgroundProps = { speed?: number; pointerAmount?: number; smoothing?: number; brightness?: number; opacity?: number; hue?: number; saturation?: number; className?: string };
export const RIBBON_FIELD_DEFAULTS = { speed: 1, pointerAmount: 1, smoothing: 0.035, brightness: 1, opacity: 1, hue: 0, saturation: 1 } as const;
function compile(gl: WebGLRenderingContext, type: number, source: string) { const shader = gl.createShader(type); if (!shader) throw new Error("Unable to create Axiom shader"); gl.shaderSource(shader, source); gl.compileShader(shader); if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) throw new Error(gl.getShaderInfoLog(shader) ?? "Axiom shader compilation failed"); return shader; }
export function RibbonFieldBackground({ className = "", ...props }: RibbonFieldBackgroundProps) {
const hostRef = useRef<HTMLDivElement>(null), canvasRef = useRef<HTMLCanvasElement>(null); const optionsRef = useRef({ ...RIBBON_FIELD_DEFAULTS, ...props }); optionsRef.current = { ...RIBBON_FIELD_DEFAULTS, ...props };
useEffect(() => {
const host = hostRef.current, canvas = canvasRef.current; if (!host || !canvas) return undefined; const gl = canvas.getContext("webgl", { alpha: true, antialias: false, premultipliedAlpha: false }); if (!gl) return undefined;
const vertex = compile(gl, gl.VERTEX_SHADER, RIBBON_FIELD_VERTEX_SHADER), fragment = compile(gl, gl.FRAGMENT_SHADER, RIBBON_FIELD_FRAGMENT_SHADER), program = gl.createProgram(); if (!program) return undefined; gl.attachShader(program, vertex); gl.attachShader(program, fragment); gl.linkProgram(program); if (!gl.getProgramParameter(program, gl.LINK_STATUS)) throw new Error(gl.getProgramInfoLog(program) ?? "Axiom program link failed"); gl.useProgram(program);
const buffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, buffer); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]), gl.STATIC_DRAW); const position = gl.getAttribLocation(program, "position"); gl.enableVertexAttribArray(position); gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 0, 0);
const resolution = gl.getUniformLocation(program, "resolution"), time = gl.getUniformLocation(program, "time"), pointerUniform = gl.getUniformLocation(program, "pointer"); let mouseX = 0.72, mouseY = 0.42, targetX = 0.72, targetY = 0.42, frame = 0, visible = true; const startedAt = performance.now();
const pointer = (event: PointerEvent) => { const bounds = host.getBoundingClientRect(); targetX = 0.72 + (((event.clientX - bounds.left) / Math.max(bounds.width, 1)) - 0.72) * optionsRef.current.pointerAmount; targetY = 0.42 + ((1 - (event.clientY - bounds.top) / Math.max(bounds.height, 1)) - 0.42) * optionsRef.current.pointerAmount; };
const resize = () => { const bounds = host.getBoundingClientRect(), ratio = Math.min(window.devicePixelRatio || 1, 2); canvas.width = Math.max(1, Math.floor(bounds.width * ratio)); canvas.height = Math.max(1, Math.floor(bounds.height * ratio)); gl.viewport(0, 0, canvas.width, canvas.height); gl.uniform2f(resolution, canvas.width, canvas.height); };
const render = (now: number) => { const options = optionsRef.current; mouseX += (targetX - mouseX) * options.smoothing; mouseY += (targetY - mouseY) * options.smoothing; gl.uniform1f(time, (now - startedAt) * 0.001 * options.speed); gl.uniform2f(pointerUniform, mouseX, mouseY); gl.drawArrays(gl.TRIANGLES, 0, 6); frame = visible && !document.hidden ? requestAnimationFrame(render) : 0; };
const resizeObserver = new ResizeObserver(resize), intersection = new IntersectionObserver(([entry]) => { visible = entry?.isIntersecting ?? true; if (visible && !frame) frame = requestAnimationFrame(render); if (!visible && frame) cancelAnimationFrame(frame), frame = 0; }); resizeObserver.observe(host); intersection.observe(host); host.addEventListener("pointermove", pointer, { passive: true }); resize(); frame = requestAnimationFrame(render);
return () => { if (frame) cancelAnimationFrame(frame); resizeObserver.disconnect(); intersection.disconnect(); host.removeEventListener("pointermove", pointer); gl.deleteBuffer(buffer); gl.deleteShader(vertex); gl.deleteShader(fragment); gl.deleteProgram(program); };
}, []);
const options = optionsRef.current; return <div ref={hostRef} className={`threeui-background ribbon-field${className ? ` ${className}` : ""}`}><canvas ref={canvasRef} style={{ opacity: options.opacity, filter: `hue-rotate(${options.hue}deg) saturate(${options.saturation}) brightness(${options.brightness})` }} /></div>;
}
/* ===== src/shaders/predictive-arc/PredictiveArcCanvas.tsx (tsx) ===== */
import { lazy, Suspense, useEffect, useRef } from "react";
import {
DataPixelArcCanvas,
type DataPixelArcCanvasProps,
} from "../data-pixel-arc/DataPixelArcCanvas";
import type { NeuformBatchEffectProps } from "../neuform-isolated/NeuformBatchEffects";
import {
createPredictiveArcRenderer,
PREDICTIVE_ARC_DEFAULTS,
type PredictiveArcOptions,
} from "./predictiveArcRenderer";
export type PredictiveArcVariant = "predictive" | "data-pixel" | "signal-particles" | "override-grid";
type PredictiveVariantProps = Partial<PredictiveArcOptions> & {
className?: string;
variant?: "predictive";
};
type DataPixelVariantProps = DataPixelArcCanvasProps & {
variant: "data-pixel";
};
type BatchVariantProps = Partial<NeuformBatchEffectProps> & {
variant: "signal-particles" | "override-grid";
};
export type PredictiveArcCanvasProps =
| PredictiveVariantProps
| DataPixelVariantProps
| BatchVariantProps;
const SignalParticlesVariant = lazy(() =>
import("../neuform-isolated/NeuformBatchEffects").then((module) => ({ default: module.SignalParticles })),
);
const OverrideGridVariant = lazy(() =>
import("../neuform-isolated/NeuformBatchEffects").then((module) => ({ default: module.OverrideGrid })),
);
function PredictiveArcRenderer({ className = "", ...props }: PredictiveVariantProps) {
const hostRef = useRef<HTMLDivElement>(null);
const canvasRef = useRef<HTMLCanvasElement>(null);
const optionsRef = useRef({ ...PREDICTIVE_ARC_DEFAULTS, ...props });
optionsRef.current = { ...PREDICTIVE_ARC_DEFAULTS, ...props };
useEffect(() => {
const host = hostRef.current;
const canvas = canvasRef.current;
if (!host || !canvas) return undefined;
const renderer = createPredictiveArcRenderer(canvas, () => optionsRef.current);
if (!renderer) return undefined;
let frame = 0;
let visible = true;
const resize = () => {
const bounds = host.getBoundingClientRect();
renderer.resize(bounds.width, bounds.height);
renderer.render();
};
const tick = () => {
renderer.render();
frame = visible && !document.hidden ? requestAnimationFrame(tick) : 0;
};
const observer = new ResizeObserver(resize);
const intersection = new IntersectionObserver(([entry]) => {
visible = entry?.isIntersecting ?? true;
if (visible && !frame) frame = requestAnimationFrame(tick);
if (!visible && frame) cancelAnimationFrame(frame), frame = 0;
});
const visibility = () => {
if (document.hidden && frame) cancelAnimationFrame(frame), frame = 0;
else if (!document.hidden && visible && !frame) frame = requestAnimationFrame(tick);
};
observer.observe(host);
intersection.observe(host);
document.addEventListener("visibilitychange", visibility);
resize();
frame = requestAnimationFrame(tick);
return () => {
if (frame) cancelAnimationFrame(frame);
observer.disconnect();
intersection.disconnect();
document.removeEventListener("visibilitychange", visibility);
};
}, []);
return (
<div
ref={hostRef}
className={`threeui-background predictive-arc predictive-arc--${optionsRef.current.mode}${className ? ` ${className}` : ""}`}
data-mode={optionsRef.current.mode}
>
<canvas
ref={canvasRef}
style={{ filter: `hue-rotate(${optionsRef.current.hue}deg) saturate(${optionsRef.current.saturation})` }}
/>
</div>
);
}
export function PredictiveArcCanvas(props: PredictiveArcCanvasProps) {
if (props.variant === "data-pixel") {
const { variant: _variant, ...canvasProps } = props;
return <DataPixelArcCanvas {...canvasProps} />;
}
if (props.variant === "signal-particles") {
const { variant: _variant, ...effectProps } = props;
return (
<Suspense fallback={<div className="threeui-background predictive-arc" />}>
<SignalParticlesVariant {...effectProps} />
</Suspense>
);
}
if (props.variant === "override-grid") {
const { variant: _variant, ...effectProps } = props;
return (
<Suspense fallback={<div className="threeui-background predictive-arc" />}>
<OverrideGridVariant {...effectProps} />
</Suspense>
);
}
const { variant: _variant, ...canvasProps } = props as PredictiveVariantProps;
return <PredictiveArcRenderer {...canvasProps} />;
}
/* ===== src/shaders/predictive-arc/predictiveArcRenderer.ts (typescript) ===== */
export type PredictiveArcMode = "dark" | "light";
export type PredictiveArcOptions = {
mode: PredictiveArcMode;
speed: number;
spacing: number;
dotSize: number;
archHeight: number;
thickness: number;
brightness: number;
hue: number;
saturation: number;
};
export const PREDICTIVE_ARC_DEFAULTS: PredictiveArcOptions = {
mode: "dark",
speed: 1,
spacing: 5,
dotSize: 6,
archHeight: 0.7,
thickness: 1,
brightness: 1,
hue: 0,
saturation: 1,
};
function resolveMode(mode: PredictiveArcOptions["mode"] | number | string | undefined): PredictiveArcMode {
if (mode === "light" || mode === 1 || mode === "1") return "light";
return "dark";
}
export function createPredictiveArcRenderer(
canvas: HTMLCanvasElement,
getOptions: () => PredictiveArcOptions,
) {
const context = canvas.getContext("2d", { alpha: false });
if (!context) return null;
let width = 1;
let height = 1;
let time = 0;
const resize = (nextWidth: number, nextHeight: number) => {
width = Math.max(1, nextWidth);
height = Math.max(1, nextHeight);
const pixelRatio = Math.min(window.devicePixelRatio || 1, 2);
canvas.width = Math.round(width * pixelRatio);
canvas.height = Math.round(height * pixelRatio);
context.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
};
const render = () => {
const options = getOptions();
const mode = resolveMode(options.mode);
const isLight = mode === "light";
context.fillStyle = isLight ? "#eef1f6" : "#030303";
context.fillRect(0, 0, width, height);
time += 0.015 * options.speed;
const centerX = width / 2;
const archPeakY = height * 0.35;
const archWidth = width * 1.5;
const archHeight = height * options.archHeight;
context.globalCompositeOperation = isLight ? "source-over" : "lighter";
for (let x = 0; x < width; x += options.spacing) {
const normX = (x - centerX) / (archWidth / 2);
const curveY = archPeakY + normX * normX * archHeight;
for (let y = 0; y < height; y += options.spacing) {
const distanceToCurve = Math.abs(y - curveY);
const thickness = (140 + (1 - Math.abs(normX)) * 80) * options.thickness;
if (distanceToCurve >= thickness) continue;
let intensity = 1 - distanceToCurve / thickness;
const waveX = Math.sin(x * 0.015 + time);
const waveY = Math.cos(y * 0.02 + time);
intensity = intensity * 0.7 + waveX * waveY * 0.3 * intensity;
intensity *= Math.max(0, 1 - Math.pow(Math.abs(normX), 2.5));
if (intensity <= 0.02) continue;
let r: number;
let g: number;
let b: number;
if (isLight) {
// Cool violet ink on pale paper — readable without additive washout.
r = Math.min(255, 48 * intensity + 70 * Math.pow(intensity, 3));
g = Math.min(255, 28 * intensity + 45 * Math.pow(intensity, 4));
b = Math.min(255, 120 * intensity + 110 * Math.pow(intensity, 2));
if (intensity > 0.7) {
const coreBoost = (intensity - 0.7) * 3.3;
r = Math.min(255, r + 90 * coreBoost);
g = Math.min(255, g + 70 * coreBoost);
b = Math.min(255, b + 110 * coreBoost);
}
} else {
r = Math.min(255, 60 * intensity + 100 * Math.pow(intensity, 3));
g = Math.min(255, 20 * intensity + 60 * Math.pow(intensity, 4));
b = Math.min(255, 120 * intensity + 135 * Math.pow(intensity, 2));
if (intensity > 0.7) {
const coreBoost = (intensity - 0.7) * 3.3;
r = Math.min(255, r + 150 * coreBoost);
g = Math.min(255, g + 150 * coreBoost);
b = Math.min(255, b + 150 * coreBoost);
}
}
context.fillStyle = `rgb(${Math.floor(r * options.brightness)}, ${Math.floor(g * options.brightness)}, ${Math.floor(b * options.brightness)})`;
context.fillRect(x, y, options.dotSize * intensity, options.dotSize * intensity);
}
}
context.globalCompositeOperation = "source-over";
};
return { resize, render };
}
/* ===== src/shaders/data-pixel-arc/DataPixelArcCanvas.tsx (tsx) ===== */
import { useEffect, useRef } from "react";
import { createDataPixelArcRenderer, DATA_PIXEL_ARC_DEFAULTS, type DataPixelArcOptions } from "./dataPixelArcRenderer";
export type DataPixelArcCanvasProps = Partial<DataPixelArcOptions> & { className?: string };
export function DataPixelArcCanvas({ className = "", ...props }: DataPixelArcCanvasProps) {
const hostRef = useRef<HTMLDivElement>(null);
const canvasRef = useRef<HTMLCanvasElement>(null);
const optionsRef = useRef({ ...DATA_PIXEL_ARC_DEFAULTS, ...props });
optionsRef.current = { ...DATA_PIXEL_ARC_DEFAULTS, ...props };
useEffect(() => {
const host = hostRef.current;
const canvas = canvasRef.current;
if (!host || !canvas) return undefined;
const renderer = createDataPixelArcRenderer(canvas, () => optionsRef.current);
if (!renderer) return undefined;
let frame = 0;
let visible = true;
const resize = () => { const bounds = host.getBoundingClientRect(); renderer.resize(bounds.width, bounds.height); renderer.render(); };
const tick = () => { renderer.render(); frame = visible && !document.hidden ? requestAnimationFrame(tick) : 0; };
const observer = new ResizeObserver(resize);
const intersection = new IntersectionObserver(([entry]) => {
visible = entry?.isIntersecting ?? true;
if (visible && !frame) frame = requestAnimationFrame(tick);
if (!visible && frame) cancelAnimationFrame(frame), frame = 0;
});
const visibility = () => {
if (document.hidden && frame) cancelAnimationFrame(frame), frame = 0;
else if (!document.hidden && visible && !frame) frame = requestAnimationFrame(tick);
};
observer.observe(host); intersection.observe(host); document.addEventListener("visibilitychange", visibility); resize(); frame = requestAnimationFrame(tick);
return () => { if (frame) cancelAnimationFrame(frame); observer.disconnect(); intersection.disconnect(); document.removeEventListener("visibilitychange", visibility); };
}, []);
return (
<div
ref={hostRef}
className={`threeui-background data-pixel-arc data-pixel-arc--${optionsRef.current.mode}${className ? ` ${className}` : ""}`}
data-mode={optionsRef.current.mode}
>
<canvas ref={canvasRef} style={{ filter: `hue-rotate(${optionsRef.current.hue}deg) saturate(${optionsRef.current.saturation})` }} />
</div>
);
}
/* ===== src/shaders/data-pixel-arc/dataPixelArcRenderer.ts (typescript) ===== */
export type DataPixelArcMode = "dark" | "light";
export type DataPixelArcOptions = {
mode: DataPixelArcMode;
speed: number;
pixelSize: number;
arcCenter: number;
arcDrop: number;
thickness: number;
brightness: number;
hue: number;
saturation: number;
};
export const DATA_PIXEL_ARC_DEFAULTS: DataPixelArcOptions = {
mode: "dark",
speed: 1,
pixelSize: 8,
arcCenter: 0.4,
arcDrop: 0.9,
thickness: 0.35,
brightness: 1,
hue: 0,
saturation: 1,
};
function resolveMode(mode: DataPixelArcOptions["mode"] | number | string | undefined): DataPixelArcMode {
if (mode === "light" || mode === 1 || mode === "1") return "light";
return "dark";
}
export function createDataPixelArcRenderer(canvas: HTMLCanvasElement, getOptions: () => DataPixelArcOptions) {
const context = canvas.getContext("2d", { alpha: false });
if (!context) return null;
let width = 1;
let height = 1;
let time = 0;
let lightBackground: CanvasGradient | null = null;
const resize = (nextWidth: number, nextHeight: number) => {
width = Math.max(1, nextWidth);
height = Math.max(1, nextHeight);
const pixelRatio = Math.min(window.devicePixelRatio || 1, 2);
canvas.width = Math.round(width * pixelRatio);
canvas.height = Math.round(height * pixelRatio);
context.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
lightBackground = context.createLinearGradient(0, 0, 0, height);
lightBackground.addColorStop(0, "#f8faf6");
lightBackground.addColorStop(0.58, "#f3f6f1");
lightBackground.addColorStop(1, "#edf1ec");
};
const render = () => {
const options = getOptions();
const isLight = resolveMode(options.mode) === "light";
context.fillStyle = isLight && lightBackground ? lightBackground : "#030308";
context.fillRect(0, 0, width, height);
const cols = Math.ceil(width / options.pixelSize);
const rows = Math.ceil(height / options.pixelSize);
const arcCenterY = height * options.arcCenter;
const arcDrop = height * options.arcDrop;
const thickness = height * options.thickness;
for (let x = 0; x < cols; x += 1) {
for (let y = 0; y < rows; y += 1) {
const px = x * options.pixelSize;
const py = y * options.pixelSize;
const nx = (px / width) * 2 - 1;
const curveY = arcCenterY + Math.pow(Math.abs(nx), 1.8) * arcDrop;
let intensity = Math.max(0, 1 - Math.abs(py - curveY) / thickness);
if (intensity <= 0.01) continue;
const wave1 = Math.sin(nx * 4 - time * 1.5) * 0.1;
const wave2 = Math.cos(py * 0.01 + time) * 0.1;
intensity = Math.max(0, Math.min(1, intensity + wave1 + wave2));
intensity *= Math.max(0, 1 - Math.pow(Math.abs(nx), 2.5));
if (intensity <= 0.02) continue;
const coreStrength = Math.pow(intensity, 3);
const middleStrength = Math.pow(intensity, 1.5);
let r: number;
let g: number;
let b: number;
if (isLight) {
// Sage edge pixels hold their shape on paper while the emerald core stays vivid.
const pigment = Math.pow(intensity, 0.78);
const inkStrength = Math.max(0.45, Math.min(1.35, options.brightness));
const paper = [238, 242, 237];
const ink = [
192 - 172 * pigment - 10 * coreStrength,
204 - 88 * pigment + 18 * coreStrength,
193 - 132 * pigment + 4 * coreStrength,
];
r = Math.max(0, Math.min(255, Math.round(paper[0] + (ink[0] - paper[0]) * inkStrength)));
g = Math.max(0, Math.min(255, Math.round(paper[1] + (ink[1] - paper[1]) * inkStrength)));
b = Math.max(0, Math.min(255, Math.round(paper[2] + (ink[2] - paper[2]) * inkStrength)));
} else {
r = Math.floor((30 * intensity + 100 * coreStrength) * options.brightness);
g = Math.floor((220 * middleStrength + 40 * coreStrength) * options.brightness);
b = Math.floor((80 * intensity + 50 * coreStrength) * options.brightness);
}
context.fillStyle = `rgb(${r}, ${g}, ${b})`;
context.globalAlpha = isLight ? Math.min(1, 0.22 + Math.pow(intensity, 0.68) * 0.78) : intensity;
context.fillRect(px, py, options.pixelSize - 1, options.pixelSize - 1);
}
}
context.globalAlpha = 1;
time += 0.02 * options.speed;
};
return { resize, render };
}
/* ===== src/shaders/neuform-isolated/sources/amber-halftone.html (html) ===== */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aegis Security - Remixed Bento</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=Space+Mono&display=swap" rel="stylesheet">
</head>
<body class="bg-[#111111] text-black antialiased min-h-screen flex items-center justify-center p-4 md:p-8 lg:p-12 overflow-x-hidden selection:bg-yellow-300 selection:text-black" style="font-family: 'Space Mono', monospace;">
<!-- Bento Grid Container -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-8 w-full max-w-5xl mx-auto min-h-[85vh] py-8">
<!-- Card 1: Grainy / Light (Black Globe) -->
<article class="col-span-1 relative w-full h-[500px] md:h-auto min-h-[450px] rounded-[2rem] flex flex-col justify-between p-8 overflow-hidden shadow-2xl border border-transparent" style="background: linear-gradient(#f4f4f0, #f4f4f0) padding-box, linear-gradient(135deg, #ffffff 0%, #d1d5db 100%) border-box;">
<!-- Noise Overlay -->
<div class="absolute inset-0 z-10 pointer-events-none opacity-[0.15]" style="background-image: url('data:image/svg+xml,%3Csvg viewBox=%220 0 200 200%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cfilter id=%22noiseFilter%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.65%22 numOctaves=%223%22 stitchTiles=%22stitch%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23noiseFilter)%22/%3E%3C/svg%3E'); mix-blend-mode: multiply;"></div>
<!-- WebGL Background -->
<div class="absolute inset-0 z-0 top-1/4">
<canvas id="webgl-lines" class="w-full h-full opacity-60"></canvas>
</div>
<!-- Header -->
<header class="relative z-20 flex justify-between items-center text-sm tracking-tight font-normal">
<div class="flex items-center gap-1.5">
<iconify-icon icon="solar:shield-network-linear" width="20" height="20" style="stroke-width: 1.5;"></iconify-icon>
<span>aegis</span>
</div>
<span class="text-xs opacity-50 uppercase tracking-widest">Sector.01</span>
</header>
<!-- Main Content -->
<main class="relative z-20 mt-auto">
<h2 class="text-3xl md:text-4xl tracking-tight leading-[1.1] mb-4 masked-reveal">
Absolute stealth.<br>Zero presence.
</h2>
<p class="text-xs leading-relaxed font-sans max-w-[220px] text-black/70 masked-reveal" style="font-family: 'Inter', sans-serif;">
Your network footprint.<br>Entirely eradicated.
</p>
</main>
</article>
<!-- Card 2: Yellow Grid + Aura Asset Image -->
<article class="col-span-1 relative w-full h-[500px] md:h-auto min-h-[450px] rounded-[2rem] flex flex-col justify-between p-8 overflow-hidden shadow-2xl border border-transparent" style="background: linear-gradient(#FDE047, #FDE047) padding-box, linear-gradient(135deg, rgba(255,255,255,0.6) 0%, rgba(202,138,4,0.4) 100%) border-box;">
<!-- Aura Asset Image Background -->
<div class="absolute inset-0 z-0 opacity-40 mix-blend-multiply pointer-events-none">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/724142aa-44a6-48d3-9cf3-761e00d05b78_1600w.jpg" class="w-full h-full object-cover" alt="Futuristic Deconstructed Pyramid">
</div>
<!-- Grid Background Overlay -->
<div class="absolute inset-0 z-0 opacity-[0.15] pointer-events-none" style="background-image: linear-gradient(to right, #000 1px, transparent 1px), linear-gradient(to bottom, #000 1px, transparent 1px); background-size: 1.5rem 1.5rem;"></div>
<!-- Header -->
<header class="relative z-20 flex justify-between items-center text-sm tracking-tight font-normal">
<div class="flex items-center gap-1.5">
<iconify-icon icon="solar:shield-network-linear" width="20" height="20" style="stroke-width: 1.5;"></iconify-icon>
<span>aegis</span>
</div>
<span class="text-xs opacity-50 uppercase tracking-widest">Sector.02</span>
</header>
<!-- Main Content -->
<main class="relative z-20 mt-auto">
<h2 class="text-3xl md:text-4xl tracking-tight leading-[1.1] masked-reveal">
Adaptive shields.<br>Total autonomy.
</h2>
</main>
</article>
<!-- Card 3: Black Halftone -->
<article class="col-span-1 md:col-span-2 relative w-full h-[450px] md:h-[350px] rounded-[2rem] flex flex-col md:flex-row justify-between p-8 overflow-hidden text-white shadow-2xl border border-transparent" style="font-family: 'Inter', sans-serif; background: linear-gradient(#0A0A0A, #0A0A0A) padding-box, linear-gradient(135deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 100%) border-box;">
<!-- WebGL Halftone Background -->
<div class="absolute inset-0 z-0 md:left-1/3 pointer-events-none">
<canvas id="webgl-halftone" class="w-full h-full"></canvas>
</div>
<!-- Header (Left on desktop) -->
<header class="relative z-20 flex md:flex-col justify-between md:justify-start items-center md:items-start text-sm tracking-tight font-normal text-white/90 gap-4" style="font-family: 'Space Mono', monospace;">
<div class="flex items-center gap-1.5">
<iconify-icon icon="solar:shield-network-linear" width="20" height="20" class="text-yellow-400" style="stroke-width: 1.5;"></iconify-icon>
<span>aegis</span>
</div>
<span class="text-xs opacity-50 uppercase tracking-widest">Sector.03</span>
</header>
<!-- Main Content (Right on desktop) -->
<main class="relative z-20 mt-auto md:mt-0 md:self-end md:text-right max-w-md w-full">
<h2 class="text-4xl md:text-5xl tracking-tight leading-[1.1] font-normal mb-4 md:mb-6 uppercase masked-reveal">
Quantum<br>Core.
</h2>
<p class="text-xs leading-relaxed text-white/70 md:ml-auto md:max-w-[240px] masked-reveal" style="font-family: 'Space Mono', monospace;">
Next-gen cryptography<br>for modern infrastructure.
</p>
</main>
</article>
</div>
<script>
// GSAP ScrollTrigger Setup
gsap.registerPlugin(ScrollTrigger);
// Utility: Split text into words and wrap for masking
function wrapWords(element) {
const text = element.innerHTML;
const words = text.split(/(<br>|s+)/).filter(Boolean);
element.innerHTML = '';
words.forEach(word => {
if (word === '<br>') {
element.appendChild(document.createElement('br'));
return;
}
if (word.trim() === '') {
element.appendChild(document.createTextNode(' '));
return;
}
const outerSpan = document.createElement('span');
outerSpan.style.display = 'inline-block';
outerSpan.style.overflow = 'hidden';
outerSpan.style.verticalAlign = 'bottom';
outerSpan.style.paddingBottom = '0.1em'; // Prevent clipping on descenders
const innerSpan = document.createElement('span');
innerSpan.style.display = 'inline-block';
innerSpan.innerHTML = word;
innerSpan.classList.add('reveal-target');
innerSpan.style.transform = 'translateY(110%)';
innerSpan.style.willChange = 'transform';
outerSpan.appendChild(innerSpan);
element.appendChild(outerSpan);
});
}
// Apply masking structure and animation
document.querySelectorAll('.masked-reveal').forEach(el => {
wrapWords(el);
gsap.to(el.querySelectorAll('.reveal-target'), {
scrollTrigger: {
trigger: el,
start: "top 90%",
toggleActions: "play none none reverse"
},
y: "0%",
duration: 0.85,
ease: "power4.out",
stagger: 0.04
});
});
/* --- WebGL Section 1: Abstract Lines --- */
const initLinesWebGL = () => {
const canvas = document.getElementById('webgl-lines');
if(!canvas) return;
const renderer = new THREE.WebGLRenderer({ canvas, alpha: true, antialias: true });
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);
const resize = () => {
const parent = canvas.parentElement;
const width = parent.clientWidth;
const height = parent.clientHeight;
renderer.setSize(width, height);
camera.aspect = width / height;
camera.updateProjectionMatrix();
};
window.addEventListener('resize', resize);
resize();
camera.position.z = 4.5;
const group = new THREE.Group();
scene.add(group);
const material = new THREE.LineBasicMaterial({ color: 0x111111, transparent: true, opacity: 0.85 });
const particlesCount = 200;
const geometry = new THREE.BufferGeometry();
const positions = new Float32Array(particlesCount * 3);
for(let i = 0; i < particlesCount * 3; i+=3) {
const r = 2.5;
const theta = Math.random() * Math.PI * 2;
const phi = Math.acos((Math.random() * 2) - 1);
positions[i] = r * Math.sin(phi) * Math.cos(theta);
positions[i+1] = r * Math.sin(phi) * Math.sin(theta);
positions[i+2] = r * Math.cos(phi);
}
geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
const index = [];
for (let i = 0; i < particlesCount; i++) {
for (let j = i + 1; j < particlesCount; j++) {
const dx = positions[i*3] - positions[j*3];
const dy = positions[i*3+1] - positions[j*3+1];
const dz = positions[i*3+2] - positions[j*3+2];
const distSq = dx*dx + dy*dy + dz*dz;
if (distSq < 1.2) {
index.push(i, j);
}
}
}
geometry.setIndex(index);
const lines = new THREE.LineSegments(geometry, material);
group.add(lines);
const animate = () => {
requestAnimationFrame(animate);
group.rotation.y += 0.002;
group.rotation.x += 0.001;
renderer.render(scene, camera);
};
animate();
};
/* --- WebGL Section 3: Animated Halftone --- */
const initHalftoneWebGL = () => {
const canvas = document.getElementById('webgl-halftone');
if(!canvas) return;
const renderer = new THREE.WebGLRenderer({ canvas, alpha: true, antialias: true });
renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));
renderer.setClearColor(0x0A0A0A, 1);
const scene = new THREE.Scene();
const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0.1, 10);
const resize = () => {
const parent = canvas.parentElement;
const width = Math.max(1, (parent && parent.clientWidth) || window.innerWidth || canvas.clientWidth || 1);
const height = Math.max(1, (parent && parent.clientHeight) || window.innerHeight || canvas.clientHeight || 1);
renderer.setSize(width, height, false);
canvas.style.width = '100%';
canvas.style.height = '100%';
const aspect = width / height;
camera.left = -aspect;
camera.right = aspect;
camera.bottom = -1;
camera.top = 1;
camera.updateProjectionMatrix();
};
window.addEventListener('resize', resize);
resize();
camera.position.z = 1;
const gridSize = 20;
const geometry = new THREE.BufferGeometry();
const positions = [];
const scales = [];
for (let x = -gridSize; x <= gridSize; x++) {
for (let y = -gridSize; y <= gridSize; y++) {
positions.push(x * 0.15, y * 0.15, 0);
scales.push(1);
}
}
geometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
geometry.setAttribute('scale', new THREE.Float32BufferAttribute(scales, 1));
const material = new THREE.ShaderMaterial({
uniforms: {
time: { value: 0 },
color1: { value: new THREE.Color(0xFBBF24) },
color2: { value: new THREE.Color(0xFFFFFF) }
},
vertexShader: `
attribute float scale;
varying vec2 vUv;
varying float vScale;
uniform float time;
void main() {
vUv = position.xy;
float dist = length(position.xy);
float animatedScale = scale * (sin(dist * 6.0 - time * 2.5) * 0.5 + 0.5);
vScale = animatedScale;
gl_PointSize = animatedScale * 5.0;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
`,
fragmentShader: `
uniform vec3 color1;
uniform vec3 color2;
varying vec2 vUv;
varying float vScale;
void main() {
vec2 coord = gl_PointCoord - vec2(0.5);
if(length(coord) > 0.5) discard;
vec3 finalColor = mix(color2, color1, (vUv.y + 1.0) * 0.5);
gl_FragColor = vec4(finalColor, vScale * 0.9);
}
`,
transparent: true
});
const points = new THREE.Points(geometry, material);
scene.add(points);
const clock = new THREE.Clock();
const animate = () => {
requestAnimationFrame(animate);
material.uniforms.time.value = clock.getElapsedTime();
renderer.render(scene, camera);
};
animate();
};
// Initialize WebGL instances
initLinesWebGL();
initHalftoneWebGL();
</script>
</body>
</html>
/* ===== src/shaders/neuform-isolated/sources/signal-particles.html (html) ===== */
<!doctype html>
<html lang="en" data-autofocus-guard-installed="1"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vanguard Security - Intelligence</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
<!-- GSAP for Masked Reveal -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<style>*, ::before, ::after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/* ! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com */*,::after,::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}::after,::before{--tw-content:''}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0px}.top-0{top:0px}.z-0{z-index:0}.z-50{z-index:50}.z-10{z-index:10}.mx-4{margin-left:1rem;margin-right:1rem}.mx-auto{margin-left:auto;margin-right:auto}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mt-2{margin-top:0.5rem}.mt-auto{margin-top:auto}.flex{display:flex}.grid{display:grid}.h-1{height:0.25rem}.h-32{height:8rem}.h-[65vh]{height:65vh}.h-full{height:100%}.min-h-screen{min-height:100vh}.min-h-[500px]{min-height:500px}.w-full{width:100%}.max-w-2xl{max-width:42rem}.max-w-4xl{max-width:56rem}.max-w-7xl{max-width:80rem}.max-w-[40px]{max-width:40px}.grid-cols-1{grid-template-columns:repeat(1, minmax(0, 1fr))}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.items-end{align-items:flex-end}.items-center{align-items:center}.items-baseline{align-items:baseline}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1.5{gap:0.375rem}.gap-2{gap:0.5rem}.gap-3{gap:0.75rem}.gap-6{gap:1.5rem}.gap-[2px]{gap:2px}.overflow-hidden{overflow:hidden}.rounded{border-radius:0.25rem}.rounded-md{border-radius:0.375rem}.rounded-sm{border-radius:0.125rem}.rounded-xl{border-radius:0.75rem}.border-b{border-bottom-width:1px}.border-white/5{border-color:rgb(255 255 255 / 0.05)}.bg-[#0a0a0a]{--tw-bg-opacity:1;background-color:rgb(10 10 10 / var(--tw-bg-opacity, 1))}.bg-[#0a0a0a]/80{background-color:rgb(10 10 10 / 0.8)}.bg-[#1a1a1a]{--tw-bg-opacity:1;background-color:rgb(26 26 26 / var(--tw-bg-opacity, 1))}.bg-blue-600{--tw-bg-opacity:1;background-color:rgb(37 99 235 / var(--tw-bg-opacity, 1))}.bg-[#121212]{--tw-bg-opacity:1;background-color:rgb(18 18 18 / var(--tw-bg-opacity, 1))}.bg-blue-500/80{background-color:rgb(59 130 246 / 0.8)}.bg-purple-500/80{background-color:rgb(168 85 247 / 0.8)}.bg-slate-500{--tw-bg-opacity:1;background-color:rgb(100 116 139 / var(--tw-bg-opacity, 1))}.p-6{padding:1.5rem}.px-1.5{padding-left:0.375rem;padding-right:0.375rem}.px-3{padding-left:0.75rem;padding-right:0.75rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-0.5{padding-top:0.125rem;padding-bottom:0.125rem}.py-1.5{padding-top:0.375rem;padding-bottom:0.375rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-12{padding-top:3rem;padding-bottom:3rem}.pt-16{padding-top:4rem}.pt-6{padding-top:1.5rem}.text-center{text-align:center}.font-sans{font-family:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"}.text-base{font-size:1rem;line-height:1.5rem}.text-xs{font-size:0.75rem;line-height:1rem}.text-5xl{font-size:3rem;line-height:1}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.font-light{font-weight:300}.leading-relaxed{line-height:1.625}.leading-tight{line-height:1.25}.tracking-tight{letter-spacing:-0.025em}.tracking-wide{letter-spacing:0.025em}.text-slate-200{--tw-text-opacity:1;color:rgb(226 232 240 / var(--tw-text-opacity, 1))}.text-slate-300{--tw-text-opacity:1;color:rgb(203 213 225 / var(--tw-text-opacity, 1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.text-slate-400{--tw-text-opacity:1;color:rgb(148 163 184 / var(--tw-text-opacity, 1))}.text-slate-500{--tw-text-opacity:1;color:rgb(100 116 139 / var(--tw-text-opacity, 1))}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.opacity-80{opacity:0.8}.backdrop-blur-md{--tw-backdrop-blur:blur(12px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition-colors{transition-property:color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-300{transition-duration:300ms}.selection:bg-blue-500/30 *::selection{background-color:rgb(59 130 246 / 0.3)}.selection:bg-blue-500/30::selection{background-color:rgb(59 130 246 / 0.3)}.before:absolute::before{content:var(--tw-content);position:absolute}.before:inset-0::before{content:var(--tw-content);inset:0px}.before:-z-10::before{content:var(--tw-content);z-index:-10}.before:rounded-md::before{content:var(--tw-content);border-radius:0.375rem}.before:rounded-xl::before{content:var(--tw-content);border-radius:0.75rem}.before:bg-gradient-to-b::before{content:var(--tw-content);background-image:linear-gradient(to bottom, var(--tw-gradient-stops))}.before:from-white/20::before{content:var(--tw-content);--tw-gradient-from:rgb(255 255 255 / 0.2) var(--tw-gradient-from-position);--tw-gradient-to:rgb(255 255 255 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.before:from-white/15::before{content:var(--tw-content);--tw-gradient-from:rgb(255 255 255 / 0.15) var(--tw-gradient-from-position);--tw-gradient-to:rgb(255 255 255 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.before:to-transparent::before{content:var(--tw-content);--tw-gradient-to:transparent var(--tw-gradient-to-position)}.before:p-[1px]::before{content:var(--tw-content);padding:1px}.before:transition-colors::before{content:var(--tw-content);transition-property:color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.before:duration-500::before{content:var(--tw-content);transition-duration:500ms}.before:[mask-composite:exclude]::before{content:var(--tw-content);-webkit-mask-composite:xor;mask-composite:exclude}.before:[mask:linear-gradient(#fff_0_0)_content-box2c linear-gradient(#fff_0_0)]::before{content:var(--tw-content);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0)}.hover:bg-[#222]:hover{--tw-bg-opacity:1;background-color:rgb(34 34 34 / var(--tw-bg-opacity, 1))}.hover:before:from-white/25:hover::before{content:var(--tw-content);--tw-gradient-from:rgb(255 255 255 / 0.25) var(--tw-gradient-from-position);--tw-gradient-to:rgb(255 255 255 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.group:hover .group-hover:opacity-100{opacity:1}@media (min-width: 768px){.md:grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.md:text-7xl{font-size:4.5rem;line-height:1}.md:text-xl{font-size:1.25rem;line-height:1.75rem}}@media (min-width: 1024px){.lg:grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}.lg:text-2xl{font-size:1.5rem;line-height:2rem}.lg:text-8xl{font-size:6rem;line-height:1}}</style><meta name="disabled-font-classes" content="font-inter,font-roboto,font-poppins,font-playfair,font-merriweather,font-bricolage,font-work-sans,font-pt-serif,font-space-mono,font-cormorant,font-newsreader,font-dm-sans,font-oswald,font-geist-mono,font-space-grotesk,font-montserrat,font-quicksand,font-google-sans-flex,font-nunito,font-geist,font-jakarta,font-instrument-serif"><link id="all-fonts-link-font-manrope" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap"><style id="all-fonts-style-font-manrope">.font-manrope { font-family: 'Manrope', sans-serif !important; }</style></head>
<body class="bg-[#0a0a0a] text-slate-200 min-h-screen selection:bg-blue-500/30 antialiased font-sans">
<!-- Header -->
<header class="fixed top-0 w-full z-50 flex justify-between items-center px-6 py-4 bg-[#0a0a0a]/80 backdrop-blur-md border-b border-white/5">
<div class="flex items-center gap-2">
<span class="text-base text-white tracking-tight font-medium font-sans">Vanguard</span>
<span class="bg-blue-600 text-white text-xs px-1.5 py-0.5 rounded tracking-wide font-sans">Security</span>
</div>
<button class="relative flex items-center gap-1.5 bg-[#1a1a1a] hover:bg-[#222] transition-colors text-slate-300 text-xs px-3 py-1.5 rounded-md z-0 before:absolute before:inset-0 before:-z-10 before:rounded-md before:p-[1px] before:bg-gradient-to-b before:from-white/20 before:to-transparent before:[mask:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)] before:[mask-composite:exclude] before:[WebkitMaskComposite:xor] font-sans">
<iconify-icon icon="solar:alt-arrow-left-linear" stroke-width="1.5"></iconify-icon>
Back to Portal
</button>
</header>
<!-- Hero Section with Canvas Animation & Aura Background -->
<section class="relative w-full h-[65vh] min-h-[500px] flex items-center justify-center overflow-hidden border-b border-white/5 pt-16">
<!-- Aura Abstract Asset Image Background -->
<div class="absolute inset-0 z-0 opacity-20 mix-blend-screen bg-[url('https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/fa51902b-c2a4-4c33-a96e-a8f1ef67edc6_3840w.jpg')] bg-cover bg-center"></div>
<!-- WebGL/Canvas Background -->
<canvas id="particle-canvas" class="absolute inset-0 z-0 w-full h-full opacity-80" width="1519" height="715"></canvas>
<!-- Hero Content -->
<div class="relative z-10 text-center mx-4 max-w-4xl w-full">
<h1 class="reveal-text text-5xl md:text-7xl lg:text-8xl text-white tracking-tight leading-tight mb-6 font-manrope font-light">
Autonomous Cyber<br>Immunity
</h1>
<p class="reveal-text text-lg md:text-xl lg:text-2xl text-slate-400 max-w-2xl mx-auto leading-relaxed font-manrope font-light">
Securing global infrastructure through AI-driven threat intelligence and proactive zero-day neutralization.
</p>
</div>
</section>
<!-- Content Grid Section -->
<section class="max-w-7xl mx-auto px-6 py-12">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Card 1 -->
<div class="relative bg-[#121212] rounded-xl p-6 h-full flex flex-col group z-0 before:absolute before:inset-0 before:-z-10 before:rounded-xl before:p-[1px] before:bg-gradient-to-b before:from-white/15 hover:before:from-white/25 before:to-transparent before:transition-colors before:duration-500 before:[mask:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)] before:[mask-composite:exclude] before:[WebkitMaskComposite:xor]">
<div class="mb-4">
<h3 class="reveal-text text-base text-white tracking-tight flex items-baseline gap-2 font-medium font-sans">
Sentinel Protocol <span class="text-xs text-slate-500 font-normal font-sans">(Threat Detection)</span>
</h3>
<p class="text-sm text-slate-400 mt-2 leading-relaxed font-normal font-sans">
Deep learning algorithms monitoring data streams to isolate vulnerabilities before they manifest.
</p>
</div>
<!-- Animated Dot Chart -->
<div class="mt-auto pt-6 flex items-end gap-3 h-32 opacity-80 group-hover:opacity-100 transition-opacity">
<!-- Bars -->
<div class="chart-col flex flex-col-reverse gap-[2px] w-full max-w-[40px]">
<div class="chart-dot w-full h-1 bg-slate-500 rounded-sm transition-opacity duration-300" style="opacity: 1;"></div>
<div class="chart-dot w-full h-1 bg-slate-500 rounded-sm transition-opacity duration-300" style="opacity: 0.15;"></div>
<div class="chart-dot w-full h-1 bg-slate-500 rounded-sm transition-opacity duration-300" style="opacity: 0.15;"></div>
<div class="chart-dot w-full h-1 bg-slate-500 rounded-sm transition-opacity duration-300" style="opacity: 0.15;"></div>
<div class="chart-dot w-full h-1 bg-slate-500 rounded-sm transition-opacity duration-300" style="opacity: 0.15;"></div>
<div class="chart-dot w-full h-1 bg-slate-500 rounded-sm transition-opacity duration-300" style="opacity: 0.15;"></div>
</div>
<div class="chart-col flex flex-col-reverse gap-[2px] w-full max-w-[40px]">
<div class="chart-dot w-full h-1 bg-slate-500 rounded-sm transition-opacity duration-300" style="opacity: 1;"></div>
<div class="chart-dot w-full h-1 bg-slate-500 rounded-sm transition-opacity duration-300" style="opacity: 1;"></div>
<div class="chart-dot w-full h-1 bg-slate-500 rounded-sm transition-opacity duration-300" style="opacity: 1;"></div>
<div class="chart-dot w-full h-1 bg-slate-500 rounded-sm transition-opacity duration-300" style="opacity: 1;"></div>
<div class="chart-dot w-full h-1 bg-slate-500 rounded-sm transition-opacity duration-300" style="opacity: 0.15;"></div>
<div class="chart-dot w-full h-1 bg-slate-500 rounded-sm transition-opacity duration-300" style="opacity: 0.15;"></div>
</div>
<div class="chart-col flex flex-col-reverse gap-[2px] w-full max-w-[40px]">
<div class="chart-dot w-full h-1 bg-slate-500 rounded-sm transition-opacity duration-300" style="opacity: 1;"></div>
<div class="chart-dot w-full h-1 bg-slate-500 rounded-sm transition-opacity duration-300" style="opacity: 1;"></div>
<div class="chart-dot w-full h-1 bg-slate-500 rounded-sm transition-opacity duration-300" style="opacity: 1;"></div>
<div class="chart-dot w-full h-1 bg-slate-500 rounded-sm transition-opacity duration-300" style="opacity: 0.15;"></div>
<div class="chart-dot w-full h-1 bg-slate-500 rounded-sm transition-opacity duration-300" style="opacity: 0.15;"></div>
<div class="chart-dot w-full h-1 bg-slate-500 rounded-sm transition-opacity duration-300" style="opacity: 0.15;"></div>
</div>
</div>
</div>
<!-- Card 2 -->
<div class="relative bg-[#121212] rounded-xl p-6 h-full flex flex-col group z-0 before:absolute before:inset-0 before:-z-10 before:rounded-xl before:p-[1px] before:bg-gradient-to-b before:from-white/15 hover:before:from-white/25 before:to-transparent before:transition-colors before:duration-500 before:[mask:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)] before:[mask-composite:exclude] before:[WebkitMaskComposite:xor]">
<div class="mb-4">
<h3 class="reveal-text text-base text-white tracking-tight flex items-baseline gap-2 font-medium font-sans">
Nexus Guardian <span class="text-xs text-slate-500 font-normal font-sans">(Node Security)</span>
</h3>
<p class="text-sm text-slate-400 mt-2 leading-relaxed font-normal font-sans">
Heuristic analysis tracking process execution and memory states to halt malicious payloads instantly.
</p>
</div>
<!-- Animated Dot Chart (Purple tint) -->
<div class="mt-auto pt-6 flex items-end gap-3 h-32 opacity-80 group-hover:opacity-100 transition-opacity">
<div class="chart-col flex flex-col-reverse gap-[2px] w-full max-w-[40px]">
<div class="chart-dot w-full h-1 bg-purple-500/80 rounded-sm transition-opacity duration-300" style="opacity: 1;"></div>
<div class="chart-dot w-full h-1 bg-purple-500/80 rounded-sm transition-opacity duration-300" style="opacity: 1;"></div>
<div class="chart-dot w-full h-1 bg-purple-500/80 rounded-sm transition-opacity duration-300" style="opacity: 1;"></div>
<div class="chart-dot w-full h-1 bg-purple-500/80 rounded-sm transition-opacity duration-300" style="opacity: 1;"></div>
<div class="chart-dot w-full h-1 bg-purple-500/80 rounded-sm transition-opacity duration-300" style="opacity: 1;"></div>
<div class="chart-dot w-full h-1 bg-purple-500/80 rounded-sm transition-opacity duration-300" style="opacity: 1;"></div>
</div>
<div class="chart-col flex flex-col-reverse gap-[2px] w-full max-w-[40px]">
<div class="chart-dot w-full h-1 bg-purple-500/80 rounded-sm transition-opacity duration-300" style="opacity: 1;"></div>
<div class="chart-dot w-full h-1 bg-purple-500/80 rounded-sm transition-opacity duration-300" style="opacity: 1;"></div>
<div class="chart-dot w-full h-1 bg-purple-500/80 rounded-sm transition-opacity duration-300" style="opacity: 1;"></div>
<div class="chart-dot w-full h-1 bg-purple-500/80 rounded-sm transition-opacity duration-300" style="opacity: 1;"></div>
<div class="chart-dot w-full h-1 bg-purple-500/80 rounded-sm transition-opacity duration-300" style="opacity: 1;"></div>
<div class="chart-dot w-full h-1 bg-purple-500/80 rounded-sm transition-opacity duration-300" style="opacity: 1;"></div>
</div>
<div class="chart-col flex flex-col-reverse gap-[2px] w-full max-w-[40px]">
<div class="chart-dot w-full h-1 bg-purple-500/80 rounded-sm transition-opacity duration-300" style="opacity: 1;"></div>
<div class="chart-dot w-full h-1 bg-purple-500/80 rounded-sm transition-opacity duration-300" style="opacity: 1;"></div>
<div class="chart-dot w-full h-1 bg-purple-500/80 rounded-sm transition-opacity duration-300" style="opacity: 0.15;"></div>
<div class="chart-dot w-full h-1 bg-purple-500/80 rounded-sm transition-opacity duration-300" style="opacity: 0.15;"></div>
<div class="chart-dot w-full h-1 bg-purple-500/80 rounded-sm transition-opacity duration-300" style="opacity: 0.15;"></div>
<div class="chart-dot w-full h-1 bg-purple-500/80 rounded-sm transition-opacity duration-300" style="opacity: 0.15;"></div>
</div>
</div>
</div>
<!-- Card 3 -->
<div class="relative bg-[#121212] rounded-xl p-6 h-full flex flex-col group z-0 before:absolute before:inset-0 before:-z-10 before:rounded-xl before:p-[1px] before:bg-gradient-to-b before:from-white/15 hover:before:from-white/25 before:to-transparent before:transition-colors before:duration-500 before:[mask:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)] before:[mask-composite:exclude] before:[WebkitMaskComposite:xor]">
<div class="mb-4">
<h3 class="reveal-text text-base text-white tracking-tight flex items-baseline gap-2 font-medium font-sans">
Aether Monitor <span class="text-xs text-slate-500 font-normal font-sans">(Cloud Defense)</span>
</h3>
<p class="text-sm text-slate-400 mt-2 leading-relaxed font-normal font-sans">
Continuous validation of distributed environments and access controls to maintain absolute state integrity.
</p>
</div>
<!-- Animated Dot Chart (Blue tint) -->
<div class="mt-auto pt-6 flex items-end gap-3 h-32 opacity-80 group-hover:opacity-100 transition-opacity">
<div class="chart-col flex flex-col-reverse gap-[2px] w-full max-w-[40px]">
<div class="chart-dot w-full h-1 bg-blue-500/80 rounded-sm transition-opacity duration-300" style="opacity: 0.15;"></div>
<div class="chart-dot w-full h-1 bg-blue-500/80 rounded-sm transition-opacity duration-300" style="opacity: 0.15;"></div>
<div class="chart-dot w-full h-1 bg-blue-500/80 rounded-sm transition-opacity duration-300" style="opacity: 0.15;"></div>
<div class="chart-dot w-full h-1 bg-blue-500/80 rounded-sm transition-opacity duration-300" style="opacity: 0.15;"></div>
<div class="chart-dot w-full h-1 bg-blue-500/80 rounded-sm transition-opacity duration-300" style="opacity: 0.15;"></div>
<div class="chart-dot w-full h-1 bg-blue-500/80 rounded-sm transition-opacity duration-300" style="opacity: 0.15;"></div>
</div>
<div class="chart-col flex flex-col-reverse gap-[2px] w-full max-w-[40px]">
<div class="chart-dot w-full h-1 bg-blue-500/80 rounded-sm transition-opacity duration-300" style="opacity: 1;"></div>
<div class="chart-dot w-full h-1 bg-blue-500/80 rounded-sm transition-opacity duration-300" style="opacity: 1;"></div>
<div class="chart-dot w-full h-1 bg-blue-500/80 rounded-sm transition-opacity duration-300" style="opacity: 1;"></div>
<div class="chart-dot w-full h-1 bg-blue-500/80 rounded-sm transition-opacity duration-300" style="opacity: 1;"></div>
<div class="chart-dot w-full h-1 bg-blue-500/80 rounded-sm transition-opacity duration-300" style="opacity: 1;"></div>
<div class="chart-dot w-full h-1 bg-blue-500/80 rounded-sm transition-opacity duration-300" style="opacity: 1;"></div>
</div>
</div>
</div>
</div>
</section>
<!-- Scripts -->
<script>
document.addEventListener("DOMContentLoaded", () => {
// Text Masked Reveal with GSAP Split Logic
document.querySelectorAll('.reveal-text').forEach(el => {
const html = el.innerHTML;
const newHtml = html.split(/(<brs*/?>|s+)/).map(part => {
if (part.match(/<br/i)) return part;
if (part.trim() === '') return part;
return `<span style="display:inline-block; overflow:hidden; vertical-align:top;"><span class="reveal-word" style="display:inline-block; transform:translateY(100%); opacity:0;">${part}</span></span>`;
}).join('');
el.innerHTML = newHtml;
});
gsap.registerPlugin(ScrollTrigger);
gsap.utils.toArray('.reveal-text').forEach(el => {
gsap.to(el.querySelectorAll('.reveal-word'), {
y: '0%',
opacity: 1,
duration: 0.8,
stagger: 0.04,
ease: 'power3.out',
scrollTrigger: {
trigger: el,
start: 'top 90%'
}
});
});
// Chart Animation Logic
setInterval(() => {
document.querySelectorAll('.chart-col').forEach(col => {
const dots = col.querySelectorAll('.chart-dot');
const activeCount = Math.floor(Math.random() * (dots.length + 1));
dots.forEach((dot, index) => {
dot.style.opacity = index < activeCount ? '1' : '0.15';
});
});
}, 600);
// Canvas Background Logic
const canvas = document.getElementById('particle-canvas');
if (canvas) {
const ctx = canvas.getContext('2d');
let width, height;
const spacing = 16;
const dotRadius = 1.5;
let time = 0;
function resize() {
width = canvas.width = canvas.offsetWidth;
height = canvas.height = canvas.offsetHeight;
}
window.addEventListener('resize', resize);
resize();
function draw() {
ctx.clearRect(0, 0, width, height);
const cols = Math.floor(width / spacing);
const rows = Math.floor(height / spacing);
const offsetX = (width - cols * spacing) / 2;
const offsetY = (height - rows * spacing) / 2;
for (let i = 0; i <= cols; i++) {
for (let j = 0; j <= rows; j++) {
const x = offsetX + i * spacing;
const y = offsetY + j * spacing;
const nx = i * 0.1;
const ny = j * 0.1;
const wave1 = Math.sin(nx + time * 0.5) * Math.cos(ny - time * 0.3);
const wave2 = Math.sin(nx * 0.5 - ny * 0.5 + time * 0.8);
const value = wave1 + wave2;
if (value > 0.1) {
ctx.beginPath();
ctx.arc(x, y, dotRadius, 0, Math.PI * 2);
const highlightCheck = Math.sin(i * 12.34) * Math.cos(j * 56.78);
if (highlightCheck > 0.98) {
ctx.fillStyle = '#3b82f6'; // Blue highlight
} else if (highlightCheck < -0.98) {
ctx.fillStyle = '#8b5cf6'; // Purple highlight
} else {
const alpha = Math.min(0.6, (value - 0.1) * 0.8);
ctx.fillStyle = `rgba(148, 163, 184, ${alpha})`;
}
ctx.fill();
}
}
}
time += 0.02;
requestAnimationFrame(draw);
}
draw();
}
});
</script>
</body></html>
/* ===== src/shaders/neuform-isolated/sources/override-grid.html (html) ===== */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>System Override</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
</head>
<body class="bg-zinc-900 text-orange-500 font-mono w-full h-screen overflow-hidden relative select-none flex items-center justify-center">
<!-- Aura Asset Background Image (Subtle) -->
<div class="absolute inset-0 z-[-1] opacity-30 mix-blend-screen bg-cover bg-center" style="background-image: url('https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/fa51902b-c2a4-4c33-a96e-a8f1ef67edc6_1600w.jpg');"></div>
<!-- Dither / Noise Overlay -->
<div class="pointer-events-none absolute inset-0 z-50 opacity-[0.06] mix-blend-screen" style="background-image: url('data:image/svg+xml;utf8,%3Csvg viewBox=%220 0 2 2%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Crect width=%221%22 height=%221%22 fill=%22%23f97316%22/%3E%3Crect x=%221%22 y=%221%22 width=%221%22 height=%221%22 fill=%22%23f97316%22/%3E%3C/svg%3E'); background-size: 2px 2px;"></div>
<!-- WebGL-style Block by Block Animation Canvas -->
<canvas id="grid-canvas" class="absolute inset-0 z-0 opacity-50" aria-hidden="true"></canvas>
<!-- Viewport Corner Markers -->
<div class="absolute top-4 left-4 w-4 h-4 border-t border-l border-orange-500/50 z-10"></div>
<div class="absolute top-4 right-4 w-4 h-4 border-t border-r border-orange-500/50 z-10"></div>
<div class="absolute bottom-4 left-4 w-4 h-4 border-b border-l border-orange-500/50 z-10"></div>
<div class="absolute bottom-4 right-4 w-4 h-4 border-b border-r border-orange-500/50 z-10"></div>
<!-- Background Telemetry Text -->
<div class="absolute top-8 left-8 text-xs font-thin opacity-60 tracking-widest flex flex-col gap-1 z-10 hidden sm:flex">
<span>SYNC_PHASE: <span id="log-frame">000000</span></span>
<span>SYS_OVERRIDE_SEQ: [ ACTIVE ]</span>
<span>ROUTE_MAP: TRACING</span>
<span>CRIT_ALERT:</span>
<span class="text-orange-600 animate-pulse">> ERR_TIMEOUT</span>
<span id="typewriter" class="text-orange-400"></span>
</div>
<div class="absolute bottom-8 right-8 text-xs font-thin opacity-60 tracking-widest text-right z-10 hidden sm:block">
<span id="log-mem">REG_ADDR: 0xFA48B2</span><br>
<span>STATE: OVERRIDING</span>
</div>
<!-- Main Content Container -->
<main class="relative z-20 w-full max-w-5xl h-full flex items-center justify-center px-4 sm:px-16">
<!-- Container Lines & Mini Squares -->
<div class="absolute inset-y-12 left-8 w-px bg-gradient-to-b from-transparent via-orange-500/30 to-transparent hidden sm:block"></div>
<div class="absolute inset-y-12 right-8 w-px bg-gradient-to-b from-transparent via-orange-500/30 to-transparent hidden sm:block"></div>
<div class="absolute top-1/4 left-[30px] w-1.5 h-1.5 border border-orange-500/80 hidden sm:block"></div>
<div class="absolute bottom-1/4 left-[30px] w-1.5 h-1.5 border border-orange-500/80 hidden sm:block"></div>
<div class="absolute top-1/3 right-[30px] w-1.5 h-1.5 border border-orange-500/80 hidden sm:block"></div>
<div class="absolute bottom-1/3 right-[30px] w-1.5 h-1.5 border border-orange-500/80 hidden sm:block"></div>
<!-- The Main Orange Block (Gradient Border for Premium Surface) -->
<div class="p-[1px] bg-gradient-to-br from-orange-300 via-orange-600/70 to-orange-900/40 relative w-full shadow-[0_0_50px_rgba(249,115,22,0.15)]">
<div class="relative w-full h-40 sm:h-48 bg-[#f97316] flex items-center transition-all duration-100">
<!-- Top Left Tab -->
<div class="absolute -top-6 left-0 h-6 w-24 bg-[#f97316] flex items-center justify-between px-2 text-xs font-normal text-zinc-800 tracking-widest border-b border-zinc-800">
<span>TIMEOUT</span>
<div class="w-1.5 h-1.5 bg-zinc-800"></div>
</div>
<!-- Right Edge Extrusions & Cutouts -->
<div class="absolute -top-3 right-0 h-3 w-10 sm:w-16 bg-[#f97316]">
<div class="absolute top-1 right-1 w-1 h-1 bg-zinc-800"></div>
</div>
<div class="absolute -bottom-3 right-0 h-3 w-10 sm:w-16 bg-[#f97316]">
<div class="absolute bottom-1 right-1 w-1 h-1 bg-zinc-800"></div>
</div>
<!-- Left Edge Middle Cutout -->
<div class="absolute top-1/2 -left-1 -translate-y-1/2 w-2 h-4 bg-zinc-800 border-r border-[#f97316]/50"></div>
<!-- Right Edge Middle Cutout -->
<div class="absolute top-1/2 -right-1 -translate-y-1/2 w-2 h-6 bg-zinc-800"></div>
<!-- Inner Layout -->
<div class="flex w-full h-full px-4 sm:px-8">
<!-- Left Section: Warning & Text -->
<div class="flex flex-col sm:flex-row items-start sm:items-center justify-center gap-4 sm:gap-6 w-full sm:w-1/2 border-zinc-800/30 sm:border-r pr-0 sm:pr-6 relative gs-reveal-container">
<!-- Subtle animated background highlight in left section -->
<div class="absolute inset-0 bg-white/5 opacity-0 animate-[pulse_4s_ease-in-out_infinite]" style="animation-direction: alternate;"></div>
<iconify-icon icon="solar:round-transfer-horizontal-linear" class="text-zinc-800 text-5xl sm:text-7xl shrink-0 animate-spin-slow relative z-10" style="stroke-width: 1.5px; animation: spin 4s linear infinite;"></iconify-icon>
<div class="flex flex-col relative z-10 pt-1">
<h1 class="text-zinc-800 text-3xl sm:text-5xl font-light tracking-tight leading-[0.85] uppercase overflow-hidden pb-1">
<span class="block gs-reveal">System</span>
</h1>
<h2 class="text-zinc-800 text-3xl sm:text-5xl font-thin tracking-tight leading-[0.85] uppercase mt-1 overflow-hidden pb-1">
<span class="block gs-reveal">Override</span>
</h2>
</div>
</div>
<!-- Right Section: Data Matrix -->
<div class="hidden sm:flex flex-1 relative items-center justify-end pl-6">
<!-- Crosshairs / Guides -->
<div class="absolute inset-x-6 top-1/2 h-px bg-zinc-800/20 -translate-y-1/2"></div>
<div class="absolute inset-y-8 right-32 w-px bg-zinc-800/20"></div>
<div class="absolute inset-y-8 right-12 w-px bg-zinc-800/20"></div>
<!-- Data Grid Blocks -->
<div class="flex gap-4 sm:gap-6 relative z-10">
<!-- Block Group 1 -->
<div class="grid grid-cols-2 gap-1.5 h-fit">
<div class="w-5 h-5 bg-zinc-800 shadow-[inset_0_0_0_1px_rgba(255,255,255,0.2)]"></div>
<div class="w-5 h-5 bg-zinc-800 shadow-[inset_0_0_0_1px_rgba(255,255,255,0.2)]"></div>
<div class="w-5 h-5 bg-zinc-800 shadow-[inset_0_0_0_1px_rgba(255,255,255,0.2)]"></div>
<div class="w-5 h-5 bg-zinc-800 shadow-[inset_0_0_0_1px_rgba(255,255,255,0.2)]"></div>
</div>
<!-- Block Group 2 (Offset) -->
<div class="grid grid-cols-2 gap-1.5 h-fit mt-8">
<div class="w-5 h-5 bg-zinc-800 shadow-[inset_0_0_0_1px_rgba(255,255,255,0.2)]"></div>
<div class="w-5 h-5 bg-zinc-800 shadow-[inset_0_0_0_1px_rgba(255,255,255,0.2)] opacity-20 animate-pulse"></div>
<div class="w-5 h-5 bg-zinc-800 shadow-[inset_0_0_0_1px_rgba(255,255,255,0.2)]"></div>
<div class="w-5 h-5 bg-zinc-800 shadow-[inset_0_0_0_1px_rgba(255,255,255,0.2)]"></div>
</div>
<div class="w-2"></div>
<!-- Block Group 3 (Top aligned, missing piece blinking to suggest retry) -->
<div class="grid grid-cols-2 gap-1.5 h-fit">
<div class="w-5 h-5 bg-zinc-800 shadow-[inset_0_0_0_1px_rgba(255,255,255,0.2)]"></div>
<div class="w-5 h-5 bg-zinc-800 shadow-[inset_0_0_0_1px_rgba(255,255,255,0.2)]"></div>
<div class="w-5 h-5 bg-transparent border border-zinc-800 relative animate-pulse">
<div class="absolute inset-x-1 top-1/2 h-px bg-zinc-800"></div>
<div class="absolute inset-y-1 left-1/2 w-px bg-zinc-800"></div>
</div>
<div class="w-5 h-5 bg-zinc-800 shadow-[inset_0_0_0_1px_rgba(255,255,255,0.2)]"></div>
</div>
</div>
</div>
</div>
<!-- Bottom Left Micro Details -->
<div class="absolute bottom-2 left-4 flex gap-2 items-center text-zinc-800">
<iconify-icon icon="solar:server-square-linear" class="text-lg opacity-80" style="stroke-width: 1.5px;"></iconify-icon>
<div class="flex flex-col">
<span class="text-xs tracking-widest opacity-80 uppercase font-light leading-none">AUTH_NODE // ACCESS DENIED</span>
<span class="text-xs tracking-widest opacity-60 uppercase font-thin mt-1">EXECUTING BYPASS PROTOCOL...</span>
</div>
</div>
</div>
</div>
</main>
<script>
// GSAP ScrollTrigger Masked Reveal
gsap.registerPlugin(ScrollTrigger);
gsap.from(".gs-reveal", {
y: "120%",
duration: 1.2,
stagger: 0.15,
ease: "power4.out",
scrollTrigger: {
trigger: ".gs-reveal-container",
start: "top 95%",
}
});
// WebGL-style Block by Block Animation (Simulated in 2D for constraints)
const canvas = document.getElementById('grid-canvas');
const ctx = canvas.getContext('2d');
let width, height, time = 0;
function resize() {
width = canvas.width = window.innerWidth;
height = canvas.height = window.innerHeight;
}
window.addEventListener('resize', resize);
resize();
function draw() {
ctx.clearRect(0, 0, width, height);
time += 0.04;
const blockSize = 48;
const blockGap = 2;
const pitch = blockSize + blockGap;
const cols = Math.ceil(width / pitch);
const rows = Math.ceil(height / pitch);
const centerX = cols / 2;
const centerY = rows / 2;
for (let i = 0; i < cols; i++) {
for (let j = 0; j < rows; j++) {
const dist = Math.sqrt(Math.pow(i - centerX, 2) + Math.pow(j - centerY, 2));
const wave = Math.sin(time - dist * 0.4);
if (wave > 0) {
const alpha = wave * 0.15;
ctx.fillStyle = `rgba(249, 115, 22, ${alpha})`;
// Block scaling for "Z-depth" pulsing feel
const scale = wave * 0.7 + 0.3;
const size = blockSize * scale;
const offset = (pitch - size) / 2;
ctx.fillRect(i * pitch + offset, j * pitch + offset, size, size);
}
}
}
requestAnimationFrame(draw);
}
draw();
// Simulate telemetry data updates
setInterval(() => {
const frameLog = document.getElementById('log-frame');
const memLog = document.getElementById('log-mem');
if (frameLog) frameLog.innerText = Math.floor(Math.random() * 999999).toString().padStart(6, '0');
if (memLog) {
const hex = Math.floor(Math.random() * 16777215).toString(16).toUpperCase();
memLog.innerText = `REG_ADDR: 0x${hex}`;
}
}, 150);
// Typewriter Animation Logic
const typewriterElement = document.getElementById('typewriter');
if (typewriterElement) {
const phrases = ["> INITIATING BYPASS...", "> FLUSHING REGISTERS...", "> TIMEOUT: RETRYING..."];
let phraseIdx = 0;
let charIdx = 0;
let isDeleting = false;
function type() {
const currentPhrase = phrases[phraseIdx];
if (isDeleting) {
charIdx--;
} else {
charIdx++;
}
typewriterElement.innerText = currentPhrase.substring(0, charIdx) + "_";
let speed = isDeleting ? 30 : 60;
if (!isDeleting && charIdx === currentPhrase.length) {
speed = 2000;
isDeleting = true;
} else if (isDeleting && charIdx === 0) {
isDeleting = false;
phraseIdx = (phraseIdx + 1) % phrases.length;
speed = 500;
}
setTimeout(type, speed);
}
type();
}
</script>
</body>
</html>
/* ===== src/shaders/ribbon-field/ribbonFieldShaders.ts (typescript) ===== */
export const RIBBON_FIELD_VERTEX_SHADER = `
attribute vec2 position;
void main() {
gl_Position = vec4(position, 0.0, 1.0);
}
`;
export const RIBBON_FIELD_FRAGMENT_SHADER = `
precision highp float;
uniform vec2 resolution;
uniform float time;
uniform vec2 pointer;
float hash(vec2 p) {
p = fract(p * vec2(123.34, 456.21));
p += dot(p, p + 45.32);
return fract(p.x * p.y);
}
float ribbon(vec2 uv, float offset, float width, float phase) {
float y = 0.55 + 0.20 * sin((uv.x * 2.15) + phase) + 0.045 * sin((uv.x * 7.0) - phase * 0.7);
float d = abs(uv.y - y - offset);
return exp(-(d * d) / width);
}
void main() {
vec2 uv = gl_FragCoord.xy / resolution.xy;
vec2 p = uv;
p.x *= resolution.x / resolution.y;
float t = time * 0.22;
float drift = (pointer.x - 0.5) * 0.06;
float rightFade = smoothstep(0.28, 0.72, uv.x);
float centerDark = 1.0 - smoothstep(0.0, 0.88, distance(uv, vec2(0.18, 0.48)));
float r1 = ribbon(vec2(uv.x + drift, uv.y), 0.03, 0.0065, t + 0.9);
float r2 = ribbon(vec2(uv.x - drift * 0.7, uv.y), -0.23, 0.0085, t + 3.25);
float r3 = ribbon(vec2(uv.x + drift * 0.4, uv.y), 0.25, 0.014, t + 1.85);
float glow = r1 * 1.14 + r2 * 1.05 + r3 * 0.48;
vec3 teal = vec3(0.17, 0.83, 0.75);
vec3 cyan = vec3(0.22, 0.82, 0.96);
vec3 indigo = vec3(0.39, 0.38, 0.92);
vec3 purple = vec3(0.66, 0.33, 0.98);
vec3 blue = vec3(0.23, 0.51, 0.96);
vec3 col = vec3(0.0);
col += cyan * r1 * 0.92;
col += teal * r1 * 0.62;
col += indigo * r3 * 0.42;
col += blue * r2 * 0.66;
col += purple * (r2 + r3) * 0.30;
float bloom = exp(-pow(distance(uv, vec2(0.76, 0.40 + 0.035 * sin(t))), 2.0) / 0.050);
bloom += exp(-pow(distance(uv, vec2(0.71, 0.75 + 0.025 * cos(t))), 2.0) / 0.030);
col += vec3(0.42, 0.85, 1.0) * bloom * 0.34;
vec2 grid = fract(gl_FragCoord.xy / 7.0) - 0.5;
float dotShape = smoothstep(0.29, 0.11, length(grid));
float noise = hash(floor(gl_FragCoord.xy / 7.0));
float scan = 0.72 + 0.28 * sin((uv.x + uv.y) * 38.0 + time * 1.3);
float dots = dotShape * (0.48 + 0.52 * noise) * scan;
float micro = hash(gl_FragCoord.xy + time) * 0.035;
float alpha = clamp((glow * 1.55 + bloom * 0.50) * dots * rightFade, 0.0, 1.0);
alpha *= 1.0 - centerDark * 0.56;
vec3 base = vec3(0.005, 0.005, 0.005);
vec3 finalColor = mix(base, col, clamp(alpha * 1.55, 0.0, 1.0));
finalColor += micro * rightFade;
gl_FragColor = vec4(finalColor, 1.0);
}
`;
/* ===== src/shaders/neuform-isolated/sources/void-protocol.html (html) ===== */
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Void Field</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;400&display=swap" rel="stylesheet">
</head>
<body class="antialiased text-purple-200 bg-[#08030c] min-h-screen relative overflow-x-hidden flex items-center justify-center p-4 lg:p-12" style="font-family: 'Inter', sans-serif;">
<!-- Background decorative text -->
<div class="fixed top-[-5vh] left-[-10vw] text-[40vw] font-extralight tracking-tight text-purple-400/[0.03] select-none z-0 leading-none">
042
</div>
<!-- Container Lines Directive -->
<div class="relative w-full max-w-[1100px] mx-auto z-10">
<!-- Infinite Container Vertical Lines -->
<div class="absolute top-[-100vh] bottom-[-100vh] left-0 w-px bg-purple-400/10 hidden md:block z-0"></div>
<div class="absolute top-[-100vh] bottom-[-100vh] right-0 w-px bg-purple-400/10 hidden md:block z-0"></div>
<!-- Container Corner Nodes (6px square) -->
<div class="absolute top-0 left-[-2.5px] w-[6px] h-[6px] bg-purple-300 border border-purple-800 z-20 hidden md:block"></div>
<div class="absolute top-0 right-[-2.5px] w-[6px] h-[6px] bg-purple-300 border border-purple-800 z-20 hidden md:block"></div>
<div class="absolute bottom-0 left-[-2.5px] w-[6px] h-[6px] bg-purple-300 border border-purple-800 z-20 hidden md:block"></div>
<div class="absolute bottom-0 right-[-2.5px] w-[6px] h-[6px] bg-purple-300 border border-purple-800 z-20 hidden md:block"></div>
<!-- Thin 16px Frame Brackets -->
<div class="absolute top-[-16px] left-[-16px] w-[16px] h-[16px] border-t border-l border-purple-400/30 hidden md:block z-20"></div>
<div class="absolute top-[-16px] right-[-16px] w-[16px] h-[16px] border-t border-r border-purple-400/30 hidden md:block z-20"></div>
<div class="absolute bottom-[-16px] left-[-16px] w-[16px] h-[16px] border-b border-l border-purple-400/30 hidden md:block z-20"></div>
<div class="absolute bottom-[-16px] right-[-16px] w-[16px] h-[16px] border-b border-r border-purple-400/30 hidden md:block z-20"></div>
<div class="py-12 lg:py-24 flex justify-center w-full">
<!-- Main Hardware Housing (2.3:1 Aspect Ratio on lg) -->
<div class="relative w-full lg:aspect-[2.3/1] rounded-[3rem] bg-[#130a1c] shadow-[0_10px_40px_rgba(0,0,0,0.8),_0_20px_80px_rgba(0,0,0,0.6),inset_0_0_0_1px_rgba(216,180,254,0.15)] p-3 lg:p-5 flex flex-col">
<!-- Premium Gradient Bezel Edge -->
<div class="absolute inset-0 rounded-[3rem] shadow-[inset_0_2px_4px_rgba(216,180,254,0.05)] pointer-events-none z-10 border border-transparent" style="background: linear-gradient(135deg, rgba(216,180,254,0.15) 0%, rgba(216,180,254,0.02) 40%, transparent 100%) border-box; -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); -webkit-mask-composite: destination-out; mask-composite: exclude;"></div>
<!-- Hardware Details (Screws/Rivets top/bottom) -->
<div class="absolute top-3 left-1/4 w-3 h-3 rounded-full bg-black/90 shadow-[inset_0_1px_1px_rgba(216,180,254,0.2)] z-20"></div>
<div class="absolute top-3 right-1/4 w-3 h-3 rounded-full bg-black/90 shadow-[inset_0_1px_1px_rgba(216,180,254,0.2)] z-20"></div>
<div class="absolute bottom-3 left-1/4 w-3 h-3 rounded-full bg-black/90 shadow-[inset_0_1px_1px_rgba(216,180,254,0.2)] z-20"></div>
<div class="absolute bottom-3 right-1/4 w-3 h-3 rounded-full bg-black/90 shadow-[inset_0_1px_1px_rgba(216,180,254,0.2)] z-20"></div>
<!-- Inner Housing / Shadow Box -->
<div class="relative rounded-[2.5rem] bg-[#0a0510] overflow-hidden shadow-[inset_0_20px_50px_rgba(0,0,0,0.9)] border border-purple-400/5 z-10 flex-grow flex flex-col" style="background-image: repeating-linear-gradient(to right, #0a0510, #0a0510 6px, #10081a 6px, #10081a 10px);">
<!-- Screen Area -->
<div class="relative m-4 lg:m-8 rounded-xl bg-[#0a0510] shadow-[inset_0_5px_20px_rgba(0,0,0,1)] overflow-hidden flex flex-col flex-grow min-h-[400px] lg:min-h-0">
<!-- Premium Gradient Screen Border -->
<div class="absolute inset-0 rounded-xl pointer-events-none border border-transparent z-30" style="background: linear-gradient(180deg, rgba(216,180,254,0.15) 0%, rgba(216,180,254,0.02) 25%, rgba(0,0,0,0.8) 100%) border-box; -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); -webkit-mask-composite: destination-out; mask-composite: exclude;"></div>
<!-- WebGL Dot Matrix Layer -->
<canvas id="webgl-canvas" class="absolute inset-0 w-full h-full opacity-80 mix-blend-screen pointer-events-none z-0"></canvas>
<!-- Screen Horizontal Corrugation Overlay -->
<div class="absolute inset-0 pointer-events-none z-10 opacity-40" style="background-image: repeating-linear-gradient(to bottom, transparent, transparent 18px, rgba(0,0,0,0.9) 18px, rgba(0,0,0,0.9) 20px);"></div>
<!-- Faint Geometric Wireframe -->
<svg class="absolute right-0 top-0 h-full w-2/3 opacity-10 pointer-events-none z-10 stroke-purple-500" viewBox="0 0 800 400" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M400 50 L550 150 L550 350 L400 450 L250 350 L250 150 Z" stroke-width="2"></path>
<path d="M400 50 L400 250 M250 150 L400 250 M550 150 L400 250 M400 450 L400 250 M250 350 L400 250 M550 350 L400 250" stroke-width="1"></path>
<circle cx="550" cy="150" r="40" stroke-width="2"></circle>
</svg>
<!-- Content Container -->
<div class="relative z-20 flex flex-col h-full text-purple-100 w-full">
<!-- Top Section -->
<div class="flex items-center px-6 lg:px-12 py-6 border-b border-purple-400/10 bg-gradient-to-r from-transparent to-black/60">
<div class="flex items-center gap-4 border-r border-purple-400/20 pr-8">
<iconify-icon icon="solar:arrow-right-up-linear" class="text-4xl text-purple-400" style="stroke-width: 1.5px;"></iconify-icon>
<div class="flex items-center gap-2">
<div class="w-1 h-6 bg-purple-400/50"></div>
<span class="text-3xl font-extralight tracking-tight">V-72</span>
</div>
</div>
<div class="pl-8 text-xs font-normal uppercase tracking-widest opacity-70 leading-tight">
Void<br>Protocol
</div>
</div>
<!-- Middle Section (Data Band) -->
<div class="bg-purple-500/[0.03] text-purple-100 border-b border-purple-400/10 flex flex-col lg:flex-row relative backdrop-blur-sm">
<!-- Inner layout grid -->
<div class="grid grid-cols-1 lg:grid-cols-12 w-full">
<!-- Column 1: Core Telemetry -->
<div class="lg:col-span-3 px-6 lg:px-12 py-6 flex items-center border-b lg:border-b-0 lg:border-r border-purple-400/10">
<h2 class="text-3xl lg:text-4xl font-extralight tracking-tight leading-none masked-reveal">
Quantum<br>Metric
</h2>
</div>
<!-- Column 2: Date -->
<div class="lg:col-span-3 px-6 lg:px-8 py-6 flex items-center border-b lg:border-b-0 lg:border-r border-purple-400/10">
<div class="flex items-start gap-1">
<span class="text-4xl lg:text-5xl font-extralight tracking-tight">NET.42</span>
<span class="text-sm font-extralight mt-1 opacity-70">.8192</span>
</div>
<iconify-icon icon="solar:double-alt-arrow-right-linear" class="ml-auto text-2xl opacity-40" style="stroke-width: 1.5px;"></iconify-icon>
</div>
<!-- Column 3: Data Uplink -->
<div class="lg:col-span-3 px-6 lg:px-8 py-6 flex flex-col justify-center border-b lg:border-b-0 lg:border-r border-purple-400/10">
<div class="text-4xl lg:text-5xl font-extralight tracking-tight masked-reveal">72</div>
<div class="text-xs font-normal uppercase tracking-widest mt-1 opacity-70">Link Status</div>
</div>
<!-- Column 4: Cycles -->
<div class="lg:col-span-3 px-6 lg:px-8 py-6 flex flex-col justify-center relative">
<div class="flex items-center gap-3">
<iconify-icon icon="solar:atom-linear" class="text-2xl opacity-40" style="stroke-width: 1.5px;"></iconify-icon>
<div class="text-4xl lg:text-5xl font-extralight tracking-tight masked-reveal">1.059</div>
</div>
<div class="text-xs font-normal uppercase tracking-widest mt-1 ml-9 opacity-70">Phases</div>
</div>
</div>
</div>
<!-- Bottom Section -->
<div class="flex-grow flex items-end px-6 lg:px-12 py-8 lg:py-12 bg-gradient-to-t from-black/80 to-transparent relative">
<div class="flex items-end gap-8 w-full">
<div class="text-8xl lg:text-9xl leading-none font-extralight tracking-tight opacity-90 masked-reveal text-purple-100" style="text-shadow: 0px 0px 20px rgba(216,180,254,0.2);">
99
</div>
<div class="mb-4 lg:mb-8 flex flex-col gap-2">
<div class="text-xs font-normal uppercase tracking-widest leading-tight opacity-70">
System<br>Override
</div>
<iconify-icon icon="solar:target-linear" class="text-2xl opacity-50 text-purple-200" style="stroke-width: 1.5px;"></iconify-icon>
</div>
</div>
<!-- Bottom Edge Detailing -->
<div class="absolute bottom-0 left-0 w-full h-4 flex border-t border-purple-400/10">
<div class="w-16 h-full bg-[#0e0716] border-r border-purple-400/10 flex items-center justify-center gap-1">
<div class="w-1 h-1 bg-purple-400/30 rounded-full"></div>
<div class="w-1 h-1 bg-purple-400/30 rounded-full"></div>
</div>
<div class="w-32 h-full bg-purple-400/5 border-r border-purple-400/10"></div>
<!-- Striped hazard area -->
<div class="w-48 h-full border-r border-purple-400/10" style="background-image: repeating-linear-gradient(45deg, rgba(216,180,254,0.05) 0, rgba(216,180,254,0.05) 4px, transparent 4px, transparent 8px);"></div>
<div class="w-16 h-full bg-[#0e0716] border-r border-purple-400/10 flex items-center justify-center gap-1">
<div class="w-1 h-1 bg-purple-400/30 rounded-full"></div>
<div class="w-1 h-1 bg-purple-400/30 rounded-full"></div>
</div>
<div class="flex-grow h-full bg-purple-400/[0.02]"></div>
<div class="w-16 h-full bg-[#0e0716] border-l border-purple-400/10 flex items-center justify-center gap-1">
<div class="w-1 h-1 bg-purple-400/30 rounded-full"></div>
<div class="w-1 h-1 bg-purple-400/30 rounded-full"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Scripts for WebGL and GSAP -->
<script>
// 1. Masked Reveal via GSAP (TranslateY 100% to 0% with power4.out)
document.addEventListener("DOMContentLoaded", () => {
gsap.registerPlugin(ScrollTrigger);
const revealElements = document.querySelectorAll('.masked-reveal');
revealElements.forEach(el => {
const text = el.innerHTML;
const words = text.split(/<br>|s+/).filter(w => w.trim() !== '');
el.innerHTML = '';
words.forEach((word) => {
const wrapper = document.createElement('span');
wrapper.className = 'inline-block overflow-hidden align-bottom pb-1 -mb-1 mr-2';
const inner = document.createElement('span');
inner.className = 'inline-block translate-y-[100%] opacity-0';
inner.innerHTML = word;
if(text.includes(word + '<br>')) {
wrapper.appendChild(inner);
el.appendChild(wrapper);
el.appendChild(document.createElement('br'));
} else {
wrapper.appendChild(inner);
el.appendChild(wrapper);
}
});
gsap.to(el.querySelectorAll('span > span'), {
y: "0%",
opacity: 1,
duration: 1.2,
ease: "power4.out",
stagger: 0.1,
scrollTrigger: {
trigger: el,
start: "top 90%",
}
});
});
});
// 2. WebGL Dot-Matrix Terminal Shader
const canvas = document.getElementById('webgl-canvas');
const gl = canvas.getContext('webgl', { alpha: true, antialias: false });
if (gl) {
const resize = () => {
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;
gl.viewport(0, 0, canvas.width, canvas.height);
};
window.addEventListener('resize', resize);
resize();
const vertexShaderSource = `
attribute vec2 position;
void main() {
gl_Position = vec4(position, 0.0, 1.0);
}
`;
const fragmentShaderSource = `
precision highp float;
uniform vec2 iResolution;
uniform float iTime;
uniform vec2 uMouse;
vec2 barrel(vec2 uv, float amt) {
vec2 cc = uv - 0.5;
float r = dot(cc, cc);
return uv + cc * r * amt;
}
float rand(vec2 co) {
return fract(sin(dot(co, vec2(12.9898,78.233))) * 43758.5453);
}
void main() {
vec2 uv = gl_FragCoord.xy / iResolution.xy;
// Parallax drift based on uMouse
vec2 mouseOffset = (uMouse - 0.5) * 0.05;
uv += mouseOffset;
// Barrel distortion curvature
uv = barrel(uv, 0.2);
// Clamp edges
if(uv.x < 0.0 || uv.x > 1.0 || uv.y < 0.0 || uv.y > 1.0) {
gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
return;
}
// Dot matrix resolution
vec2 gridCount = vec2(100.0, 100.0 * (iResolution.y / iResolution.x));
vec2 gridUv = fract(uv * gridCount);
vec2 id = floor(uv * gridCount);
// Radial symmetry distance
vec2 cc = id / gridCount - 0.5;
float dist = length(cc);
// Slow breathing pulse
float pulse = sin(iTime * 1.5 - dist * 10.0) * 0.5 + 0.5;
// Dot formulation
float dotSize = 0.35 * pulse;
float d = length(gridUv - 0.5);
float circle = smoothstep(dotSize, dotSize - 0.05, d);
// Digital scanlines
float scanline = sin(uv.y * 800.0) * 0.03;
// Randomized flicker
float flicker = rand(vec2(iTime, id.y)) > 0.98 ? 0.4 : 1.0;
// Base color compilation (Tinted Monotone Purple)
vec3 col = vec3(circle * pulse * flicker);
col -= scanline;
col *= vec3(0.7, 0.3, 1.0); // Purple tint
// Vignette edge masking
col *= smoothstep(0.8, 0.2, dist);
gl_FragColor = vec4(col, 1.0);
}
`;
const compileShader = (type, source) => {
const shader = gl.createShader(type);
gl.shaderSource(shader, source);
gl.compileShader(shader);
return shader;
};
const vertexShader = compileShader(gl.VERTEX_SHADER, vertexShaderSource);
const fragmentShader = compileShader(gl.FRAGMENT_SHADER, fragmentShaderSource);
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
-1.0, -1.0, 1.0, -1.0, -1.0, 1.0,
-1.0, 1.0, 1.0, -1.0, 1.0, 1.0
]), gl.STATIC_DRAW);
const positionLocation = gl.getAttribLocation(program, "position");
gl.enableVertexAttribArray(positionLocation);
gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
const iResLoc = gl.getUniformLocation(program, "iResolution");
const iTimeLoc = gl.getUniformLocation(program, "iTime");
const uMouseLoc = gl.getUniformLocation(program, "uMouse");
// Interactive pointer drift tracking
let mouseX = 0.5, mouseY = 0.5;
document.addEventListener('mousemove', (e) => {
mouseX = e.clientX / window.innerWidth;
mouseY = 1.0 - (e.clientY / window.innerHeight);
});
const startTime = performance.now();
const render = (time) => {
const elapsedTime = (time - startTime) / 1000.0;
gl.uniform2f(iResLoc, canvas.width, canvas.height);
gl.uniform1f(iTimeLoc, elapsedTime);
gl.uniform2f(uMouseLoc, mouseX, mouseY);
gl.drawArrays(gl.TRIANGLES, 0, 6);
requestAnimationFrame(render);
};
requestAnimationFrame(render);
}
</script>
</body>
</html>
/* ===== src/shaders/neuform-isolated/sources/nexus-unified-flow.html (html) ===== */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nexus - Unified Ecosystem</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
<!-- GSAP for Animations -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
</head>
<body class="bg-black text-white font-sans min-h-screen overflow-x-hidden antialiased selection:bg-red-500/30 flex flex-col relative" style="font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;">
<!-- WebGL Background -->
<canvas id="glcanvas" class="fixed inset-0 w-full h-full -z-20"></canvas>
<!-- Overlay structural lines to match reference -->
<div class="fixed inset-0 pointer-events-none -z-10 w-full h-full">
<!-- Thin angled lines behind logo area -->
<div class="absolute top-0 left-0 w-[600px] h-[600px] border-l border-t border-white/5 origin-top-left rotate-[15deg] translate-x-[-100px] translate-y-[-100px]"></div>
<div class="absolute top-0 left-0 w-[800px] h-[800px] border-l border-white/5 origin-top-left rotate-[-25deg] translate-x-[200px] translate-y-[-50px]"></div>
<!-- Horizontal grid line -->
<div class="absolute top-[20%] w-full border-t border-white/5"></div>
</div>
<!-- Main Content Layout -->
<div class="flex-1 flex flex-col relative z-10 w-full max-w-[1600px] mx-auto min-h-screen border-l border-r border-white/10">
<!-- Hero Section -->
<main class="flex-1 flex flex-col lg:flex-row items-center lg:items-center justify-between px-8 sm:px-16 lg:px-24 py-24 lg:py-0 relative">
<!-- Left: Logo & Title -->
<div class="flex items-center gap-6 group cursor-default w-full lg:w-1/2 mb-20 lg:mb-0">
<!-- Abstract Geometric Icon -->
<svg width="72" height="72" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg" class="text-white transform group-hover:scale-105 transition-transform duration-500 ease-out" style="flex-shrink: 0;">
<path d="M10 20 L50 40 L90 10 L80 50 L95 85 L50 60 L15 90 L25 50 Z" fill="currentColor"/>
<path d="M50 40 L50 60" stroke="black" stroke-width="2"/>
<path d="M10 20 L50 60" stroke="black" stroke-width="2"/>
</svg>
<!-- Masked Reveal Title -->
<h1 class="text-7xl sm:text-8xl lg:text-9xl font-semibold tracking-tighter lowercase leading-none flex flex-wrap gap-x-4 gap-y-2 reveal-text">
<span class="inline-block overflow-hidden pt-2">
<span class="reveal-word inline-block translate-y-[120%] pb-2">nexus</span>
</span>
<span class="inline-block overflow-hidden pt-2">
<span class="reveal-word inline-block translate-y-[120%] pb-2">flow</span>
</span>
</h1>
</div>
<!-- Right: Input & Social Proof -->
<div class="w-full lg:w-1/2 flex flex-col items-start lg:items-end relative">
<!-- Offset Input Container -->
<div class="relative group w-full max-w-md">
<!-- Stylized Shadow/Offset with subtle gradient -->
<div class="absolute inset-0 bg-gradient-to-br from-[#A63A29] to-[#732215] translate-x-3 translate-y-3 transition-transform duration-300 ease-out group-hover:translate-x-4 group-hover:translate-y-4"></div>
<!-- Input Box with Premium Gradient Border Treatment -->
<div class="relative z-10 p-[1px] bg-gradient-to-r from-white/40 via-white/10 to-white/30">
<div class="bg-white flex items-center justify-between p-1 w-full h-[60px] sm:h-[72px]">
<input type="email" placeholder="Join the waitlist..." class="w-full h-full bg-transparent text-black outline-none px-6 text-base sm:text-lg font-medium placeholder:text-gray-500 placeholder:font-normal" />
</div>
</div>
</div>
<!-- Users Proof -->
<div class="flex flex-row items-center gap-4 mt-10 mr-2">
<span class="text-sm font-medium tracking-wide">5,102+ early adopters</span>
<div class="flex -space-x-3">
<!-- Avatars with Gradient Borders -->
<div class="w-8 h-8 rounded-full p-[2px] bg-gradient-to-br from-white/50 to-white/10 bg-black shadow-sm">
<img class="w-full h-full rounded-full object-cover" src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/2f563338-39fa-47ea-9761-658d4f3f84db_1600w.jpg" alt="User avatar">
</div>
<div class="w-8 h-8 rounded-full p-[2px] bg-gradient-to-br from-white/50 to-white/10 bg-black shadow-sm">
<img class="w-full h-full rounded-full object-cover" src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/4f5668c5-fc4a-44e0-bc5e-a664189d3c31_1600w.jpg" alt="User avatar">
</div>
<div class="w-8 h-8 rounded-full p-[2px] bg-gradient-to-br from-white/50 to-white/10 bg-black shadow-sm">
<img class="w-full h-full rounded-full object-cover" src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/eca707cc-a5b7-439a-b4fd-247f6106c2e1_1600w.jpg" alt="User avatar">
</div>
<div class="w-8 h-8 rounded-full p-[2px] bg-gradient-to-br from-white/50 to-white/10 bg-black shadow-sm">
<img class="w-full h-full rounded-full object-cover" src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/77415a2e-dcbc-4748-a29d-fced4821881a_1600w.jpg" alt="User avatar">
</div>
</div>
</div>
</div>
</main>
<!-- Structural Horizontal Divider -->
<div class="w-full border-t border-white/20"></div>
<!-- Footer Section -->
<footer class="w-full grid grid-cols-1 lg:grid-cols-12 min-h-[300px]">
<!-- Footer Left: Brand & Desc -->
<div class="lg:col-span-4 p-8 sm:p-12 lg:p-16 border-b lg:border-b-0 lg:border-r border-white/20 flex flex-col gap-6">
<div class="flex items-center gap-3">
<svg width="24" height="24" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg" class="text-white">
<path d="M10 20 L50 40 L90 10 L80 50 L95 85 L50 60 L15 90 L25 50 Z" fill="currentColor"/>
</svg>
<span class="text-base font-semibold tracking-tight">Nexus</span>
</div>
<p class="text-sm text-gray-400 leading-relaxed max-w-[280px]">
Your unified ecosystem to synchronize thoughts, maintain momentum, and build effortlessly.
</p>
</div>
<!-- Footer Right: Links -->
<div class="lg:col-span-8 p-8 sm:p-12 lg:p-16 grid grid-cols-2 sm:grid-cols-3 gap-12 sm:gap-8">
<!-- Column 1 -->
<div class="flex flex-col gap-5">
<h3 class="text-sm font-semibold tracking-tight text-white mb-1">Product</h3>
<a href="#" class="text-sm text-gray-400 hover:text-white transition-colors duration-200">Capabilities</a>
<a href="#" class="text-sm text-gray-400 hover:text-white transition-colors duration-200">Mechanism</a>
<a href="#" class="text-sm text-gray-400 hover:text-white transition-colors duration-200">Plans</a>
</div>
<!-- Column 2 -->
<div class="flex flex-col gap-5">
<h3 class="text-sm font-semibold tracking-tight text-white mb-1">Company</h3>
<a href="#" class="text-sm text-gray-400 hover:text-white transition-colors duration-200">Our Story</a>
<a href="#" class="text-sm text-gray-400 hover:text-white transition-colors duration-200">Join Us</a>
<a href="#" class="text-sm text-gray-400 hover:text-white transition-colors duration-200">Get in Touch</a>
<a href="#" class="text-sm text-gray-400 hover:text-white transition-colors duration-200">Media</a>
</div>
<!-- Column 3 -->
<div class="flex flex-col gap-5">
<h3 class="text-sm font-semibold tracking-tight text-white mb-1">Resources</h3>
<a href="#" class="text-sm text-gray-400 hover:text-white transition-colors duration-200">Support</a>
<a href="#" class="text-sm text-gray-400 hover:text-white transition-colors duration-200">Changelog</a>
<a href="#" class="text-sm text-gray-400 hover:text-white transition-colors duration-200">Documentation</a>
</div>
</div>
</footer>
</div>
<!-- Scripts -->
<script>
// --- WebGL Background Animation ---
const canvas = document.getElementById('glcanvas');
const gl = canvas.getContext('webgl');
if (!gl) {
console.error('WebGL not supported');
} else {
// Resize handler
function resize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
gl.viewport(0, 0, canvas.width, canvas.height);
}
window.addEventListener('resize', resize);
resize();
// Vertex Shader
const vsSource = `
attribute vec4 aVertexPosition;
void main() {
gl_Position = aVertexPosition;
}
`;
// Fragment Shader (Halftone Flow)
const fsSource = `
precision highp float;
uniform vec2 u_resolution;
uniform float u_time;
mat2 rot(float a) {
float s = sin(a), c = cos(a);
return mat2(c, -s, s, c);
}
void main() {
vec2 uv = gl_FragCoord.xy / u_resolution.xy;
vec2 p = uv * 2.0 - 1.0;
p.x *= u_resolution.x / u_resolution.y;
vec2 flow_uv = p;
float time = u_time * 0.4;
for(float i = 1.0; i < 4.0; i++) {
flow_uv *= rot(time * 0.1);
flow_uv.x += sin(flow_uv.y * 2.0 * i + time) * 0.5;
flow_uv.y += cos(flow_uv.x * 1.5 * i - time * 0.8) * 0.5;
}
float intensity = sin(flow_uv.x * 2.0 + flow_uv.y * 3.0) * 0.5 + 0.5;
vec3 col_dark = vec3(0.02, 0.0, 0.0);
vec3 col_red = vec3(0.8, 0.1, 0.05);
vec3 col_bright = vec3(1.0, 0.6, 0.2);
vec3 fluid_color = mix(col_dark, col_red, smoothstep(0.2, 0.6, intensity));
fluid_color = mix(fluid_color, col_bright, smoothstep(0.7, 1.0, intensity));
float gridSize = 6.0;
vec2 grid_uv = gl_FragCoord.xy / gridSize;
vec2 cell_uv = fract(grid_uv) - 0.5;
float dist = length(cell_uv);
float radius = intensity * 0.45;
float dot_mask = smoothstep(radius, radius - 0.1, dist);
vec3 final_color = mix(vec3(0.0), fluid_color, dot_mask);
final_color += fluid_color * 0.15;
gl_FragColor = vec4(final_color, 1.0);
}
`;
function compileShader(gl, type, source) {
const shader = gl.createShader(type);
gl.shaderSource(shader, source);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
console.error(gl.getShaderInfoLog(shader));
gl.deleteShader(shader);
return null;
}
return shader;
}
const vertexShader = compileShader(gl, gl.VERTEX_SHADER, vsSource);
const fragmentShader = compileShader(gl, gl.FRAGMENT_SHADER, fsSource);
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);
const positions = new Float32Array([
-1.0, 1.0,
1.0, 1.0,
-1.0, -1.0,
1.0, -1.0,
]);
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);
const positionLocation = gl.getAttribLocation(program, "aVertexPosition");
gl.enableVertexAttribArray(positionLocation);
gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
const resolutionLocation = gl.getUniformLocation(program, "u_resolution");
const timeLocation = gl.getUniformLocation(program, "u_time");
let startTime = Date.now();
function render() {
gl.uniform2f(resolutionLocation, canvas.width, canvas.height);
gl.uniform1f(timeLocation, (Date.now() - startTime) / 1000.0);
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
requestAnimationFrame(render);
}
render();
}
// --- GSAP ScrollTrigger Masked Word Reveal ---
document.addEventListener("DOMContentLoaded", (event) => {
gsap.registerPlugin(ScrollTrigger);
gsap.to(".reveal-word", {
y: "0%",
duration: 1.2,
stagger: 0.15,
ease: "power4.out",
scrollTrigger: {
trigger: ".reveal-text",
start: "top 90%",
}
});
});
</script>
</body>
</html>