Overview
Yohaku is a one-screen hero for a brand and editorial studio. A centered headline, a short statement and two calls to action sit above a WebGL picture tunnel: 28 pictures travel along a curved track and fold toward the viewer when they move fast. Visitors can drag the tunnel with a mouse or a finger, scroll sideways on a trackpad or use the arrow keys, and a pause button stops the motion. The page is exactly one screen tall on every device, with layouts tuned for phones, short phones, short laptops and wide screens, and the buttons and links have quiet hover states on devices with a mouse. Colours, corners and spacing come from CSS variables, and the tunnel's speed, gap, fold, exit smear, colour fringe and haze are options in one file. Reduced-motion preferences stop the cruise and the fold, and without WebGL the first picture shows as a still. There is no build step: three.js 0.180.0 is bundled and loaded through an import map. Included: complete HTML, CSS and JavaScript source with the tunnel engine, 28 WebP pictures, three.js 0.180.0 vendored with its license, a README with run, customization and deploy notes, AGENTS.md and CLAUDE.md for AI coding agents, and credits, packaged as a private member download.
Highlights
- Production-ready, documented source
- Clean, componentized architecture
- Drops into your stack with minimal setup
