6+ years on designing data-heavy Enterprise and AI products. I translate complexity into user-facing clarity.

// compiled preview • scanner demo /* generated for visual effect 
– not executed */ const SCAN_WIDTH = 8; const FADE_ZONE = 35; cons
t MAX_PARTICLES = 2500; const TRANSITION = 0.05; function clamp(n,
 a, b) { return Math.max(a, Math.min(b, n)); } function lerp(a, b,
 t) { return a + (b - a) * t; } const now = () => performance.now(
); function rng(min, max) { return Math.random() * (max - min) + m
in; } class Particle { constructor(x, y, vx, vy, r, a) { this.x = 
x; this.y = y; this.vx = vx; this.vy = vy; this.r = r; this.a = a;
 } step(dt) { this.x += this.vx * dt; this.y += this.vy * dt; } } 
const scanner = { x: Math.floor(window.innerWidth / 2), width: SCA
N_WIDTH, glow: 3.5, }; function drawParticle(ctx, p) { ctx.globalA
lpha = clamp(p.a, 0, 1); ctx.drawImage(gradient, p.x - p.r, p.y - 
p.r, p.r * 2, p.r * 2); } function tick(t) { const dt = 0.016; } c
onst state = { intensity: 1.2, particles: MAX_PARTICLES }; const b
ounds = { w: window.innerWidth, h: 300 }; const gradient = documen
t.createElement('canvas'); const ctx = gradient.getContext('2d'); 
ctx.globalCompositeOperation = 'lighter'; const state = { intensit
y: 1.2, particles: MAX_PARTICLES }; const bounds = { w: window.inn
erWidth, h: 300 }; const gradient = document.createElement('canvas

// compiled preview • scanner demo /* generated for visual effect 
– not executed */ const SCAN_WIDTH = 8; const FADE_ZONE = 35; cons
t MAX_PARTICLES = 2500; const TRANSITION = 0.05; function clamp(n,
 a, b) { return Math.max(a, Math.min(b, n)); } function lerp(a, b,
 t) { return a + (b - a) * t; } const now = () => performance.now(
); function rng(min, max) { return Math.random() * (max - min) + m
in; } class Particle { constructor(x, y, vx, vy, r, a) { this.x = 
x; this.y = y; this.vx = vx; this.vy = vy; this.r = r; this.a = a;
 } step(dt) { this.x += this.vx * dt; this.y += this.vy * dt; } } 
const scanner = { x: Math.floor(window.innerWidth / 2), width: SCA
N_WIDTH, glow: 3.5, }; function drawParticle(ctx, p) { ctx.globalA
lpha = clamp(p.a, 0, 1); ctx.drawImage(gradient, p.x - p.r, p.y - 
p.r, p.r * 2, p.r * 2); } function tick(t) { const dt = 0.016; } c
onst state = { intensity: 1.2, particles: MAX_PARTICLES }; const b
ounds = { w: window.innerWidth, h: 300 }; const gradient = documen
t.createElement('canvas'); const ctx = gradient.getContext('2d'); 
ctx.globalCompositeOperation = 'lighter'; const state = { intensit
y: 1.2, particles: MAX_PARTICLES }; const bounds = { w: window.inn
erWidth, h: 300 }; const gradient = document.createElement('canvas

// compiled preview • scanner demo /* generated for visual effect 
– not executed */ const SCAN_WIDTH = 8; const FADE_ZONE = 35; cons
t MAX_PARTICLES = 2500; const TRANSITION = 0.05; function clamp(n,
 a, b) { return Math.max(a, Math.min(b, n)); } function lerp(a, b,
 t) { return a + (b - a) * t; } const now = () => performance.now(
); function rng(min, max) { return Math.random() * (max - min) + m
in; } class Particle { constructor(x, y, vx, vy, r, a) { this.x = 
x; this.y = y; this.vx = vx; this.vy = vy; this.r = r; this.a = a;
 } step(dt) { this.x += this.vx * dt; this.y += this.vy * dt; } } 
const scanner = { x: Math.floor(window.innerWidth / 2), width: SCA
N_WIDTH, glow: 3.5, }; function drawParticle(ctx, p) { ctx.globalA
lpha = clamp(p.a, 0, 1); ctx.drawImage(gradient, p.x - p.r, p.y - 
p.r, p.r * 2, p.r * 2); } function tick(t) { const dt = 0.016; } c
onst state = { intensity: 1.2, particles: MAX_PARTICLES }; const b
ounds = { w: window.innerWidth, h: 300 }; const gradient = documen
t.createElement('canvas'); const ctx = gradient.getContext('2d'); 
ctx.globalCompositeOperation = 'lighter'; const state = { intensit
y: 1.2, particles: MAX_PARTICLES }; const bounds = { w: window.inn
erWidth, h: 300 }; const gradient = document.createElement('canvas

// compiled preview • scanner demo /* generated for visual effect 
– not executed */ const SCAN_WIDTH = 8; const FADE_ZONE = 35; cons
t MAX_PARTICLES = 2500; const TRANSITION = 0.05; function clamp(n,
 a, b) { return Math.max(a, Math.min(b, n)); } function lerp(a, b,
 t) { return a + (b - a) * t; } const now = () => performance.now(
); function rng(min, max) { return Math.random() * (max - min) + m
in; } class Particle { constructor(x, y, vx, vy, r, a) { this.x = 
x; this.y = y; this.vx = vx; this.vy = vy; this.r = r; this.a = a;
 } step(dt) { this.x += this.vx * dt; this.y += this.vy * dt; } } 
const scanner = { x: Math.floor(window.innerWidth / 2), width: SCA
N_WIDTH, glow: 3.5, }; function drawParticle(ctx, p) { ctx.globalA
lpha = clamp(p.a, 0, 1); ctx.drawImage(gradient, p.x - p.r, p.y - 
p.r, p.r * 2, p.r * 2); } function tick(t) { const dt = 0.016; } c
onst state = { intensity: 1.2, particles: MAX_PARTICLES }; const b
ounds = { w: window.innerWidth, h: 300 }; const gradient = documen
t.createElement('canvas'); const ctx = gradient.getContext('2d'); 
ctx.globalCompositeOperation = 'lighter'; const state = { intensit
y: 1.2, particles: MAX_PARTICLES }; const bounds = { w: window.inn
erWidth, h: 300 }; const gradient = document.createElement('canvas

// compiled preview • scanner demo /* generated for visual effect 
– not executed */ const SCAN_WIDTH = 8; const FADE_ZONE = 35; cons
t MAX_PARTICLES = 2500; const TRANSITION = 0.05; function clamp(n,
 a, b) { return Math.max(a, Math.min(b, n)); } function lerp(a, b,
 t) { return a + (b - a) * t; } const now = () => performance.now(
); function rng(min, max) { return Math.random() * (max - min) + m
in; } class Particle { constructor(x, y, vx, vy, r, a) { this.x = 
x; this.y = y; this.vx = vx; this.vy = vy; this.r = r; this.a = a;
 } step(dt) { this.x += this.vx * dt; this.y += this.vy * dt; } } 
const scanner = { x: Math.floor(window.innerWidth / 2), width: SCA
N_WIDTH, glow: 3.5, }; function drawParticle(ctx, p) { ctx.globalA
lpha = clamp(p.a, 0, 1); ctx.drawImage(gradient, p.x - p.r, p.y - 
p.r, p.r * 2, p.r * 2); } function tick(t) { const dt = 0.016; } c
onst state = { intensity: 1.2, particles: MAX_PARTICLES }; const b
ounds = { w: window.innerWidth, h: 300 }; const gradient = documen
t.createElement('canvas'); const ctx = gradient.getContext('2d'); 
ctx.globalCompositeOperation = 'lighter'; const state = { intensit
y: 1.2, particles: MAX_PARTICLES }; const bounds = { w: window.inn
erWidth, h: 300 }; const gradient = document.createElement('canvas

// compiled preview • scanner demo /* generated for visual effect 
– not executed */ const SCAN_WIDTH = 8; const FADE_ZONE = 35; cons
t MAX_PARTICLES = 2500; const TRANSITION = 0.05; function clamp(n,
 a, b) { return Math.max(a, Math.min(b, n)); } function lerp(a, b,
 t) { return a + (b - a) * t; } const now = () => performance.now(
); function rng(min, max) { return Math.random() * (max - min) + m
in; } class Particle { constructor(x, y, vx, vy, r, a) { this.x = 
x; this.y = y; this.vx = vx; this.vy = vy; this.r = r; this.a = a;
 } step(dt) { this.x += this.vx * dt; this.y += this.vy * dt; } } 
const scanner = { x: Math.floor(window.innerWidth / 2), width: SCA
N_WIDTH, glow: 3.5, }; function drawParticle(ctx, p) { ctx.globalA
lpha = clamp(p.a, 0, 1); ctx.drawImage(gradient, p.x - p.r, p.y - 
p.r, p.r * 2, p.r * 2); } function tick(t) { const dt = 0.016; } c
onst state = { intensity: 1.2, particles: MAX_PARTICLES }; const b
ounds = { w: window.innerWidth, h: 300 }; const gradient = documen
t.createElement('canvas'); const ctx = gradient.getContext('2d'); 
ctx.globalCompositeOperation = 'lighter'; const state = { intensit
y: 1.2, particles: MAX_PARTICLES }; const bounds = { w: window.inn
erWidth, h: 300 }; const gradient = document.createElement('canvas

// compiled preview • scanner demo /* generated for visual effect 
– not executed */ const SCAN_WIDTH = 8; const FADE_ZONE = 35; cons
t MAX_PARTICLES = 2500; const TRANSITION = 0.05; function clamp(n,
 a, b) { return Math.max(a, Math.min(b, n)); } function lerp(a, b,
 t) { return a + (b - a) * t; } const now = () => performance.now(
); function rng(min, max) { return Math.random() * (max - min) + m
in; } class Particle { constructor(x, y, vx, vy, r, a) { this.x = 
x; this.y = y; this.vx = vx; this.vy = vy; this.r = r; this.a = a;
 } step(dt) { this.x += this.vx * dt; this.y += this.vy * dt; } } 
const scanner = { x: Math.floor(window.innerWidth / 2), width: SCA
N_WIDTH, glow: 3.5, }; function drawParticle(ctx, p) { ctx.globalA
lpha = clamp(p.a, 0, 1); ctx.drawImage(gradient, p.x - p.r, p.y - 
p.r, p.r * 2, p.r * 2); } function tick(t) { const dt = 0.016; } c
onst state = { intensity: 1.2, particles: MAX_PARTICLES }; const b
ounds = { w: window.innerWidth, h: 300 }; const gradient = documen
t.createElement('canvas'); const ctx = gradient.getContext('2d'); 
ctx.globalCompositeOperation = 'lighter'; const state = { intensit
y: 1.2, particles: MAX_PARTICLES }; const bounds = { w: window.inn
erWidth, h: 300 }; const gradient = document.createElement('canvas

// compiled preview • scanner demo /* generated for visual effect 
– not executed */ const SCAN_WIDTH = 8; const FADE_ZONE = 35; cons
t MAX_PARTICLES = 2500; const TRANSITION = 0.05; function clamp(n,
 a, b) { return Math.max(a, Math.min(b, n)); } function lerp(a, b,
 t) { return a + (b - a) * t; } const now = () => performance.now(
); function rng(min, max) { return Math.random() * (max - min) + m
in; } class Particle { constructor(x, y, vx, vy, r, a) { this.x = 
x; this.y = y; this.vx = vx; this.vy = vy; this.r = r; this.a = a;
 } step(dt) { this.x += this.vx * dt; this.y += this.vy * dt; } } 
const scanner = { x: Math.floor(window.innerWidth / 2), width: SCA
N_WIDTH, glow: 3.5, }; function drawParticle(ctx, p) { ctx.globalA
lpha = clamp(p.a, 0, 1); ctx.drawImage(gradient, p.x - p.r, p.y - 
p.r, p.r * 2, p.r * 2); } function tick(t) { const dt = 0.016; } c
onst state = { intensity: 1.2, particles: MAX_PARTICLES }; const b
ounds = { w: window.innerWidth, h: 300 }; const gradient = documen
t.createElement('canvas'); const ctx = gradient.getContext('2d'); 
ctx.globalCompositeOperation = 'lighter'; const state = { intensit
y: 1.2, particles: MAX_PARTICLES }; const bounds = { w: window.inn
erWidth, h: 300 }; const gradient = document.createElement('canvas

// compiled preview • scanner demo /* generated for visual effect 
– not executed */ const SCAN_WIDTH = 8; const FADE_ZONE = 35; cons
t MAX_PARTICLES = 2500; const TRANSITION = 0.05; function clamp(n,
 a, b) { return Math.max(a, Math.min(b, n)); } function lerp(a, b,
 t) { return a + (b - a) * t; } const now = () => performance.now(
); function rng(min, max) { return Math.random() * (max - min) + m
in; } class Particle { constructor(x, y, vx, vy, r, a) { this.x = 
x; this.y = y; this.vx = vx; this.vy = vy; this.r = r; this.a = a;
 } step(dt) { this.x += this.vx * dt; this.y += this.vy * dt; } } 
const scanner = { x: Math.floor(window.innerWidth / 2), width: SCA
N_WIDTH, glow: 3.5, }; function drawParticle(ctx, p) { ctx.globalA
lpha = clamp(p.a, 0, 1); ctx.drawImage(gradient, p.x - p.r, p.y - 
p.r, p.r * 2, p.r * 2); } function tick(t) { const dt = 0.016; } c
onst state = { intensity: 1.2, particles: MAX_PARTICLES }; const b
ounds = { w: window.innerWidth, h: 300 }; const gradient = documen
t.createElement('canvas'); const ctx = gradient.getContext('2d'); 
ctx.globalCompositeOperation = 'lighter'; const state = { intensit
y: 1.2, particles: MAX_PARTICLES }; const bounds = { w: window.inn
erWidth, h: 300 }; const gradient = document.createElement('canvas

// compiled preview • scanner demo /* generated for visual effect 
– not executed */ const SCAN_WIDTH = 8; const FADE_ZONE = 35; cons
t MAX_PARTICLES = 2500; const TRANSITION = 0.05; function clamp(n,
 a, b) { return Math.max(a, Math.min(b, n)); } function lerp(a, b,
 t) { return a + (b - a) * t; } const now = () => performance.now(
); function rng(min, max) { return Math.random() * (max - min) + m
in; } class Particle { constructor(x, y, vx, vy, r, a) { this.x = 
x; this.y = y; this.vx = vx; this.vy = vy; this.r = r; this.a = a;
 } step(dt) { this.x += this.vx * dt; this.y += this.vy * dt; } } 
const scanner = { x: Math.floor(window.innerWidth / 2), width: SCA
N_WIDTH, glow: 3.5, }; function drawParticle(ctx, p) { ctx.globalA
lpha = clamp(p.a, 0, 1); ctx.drawImage(gradient, p.x - p.r, p.y - 
p.r, p.r * 2, p.r * 2); } function tick(t) { const dt = 0.016; } c
onst state = { intensity: 1.2, particles: MAX_PARTICLES }; const b
ounds = { w: window.innerWidth, h: 300 }; const gradient = documen
t.createElement('canvas'); const ctx = gradient.getContext('2d'); 
ctx.globalCompositeOperation = 'lighter'; const state = { intensit
y: 1.2, particles: MAX_PARTICLES }; const bounds = { w: window.inn
erWidth, h: 300 }; const gradient = document.createElement('canvas

// compiled preview • scanner demo /* generated for visual effect 
– not executed */ const SCAN_WIDTH = 8; const FADE_ZONE = 35; cons
t MAX_PARTICLES = 2500; const TRANSITION = 0.05; function clamp(n,
 a, b) { return Math.max(a, Math.min(b, n)); } function lerp(a, b,
 t) { return a + (b - a) * t; } const now = () => performance.now(
); function rng(min, max) { return Math.random() * (max - min) + m
in; } class Particle { constructor(x, y, vx, vy, r, a) { this.x = 
x; this.y = y; this.vx = vx; this.vy = vy; this.r = r; this.a = a;
 } step(dt) { this.x += this.vx * dt; this.y += this.vy * dt; } } 
const scanner = { x: Math.floor(window.innerWidth / 2), width: SCA
N_WIDTH, glow: 3.5, }; function drawParticle(ctx, p) { ctx.globalA
lpha = clamp(p.a, 0, 1); ctx.drawImage(gradient, p.x - p.r, p.y - 
p.r, p.r * 2, p.r * 2); } function tick(t) { const dt = 0.016; } c
onst state = { intensity: 1.2, particles: MAX_PARTICLES }; const b
ounds = { w: window.innerWidth, h: 300 }; const gradient = documen
t.createElement('canvas'); const ctx = gradient.getContext('2d'); 
ctx.globalCompositeOperation = 'lighter'; const state = { intensit
y: 1.2, particles: MAX_PARTICLES }; const bounds = { w: window.inn
erWidth, h: 300 }; const gradient = document.createElement('canvas

// compiled preview • scanner demo /* generated for visual effect 
– not executed */ const SCAN_WIDTH = 8; const FADE_ZONE = 35; cons
t MAX_PARTICLES = 2500; const TRANSITION = 0.05; function clamp(n,
 a, b) { return Math.max(a, Math.min(b, n)); } function lerp(a, b,
 t) { return a + (b - a) * t; } const now = () => performance.now(
); function rng(min, max) { return Math.random() * (max - min) + m
in; } class Particle { constructor(x, y, vx, vy, r, a) { this.x = 
x; this.y = y; this.vx = vx; this.vy = vy; this.r = r; this.a = a;
 } step(dt) { this.x += this.vx * dt; this.y += this.vy * dt; } } 
const scanner = { x: Math.floor(window.innerWidth / 2), width: SCA
N_WIDTH, glow: 3.5, }; function drawParticle(ctx, p) { ctx.globalA
lpha = clamp(p.a, 0, 1); ctx.drawImage(gradient, p.x - p.r, p.y - 
p.r, p.r * 2, p.r * 2); } function tick(t) { const dt = 0.016; } c
onst state = { intensity: 1.2, particles: MAX_PARTICLES }; const b
ounds = { w: window.innerWidth, h: 300 }; const gradient = documen
t.createElement('canvas'); const ctx = gradient.getContext('2d'); 
ctx.globalCompositeOperation = 'lighter'; const state = { intensit
y: 1.2, particles: MAX_PARTICLES }; const bounds = { w: window.inn
erWidth, h: 300 }; const gradient = document.createElement('canvas

// compiled preview • scanner demo /* generated for visual effect 
– not executed */ const SCAN_WIDTH = 8; const FADE_ZONE = 35; cons
t MAX_PARTICLES = 2500; const TRANSITION = 0.05; function clamp(n,
 a, b) { return Math.max(a, Math.min(b, n)); } function lerp(a, b,
 t) { return a + (b - a) * t; } const now = () => performance.now(
); function rng(min, max) { return Math.random() * (max - min) + m
in; } class Particle { constructor(x, y, vx, vy, r, a) { this.x = 
x; this.y = y; this.vx = vx; this.vy = vy; this.r = r; this.a = a;
 } step(dt) { this.x += this.vx * dt; this.y += this.vy * dt; } } 
const scanner = { x: Math.floor(window.innerWidth / 2), width: SCA
N_WIDTH, glow: 3.5, }; function drawParticle(ctx, p) { ctx.globalA
lpha = clamp(p.a, 0, 1); ctx.drawImage(gradient, p.x - p.r, p.y - 
p.r, p.r * 2, p.r * 2); } function tick(t) { const dt = 0.016; } c
onst state = { intensity: 1.2, particles: MAX_PARTICLES }; const b
ounds = { w: window.innerWidth, h: 300 }; const gradient = documen
t.createElement('canvas'); const ctx = gradient.getContext('2d'); 
ctx.globalCompositeOperation = 'lighter'; const state = { intensit
y: 1.2, particles: MAX_PARTICLES }; const bounds = { w: window.inn
erWidth, h: 300 }; const gradient = document.createElement('canvas

// compiled preview • scanner demo /* generated for visual effect 
– not executed */ const SCAN_WIDTH = 8; const FADE_ZONE = 35; cons
t MAX_PARTICLES = 2500; const TRANSITION = 0.05; function clamp(n,
 a, b) { return Math.max(a, Math.min(b, n)); } function lerp(a, b,
 t) { return a + (b - a) * t; } const now = () => performance.now(
); function rng(min, max) { return Math.random() * (max - min) + m
in; } class Particle { constructor(x, y, vx, vy, r, a) { this.x = 
x; this.y = y; this.vx = vx; this.vy = vy; this.r = r; this.a = a;
 } step(dt) { this.x += this.vx * dt; this.y += this.vy * dt; } } 
const scanner = { x: Math.floor(window.innerWidth / 2), width: SCA
N_WIDTH, glow: 3.5, }; function drawParticle(ctx, p) { ctx.globalA
lpha = clamp(p.a, 0, 1); ctx.drawImage(gradient, p.x - p.r, p.y - 
p.r, p.r * 2, p.r * 2); } function tick(t) { const dt = 0.016; } c
onst state = { intensity: 1.2, particles: MAX_PARTICLES }; const b
ounds = { w: window.innerWidth, h: 300 }; const gradient = documen
t.createElement('canvas'); const ctx = gradient.getContext('2d'); 
ctx.globalCompositeOperation = 'lighter'; const state = { intensit
y: 1.2, particles: MAX_PARTICLES }; const bounds = { w: window.inn
erWidth, h: 300 }; const gradient = document.createElement('canvas

// compiled preview • scanner demo /* generated for visual effect 
– not executed */ const SCAN_WIDTH = 8; const FADE_ZONE = 35; cons
t MAX_PARTICLES = 2500; const TRANSITION = 0.05; function clamp(n,
 a, b) { return Math.max(a, Math.min(b, n)); } function lerp(a, b,
 t) { return a + (b - a) * t; } const now = () => performance.now(
); function rng(min, max) { return Math.random() * (max - min) + m
in; } class Particle { constructor(x, y, vx, vy, r, a) { this.x = 
x; this.y = y; this.vx = vx; this.vy = vy; this.r = r; this.a = a;
 } step(dt) { this.x += this.vx * dt; this.y += this.vy * dt; } } 
const scanner = { x: Math.floor(window.innerWidth / 2), width: SCA
N_WIDTH, glow: 3.5, }; function drawParticle(ctx, p) { ctx.globalA
lpha = clamp(p.a, 0, 1); ctx.drawImage(gradient, p.x - p.r, p.y - 
p.r, p.r * 2, p.r * 2); } function tick(t) { const dt = 0.016; } c
onst state = { intensity: 1.2, particles: MAX_PARTICLES }; const b
ounds = { w: window.innerWidth, h: 300 }; const gradient = documen
t.createElement('canvas'); const ctx = gradient.getContext('2d'); 
ctx.globalCompositeOperation = 'lighter'; const state = { intensit
y: 1.2, particles: MAX_PARTICLES }; const bounds = { w: window.inn
erWidth, h: 300 }; const gradient = document.createElement('canvas

// compiled preview • scanner demo /* generated for visual effect 
– not executed */ const SCAN_WIDTH = 8; const FADE_ZONE = 35; cons
t MAX_PARTICLES = 2500; const TRANSITION = 0.05; function clamp(n,
 a, b) { return Math.max(a, Math.min(b, n)); } function lerp(a, b,
 t) { return a + (b - a) * t; } const now = () => performance.now(
); function rng(min, max) { return Math.random() * (max - min) + m
in; } class Particle { constructor(x, y, vx, vy, r, a) { this.x = 
x; this.y = y; this.vx = vx; this.vy = vy; this.r = r; this.a = a;
 } step(dt) { this.x += this.vx * dt; this.y += this.vy * dt; } } 
const scanner = { x: Math.floor(window.innerWidth / 2), width: SCA
N_WIDTH, glow: 3.5, }; function drawParticle(ctx, p) { ctx.globalA
lpha = clamp(p.a, 0, 1); ctx.drawImage(gradient, p.x - p.r, p.y - 
p.r, p.r * 2, p.r * 2); } function tick(t) { const dt = 0.016; } c
onst state = { intensity: 1.2, particles: MAX_PARTICLES }; const b
ounds = { w: window.innerWidth, h: 300 }; const gradient = documen
t.createElement('canvas'); const ctx = gradient.getContext('2d'); 
ctx.globalCompositeOperation = 'lighter'; const state = { intensit
y: 1.2, particles: MAX_PARTICLES }; const bounds = { w: window.inn
erWidth, h: 300 }; const gradient = document.createElement('canvas

// compiled preview • scanner demo /* generated for visual effect 
– not executed */ const SCAN_WIDTH = 8; const FADE_ZONE = 35; cons
t MAX_PARTICLES = 2500; const TRANSITION = 0.05; function clamp(n,
 a, b) { return Math.max(a, Math.min(b, n)); } function lerp(a, b,
 t) { return a + (b - a) * t; } const now = () => performance.now(
); function rng(min, max) { return Math.random() * (max - min) + m
in; } class Particle { constructor(x, y, vx, vy, r, a) { this.x = 
x; this.y = y; this.vx = vx; this.vy = vy; this.r = r; this.a = a;
 } step(dt) { this.x += this.vx * dt; this.y += this.vy * dt; } } 
const scanner = { x: Math.floor(window.innerWidth / 2), width: SCA
N_WIDTH, glow: 3.5, }; function drawParticle(ctx, p) { ctx.globalA
lpha = clamp(p.a, 0, 1); ctx.drawImage(gradient, p.x - p.r, p.y - 
p.r, p.r * 2, p.r * 2); } function tick(t) { const dt = 0.016; } c
onst state = { intensity: 1.2, particles: MAX_PARTICLES }; const b
ounds = { w: window.innerWidth, h: 300 }; const gradient = documen
t.createElement('canvas'); const ctx = gradient.getContext('2d'); 
ctx.globalCompositeOperation = 'lighter'; const state = { intensit
y: 1.2, particles: MAX_PARTICLES }; const bounds = { w: window.inn
erWidth, h: 300 }; const gradient = document.createElement('canvas

// compiled preview • scanner demo /* generated for visual effect 
– not executed */ const SCAN_WIDTH = 8; const FADE_ZONE = 35; cons
t MAX_PARTICLES = 2500; const TRANSITION = 0.05; function clamp(n,
 a, b) { return Math.max(a, Math.min(b, n)); } function lerp(a, b,
 t) { return a + (b - a) * t; } const now = () => performance.now(
); function rng(min, max) { return Math.random() * (max - min) + m
in; } class Particle { constructor(x, y, vx, vy, r, a) { this.x = 
x; this.y = y; this.vx = vx; this.vy = vy; this.r = r; this.a = a;
 } step(dt) { this.x += this.vx * dt; this.y += this.vy * dt; } } 
const scanner = { x: Math.floor(window.innerWidth / 2), width: SCA
N_WIDTH, glow: 3.5, }; function drawParticle(ctx, p) { ctx.globalA
lpha = clamp(p.a, 0, 1); ctx.drawImage(gradient, p.x - p.r, p.y - 
p.r, p.r * 2, p.r * 2); } function tick(t) { const dt = 0.016; } c
onst state = { intensity: 1.2, particles: MAX_PARTICLES }; const b
ounds = { w: window.innerWidth, h: 300 }; const gradient = documen
t.createElement('canvas'); const ctx = gradient.getContext('2d'); 
ctx.globalCompositeOperation = 'lighter'; const state = { intensit
y: 1.2, particles: MAX_PARTICLES }; const bounds = { w: window.inn
erWidth, h: 300 }; const gradient = document.createElement('canvas

// compiled preview • scanner demo /* generated for visual effect 
– not executed */ const SCAN_WIDTH = 8; const FADE_ZONE = 35; cons
t MAX_PARTICLES = 2500; const TRANSITION = 0.05; function clamp(n,
 a, b) { return Math.max(a, Math.min(b, n)); } function lerp(a, b,
 t) { return a + (b - a) * t; } const now = () => performance.now(
); function rng(min, max) { return Math.random() * (max - min) + m
in; } class Particle { constructor(x, y, vx, vy, r, a) { this.x = 
x; this.y = y; this.vx = vx; this.vy = vy; this.r = r; this.a = a;
 } step(dt) { this.x += this.vx * dt; this.y += this.vy * dt; } } 
const scanner = { x: Math.floor(window.innerWidth / 2), width: SCA
N_WIDTH, glow: 3.5, }; function drawParticle(ctx, p) { ctx.globalA
lpha = clamp(p.a, 0, 1); ctx.drawImage(gradient, p.x - p.r, p.y - 
p.r, p.r * 2, p.r * 2); } function tick(t) { const dt = 0.016; } c
onst state = { intensity: 1.2, particles: MAX_PARTICLES }; const b
ounds = { w: window.innerWidth, h: 300 }; const gradient = documen
t.createElement('canvas'); const ctx = gradient.getContext('2d'); 
ctx.globalCompositeOperation = 'lighter'; const state = { intensit
y: 1.2, particles: MAX_PARTICLES }; const bounds = { w: window.inn
erWidth, h: 300 }; const gradient = document.createElement('canvas

// compiled preview • scanner demo /* generated for visual effect 
– not executed */ const SCAN_WIDTH = 8; const FADE_ZONE = 35; cons
t MAX_PARTICLES = 2500; const TRANSITION = 0.05; function clamp(n,
 a, b) { return Math.max(a, Math.min(b, n)); } function lerp(a, b,
 t) { return a + (b - a) * t; } const now = () => performance.now(
); function rng(min, max) { return Math.random() * (max - min) + m
in; } class Particle { constructor(x, y, vx, vy, r, a) { this.x = 
x; this.y = y; this.vx = vx; this.vy = vy; this.r = r; this.a = a;
 } step(dt) { this.x += this.vx * dt; this.y += this.vy * dt; } } 
const scanner = { x: Math.floor(window.innerWidth / 2), width: SCA
N_WIDTH, glow: 3.5, }; function drawParticle(ctx, p) { ctx.globalA
lpha = clamp(p.a, 0, 1); ctx.drawImage(gradient, p.x - p.r, p.y - 
p.r, p.r * 2, p.r * 2); } function tick(t) { const dt = 0.016; } c
onst state = { intensity: 1.2, particles: MAX_PARTICLES }; const b
ounds = { w: window.innerWidth, h: 300 }; const gradient = documen
t.createElement('canvas'); const ctx = gradient.getContext('2d'); 
ctx.globalCompositeOperation = 'lighter'; const state = { intensit
y: 1.2, particles: MAX_PARTICLES }; const bounds = { w: window.inn
erWidth, h: 300 }; const gradient = document.createElement('canvas

// compiled preview • scanner demo /* generated for visual effect 
– not executed */ const SCAN_WIDTH = 8; const FADE_ZONE = 35; cons
t MAX_PARTICLES = 2500; const TRANSITION = 0.05; function clamp(n,
 a, b) { return Math.max(a, Math.min(b, n)); } function lerp(a, b,
 t) { return a + (b - a) * t; } const now = () => performance.now(
); function rng(min, max) { return Math.random() * (max - min) + m
in; } class Particle { constructor(x, y, vx, vy, r, a) { this.x = 
x; this.y = y; this.vx = vx; this.vy = vy; this.r = r; this.a = a;
 } step(dt) { this.x += this.vx * dt; this.y += this.vy * dt; } } 
const scanner = { x: Math.floor(window.innerWidth / 2), width: SCA
N_WIDTH, glow: 3.5, }; function drawParticle(ctx, p) { ctx.globalA
lpha = clamp(p.a, 0, 1); ctx.drawImage(gradient, p.x - p.r, p.y - 
p.r, p.r * 2, p.r * 2); } function tick(t) { const dt = 0.016; } c
onst state = { intensity: 1.2, particles: MAX_PARTICLES }; const b
ounds = { w: window.innerWidth, h: 300 }; const gradient = documen
t.createElement('canvas'); const ctx = gradient.getContext('2d'); 
ctx.globalCompositeOperation = 'lighter'; const state = { intensit
y: 1.2, particles: MAX_PARTICLES }; const bounds = { w: window.inn
erWidth, h: 300 }; const gradient = document.createElement('canvas

// compiled preview • scanner demo /* generated for visual effect 
– not executed */ const SCAN_WIDTH = 8; const FADE_ZONE = 35; cons
t MAX_PARTICLES = 2500; const TRANSITION = 0.05; function clamp(n,
 a, b) { return Math.max(a, Math.min(b, n)); } function lerp(a, b,
 t) { return a + (b - a) * t; } const now = () => performance.now(
); function rng(min, max) { return Math.random() * (max - min) + m
in; } class Particle { constructor(x, y, vx, vy, r, a) { this.x = 
x; this.y = y; this.vx = vx; this.vy = vy; this.r = r; this.a = a;
 } step(dt) { this.x += this.vx * dt; this.y += this.vy * dt; } } 
const scanner = { x: Math.floor(window.innerWidth / 2), width: SCA
N_WIDTH, glow: 3.5, }; function drawParticle(ctx, p) { ctx.globalA
lpha = clamp(p.a, 0, 1); ctx.drawImage(gradient, p.x - p.r, p.y - 
p.r, p.r * 2, p.r * 2); } function tick(t) { const dt = 0.016; } c
onst state = { intensity: 1.2, particles: MAX_PARTICLES }; const b
ounds = { w: window.innerWidth, h: 300 }; const gradient = documen
t.createElement('canvas'); const ctx = gradient.getContext('2d'); 
ctx.globalCompositeOperation = 'lighter'; const state = { intensit
y: 1.2, particles: MAX_PARTICLES }; const bounds = { w: window.inn
erWidth, h: 300 }; const gradient = document.createElement('canvas

// compiled preview • scanner demo /* generated for visual effect 
– not executed */ const SCAN_WIDTH = 8; const FADE_ZONE = 35; cons
t MAX_PARTICLES = 2500; const TRANSITION = 0.05; function clamp(n,
 a, b) { return Math.max(a, Math.min(b, n)); } function lerp(a, b,
 t) { return a + (b - a) * t; } const now = () => performance.now(
); function rng(min, max) { return Math.random() * (max - min) + m
in; } class Particle { constructor(x, y, vx, vy, r, a) { this.x = 
x; this.y = y; this.vx = vx; this.vy = vy; this.r = r; this.a = a;
 } step(dt) { this.x += this.vx * dt; this.y += this.vy * dt; } } 
const scanner = { x: Math.floor(window.innerWidth / 2), width: SCA
N_WIDTH, glow: 3.5, }; function drawParticle(ctx, p) { ctx.globalA
lpha = clamp(p.a, 0, 1); ctx.drawImage(gradient, p.x - p.r, p.y - 
p.r, p.r * 2, p.r * 2); } function tick(t) { const dt = 0.016; } c
onst state = { intensity: 1.2, particles: MAX_PARTICLES }; const b
ounds = { w: window.innerWidth, h: 300 }; const gradient = documen
t.createElement('canvas'); const ctx = gradient.getContext('2d'); 
ctx.globalCompositeOperation = 'lighter'; const state = { intensit
y: 1.2, particles: MAX_PARTICLES }; const bounds = { w: window.inn
erWidth, h: 300 }; const gradient = document.createElement('canvas

// compiled preview • scanner demo /* generated for visual effect 
– not executed */ const SCAN_WIDTH = 8; const FADE_ZONE = 35; cons
t MAX_PARTICLES = 2500; const TRANSITION = 0.05; function clamp(n,
 a, b) { return Math.max(a, Math.min(b, n)); } function lerp(a, b,
 t) { return a + (b - a) * t; } const now = () => performance.now(
); function rng(min, max) { return Math.random() * (max - min) + m
in; } class Particle { constructor(x, y, vx, vy, r, a) { this.x = 
x; this.y = y; this.vx = vx; this.vy = vy; this.r = r; this.a = a;
 } step(dt) { this.x += this.vx * dt; this.y += this.vy * dt; } } 
const scanner = { x: Math.floor(window.innerWidth / 2), width: SCA
N_WIDTH, glow: 3.5, }; function drawParticle(ctx, p) { ctx.globalA
lpha = clamp(p.a, 0, 1); ctx.drawImage(gradient, p.x - p.r, p.y - 
p.r, p.r * 2, p.r * 2); } function tick(t) { const dt = 0.016; } c
onst state = { intensity: 1.2, particles: MAX_PARTICLES }; const b
ounds = { w: window.innerWidth, h: 300 }; const gradient = documen
t.createElement('canvas'); const ctx = gradient.getContext('2d'); 
ctx.globalCompositeOperation = 'lighter'; const state = { intensit
y: 1.2, particles: MAX_PARTICLES }; const bounds = { w: window.inn
erWidth, h: 300 }; const gradient = document.createElement('canvas

// compiled preview • scanner demo /* generated for visual effect 
– not executed */ const SCAN_WIDTH = 8; const FADE_ZONE = 35; cons
t MAX_PARTICLES = 2500; const TRANSITION = 0.05; function clamp(n,
 a, b) { return Math.max(a, Math.min(b, n)); } function lerp(a, b,
 t) { return a + (b - a) * t; } const now = () => performance.now(
); function rng(min, max) { return Math.random() * (max - min) + m
in; } class Particle { constructor(x, y, vx, vy, r, a) { this.x = 
x; this.y = y; this.vx = vx; this.vy = vy; this.r = r; this.a = a;
 } step(dt) { this.x += this.vx * dt; this.y += this.vy * dt; } } 
const scanner = { x: Math.floor(window.innerWidth / 2), width: SCA
N_WIDTH, glow: 3.5, }; function drawParticle(ctx, p) { ctx.globalA
lpha = clamp(p.a, 0, 1); ctx.drawImage(gradient, p.x - p.r, p.y - 
p.r, p.r * 2, p.r * 2); } function tick(t) { const dt = 0.016; } c
onst state = { intensity: 1.2, particles: MAX_PARTICLES }; const b
ounds = { w: window.innerWidth, h: 300 }; const gradient = documen
t.createElement('canvas'); const ctx = gradient.getContext('2d'); 
ctx.globalCompositeOperation = 'lighter'; const state = { intensit
y: 1.2, particles: MAX_PARTICLES }; const bounds = { w: window.inn
erWidth, h: 300 }; const gradient = document.createElement('canvas

// compiled preview • scanner demo /* generated for visual effect 
– not executed */ const SCAN_WIDTH = 8; const FADE_ZONE = 35; cons
t MAX_PARTICLES = 2500; const TRANSITION = 0.05; function clamp(n,
 a, b) { return Math.max(a, Math.min(b, n)); } function lerp(a, b,
 t) { return a + (b - a) * t; } const now = () => performance.now(
); function rng(min, max) { return Math.random() * (max - min) + m
in; } class Particle { constructor(x, y, vx, vy, r, a) { this.x = 
x; this.y = y; this.vx = vx; this.vy = vy; this.r = r; this.a = a;
 } step(dt) { this.x += this.vx * dt; this.y += this.vy * dt; } } 
const scanner = { x: Math.floor(window.innerWidth / 2), width: SCA
N_WIDTH, glow: 3.5, }; function drawParticle(ctx, p) { ctx.globalA
lpha = clamp(p.a, 0, 1); ctx.drawImage(gradient, p.x - p.r, p.y - 
p.r, p.r * 2, p.r * 2); } function tick(t) { const dt = 0.016; } c
onst state = { intensity: 1.2, particles: MAX_PARTICLES }; const b
ounds = { w: window.innerWidth, h: 300 }; const gradient = documen
t.createElement('canvas'); const ctx = gradient.getContext('2d'); 
ctx.globalCompositeOperation = 'lighter'; const state = { intensit
y: 1.2, particles: MAX_PARTICLES }; const bounds = { w: window.inn
erWidth, h: 300 }; const gradient = document.createElement('canvas

// compiled preview • scanner demo /* generated for visual effect 
– not executed */ const SCAN_WIDTH = 8; const FADE_ZONE = 35; cons
t MAX_PARTICLES = 2500; const TRANSITION = 0.05; function clamp(n,
 a, b) { return Math.max(a, Math.min(b, n)); } function lerp(a, b,
 t) { return a + (b - a) * t; } const now = () => performance.now(
); function rng(min, max) { return Math.random() * (max - min) + m
in; } class Particle { constructor(x, y, vx, vy, r, a) { this.x = 
x; this.y = y; this.vx = vx; this.vy = vy; this.r = r; this.a = a;
 } step(dt) { this.x += this.vx * dt; this.y += this.vy * dt; } } 
const scanner = { x: Math.floor(window.innerWidth / 2), width: SCA
N_WIDTH, glow: 3.5, }; function drawParticle(ctx, p) { ctx.globalA
lpha = clamp(p.a, 0, 1); ctx.drawImage(gradient, p.x - p.r, p.y - 
p.r, p.r * 2, p.r * 2); } function tick(t) { const dt = 0.016; } c
onst state = { intensity: 1.2, particles: MAX_PARTICLES }; const b
ounds = { w: window.innerWidth, h: 300 }; const gradient = documen
t.createElement('canvas'); const ctx = gradient.getContext('2d'); 
ctx.globalCompositeOperation = 'lighter'; const state = { intensit
y: 1.2, particles: MAX_PARTICLES }; const bounds = { w: window.inn
erWidth, h: 300 }; const gradient = document.createElement('canvas

// compiled preview • scanner demo /* generated for visual effect 
– not executed */ const SCAN_WIDTH = 8; const FADE_ZONE = 35; cons
t MAX_PARTICLES = 2500; const TRANSITION = 0.05; function clamp(n,
 a, b) { return Math.max(a, Math.min(b, n)); } function lerp(a, b,
 t) { return a + (b - a) * t; } const now = () => performance.now(
); function rng(min, max) { return Math.random() * (max - min) + m
in; } class Particle { constructor(x, y, vx, vy, r, a) { this.x = 
x; this.y = y; this.vx = vx; this.vy = vy; this.r = r; this.a = a;
 } step(dt) { this.x += this.vx * dt; this.y += this.vy * dt; } } 
const scanner = { x: Math.floor(window.innerWidth / 2), width: SCA
N_WIDTH, glow: 3.5, }; function drawParticle(ctx, p) { ctx.globalA
lpha = clamp(p.a, 0, 1); ctx.drawImage(gradient, p.x - p.r, p.y - 
p.r, p.r * 2, p.r * 2); } function tick(t) { const dt = 0.016; } c
onst state = { intensity: 1.2, particles: MAX_PARTICLES }; const b
ounds = { w: window.innerWidth, h: 300 }; const gradient = documen
t.createElement('canvas'); const ctx = gradient.getContext('2d'); 
ctx.globalCompositeOperation = 'lighter'; const state = { intensit
y: 1.2, particles: MAX_PARTICLES }; const bounds = { w: window.inn
erWidth, h: 300 }; const gradient = document.createElement('canvas

// compiled preview • scanner demo /* generated for visual effect 
– not executed */ const SCAN_WIDTH = 8; const FADE_ZONE = 35; cons
t MAX_PARTICLES = 2500; const TRANSITION = 0.05; function clamp(n,
 a, b) { return Math.max(a, Math.min(b, n)); } function lerp(a, b,
 t) { return a + (b - a) * t; } const now = () => performance.now(
); function rng(min, max) { return Math.random() * (max - min) + m
in; } class Particle { constructor(x, y, vx, vy, r, a) { this.x = 
x; this.y = y; this.vx = vx; this.vy = vy; this.r = r; this.a = a;
 } step(dt) { this.x += this.vx * dt; this.y += this.vy * dt; } } 
const scanner = { x: Math.floor(window.innerWidth / 2), width: SCA
N_WIDTH, glow: 3.5, }; function drawParticle(ctx, p) { ctx.globalA
lpha = clamp(p.a, 0, 1); ctx.drawImage(gradient, p.x - p.r, p.y - 
p.r, p.r * 2, p.r * 2); } function tick(t) { const dt = 0.016; } c
onst state = { intensity: 1.2, particles: MAX_PARTICLES }; const b
ounds = { w: window.innerWidth, h: 300 }; const gradient = documen
t.createElement('canvas'); const ctx = gradient.getContext('2d'); 
ctx.globalCompositeOperation = 'lighter'; const state = { intensit
y: 1.2, particles: MAX_PARTICLES }; const bounds = { w: window.inn
erWidth, h: 300 }; const gradient = document.createElement('canvas

// compiled preview • scanner demo /* generated for visual effect 
– not executed */ const SCAN_WIDTH = 8; const FADE_ZONE = 35; cons
t MAX_PARTICLES = 2500; const TRANSITION = 0.05; function clamp(n,
 a, b) { return Math.max(a, Math.min(b, n)); } function lerp(a, b,
 t) { return a + (b - a) * t; } const now = () => performance.now(
); function rng(min, max) { return Math.random() * (max - min) + m
in; } class Particle { constructor(x, y, vx, vy, r, a) { this.x = 
x; this.y = y; this.vx = vx; this.vy = vy; this.r = r; this.a = a;
 } step(dt) { this.x += this.vx * dt; this.y += this.vy * dt; } } 
const scanner = { x: Math.floor(window.innerWidth / 2), width: SCA
N_WIDTH, glow: 3.5, }; function drawParticle(ctx, p) { ctx.globalA
lpha = clamp(p.a, 0, 1); ctx.drawImage(gradient, p.x - p.r, p.y - 
p.r, p.r * 2, p.r * 2); } function tick(t) { const dt = 0.016; } c
onst state = { intensity: 1.2, particles: MAX_PARTICLES }; const b
ounds = { w: window.innerWidth, h: 300 }; const gradient = documen
t.createElement('canvas'); const ctx = gradient.getContext('2d'); 
ctx.globalCompositeOperation = 'lighter'; const state = { intensit
y: 1.2, particles: MAX_PARTICLES }; const bounds = { w: window.inn
erWidth, h: 300 }; const gradient = document.createElement('canvas

// compiled preview • scanner demo /* generated for visual effect 
– not executed */ const SCAN_WIDTH = 8; const FADE_ZONE = 35; cons
t MAX_PARTICLES = 2500; const TRANSITION = 0.05; function clamp(n,
 a, b) { return Math.max(a, Math.min(b, n)); } function lerp(a, b,
 t) { return a + (b - a) * t; } const now = () => performance.now(
); function rng(min, max) { return Math.random() * (max - min) + m
in; } class Particle { constructor(x, y, vx, vy, r, a) { this.x = 
x; this.y = y; this.vx = vx; this.vy = vy; this.r = r; this.a = a;
 } step(dt) { this.x += this.vx * dt; this.y += this.vy * dt; } } 
const scanner = { x: Math.floor(window.innerWidth / 2), width: SCA
N_WIDTH, glow: 3.5, }; function drawParticle(ctx, p) { ctx.globalA
lpha = clamp(p.a, 0, 1); ctx.drawImage(gradient, p.x - p.r, p.y - 
p.r, p.r * 2, p.r * 2); } function tick(t) { const dt = 0.016; } c
onst state = { intensity: 1.2, particles: MAX_PARTICLES }; const b
ounds = { w: window.innerWidth, h: 300 }; const gradient = documen
t.createElement('canvas'); const ctx = gradient.getContext('2d'); 
ctx.globalCompositeOperation = 'lighter'; const state = { intensit
y: 1.2, particles: MAX_PARTICLES }; const bounds = { w: window.inn
erWidth, h: 300 }; const gradient = document.createElement('canvas

// compiled preview • scanner demo /* generated for visual effect 
– not executed */ const SCAN_WIDTH = 8; const FADE_ZONE = 35; cons
t MAX_PARTICLES = 2500; const TRANSITION = 0.05; function clamp(n,
 a, b) { return Math.max(a, Math.min(b, n)); } function lerp(a, b,
 t) { return a + (b - a) * t; } const now = () => performance.now(
); function rng(min, max) { return Math.random() * (max - min) + m
in; } class Particle { constructor(x, y, vx, vy, r, a) { this.x = 
x; this.y = y; this.vx = vx; this.vy = vy; this.r = r; this.a = a;
 } step(dt) { this.x += this.vx * dt; this.y += this.vy * dt; } } 
const scanner = { x: Math.floor(window.innerWidth / 2), width: SCA
N_WIDTH, glow: 3.5, }; function drawParticle(ctx, p) { ctx.globalA
lpha = clamp(p.a, 0, 1); ctx.drawImage(gradient, p.x - p.r, p.y - 
p.r, p.r * 2, p.r * 2); } function tick(t) { const dt = 0.016; } c
onst state = { intensity: 1.2, particles: MAX_PARTICLES }; const b
ounds = { w: window.innerWidth, h: 300 }; const gradient = documen
t.createElement('canvas'); const ctx = gradient.getContext('2d'); 
ctx.globalCompositeOperation = 'lighter'; const state = { intensit
y: 1.2, particles: MAX_PARTICLES }; const bounds = { w: window.inn
erWidth, h: 300 }; const gradient = document.createElement('canvas

// compiled preview • scanner demo /* generated for visual effect 
– not executed */ const SCAN_WIDTH = 8; const FADE_ZONE = 35; cons
t MAX_PARTICLES = 2500; const TRANSITION = 0.05; function clamp(n,
 a, b) { return Math.max(a, Math.min(b, n)); } function lerp(a, b,
 t) { return a + (b - a) * t; } const now = () => performance.now(
); function rng(min, max) { return Math.random() * (max - min) + m
in; } class Particle { constructor(x, y, vx, vy, r, a) { this.x = 
x; this.y = y; this.vx = vx; this.vy = vy; this.r = r; this.a = a;
 } step(dt) { this.x += this.vx * dt; this.y += this.vy * dt; } } 
const scanner = { x: Math.floor(window.innerWidth / 2), width: SCA
N_WIDTH, glow: 3.5, }; function drawParticle(ctx, p) { ctx.globalA
lpha = clamp(p.a, 0, 1); ctx.drawImage(gradient, p.x - p.r, p.y - 
p.r, p.r * 2, p.r * 2); } function tick(t) { const dt = 0.016; } c
onst state = { intensity: 1.2, particles: MAX_PARTICLES }; const b
ounds = { w: window.innerWidth, h: 300 }; const gradient = documen
t.createElement('canvas'); const ctx = gradient.getContext('2d'); 
ctx.globalCompositeOperation = 'lighter'; const state = { intensit
y: 1.2, particles: MAX_PARTICLES }; const bounds = { w: window.inn
erWidth, h: 300 }; const gradient = document.createElement('canvas

// compiled preview • scanner demo /* generated for visual effect 
– not executed */ const SCAN_WIDTH = 8; const FADE_ZONE = 35; cons
t MAX_PARTICLES = 2500; const TRANSITION = 0.05; function clamp(n,
 a, b) { return Math.max(a, Math.min(b, n)); } function lerp(a, b,
 t) { return a + (b - a) * t; } const now = () => performance.now(
); function rng(min, max) { return Math.random() * (max - min) + m
in; } class Particle { constructor(x, y, vx, vy, r, a) { this.x = 
x; this.y = y; this.vx = vx; this.vy = vy; this.r = r; this.a = a;
 } step(dt) { this.x += this.vx * dt; this.y += this.vy * dt; } } 
const scanner = { x: Math.floor(window.innerWidth / 2), width: SCA
N_WIDTH, glow: 3.5, }; function drawParticle(ctx, p) { ctx.globalA
lpha = clamp(p.a, 0, 1); ctx.drawImage(gradient, p.x - p.r, p.y - 
p.r, p.r * 2, p.r * 2); } function tick(t) { const dt = 0.016; } c
onst state = { intensity: 1.2, particles: MAX_PARTICLES }; const b
ounds = { w: window.innerWidth, h: 300 }; const gradient = documen
t.createElement('canvas'); const ctx = gradient.getContext('2d'); 
ctx.globalCompositeOperation = 'lighter'; const state = { intensit
y: 1.2, particles: MAX_PARTICLES }; const bounds = { w: window.inn
erWidth, h: 300 }; const gradient = document.createElement('canvas

// compiled preview • scanner demo /* generated for visual effect 
– not executed */ const SCAN_WIDTH = 8; const FADE_ZONE = 35; cons
t MAX_PARTICLES = 2500; const TRANSITION = 0.05; function clamp(n,
 a, b) { return Math.max(a, Math.min(b, n)); } function lerp(a, b,
 t) { return a + (b - a) * t; } const now = () => performance.now(
); function rng(min, max) { return Math.random() * (max - min) + m
in; } class Particle { constructor(x, y, vx, vy, r, a) { this.x = 
x; this.y = y; this.vx = vx; this.vy = vy; this.r = r; this.a = a;
 } step(dt) { this.x += this.vx * dt; this.y += this.vy * dt; } } 
const scanner = { x: Math.floor(window.innerWidth / 2), width: SCA
N_WIDTH, glow: 3.5, }; function drawParticle(ctx, p) { ctx.globalA
lpha = clamp(p.a, 0, 1); ctx.drawImage(gradient, p.x - p.r, p.y - 
p.r, p.r * 2, p.r * 2); } function tick(t) { const dt = 0.016; } c
onst state = { intensity: 1.2, particles: MAX_PARTICLES }; const b
ounds = { w: window.innerWidth, h: 300 }; const gradient = documen
t.createElement('canvas'); const ctx = gradient.getContext('2d'); 
ctx.globalCompositeOperation = 'lighter'; const state = { intensit
y: 1.2, particles: MAX_PARTICLES }; const bounds = { w: window.inn
erWidth, h: 300 }; const gradient = document.createElement('canvas

// compiled preview • scanner demo /* generated for visual effect 
– not executed */ const SCAN_WIDTH = 8; const FADE_ZONE = 35; cons
t MAX_PARTICLES = 2500; const TRANSITION = 0.05; function clamp(n,
 a, b) { return Math.max(a, Math.min(b, n)); } function lerp(a, b,
 t) { return a + (b - a) * t; } const now = () => performance.now(
); function rng(min, max) { return Math.random() * (max - min) + m
in; } class Particle { constructor(x, y, vx, vy, r, a) { this.x = 
x; this.y = y; this.vx = vx; this.vy = vy; this.r = r; this.a = a;
 } step(dt) { this.x += this.vx * dt; this.y += this.vy * dt; } } 
const scanner = { x: Math.floor(window.innerWidth / 2), width: SCA
N_WIDTH, glow: 3.5, }; function drawParticle(ctx, p) { ctx.globalA
lpha = clamp(p.a, 0, 1); ctx.drawImage(gradient, p.x - p.r, p.y - 
p.r, p.r * 2, p.r * 2); } function tick(t) { const dt = 0.016; } c
onst state = { intensity: 1.2, particles: MAX_PARTICLES }; const b
ounds = { w: window.innerWidth, h: 300 }; const gradient = documen
t.createElement('canvas'); const ctx = gradient.getContext('2d'); 
ctx.globalCompositeOperation = 'lighter'; const state = { intensit
y: 1.2, particles: MAX_PARTICLES }; const bounds = { w: window.inn
erWidth, h: 300 }; const gradient = document.createElement('canvas

// compiled preview • scanner demo /* generated for visual effect 
– not executed */ const SCAN_WIDTH = 8; const FADE_ZONE = 35; cons
t MAX_PARTICLES = 2500; const TRANSITION = 0.05; function clamp(n,
 a, b) { return Math.max(a, Math.min(b, n)); } function lerp(a, b,
 t) { return a + (b - a) * t; } const now = () => performance.now(
); function rng(min, max) { return Math.random() * (max - min) + m
in; } class Particle { constructor(x, y, vx, vy, r, a) { this.x = 
x; this.y = y; this.vx = vx; this.vy = vy; this.r = r; this.a = a;
 } step(dt) { this.x += this.vx * dt; this.y += this.vy * dt; } } 
const scanner = { x: Math.floor(window.innerWidth / 2), width: SCA
N_WIDTH, glow: 3.5, }; function drawParticle(ctx, p) { ctx.globalA
lpha = clamp(p.a, 0, 1); ctx.drawImage(gradient, p.x - p.r, p.y - 
p.r, p.r * 2, p.r * 2); } function tick(t) { const dt = 0.016; } c
onst state = { intensity: 1.2, particles: MAX_PARTICLES }; const b
ounds = { w: window.innerWidth, h: 300 }; const gradient = documen
t.createElement('canvas'); const ctx = gradient.getContext('2d'); 
ctx.globalCompositeOperation = 'lighter'; const state = { intensit
y: 1.2, particles: MAX_PARTICLES }; const bounds = { w: window.inn
erWidth, h: 300 }; const gradient = document.createElement('canvas

// compiled preview • scanner demo /* generated for visual effect 
– not executed */ const SCAN_WIDTH = 8; const FADE_ZONE = 35; cons
t MAX_PARTICLES = 2500; const TRANSITION = 0.05; function clamp(n,
 a, b) { return Math.max(a, Math.min(b, n)); } function lerp(a, b,
 t) { return a + (b - a) * t; } const now = () => performance.now(
); function rng(min, max) { return Math.random() * (max - min) + m
in; } class Particle { constructor(x, y, vx, vy, r, a) { this.x = 
x; this.y = y; this.vx = vx; this.vy = vy; this.r = r; this.a = a;
 } step(dt) { this.x += this.vx * dt; this.y += this.vy * dt; } } 
const scanner = { x: Math.floor(window.innerWidth / 2), width: SCA
N_WIDTH, glow: 3.5, }; function drawParticle(ctx, p) { ctx.globalA
lpha = clamp(p.a, 0, 1); ctx.drawImage(gradient, p.x - p.r, p.y - 
p.r, p.r * 2, p.r * 2); } function tick(t) { const dt = 0.016; } c
onst state = { intensity: 1.2, particles: MAX_PARTICLES }; const b
ounds = { w: window.innerWidth, h: 300 }; const gradient = documen
t.createElement('canvas'); const ctx = gradient.getContext('2d'); 
ctx.globalCompositeOperation = 'lighter'; const state = { intensit
y: 1.2, particles: MAX_PARTICLES }; const bounds = { w: window.inn
erWidth, h: 300 }; const gradient = document.createElement('canvas

// compiled preview • scanner demo /* generated for visual effect 
– not executed */ const SCAN_WIDTH = 8; const FADE_ZONE = 35; cons
t MAX_PARTICLES = 2500; const TRANSITION = 0.05; function clamp(n,
 a, b) { return Math.max(a, Math.min(b, n)); } function lerp(a, b,
 t) { return a + (b - a) * t; } const now = () => performance.now(
); function rng(min, max) { return Math.random() * (max - min) + m
in; } class Particle { constructor(x, y, vx, vy, r, a) { this.x = 
x; this.y = y; this.vx = vx; this.vy = vy; this.r = r; this.a = a;
 } step(dt) { this.x += this.vx * dt; this.y += this.vy * dt; } } 
const scanner = { x: Math.floor(window.innerWidth / 2), width: SCA
N_WIDTH, glow: 3.5, }; function drawParticle(ctx, p) { ctx.globalA
lpha = clamp(p.a, 0, 1); ctx.drawImage(gradient, p.x - p.r, p.y - 
p.r, p.r * 2, p.r * 2); } function tick(t) { const dt = 0.016; } c
onst state = { intensity: 1.2, particles: MAX_PARTICLES }; const b
ounds = { w: window.innerWidth, h: 300 }; const gradient = documen
t.createElement('canvas'); const ctx = gradient.getContext('2d'); 
ctx.globalCompositeOperation = 'lighter'; const state = { intensit
y: 1.2, particles: MAX_PARTICLES }; const bounds = { w: window.inn
erWidth, h: 300 }; const gradient = document.createElement('canvas

// compiled preview • scanner demo /* generated for visual effect 
– not executed */ const SCAN_WIDTH = 8; const FADE_ZONE = 35; cons
t MAX_PARTICLES = 2500; const TRANSITION = 0.05; function clamp(n,
 a, b) { return Math.max(a, Math.min(b, n)); } function lerp(a, b,
 t) { return a + (b - a) * t; } const now = () => performance.now(
); function rng(min, max) { return Math.random() * (max - min) + m
in; } class Particle { constructor(x, y, vx, vy, r, a) { this.x = 
x; this.y = y; this.vx = vx; this.vy = vy; this.r = r; this.a = a;
 } step(dt) { this.x += this.vx * dt; this.y += this.vy * dt; } } 
const scanner = { x: Math.floor(window.innerWidth / 2), width: SCA
N_WIDTH, glow: 3.5, }; function drawParticle(ctx, p) { ctx.globalA
lpha = clamp(p.a, 0, 1); ctx.drawImage(gradient, p.x - p.r, p.y - 
p.r, p.r * 2, p.r * 2); } function tick(t) { const dt = 0.016; } c
onst state = { intensity: 1.2, particles: MAX_PARTICLES }; const b
ounds = { w: window.innerWidth, h: 300 }; const gradient = documen
t.createElement('canvas'); const ctx = gradient.getContext('2d'); 
ctx.globalCompositeOperation = 'lighter'; const state = { intensit
y: 1.2, particles: MAX_PARTICLES }; const bounds = { w: window.inn
erWidth, h: 300 }; const gradient = document.createElement('canvas

Selected Work

Problems I successfully solved

data points AI-extracted

79%

reduction in errors propagated downstream

40%

Designing PitchBook's first AI-powered data collection platform: from 30 fragmented tools to one unified system

Designed for two states of AI maturity — today's reality and where the product was going

data points AI-extracted

79%

reduction in errors propagated downstream

40%

Designing PitchBook's first AI-powered data collection platform: from 30 fragmented tools to one unified system

Designed for two states of AI maturity — today's reality and where the product was going

data points AI-extracted

79%

reduction in errors propagated downstream

40%

Designing PitchBook's first AI-powered data collection platform: from 30 fragmented tools to one unified system

Designed for two states of AI maturity — today's reality and where the product was going

Fewer support tickets

78%

Annual operational savings

$4M

Rebuilding Access Management for Enterprise Scale

Filing an Engineering ticket to give someone basic read access felt absurd. You'd wait three days, follow up, wait again. Now I handle it myself in the time it takes to read the original request.

Sarah J

Support Operations Lead

Fewer support tickets

78%

Annual operational savings

$4M

Rebuilding Access Management for Enterprise Scale

Filing an Engineering ticket to give someone basic read access felt absurd. You'd wait three days, follow up, wait again. Now I handle it myself in the time it takes to read the original request.

Sarah J

Support Operations Lead

Fewer support tickets

78%

Annual operational savings

$4M

Rebuilding Access Management for Enterprise Scale

Filing an Engineering ticket to give someone basic read access felt absurd. You'd wait three days, follow up, wait again. Now I handle it myself in the time it takes to read the original request.

Sarah J

Support Operations Lead

Engagement

4 min

User Satisfaction

5.0*

Redesigning PitchBook Mobile from desktop companion to primary research tool

rebuilt the navigation and search architecture

"I used to save everything for when I was back at my desk. Now I do the first pass of screening entirely from my phone."

— Private Equity Associate, PitchBook user

Engagement

4 min

User Satisfaction

5.0*

Redesigning PitchBook Mobile from desktop companion to primary research tool

rebuilt the navigation and search architecture

"I used to save everything for when I was back at my desk. Now I do the first pass of screening entirely from my phone."

— Private Equity Associate, PitchBook user

Engagement

4 min

User Satisfaction

5.0*

Redesigning PitchBook Mobile from desktop companion to primary research tool

rebuilt the navigation and search architecture

"I used to save everything for when I was back at my desk. Now I do the first pass of screening entirely from my phone."

— Private Equity Associate, PitchBook user

Fun Projects

Things I'm building

AI wearable ecosystem for neurodivergent children

Check the story →

AI wearble

Healthcare

App

Hardware

Accessibility

2026

AI wearable ecosystem for neurodivergent children

AI wearble

Healthcare

App

Hardware

Accessibility

2026

AI-powered galaxy cooking game

See the value created →

Game

AI-native

Vibe Coding

Unity

2025

AI-powered galaxy cooking game

Game

AI-native

Vibe Coding

Unity

2025

Collaboration

AI & Automation

Vision & Strategy

System Thinking

Mentorship

User Experience Design

Information Architecture

Storytelling

Design Systems

I make complex data usable, trustworthy, and effective.

About me

6 years of desiging enterprise products

Designed 20+ B2B products

10M+ users impacted globally

4.9+ average app rating on Apple Store

4.7+ app rating on Apple Store