hazmatstudio.com
The website of my web and AI consulting practice. Visual identity: Melody Bossan.
- Role
- [Your role]
- Stack
- Next.js, WebGL, Vercel
- Expertise
- Web
01 · Context
HAZ/MAT Studio is my web, mobile and AI consulting and development practice, on the French Riviera and remote. The site had to present the offer in a few seconds and carry a strong, nocturnal, neon identity designed by Melody Bossan.
02 · The problems to solve
Stand out from consultant websites, which often look interchangeable, without blurring the offer.
A full-screen animated sky that stays smooth, even on a modest computer or a phone.
A bright, crisp identity at every size, in French and in English.
03 · Features
Particle sky
3,400 WebGL stars orbiting the logo and moving aside as the mouse passes.
Neon logo
An SVG path and two glow filters: crisp at every size, without a single image.
Expertise ticker
Artificial intelligence, automation, web applications, consulting: the offer scrolls continuously.
English version
An FR / EN switch right in the navigation.
04 · The technical solution
The whole sky in a single call to the GPU.
The 3,400 particles are animated by a shader: orbit, twinkle and colour are computed every frame directly on the graphics card, and the whole sky goes out in a single draw call. The CPU stays free for the rest of the page.
- Vertex shader
- Orbits, ripples and palette computed for each star, without a JavaScript loop.
- Attractor
- Stars move aside around the pointer, then come back; without a mouse, the attractor follows a slow curve.
- SVG
- Logo and glows in vector: no image to load for the identity.
- Next.js · Vercel
- A Next.js site, deployed on Vercel.
05 · Results
[Score]
Lighthouse performance
[Time]
Full render
[Number]
Contact requests