408 lines
13 KiB
TypeScript
408 lines
13 KiB
TypeScript
'use client'
|
|
|
|
import { useEffect, useRef } from 'react'
|
|
|
|
/* ─── Animated data stream (Track 1) ─── */
|
|
/* Compact flowing waveform + particles, self-contained */
|
|
|
|
export function StreamViz() {
|
|
const canvasRef = useRef<HTMLCanvasElement>(null)
|
|
|
|
useEffect(() => {
|
|
const canvas = canvasRef.current
|
|
if (!canvas) return
|
|
const ctx = canvas.getContext('2d')
|
|
if (!ctx) return
|
|
|
|
const dpr = window.devicePixelRatio || 1
|
|
let w = 0, h = 0
|
|
|
|
const resize = () => {
|
|
const rect = canvas.getBoundingClientRect()
|
|
w = rect.width
|
|
h = rect.height
|
|
canvas.width = w * dpr
|
|
canvas.height = h * dpr
|
|
ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
|
|
}
|
|
resize()
|
|
|
|
const particles: { x: number; y: number; vy: number; size: number; alpha: number }[] = []
|
|
for (let i = 0; i < 30; i++) {
|
|
particles.push({
|
|
x: Math.random() * 250,
|
|
y: Math.random() * 300,
|
|
vy: -0.2 - Math.random() * 0.5,
|
|
size: 1 + Math.random() * 2,
|
|
alpha: 0.15 + Math.random() * 0.35,
|
|
})
|
|
}
|
|
|
|
let t = 0
|
|
let animId: number
|
|
|
|
const draw = () => {
|
|
ctx.clearRect(0, 0, w, h)
|
|
t += 0.02
|
|
|
|
// Flowing wave lines
|
|
for (let line = 0; line < 4; line++) {
|
|
ctx.beginPath()
|
|
const baseY = h * 0.25 + line * (h * 0.15)
|
|
for (let x = 0; x <= w; x += 2) {
|
|
const y = baseY + Math.sin(x * 0.03 + t + line * 1.5) * 12 + Math.sin(x * 0.015 + t * 0.7) * 8
|
|
if (x === 0) ctx.moveTo(x, y)
|
|
else ctx.lineTo(x, y)
|
|
}
|
|
ctx.strokeStyle = `rgba(217, 94, 42, ${0.06 + line * 0.03})`
|
|
ctx.lineWidth = 1
|
|
ctx.stroke()
|
|
}
|
|
|
|
// Particles
|
|
particles.forEach((p) => {
|
|
ctx.beginPath()
|
|
ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2)
|
|
ctx.fillStyle = `rgba(217, 94, 42, ${p.alpha})`
|
|
ctx.fill()
|
|
|
|
p.y += p.vy
|
|
if (p.y < -5) { p.y = h + 5; p.x = Math.random() * w }
|
|
})
|
|
|
|
// Connections between close particles
|
|
for (let i = 0; i < particles.length; i++) {
|
|
for (let j = i + 1; j < particles.length; j++) {
|
|
const dx = particles[i].x - particles[j].x
|
|
const dy = particles[i].y - particles[j].y
|
|
const dist = Math.sqrt(dx * dx + dy * dy)
|
|
if (dist < 60) {
|
|
ctx.beginPath()
|
|
ctx.moveTo(particles[i].x, particles[i].y)
|
|
ctx.lineTo(particles[j].x, particles[j].y)
|
|
ctx.strokeStyle = `rgba(217, 94, 42, ${0.06 * (1 - dist / 60)})`
|
|
ctx.lineWidth = 0.5
|
|
ctx.stroke()
|
|
}
|
|
}
|
|
}
|
|
|
|
animId = requestAnimationFrame(draw)
|
|
}
|
|
draw()
|
|
|
|
window.addEventListener('resize', resize)
|
|
return () => { cancelAnimationFrame(animId); window.removeEventListener('resize', resize) }
|
|
}, [])
|
|
|
|
return <canvas ref={canvasRef} className="absolute inset-0 w-full h-full" style={{ display: 'block' }} />
|
|
}
|
|
|
|
/* ─── Pulsing lock with rings (Track 2) ─── */
|
|
|
|
export function SecureViz() {
|
|
return (
|
|
<div className="absolute inset-0 flex items-center justify-center">
|
|
{/* Pulsing rings */}
|
|
<div className="absolute w-20 h-20 rounded-full border border-emerald-500/15 animate-ping [animation-duration:3s]" />
|
|
<div className="absolute w-32 h-32 rounded-full border border-emerald-500/8 animate-ping [animation-duration:4s] [animation-delay:0.5s]" />
|
|
<div className="absolute w-44 h-44 rounded-full border border-emerald-500/[0.04] animate-ping [animation-duration:5s] [animation-delay:1s]" />
|
|
|
|
{/* Rotating orbit */}
|
|
<svg className="absolute w-28 h-28 animate-[spin_15s_linear_infinite]" viewBox="0 0 100 100" fill="none">
|
|
<circle cx="50" cy="50" r="45" stroke="rgba(16,185,129,0.12)" strokeWidth="0.8" strokeDasharray="4 6" />
|
|
</svg>
|
|
<svg className="absolute w-40 h-40 animate-[spin_25s_linear_infinite_reverse]" viewBox="0 0 100 100" fill="none">
|
|
<circle cx="50" cy="50" r="45" stroke="rgba(16,185,129,0.07)" strokeWidth="0.5" strokeDasharray="2 8" />
|
|
</svg>
|
|
|
|
{/* Orbiting dots */}
|
|
<div className="absolute w-24 h-24 animate-[spin_6s_linear_infinite]">
|
|
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-1.5 h-1.5 rounded-full bg-emerald-400/50" />
|
|
</div>
|
|
<div className="absolute w-36 h-36 animate-[spin_10s_linear_infinite_reverse]">
|
|
<div className="absolute bottom-0 left-1/2 -translate-x-1/2 w-1 h-1 rounded-full bg-emerald-400/30" />
|
|
</div>
|
|
|
|
{/* Center lock */}
|
|
<div className="relative z-10 w-14 h-14 rounded-xl bg-emerald-500/10 border border-emerald-500/20 flex items-center justify-center">
|
|
<svg className="w-6 h-6 text-emerald-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
|
|
<rect width="18" height="11" x="3" y="11" rx="2" ry="2" />
|
|
<path d="M7 11V7a5 5 0 0 1 10 0v4" />
|
|
<circle cx="12" cy="16" r="1" fill="currentColor" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
/* ─── Radar sweep (Track 3 — Derail Detection) ─── */
|
|
|
|
export function RadarViz() {
|
|
const canvasRef = useRef<HTMLCanvasElement>(null)
|
|
|
|
useEffect(() => {
|
|
const canvas = canvasRef.current
|
|
if (!canvas) return
|
|
const ctx = canvas.getContext('2d')
|
|
if (!ctx) return
|
|
|
|
const dpr = window.devicePixelRatio || 1
|
|
let w = 0, h = 0
|
|
|
|
const resize = () => {
|
|
const rect = canvas.getBoundingClientRect()
|
|
w = rect.width
|
|
h = rect.height
|
|
canvas.width = w * dpr
|
|
canvas.height = h * dpr
|
|
ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
|
|
}
|
|
resize()
|
|
|
|
let t = 0
|
|
let animId: number
|
|
|
|
const blips = Array.from({ length: 6 }, () => ({
|
|
angle: Math.random() * Math.PI * 2,
|
|
dist: 0.3 + Math.random() * 0.55,
|
|
flash: 0,
|
|
}))
|
|
|
|
const draw = () => {
|
|
ctx.clearRect(0, 0, w, h)
|
|
t += 0.012
|
|
|
|
const cx = w / 2, cy = h / 2
|
|
const maxR = Math.min(w, h) * 0.42
|
|
|
|
// Concentric rings
|
|
for (let i = 1; i <= 3; i++) {
|
|
ctx.beginPath()
|
|
ctx.arc(cx, cy, maxR * (i / 3), 0, Math.PI * 2)
|
|
ctx.strokeStyle = `rgba(245, 158, 11, ${0.06 + i * 0.02})`
|
|
ctx.lineWidth = 0.5
|
|
ctx.stroke()
|
|
}
|
|
|
|
// Cross lines
|
|
ctx.strokeStyle = 'rgba(245, 158, 11, 0.06)'
|
|
ctx.lineWidth = 0.5
|
|
ctx.beginPath(); ctx.moveTo(cx - maxR, cy); ctx.lineTo(cx + maxR, cy); ctx.stroke()
|
|
ctx.beginPath(); ctx.moveTo(cx, cy - maxR); ctx.lineTo(cx, cy + maxR); ctx.stroke()
|
|
|
|
// Sweep line
|
|
const sweepAngle = t * 1.5
|
|
const sx = cx + Math.cos(sweepAngle) * maxR
|
|
const sy = cy + Math.sin(sweepAngle) * maxR
|
|
ctx.beginPath()
|
|
ctx.moveTo(cx, cy)
|
|
ctx.lineTo(sx, sy)
|
|
ctx.strokeStyle = 'rgba(245, 158, 11, 0.3)'
|
|
ctx.lineWidth = 1
|
|
ctx.stroke()
|
|
|
|
// Sweep trail (fading arc segments)
|
|
const trailLength = 0.6
|
|
const segments = 12
|
|
for (let s = 0; s < segments; s++) {
|
|
const frac = s / segments
|
|
const a0 = sweepAngle - trailLength * (1 - frac)
|
|
const a1 = sweepAngle - trailLength * (1 - (s + 1) / segments)
|
|
ctx.beginPath()
|
|
ctx.moveTo(cx, cy)
|
|
ctx.arc(cx, cy, maxR, a0, a1)
|
|
ctx.closePath()
|
|
ctx.fillStyle = `rgba(245, 158, 11, ${frac * 0.08})`
|
|
ctx.fill()
|
|
}
|
|
|
|
// Blips
|
|
blips.forEach((b) => {
|
|
const angleDiff = ((sweepAngle % (Math.PI * 2)) - b.angle + Math.PI * 4) % (Math.PI * 2)
|
|
if (angleDiff < 0.15) b.flash = 1
|
|
b.flash *= 0.96
|
|
if (b.flash > 0.01) {
|
|
const bx = cx + Math.cos(b.angle) * maxR * b.dist
|
|
const by = cy + Math.sin(b.angle) * maxR * b.dist
|
|
ctx.beginPath()
|
|
ctx.arc(bx, by, 2 + b.flash * 2, 0, Math.PI * 2)
|
|
ctx.fillStyle = `rgba(245, 158, 11, ${b.flash * 0.6})`
|
|
ctx.fill()
|
|
}
|
|
})
|
|
|
|
// Center dot
|
|
ctx.beginPath()
|
|
ctx.arc(cx, cy, 2.5, 0, Math.PI * 2)
|
|
ctx.fillStyle = 'rgba(245, 158, 11, 0.5)'
|
|
ctx.fill()
|
|
|
|
animId = requestAnimationFrame(draw)
|
|
}
|
|
draw()
|
|
|
|
window.addEventListener('resize', resize)
|
|
return () => { cancelAnimationFrame(animId); window.removeEventListener('resize', resize) }
|
|
}, [])
|
|
|
|
return <canvas ref={canvasRef} className="absolute inset-0 w-full h-full" style={{ display: 'block' }} />
|
|
}
|
|
|
|
/* ─── Scanning grid (Track 4 — Malicious Request Detection) ─── */
|
|
|
|
export function ScanViz() {
|
|
const canvasRef = useRef<HTMLCanvasElement>(null)
|
|
|
|
useEffect(() => {
|
|
const canvas = canvasRef.current
|
|
if (!canvas) return
|
|
const ctx = canvas.getContext('2d')
|
|
if (!ctx) return
|
|
|
|
const dpr = window.devicePixelRatio || 1
|
|
let w = 0, h = 0
|
|
|
|
const resize = () => {
|
|
const rect = canvas.getBoundingClientRect()
|
|
w = rect.width
|
|
h = rect.height
|
|
canvas.width = w * dpr
|
|
canvas.height = h * dpr
|
|
ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
|
|
}
|
|
resize()
|
|
|
|
let t = 0
|
|
let animId: number
|
|
|
|
const cells = Array.from({ length: 40 }, () => ({
|
|
col: Math.floor(Math.random() * 8),
|
|
row: Math.floor(Math.random() * 10),
|
|
threat: Math.random() < 0.25,
|
|
flash: 0,
|
|
}))
|
|
|
|
const draw = () => {
|
|
ctx.clearRect(0, 0, w, h)
|
|
t += 0.015
|
|
|
|
const cellW = w / 8, cellH = h / 10
|
|
|
|
// Grid lines
|
|
for (let i = 0; i <= 8; i++) {
|
|
ctx.beginPath()
|
|
ctx.moveTo(i * cellW, 0); ctx.lineTo(i * cellW, h)
|
|
ctx.strokeStyle = 'rgba(6, 182, 212, 0.06)'
|
|
ctx.lineWidth = 0.5
|
|
ctx.stroke()
|
|
}
|
|
for (let i = 0; i <= 10; i++) {
|
|
ctx.beginPath()
|
|
ctx.moveTo(0, i * cellH); ctx.lineTo(w, i * cellH)
|
|
ctx.strokeStyle = 'rgba(6, 182, 212, 0.06)'
|
|
ctx.lineWidth = 0.5
|
|
ctx.stroke()
|
|
}
|
|
|
|
// Scan line (horizontal, sweeping down)
|
|
const scanY = (t * 0.5 % 1) * h
|
|
ctx.beginPath()
|
|
ctx.moveTo(0, scanY); ctx.lineTo(w, scanY)
|
|
ctx.strokeStyle = 'rgba(6, 182, 212, 0.4)'
|
|
ctx.lineWidth = 1.5
|
|
ctx.stroke()
|
|
|
|
// Scan line glow
|
|
const scanGrad = ctx.createLinearGradient(0, scanY - 30, 0, scanY)
|
|
scanGrad.addColorStop(0, 'rgba(6, 182, 212, 0)')
|
|
scanGrad.addColorStop(1, 'rgba(6, 182, 212, 0.06)')
|
|
ctx.fillStyle = scanGrad
|
|
ctx.fillRect(0, scanY - 30, w, 30)
|
|
|
|
// Cells
|
|
cells.forEach((c) => {
|
|
const cellY = c.row * cellH + cellH / 2
|
|
if (Math.abs(scanY - cellY) < cellH * 0.7) c.flash = 1
|
|
c.flash *= 0.97
|
|
|
|
if (c.flash > 0.01) {
|
|
const x = c.col * cellW + cellW * 0.15
|
|
const y = c.row * cellH + cellH * 0.15
|
|
const cw = cellW * 0.7, ch = cellH * 0.7
|
|
ctx.fillStyle = c.threat
|
|
? `rgba(239, 68, 68, ${c.flash * 0.15})`
|
|
: `rgba(6, 182, 212, ${c.flash * 0.08})`
|
|
ctx.fillRect(x, y, cw, ch)
|
|
|
|
if (c.threat && c.flash > 0.3) {
|
|
ctx.strokeStyle = `rgba(239, 68, 68, ${c.flash * 0.3})`
|
|
ctx.lineWidth = 0.8
|
|
ctx.strokeRect(x, y, cw, ch)
|
|
}
|
|
}
|
|
})
|
|
|
|
animId = requestAnimationFrame(draw)
|
|
}
|
|
draw()
|
|
|
|
window.addEventListener('resize', resize)
|
|
return () => { cancelAnimationFrame(animId); window.removeEventListener('resize', resize) }
|
|
}, [])
|
|
|
|
return <canvas ref={canvasRef} className="absolute inset-0 w-full h-full" style={{ display: 'block' }} />
|
|
}
|
|
|
|
/* ─── Floating code snippets (Track 5 — Response Rewriting) ─── */
|
|
|
|
export function ExtendViz() {
|
|
const snippets = [
|
|
{ x: '10%', y: '12%', text: 'fn extend()', delay: '0s' },
|
|
{ x: '45%', y: '8%', text: '<Plugin />', delay: '0.8s' },
|
|
{ x: '20%', y: '45%', text: '.hook()', delay: '1.2s' },
|
|
{ x: '55%', y: '42%', text: 'export', delay: '0.4s' },
|
|
{ x: '15%', y: '75%', text: 'pipe()', delay: '1.6s' },
|
|
{ x: '50%', y: '78%', text: 'import', delay: '0.6s' },
|
|
]
|
|
|
|
return (
|
|
<div className="absolute inset-0 flex items-center justify-center">
|
|
{/* Radiating lines */}
|
|
<svg className="absolute inset-0 w-full h-full opacity-40" viewBox="0 0 200 200" preserveAspectRatio="xMidYMid meet">
|
|
{[0, 45, 90, 135, 180, 225, 270, 315].map((angle) => {
|
|
const rad = (angle * Math.PI) / 180
|
|
return (
|
|
<line
|
|
key={angle}
|
|
x1="100" y1="100"
|
|
x2={100 + Math.cos(rad) * 90} y2={100 + Math.sin(rad) * 90}
|
|
stroke="rgba(139, 92, 246, 0.08)"
|
|
strokeWidth="0.5"
|
|
strokeDasharray="2 4"
|
|
/>
|
|
)
|
|
})}
|
|
</svg>
|
|
|
|
{/* Floating snippets */}
|
|
{snippets.map((s, i) => (
|
|
<div
|
|
key={i}
|
|
className="absolute font-mono text-[9px] px-1.5 py-1 rounded bg-violet-500/8 border border-violet-500/15 text-violet-300/40 animate-pulse whitespace-nowrap"
|
|
style={{ left: s.x, top: s.y, animationDelay: s.delay, animationDuration: '3s' }}
|
|
>
|
|
{s.text}
|
|
</div>
|
|
))}
|
|
|
|
{/* Center node */}
|
|
<div className="relative z-10 w-14 h-14 rounded-xl bg-violet-500/10 border border-violet-500/20 flex items-center justify-center">
|
|
<svg className="w-6 h-6 text-violet-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
|
|
<polyline points="16 18 22 12 16 6" /><polyline points="8 6 2 12 8 18" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|