Next.js 15 + React 19 + Three.js + postprocessing ASCII shader, with the
Efecto fragment-shader as the visual layer over a video texture of Elle.
The site is the corporate face of ZBS GG Consulting — independent research lab behind Garden (Pulse engine, Hearth chat, public bench). Built to support grant applications and serve as a stable home for the project family.
- Next.js 15 App Router (TS, React 19)
- Three.js + @react-three/fiber + @react-three/postprocessing
- postprocessing v6 with a custom Efecto-port
AsciiEffect - One client
<canvas>rendering a fullscreenVideoTexturewith cover-fit shader, all post-processed through the ASCII fragment shader - Vanilla CSS (no Tailwind)
npm install
npm run dev # http://localhost:3000/— landing (hero, evidence + interactive memory timeline, declared (Elle), manifesto, projects, contact)/preview— Pulse MCP install page (zero-config command, agent install prompt, 90s demo video, trust boundaries, wipe path)/bench— benchmark leaderboard + method/dev— live debug panel (sliders for every postfx uniform;Copy JSONexports the current preset)
zbs-site/
├── app/
│ ├── layout.tsx html shell + metadata
│ ├── page.tsx landing content (hero / evidence / declared / manifesto / projects / contact)
│ ├── dev/page.tsx /dev — live tweak panel
│ └── globals.css theme + layout (mono / sans, mix-blend-mode: difference)
├── components/
│ ├── ascii-effect.tsx Efecto-port ASCII shader as `postprocessing.Effect`
│ ├── video-scene.tsx Canvas + VideoQuad (cover-fit) + EffectComposer
│ ├── client-bg.tsx client wrapper for SSR-disabled VideoScene
│ ├── memory-timeline.tsx interactive salience canvas (anchor-aware decay toggle)
│ └── scramble-text.tsx text-scramble effect on hover (ASCII menu)
└── public/
├── elle-1.mp4 primary video (10s loop, 4k @ 24fps)
└── elle-2.mp4 alternate
All exposed via <VideoScene> props or in /dev:
| Group | Props |
|---|---|
| source | src, style (standard / dense / minimal / blocks) |
| cell | cellSize, invert, colorMode |
| image | contrastAdjust, brightnessAdjust |
| halo | mouseGlowEnabled / Radius / Intensity |
| vignette | vignetteIntensity / Radius |
| CRT | scanlineIntensity / Count, aberrationStrength |
| noise | noiseIntensity / Scale / Speed |
| wave | waveAmplitude / Frequency / Speed |
| glitch | glitchIntensity / Frequency |
| jitter | jitterIntensity / Speed |
| distort | curvature |
| frame | targetFPS (0 = unlocked) |
| palette | colorPalette (original / green / amber / cyan / blue) |
Default landing wiring lives in app/page.tsx. Any preset exported via
/dev → Copy JSON can be pasted directly as the postfx prop.
Cloudflare Pages (free tier, zero-config for Next.js 15):
npx wrangler pages deploy .next --project-name=zbs-ggOr via the dashboard: Connect Git → framework preset Next.js → build npm run build → output .next. Custom domain zbs.gg via DNS CNAME to the
pages.dev target.
Vercel:
npx vercelAuto-detected. Custom domain zbs.gg → A/AAAA records to Vercel.
MIT for code. Video assets (public/elle-*.mp4) are not licensed for
redistribution — replace with your own before publishing the repo.