Galerie légère. Démos en cadres paresseux, rien ne tourne hors écran, zéro WebGL. Performance vérifiable sur Google PageSpeed.
Le Lab · Opus Studio

La matière première de vos sites.

Nos animations, composants, arrière-plans et directions de style, en direct dans votre navigateur, encadrés. Pas une vidéo : du vrai code qui tourne, fait maison.

En direct

Démos vivantes

Chaque cadre charge une démo autonome et paresseuse : rien ne tourne tant qu'elle n'est pas à l'écran. Rejouez chaque effet, survolez-le, ouvrez-le en plein écran.

Fond WebGL

Anneau d'énergie

Un cercle de lumière vivant, parcouru de filaments électriques. L'effet que l'on regarde deux fois.

Plein écran
Cinématique

Scène immersive

Un paysage vivant en fond, des phrases qui se révèlent au défilement. L'ambiance d'un grand site de marque.

Plein écran
Scène métier

Restaurant : la table se dresse

Sous un cône de lumière, la table se monte pièce par pièce : nappe, couverts, bougie, jusqu'à la cloche qui révèle le plat.

Plein écran
Scène métier

Architecture : la maison se construit

Du trait de plan à la maison complète : fondations, murs, charpente, tuiles, jusqu'aux fenêtres qui s'allument.

Plein écran
Scène métier

Artisanat : l'ouvrage prend forme

Sous la lampe d'atelier, un tabouret se fabrique sous vos yeux : trait de crayon, scie, rabot, coups de maillet.

Plein écran
3D

Verre réfractif

Un objet en verre qui réfracte réellement la lumière, avec des reflets irisés. Bouge avec la souris.

Plein écran
3D

Particules lumineuses

Six mille points de lumière en rotation lente, comme une constellation derrière votre titre.

Plein écran
Fond WebGL

Aurora

Un dégradé vivant qui coule doucement derrière le titre. Quelques kilo-octets, effet premium immédiat.

Plein écran
Fond WebGL

Métal liquide

Un flux chromé qui ondule, avec des reflets qui accrochent la lumière. Parfait pour les métiers techniques.

Plein écran
Fond WebGL

Soie

Une nappe de tissu qui respire, douce et haut de gamme. La bibliothèque complète compte 25 effets 3D et fonds animés.

Animation

Des titres qui s'animent

Chaque ligne se révèle de bas en haut au chargement, la première impression d'un site soigné.

Animation

Le contenu se révèle

Au défilement, vos sections apparaissent en douceur, l'une après l'autre. L'œil est guidé, jamais bousculé.

Animation

Un message qui s'allume

Les mots passent de l'ombre à la pleine lumière. Idéal pour une phrase qui doit rester en tête.

Aperçu : sur votre site, c'est votre défilement qui pilote l'effet.

Animation

Des images qui respirent

Une vraie photo de réalisation qui glisse en profondeur (parallaxe). Boucle lente, pas une banque d'images.

Aperçu : sur votre site, c'est votre défilement qui pilote l'effet.

Animation

Le détail au survol

Sur ordinateur, les cartes s'inclinent et un reflet balaie le bouton. Les micro-interactions qui font « cher ».

Animation

Un bandeau qui défile

Vos services ou mots-clés défilent en boucle douce. Au survol, le défilement se met en pause.

Animation

Des chiffres qui s'égrènent

Vos preuves comptent de zéro à leur valeur à l'apparition. Des chiffres réels, jamais inventés.

Animation

Un parcours qui se dessine

Une ligne relie vos étapes en se traçant. Ici, notre méthode : Brief → Maquette → En ligne.

Aperçu : sur votre site, c'est votre défilement qui pilote l'effet.

Animation

Un mot qui change

Le dernier mot déroule plusieurs valeurs, puis s'arrête sur le principal. Déclenché, jamais en boucle.

Animation

Un bouton magnétique

Sur ordinateur, le bouton vient à la souris. La micro-interaction qui rend un CTA premium.

Animation

Un reflet de lumière

Une bande lumineuse balaie un mot précieux, une seule fois. Touche « luxe » discrète.

Animation

Un texte qui se tape

Une accroche s'écrit caractère par caractère, curseur clignotant. Vibe terminal, jouée une fois.

Animation

Fondu de caractères

Un titre de section se révèle lettre par lettre, chaque caractère montant en douceur. Plus fin que le fondu du héro.

Animation

Glissement par mots

Chaque mot du titre monte depuis le bas derrière un masque. Plus dynamique que le fondu, pour un titre qui s'impose.

Animation

Soulignement tracé

Un trait dessiné se trace sous un mot-clé (en scaleX, pas en stroke). L'accent éditorial qui guide l'œil.

Animation

Texte sous pression

Sur ordinateur, les lettres proches du curseur enflent (scale par lettre, jamais la graisse). Sur mobile, texte normal.

Composant

Carte inclinable 3D

Une carte premium qui suit la souris (≤ 7°), avec une ombre douce. À plat sur mobile et au clavier.

Composant

Accordéon accessible

Questions / réponses pilotées au clavier, focus visible et attributs aria complets. Essayez-le dans le cadre.

Composant

Section pricing

Des formules claires, prix réels, formule recommandée mise en avant par un badge texte. Zéro faux prix, zéro compte à rebours.

Composant

Bloc témoignage

Citation, auteur et note en étoiles doublée d'un libellé accessible. Le format prêt, jamais de faux avis.

Composant

Menu en cascade

Un menu dont les entrées se déploient. Focus piégé, Échap qui ferme et rend le focus : irréprochable au clavier. Cliquez « Menu ».

Composant

Étapes de process

Une ligne de progression relie vos étapes et se remplit. Liste ordonnée sémantique, lisible sans la couleur.

Composant

Interrupteur (toggle)

Un vrai role=switch : clavier, aria-checked, état lisible par la position et un libellé, pas que par la couleur.

Composant

Onglets accessibles

Motif ARIA complet : navigation aux flèches, roving tabindex, un panneau à la fois, pilule qui glisse.

Composant

Galerie + lightbox

Une grille de réalisations qui se révèle ; au clic, une lightbox accessible (focus piégé, Échap, retour au focus). Vignettes d'exemple, vos vraies photos en WebP optimisé.

Composant

Boutons signature

Trois micro-interactions de CTA : reflet qui balaie, halo qui suit la souris, léger « squish » au clic. Toujours de vrais boutons, anneau de focus conservé.

Composant

Carte à bord lumineux

Un liseré qui tourne lentement (et réagit à la souris) pour LA carte à mettre en avant. Statut « Recommandé » écrit en toutes lettres, pas seulement par la lueur.

Composant

CTA « réserver un appel »

Le bloc de conversion : titre court, réassurance réelle, un seul bouton clair. Sans fausse urgence. CTA magnétique sur ordinateur.

Composant

Champ radiant

Un champ e-mail vedette qui s'illumine au focus, le halo s'ajoute à l'anneau de focus, ne le remplace jamais. Label lié, erreurs en texte.

Composant

Header qui se densifie

L'en-tête démarre aéré et transparent, puis se compacte (fond plein, ombre, logo réduit). Lisible et navigable dans les deux états.

Aperçu : sur votre site, c'est votre défilement qui pilote l'effet.

Composant

Pile de cartes

Des cartes empilées qu'on parcourt : celle du dessus s'efface, la suivante remonte. Boutons précédent/suivant, flèches clavier, annonce « carte X sur N ».

Composant

Dock à grossissement

Une rangée d'icônes-liens qui grossit près du curseur (façon dock macOS). Desktop uniquement ; au clavier et sur mobile, dock sobre et accessible.

Composant

Ruban / badge d'angle

Un ruban en coin (« Recommandé ») ou une pastille (« Nouveau ») en vrai texte, lisible sans la couleur. Jamais de fausse promo.

Arrière-plan

Fond Aurora

Des dégradés colorés qui dérivent très lentement, sans aucune image. Le texte reste parfaitement lisible.

Arrière-plan

Fond mesh & grain

Une grille fondue + des nappes qui respirent + un grain léger. Sobre et technique, idéal sous un héro.

Arrière-plan

Fond étoiles

Deux couches de points qui dérivent en profondeur. Parfait pour un héro sombre, événement, soirée, spectacle.

Arrière-plan

Rayons de lumière

Des faisceaux de projecteur diffus qui descendent du haut. Du drame premium, sans aucune image.

Arrière-plan

Stores / bandes

Des bandes diagonales douces qui glissent lentement. Un rythme graphique discret, éditorial.

Arrière-plan

Vagues SVG

Une ondulation organique en SVG léger. Idéal nature, bien-être, fluide, et réagit à la souris sur ordinateur.

Les directions

28 directions de style

Pas 28 produits finis : 28 points de départ. On choisit ensemble celui qui colle à votre métier, puis on le taille sur mesure pour votre site.

Sans engagement

Votre maquette, gratuite, en 48 h

On vous montre votre site avant que vous ne payiez un centime. Si ça vous plaît, on continue. Sinon, vous gardez la maquette.

Landing Ouvrir dans un nouvel onglet ↗