Le showroom de Studio TOLA
Tout ce qu’un site peut faire bouger.
Typographie, couleurs, animations, 3D : tout ce qui donne du caractère à un site, en démonstrations que vous pouvez toucher. Passez la souris ou le doigt sur le titre : il réagit déjà.
Une direction artistique par métier
Un restaurant ne se présente pas comme un cabinet d’avocats. Choisissez un secteur : la même page change de palette, de typographie, de formes et de ton.
Ce soir, tout passe par la braise.
Une carte courte qui suit le marché, des produits cuits au feu de bois, une terrasse à l’ombre des platanes.
Plat du moment
Poulpe grillé, pommes de terre fumées, huile au piment doux.
Tons de braise, serif gourmande, bouton de réservation bien visible : la page donne faim avant de donner l’information.
Palette
- #140e0b
- #231813
- #f4e9d6
- #eca93f
- Titres
- Fraunces
- Texte
- Manrope
Au fil du scroll
L’animation suit la lecture au lieu de la devancer : ce qui bouge, c’est ce que le visiteur est en train de regarder.
Un bon site ne récite pas tout d’un bloc. Il raconte au rythme de la lecture : chaque mot s’allume quand votre regard l’atteint, et l’histoire avance avec vous.
Un tracé qui se dessine
Plan d’accès, parcours, frise chronologique : la ligne avance quand on descend, et recule quand on remonte.
- GSAP
- ScrollTrigger
- SVG
- couverts par mois
- 0
- ans de métier
- 0
- producteurs partenaires
- 0
Des chiffres qui comptent
Valeurs d’exemple : sur un vrai site, uniquement des chiffres vérifiés avec le client.
- Anime.js
Des cartes qui s’empilent pendant le défilement, ici avec les quatre étapes d’un projet chez Studio TOLA.
- 1
Audit et recherche
Votre site actuel mesuré, votre secteur étudié, vos concurrents regardés de près.
- 2
Direction artistique et code
Une identité propre à votre métier, codée sur mesure, relue à chaque étape avec vous.
- 3
SEO, légal, accessibilité
Balises, données structurées, mentions légales, cookies et déclaration d’accessibilité.
- 4
Mise en ligne
Un lien de prévisualisation pour valider, puis votre nom de domaine branché.
Micro-interactions
Les détails qui répondent au geste : chaque clic, chaque survol confirme au visiteur que le site l’a compris.
Bouton magnétique
Le bouton principal attire le curseur : l’action clé se remarque sans crier.
- Framer Motion
- ressorts physiques
Carte de saison
Menu du marché
Entrée, plat, dessert
Carte en relief
Plats, produits, réalisations : la carte s’incline et capte la lumière sous la souris.
- Framer Motion
- perspective 3D
Bouton qui raconte l’envoi
Formulaire, commande, réservation : le bouton montre ce qui se passe, jusqu’à la confirmation.
- Framer Motion
- layout animation
Favori avec éclat
Un petit plaisir au clic, qui confirme le geste sans ouvrir de fenêtre.
- Framer Motion
- AnimatePresence
Texte qui se décode
Pour un nom, un slogan, un chiffre clé : l’œil s’arrête dessus.
- React
- setInterval
Promenez la souris ici
Lampe torche
Révéler un message ou une image au passage du curseur, pour une page qui se découvre.
- Framer Motion
- CSS mask
3D et génératif
Des visuels calculés en direct plutôt que des photos de banque d’images : uniques, légers, et chargés seulement quand on s’en approche.
Objet 3D manipulable
Un produit, un logo, une forme de marque : on l’attrape et on le fait tourner. Glissez pour essayer.
- Three.js
- React Three Fiber
- chargé à la demande
Art génératif
Un fond vivant qui ne se répète jamais, sans photo ni vidéo à télécharger. Passez la souris pour écarter le flux.
- Canvas 2D
- bruit de Perlin (simplex)
Mises en page
Les mêmes contenus, plusieurs façons de les raconter. Changez de composition : les blocs se replacent d’eux-mêmes.
Des blocs de tailles variées : idéal pour montrer beaucoup en un coup d’œil.
- Bento
- Parallaxe
- Glassmorphism
- Scroll narratif
- 3D
- Typographie variable
- Micro-interactions
- SVG animé
Bandeau défilant
Spécialités, partenaires, avis vérifiés : une info qui circule sans prendre de place. Il s’arrête au survol.
- CSS animation
- masque en fondu
Ouvert aujourd’hui
12 h – 14 h 30
Horaires d’exemple
Verre dépoli
Un panneau translucide sur un fond qui bouge : horaires, badge « ouvert », prix mis en avant.
- backdrop-filter
- CSS
Votre site pourrait faire tout ça, à votre image.
Tout commence par un audit gratuit de votre site actuel. On choisit ensuite ensemble les effets qui servent votre métier, et seulement ceux-là.