// Shared primitives: icons, particle field, splat thumbnail, stat counter
const { useState, useEffect, useRef, useMemo } = React;
// Lucide-style line icons (1.5 stroke). Currentcolor.
const Icon = ({ name, size = 20, className = '', style = {} }) => {
const s = size;
const sw = 1.5;
const common = { width: s, height: s, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: sw, strokeLinecap: 'round', strokeLinejoin: 'round', className, style };
const paths = {
arrowRight: <>,
arrowUpRight: <>,
chevDown: ,
check: ,
sparkle: <>,
cube: <>,
layers: <>,
globe: <>,
grid: <>,
play: ,
pause: <>,
enter: <>,
monitor: <>,
tablet: <>,
phone: <>,
bookOpen: <>,
award: <>,
code: <>,
sliders: <>,
user: <>,
book: <>,
network: <>,
school: <>,
};
return ;
};
// Drifting particle field — used in hero + final CTA
const ParticleField = ({ density = 80, color = '125, 255, 196', baseAlpha = 0.5, speed = 0.06 }) => {
const ref = useRef(null);
useEffect(() => {
const c = ref.current;
if (!c) return;
let raf;
const ctx = c.getContext('2d');
const dpr = Math.min(window.devicePixelRatio || 1, 2);
const resize = () => {
const r = c.getBoundingClientRect();
c.width = r.width * dpr;
c.height = r.height * dpr;
c.style.width = r.width + 'px';
c.style.height = r.height + 'px';
};
resize();
window.addEventListener('resize', resize);
const pts = [];
for (let i = 0; i < density; i++) {
pts.push({
x: Math.random(), y: Math.random(),
z: Math.random(), // depth 0..1
vx: (Math.random() - 0.5) * speed * 0.001,
vy: (Math.random() - 0.5) * speed * 0.001,
r: Math.random() * 0.7 + 0.3,
});
}
const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
let t = 0;
const draw = () => {
const w = c.width, h = c.height;
ctx.clearRect(0, 0, w, h);
t += 0.003;
pts.forEach((p, i) => {
if (!reduce) {
p.x += p.vx + Math.sin(t + i) * 0.00005;
p.y += p.vy + Math.cos(t * 0.7 + i) * 0.00005;
if (p.x < 0) p.x += 1; if (p.x > 1) p.x -= 1;
if (p.y < 0) p.y += 1; if (p.y > 1) p.y -= 1;
}
const size = (p.r + p.z * 1.6) * dpr;
const alpha = baseAlpha * (0.3 + p.z * 0.7);
ctx.beginPath();
ctx.fillStyle = `rgba(${color}, ${alpha})`;
ctx.arc(p.x * w, p.y * h, size, 0, Math.PI * 2);
ctx.fill();
// subtle glow for closer points
if (p.z > 0.7) {
ctx.beginPath();
ctx.fillStyle = `rgba(${color}, ${alpha * 0.15})`;
ctx.arc(p.x * w, p.y * h, size * 4, 0, Math.PI * 2);
ctx.fill();
}
});
if (!reduce) raf = requestAnimationFrame(draw);
};
draw();
return () => { cancelAnimationFrame(raf); window.removeEventListener('resize', resize); };
}, [density, color, baseAlpha, speed]);
return ;
};
// Splat thumbnail — layered gradients + grain + point cloud edges
const SplatThumb = ({ scheme = 'space', label, density = 60 }) => {
const schemes = {
// [bg, layer1 color, layer2 color, accent color]
space: { bg: '#070912', a: 'rgba(89, 124, 255, 0.4)', b: 'rgba(150, 90, 220, 0.35)', c: 'rgba(125, 255, 196, 0.25)' },
ancient: { bg: '#100A07', a: 'rgba(245, 158, 11, 0.4)', b: 'rgba(180, 60, 40, 0.35)', c: 'rgba(255, 200, 120, 0.25)' },
cell: { bg: '#06100C', a: 'rgba(125, 255, 196, 0.4)', b: 'rgba(60, 200, 180, 0.3)', c: 'rgba(180, 255, 230, 0.2)' },
math: { bg: '#0B0A14', a: 'rgba(167, 139, 250, 0.4)', b: 'rgba(89, 124, 255, 0.3)', c: 'rgba(125, 255, 196, 0.2)' },
story: { bg: '#0F0807', a: 'rgba(220, 120, 90, 0.4)', b: 'rgba(160, 80, 100, 0.3)', c: 'rgba(245, 200, 150, 0.2)' },
city: { bg: '#070D10', a: 'rgba(80, 180, 220, 0.4)', b: 'rgba(125, 255, 196, 0.3)', c: 'rgba(200, 240, 255, 0.2)' },
};
const s = schemes[scheme] || schemes.space;
// deterministic-ish points using a seeded sequence
const pts = useMemo(() => {
const out = [];
let seed = scheme.split('').reduce((a, c) => a + c.charCodeAt(0), 0);
const rand = () => { seed = (seed * 9301 + 49297) % 233280; return seed / 233280; };
for (let i = 0; i < density; i++) {
out.push({ x: rand() * 100, y: rand() * 100, r: rand() * 1.8 + 0.3, o: rand() * 0.7 + 0.2 });
}
return out;
}, [scheme, density]);
return (
{label && (
{label}
)}
);
};
// Number that counts up when visible
const useInView = (ref, opts = { threshold: 0.4 }) => {
const [seen, setSeen] = useState(false);
useEffect(() => {
if (!ref.current || seen) return;
const obs = new IntersectionObserver(([e]) => { if (e.isIntersecting) { setSeen(true); obs.disconnect(); } }, opts);
obs.observe(ref.current);
return () => obs.disconnect();
}, [ref, seen]);
return seen;
};
const CountUp = ({ to, duration = 900, suffix = '', prefix = '' }) => {
const ref = useRef(null);
const inView = useInView(ref);
const [val, setVal] = useState(0);
useEffect(() => {
if (!inView) return;
let raf, start;
const step = (t) => {
if (!start) start = t;
const p = Math.min(1, (t - start) / duration);
const eased = 1 - Math.pow(1 - p, 3);
setVal(Math.round(to * eased));
if (p < 1) raf = requestAnimationFrame(step);
};
raf = requestAnimationFrame(step);
return () => cancelAnimationFrame(raf);
}, [inView, to, duration]);
return {prefix}{val.toLocaleString()}{suffix};
};
// Tiny logo mark
const Logo = () => (
The VR School
);
Object.assign(window, { Icon, ParticleField, SplatThumb, CountUp, Logo, useInView });