Zomeractie — -20% vanaf €500 aankoop — eindigt over
--
dagen
--
uur
--
min
--
sec
☀️ Gelimiteerde oplage — nog maar 2 000 / 2 000 stuks
Code
Soleil20
✓ Gekopieerd!Tu as choisi la discrète, école Google ; son défaut connu, c’est qu’on ne la remarque pas. Voici cinq manières de la faire remarquer sans trahir ta direction artistique — quatre animations dans la philosophie du site (la lumière passe, l’objet ne bouge pas, plafonnées 3 par page / 10 par session) et une version sans aucune animation. Panneau, dépôt, boutons, fermeture : identiques à l’originale, reprise en tête. Chaque maquette est vivante : clique, attends l’éclat, recharge la page pour revoir les animations. Et quelle que soit la variante retenue : le déclencheur entrera dans le traçage, même famille que le reste (ouverture, photo envoyée, résultat, clic, achat).
JPG, PNG ou WEBP — vos images ne sont pas conservées.
Telle quelle, pour comparer. Les cinq variantes dessous gardent son panneau et son comportement à l’identique : seuls l’icône et son signal changent.
JPG, PNG ou WEBP — vos images ne sont pas conservées.
C'est la variante la plus fidèle à ton ADN : le même principe que l'encre qui traverse ton logo, appliqué en miniature à l'appareil photo. Toutes les ~5 secondes, une bande de lumière turquoise balaye le trait gris de gauche à droite en 600 ms — le dessin ne bouge pas d'un pixel, seule la couleur voyage, puis tout redevient calme. Pour le client qui ne connaît pas Google Lens, ce petit éclat dit « cet élément est vivant, il se clique » sans texte, sans badge, sans pousser la mise en page. Et comme c'est plafonné (3 passages par page, 10 par session, puis silence définitif), ça reste premium : une invitation, jamais une insistance.
Le défaut de cette variante, sans langue de bois : Le défaut : ses 3 passages par page se consomment vite — un client qui regarde tes tableaux pendant les 15 premières secondes peut tous les rater, et après le plafond tu retrouves exactement la discrète invisible d'origine. Et l'éclat dit « je suis vivant » mais pas « je cherche par image » : il attire l'œil sans expliquer, l'info-bulle ne faisant son travail qu'au survol, donc jamais sur mobile. C'est la plus élégante des cinq, pas la plus pédagogique.
JPG, PNG ou WEBP — vos images ne sont pas conservées.
Ton site a déjà un langage : quand une petite étoile s'allume, il se passe quelque chose. Ici, une compagne à quatre branches vient se poser au coin de l'appareil photo toutes les 5 secondes environ : elle s'allume en cyan, brille 400 ms, s'éteint — le trait de l'appareil, lui, ne bouge pas d'un pixel, seule la lumière passe. C'est le signal le plus économe possible pour le client qui ne connaît pas Google Lens : son œil est attiré une fraction de seconde vers l'icône, sans que rien ne gigote ni ne pousse la mise en page. Bonus de sobriété : dès qu'il ouvre le panneau une fois, l'étoile ne revient plus de la session — le message est passé, on se tait.
Le défaut de cette variante, sans langue de bois : Une étoile de 8 px, c'est fin : sur mobile ou sur une page chargée, un client qui ne regarde pas la barre à ce moment-là ne verra rien. Et comme le plafond de 3 passages se consomme dans les 15 premières secondes de la page, celui qui lève les yeux vers la recherche après une minute de scroll arrive après le spectacle. Enfin, ce code lumineux ne parle qu'à ceux qui ont déjà croisé l'étoile de ton bouton — pour les autres, c'est joli mais muet.
JPG, PNG ou WEBP — vos images ne sont pas conservées.
C'est l'animation la plus petite possible : le disque intérieur de l'objectif s'allume en cyan puis s'éteint (350 ms), suivi d'un second clignement 150 ms après, exactement comme le voyant d'autofocus d'un vrai appareil — et pile à l'endroit où l'œil lit « appareil photo ». Aucun contour ne bouge d'un pixel : seule la lumière passe, comme l'étoile de ton bouton et l'encre de ton logo. Le micro-mouvement en vision périphérique suffit à faire tourner le regard vers l'icône, et l'info-bulle prend le relais au survol. Plafonné à 3 clignements par page et 10 par session, silencieux dès que le client ouvre le panneau, et coupé net pour qui préfère les animations réduites.
Le défaut de cette variante, sans langue de bois : C'est un signal de 4 pixels : sur mobile, dans un header chargé ou pour un client qui lit le milieu de l'écran, il passera encore inaperçu — c'est la plus fragile des cinq en termes de taux de découverte. Et un clignement n'explique rien : celui qui le voit sait qu'il y a quelque chose, pas ce que c'est ; sans le survol qui suit, la moitié pensera à un simple reflet. Enfin, avec 3 passages par page, celui qui regarde ailleurs pendant les 15 premières secondes ne saura jamais que ça a clignoté.
JPG, PNG ou WEBP — vos images ne sont pas conservées.
Ici, rien ne bouge jamais : l'objectif de l'appareil photo porte en permanence une goutte turquoise très pâle (disque #e9feff cerclé du trait foncé #037a8a), pendant que le boîtier reste gris comme la loupe. C'est le principe des icônes bicolores de Google : une seule touche de couleur fixe au bout de la barre, et l'œil la trouve tout seul, sans qu'on lui fasse signe. Au survol, tout l'appareil passe au cyan d'un coup, ce qui confirme que c'est cliquable. C'est la variante à choisir si tu estimes qu'entre l'étoile du bouton et l'encre du logo, ton en-tête a déjà son compte d'animations — celle-ci n'ajoute aucun mouvement, donc aucun plafond à gérer, aucun sessionStorage, rien qui puisse se dérégler.
Le défaut de cette variante, sans langue de bois : Une pastille fixe de 8 px, c'est l'accroche la plus faible des cinq : l'œil qui ne balaye pas le bout de la barre ne verra jamais rien, là où même une lueur d'une seconde finit par se faire remarquer. Sur un petit écran ou une dalle mal calibrée, le #e9feff est si pâle que la goutte peut quasiment disparaître et l'icône redevient la discrète de départ. Et tu introduis une touche de couleur permanente dans une barre qui jouait jusqu'ici le « tout gris avant interaction » — c'est léger, mais c'est une entorse à ta propre règle.
JPG, PNG ou WEBP — vos images ne sont pas conservées.
À la toute première page de la session, l'appareil photo n'arrive pas seul : le mot « Photo » en 12px cyan foncé est posé juste à sa gauche, dans la zone élargie de l'icône — l'input n'est jamais poussé, rien ne bouge à l'écran. Après 3 secondes, le mot s'efface en fondu pur de 600 ms (seule l'opacité voyage, aucun contour ne glisse : le filet et l'appareil restent cloués au pixel) et une clé sessionStorage garantit qu'il ne reviendra plus de la session. C'est la variante pour le client qui n'a jamais entendu parler de Google Lens : une explication en toutes lettres à l'instant précis où il découvre ta barre, puis la discrétion Google totale — appareil gris, info-bulle au survol, comportement identique à l'original. Si le visiteur ouvre le panneau avant les 3 secondes, le mot se retire aussitôt : il a fait son travail.
Le défaut de cette variante, sans langue de bois : Le mot ne vit que 3 secondes de toute la session : le client qui regarde ailleurs à ce moment-là ne le verra jamais, et on retombe sur le défaut de la discrète. Pour respecter ton interdit du glissement de contour, l'espace du mot reste réservé jusqu'à la page suivante : après le fondu, il subsiste un blanc d'environ 45px entre le filet et l'appareil, et le placeholder est tronqué un peu plus tôt sur cette première page. Enfin, sans sessionStorage (navigation privée stricte), je fais le choix du silence : ces visiteurs-là n'auront jamais l'indice.