marco/buildmymcpserver
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(web): hero redesign — cycling step rotator + full-width video section
All checks were successful
Deploy to Production / deploy (push) Successful in 1m2s
Details

Browse Source 
Restructures the landing page above-the-fold into two distinct sections:

1. **Hero — left copy + cycling tile, no static stack of three blocks**
   New `<HeroStepRotator>` (Framer Motion client component) shows ONE
   tile centred in the column, cycling prompt.txt → build.log →
   claude_desktop_config.json every 3.5s. Auto-advance pauses on hover
   and exposes a 3-dot tablist so users can jump to any step. The active
   dot grows wide with an accent glow.

   Mouse interaction: spring-smoothed 3D tilt on rotateX/rotateY plus a
   radial glow that translates toward the cursor — both driven by motion
   values, so the transforms stay on the GPU compositor instead of
   re-rendering on every mousemove. `useReducedMotion()` strips the
   tilt + glow translation and collapses the page transition to an
   instant cross-fade (the rotation itself still advances — it's content,
   not decoration).

   Hero padding tightened (py-12/14/16 vs py-14/20/28) so the video
   section below is teased above the fold. New scroll cue ("see it run"
   + animated chevron) sits at the bottom of the hero, anchored to
   #flow.

2. **Flow video — full-width edge-to-edge under the hero (new section)**
   The hero.mp4 / hero.webm pair moves out of the "How it works"
   section into its own #flow section. No max-w wrapper — it spans the
   viewport with `w-full aspect-video`, so on a 1080p monitor the video
   gets the full 1920px width. Adds a subtle radial vignette so the
   black edges blend into the page chrome.

3. **"How it works" — now lean**
   Video removed (it's the flow section now). Just the three textual
   cards as supporting copy.

Adds `framer-motion@11.18.2` to apps/web/package.json. Build passes
typecheck + Next.js production build with no new warnings; LCP path is
untouched since the rotator is client-hydrated after first paint and
Framer Motion is tree-shaken to the components we import.

Note: visitors with `prefers-reduced-motion: reduce` will still see the
video's poster instead of autoplay — Chrome blocks the network fetch
entirely for autoplay media when reduced-motion is set. The flow video
remains visible for the rest, and the step rotator continues to cycle
its content (with instant cross-fade instead of slide+scale).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Marco Sadjadi
2026-05-27 12:05:28 +02:00
parent 22ba23f353
commit e4e437c44c
14 changed files with 1840 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

591
apps/web/components/hero-animation.tsx Normal file
View File

@@ -0,0 +1,591 @@
'use client';
import { useEffect, useRef } from 'react';
/**
* HeroAnimation — full-bleed Canvas 2D piece for the marketing hero.
*
* Four layers (back to front):
* 1. Drifting indigo particle dots (texture)
* 2. Code-block panel with typewriter cycling 3 snippets (centerpiece)
* 3. Mouse-tracking glow ring (interactive, additive)
* 4. Data packets shooting from the panel toward the canvas edges
*
* Hex colors are hardcoded here on purpose — Tailwind v4 beta oklch tokens
* don't round-trip cleanly when read from JS, and we want pixel-stable
* brand colors inside the canvas regardless of the design-token layer.
*/
const COLORS = {
bg: '#0a0a0b',
bgElevated: '#111114',
border: '#1f1f22',
borderStrong: '#2a2a2e',
fg: '#fafafa',
fgMuted: '#a1a1aa',
fgSubtle: '#71717a',
accent: '#6366f1',
success: '#22c55e',
} as const;
const SNIPPETS: ReadonlyArray<ReadonlyArray<string>> = [
[
'// MCP server — auto-generated',
'import { Server } from "@bmm/mcp";',
'',
'const server = new Server({',
' name: "data-bridge",',
' tools: [getRecord, search, write],',
'});',
'',
'await server.listen();',
],
[
'> Generating spec... OK',
'> Static checks OK',
'> Building image OK 17.2s',
'> Deploying container OK',
'> Live at https://...mcp.bmm.io',
],
[
'// claude_desktop_config.json',
'{',
' "mcpServers": {',
' "data-bridge": {',
' "url": "https://data.mcp.bmm.io",',
' "auth": "oauth2"',
' }',
' }',
'}',
],
];
const KEYWORDS = new Set([
'import',
'from',
'const',
'await',
'new',
'return',
'function',
'let',
'var',
'if',
'else',
'export',
'default',
]);
interface Particle {
x: number;
y: number;
vx: number;
vy: number;
r: number;
seed: number;
}
interface Packet {
x: number;
y: number;
vx: number;
vy: number;
life: number; // 0..1, decreases
maxLife: number;
}
interface HeroAnimationProps {
className?: string;
}
export function HeroAnimation({ className }: HeroAnimationProps) {
const wrapRef = useRef<HTMLDivElement | null>(null);
const canvasRef = useRef<HTMLCanvasElement | null>(null);
useEffect(() => {
const wrap = wrapRef.current;
const canvas = canvasRef.current;
if (!wrap || !canvas) return;
const ctx = canvas.getContext('2d', { alpha: true });
if (!ctx) return;
const reducedMotion =
typeof window !== 'undefined' &&
window.matchMedia('(prefers-reduced-motion: reduce)').matches;
// ----- sizing (DPR-aware) -----
let cssW = 0;
let cssH = 0;
const setSize = () => {
const rect = wrap.getBoundingClientRect();
cssW = Math.max(1, Math.floor(rect.width));
cssH = Math.max(1, Math.floor(rect.height));
const dpr = Math.min(window.devicePixelRatio || 1, 2);
canvas.width = cssW * dpr;
canvas.height = cssH * dpr;
canvas.style.width = `${cssW}px`;
canvas.style.height = `${cssH}px`;
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
seedParticles();
};
// ----- particles -----
const particles: Particle[] = [];
const PARTICLE_COUNT = 60;
const seedParticles = () => {
particles.length = 0;
for (let i = 0; i < PARTICLE_COUNT; i++) {
const angle = Math.random() * Math.PI * 2;
const speed = (0.15 + Math.random() * 0.25) * (reducedMotion ? 0.4 : 1);
particles.push({
x: Math.random() * cssW,
y: Math.random() * cssH,
vx: Math.cos(angle) * speed,
vy: Math.sin(angle) * speed,
r: 0.7 + Math.random() * 1.3,
seed: Math.random() * 1000,
});
}
};
// ----- pointer state -----
// Track in CSS pixels (post setTransform), -1,-1 means "not over".
const pointer = {
raw: { x: -1, y: -1 },
smooth: { x: cssW / 2, y: cssH / 2 },
inside: false,
ringAlpha: 0, // eased
};
const onPointerMove = (e: PointerEvent) => {
const rect = canvas.getBoundingClientRect();
pointer.raw.x = e.clientX - rect.left;
pointer.raw.y = e.clientY - rect.top;
pointer.inside = true;
};
const onPointerLeave = () => {
pointer.inside = false;
};
canvas.addEventListener('pointermove', onPointerMove, { passive: true });
canvas.addEventListener('pointerleave', onPointerLeave, { passive: true });
canvas.addEventListener('pointercancel', onPointerLeave, { passive: true });
// ----- packets -----
const packets: Packet[] = [];
let lastPacketSpawn = 0;
// ----- typewriter state -----
// Snippet cycle:
// typing -> holding -> erasing -> pausing -> next snippet
// Timings calibrated so each snippet runs ~4-5s.
const FORWARD_MS = reducedMotion ? 45 : 25;
const ERASE_MS = reducedMotion ? 28 : 15;
const HOLD_MS = 2500;
const PAUSE_MS = 500;
let snippetIndex = 0;
type Phase = 'typing' | 'holding' | 'erasing' | 'pausing';
let phase: Phase = 'typing';
let phaseStart = 0;
// Characters revealed across the FULL snippet text including newlines.
const fullText = (i: number): string =>
(SNIPPETS[i] ?? []).join('\n');
// ----- animation loop -----
let rafId = 0;
let startTime = performance.now();
let lastFrame = startTime;
let visible = !document.hidden;
const onVisibility = () => {
visible = !document.hidden;
if (visible) {
// Reset frame delta so paused time doesn't lurch animation.
lastFrame = performance.now();
rafId = requestAnimationFrame(frame);
}
};
document.addEventListener('visibilitychange', onVisibility);
// ----- drawing helpers -----
const drawParticles = (elapsed: number, dt: number) => {
ctx.save();
ctx.fillStyle = COLORS.accent;
ctx.globalAlpha = 0.2;
const driftScale = reducedMotion ? 0.4 : 1;
for (const p of particles) {
// Cheap pseudo-simplex: layered sines indexed by seed + time.
const t = elapsed * 0.0004;
const nx = Math.sin(t + p.seed) * Math.cos(t * 0.7 + p.seed * 1.3);
const ny = Math.cos(t * 0.9 + p.seed * 0.6) * Math.sin(t * 0.5 + p.seed);
p.x += (p.vx + nx * 0.3) * dt * 0.06 * driftScale;
p.y += (p.vy + ny * 0.3) * dt * 0.06 * driftScale;
// Wrap around edges so density stays uniform.
if (p.x < -4) p.x = cssW + 4;
else if (p.x > cssW + 4) p.x = -4;
if (p.y < -4) p.y = cssH + 4;
else if (p.y > cssH + 4) p.y = -4;
ctx.beginPath();
ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
ctx.fill();
}
ctx.restore();
};
// Returns { x, y, w, h } of the code panel in CSS pixels.
const panelRect = () => {
const w = cssW * 0.8;
// Sized to comfortably fit the longest snippet (~9 lines @ ~18px line-height).
const h = Math.min(cssH * 0.55, 240);
return {
x: (cssW - w) / 2,
y: (cssH - h) / 2,
w,
h,
};
};
const drawPanel = (rect: { x: number; y: number; w: number; h: number }) => {
ctx.save();
ctx.fillStyle = COLORS.bg;
ctx.strokeStyle = COLORS.border;
ctx.lineWidth = 1;
const r = 8;
const { x, y, w, h } = rect;
ctx.beginPath();
ctx.moveTo(x + r, y);
ctx.arcTo(x + w, y, x + w, y + h, r);
ctx.arcTo(x + w, y + h, x, y + h, r);
ctx.arcTo(x, y + h, x, y, r);
ctx.arcTo(x, y, x + w, y, r);
ctx.closePath();
ctx.fill();
ctx.stroke();
ctx.restore();
};
// Tokenize a line for syntax color. Cheap heuristic, not a real parser.
type Token = { text: string; color: string };
const tokenizeLine = (line: string, elapsed: number): Token[] => {
// Comment lines.
if (line.trim().startsWith('//')) {
return [{ text: line, color: COLORS.fgSubtle }];
}
// Log lines: ">" prefix style, flash "OK" green briefly when it appears.
if (line.startsWith('>')) {
const tokens: Token[] = [];
// Find OK occurrences and color them.
const parts = line.split(/(\bOK\b)/g);
for (const part of parts) {
if (part === 'OK') {
// Subtle flash effect: brighter for first ~500ms after fully typed.
const flash = 0.65 + 0.35 * (0.5 + 0.5 * Math.sin(elapsed * 0.005));
tokens.push({
text: part,
color: withAlpha(COLORS.success, flash),
});
} else {
tokens.push({ text: part, color: COLORS.fgMuted });
}
}
return tokens;
}
// Generic JS/JSON: split on word boundaries, color keywords + strings.
const tokens: Token[] = [];
// Match: string literals, words, or anything else.
const re = /("[^"]*"|\b[A-Za-z_$][\w$]*\b|[^"\w]+)/g;
let match: RegExpExecArray | null;
while ((match = re.exec(line)) !== null) {
const t = match[0];
if (t.startsWith('"')) {
tokens.push({ text: t, color: COLORS.fgMuted });
} else if (KEYWORDS.has(t)) {
tokens.push({ text: t, color: COLORS.accent });
} else {
tokens.push({ text: t, color: COLORS.fg });
}
}
return tokens;
};
const drawCode = (
rect: { x: number; y: number; w: number; h: number },
visibleText: string,
elapsed: number,
) => {
ctx.save();
// Clip to panel so text never bleeds over the rounded border.
ctx.beginPath();
ctx.rect(rect.x, rect.y, rect.w, rect.h);
ctx.clip();
const fontSize = 12.5;
const lineHeight = 18;
const padX = 16;
const padY = 14;
ctx.font = `${fontSize}px var(--font-geist-mono), ui-monospace, SFMono-Regular, Menlo, monospace`;
ctx.textBaseline = 'top';
const lines = visibleText.split('\n');
for (let i = 0; i < lines.length; i++) {
const line = lines[i] ?? '';
const y = rect.y + padY + i * lineHeight;
if (y > rect.y + rect.h - padY) break;
let x = rect.x + padX;
const tokens = tokenizeLine(line, elapsed);
for (const tok of tokens) {
ctx.fillStyle = tok.color;
ctx.fillText(tok.text, x, y);
x += ctx.measureText(tok.text).width;
}
}
// Blinking caret at the end of the visible text.
const lastLine = lines[lines.length - 1] ?? '';
const caretX =
rect.x + padX + ctx.measureText(lastLine).width;
const caretY = rect.y + padY + (lines.length - 1) * lineHeight;
const blink = (elapsed % 1000) < 500;
if (blink && caretY + lineHeight <= rect.y + rect.h - padY + lineHeight) {
ctx.fillStyle = COLORS.accent;
ctx.fillRect(caretX + 1, caretY + 2, 6, fontSize);
}
ctx.restore();
};
const drawRing = (elapsed: number) => {
if (pointer.ringAlpha < 0.005) return;
ctx.save();
ctx.globalCompositeOperation = 'lighter';
const cx = pointer.smooth.x;
const cy = pointer.smooth.y;
const baseRadii: ReadonlyArray<{ r: number; w: number; a: number }> = [
{ r: 60, w: 2.4, a: 0.4 },
{ r: 90, w: 1.6, a: 0.28 },
{ r: 130, w: 1.0, a: 0.18 },
];
for (const band of baseRadii) {
ctx.beginPath();
const segments = 96;
for (let i = 0; i <= segments; i++) {
const theta = (i / segments) * Math.PI * 2;
// Breathing distortion around the circumference.
const wobble = Math.sin(theta * 3 + elapsed * 0.002) * 4;
const r = band.r + wobble;
const x = cx + Math.cos(theta) * r;
const y = cy + Math.sin(theta) * r;
if (i === 0) ctx.moveTo(x, y);
else ctx.lineTo(x, y);
}
ctx.strokeStyle = withAlpha(
COLORS.accent,
band.a * pointer.ringAlpha,
);
ctx.lineWidth = band.w;
ctx.stroke();
}
ctx.restore();
};
const spawnPacket = (rect: { x: number; y: number; w: number; h: number }) => {
// Pick an edge of the panel.
const edge = Math.floor(Math.random() * 4);
let x = 0;
let y = 0;
let vx = 0;
let vy = 0;
const speed = 0.06 + Math.random() * 0.04; // CSS px / ms
if (edge === 0) {
// top
x = rect.x + Math.random() * rect.w;
y = rect.y;
vx = (Math.random() - 0.5) * 0.02;
vy = -speed;
} else if (edge === 1) {
// right
x = rect.x + rect.w;
y = rect.y + Math.random() * rect.h;
vx = speed;
vy = (Math.random() - 0.5) * 0.02;
} else if (edge === 2) {
// bottom
x = rect.x + Math.random() * rect.w;
y = rect.y + rect.h;
vx = (Math.random() - 0.5) * 0.02;
vy = speed;
} else {
// left
x = rect.x;
y = rect.y + Math.random() * rect.h;
vx = -speed;
vy = (Math.random() - 0.5) * 0.02;
}
// Distance to nearest canvas edge along direction → travel time.
const distX = vx > 0 ? cssW - x : vx < 0 ? x : Infinity;
const distY = vy > 0 ? cssH - y : vy < 0 ? y : Infinity;
const tx = vx !== 0 ? distX / Math.abs(vx) : Infinity;
const ty = vy !== 0 ? distY / Math.abs(vy) : Infinity;
const maxLife = Math.min(tx, ty);
packets.push({ x, y, vx, vy, life: 1, maxLife });
};
const drawPackets = (dt: number) => {
ctx.save();
for (let i = packets.length - 1; i >= 0; i--) {
const p = packets[i];
if (!p) continue;
p.x += p.vx * dt;
p.y += p.vy * dt;
p.life -= dt / p.maxLife;
if (
p.life <= 0 ||
p.x < -4 ||
p.x > cssW + 4 ||
p.y < -4 ||
p.y > cssH + 4
) {
packets.splice(i, 1);
continue;
}
const alpha = Math.max(0, p.life) * 0.85;
ctx.fillStyle = withAlpha(COLORS.accent, alpha);
ctx.beginPath();
ctx.arc(p.x, p.y, 1.6, 0, Math.PI * 2);
ctx.fill();
}
ctx.restore();
};
// ----- main frame -----
const frame = (now: number) => {
if (!visible) return; // visibilitychange will restart us
const dt = Math.min(48, now - lastFrame); // cap to avoid lurches
lastFrame = now;
const elapsed = now - startTime;
// Pointer smoothing (EMA). When outside, ease ring alpha to 0 (~400ms).
if (pointer.inside && pointer.raw.x >= 0) {
pointer.smooth.x = 0.82 * pointer.smooth.x + 0.18 * pointer.raw.x;
pointer.smooth.y = 0.82 * pointer.smooth.y + 0.18 * pointer.raw.y;
// Ease alpha to 1 over ~250ms.
pointer.ringAlpha = Math.min(1, pointer.ringAlpha + dt / 250);
} else {
pointer.ringAlpha = Math.max(0, pointer.ringAlpha - dt / 400);
}
// Clear (transparent — wrapper supplies bg color).
ctx.clearRect(0, 0, cssW, cssH);
// Layer 1: particles
drawParticles(elapsed, dt);
// Layer 2: panel + typewriter
const rect = panelRect();
drawPanel(rect);
// Compute visible characters for the current snippet.
const text = fullText(snippetIndex);
const totalChars = text.length;
let visibleChars = 0;
const sincePhase = now - phaseStart;
if (phase === 'typing') {
visibleChars = Math.min(totalChars, Math.floor(sincePhase / FORWARD_MS));
if (visibleChars >= totalChars) {
phase = 'holding';
phaseStart = now;
}
} else if (phase === 'holding') {
visibleChars = totalChars;
if (sincePhase >= HOLD_MS) {
phase = 'erasing';
phaseStart = now;
}
} else if (phase === 'erasing') {
visibleChars = Math.max(
0,
totalChars - Math.floor(sincePhase / ERASE_MS),
);
if (visibleChars <= 0) {
phase = 'pausing';
phaseStart = now;
}
} else {
visibleChars = 0;
if (sincePhase >= PAUSE_MS) {
snippetIndex = (snippetIndex + 1) % SNIPPETS.length;
phase = 'typing';
phaseStart = now;
}
}
drawCode(rect, text.slice(0, visibleChars), elapsed);
// Layer 4 (drawn before ring so the glow sits on top): packets.
// Skipped under reduced-motion.
if (!reducedMotion) {
if (now - lastPacketSpawn > 600 && packets.length < 6) {
spawnPacket(rect);
lastPacketSpawn = now;
}
drawPackets(dt);
}
// Layer 3: glow ring (additive, on top)
drawRing(elapsed);
rafId = requestAnimationFrame(frame);
};
// ----- resize observer -----
const ro = new ResizeObserver(() => {
setSize();
});
ro.observe(wrap);
setSize();
// Kick off.
startTime = performance.now();
lastFrame = startTime;
phaseStart = startTime;
rafId = requestAnimationFrame(frame);
return () => {
cancelAnimationFrame(rafId);
ro.disconnect();
document.removeEventListener('visibilitychange', onVisibility);
canvas.removeEventListener('pointermove', onPointerMove);
canvas.removeEventListener('pointerleave', onPointerLeave);
canvas.removeEventListener('pointercancel', onPointerLeave);
};
}, []);
return (
<div
ref={wrapRef}
className={
className ??
'relative aspect-square w-full overflow-hidden rounded-lg border border-[--color-border-strong] bg-[--color-bg-elevated]'
}
>
<canvas
ref={canvasRef}
aria-hidden="true"
className="block h-full w-full"
/>
</div>
);
}
/**
* Append an alpha channel to a 6-digit hex color.
* `withAlpha('#6366f1', 0.4)` -> 'rgba(99, 102, 241, 0.4)'
*/
function withAlpha(hex: string, alpha: number): string {
const h = hex.replace('#', '');
const r = parseInt(h.slice(0, 2), 16);
const g = parseInt(h.slice(2, 4), 16);
const b = parseInt(h.slice(4, 6), 16);
return `rgba(${r}, ${g}, ${b}, ${alpha})`;
}

177
apps/web/components/hero-step-rotator.tsx Normal file
View File

@@ -0,0 +1,177 @@
'use client';
import {
AnimatePresence,
motion,
useMotionValue,
useReducedMotion,
useSpring,
useTransform,
} from 'framer-motion';
import { useEffect, useRef, useState } from 'react';
interface Step {
label: string; // file-name badge top-left
badge: string; // "01 · Describe" badge top-right
code: string;
}
const STEPS: Step[] = [
{
label: 'prompt.txt',
badge: '01 · Describe',
code: `Create an MCP server that searches our Notion workspace.
Tools: search_pages, get_page_content.
Auth: NOTION_API_KEY.`,
},
{
label: 'build.log',
badge: '02 · Generate',
code: `> Generating spec... OK (2 tools)
> Static checks OK
> Building image bmm-mcp-notion OK 17.2s
> Deploying container OK
> Live at https://notion-x9.mcp.buildmymcpserver.com
> First request: 401 → token → 200 OK`,
},
{
label: 'claude_desktop_config.json',
badge: '03 · Connect',
code: `{
"mcpServers": {
"notion": {
"url": "https://notion-x9.mcp.buildmymcpserver.com/mcp",
"auth": "oauth2"
}
}
}`,
},
];
const AUTO_MS = 3500;
/**
* Hero step rotator — single centered tile cycling through three states.
*
* Replaces the old static stack of three code blocks. Auto-advances every
* 3.5s, pauses on hover, jumps instantly when the user clicks a dot.
*
* Mouse interaction: the tile reacts with a subtle 3D tilt driven by spring-
* smoothed motion values, plus a radial glow that translates toward the
* cursor. Both are disabled when `prefers-reduced-motion: reduce` is set —
* the rotation is content-essential and still advances, but the transition
* collapses to an instant cross-fade and the tilt/glow are stripped out.
*/
export function HeroStepRotator() {
const [step, setStep] = useState(0);
const [paused, setPaused] = useState(false);
const containerRef = useRef<HTMLDivElement>(null);
const reduced = useReducedMotion();
// Mouse motion values for tilt + glow translation. `mx` and `my` are
// raw cursor offsets (-1..1); the `*Spring` versions add the smoothing
// so the tilt doesn't jitter on every mousemove event.
const mx = useMotionValue(0);
const my = useMotionValue(0);
const mxSpring = useSpring(mx, { damping: 22, stiffness: 200 });
const mySpring = useSpring(my, { damping: 22, stiffness: 200 });
const rotateX = useTransform(mySpring, [-1, 1], reduced ? [0, 0] : [6, -6]);
const rotateY = useTransform(mxSpring, [-1, 1], reduced ? [0, 0] : [-8, 8]);
// Glow translates rather than re-rendering background-position — keeps
// it on the GPU compositor instead of pegging the main thread.
const glowDx = useTransform(mxSpring, [-1, 1], reduced ? [0, 0] : [-140, 140]);
const glowDy = useTransform(mySpring, [-1, 1], reduced ? [0, 0] : [-110, 110]);
useEffect(() => {
if (paused) return;
const t = setTimeout(() => setStep((s) => (s + 1) % STEPS.length), AUTO_MS);
return () => clearTimeout(t);
}, [step, paused]);
function onMove(e: React.MouseEvent<HTMLDivElement>) {
const r = containerRef.current?.getBoundingClientRect();
if (!r) return;
const x = Math.max(-1, Math.min(1, ((e.clientX - r.left) / r.width) * 2 - 1));
const y = Math.max(-1, Math.min(1, ((e.clientY - r.top) / r.height) * 2 - 1));
mx.set(x);
my.set(y);
}
function onEnter() {
setPaused(true);
}
function onLeave() {
setPaused(false);
mx.set(0);
my.set(0);
}
const current = STEPS[step]!;
return (
<div className="flex flex-col items-center gap-5">
<div
ref={containerRef}
className="relative w-full max-w-md"
style={{ perspective: 1200 }}
onMouseEnter={onEnter}
onMouseLeave={onLeave}
onMouseMove={onMove}
>
<AnimatePresence mode="wait" initial={false}>
<motion.div
key={step}
initial={reduced ? { opacity: 0 } : { opacity: 0, scale: 0.96, y: 12 }}
animate={reduced ? { opacity: 1 } : { opacity: 1, scale: 1, y: 0 }}
exit={reduced ? { opacity: 0 } : { opacity: 0, scale: 0.97, y: -8 }}
transition={{ duration: reduced ? 0.15 : 0.5, ease: [0.16, 1, 0.3, 1] }}
style={{ rotateX, rotateY, transformStyle: 'preserve-3d' }}
className="relative overflow-hidden rounded-lg border border-[--color-border-strong] bg-[--color-bg-elevated] shadow-2xl shadow-black/50"
>
{/* Cursor-following glow — sits behind the content, additive. */}
<motion.div
aria-hidden
className="pointer-events-none absolute inset-0"
style={{
background:
'radial-gradient(circle 260px at center, rgba(99,102,241,0.32), transparent 70%)',
x: glowDx,
y: glowDy,
}}
/>
<div className="relative flex items-center justify-between border-b border-[--color-border] px-4 py-2.5">
<span className="mono text-[11px] uppercase tracking-wider text-[--color-fg-subtle]">
{current.label}
</span>
<span className="mono text-[10.5px] tracking-[0.16em] text-[--color-accent]">
{current.badge}
</span>
</div>
<pre className="mono relative overflow-x-auto px-4 py-4 text-[12.5px] leading-relaxed text-[--color-fg]">
<code>{current.code}</code>
</pre>
</motion.div>
</AnimatePresence>
</div>
{/* Step indicator — accent dot is wider + glows so the active step
reads at a glance. Buttons stay clickable so users can jump. */}
<div className="flex items-center gap-2" role="tablist" aria-label="Hero flow steps">
{STEPS.map((s, i) => (
<button
key={s.badge}
type="button"
role="tab"
aria-selected={i === step}
aria-label={`Jump to ${s.badge}`}
onClick={() => setStep(i)}
className={`h-1.5 rounded-full transition-all duration-300 ${
i === step
? 'w-9 bg-[--color-accent] shadow-[0_0_10px_rgba(99,102,241,0.65)]'
: 'w-1.5 bg-[--color-border-strong] hover:bg-[--color-fg-subtle]'
}`}
/>
))}
</div>
</div>
);
}

322
apps/web/components/particle-hero/ParticleField.tsx Normal file
View File

@@ -0,0 +1,322 @@
'use client';
/**
* ParticleField — GPGPU particle simulation backing the marketing hero.
*
* Lean Three.js, no @react-three/fiber. Renders a 256×256 (or 128×128
* on lower-end devices) float texture of positions, ping-ponged each
* frame through a sim shader, then drawn as gl_Points with an
* anti-aliased disc SDF and additive blending.
*
* Callers MUST gate this behind the capability checks in `index.tsx` —
* this component assumes WebGL2 + float-render-target support exists
* and will throw if they don't.
*/
import { useEffect, useRef } from 'react';
import * as THREE from 'three';
import {
initFragment,
renderFragment,
renderVertex,
simFragment,
simVertex,
} from './shaders';
export interface ParticleFieldProps {
/** Sqrt of particle count. 256 → 65,536 particles, 128 → 16,384. */
textureSize: 128 | 256;
/**
* Global multiplier on drift + ring-push velocity. 1.0 default; 0.5
* for reduced-motion users. Pointer position is NOT scaled — the ring
* still tracks the cursor at full fidelity, only the ambient motion
* and the gradient-push are damped.
*/
motionScale?: number;
}
export function ParticleField({ textureSize, motionScale = 1 }: ParticleFieldProps) {
const containerRef = useRef<HTMLDivElement | null>(null);
useEffect(() => {
const container = containerRef.current;
if (!container) return;
// ----- Renderer ---------------------------------------------------
// alpha:true so the hero gradient/border behind the canvas shows
// through where particles are sparse. premultipliedAlpha pairs with
// the premultiplied output of the render fragment shader.
const canvas = document.createElement('canvas');
canvas.style.display = 'block';
canvas.style.width = '100%';
canvas.style.height = '100%';
container.appendChild(canvas);
const renderer = new THREE.WebGLRenderer({
canvas,
antialias: false,
alpha: true,
premultipliedAlpha: true,
powerPreference: 'high-performance',
});
renderer.setClearColor(0x000000, 0);
// Clamp DPR — going above 2 on a 65k-particle field burns laptop GPUs
// with negligible visual gain.
const dpr = Math.min(window.devicePixelRatio || 1, 2);
renderer.setPixelRatio(dpr);
const initialRect = container.getBoundingClientRect();
renderer.setSize(Math.max(1, initialRect.width), Math.max(1, initialRect.height), false);
// ----- Float-texture support check --------------------------------
// EXT_color_buffer_float is required to render INTO a float target
// on WebGL2. Without it, ping-pong won't work — bail out and let the
// wrapper fall back to the static gradient.
const gl = renderer.getContext() as WebGL2RenderingContext;
const floatExt = gl.getExtension('EXT_color_buffer_float');
if (!floatExt) {
// Tear down what we built and signal failure via the canvas
// remaining empty. The wrapper checks this synchronously before
// we even mount, so this is a belt-and-braces guard.
canvas.remove();
renderer.dispose();
return;
}
// ----- Scenes & camera --------------------------------------------
// Two scenes: one for the simulation pass (fullscreen quad), one
// for the actual particle render. Both use the same OrthographicCamera
// because everything is already in clip space.
const simScene = new THREE.Scene();
const renderScene = new THREE.Scene();
const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
// ----- Ping-pong render targets ------------------------------------
const rtParams: THREE.RenderTargetOptions = {
minFilter: THREE.NearestFilter,
magFilter: THREE.NearestFilter,
format: THREE.RGBAFormat,
type: THREE.FloatType,
depthBuffer: false,
stencilBuffer: false,
generateMipmaps: false,
};
let rtA = new THREE.WebGLRenderTarget(textureSize, textureSize, rtParams);
let rtB = new THREE.WebGLRenderTarget(textureSize, textureSize, rtParams);
// ----- Init pass: seed both targets with the starting field -------
const initMaterial = new THREE.ShaderMaterial({
vertexShader: simVertex,
fragmentShader: initFragment,
});
const fsQuad = new THREE.Mesh(new THREE.PlaneGeometry(2, 2), initMaterial);
simScene.add(fsQuad);
renderer.setRenderTarget(rtA);
renderer.render(simScene, camera);
renderer.setRenderTarget(rtB);
renderer.render(simScene, camera);
renderer.setRenderTarget(null);
// Swap in the actual sim material on the same quad.
const simUniforms = {
uPrev: { value: rtA.texture },
uTime: { value: 0 },
uDelta: { value: 1 / 60 },
uRingPos: { value: new THREE.Vector2(0, 0) },
uRingRadius: { value: 0.22 },
uRingWidth: { value: 0.05 },
uRingActive: { value: 0 },
uMotionScale: { value: motionScale },
};
const simMaterial = new THREE.ShaderMaterial({
vertexShader: simVertex,
fragmentShader: simFragment,
uniforms: simUniforms,
});
fsQuad.material = simMaterial;
initMaterial.dispose();
// ----- Particle geometry: one vertex per texel --------------------
const count = textureSize * textureSize;
const indexUvs = new Float32Array(count * 2);
const positionsAttr = new Float32Array(count * 3); // unused but required
for (let y = 0; y < textureSize; y++) {
for (let x = 0; x < textureSize; x++) {
const i = y * textureSize + x;
// Sample texels at their centers, not corners.
indexUvs[i * 2 + 0] = (x + 0.5) / textureSize;
indexUvs[i * 2 + 1] = (y + 0.5) / textureSize;
}
}
const particleGeo = new THREE.BufferGeometry();
particleGeo.setAttribute('position', new THREE.BufferAttribute(positionsAttr, 3));
particleGeo.setAttribute('aIndexUv', new THREE.BufferAttribute(indexUvs, 2));
// Tell Three.js never to frustum-cull this — positions live in
// the texture, not the bounding box of the buffer geometry.
particleGeo.boundingSphere = new THREE.Sphere(new THREE.Vector3(), 10);
// Brand colors — read from --color-accent (#6366f1) and
// --color-success (#22c55e). Kept as constants here rather than
// reading from CSS variables: those resolve to oklch in modern
// Tailwind builds, which needs parsing. Hardcode the hex values
// the design system already commits to.
const colorCalm = new THREE.Color('#6366f1');
const colorHot = new THREE.Color('#22c55e');
const renderUniforms = {
uPositions: { value: rtB.texture },
uPointSize: { value: textureSize === 256 ? 1.8 : 2.4 },
uDpr: { value: dpr },
uColorCalm: { value: colorCalm },
uColorHot: { value: colorHot },
uBaseAlpha: { value: 0.42 },
};
const particleMat = new THREE.ShaderMaterial({
vertexShader: renderVertex,
fragmentShader: renderFragment,
uniforms: renderUniforms,
transparent: true,
depthTest: false,
depthWrite: false,
blending: THREE.AdditiveBlending,
});
const particles = new THREE.Points(particleGeo, particleMat);
renderScene.add(particles);
// ----- Pointer tracking ------------------------------------------
// Raw target (last pointer event), smoothed via EMA into the
// uniform each frame so the ring tracks fluidly even if events
// are sparse (touch / pen / throttled mouse).
const target = new THREE.Vector2(0, 0);
const smoothed = new THREE.Vector2(0, 0);
let hasPointer = false;
const updatePointerFromClient = (clientX: number, clientY: number) => {
const rect = container.getBoundingClientRect();
const x = ((clientX - rect.left) / rect.width) * 2 - 1;
// Flip Y so up is positive — matches clip space.
const y = -(((clientY - rect.top) / rect.height) * 2 - 1);
target.set(x, y);
hasPointer = true;
};
const onPointerMove = (e: PointerEvent) => {
updatePointerFromClient(e.clientX, e.clientY);
};
const onPointerLeave = () => {
hasPointer = false;
};
// Listen on window so the ring tracks even when the cursor is over
// the codeblocks/CTAs that sit above the canvas. The container is
// pointer-events:none-friendly because we read clientX/clientY.
window.addEventListener('pointermove', onPointerMove, { passive: true });
container.addEventListener('pointerleave', onPointerLeave, { passive: true });
// ----- Resize handling -------------------------------------------
const onResize = () => {
const rect = container.getBoundingClientRect();
if (rect.width < 1 || rect.height < 1) return;
renderer.setSize(rect.width, rect.height, false);
};
const ro = new ResizeObserver(onResize);
ro.observe(container);
// ----- Animation loop --------------------------------------------
const clock = new THREE.Clock();
let raf = 0;
let running = true;
// Defer the first frame to idle to keep LCP clean — the hero text
// is the LCP element and must paint before we start eating GPU.
const startLoop = () => {
const tick = () => {
if (!running) return;
raf = requestAnimationFrame(tick);
const delta = Math.min(clock.getDelta(), 1 / 30); // tab-switch guard
const t = clock.elapsedTime;
// Smooth the pointer position (EMA, alpha=0.15).
smoothed.x = smoothed.x * 0.85 + target.x * 0.15;
smoothed.y = smoothed.y * 0.85 + target.y * 0.15;
// Fade ring in/out when the pointer enters/leaves.
const targetActive = hasPointer ? 1 : 0;
simUniforms.uRingActive.value =
simUniforms.uRingActive.value * 0.92 + targetActive * 0.08;
simUniforms.uTime.value = t;
simUniforms.uDelta.value = delta;
simUniforms.uRingPos.value.copy(smoothed);
// Sim pass: read rtA, write rtB.
simUniforms.uPrev.value = rtA.texture;
renderer.setRenderTarget(rtB);
renderer.render(simScene, camera);
renderer.setRenderTarget(null);
// Render pass: draw particles sampling rtB.
renderUniforms.uPositions.value = rtB.texture;
renderer.render(renderScene, camera);
// Swap.
const tmp = rtA;
rtA = rtB;
rtB = tmp;
};
tick();
};
let idleHandle: number | null = null;
const w = window as Window & {
requestIdleCallback?: (cb: IdleRequestCallback) => number;
cancelIdleCallback?: (h: number) => void;
};
if (typeof w.requestIdleCallback === 'function') {
idleHandle = w.requestIdleCallback(() => startLoop());
} else {
idleHandle = window.setTimeout(startLoop, 80);
}
// ----- Cleanup ----------------------------------------------------
// Three.js leaks GPU memory aggressively if we skip any of this.
return () => {
running = false;
if (raf) cancelAnimationFrame(raf);
if (idleHandle !== null) {
if (typeof w.cancelIdleCallback === 'function') {
w.cancelIdleCallback(idleHandle);
} else {
window.clearTimeout(idleHandle);
}
}
window.removeEventListener('pointermove', onPointerMove);
container.removeEventListener('pointerleave', onPointerLeave);
ro.disconnect();
particleGeo.dispose();
particleMat.dispose();
simMaterial.dispose();
(fsQuad.geometry as THREE.BufferGeometry).dispose();
rtA.dispose();
rtB.dispose();
renderer.dispose();
if (canvas.parentNode) canvas.parentNode.removeChild(canvas);
};
}, [textureSize, motionScale]);
// The container is the surface that receives pointer events.
// Visually transparent — the canvas it owns paints the field.
return (
<div
ref={containerRef}
aria-hidden="true"
className="absolute inset-0 size-full"
/>
);
}

163
apps/web/components/particle-hero/index.tsx Normal file
View File

@@ -0,0 +1,163 @@
'use client';
/**
* ParticleHero — public entry to the WebGL particle background.
*
* Responsibilities (kept OUT of ParticleField so that component can
* assume happy-path WebGL2):
*
* 1. WebGL2 missing → static gradient.
* 2. Mobile / low-power profile → either 16k particles or skip.
* 3. prefers-reduced-motion → still WebGL + cursor tracking, but
* capped at 16k particles with halved drift and halved push
* velocity. The ring still follows the cursor at full fidelity
* because that's the interaction the user explicitly wants; we
* only damp the *ambient* motion so the field reads as calm.
* 4. Lazy-load Three.js via next/dynamic so the hero LCP text isn't
* blocked by ~150kb of WebGL plumbing.
*
* The static fallback is a CSS-only radial gradient + faint dot mask.
* It looks intentional, not broken — same color story as the live
* particle field, just without motion.
*/
import dynamic from 'next/dynamic';
import { useEffect, useState } from 'react';
type Capability =
| { kind: 'unknown' }
| { kind: 'fallback' }
| { kind: 'webgl'; textureSize: 128 | 256; motionScale: number };
// Dynamic import keeps three out of the initial bundle. ssr:false
// because there's no DOM/Canvas during SSR anyway.
const ParticleField = dynamic(
() => import('./ParticleField').then((m) => ({ default: m.ParticleField })),
{
ssr: false,
// No loading UI — the static gradient already lives at z-0 above
// until this resolves, and the canvas paints into the same slot.
loading: () => null,
},
);
/**
* Detect WebGL2 + float-render-target support without keeping the
* context around. We create a throwaway canvas, ask for `webgl2`, and
* probe `EXT_color_buffer_float`. If anything fails we fall back.
*
* Runs sync-only in the browser; never during SSR.
*/
function detectWebGL2(): boolean {
try {
const c = document.createElement('canvas');
const gl = c.getContext('webgl2');
if (!gl) return false;
const ext = gl.getExtension('EXT_color_buffer_float');
// Losing context to ensure we don't leak the probe.
const loseExt = gl.getExtension('WEBGL_lose_context');
loseExt?.loseContext();
return Boolean(ext);
} catch {
return false;
}
}
export function ParticleHero() {
// Start in 'unknown' so SSR markup matches the first client render —
// the fallback gradient is rendered until we resolve capability, so
// there's no flash either way.
const [cap, setCap] = useState<Capability>({ kind: 'unknown' });
useEffect(() => {
// 1. WebGL2 + float targets — hard gate. Without these the sim
// can't run at all, fall through to the static gradient.
if (!detectWebGL2()) {
setCap({ kind: 'fallback' });
return;
}
const reduce = window.matchMedia('(prefers-reduced-motion: reduce)');
/**
* Pick the right particle tier for the device.
*
* Returns a non-fallback WebGL config OR null when the device is
* too constrained to render the field at all (low-core phones).
* Reduced-motion does NOT shrink the tier here — it's applied as
* a separate motion scalar on top, because the user still wants
* the cursor-tracking interaction.
*/
const pickTier = (): Capability => {
// Heuristic: small viewport OR an absurd DPR (low-DPI phones lying
// about retina) with no high-end signal. hardwareConcurrency is a
// rough but free proxy; logical cores <= 4 on a small viewport is
// a strong hint we shouldn't push 65k particles.
const isNarrow = window.matchMedia('(max-width: 768px)').matches;
const dpr = window.devicePixelRatio || 1;
const cores = navigator.hardwareConcurrency ?? 4;
const reduced = reduce.matches;
// Motion-reduce caps drift + ring-push velocity at 50% but keeps
// pointer position fidelity at 100%. 1.0 means "default motion".
const motionScale = reduced ? 0.5 : 1.0;
if (isNarrow) {
// Phones: drop to 16k. Going lower than that and the field
// visibly thins out; going higher and we cook batteries.
// 4-core phones get the static fallback — those are the
// budget Androids most likely to thermal-throttle.
if (cores <= 4) {
return { kind: 'fallback' };
}
return { kind: 'webgl', textureSize: 128, motionScale };
}
if (dpr > 2.5 && cores <= 4) {
// High-DPI low-core — likely a low-end tablet.
return { kind: 'webgl', textureSize: 128, motionScale };
}
// Desktop / capable tablet. Reduced-motion users get the same 128
// tier as mobile — fewer particles means less ambient activity in
// peripheral vision, which is what the motion preference is for.
if (reduced) {
return { kind: 'webgl', textureSize: 128, motionScale };
}
return { kind: 'webgl', textureSize: 256, motionScale };
};
setCap(pickTier());
// Respond to motion-preference changes mid-session — re-pick the
// tier so toggling the OS setting takes effect without a reload.
const onReduceChange = () => setCap(pickTier());
reduce.addEventListener('change', onReduceChange);
return () => reduce.removeEventListener('change', onReduceChange);
}, []);
// Static fallback: radial indigo glow + faint dotted mask.
// Used both for 'unknown' (pre-hydration) and 'fallback'.
if (cap.kind !== 'webgl') {
return (
<div
aria-hidden="true"
className="absolute inset-0 size-full overflow-hidden"
style={{
backgroundImage: [
// Soft indigo glow centered on the hero
'radial-gradient(60% 80% at 50% 45%, rgba(99,102,241,0.18), rgba(99,102,241,0) 70%)',
// Very faint dotted texture — reads as "field of particles
// at rest" rather than a flat gradient.
'radial-gradient(circle at 1px 1px, rgba(255,255,255,0.05) 1px, transparent 1.5px)',
].join(', '),
backgroundSize: '100% 100%, 24px 24px',
}}
/>
);
}
return <ParticleField textureSize={cap.textureSize} motionScale={cap.motionScale} />;
}
export default ParticleHero;

295
apps/web/components/particle-hero/shaders.ts Normal file
View File

@@ -0,0 +1,295 @@
/**
* GLSL shaders for the particle-field hero.
*
* Shaders are exported as tagged-template strings with a leading
* `/* glsl *\/` comment marker so future syntax highlighters or
* static analysers can pick them up without us adding a webpack loader.
*
* Conventions:
* - All positions live in clip-space-like coordinates: x, y ∈ [-1, +1].
* - Position texture is RGBA32F:
* r = x
* g = y
* b = scale (per-particle render size jitter)
* a = velocity magnitude (used for color tint)
* - Simulation runs in a fullscreen quad pass — each fragment = one particle.
*/
const simplexNoise = /* glsl */ `
// 2D simplex noise by Ian McEwan / Ashima Arts — public domain.
// Used both for idle drift in the sim and for organic distortion of
// the cursor-tracking ring.
vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
vec2 mod289(vec2 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
vec3 permute(vec3 x) { return mod289(((x * 34.0) + 1.0) * x); }
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 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
vec4 x12 = x0.xyxy + C.xxzz;
x12.xy -= i1;
i = mod289(i);
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);
}
`;
/**
* Sim vertex shader — trivial fullscreen pass.
* Writes through clip-space UVs so the fragment shader receives one
* fragment per particle in the position texture.
*/
export const simVertex = /* glsl */ `
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = vec4(position, 1.0);
}
`;
/**
* Sim fragment shader — the actual integrator.
*
* Inputs:
* uPrev — previous-frame position texture (ping-pong source)
* uTime — elapsed seconds
* uDelta — clamped frame delta (seconds), guards against tab-switch spikes
* uRingPos — mouse position in clip space, smoothed
* uRingRadius— current ring radius (clip-space units)
* uRingWidth — base ring thickness (clip-space units)
* uRingActive— 0..1 fade so the ring softly vanishes when the mouse leaves
* uMotionScale— global multiplier on drift + ring-push velocity. 1.0 is
* default; the prefers-reduced-motion path passes 0.5 so
* the field reads as calm without removing interaction.
* Pointer *position* is not scaled — the ring still
* tracks the cursor at full fidelity.
*
* Per-particle dynamics:
* 1. Idle drift: rotational simplex-noise velocity field — feels like
* slow oceanic currents rather than random brownian jitter.
* 2. Ring push: three overlapping smoothstep bands at slightly offset
* radii, with the radius input distorted by simplex noise and a
* polar sin/cos wave. The gradient of the resulting field is
* applied as an outward push, so particles get gently shoved as
* the ring sweeps over them.
* 3. Containment: a very soft spring pulls particles back toward the
* origin if they drift past the field edge — prevents particles
* from escaping to infinity on long sessions.
* 4. Damping: every frame velocity decays so the field returns to a
* calm steady state when the mouse is idle.
*/
export const simFragment = /* glsl */ `
precision highp float;
uniform sampler2D uPrev;
uniform float uTime;
uniform float uDelta;
uniform vec2 uRingPos;
uniform float uRingRadius;
uniform float uRingWidth;
uniform float uRingActive;
uniform float uMotionScale;
varying vec2 vUv;
${simplexNoise}
// Organic ring field — value peaks ON the ring, falls off either side.
// Three overlapping smoothstep bands with simplex-noise + polar-wave
// distortion to keep the boundary breathing instead of geometric.
float ringField(vec2 p) {
vec2 d = p - uRingPos;
float r = length(d);
float ang = atan(d.y, d.x);
// Breathing distortion of the radius itself.
float noise = snoise(p * 4.0 + uTime * 0.35) * 0.05;
// Polar wave — a slow rippling around the circumference.
float wave = sin(ang * 5.0 + uTime * 1.2) * 0.012
+ cos(ang * 3.0 - uTime * 0.7) * 0.010;
float rr = r + noise + wave;
// Three bands of different thickness at slightly offset radii.
float w = uRingWidth;
float b1 = smoothstep(uRingRadius - w * 0.30, uRingRadius, rr)
* (1.0 - smoothstep(uRingRadius, uRingRadius + w * 0.30, rr));
float b2 = smoothstep(uRingRadius - w * 0.80, uRingRadius - w * 0.15, rr)
* (1.0 - smoothstep(uRingRadius - w * 0.15, uRingRadius + w * 0.65, rr));
float b3 = smoothstep(uRingRadius - w * 1.40, uRingRadius - w * 0.50, rr)
* (1.0 - smoothstep(uRingRadius - w * 0.50, uRingRadius + w * 1.20, rr));
return (b1 * 1.0 + b2 * 0.55 + b3 * 0.30) * uRingActive;
}
void main() {
vec4 prev = texture2D(uPrev, vUv);
vec2 pos = prev.xy;
float scale = prev.z;
float velPrev = prev.w;
// --- Idle drift: rotational simplex-noise current ---
// Time is scaled by uMotionScale so reduced-motion users get a
// calmer field that evolves at half speed.
float driftTime = uTime * uMotionScale;
float n1 = snoise(pos * 1.6 + vec2(driftTime * 0.08, 0.0));
float n2 = snoise(pos * 1.6 + vec2(0.0, driftTime * 0.08) + 53.7);
vec2 driftVel = vec2(-n2, n1) * 0.045 * uMotionScale; // curl-like rotation
// --- Ring push: gradient of the ring field, pointing outward ---
float h = 0.003;
float fx0 = ringField(pos - vec2(h, 0.0));
float fx1 = ringField(pos + vec2(h, 0.0));
float fy0 = ringField(pos - vec2(0.0, h));
float fy1 = ringField(pos + vec2(0.0, h));
vec2 grad = vec2(fx1 - fx0, fy1 - fy0) / (2.0 * h);
float fieldHere = ringField(pos);
// Push along gradient — particles get nudged away from the ring crest.
// Magnitude is scaled by uMotionScale so reduced-motion users get a
// softer shove while the ring position still tracks at full fidelity.
vec2 ringVel = grad * fieldHere * 0.55 * uMotionScale;
// --- Soft containment toward origin if particle escaped ---
float r = length(pos);
vec2 containVel = vec2(0.0);
if (r > 1.05) {
containVel = -normalize(pos) * (r - 1.05) * 0.6;
}
// --- Integrate ---
vec2 vel = driftVel + ringVel + containVel;
vec2 next = pos + vel * uDelta * 60.0; // normalise to 60fps reference
// Velocity magnitude for color tint — EMA so flash decays gracefully.
float velMag = length(vel);
float velOut = mix(velPrev, velMag, 0.20);
gl_FragColor = vec4(next, scale, velOut);
}
`;
/**
* Render vertex shader — one vertex per particle, sampled from the
* position texture. The vertex's `position` attribute is unused;
* instead `aIndexUv` carries the (u, v) coordinate of this particle
* inside the position texture, and we read the actual position from
* `uPositions`.
*
* `gl_PointSize` is scaled by per-particle `scale` (z channel) and the
* device pixel ratio so the disc stays the same physical size on
* retina displays.
*/
export const renderVertex = /* glsl */ `
precision highp float;
uniform sampler2D uPositions;
uniform float uPointSize;
uniform float uDpr;
attribute vec2 aIndexUv;
varying float vVel;
varying float vScale;
void main() {
vec4 p = texture2D(uPositions, aIndexUv);
vScale = p.z;
vVel = p.w;
// Position is already clip-space xy in [-1, +1]; pin z = 0.
gl_Position = vec4(p.xy, 0.0, 1.0);
gl_PointSize = uPointSize * p.z * uDpr;
}
`;
/**
* Render fragment shader — anti-aliased disc + velocity-based tint.
*
* Color: most of the field stays calm indigo at low opacity; particles
* that just got shoved by the ring (high velocity) flash toward a
* success-green tint. Output is premultiplied so additive blending
* gives the bloom-like glow without needing a post-process pass.
*/
export const renderFragment = /* glsl */ `
precision highp float;
uniform vec3 uColorCalm; // indigo
uniform vec3 uColorHot; // success-green
uniform float uBaseAlpha;
varying float vVel;
varying float vScale;
void main() {
// Disc SDF — anti-aliased round dot.
float d = length(gl_PointCoord - 0.5);
float a = smoothstep(0.5, 0.42, d);
if (a <= 0.001) discard;
// Velocity-driven mix: pin to indigo for typical drift, lerp toward
// green only on real shoves. The 0.04..0.18 band is roughly where
// ring pushes live; idle drift stays below 0.03.
float t = smoothstep(0.04, 0.18, vVel);
vec3 col = mix(uColorCalm, uColorHot, t);
float alpha = uBaseAlpha * a * (0.6 + 0.4 * vScale);
// Premultiplied alpha — pairs with THREE.AdditiveBlending.
gl_FragColor = vec4(col * alpha, alpha);
}
`;
/**
* Init fragment — runs once into both ping-pong targets to seed the
* starting field. Uses a tempered random distribution: uniform in the
* disc, with a small radial bias toward the edges so the field doesn't
* look like a bullseye on first frame.
*/
export const initFragment = /* glsl */ `
precision highp float;
varying vec2 vUv;
${simplexNoise}
// Tiny hash for per-particle deterministic randoms.
float hash(vec2 p) {
return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453);
}
void main() {
float r1 = hash(vUv);
float r2 = hash(vUv + 17.3);
float r3 = hash(vUv + 91.7);
// Polar-uniform disc with a soft outward bias.
float angle = r1 * 6.28318;
float radius = sqrt(r2) * 1.0;
vec2 pos = vec2(cos(angle), sin(angle)) * radius;
// Slight horizontal stretch so the field reads as a wide hero band,
// not a perfect circle.
pos.x *= 1.25;
float scale = 0.55 + r3 * 0.85;
gl_FragColor = vec4(pos, scale, 0.0);
}
`;