Propositions — septembre 2026
Refonte complète de harels.ch et de inzpocket.com : trois directions artistiques abouties pour chaque site — animées, en 3D, responsives, accessibles et prêtes à être mises en ligne.
Refonte complète de harels.ch sur les textes, les photos de chantier, le logo et le rouge de HARELS SA : 13 pages par direction (accueil, services, 7 fiches métier, réalisations, à propos, contact, mentions légales), plus 15 fiches projet pour Blueprint, générées depuis un modèle de contenu unique.
Escalier hélicoïdal WebGL temps réel éclairé par une gerbe d’étincelles, typographie industrielle monumentale, services en défilement horizontal, photos de chantier et rouge de la marque.
Big Shoulders · Manrope · JetBrains Mono
Ouvrir la direction Forge
Plans et élévations SVG cotés qui se tracent au scroll, règle millimétrée, fiches techniques, planning de Gantt, une fiche par réalisation avec ses photos de chantier, cartouche en pied de page.
Archivo (axe de largeur) · IBM Plex Mono
Ouvrir la direction Blueprint
Sculpture de métal liquide (shader) qui change de finition — acier, inox, aluminium — avec la palette de la page ; mise en page magazine, sommaire à aperçus, galerie de photos de chantier à glisser.
Instrument Serif · Geist · Geist Mono
Ouvrir la direction MatièreTrois identités pour le studio, construites sur les textes, le bleu et l’image 3D en verre d’inzpocket.com : une page d’accueil complète (expertises, étude de cas, méthode, FAQ, contact) et une étude de cas HARELS détaillée.
Aurore en shader WebGL natif qui réagit au curseur, verre 3D d’origine, cartes à projecteur, deck d’étude de cas empilé, méthode à rail de progression, horloge suisse en direct.
Manrope · Bricolage Grotesque · Geist
Ouvrir la direction Nocturne
Grille 12 colonnes stricte, logotype géant à graisse variable pilotée par le curseur, phrase ponctuée d’images, liste de travaux à aperçu, bloc bleu Inzpocket.
Manrope · Inter Tight · Geist Mono
Ouvrir la direction Swiss Grid
Objets 3D brillants qui fuient le curseur et sautent au clic, stickers déplaçables, configurateur de projet, navigateurs inclinables, blobs animés.
Manrope · Unbounded · DM Sans
Ouvrir la direction Pocket UniverseBibliothèque visuelle
Des visualisations complémentaires : chaque type d’ouvrage a été modélisé de façon générique et paramétrique (profilés HEA/IPE, limons, hélices, lames, verre) puis rendu par accumulation (ombres douces, occlusion, profondeur de champ). Ce ne sont pas des réalisations de HARELS SA. Les sites utilisent désormais les photos de chantier de harels.ch, importées par tools/fetch-originals.mjs ; les rendus n’illustrent plus que les sujets sans photo (escalier hélicoïdal, façades, ateliers).
Sous le capot
ScrollTrigger, SplitText, DrawSVG, Draggable, Inertia — défilement fluide synchronisé.
Escalier temps réel, métal liquide, jouets 3D, aurore en shader natif — chargés à la demande.
Pages générées au build, bundles esbuild découpés, images WebP responsives, aucun CDN tiers.
Sémantique, focus visibles, navigation clavier, « réduire les animations » respecté, repli sans WebGL.