Hold
Maintenir = la cloche se lève lentement ; relâcher = elle retombe amortie. Pour la scène WebGL de Mayor.
maintenir
SpawnKit Studio — boîte à outils frontend, en direct
Les techniques qui font un site à cinq chiffres.
Chaque section ci-dessous est une technique réelle, appliquée à Mayor Traiteur, SBR Therapy, OpenCRM et FeedCast. Pas de maquette : ce que tu vois tourne dans cette page.
01
Mascotte
Un personnage qui te regarde.
Bouge la souris · clique sur Spawn
Sur mobile : la mascotte reste en place, les yeux suivent le toucher
Comment
Une image transparente + deux yeux en CSS. Les pupilles suivent le pointeur avec un lissage exponentiel (lerp 0.12). Le corps global suit à 60 fps via requestAnimationFrame, avec inertie et léger tilt.
Où
SBR (React → page-mascot npm, MIT), Mayor en version discrète sur la 404 uniquement, OpenCRM dans l'état vide du chat. Jamais sur les pages de conversion Mayor : le ton luxe ne s'y prête pas.
Garde-fous
Désactivée sur écran tactile et sous prefers-reduced-motion. Zéro dépendance, 2 Ko de JS, 1 PNG.
02
Motion
Les détails qui paraissent coûteux.
Counter
Le chiffre monte quand il entre à l'écran, easing out, chiffres tabulaires pour ne pas trembler.
0CONVIVES MAX
Glow + Arrow
Bordure conique animée via @property, flèche qui glisse au survol. Le bouton « physical key » descend de 2 px au clic.
Réponse sous 24 h
03
Bento
Une grille qui hiérarchise, pas qui range.
Le mouvement est une matière
Une seule courbe d'easing partagée par tout le site.
10→1000
convives, une seule cuisine
4,6 / 5
38 avis Google — la preuve avant l'argument
Asymétrie
2×3, jamais 3×3
Voix
3 animateurs clonés
Une case porte l'action
La plus grande tuile est toujours le CTA ou la preuve, jamais la déco.
04
Conversion
Le formulaire vit sur la home.
Mayor a aujourd'hui cinq liens vers /contact et zéro formulaire sur sa page d'accueil. SBR n'a ni téléphone ni formulaire. La règle : quatre champs, la preuve à côté, le reste replié. Sur mobile, une barre sticky apparaît une fois le hero passé — descends pour la voir.
- Un seul ask par page, répété après chaque section majeure
- Micro-réassurance collée au bouton : délai, note, minimum
- Email n'est plus une porte : le téléphone suffit
- Ce qui est réversible s'envoie sans confirmation
05
Système
Un DESIGN.md par site, lu par les agents.
Cette page est construite depuis les jetons ci-contre. Le même fichier, commité dans le repo et référencé dans CLAUDE.md, empêche les 14 directions Mayor et les 11 concepts SBR de diverger à chaque itération. Refero fournit des exemples copiables ; on convertit au format Google puis npx @google/design.md lint.
--e0#131210
--cream#efe6d6
--copper#c47a3a
--ink / --ink-33 niveaux
--e3 (flottant)+12 % · blur 14
--- version: alpha name: SpawnKit Studio --- # SpawnKit Studio — Style Reference Warm near-black, cream ceramic, copper as the only accent. Serif for feeling (Fraunces, opsz 144), sans for doing (Inter Tight). ## Colors | token | value | role | | --e0 | #131210 | page | | --e1 | #1b1916 | panel (+4 %) | | --e2 | #23201c | card (+8 %) | | --e3 | #2c2823 | floating (+12 %, blur 14) | | --cream | #efe6d6 | display, key surfaces | | --copper | #c47a3a | accent — buttons, rules, one tile | ## Motion | --out | cubic-bezier(.22,1,.36,1) | settle | | --spring | cubic-bezier(.34,1.56,.64,1) | snap-in | | durations | 140 / 260 / 520 ms | ## Rules - DO: one primary ask per page; proof beside every button. - DO: reveal with a no-JS fallback (`html.js .rv`). - DON'T: gradients as background; icons above every heading. - DON'T: a second accent. Copper or nothing.
06
Erreur
Une 404 qui reste dans la marque.
« Cette assiette est vide. »
Pour Mayor : la scène WebGL déjà chargée — on soulève la cloche, il n'y a rien dessous, deux sorties : Catalogue et Devis. Pour SBR : « la colonne s'est désalignée », un bouton « Book an assessment ». Pour OpenCRM : la mascotte hausse les épaules dans le chat vide et propose trois actions.
Source 404s.design · footer.design07
Audio
Trois voix, sans ElevenLabs ?
FeedCast tourne sur eleven_v3 + text-to-dialogue. VoiceStudio (16 moteurs, API OpenAI-compatible) n'est pas un remplacement 1:1 : dialogue par réplique + assemblage, pas de tags d'émotion, et le moteur par défaut est non commercial. Reste trois candidats sérieux.
| Moteur | FR | Clonage | Émotion | Licence | Cible |
|---|---|---|---|---|---|
| VoxCPM2 | oui | oui | instruct | Apache-2.0 | Mac M4 Pro |
| PocketTTS | oui | oui | non | CC-BY-4.0 | sycopa CPU |
| CosyVoice 3 | oui | oui | tags | Apache-2.0 | GPU loué |
| OmniVoice | oui | oui | partiel | CC-BY-NC | interdit |
→
Roadmap
Trois vagues, six semaines.
Corriger, puis systématiser
- Fix reveal sans fallback — Mayor, SBR, OpenCRM landing
- DESIGN.md × 4 sites (Mayor, SBR, OpenCRM, FeedCast app) + lien CLAUDE.md
- Mascotte Spawn : sprite final, package interne
@spawnkit/mascot(vanilla + React) - Test RTF + écoute : VoxCPM2 (Mac) vs PocketTTS (sycopa)
Faire convertir Mayor et SBR
- Mayor : devis inline home + sticky mobile + bento Formules
- SBR : hero booking (soin + créneau → Jane) + téléphone + FAQ/testimonials (blocs UIAble)
- Footers 4 colonnes + 404 de marque sur les deux
- Cloche « hold » + counter prix/convives
OpenCRM et FeedCast
- OpenCRM : état vide du chat avec mascotte + action chips ; ⌘K ; artefacts inline (brief « AI at the Core »)
- OpenCRM landing : bento fonctionnalités + CTA « essayer avec vos données »
- FeedCast : bascule TTS si le test d'écoute passe ; sinon rester Eleven et documenter pourquoi
- agentmemory en essai 2 semaines, export Obsidian