hazmatstudio.com
Le site de mon activité de conseil web et IA. Identité visuelle : Melody Bossan.
- Rôle
- [Ton rôle]
- Stack
- Next.js, WebGL, Vercel
- Savoir-faire
- Web
01 · Contexte
HAZ/MAT Studio, c’est mon activité de conseil et de développement web, mobile et IA, sur la Côte d’Azur et à distance. Le site devait présenter l’offre en quelques secondes et porter une identité forte, nocturne et néon, imaginée par Melody Bossan.
02 · Les problèmes à résoudre
Sortir du lot face aux sites de consultants, souvent interchangeables, sans brouiller la lecture de l’offre.
Un ciel animé en plein écran qui reste fluide, même sur un ordinateur modeste ou un téléphone.
Une identité lumineuse et nette à toutes les tailles, en français comme en anglais.
03 · Fonctionnalités
Ciel de particules
3 400 étoiles en WebGL qui gravitent autour du logo et s’écartent sur le passage de la souris.
Logo néon
Un tracé SVG et deux filtres de halo : net à toutes les tailles, sans aucune image.
Bandeau des savoir-faire
Intelligence artificielle, automatisation, applications web, conseil : l’offre défile en continu.
Version anglaise
Une bascule FR / EN directement dans la navigation.
04 · La solution technique
Tout le ciel en un seul appel à la carte graphique.
Les 3 400 particules sont animées par un shader : orbite, scintillement et couleur sont recalculés à chaque image directement sur la carte graphique, et tout le ciel part en un seul appel de dessin. Le processeur reste libre pour le reste de la page.
- Vertex shader
- Orbites, ondulation et palette calculées pour chaque étoile, sans boucle JavaScript.
- Attracteur
- Les étoiles s’écartent autour du pointeur puis reviennent ; sans souris, l’attracteur suit une courbe lente.
- SVG
- Logo et halos en vectoriel : aucune image à charger pour l’identité.
- Next.js · Vercel
- Un site Next.js, déployé sur Vercel.
05 · Résultats
[Score]
Performance Lighthouse
[Délai]
Affichage complet
[Nombre]
Demandes de contact