Formline Studio Hero
Free React Hero Section built with Three.js, WebGL, GLSL, CSS, TypeScript.
A quiet, editorial studio hero in black and white. A centred nav (wordmark, three links with sliding underlines, a black “Get in touch” button), a short centred intro, and one giant word fitted by its visible letter shapes so it meets the nav’s margins exactly at any width, its letters rising in one by one. Beneath it a large media block sits on the same margins, its black-and-white picture settling and drifting slowly as the page scrolls and warming to colour on hover, while the cursor becomes a round white “Play reel” badge that eases after it. Fully responsive and respects reduced motion. The media block is filled with the Organic Bio-Shader: folded, flowing WebGL silk in any of its palettes (or a picture of your own). Its signature: the giant word sits with the lower 39.5% of its letters over the top edge of the media block, ink above the edge and white where it crosses the shader. Under the intro a quiet row carries a pulsing availability note, a figure and a “Selected work” link, and the shader’s own colour is echoed in the logo’s ® and the status dot.
Installation
npm install threeMore Hero Sections
- Lime Studio Hero – React Hero Section
- Ember Desk Hero – React Hero Section
- Perspective Dashboard Hero – React Hero Section
- Card Conveyor Upload Hero – React Hero Section
- Resonance Arch Hero – React Hero Section
- Fieldwork Studio Hero – React Hero Section