类型:3D · 分类:Backgrounds · 收录:2026-09-16 20:35:01 · 源码:会员可见
# Constellation Field
A family of particle networks, gateways, interface lines, defense traces, and topographic fields gathered into one configurable collection.
> 来源:ThreeUI Community · https://threeui.com · MIT License(Meng To / Design+Code)
> 组件页:https://threeui.com/component/constellation-field · 预览动画:https://threeui.com/previews/constellation-field.webm
> 分类:Backgrounds
> 包含变体(7):particle-drift、particle-network、gateway-flow、connectivity-graph、interface-lines、defense-lines、topo-field
/* ===== src/shaders/constellation-field/ConstellationField.tsx (tsx) ===== */
import type { ComponentType } from "react";
import {
ConstellationField as ConstellationFieldRenderer,
ConnectivityGraph,
DefenseLines,
GatewayFlow,
InterfaceLines,
ParticleDrift,
ParticleNetwork,
TopoField,
type NeuformBatchEffectProps,
} from "../neuform-isolated/NeuformBatchEffects";
export type ConstellationFieldVariant =
| "constellation-field"
| "particle-drift"
| "particle-network"
| "gateway-flow"
| "connectivity-graph"
| "interface-lines"
| "defense-lines"
| "topo-field";
export type ConstellationFieldProps = NeuformBatchEffectProps & {
variant?: ConstellationFieldVariant;
};
const VARIANT_COMPONENTS: Record<ConstellationFieldVariant, ComponentType<NeuformBatchEffectProps>> = {
"constellation-field": ConstellationFieldRenderer,
"particle-drift": ParticleDrift,
"particle-network": ParticleNetwork,
"gateway-flow": GatewayFlow,
"connectivity-graph": ConnectivityGraph,
"interface-lines": InterfaceLines,
"defense-lines": DefenseLines,
"topo-field": TopoField,
};
export function ConstellationField({ variant = "constellation-field", ...props }: ConstellationFieldProps) {
const Variant = VARIANT_COMPONENTS[variant];
return <Variant {...props} />;
}
/* ===== src/shaders/neuform-isolated/sources/constellation-field.html (html) ===== */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Lumira - Advanced Analytics</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>
</head>
<body class="relative min-h-screen overflow-x-hidden flex flex-col font-sans text-[#F2F4FB] bg-[#070914] selection:bg-[#7FC4FF]/30 selection:text-[#7FC4FF]">
<!-- WebGL Constellation Canvas Shell & Depth Overlay -->
<div class="fixed inset-0 -z-20 pointer-events-none bg-[radial-gradient(ellipse_at_center,_#0E1222_0%,_#070914_100%)]"></div>
<div class="fixed inset-0 -z-10 pointer-events-none">
<canvas id="constellationCanvas" class="w-full h-full"></canvas>
</div>
<div class="fixed inset-0 -z-10 pointer-events-none bg-gradient-to-b from-transparent via-[#0E1222]/40 to-[#070914] opacity-80"></div>
<!-- Header (Elevated Glassy UI) -->
<nav class="w-full relative z-20 bg-[#0E1222]/40 backdrop-blur-md border-b border-[#1C2236] shadow-[0_2px_8px_rgba(0,0,0,0.30)]">
<div class="flex justify-between items-center py-5 px-6 md:px-12 max-w-[90rem] mx-auto">
<!-- Brand -->
<div class="flex items-center gap-2 text-[#F2F4FB]">
<div class="relative h-8 w-8 bg-transparent border border-[#1C2236] flex items-center justify-center rounded-md" style="box-shadow: 0 2px 8px rgba(0,0,0,0.30);">
<span class="h-2 w-2 rounded-full bg-[#E6C879]" style="box-shadow: 0 0 12px rgba(230,200,121,0.6);"></span>
</div>
<span class="text-xl font-thin tracking-tight uppercase ml-1">Lumira</span>
</div>
<div class="hidden md:flex items-center gap-10 text-xs font-normal uppercase text-[#9AA3BC] tracking-widest">
<a href="#" class="hover:text-[#F2F4FB] transition-colors hover:shadow-[0_0_8px_rgba(127,196,255,0.4)]">Features</a>
<a href="#" class="hover:text-[#F2F4FB] transition-colors hover:shadow-[0_0_8px_rgba(127,196,255,0.4)]">Use Cases</a>
<a href="#" class="hover:text-[#F2F4FB] transition-colors hover:shadow-[0_0_8px_rgba(127,196,255,0.4)]">Developers</a>
<a href="#" class="hover:text-[#F2F4FB] transition-colors hover:shadow-[0_0_8px_rgba(127,196,255,0.4)]">Pricing</a>
</div>
<!-- Gradient Border Shell CTA -->
<div class="p-[1px] rounded-full bg-gradient-to-br from-[#E6C879]/30 to-transparent">
<a href="#" class="block bg-[#0E1222]/80 backdrop-blur-sm text-[#E6C879] px-6 py-2.5 rounded-full text-xs font-normal uppercase tracking-widest hover:bg-[#E6C879] hover:text-[#0E1222] transition-colors">
Get Access
</a>
</div>
</div>
</nav>
<!-- Main Content -->
<main class="flex-grow flex flex-col items-center justify-center relative z-10 px-6 pt-24 pb-28 md:pt-32 lg:pt-40">
<div class="max-w-5xl mx-auto w-full flex flex-col items-center text-center">
<!-- Trust Indicators -->
<div class="flex items-center gap-4 mb-12 fade-in-up" style="opacity: 0; transform: translateY(24px); transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);">
<div class="flex -space-x-3">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/2f563338-39fa-47ea-9761-658d4f3f84db_1600w.jpg" alt="User 1" class="w-12 h-12 rounded-full border border-[#1C2236] object-cover relative z-30 opacity-80 mix-blend-luminosity">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/4f5668c5-fc4a-44e0-bc5e-a664189d3c31_1600w.jpg" alt="User 2" class="w-12 h-12 rounded-full border border-[#1C2236] object-cover relative z-20 opacity-80 mix-blend-luminosity">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/eca707cc-a5b7-439a-b4fd-247f6106c2e1_1600w.jpg" alt="User 3" class="w-12 h-12 rounded-full border border-[#1C2236] object-cover relative z-10 opacity-80 mix-blend-luminosity">
</div>
<div class="flex flex-col items-start gap-1">
<div class="flex items-center text-[#E6C879] text-lg">
<iconify-icon icon="solar:star-linear" stroke-width="1.5"></iconify-icon>
<iconify-icon icon="solar:star-linear" stroke-width="1.5"></iconify-icon>
<iconify-icon icon="solar:star-linear" stroke-width="1.5"></iconify-icon>
<iconify-icon icon="solar:star-linear" stroke-width="1.5"></iconify-icon>
<iconify-icon icon="solar:star-linear" stroke-width="1.5"></iconify-icon>
</div>
<span class="text-xs font-normal uppercase text-[#9AA3BC] tracking-widest">Trusted by 10,000+ data teams</span>
</div>
</div>
<!-- Headline (Ultralight System Display - GSAP Masked Reveal) -->
<h1 class="masked-reveal text-5xl md:text-7xl lg:text-8xl font-thin tracking-tight text-[#F2F4FB] text-center leading-tight max-w-5xl cursor-default">
Uncover hidden patterns<br />with intelligent analytics
</h1>
<!-- Subheadline (GSAP Masked Reveal) -->
<p class="masked-reveal mt-8 text-lg md:text-xl text-[#9AA3BC] max-w-2xl font-normal leading-relaxed">
Lumira synthesizes complex datasets, disparate sources, and endless metrics into actionable, automated insights that guide your decisions.
</p>
<!-- Chunky CTAs to Refined Border Shells -->
<div class="flex flex-col sm:flex-row items-center gap-6 mt-14 w-full justify-center fade-in-up" style="opacity: 0; transform: translateY(24px); transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.5s;">
<div class="p-[1px] rounded-full bg-gradient-to-br from-[#E6C879]/40 to-transparent w-full sm:w-auto" style="box-shadow: 0 16px 40px rgba(0,0,0,0.36);">
<a href="#" class="w-full sm:w-auto bg-[#E6C879] text-[#0E1222] px-12 py-4 rounded-full font-medium text-xs uppercase tracking-widest hover:bg-[#E6C879]/90 transition-colors flex items-center justify-center">
Get Access
</a>
</div>
<div class="p-[1px] rounded-full bg-gradient-to-br from-[#E6C879]/16 to-transparent w-full sm:w-auto" style="box-shadow: 0 2px 8px rgba(0,0,0,0.30);">
<a href="#" class="w-full sm:w-auto bg-[#0E1222]/60 backdrop-blur-md text-[#F2F4FB] px-10 py-4 rounded-full font-medium text-xs uppercase tracking-widest hover:bg-[#1C2236]/80 transition-colors flex items-center justify-center gap-2 group">
Explore Demo
<iconify-icon icon="solar:arrow-right-linear" class="text-xl text-[#7FC4FF] opacity-70 group-hover:opacity-100 group-hover:translate-x-1 transition-all" stroke-width="1.5"></iconify-icon>
</a>
</div>
</div>
</div>
<!-- Logos Section -->
<div class="w-full mt-28 md:mt-32 max-w-6xl mx-auto flex flex-col items-center fade-in-up" style="opacity: 0; transform: translateY(24px); transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.6s;">
<p class="text-xs font-normal text-[#5C668A] mb-12 tracking-widest uppercase">Powering data-driven enterprises</p>
<div class="flex flex-wrap justify-center items-center gap-10 md:gap-16">
<div class="flex items-center gap-2 text-xl font-thin text-[#9AA3BC] hover:text-[#7FC4FF] hover:shadow-[0_0_12px_rgba(127,196,255,0.2)] transition-all cursor-default">
<iconify-icon icon="solar:box-linear" stroke-width="1.5"></iconify-icon>
Quantus
</div>
<div class="flex items-center gap-2 text-lg font-thin text-[#9AA3BC] hover:text-[#7FC4FF] hover:shadow-[0_0_12px_rgba(127,196,255,0.2)] transition-all cursor-default">
<iconify-icon icon="solar:globus-linear" class="text-xl" stroke-width="1.5"></iconify-icon>
NexusData
</div>
<div class="flex items-center gap-2 text-xl font-thin text-[#9AA3BC] hover:text-[#7FC4FF] hover:shadow-[0_0_12px_rgba(127,196,255,0.2)] transition-all cursor-default">
OmniStream
</div>
<div class="flex items-center gap-2 text-lg font-thin text-[#9AA3BC] hover:text-[#7FC4FF] hover:shadow-[0_0_12px_rgba(127,196,255,0.2)] transition-all cursor-default">
<iconify-icon icon="solar:routing-2-linear" class="text-xl" stroke-width="1.5"></iconify-icon>
Veridian
</div>
<div class="flex items-center gap-2 text-lg font-thin text-[#9AA3BC] hover:text-[#7FC4FF] hover:shadow-[0_0_12px_rgba(127,196,255,0.2)] transition-all cursor-default">
<iconify-icon icon="solar:letter-linear" class="text-xl" stroke-width="1.5"></iconify-icon>
ApexMetrics
</div>
<div class="hidden lg:flex items-center gap-2 text-xl font-thin text-[#9AA3BC] hover:text-[#7FC4FF] hover:shadow-[0_0_12px_rgba(127,196,255,0.2)] transition-all cursor-default">
Zenith
</div>
</div>
</div>
</main>
<script>
// WebGL Drifting Nodes & Network Logic
const canvas = document.getElementById('constellationCanvas');
const ctx = canvas.getContext('2d');
let width, height;
let nodes = [];
const LINK = 160;
const MAX_NODES = window.innerWidth < 768 ? 40 : 85;
let pointer = { x: -1000, y: -1000 };
function resize() {
const dpr = Math.min(window.devicePixelRatio || 1, 2);
width = window.innerWidth;
height = window.innerHeight;
canvas.width = Math.max(1, Math.floor(width * dpr));
canvas.height = Math.max(1, Math.floor(height * dpr));
canvas.style.width = width + 'px';
canvas.style.height = height + 'px';
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
ctx.imageSmoothingEnabled = false;
}
window.addEventListener('resize', () => {
resize();
initNodes();
});
resize();
function initNodes() {
nodes = [];
for(let i=0; i<MAX_NODES; i++) {
nodes.push({
x: Math.random() * width,
y: Math.random() * height,
vx: (Math.random() - 0.5) * 0.3,
vy: (Math.random() - 0.5) * 0.3,
radius: Math.random() * 2.4 + 1.8
});
}
}
initNodes();
// Pointer gravity tracker
document.addEventListener('mousemove', e => {
pointer.x = e.clientX;
pointer.y = e.clientY;
});
// Clear pointer on leave
document.addEventListener('mouseleave', () => {
pointer.x = -1000;
pointer.y = -1000;
});
function dist(a, b) {
return Math.hypot(a.x - b.x, a.y - b.y);
}
// Render Loop
function animateCanvas() {
ctx.clearRect(0, 0, width, height);
ctx.lineCap = 'butt';
ctx.lineJoin = 'miter';
// Draw Links first so nodes sit crisp on top
ctx.strokeStyle = '#E6C879';
ctx.lineWidth = 1;
for (let i = 0; i < nodes.length; i++) {
for (let j = i + 1; j < nodes.length; j++) {
const d = dist(nodes[i], nodes[j]);
if (d < LINK) {
ctx.globalAlpha = 0.22 + (1 - d/LINK) * 0.55;
ctx.beginPath();
ctx.moveTo(nodes[i].x, nodes[i].y);
ctx.lineTo(nodes[j].x, nodes[j].y);
ctx.stroke();
}
}
}
nodes.forEach(node => {
node.x += node.vx;
node.y += node.vy;
// Bounce off edges
if(node.x < 0 || node.x > width) node.vx *= -1;
if(node.y < 0 || node.y > height) node.vy *= -1;
// Gentle Pointer gravity
const pd = dist(node, pointer);
if(pd < 220) {
node.x -= (node.x - pointer.x) * 0.005;
node.y -= (node.y - pointer.y) * 0.005;
}
// Draw Node (Pale Gold) — core + soft halo so particles read at retina scale
const pulse = 0.78 + Math.sin(Date.now() * 0.001 + node.x) * 0.22;
ctx.fillStyle = '#E6C879';
ctx.globalAlpha = pulse * 0.28;
ctx.beginPath();
ctx.arc(node.x, node.y, node.radius * 2.4, 0, Math.PI * 2);
ctx.fill();
ctx.globalAlpha = pulse;
ctx.beginPath();
ctx.arc(node.x, node.y, node.radius, 0, Math.PI * 2);
ctx.fill();
});
ctx.globalAlpha = 1;
requestAnimationFrame(animateCanvas);
}
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
if (!prefersReducedMotion) {
animateCanvas();
}
// --- Intersection Observer for structural fade-ins ---
document.addEventListener('DOMContentLoaded', () => {
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
observer.unobserve(entry.target);
}
});
}, { threshold: 0.1 });
document.querySelectorAll('.fade-in-up').forEach(el => observer.observe(el));
});
// --- GSAP Masked Staggered Word Reveal ---
document.addEventListener('DOMContentLoaded', () => {
if (typeof gsap !== 'undefined' && !prefersReducedMotion) {
gsap.registerPlugin(ScrollTrigger);
const revealElements = document.querySelectorAll('.masked-reveal');
revealElements.forEach(el => {
// Non-destructive split that respects <br> tags
const html = el.innerHTML;
const fragments = html.split(/(<brs*/?>|s+)/);
el.innerHTML = '';
fragments.forEach(frag => {
if (/<br/i.test(frag)) {
el.appendChild(document.createElement('br'));
} else if (frag.trim() !== '') {
const wrapper = document.createElement('span');
wrapper.style.cssText = 'overflow: hidden; display: inline-block; vertical-align: bottom; padding-top: 0.1em; margin-top: -0.1em;';
const inner = document.createElement('span');
inner.className = 'reveal-word';
inner.style.cssText = 'display: inline-block; transform: translateY(110%); will-change: transform;';
inner.innerHTML = frag;
wrapper.appendChild(inner);
el.appendChild(wrapper);
} else {
// Preserve spaces
el.appendChild(document.createTextNode(frag));
}
});
// Trigger the animation
gsap.to(el.querySelectorAll('.reveal-word'), {
y: '0%',
duration: 1.2,
ease: 'power4.out',
stagger: 0.04,
scrollTrigger: {
trigger: el,
start: 'top 90%',
}
});
});
}
});
</script>
</body>
</html>
/* ===== src/shaders/neuform-isolated/sources/particle-drift.html (html) ===== */
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Zenith Compute Network</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 href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&family=Playfair+Display:wght@400&display=swap" rel="stylesheet">
</head>
<body class="bg-[#030509] min-h-screen flex items-center justify-center p-4 md:p-12 font-sans antialiased text-[#FFFFFF] overflow-x-hidden selection:bg-[#60A5FA] selection:text-[#030509]">
<!-- Gradient Border Shell Technique -->
<div class="w-full max-w-[1440px] shadow-[0px_100px_80px_rgba(0,0,0,0.12),_0px_41.8px_33.4px_rgba(0,0,0,0.086),_0px_22.3px_17.9px_rgba(0,0,0,0.07)]" style="display:inline-block; padding:1px; border-radius:24px; background:linear-gradient(to right bottom, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0));">
<!-- Main Inner Surface -->
<div class="relative w-full flex flex-col md:flex-row overflow-hidden min-h-[600px] md:min-h-[650px]" style="background:#030509; border-radius:23px; box-shadow:rgba(255, 255, 255, 0.02) 0px 0px 40px 0px inset;">
<!-- Canvas Particle System Background Field -->
<canvas id="particle-canvas" class="absolute inset-0 w-full h-full pointer-events-none z-0 opacity-100"></canvas>
<!-- Matte Noise Texture Overlay -->
<div class="absolute inset-0 opacity-[0.15] mix-blend-overlay pointer-events-none z-10" 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.85%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');"></div>
<!-- Left Column: Copy & Controls -->
<div class="w-full md:w-[38%] px-8 lg:px-16 py-10 md:py-14 flex flex-col justify-between relative z-20 shrink-0 border-r border-white/5">
<!-- Lineart Detail: Corner Brackets -->
<div class="absolute top-6 left-6 w-3 h-3 border-t border-l border-white/20"></div>
<div class="absolute top-6 right-6 w-3 h-3 border-t border-r border-white/20"></div>
<div class="absolute bottom-6 left-6 w-3 h-3 border-b border-l border-white/20"></div>
<div class="absolute bottom-6 right-6 w-3 h-3 border-b border-r border-white/20"></div>
<!-- Top Badge -->
<div class="fade-in-el opacity-0 inline-flex items-center gap-2 px-3 py-1 text-xs font-light tracking-widest uppercase mb-16 border border-white/10 text-[#60A5FA] rounded-full w-max bg-white/5 backdrop-blur-sm">
<iconify-icon icon="solar:server-square-linear" stroke-width="1.5" class="text-sm"></iconify-icon>
ZENITH COMPUTE
</div>
<!-- Heading (Playfair Display) -->
<div>
<h1 id="hero-heading" class="text-5xl md:text-7xl tracking-tight text-[#FFFFFF] mb-6 leading-none opacity-0 font-light" style="font-family: 'Playfair Display', serif;">
Infinite execution threads.<br>The cognitive backbone.
</h1>
<!-- Body Text -->
<p class="fade-in-el opacity-0 text-[#9CA3AF] text-lg leading-relaxed max-w-[320px] font-light mb-8" style="font-family: 'Inter', sans-serif;">
An autonomous state-management protocol synchronizing distributed workloads across edge micro-clusters and centralized servers. Adjust the target environment to refine processing speed.
</p>
<!-- Primary Action Button -->
<button class="fade-in-el opacity-0 bg-[#60A5FA] text-[#030509] px-8 py-3.5 rounded-full text-sm font-light w-max hover:bg-blue-300 transition-colors flex items-center gap-2" style="font-family: 'Inter', sans-serif;">
Provision Network
<iconify-icon icon="solar:cpu-linear" stroke-width="1.5" class="text-lg"></iconify-icon>
</button>
</div>
<!-- Custom Slider Control -->
<div class="fade-in-el opacity-0 mt-16 pt-8 w-full relative">
<!-- Track Line -->
<div class="w-full h-[1px] bg-white/10 relative">
<!-- Thumb / Active Indicator -->
<div class="absolute top-1/2 left-[50%] -translate-x-1/2 -translate-y-1/2 w-2 h-2 bg-[#60A5FA] rounded-full shadow-[0_0_12px_rgba(96,165,250,0.6)]"></div>
</div>
<!-- Labels -->
<div class="flex justify-between mt-4 w-full" style="font-family: 'Inter', sans-serif;">
<span class="text-xs font-light tracking-widest uppercase text-white/30 transition-colors hover:text-[#60A5FA] cursor-pointer">Local</span>
<span class="text-xs font-light tracking-widest uppercase text-white/30 transition-colors hover:text-[#60A5FA] cursor-pointer">Edge</span>
<span class="text-xs font-light tracking-widest uppercase text-[#60A5FA] cursor-default">Ring</span>
<span class="text-xs font-light tracking-widest uppercase text-white/30 transition-colors hover:text-[#60A5FA] cursor-pointer">Core</span>
<span class="text-xs font-light tracking-widest uppercase text-white/30 transition-colors hover:text-[#60A5FA] cursor-pointer">Cloud</span>
</div>
</div>
</div>
<!-- Right Column: Media Frame -->
<div class="w-full md:w-[62%] relative bg-transparent overflow-hidden min-h-[400px] md:min-h-0 border-t md:border-t-0 border-white/5 pointer-events-none" style="transform-style: preserve-3d;">
<!-- Deep Integration Gradients -->
<div class="absolute inset-0 z-30 pointer-events-none bg-gradient-to-r from-[#030509] via-transparent to-transparent opacity-90"></div>
<div class="absolute inset-0 z-30 pointer-events-none bg-gradient-to-t from-[#030509] via-[#030509]/30 to-transparent opacity-80"></div>
<!-- Glassmorphism Floating Logic Card -->
<div id="floating-card" class="absolute top-[25%] right-[12%] z-40 bg-white/[0.03] backdrop-blur-xl border border-[#60A5FA]/20 p-5 rounded-2xl shadow-[0_22px_40px_rgba(0,0,0,0.4)] w-[220px] text-[#60A5FA] pointer-events-auto">
<div class="flex items-center gap-3 mb-4">
<div class="w-8 h-8 rounded-full bg-[#60A5FA]/10 border border-[#60A5FA]/20 text-[#60A5FA] flex items-center justify-center">
<iconify-icon icon="solar:transfer-horizontal-linear" stroke-width="1.5"></iconify-icon>
</div>
<span class="text-xs uppercase tracking-widest font-light" style="font-family: 'Inter', sans-serif;">Throughput</span>
</div>
<div class="text-3xl leading-9 tracking-tighter mb-1" style="font-family: 'Inter', sans-serif;">128.6 PB/s</div>
<div class="text-xs uppercase tracking-widest text-[#60A5FA]/60" style="font-family: 'Inter', sans-serif;">Sync Efficiency</div>
</div>
</div>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", () => {
gsap.registerPlugin(ScrollTrigger);
// --- ASCII Particle System Implementation ---
const canvas = document.getElementById('particle-canvas');
const ctx = canvas.getContext('2d');
let width, height;
let nodes = [];
let beams = [];
const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ@#$%&*()'.split('');
let mouse = { x: -1000, y: -1000 };
function resize() {
width = canvas.clientWidth;
height = canvas.clientHeight;
const dpr = window.devicePixelRatio || 1;
canvas.width = width * dpr;
canvas.height = height * dpr;
ctx.scale(dpr, dpr);
}
window.addEventListener('resize', () => {
resize();
initParticles();
});
window.addEventListener('mousemove', e => {
const rect = canvas.getBoundingClientRect();
mouse.x = e.clientX - rect.left;
mouse.y = e.clientY - rect.top;
});
function initParticles() {
nodes = Array.from({ length: 90 }).map(() => ({
x: Math.random() * width,
y: Math.random() * height,
vy: (Math.random() * 0.4) + 0.1,
char: chars[Math.floor(Math.random() * chars.length)]
}));
beams = Array.from({ length: 25 }).map(() => ({
x: Math.random() * width,
y: Math.random() * height,
length: Math.random() * 100 + 50,
speed: (Math.random() * 6) + 3,
opacity: Math.random() * 0.5 + 0.3
}));
}
resize();
initParticles();
function draw() {
ctx.clearRect(0, 0, width, height);
// 1. Upward Beams (Fast)
beams.forEach(b => {
b.y -= b.speed;
if (b.y + b.length < 0) {
b.y = height + 100;
b.x = Math.random() * width;
}
let g = ctx.createLinearGradient(b.x, b.y, b.x, b.y + b.length);
g.addColorStop(0, `rgba(96, 165, 250, ${b.opacity})`);
g.addColorStop(1, 'transparent');
ctx.strokeStyle = g;
ctx.lineWidth = 1.5;
ctx.beginPath();
ctx.moveTo(b.x, b.y);
ctx.lineTo(b.x, b.y + b.length);
ctx.stroke();
});
// 2. Interactive Nodes (ASCII)
ctx.font = '12px monospace';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
// Proximity Lines
ctx.lineWidth = 0.5;
for(let i = 0; i < nodes.length; i++) {
let n1 = nodes[i];
for(let j = i + 1; j < nodes.length; j++) {
let n2 = nodes[j];
let d = Math.hypot(n1.x - n2.x, n1.y - n2.y);
if(d < 120) {
ctx.strokeStyle = `rgba(156, 163, 175, ${0.15 * (1 - d/120)})`;
ctx.beginPath();
ctx.moveTo(n1.x, n1.y);
ctx.lineTo(n2.x, n2.y);
ctx.stroke();
}
}
}
nodes.forEach(n => {
n.y += n.vy; // Slow drift
if(n.y > height + 20) {
n.y = -20;
n.x = Math.random() * width;
}
let dist = Math.hypot(mouse.x - n.x, mouse.y - n.y);
// Dynamic Character Swap
if (dist < 180 || Math.random() > 0.98) n.char = chars[Math.floor(Math.random() * chars.length)];
// Mouse Connection
if (dist < 180) {
ctx.strokeStyle = `rgba(96, 165, 250, ${0.5 * (1 - dist/180)})`;
ctx.beginPath();
ctx.moveTo(n.x, n.y);
ctx.lineTo(mouse.x, mouse.y);
ctx.stroke();
}
ctx.fillStyle = dist < 180 ? '#60A5FA' : 'rgba(156, 163, 175, 0.4)';
ctx.fillText(n.char, n.x, n.y);
});
requestAnimationFrame(draw);
}
draw();
// --- GSAP Timeline Reveals ---
const heading = document.getElementById('hero-heading');
// Staggered vertical masked word setup
const words = heading.innerHTML.trim().split(/(<brs*/?>|s+)/).filter(w => w.trim().length > 0 || w.toLowerCase().includes('<br'));
let newHTML = '';
words.forEach(word => {
if(word.toLowerCase().includes('<br')) {
newHTML += '<br/>';
} else if (word.trim() !== '') {
newHTML += `<span class="inline-block overflow-hidden align-bottom pb-1 -mb-1"><span class="reveal-word inline-block translate-y-full opacity-0">${word}</span></span> `;
}
});
heading.innerHTML = newHTML;
heading.style.opacity = 1;
const tl = gsap.timeline({
scrollTrigger: {
trigger: heading,
start: "top 85%"
},
delay: 0.1
});
tl.to('.reveal-word', {
y: 0,
opacity: 1,
duration: 1.2,
stagger: 0.04,
ease: "power4.out"
}, 0);
tl.to('.fade-in-el', {
opacity: 1,
y: 0,
duration: 1,
stagger: 0.15,
ease: "power3.out"
}, 0.6);
// Canvas Timeline Integration
tl.to(canvas, { opacity: 1, duration: 2, ease: "power2.inOut" }, 0.2);
// Floating Logic independent 3D shifts
gsap.to('#floating-card', {
y: "-=12",
rotationX: 4,
rotationY: -4,
duration: 4,
yoyo: true,
repeat: -1,
ease: "sine.inOut"
});
});
</script>
</body>
</html>
/* ===== src/shaders/neuform-isolated/sources/particle-network.html (html) ===== */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Omnichannel Data 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>
<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 href="https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400&display=swap" rel="stylesheet">
</head>
<body class="font-sans antialiased text-white m-0 p-0 h-screen w-full flex flex-col overflow-hidden selection:bg-blue-500/30 bg-black relative" style="font-family: 'Inter', sans-serif;">
<!-- Background Image Stage -->
<div class="absolute inset-0 z-0 bg-[url('https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/fa51902b-c2a4-4c33-a96e-a8f1ef67edc6_3840w.jpg')] bg-cover bg-center bg-no-repeat opacity-40 mix-blend-screen"></div>
<!-- Directional Tonal Washes for Readability -->
<div class="absolute inset-0 z-0 bg-gradient-to-t from-black via-black/80 to-transparent"></div>
<div class="absolute inset-0 z-0 bg-gradient-to-r from-black/90 via-black/40 to-transparent"></div>
<!-- Visible Structural Grid Scaffold -->
<div class="absolute inset-0 z-10 pointer-events-none flex justify-center w-full">
<div class="w-full max-w-7xl h-full grid grid-cols-1 md:grid-cols-4 border-x border-white/5 divide-y-0 md:divide-x divide-white/5 relative">
<!-- Structural Line Markers -->
<div class="hidden md:block absolute top-[20%] -left-1 w-2 h-[1px] bg-white/30"></div>
<div class="hidden md:block absolute top-[20%] -right-1 w-2 h-[1px] bg-white/30"></div>
<div class="hidden md:block absolute bottom-[35%] -left-1 w-2 h-[1px] bg-white/30"></div>
<div class="hidden md:block absolute bottom-[35%] -right-1 w-2 h-[1px] bg-white/30"></div>
<!-- Grid columns -->
<div class="relative"><div class="absolute top-0 right-0 w-[1px] h-4 bg-white/20"></div></div>
<div class="hidden md:block relative"><div class="absolute top-0 right-0 w-[1px] h-4 bg-white/20"></div></div>
<div class="hidden md:block relative"><div class="absolute top-0 right-0 w-[1px] h-4 bg-white/20"></div></div>
<div class="hidden md:block"></div>
</div>
</div>
<!-- Controls Box (Top Right Anchored) -->
<div class="absolute top-6 right-6 md:top-8 md:right-8 z-40 flex gap-3">
<!-- Gradient Border Treatment Applied via wrapper -->
<div class="w-10 h-10 rounded p-[1px] bg-gradient-to-br from-white/30 via-white/5 to-transparent">
<button id="pauseBtn" class="w-full h-full rounded bg-black/40 backdrop-blur-md flex items-center justify-center text-[#6a9ded] hover:bg-white/10 transition-all cursor-pointer outline-none focus:ring-1 focus:ring-[#6a9ded]/50 group" aria-label="Pause Animation">
<iconify-icon icon="solar:pause-linear" width="18" height="18" stroke-width="1.5" class="group-hover:scale-110 transition-transform"></iconify-icon>
</button>
</div>
<div class="w-10 h-10 rounded p-[1px] bg-gradient-to-br from-white/30 via-white/5 to-transparent">
<button class="w-full h-full rounded bg-black/40 backdrop-blur-md flex items-center justify-center text-[#6a9ded] hover:bg-white/10 transition-all cursor-pointer outline-none focus:ring-1 focus:ring-[#6a9ded]/50 group" aria-label="Settings">
<iconify-icon icon="solar:settings-linear" width="18" height="18" stroke-width="1.5" class="group-hover:rotate-90 transition-transform duration-500"></iconify-icon>
</button>
</div>
</div>
<!-- Additive Canvas Overlay -->
<canvas id="particle-canvas" class="absolute inset-0 w-full h-full z-20 pointer-events-none"></canvas>
<!-- Anchored Content Overlay low in viewport -->
<main class="relative z-30 flex-grow w-full flex flex-col justify-end pb-12 md:pb-24">
<div class="w-full max-w-7xl mx-auto px-6 md:px-8">
<div class="grid grid-cols-1 md:grid-cols-4 gap-12 md:gap-8 items-end">
<!-- Primary Headline Block -->
<header class="md:col-span-2 flex flex-col gap-6">
<h1 class="text-4xl md:text-5xl font-extralight tracking-tight leading-tight text-white drop-shadow-lg">
<span class="inline-block overflow-hidden align-bottom"><span class="inline-block gsap-word translate-y-full">Omnichannel</span></span> <br>
<span class="text-white/60">
<span class="inline-block overflow-hidden align-bottom"><span class="inline-block gsap-word translate-y-full">Data</span></span>
<span class="inline-block overflow-hidden align-bottom"><span class="inline-block gsap-word translate-y-full">Intelligence</span></span>
</span>
</h1>
<p id="split-text-target" class="text-sm md:text-base font-extralight text-white/50 max-w-sm leading-relaxed tracking-wide">
Empowering next-generation analytics platforms with real-time distributed insights and secure, scalable hybrid-cloud processing architectures.
</p>
</header>
<!-- Secondary Framed Grid Lane (Stats) with Premium Gradient Border -->
<div class="md:col-span-2 relative p-[1px] bg-gradient-to-br from-white/30 via-white/5 to-transparent backdrop-blur-sm">
<!-- Corner structural crosses -->
<div class="absolute -top-[3px] -left-[3px] w-1.5 h-1.5 border-t border-l border-white/40 z-10"></div>
<div class="absolute -top-[3px] -right-[3px] w-1.5 h-1.5 border-t border-r border-white/40 z-10"></div>
<div class="absolute -bottom-[3px] -left-[3px] w-1.5 h-1.5 border-b border-l border-white/40 z-10"></div>
<div class="absolute -bottom-[3px] -right-[3px] w-1.5 h-1.5 border-b border-r border-white/40 z-10"></div>
<!-- Grid Layout for Stats inside Gradient Wrapper -->
<div class="grid grid-cols-2 gap-px bg-white/5 w-full h-full relative z-0">
<!-- Stat 1 -->
<div class="bg-black/60 p-6 flex flex-col gap-2 hover:bg-black/40 transition-colors">
<span class="text-3xl font-extralight tracking-tight text-[#6a9ded] overflow-hidden"><span class="inline-block gsap-word translate-y-full">120+</span></span>
<span class="text-xs font-light uppercase tracking-widest text-white/40 leading-tight">Edge<br>Nodes</span>
</div>
<!-- Stat 2 -->
<div class="bg-black/60 p-6 flex flex-col gap-2 hover:bg-black/40 transition-colors">
<span class="text-3xl font-extralight tracking-tight text-[#6a9ded] overflow-hidden"><span class="inline-block gsap-word translate-y-full">5.2P</span></span>
<span class="text-xs font-light uppercase tracking-widest text-white/40 leading-tight">Data<br>Indexed</span>
</div>
<!-- Stat 3 -->
<div class="bg-black/60 p-6 flex flex-col gap-2 hover:bg-black/40 transition-colors">
<span class="text-3xl font-extralight tracking-tight text-[#6a9ded] overflow-hidden"><span class="inline-block gsap-word translate-y-full"><10ms</span></span>
<span class="text-xs font-light uppercase tracking-widest text-white/40 leading-tight">Query<br>Latency</span>
</div>
<!-- Stat 4 -->
<div class="bg-black/60 p-6 flex flex-col gap-2 hover:bg-black/40 transition-colors">
<span class="text-3xl font-extralight tracking-tight text-[#6a9ded] overflow-hidden"><span class="inline-block gsap-word translate-y-full">3.4B+</span></span>
<span class="text-xs font-light uppercase tracking-widest text-white/40 leading-tight">Event<br>Triggers</span>
</div>
</div>
</div>
</div>
</div>
</main>
<script>
// Set up the masked text reveal dynamically for the paragraph text
const p = document.getElementById('split-text-target');
const text = p.innerText.trim();
const words = text.split(/s+/);
p.innerHTML = '';
words.forEach(word => {
p.innerHTML += `<span class="inline-block overflow-hidden align-bottom pb-1"><span class="inline-block gsap-word translate-y-full">${word}</span></span> `;
});
// Initialize GSAP ScrollTrigger for masked reveal
gsap.registerPlugin(ScrollTrigger);
gsap.to('.gsap-word', {
y: "0%",
duration: 0.9,
ease: "power4.out",
stagger: 0.04,
scrollTrigger: {
trigger: "main",
start: "top 95%"
}
});
// Canvas Particle Network (Original logic preserved)
const canvas = document.getElementById('particle-canvas');
const ctx = canvas.getContext('2d');
const pauseBtn = document.getElementById('pauseBtn');
let isPaused = false;
let width, height;
let particles = [];
const particleCount = 200;
const speedMultiplier = 1.1;
let originX, originY;
function resize() {
const dpr = Math.min(window.devicePixelRatio || 1, 2);
width = window.innerWidth;
height = window.innerHeight;
canvas.width = Math.max(1, Math.floor(width * dpr));
canvas.height = Math.max(1, Math.floor(height * dpr));
canvas.style.width = width + 'px';
canvas.style.height = height + 'px';
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
ctx.imageSmoothingEnabled = false;
originX = width / 2;
originY = height * 0.7; // Lowered slightly to fit grid stage better
}
class Particle {
constructor() {
this.reset();
this.z = Math.random() * 1000;
}
reset() {
const angle = Math.random() * Math.PI * 2;
const radius = Math.random() * 600;
this.x = Math.cos(angle) * radius;
this.y = (Math.sin(angle) * radius) - 150;
this.z = 1000;
this.speed = (Math.random() * 2 + 1) * speedMultiplier;
// Restrained blue and white hues for technical atmosphere
const hue = Math.random() > 0.5 ? '200, 220, 255' : '106, 157, 237';
this.color = `rgb(${hue})`;
this.length = Math.random() * 2 + 0.5;
}
update() {
this.z -= this.speed;
if (this.z <= 0) {
this.reset();
}
}
draw() {
const fov = 300;
const scale = fov / this.z;
const px = originX + this.x * scale;
const py = originY + this.y * scale;
const prevZ = this.z + this.speed * this.length;
const prevScale = fov / prevZ;
const prevPx = originX + this.x * prevScale;
const prevPy = originY + this.y * prevScale;
let opacity = 1 - (this.z / 1000);
if (this.z < 100) opacity = this.z / 100;
if (opacity < 0) opacity = 0;
ctx.beginPath();
ctx.moveTo(prevPx, prevPy);
ctx.lineTo(px, py);
ctx.strokeStyle = this.color.replace('rgb', 'rgba').replace(')', `, ${opacity * 0.9})`);
// Hairline strokes stay crisp under retina DPR scaling
ctx.lineWidth = Math.max(0.25, (1 - (this.z / 1000)) * 0.4);
ctx.lineCap = 'butt';
ctx.lineJoin = 'miter';
ctx.stroke();
}
}
function init() {
resize();
window.addEventListener('resize', resize);
for (let i = 0; i < particleCount; i++) {
particles.push(new Particle());
}
animate();
}
function animate() {
requestAnimationFrame(animate);
if (!isPaused) {
// Faster fade keeps streaks sharp instead of smeared
ctx.fillStyle = 'rgba(0, 0, 0, 0.45)';
ctx.fillRect(0, 0, width, height);
particles.forEach(p => {
p.update();
p.draw();
});
}
}
pauseBtn.addEventListener('click', () => {
isPaused = !isPaused;
const icon = pauseBtn.querySelector('iconify-icon');
if (isPaused) {
icon.setAttribute('icon', 'solar:play-linear');
} else {
icon.setAttribute('icon', 'solar:pause-linear');
}
});
init();
</script>
</body>
</html>
/* ===== src/shaders/neuform-isolated/sources/gateway-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 Gateway</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@100;200;300&display=swap" rel="stylesheet">
</head>
<body class="bg-black text-slate-300 antialiased min-h-screen flex flex-col selection:bg-slate-700 selection:text-white relative" style="font-family: 'Inter', sans-serif;">
<!-- Global Dither Overlay -->
<div class="fixed inset-0 z-50 pointer-events-none opacity-[0.15]" style="background-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%202%202%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23ffffff%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E'); background-size: 2px 2px;"></div>
<!-- Visualization Background -->
<div class="fixed inset-0 z-0 overflow-hidden bg-black">
<div class="absolute inset-0 z-0 opacity-10" style="background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.01) 0%, rgba(0, 0, 0, 0) 80%);"></div>
<canvas id="flow-canvas" class="absolute inset-0 w-full h-full z-10"></canvas>
</div>
<!-- Main Content -->
<main class="flex-grow flex flex-col items-center justify-center relative z-30 px-6 py-12 min-h-screen w-full">
<!-- Premium Login Card with Hover Border Gradient -->
<div class="max-w-md w-full bg-black/95 backdrop-blur-xl rounded-2xl p-7 md:p-8 shadow-2xl flex flex-col relative group">
<!-- Base Border -->
<div class="absolute inset-0 border border-white/[0.04] rounded-2xl pointer-events-none transition-colors duration-500 group-hover:border-transparent"></div>
<!-- Hover Gradient Border -->
<div class="absolute inset-0 p-[1px] bg-[linear-gradient(110deg,transparent,rgba(255,255,255,0.15),transparent)] [mask-image:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)] [mask-composite:exclude] [-webkit-mask-composite:xor] pointer-events-none rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-500 z-10"></div>
<!-- Header Text -->
<div class="text-center mb-8 w-full relative z-20">
<div class="inline-flex items-center justify-center w-12 h-12 rounded-xl bg-black/50 border border-slate-700/50 mb-6 shadow-inner">
<iconify-icon icon="solar:cpu-bolt-linear" width="24" height="24" stroke-width="1.5" class="text-slate-200"></iconify-icon>
</div>
<h1 id="reveal-title" class="text-3xl md:text-4xl font-thin tracking-tight text-white leading-tight mb-3 uppercase flex flex-wrap justify-center gap-x-2">
<span class="overflow-hidden inline-block pt-1"><span class="reveal-word inline-block translate-y-[120%]">Nexus</span></span>
<span class="overflow-hidden inline-block pt-1"><span class="reveal-word inline-block translate-y-[120%]">Gateway</span></span>
</h1>
<p class="text-sm text-slate-500 font-extralight leading-relaxed">
Verify identity to initialize secure connection with the primary framework. Oversee active protocols and routing.
</p>
</div>
<!-- Form -->
<form class="space-y-5 relative z-20">
<div>
<label for="identifier" class="text-xs font-light text-slate-400 mb-1.5 block uppercase tracking-widest">Operative ID</label>
<div class="relative rounded-lg bg-black/80 group/input">
<div class="absolute inset-0 border border-slate-800/80 rounded-lg pointer-events-none transition-colors duration-300 group-hover/input:border-transparent focus-within:border-transparent"></div>
<div class="absolute inset-0 p-[1px] bg-[linear-gradient(110deg,transparent,rgba(255,255,255,0.25),transparent)] [mask-image:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)] [mask-composite:exclude] [-webkit-mask-composite:xor] pointer-events-none rounded-lg opacity-0 group-hover/input:opacity-100 focus-within:opacity-100 transition-opacity duration-300 z-10"></div>
<input type="text" id="identifier" class="relative w-full bg-transparent px-3 py-2 text-sm text-slate-200 focus:outline-none z-20 placeholder-slate-700 font-extralight" placeholder="operative@nexus.net">
</div>
</div>
<div>
<div class="flex justify-between items-center mb-1.5">
<label for="key" class="text-xs font-light text-slate-400 block uppercase tracking-widest">Security Key</label>
<a href="#" class="text-xs font-extralight text-slate-400 hover:text-white transition-colors underline decoration-slate-700 underline-offset-2">Recover access</a>
</div>
<div class="relative rounded-lg bg-black/80 group/input">
<div class="absolute inset-0 border border-slate-800/80 rounded-lg pointer-events-none transition-colors duration-300 group-hover/input:border-transparent focus-within:border-transparent"></div>
<div class="absolute inset-0 p-[1px] bg-[linear-gradient(110deg,transparent,rgba(255,255,255,0.25),transparent)] [mask-image:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)] [mask-composite:exclude] [-webkit-mask-composite:xor] pointer-events-none rounded-lg opacity-0 group-hover/input:opacity-100 focus-within:opacity-100 transition-opacity duration-300 z-10"></div>
<input type="password" id="key" class="relative w-full bg-transparent pl-3 pr-10 py-2 text-sm text-slate-200 focus:outline-none z-20 placeholder-slate-700 font-extralight" placeholder="••••••••">
<button type="button" class="absolute right-3 top-1/2 -translate-y-1/2 text-slate-600 hover:text-white transition-colors z-30" aria-label="Toggle visibility">
<iconify-icon icon="solar:eye-linear" width="16" height="16" stroke-width="1.5"></iconify-icon>
</button>
</div>
</div>
<div class="flex items-center gap-2 pt-1">
<div class="relative flex items-center justify-center w-4 h-4">
<input type="checkbox" id="session" class="peer appearance-none w-4 h-4 border border-slate-700 rounded bg-black/50 checked:bg-slate-300 checked:border-slate-300 cursor-pointer transition-colors">
<iconify-icon icon="solar:check-linear" width="12" height="12" stroke-width="1.5" class="absolute text-black opacity-0 peer-checked:opacity-100 pointer-events-none"></iconify-icon>
</div>
<label for="session" class="text-xs font-extralight text-slate-400 cursor-pointer select-none uppercase tracking-wider">Maintain persistent uplink</label>
</div>
<!-- Primary Button -->
<button type="submit" class="w-full bg-[#0a0a0a] hover:bg-[#111] text-white text-sm font-light py-2.5 rounded-lg transition-all mt-2 uppercase tracking-widest relative group/btn shadow-[0_0_20px_rgba(255,255,255,0.03)] hover:shadow-[0_0_25px_rgba(255,255,255,0.06)]">
<div class="absolute inset-0 border border-white/10 rounded-lg pointer-events-none transition-colors duration-300 group-hover/btn:border-transparent"></div>
<div class="absolute inset-0 p-[1px] bg-[linear-gradient(110deg,transparent,rgba(255,255,255,0.4),transparent)] [mask-image:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)] [mask-composite:exclude] [-webkit-mask-composite:xor] pointer-events-none rounded-lg opacity-0 group-hover/btn:opacity-100 transition-opacity duration-300 z-10"></div>
<span class="relative z-20">Initialize Uplink</span>
</button>
</form>
<!-- Divider -->
<div class="relative flex items-center py-6 z-20">
<div class="flex-grow border-t border-slate-800/60"></div>
<span class="flex-shrink-0 px-4 text-xs font-extralight text-slate-600 uppercase tracking-widest">Alternative Auth</span>
<div class="flex-grow border-t border-slate-800/60"></div>
</div>
<!-- Alternative Options -->
<div class="grid grid-cols-2 gap-3 z-20">
<button type="button" class="relative flex items-center justify-center gap-2 w-full bg-black/40 hover:bg-slate-900 rounded-lg py-2.5 text-sm text-slate-400 hover:text-slate-200 transition-colors font-extralight group/alt">
<div class="absolute inset-0 border border-slate-800/80 rounded-lg pointer-events-none transition-colors duration-300 group-hover/alt:border-transparent"></div>
<div class="absolute inset-0 p-[1px] bg-[linear-gradient(110deg,transparent,rgba(255,255,255,0.25),transparent)] [mask-image:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)] [mask-composite:exclude] [-webkit-mask-composite:xor] pointer-events-none rounded-lg opacity-0 group-hover/alt:opacity-100 transition-opacity duration-300 z-10"></div>
<span class="relative z-20 flex items-center gap-2"><iconify-icon icon="solar:buildings-linear" width="18" height="18" stroke-width="1.5"></iconify-icon> Corporate SSO</span>
</button>
<button type="button" class="relative flex items-center justify-center gap-2 w-full bg-black/40 hover:bg-slate-900 rounded-lg py-2.5 text-sm text-slate-400 hover:text-slate-200 transition-colors font-extralight group/alt">
<div class="absolute inset-0 border border-slate-800/80 rounded-lg pointer-events-none transition-colors duration-300 group-hover/alt:border-transparent"></div>
<div class="absolute inset-0 p-[1px] bg-[linear-gradient(110deg,transparent,rgba(255,255,255,0.25),transparent)] [mask-image:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)] [mask-composite:exclude] [-webkit-mask-composite:xor] pointer-events-none rounded-lg opacity-0 group-hover/alt:opacity-100 transition-opacity duration-300 z-10"></div>
<span class="relative z-20 flex items-center gap-2"><iconify-icon icon="solar:code-circle-linear" width="18" height="18" stroke-width="1.5"></iconify-icon> Git Auth</span>
</button>
</div>
</div>
<!-- Social Proof -->
<div class="mt-8 flex flex-col items-center gap-4 relative z-20">
<div class="flex -space-x-2">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/2f563338-39fa-47ea-9761-658d4f3f84db_800w.jpg" alt="Active Node" class="w-10 h-10 rounded-full border border-slate-800 bg-black object-cover shadow-lg">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/4f5668c5-fc4a-44e0-bc5e-a664189d3c31_800w.jpg" alt="Active Node" class="w-10 h-10 rounded-full border border-slate-800 bg-black object-cover shadow-lg">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/eca707cc-a5b7-439a-b4fd-247f6106c2e1_800w.jpg" alt="Active Node" class="w-10 h-10 rounded-full border border-slate-800 bg-black object-cover shadow-lg">
<div class="w-10 h-10 rounded-full border border-slate-700 bg-slate-900 flex items-center justify-center text-xs text-slate-300 font-extralight shadow-lg">+</div>
</div>
<p class="text-xs text-slate-600 font-extralight uppercase tracking-widest">Validated by distributed consensus nodes</p>
</div>
</main>
<script>
document.addEventListener('DOMContentLoaded', () => {
// GSAP Masked Reveal for Heading
gsap.registerPlugin(ScrollTrigger);
gsap.to(".reveal-word", {
y: "0%",
duration: 1.2,
ease: "power4.out",
stagger: 0.15,
scrollTrigger: {
trigger: "#reveal-title",
start: "top 95%",
}
});
// Flow Canvas Animation
const canvas = document.getElementById('flow-canvas');
const ctx = canvas.getContext('2d');
let width, height;
let explosions = [];
function resize() {
const dpr = window.devicePixelRatio || 1;
width = window.innerWidth;
height = window.innerHeight;
canvas.width = width * dpr;
canvas.height = height * dpr;
ctx.scale(dpr, dpr);
}
window.addEventListener('resize', resize);
resize();
window.addEventListener('click', (e) => {
explosions.push({ x: e.clientX, y: e.clientY, radius: 0, life: 1 });
});
const paths = [];
const numPaths = 80;
for(let i = 0; i < numPaths; i++) {
paths.push({
isLeft: i % 2 === 0,
startY: (i / numPaths) * height * 1.4 - height * 0.2,
particles: [{
t: Math.random(),
speed: 0.0015 + Math.random() * 0.002
}]
});
}
function getBezierPoint(t, p0, p1, p2, p3) {
const u = 1 - t;
return {
x: u**3 * p0.x + 3 * u**2 * t * p1.x + 3 * u * t**2 * p2.x + t**3 * p3.x,
y: u**3 * p0.y + 3 * u**2 * t * p1.y + 3 * u * t**2 * p2.y + t**3 * p3.y
};
}
function render() {
ctx.clearRect(0, 0, width, height);
const centerX = width / 2;
const centerY = height / 2;
explosions.forEach(exp => {
exp.radius += 15;
exp.life -= 0.015;
});
explosions = explosions.filter(exp => exp.life > 0);
paths.forEach(path => {
const p0 = { x: path.isLeft ? 0 : width, y: path.startY };
const p1 = { x: path.isLeft ? centerX * 0.5 : width - centerX * 0.5, y: path.startY };
const p2 = { x: path.isLeft ? centerX * 0.8 : width - centerX * 0.8, y: centerY };
const p3 = { x: centerX, y: centerY };
ctx.beginPath();
ctx.moveTo(p0.x, p0.y);
ctx.bezierCurveTo(p1.x, p1.y, p2.x, p2.y, p3.x, p3.y);
ctx.strokeStyle = 'rgba(255, 255, 255, 0.35)';
ctx.lineWidth = 1.2;
ctx.setLineDash([1, 4]);
ctx.stroke();
ctx.setLineDash([]);
path.particles.forEach(p => {
p.t += p.speed;
if (p.t > 1) {
p.t = 0;
path.startY += (Math.random() - 0.5) * 10;
}
let pos = getBezierPoint(p.t, p0, p1, p2, p3);
let dxTotal = 0, dyTotal = 0;
explosions.forEach(exp => {
let dx = pos.x - exp.x;
let dy = pos.y - exp.y;
let dist = Math.hypot(dx, dy);
if (dist < exp.radius + 120 && dist > exp.radius - 120) {
let force = (1 - Math.abs(dist - exp.radius) / 120) * exp.life;
dxTotal += (dx / dist) * force * 80;
dyTotal += (dy / dist) * force * 80;
}
});
pos.x += dxTotal;
pos.y += dyTotal;
ctx.fillStyle = `rgba(255, 255, 255, 0.7)`;
ctx.fillRect(pos.x - 1.5, pos.y - 1.5, 3, 3);
});
});
requestAnimationFrame(render);
}
render();
});
</script>
</body>
</html>
/* ===== src/shaders/neuform-isolated/sources/connectivity-graph.html (html) ===== */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Global Connectivity Nexus</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="font-sans antialiased text-blue-950 min-h-screen flex flex-col" style="background: linear-gradient(180deg, rgba(240,244,248,0.92) 0%, rgba(225,234,244,0.92) 40%, rgba(196,217,239,0.92) 80%, rgba(166,200,234,0.92) 100%), url('https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/e534354d-c5f2-4399-a1d9-2f50338e8c47_1600w.jpg') center/cover no-repeat fixed; background-blend-mode: normal;">
<!-- Main Structural Container -->
<div class="max-w-6xl mx-auto w-full flex-grow flex flex-col border-x border-transparent relative bg-white/20 backdrop-blur-[2px]" style="border-image: linear-gradient(to bottom, rgba(147,197,253,0.1), rgba(147,197,253,0.7), rgba(147,197,253,0.1)) 1;">
<!-- Top Corner Squares -->
<div class="absolute -top-[3px] -left-[3px] w-1.5 h-1.5 bg-blue-400/70 z-20"></div>
<div class="absolute -top-[3px] -right-[3px] w-1.5 h-1.5 bg-blue-400/70 z-20"></div>
<!-- Header Section -->
<header class="pt-24 pb-20 px-6 text-center border-b border-transparent relative z-10" style="border-image: linear-gradient(to right, rgba(147,197,253,0.1), rgba(147,197,253,0.7), rgba(147,197,253,0.1)) 1;">
<h1 id="reveal-title" class="text-5xl md:text-6xl font-normal tracking-tight text-blue-950 max-w-3xl mx-auto leading-tight">
The nexus of <br> global connectivity
</h1>
<!-- Header Bottom Corner Squares -->
<div class="absolute -bottom-[3px] -left-[3px] w-1.5 h-1.5 bg-blue-400/70 z-20"></div>
<div class="absolute -bottom-[3px] -right-[3px] w-1.5 h-1.5 bg-blue-400/70 z-20"></div>
</header>
<!-- Stats Section -->
<section class="border-b border-transparent relative z-10 bg-white/10" style="border-image: linear-gradient(to right, rgba(147,197,253,0.1), rgba(147,197,253,0.7), rgba(147,197,253,0.1)) 1;">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 divide-y md:divide-y-0 md:divide-x divide-blue-300/40 text-center">
<div class="flex flex-col items-center justify-center space-y-3 py-14 px-6 relative">
<div class="text-4xl font-normal text-blue-950 tracking-tight">150+</div>
<div class="text-sm text-blue-800/70 max-w-[160px] leading-relaxed">
countries integrated worldwide
</div>
<!-- Internal Grid Intersection Square -->
<div class="hidden lg:block absolute -bottom-[3px] -right-[3px] w-1.5 h-1.5 bg-blue-400/70 z-20"></div>
</div>
<div class="flex flex-col items-center justify-center space-y-3 py-14 px-6 relative">
<div class="text-4xl font-normal text-blue-800/90 tracking-tight">
<span class="text-blue-500/80 font-light mr-1">$</span>3.1T
</div>
<div class="text-sm text-blue-800/70 max-w-[160px] leading-relaxed">
annual transfer volume
</div>
<!-- Internal Grid Intersection Square -->
<div class="hidden lg:block absolute -bottom-[3px] -right-[3px] w-1.5 h-1.5 bg-blue-400/70 z-20"></div>
</div>
<div class="flex flex-col items-center justify-center space-y-3 py-14 px-6 relative">
<div class="text-4xl font-normal text-blue-800/80 tracking-tight">99.999%</div>
<div class="text-sm text-blue-800/70 max-w-[160px] leading-relaxed">
infrastructure reliability
</div>
<!-- Internal Grid Intersection Square -->
<div class="hidden lg:block absolute -bottom-[3px] -right-[3px] w-1.5 h-1.5 bg-blue-400/70 z-20"></div>
</div>
<div class="flex flex-col items-center justify-center space-y-3 py-14 px-6">
<div class="text-4xl font-normal text-blue-700/80 tracking-tight">850M+</div>
<div class="text-sm text-blue-800/70 max-w-[160px] leading-relaxed">
verified digital identities
</div>
</div>
</div>
<!-- Stats Bottom Corner Squares -->
<div class="absolute -bottom-[3px] -left-[3px] w-1.5 h-1.5 bg-blue-400/70 z-20"></div>
<div class="absolute -bottom-[3px] -right-[3px] w-1.5 h-1.5 bg-blue-400/70 z-20"></div>
</section>
<!-- Animation Section -->
<main class="flex-grow relative overflow-hidden min-h-[500px]">
<!-- Controls -->
<div class="absolute top-6 right-6 flex gap-2 z-20">
<button id="pauseBtn" class="w-8 h-8 flex items-center justify-center bg-white/40 hover:bg-white/60 backdrop-blur-md border border-blue-300/40 rounded text-blue-800 transition-all cursor-pointer" aria-label="Pause animation">
<iconify-icon icon="solar:pause-linear" width="16" height="16" style="stroke-width: 1.5;"></iconify-icon>
</button>
<button class="w-8 h-8 flex items-center justify-center bg-white/40 hover:bg-white/60 backdrop-blur-md border border-blue-300/40 rounded text-blue-800 transition-all cursor-pointer" aria-label="Settings">
<iconify-icon icon="solar:settings-linear" width="16" height="16" style="stroke-width: 1.5;"></iconify-icon>
</button>
</div>
<!-- Canvas Container -->
<canvas id="networkCanvas" class="absolute inset-0 w-full h-full block z-0"></canvas>
<!-- Bottom Corner Squares -->
<div class="absolute -bottom-[3px] -left-[3px] w-1.5 h-1.5 bg-blue-400/70 z-20"></div>
<div class="absolute -bottom-[3px] -right-[3px] w-1.5 h-1.5 bg-blue-400/70 z-20"></div>
</main>
</div>
<script>
// Background Canvas Animation
const canvas = document.getElementById('networkCanvas');
const ctx = canvas.getContext('2d', { alpha: true });
let width, height;
let particles = [];
let isPlaying = true;
let animationFrameId;
function resize() {
width = canvas.clientWidth;
height = canvas.clientHeight;
canvas.width = width * window.devicePixelRatio;
canvas.height = height * window.devicePixelRatio;
ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
initParticles();
}
class Particle {
constructor() {
this.reset(true);
}
reset(initial = false) {
this.angle = Math.PI + (Math.random() * Math.PI);
if (Math.random() > 0.3) {
this.angle = Math.PI * 1.25 + (Math.random() * Math.PI * 0.5);
}
this.speed = 0.5 + Math.random() * 2.5;
this.distance = initial ? Math.random() * (height * 1.2) : Math.random() * 50;
this.maxLength = 20 + Math.random() * 180;
this.length = 0;
this.alpha = 0;
}
update() {
this.distance += this.speed;
this.length = Math.min(this.maxLength, this.distance * 0.8);
const normalizedDist = this.distance / (height * 1.2);
this.alpha = Math.min(1, this.distance / 100) * Math.max(0, 1 - normalizedDist);
if (this.distance > height * 1.5) {
this.reset();
}
}
draw() {
const originX = width / 2;
const originY = height + 50;
const startX = originX + Math.cos(this.angle) * this.distance;
const startY = originY + Math.sin(this.angle) * this.distance;
const endX = originX + Math.cos(this.angle) * (this.distance + this.length);
const endY = originY + Math.sin(this.angle) * (this.distance + this.length);
const distRatio = Math.min(1, this.distance / height);
const hue = 220 + (distRatio * 15);
const lightness = 15 + (distRatio * 35);
const color = `hsla(${hue}, 90%, ${lightness}%, ${this.alpha})`;
const tailColor = `hsla(${hue}, 90%, ${Math.max(5, lightness - 15)}%, ${this.alpha * 0.05})`;
ctx.beginPath();
const gradient = ctx.createLinearGradient(startX, startY, endX, endY);
gradient.addColorStop(0, tailColor);
gradient.addColorStop(1, color);
ctx.moveTo(startX, startY);
ctx.lineTo(endX, endY);
ctx.strokeStyle = gradient;
ctx.lineWidth = 0.5 + (distRatio * 2);
ctx.stroke();
ctx.beginPath();
ctx.arc(endX, endY, 0.5 + (distRatio * 1.5), 0, Math.PI * 2);
ctx.fillStyle = `hsla(${hue}, 100%, ${lightness + 20}%, ${this.alpha * 1.5})`;
ctx.fill();
}
}
function initParticles() {
particles = [];
const particleCount = window.innerWidth < 768 ? 150 : 400;
for(let i=0; i<particleCount; i++) {
particles.push(new Particle());
}
}
function animate() {
if (!isPlaying) return;
ctx.clearRect(0, 0, width, height);
particles.forEach(p => {
p.update();
p.draw();
});
animationFrameId = requestAnimationFrame(animate);
}
window.addEventListener('resize', () => {
cancelAnimationFrame(animationFrameId);
resize();
if(isPlaying) animate();
});
resize();
animate();
const pauseBtn = document.getElementById('pauseBtn');
pauseBtn.addEventListener('click', () => {
isPlaying = !isPlaying;
if (isPlaying) {
pauseBtn.innerHTML = '<iconify-icon icon="solar:pause-linear" width="16" height="16" style="stroke-width: 1.5;"></iconify-icon>';
animate();
} else {
pauseBtn.innerHTML = '<iconify-icon icon="solar:play-linear" width="16" height="16" style="stroke-width: 1.5;"></iconify-icon>';
cancelAnimationFrame(animationFrameId);
}
});
// GSAP Masked Text Reveal
document.addEventListener("DOMContentLoaded", (event) => {
gsap.registerPlugin(ScrollTrigger);
const titleEl = document.getElementById('reveal-title');
if (titleEl) {
const lines = titleEl.innerHTML.split(/<brs*/?>/i);
titleEl.innerHTML = '';
lines.forEach((line, index) => {
const words = line.split(' ');
words.forEach((word) => {
if (word.trim() !== '') {
const wrapper = document.createElement('span');
wrapper.className = 'inline-block overflow-hidden align-bottom';
wrapper.style.paddingBottom = '0.1em';
wrapper.style.marginBottom = '-0.1em';
const inner = document.createElement('span');
inner.className = 'inline-block reveal-text';
inner.style.transform = 'translateY(110%)';
inner.innerHTML = word;
wrapper.appendChild(inner);
titleEl.appendChild(wrapper);
titleEl.appendChild(document.createTextNode(' '));
}
});
if (index < lines.length - 1) {
titleEl.appendChild(document.createElement('br'));
}
});
gsap.to('.reveal-text', {
y: 0,
ease: 'power4.out',
duration: 1.2,
stagger: 0.08,
scrollTrigger: {
trigger: '#reveal-title',
start: 'top 90%',
}
});
}
});
</script>
</body>
</html>
/* ===== src/shaders/neuform-isolated/sources/interface-lines.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 Interface</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-[#0a0a0c] text-zinc-400 font-mono min-h-screen flex flex-col items-center justify-center p-4 sm:p-8 relative overflow-hidden selection:bg-zinc-800 selection:text-white">
<!-- Aura Asset Background Image -->
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/fa51902b-c2a4-4c33-a96e-a8f1ef67edc6_1600w.jpg"
class="absolute inset-0 w-full h-full object-cover opacity-10 mix-blend-screen pointer-events-none z-0"
alt="">
<!-- WebGL-simulated Background Animation -->
<canvas id="bg-canvas" class="absolute inset-0 z-0 pointer-events-none"></canvas>
<!-- Main UI Container -->
<main class="relative z-10 w-full max-w-2xl flex flex-col gap-12 sm:gap-20">
<!-- PANEL 1: CORE (Red/Orange) -->
<section class="relative group">
<!-- Border Gradient Skill Application -->
<div class="absolute -inset-[1px] rounded-lg bg-gradient-to-r from-[#c87a65]/40 via-transparent to-transparent opacity-50 group-hover:opacity-100 transition-opacity duration-700" style="mask-image: linear-gradient(black, black); -webkit-mask-image: -webkit-linear-gradient(black, black);"></div>
<div class="relative bg-[#0a0a0c] rounded-lg p-2 flex flex-col gap-4 text-[#c87a65]">
<!-- Top Row -->
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-end gap-4 border-b border-[#c87a65]/20 pb-2">
<h1 class="gsap-reveal text-3xl sm:text-4xl tracking-tight font-medium uppercase animate-pulse" style="animation-duration: 4s;">[ CORE ]</h1>
<div class="flex gap-6 text-xs tracking-wider">
<div class="flex flex-col gap-1">
<span>CONF.SYS</span>
<span class="opacity-70">RESTART</span>
<span class="opacity-70">SLEEP</span>
</div>
<div class="flex flex-col gap-1">
<span>BUILD_11</span>
<span class="opacity-70">ANALYZE</span>
<span class="opacity-70">INPUT NEEDED</span>
</div>
</div>
</div>
<!-- Middle Row -->
<div class="flex flex-col sm:flex-row justify-between items-start gap-6">
<!-- Dot Matrix -->
<div class="grid grid-cols-[repeat(20,minmax(0,1fr))] gap-1 opacity-80" id="matrix-1">
<!-- Populated by JS for brevity -->
</div>
<!-- Right Controls -->
<div class="flex flex-col gap-2 min-w-[200px]">
<div class="flex items-center justify-between border-b border-[#c87a65]/20 pb-1">
<div class="flex items-center gap-2">
<div class="w-3 h-3 rounded-full bg-[#c87a65] animate-ping" style="animation-duration: 3s;"></div>
<span class="text-lg tracking-widest">++</span>
</div>
<span class="text-xs">HASH: 0x3C9A</span>
</div>
<div class="flex items-center justify-between text-xs pt-1">
<span>2B-44 - TEMP: 61°C</span>
<div class="w-8 h-3 rounded-full border border-[#c87a65]/50 flex items-center p-[1px]">
<div class="w-2 h-full bg-[#c87a65] rounded-full"></div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- PANEL 2: SECURE (Green) -->
<section class="relative group">
<!-- Border Gradient Skill Application -->
<div class="absolute -inset-[1px] rounded-lg bg-gradient-to-l from-[#7a9f65]/40 via-transparent to-transparent opacity-50 group-hover:opacity-100 transition-opacity duration-700" style="mask-image: linear-gradient(black, black); -webkit-mask-image: -webkit-linear-gradient(black, black);"></div>
<div class="relative bg-[#0a0a0c] rounded-lg p-2 flex flex-col gap-3 text-[#7a9f65]">
<!-- Ruler -->
<div class="relative w-full h-4 border-t border-[#7a9f65]/30 flex justify-between">
<div class="w-px h-2 bg-[#7a9f65]/50"></div>
<div class="w-px h-1 bg-[#7a9f65]/30"></div>
<div class="w-px h-2 bg-[#7a9f65]/50"></div>
<div class="w-px h-1 bg-[#7a9f65]/30"></div>
<div class="w-px h-2 bg-[#7a9f65]/50"></div>
<div class="w-px h-1 bg-[#7a9f65]/30"></div>
<div class="w-px h-2 bg-[#7a9f65]/50"></div>
</div>
<div class="flex flex-col sm:flex-row justify-between items-end gap-6">
<!-- Large Dot Pattern -->
<div class="flex flex-col gap-2 opacity-90">
<div class="flex gap-2"><div class="w-2 h-2 rounded-full bg-current"></div><div class="w-2 h-2 rounded-full bg-current"></div><div class="w-2 h-2 rounded-full bg-current opacity-20"></div><div class="w-2 h-2 rounded-full bg-current"></div><div class="w-2 h-2 rounded-full bg-current"></div><div class="w-2 h-2 rounded-full bg-current opacity-20"></div><div class="w-2 h-2 rounded-full bg-current"></div><div class="w-2 h-2 rounded-full bg-current"></div></div>
<div class="flex gap-2"><div class="w-2 h-2 rounded-full bg-current opacity-20"></div><div class="w-2 h-2 rounded-full bg-current"></div><div class="w-2 h-2 rounded-full bg-current"></div><div class="w-2 h-2 rounded-full bg-current opacity-20"></div><div class="w-2 h-2 rounded-full bg-current"></div><div class="w-2 h-2 rounded-full bg-current"></div><div class="w-2 h-2 rounded-full bg-current opacity-20"></div><div class="w-2 h-2 rounded-full bg-current"></div></div>
<div class="flex gap-2"><div class="w-2 h-2 rounded-full bg-current"></div><div class="w-2 h-2 rounded-full bg-current opacity-20"></div><div class="w-2 h-2 rounded-full bg-current"></div><div class="w-2 h-2 rounded-full bg-current"></div><div class="w-2 h-2 rounded-full bg-current opacity-20"></div><div class="w-2 h-2 rounded-full bg-current"></div><div class="w-2 h-2 rounded-full bg-current"></div><div class="w-2 h-2 rounded-full bg-current opacity-20"></div></div>
</div>
<!-- Info Box & Title -->
<div class="flex flex-col items-end gap-2 w-full sm:w-auto">
<div class="flex items-stretch gap-2">
<div class="border border-[#7a9f65]/30 p-2 text-xs flex flex-col justify-center min-w-[120px]">
<span>APPROVED</span>
<span class="opacity-70">ID: X7-44</span>
<span class="opacity-70">SEQ: #0933</span>
</div>
<div class="border border-[#7a9f65]/30 p-2 flex items-center justify-center">
<iconify-icon icon="solar:clock-circle-linear" class="text-xl"></iconify-icon>
</div>
<!-- Logo Box -->
<div class="w-12 h-12 bg-[#7a9f65] relative overflow-hidden flex-shrink-0">
<div class="absolute w-16 h-4 bg-[#0a0a0c] -rotate-45 top-4 -left-2"></div>
</div>
</div>
<h2 class="gsap-reveal text-2xl sm:text-3xl tracking-tight font-medium uppercase">SECURE</h2>
</div>
</div>
<!-- Bottom Text -->
<div class="flex flex-col sm:flex-row justify-between text-xs mt-2 opacity-80">
<span>LOADING <span class="animate-pulse">...</span></span>
<span>//KEY: <span class="text-white opacity-90">0x7B11</span>//</span>
</div>
<div class="text-xs opacity-70">
SYNCING - ID: 88-K - DATA DROP: 0.2% SECTOR 9
</div>
</div>
</section>
<!-- PANEL 3: 909 (Purple/Blue) -->
<section class="relative group">
<!-- Border Gradient Skill Application -->
<div class="absolute -inset-[1px] rounded-lg bg-gradient-to-t from-[#756a9f]/40 via-transparent to-transparent opacity-50 group-hover:opacity-100 transition-opacity duration-700" style="mask-image: linear-gradient(black, black); -webkit-mask-image: -webkit-linear-gradient(black, black);"></div>
<div class="relative bg-[#0a0a0c] rounded-lg p-2 flex flex-col gap-4 text-[#756a9f]">
<div class="flex flex-col sm:flex-row items-center justify-between gap-8">
<!-- Left: Node Diagram -->
<div class="relative w-32 h-16 flex-shrink-0 hidden sm:block">
<!-- Lines -->
<div class="absolute top-2 left-2 w-20 h-px bg-[#756a9f]/50"></div>
<div class="absolute top-10 left-6 w-16 h-px bg-[#756a9f]/50"></div>
<div class="absolute top-2 left-22 w-px h-8 bg-[#756a9f]/50 rotate-45 origin-top-left"></div>
<div class="absolute top-10 left-6 w-px h-6 bg-[#756a9f]/50 -rotate-45 origin-top-left"></div>
<!-- Nodes -->
<div class="absolute top-1.5 left-1.5 w-1.5 h-1.5 rounded-full border border-[#756a9f] bg-[#0a0a0c]"></div>
<div class="absolute top-1.5 left-21.5 w-1.5 h-1.5 rounded-full border border-[#756a9f] bg-[#0a0a0c]"></div>
<div class="absolute top-9.5 left-5.5 w-1.5 h-1.5 rounded-full border border-[#756a9f] bg-[#0a0a0c]"></div>
<div class="absolute top-9.5 left-21.5 w-1.5 h-1.5 rounded-full border border-[#756a9f] bg-[#0a0a0c]"></div>
<div class="absolute top-14.5 left-1.5 w-1.5 h-1.5 rounded-full border border-[#756a9f] bg-[#0a0a0c]"></div>
<!-- Arrows -->
<div class="absolute top-5 left-0 flex items-center gap-1">
<iconify-icon icon="solar:alt-arrow-right-linear" class="text-lg"></iconify-icon>
<div class="w-8 h-px bg-[#756a9f]"></div>
</div>
</div>
<!-- Middle: Title -->
<div class="flex items-center gap-4">
<div class="flex items-center gap-1 sm:hidden">
<iconify-icon icon="solar:alt-arrow-right-linear" class="text-lg"></iconify-icon>
<div class="w-8 h-px bg-[#756a9f]"></div>
</div>
<h3 class="gsap-reveal text-5xl sm:text-6xl tracking-tight font-normal">909</h3>
</div>
<!-- Right: Info & Circle -->
<div class="flex items-center gap-6">
<div class="flex flex-col text-xs">
<span>SECURITY-NET</span>
<span class="opacity-70">ACTIVE</span>
<span class="opacity-70">STAT: 0xBB02</span>
<div class="flex gap-1 mt-1">
<div class="w-1.5 h-1.5 rounded-full border border-current"></div>
<div class="w-1.5 h-1.5 rounded-full border border-current"></div>
<div class="w-1.5 h-1.5 rounded-full border border-current bg-current"></div>
</div>
</div>
<!-- Circular Dots -->
<div class="relative w-12 h-12 animate-spin" style="animation-duration: 10s; animation-timing-function: linear;">
<div class="absolute inset-0" id="circle-dots">
<!-- Populated by JS -->
</div>
</div>
</div>
</div>
<!-- Bottom Text -->
<div class="text-center sm:text-left text-xs flex flex-col sm:flex-row sm:justify-center gap-2 sm:gap-8 mt-2 opacity-80">
<span>UPLINK STATUS - <span class="text-white opacity-90">ONLINE</span></span>
<span>POWER: 48V - DRAW: 1.8A</span>
</div>
</div>
</section>
</main>
<script>
// GSAP Masked Staggered Reveal Logic
gsap.registerPlugin(ScrollTrigger);
document.querySelectorAll('.gsap-reveal').forEach(el => {
const text = el.innerText;
const words = text.split(' ');
el.innerHTML = '';
words.forEach((word, i) => {
const outer = document.createElement('span');
// Ensure overflow hidden and adjust alignment
outer.className = 'inline-block overflow-hidden pb-1 -mb-1 align-bottom';
const inner = document.createElement('span');
inner.className = 'inline-block translate-y-[120%]';
inner.innerText = word + (i < words.length - 1 ? 'u00A0' : '');
outer.appendChild(inner);
el.appendChild(outer);
gsap.to(inner, {
y: "0%",
duration: 0.8,
ease: "power3.out",
delay: i * 0.1,
scrollTrigger: {
trigger: el,
start: "top 95%",
}
});
});
});
// Populate Matrix 1
const matrixContainer = document.getElementById('matrix-1');
let matrixHTML = '';
for(let i=0; i<80; i++) {
const isFilled = Math.random() > 0.6;
const isDim = Math.random() > 0.5;
matrixHTML += `<div class="w-1.5 h-1.5 rounded-full border border-current ${isFilled ? 'bg-current' : ''} ${isDim ? 'opacity-30' : ''}"></div>`;
}
matrixContainer.innerHTML = matrixHTML;
// Populate Circle Dots
const circleContainer = document.getElementById('circle-dots');
let circleHTML = '';
for(let i=0; i<12; i++) {
const angle = (i * 30) * (Math.PI / 180);
const x = 24 + 20 * Math.cos(angle) - 3; // center 24, radius 20, offset half width
const y = 24 + 20 * Math.sin(angle) - 3;
const isFilled = i % 3 === 0;
circleHTML += `<div class="absolute w-1.5 h-1.5 rounded-full border border-current ${isFilled ? 'bg-current' : ''}" style="left: ${x}px; top: ${y}px;"></div>`;
}
circleContainer.innerHTML = circleHTML;
// WebGL-simulated Canvas Animation
const canvas = document.getElementById('bg-canvas');
const ctx = canvas.getContext('2d');
let width, height;
let particles = [];
function initCanvas() {
const dpr = Math.min(window.devicePixelRatio || 1, 2);
width = window.innerWidth;
height = window.innerHeight;
canvas.width = Math.max(1, Math.floor(width * dpr));
canvas.height = Math.max(1, Math.floor(height * dpr));
canvas.style.width = width + 'px';
canvas.style.height = height + 'px';
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
ctx.imageSmoothingEnabled = false;
particles = [];
const numParticles = window.innerWidth < 640 ? 30 : 70;
for (let i = 0; i < numParticles; i++) {
particles.push({
x: Math.random() * width,
y: Math.random() * height,
vx: (Math.random() - 0.5) * 0.5,
vy: (Math.random() - 0.5) * 0.5
});
}
}
function drawLines() {
ctx.clearRect(0, 0, width, height);
ctx.lineWidth = 1;
ctx.lineCap = 'butt';
ctx.lineJoin = 'miter';
for (let i = 0; i < particles.length; i++) {
let p = particles[i];
p.x += p.vx;
p.y += p.vy;
if (p.x < 0 || p.x > width) p.vx *= -1;
if (p.y < 0 || p.y > height) p.vy *= -1;
for (let j = i + 1; j < particles.length; j++) {
let p2 = particles[j];
let dx = p.x - p2.x;
let dy = p.y - p2.y;
let dist = Math.sqrt(dx * dx + dy * dy);
if (dist < 120) {
ctx.beginPath();
ctx.strokeStyle = `rgba(255, 255, 255, ${0.28 + (1 - dist / 120) * 0.42})`;
ctx.moveTo(p.x, p.y);
ctx.lineTo(p2.x, p2.y);
ctx.stroke();
}
}
ctx.fillStyle = 'rgba(255, 255, 255, 0.85)';
ctx.fillRect(p.x - 0.75, p.y - 0.75, 1.5, 1.5);
}
requestAnimationFrame(drawLines);
}
window.addEventListener('resize', initCanvas);
initCanvas();
drawLines();
</script>
</body>
</html>
/* ===== src/shaders/neuform-isolated/sources/defense-lines.html (html) ===== */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cyber Defenses</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=Cormorant+Garamond:ital,wght@0,300;0,400;1,300&family=DM+Mono:wght@300;400&family=Plus+Jakarta+Sans:wght@300;400&display=swap" rel="stylesheet">
</head>
<body class="bg-[#030303] min-h-screen flex flex-col items-center justify-center overflow-hidden text-white relative antialiased selection:bg-red-500/30" style="font-family: 'Plus Jakarta Sans', sans-serif;">
<!-- Canvas for background line animation -->
<canvas id="bg-canvas" class="absolute inset-0 z-0 opacity-50 pointer-events-none"></canvas>
<!-- Ambient background glow -->
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-[60%] w-[800px] h-[500px] bg-red-600/10 rounded-full blur-[150px] pointer-events-none z-0"></div>
<main class="relative z-10 flex flex-col items-center justify-center w-full min-h-screen max-w-7xl mx-auto px-4 sm:px-6">
<!-- 3D Card Carousel -->
<div class="relative flex items-center justify-center w-full h-[400px] sm:h-[650px]" style="perspective: 1200px;">
<div id="carousel" class="relative w-full h-full flex items-center justify-center" style="transform-style: preserve-3d;">
<!-- Left Cards -->
<div class="card absolute w-32 sm:w-64 h-[230px] sm:h-[422px] rounded-xl z-0 bg-gradient-to-r from-[#0a0202] to-[#1f0505] border border-red-900/10 cursor-pointer pointer-events-auto" style="transform: translateX(-180%) translateZ(-400px) rotateY(35deg); opacity: 0.15; box-shadow: inset 0 0 20px rgba(0,0,0,0.8);"></div>
<div class="card absolute w-32 sm:w-64 h-[230px] sm:h-[422px] rounded-xl z-10 bg-gradient-to-r from-[#140303] to-[#3d0a0a] border border-red-900/20 cursor-pointer pointer-events-auto" style="transform: translateX(-120%) translateZ(-250px) rotateY(25deg); opacity: 0.4; box-shadow: inset 0 0 20px rgba(0,0,0,0.5);"></div>
<div class="card absolute w-32 sm:w-64 h-[230px] sm:h-[422px] rounded-xl z-20 bg-gradient-to-r from-[#290606] to-[#6b1111] border border-red-700/30 cursor-pointer pointer-events-auto" style="transform: translateX(-60%) translateZ(-100px) rotateY(15deg); opacity: 0.7; box-shadow: inset 0 0 20px rgba(0,0,0,0.3);"></div>
<!-- Right Cards -->
<div class="card absolute w-32 sm:w-64 h-[230px] sm:h-[422px] rounded-xl z-0 bg-gradient-to-l from-[#0a0202] to-[#1f0505] border border-red-900/10 cursor-pointer pointer-events-auto" style="transform: translateX(180%) translateZ(-400px) rotateY(-35deg); opacity: 0.15; box-shadow: inset 0 0 20px rgba(0,0,0,0.8);"></div>
<div class="card absolute w-32 sm:w-64 h-[230px] sm:h-[422px] rounded-xl z-10 bg-gradient-to-l from-[#140303] to-[#3d0a0a] border border-red-900/20 cursor-pointer pointer-events-auto" style="transform: translateX(120%) translateZ(-250px) rotateY(-25deg); opacity: 0.4; box-shadow: inset 0 0 20px rgba(0,0,0,0.5);"></div>
<div class="card absolute w-32 sm:w-64 h-[230px] sm:h-[422px] rounded-xl z-20 bg-gradient-to-l from-[#290606] to-[#6b1111] border border-red-700/30 cursor-pointer pointer-events-auto" style="transform: translateX(60%) translateZ(-100px) rotateY(-15deg); opacity: 0.7; box-shadow: inset 0 0 20px rgba(0,0,0,0.3);"></div>
<!-- Center Active Card -->
<div class="card absolute w-36 sm:w-72 h-[269px] sm:h-[461px] bg-gradient-to-br from-[#ff4747] to-[#cc0000] rounded-xl flex items-center justify-center z-30 border border-red-300/40 overflow-hidden cursor-pointer pointer-events-auto" style="transform: translateZ(50px); box-shadow: 0 0 80px 15px rgba(220, 38, 38, 0.35), inset 0 0 30px rgba(255,255,255,0.15);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/fa51902b-c2a4-4c33-a96e-a8f1ef67edc6_1600w.jpg" class="absolute inset-0 w-full h-full object-cover opacity-60 mix-blend-multiply pointer-events-none" alt="Abstract Pattern">
<div class="relative flex w-full h-full pointer-events-none" style="background-image: radial-gradient(circle at center, rgba(255,255,255,0.1) 0%, transparent 70%), repeating-linear-gradient(-45deg, rgba(255,255,255,0.15) 0px, rgba(255,255,255,0.15) 2px, transparent 2px, transparent 12px);">
</div>
</div>
</div>
</div>
<!-- Typography Section (Overlayed) -->
<div class="absolute inset-0 flex flex-col items-center justify-center text-center pointer-events-none z-40" id="hero-text">
<!-- Monospaced Technical Badge -->
<div id="hero-badge" class="opacity-0 flex items-center gap-3 px-4 py-2 rounded-full bg-[#1a0505]/80 backdrop-blur-md text-red-400 text-xs font-light tracking-widest uppercase mb-8" style="font-family: 'DM Mono', monospace; box-shadow: 0 0 20px rgba(220,38,38,0.15); border: 1px solid transparent; background-clip: padding-box, border-box; background-origin: padding-box, border-box; background-image: linear-gradient(#1a0505, #1a0505), linear-gradient(to right, rgba(153,27,27,0.6), rgba(239,68,68,0.3));">
<iconify-icon icon="solar:radar-linear" width="16" height="16" stroke-width="1.5"></iconify-icon>
<span>Continuous Network Surveillance</span>
</div>
<!-- Elegant Serif Headline -->
<h1 class="text-5xl sm:text-7xl md:text-8xl font-light tracking-tight text-[#f5f5f5] leading-none max-w-5xl flex flex-col items-center gap-y-2 sm:gap-y-4" style="font-family: 'Cormorant Garamond', serif; text-shadow: 0 10px 40px rgba(0,0,0,0.9);">
<div class="flex flex-wrap justify-center gap-x-3 sm:gap-x-4">
<span class="inline-flex overflow-hidden pb-1 sm:pb-2"><span class="word translate-y-[120%] inline-block">Expose</span></span>
<span class="inline-flex overflow-hidden pb-1 sm:pb-2"><span class="word translate-y-[120%] inline-block">hidden</span></span>
<span class="inline-flex overflow-hidden pb-1 sm:pb-2"><span class="word translate-y-[120%] inline-block">vulnerabilities</span></span>
</div>
<div class="flex flex-wrap justify-center gap-x-3 sm:gap-x-4 italic text-red-100">
<span class="inline-flex overflow-hidden pb-1 sm:pb-2"><span class="word translate-y-[120%] inline-block">within</span></span>
<span class="inline-flex overflow-hidden pb-1 sm:pb-2"><span class="word translate-y-[120%] inline-block">your</span></span>
<span class="inline-flex overflow-hidden pb-1 sm:pb-2"><span class="word translate-y-[120%] inline-block">cloud</span></span>
<span class="inline-flex overflow-hidden pb-1 sm:pb-2"><span class="word translate-y-[120%] inline-block">infrastructure</span></span>
</div>
</h1>
<!-- Clean Sans-Serif CTA -->
<button id="hero-button" class="opacity-0 group relative mt-10 sm:mt-14 px-8 py-4 rounded-lg text-sm font-light text-white transition-all active:scale-95 pointer-events-auto flex items-center justify-center bg-red-600 border border-red-500/50 overflow-hidden" style="font-family: 'Plus Jakarta Sans', sans-serif;">
<span class="absolute inset-0 w-full h-full bg-red-500 transition-all duration-500 ease-out [clip-path:circle(0%_at_50%_50%)] group-hover:[clip-path:circle(150%_at_50%_50%)] z-0"></span>
<span class="relative z-10 flex items-center gap-2">
Start Threat Assessment
<iconify-icon icon="solar:arrow-right-linear" width="18" height="18" stroke-width="1.5"></iconify-icon>
</span>
</button>
</div>
</main>
<script>
// Background Canvas Animation
const canvas = document.getElementById('bg-canvas');
const ctx = canvas.getContext('2d');
let width, height;
let particles = [];
function initCanvas() {
const dpr = Math.min(window.devicePixelRatio || 1, 2);
width = window.innerWidth;
height = window.innerHeight;
canvas.width = Math.max(1, Math.floor(width * dpr));
canvas.height = Math.max(1, Math.floor(height * dpr));
canvas.style.width = width + 'px';
canvas.style.height = height + 'px';
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
ctx.imageSmoothingEnabled = false;
particles = [];
const particleCount = window.innerWidth < 768 ? 40 : 100;
for(let i = 0; i < particleCount; i++) {
particles.push({
x: Math.random() * width,
y: Math.random() * height,
baseLength: Math.random() * 80 + 20,
speedY: Math.random() * 0.8 + 0.2,
baseOpacity: Math.random() * 0.2 + 0.05
});
}
}
window.addEventListener('resize', initCanvas);
initCanvas();
function animateCanvas() {
ctx.clearRect(0, 0, width, height);
const centerX = width / 2;
const centerY = height / 2;
ctx.lineCap = 'butt';
ctx.lineJoin = 'miter';
particles.forEach(p => {
const distFromCenterX = Math.abs(p.x - centerX);
const distFromCenterY = Math.abs(p.y - centerY);
const proximityX = Math.max(0, 1 - (distFromCenterX / (width / 2)));
const proximityY = Math.max(0, 1 - (distFromCenterY / (height / 2)));
const centerProximity = proximityX * (0.4 + proximityY * 0.6);
const currentLength = p.baseLength * (1 + centerProximity * 4);
const currentOpacity = Math.min(1.0, p.baseOpacity + (centerProximity * 2.0));
const brightness = Math.floor(centerProximity * 180);
ctx.beginPath();
const grad = ctx.createLinearGradient(p.x, p.y, p.x, p.y + currentLength);
grad.addColorStop(0, `rgba(220, 38, 38, 0)`);
grad.addColorStop(0.5, `rgba(255, ${38 + brightness}, ${38 + brightness}, ${currentOpacity})`);
grad.addColorStop(1, `rgba(220, 38, 38, 0)`);
ctx.strokeStyle = grad;
ctx.lineWidth = 0.5;
ctx.moveTo(p.x, p.y);
ctx.lineTo(p.x, p.y + currentLength);
ctx.stroke();
p.y -= p.speedY * 1.5 * (1 + centerProximity * 0.5);
if(p.y + currentLength < 0) {
p.y = height;
p.x = Math.random() * width;
}
});
requestAnimationFrame(animateCanvas);
}
animateCanvas();
// 3D Cards Floating, Mouse Tracking & Hover Animation
const carousel = document.getElementById('carousel');
const cards = document.querySelectorAll('.card');
let time = 0;
let targetRotateY = 0;
let currentRotateY = 0;
cards.forEach(card => {
card.addEventListener('mouseenter', () => card.isHovered = true);
card.addEventListener('mouseleave', () => card.isHovered = false);
card.hoverAmt = 0;
});
window.addEventListener('mousemove', (e) => {
const x = (e.clientX / window.innerWidth) - 0.5;
targetRotateY = x * 40;
});
function animateCards() {
time += 0.015;
currentRotateY += (targetRotateY - currentRotateY) * 0.08;
carousel.style.transform = `rotateY(${currentRotateY}deg)`;
cards.forEach((card, index) => {
if(!card.dataset.baseTransform) {
card.dataset.baseTransform = card.style.transform;
const match = card.dataset.baseTransform.match(/translateX(([^)]+))/);
card.directionX = match ? parseFloat(match[1]) : 0;
}
const targetHover = card.isHovered ? 1 : 0;
card.hoverAmt += (targetHover - card.hoverAmt) * 0.15;
const hoverZ = card.hoverAmt * 60;
const hoverY = card.hoverAmt * -20;
let hoverX = 0;
if (card.directionX < 0) hoverX = card.hoverAmt * -40;
else if (card.directionX > 0) hoverX = card.hoverAmt * 40;
const offset = Math.sin(time + (index * 0.5)) * 8;
card.style.transform = `${card.dataset.baseTransform} translateX(${hoverX}px) translateY(${offset + hoverY}px) translateZ(${hoverZ}px)`;
});
requestAnimationFrame(animateCards);
}
animateCards();
// Entrance Animation with GSAP Masked Reveal
gsap.registerPlugin(ScrollTrigger);
setTimeout(() => {
// Animate headline words in a masked stagger
gsap.to('.word', {
y: "0%",
duration: 1.2,
stagger: 0.06,
ease: "power4.out",
scrollTrigger: {
trigger: "#hero-text",
start: "top 90%"
}
});
// Fade in and float up the badge and button sequentially
gsap.fromTo(['#hero-badge', '#hero-button'],
{ opacity: 0, y: 20 },
{ opacity: 1, y: 0, duration: 1, stagger: 0.3, ease: "power3.out", delay: 0.4 }
);
}, 150);
</script>
</body>
</html>
/* ===== src/shaders/neuform-isolated/sources/topo-field.html (html) ===== */
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NexusNode Infrastructure</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 & ScrollTrigger 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>
</head>
<body class="bg-black text-white font-sans min-h-screen relative overflow-x-hidden selection:bg-white/20 selection:text-white font-light" style="background-color: #000; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;">
<!-- WebGL Background Container -->
<div class="fixed inset-0 z-0 pointer-events-none">
<canvas id="topo-canvas" class="w-full h-full"></canvas>
<!-- Gradient overlay to fade bottom and top for text readability -->
<div class="absolute inset-0 bg-gradient-to-b from-black/50 via-transparent to-black z-10"></div>
<div class="absolute inset-0 bg-[radial-gradient(circle_at_center,transparent_0%,#000_100%)] opacity-90 z-10"></div>
</div>
<!-- Main Content -->
<main class="relative z-20 flex flex-col min-h-screen">
<!-- Navigation -->
<header class="container mx-auto px-6 py-6 flex items-center justify-between reveal opacity-0 translate-y-4 transition-all duration-1000 ease-out">
<div class="flex items-center gap-2 text-white hover:text-neutral-300 transition-colors cursor-pointer">
<iconify-icon icon="solar:radar-linear" width="24"></iconify-icon>
<span class="font-light text-sm tracking-tight">NexusNode</span>
</div>
<nav class="hidden md:flex items-center gap-8 text-sm text-neutral-400 font-extralight">
<a href="#" class="hover:text-white transition-colors">Compute Clusters</a>
<a href="#" class="hover:text-white transition-colors">Observability</a>
<a href="#" class="hover:text-white transition-colors">Throughput</a>
<a href="#" class="hover:text-white transition-colors">Consensus</a>
</nav>
<div class="flex items-center gap-4">
<a href="#" class="hidden md:block text-sm text-neutral-400 font-extralight hover:text-white transition-colors">Sign In</a>
<button class="bg-white text-black px-4 py-2 rounded-full text-sm font-light hover:bg-neutral-200 transition-colors">
Get Started
</button>
</div>
</header>
<!-- Hero Section -->
<section class="flex-grow flex flex-col items-center justify-center text-center px-6 py-24 md:py-32">
<div class="max-w-4xl mx-auto flex flex-col items-center">
<!-- Pill Badge -->
<div class="reveal opacity-0 translate-y-4 transition-all duration-1000 ease-out inline-flex items-center gap-2 px-3 py-1 rounded-full border border-white/10 bg-white/5 backdrop-blur-md mb-8">
<span class="flex h-2 w-2 relative">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-white opacity-75"></span>
<span class="relative inline-flex rounded-full h-2 w-2 bg-white"></span>
</span>
<span class="text-xs font-extralight text-neutral-300 tracking-wide uppercase">Nexus OS v4.2 deployment ready</span>
<iconify-icon icon="solar:alt-arrow-right-linear" width="14" class="text-neutral-500"></iconify-icon>
</div>
<h1 class="mask-container text-5xl md:text-7xl lg:text-8xl font-light tracking-tight text-white leading-[1.1]">
<span class="overflow-hidden inline-block align-bottom pb-2"><span class="mask-word inline-block opacity-0 translate-y-[120%]">Orchestrate</span></span>
<span class="overflow-hidden inline-block align-bottom pb-2"><span class="mask-word inline-block opacity-0 translate-y-[120%]">the</span></span>
<br class="hidden md:block" />
<span class="text-transparent bg-clip-text bg-gradient-to-r from-white to-neutral-600 font-extralight inline-block">
<span class="overflow-hidden inline-block align-bottom pb-2"><span class="mask-word inline-block opacity-0 translate-y-[120%]">neural</span></span>
<span class="overflow-hidden inline-block align-bottom pb-2"><span class="mask-word inline-block opacity-0 translate-y-[120%]">compute</span></span>
<span class="overflow-hidden inline-block align-bottom pb-2"><span class="mask-word inline-block opacity-0 translate-y-[120%]">fabric.</span></span>
</span>
</h1>
<p class="mask-container mt-6 text-lg md:text-xl text-neutral-400 max-w-2xl leading-relaxed font-extralight">
<span class="overflow-hidden inline-block align-bottom pb-1"><span class="mask-word inline-block opacity-0 translate-y-[120%]">Provision</span></span>
<span class="overflow-hidden inline-block align-bottom pb-1"><span class="mask-word inline-block opacity-0 translate-y-[120%]">ultra-low</span></span>
<span class="overflow-hidden inline-block align-bottom pb-1"><span class="mask-word inline-block opacity-0 translate-y-[120%]">latency</span></span>
<span class="overflow-hidden inline-block align-bottom pb-1"><span class="mask-word inline-block opacity-0 translate-y-[120%]">inference</span></span>
<span class="overflow-hidden inline-block align-bottom pb-1"><span class="mask-word inline-block opacity-0 translate-y-[120%]">nodes</span></span>
<span class="overflow-hidden inline-block align-bottom pb-1"><span class="mask-word inline-block opacity-0 translate-y-[120%]">with</span></span>
<span class="overflow-hidden inline-block align-bottom pb-1"><span class="mask-word inline-block opacity-0 translate-y-[120%]">zero</span></span>
<span class="overflow-hidden inline-block align-bottom pb-1"><span class="mask-word inline-block opacity-0 translate-y-[120%]">configuration.</span></span>
<span class="overflow-hidden inline-block align-bottom pb-1"><span class="mask-word inline-block opacity-0 translate-y-[120%]">Enterprise-grade</span></span>
<span class="overflow-hidden inline-block align-bottom pb-1"><span class="mask-word inline-block opacity-0 translate-y-[120%]">AI</span></span>
<span class="overflow-hidden inline-block align-bottom pb-1"><span class="mask-word inline-block opacity-0 translate-y-[120%]">infrastructure</span></span>
<span class="overflow-hidden inline-block align-bottom pb-1"><span class="mask-word inline-block opacity-0 translate-y-[120%]">built</span></span>
<span class="overflow-hidden inline-block align-bottom pb-1"><span class="mask-word inline-block opacity-0 translate-y-[120%]">for</span></span>
<span class="overflow-hidden inline-block align-bottom pb-1"><span class="mask-word inline-block opacity-0 translate-y-[120%]">real-time</span></span>
<span class="overflow-hidden inline-block align-bottom pb-1"><span class="mask-word inline-block opacity-0 translate-y-[120%]">model</span></span>
<span class="overflow-hidden inline-block align-bottom pb-1"><span class="mask-word inline-block opacity-0 translate-y-[120%]">serving.</span></span>
</p>
<div class="reveal opacity-0 translate-y-4 transition-all duration-1000 ease-out delay-300 mt-10 flex flex-col sm:flex-row items-center gap-4 w-full sm:w-auto">
<button class="w-full sm:w-auto flex items-center justify-center gap-2 bg-white text-black px-6 py-3 rounded-full text-sm font-light hover:bg-neutral-200 transition-colors group">
Launch Workspace
<iconify-icon icon="solar:transfer-horizontal-linear" width="18" class="group-hover:translate-x-0.5 transition-transform"></iconify-icon>
</button>
<button class="w-full sm:w-auto flex items-center justify-center gap-2 px-6 py-3 rounded-full text-sm font-light text-white border border-white/20 hover:bg-white/5 transition-colors">
View Documentation
</button>
</div>
</div>
</section>
<!-- Features Matrix with Subtler Gradient Borders -->
<section class="container mx-auto px-6 py-24 pb-32">
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 reveal opacity-0 translate-y-4 transition-all duration-1000 ease-out delay-300">
<!-- Feature Card 1 -->
<div class="group relative rounded-2xl p-[1px] bg-gradient-to-br from-white/20 via-white/5 to-white/10 overflow-hidden shadow-2xl shadow-white/5">
<div class="absolute inset-0 bg-gradient-to-br from-white/10 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-700"></div>
<div class="relative h-full bg-[#050505] rounded-[15px] p-8 flex flex-col gap-4 z-10">
<div class="w-10 h-10 rounded-lg bg-white/5 border border-white/10 flex items-center justify-center text-white mb-2">
<iconify-icon icon="solar:scanner-linear" width="20"></iconify-icon>
</div>
<h3 class="mask-container text-xl font-light tracking-tight text-white">
<span class="overflow-hidden inline-block align-bottom pb-1"><span class="mask-word inline-block opacity-0 translate-y-[120%]">Homomorphic</span></span>
<span class="overflow-hidden inline-block align-bottom pb-1"><span class="mask-word inline-block opacity-0 translate-y-[120%]">Encryption</span></span>
</h3>
<p class="text-sm text-neutral-400 font-extralight leading-relaxed">Cryptographic isolation guaranteeing absolute data privacy during active model inference across edge nodes.</p>
</div>
</div>
<!-- Feature Card 2 -->
<div class="group relative rounded-2xl p-[1px] bg-gradient-to-br from-white/20 via-white/5 to-white/10 overflow-hidden shadow-2xl shadow-white/5">
<div class="absolute inset-0 bg-gradient-to-br from-white/10 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-700"></div>
<div class="relative h-full bg-[#050505] rounded-[15px] p-8 flex flex-col gap-4 z-10">
<div class="w-10 h-10 rounded-lg bg-white/5 border border-white/10 flex items-center justify-center text-white mb-2">
<iconify-icon icon="solar:cpu-bolt-linear" width="20"></iconify-icon>
</div>
<h3 class="mask-container text-xl font-light tracking-tight text-white">
<span class="overflow-hidden inline-block align-bottom pb-1"><span class="mask-word inline-block opacity-0 translate-y-[120%]">Serverless</span></span>
<span class="overflow-hidden inline-block align-bottom pb-1"><span class="mask-word inline-block opacity-0 translate-y-[120%]">GPUs</span></span>
</h3>
<p class="text-sm text-neutral-400 font-extralight leading-relaxed">On-demand distributed compute layers. Elastic scaling powered by decentralized tensor processing units.</p>
</div>
</div>
<!-- Feature Card 3 -->
<div class="group relative rounded-2xl p-[1px] bg-gradient-to-br from-white/20 via-white/5 to-white/10 overflow-hidden shadow-2xl shadow-white/5">
<div class="absolute inset-0 bg-gradient-to-br from-white/10 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-700"></div>
<div class="relative h-full bg-[#050505] rounded-[15px] p-8 flex flex-col gap-4 z-10">
<div class="w-10 h-10 rounded-lg bg-white/5 border border-white/10 flex items-center justify-center text-white mb-2">
<iconify-icon icon="solar:server-square-linear" width="20"></iconify-icon>
</div>
<h3 class="mask-container text-xl font-light tracking-tight text-white">
<span class="overflow-hidden inline-block align-bottom pb-1"><span class="mask-word inline-block opacity-0 translate-y-[120%]">Global</span></span>
<span class="overflow-hidden inline-block align-bottom pb-1"><span class="mask-word inline-block opacity-0 translate-y-[120%]">State</span></span>
<span class="overflow-hidden inline-block align-bottom pb-1"><span class="mask-word inline-block opacity-0 translate-y-[120%]">Sync</span></span>
</h3>
<p class="text-sm text-neutral-400 font-extralight leading-relaxed">Distributed vector database integration. Access and mutate embedding states with sub-millisecond precision.</p>
</div>
</div>
</div>
</section>
</main>
<!-- Interactions & WebGL Implementation -->
<script>
// Native Reveal Animations Trigger
setTimeout(() => {
document.querySelectorAll('.reveal').forEach(el => {
el.classList.remove('opacity-0', 'translate-y-4');
});
}, 100);
// GSAP Masked Reveal Implementation
gsap.registerPlugin(ScrollTrigger);
document.querySelectorAll('.mask-container').forEach(container => {
const words = container.querySelectorAll('.mask-word');
gsap.to(words, {
scrollTrigger: {
trigger: container,
start: "top 95%",
},
y: "0%",
opacity: 1,
duration: 1.1,
stagger: 0.05,
ease: "power4.out",
delay: 0.1
});
});
// WebGL Topography
const canvas = document.getElementById('topo-canvas');
const gl = canvas.getContext('webgl', { alpha: false, antialias: false, depth: false });
if (gl) {
const vsSource = `
attribute vec2 a_position;
void main() { gl_Position = vec4(a_position, 0.0, 1.0); }
`;
const fsSource = `
precision highp float;
uniform vec2 u_resolution;
uniform float u_time;
uniform float u_dpr;
vec3 permute(vec3 x) { return mod(((x*34.0)+1.0)*x, 289.0); }
float snoise(vec2 v){
const vec4 C = vec4(0.211324865405187, 0.366025403784439, -0.577350269189626, 0.024390243902439);
vec2 i = floor(v + dot(v, C.yy) );
vec2 x0 = v - i + dot(i, C.xx);
vec2 i1; i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
vec4 x12 = x0.xyxy + C.xxzz; x12.xy -= i1;
i = mod(i, 289.0);
vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0 )) + i.x + vec3(0.0, i1.x, 1.0 ));
vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy), dot(x12.zw,x12.zw)), 0.0);
m = m*m; m = m*m;
vec3 x = 2.0 * fract(p * C.www) - 1.0;
vec3 h = abs(x) - 0.5; vec3 ox = floor(x + 0.5);
vec3 a0 = x - ox; m *= 1.79284291400159 - 0.85373472095314 * ( a0*a0 + h*h );
vec3 g; g.x = a0.x * x0.x + h.x * x0.y; g.yz = a0.yz * x12.xz + h.yz * x12.yw;
return 130.0 * dot(m, g);
}
void main() {
vec2 st = gl_FragCoord.xy / u_resolution.xy;
st.x *= u_resolution.x / u_resolution.y;
// 1px physical grid rendering
float gridSize = 48.0 * u_dpr;
vec2 gridSt = gl_FragCoord.xy / gridSize;
vec2 gridFract = fract(gridSt);
float lineThickness = 1.0 / gridSize;
float gridLines = step(1.0 - lineThickness, gridFract.x) + step(1.0 - lineThickness, gridFract.y);
gridLines = clamp(gridLines, 0.0, 1.0) * 0.12;
// Ultra-thin Topographic Lines
float noiseScale = 1.4;
vec2 noisePos = st * noiseScale + vec2(u_time * 0.015, u_time * 0.025);
float n = snoise(noisePos) * 0.5 + 0.5;
float numBands = 10.0;
float bandVal = n * numBands;
float triangleWave = abs(fract(bandVal) - 0.5) * 2.0;
// Thinner smoothstep constraint for fine industrial aesthetic
float topoLines = smoothstep(0.02, 0.00, triangleWave) * 0.45;
vec3 color = vec3(0.0);
color += vec3(1.0) * gridLines;
color += vec3(1.0) * topoLines;
gl_FragColor = vec4(color, 1.0);
}
`;
function createShader(gl, type, source) {
const shader = gl.createShader(type);
gl.shaderSource(shader, source);
gl.compileShader(shader);
return shader;
}
const vertexShader = createShader(gl, gl.VERTEX_SHADER, vsSource);
const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fsSource);
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, -1, 1, -1, -1, 1, 1, 1]), gl.STATIC_DRAW);
const positionLocation = gl.getAttribLocation(program, "a_position");
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");
const dprLocation = gl.getUniformLocation(program, "u_dpr");
function resizeCanvas() {
const dpr = window.devicePixelRatio || 1;
canvas.width = window.innerWidth * dpr;
canvas.height = window.innerHeight * dpr;
gl.viewport(0, 0, canvas.width, canvas.height);
gl.uniform2f(resolutionLocation, canvas.width, canvas.height);
gl.uniform1f(dprLocation, dpr);
}
window.addEventListener('resize', resizeCanvas);
resizeCanvas();
let startTime = performance.now();
function render(time) {
gl.uniform1f(timeLocation, (time - startTime) * 0.001);
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
requestAnimationFrame(render);
}
requestAnimationFrame(render);
}
</script>
</body>
</html>
[/hidecontent]