Dotted Constellation Border
Des points posés le long du bord d'une boîte flottent doucement ; au survol, au focus ou au doigt, ils s'éclairent et se relient en constellation.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Utilitaires comprend 43 effets, dont 3 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Au chargement, le script ajoute dans chaque .cst-box un SVG qui déborde de 10 px tout autour, puis y pose des points espacés d'environ 36 px sur le bord réel de la boîte : 20 pour la taille par défaut de 200 × 120 px, 29 pour 320 × 160. Chaque point s'écarte du bord de 2 px au plus, et ces écarts viennent d'un générateur pseudo-aléatoire réglé par data-cst-seed : la même graine donne toujours le même dessin, à chaque chargement et dans tous les navigateurs.
Chaque point (rayon 2,5 px, #6366f1) flotte de 2 px au plus dans une direction qui lui est propre, en 3 s aller-retour, avec un départ décalé de 0,15 s sur son voisin. Le script trace aussi une ligne entre tous les points distants de moins de 70 px, mais ces lignes restent invisibles au repos.
Au survol, au focus (:focus-within) ou à l'appui du doigt (classe cst-on), les lignes apparaissent en 0,3 s à 40 % d'opacité et les points passent en #a78bfa avec une lueur de 4 px : la constellation se forme. Si la boîte change de taille, un ResizeObserver refait le dessin pour que les points restent sur le bord.
Accessibilité
- Décor muet : le SVG ajouté porte
aria-hidden="true"etfocusable="false"; les lecteurs d'écran ne lisent que le contenu de la boîte. - Clavier : la boîte de la démo est une
<div>. Donnez la classecst-boxà un lien ou un bouton, ou placez-en un dedans, et Tab forme la constellation (elle remplace le contour de focus de la boîte). Sur Safari macOS, Option+Tab atteint les liens si le réglage du système ne le permet pas avec Tab. - Toucher : un appui du doigt forme la constellation jusqu'au prochain appui ailleurs, y compris dans WebKit.
- Mouvement réduit : sous
prefers-reduced-motion: reduce, les points ne flottent plus et les lignes apparaissent sans fondu ; le bord pointillé et la constellation restent. - Repère faible : des points de 2,5 px et des lignes à 40 % ne suffisent pas à montrer le focus sur un fond clair ; dans ce cas, rendez un contour au
:focus-visiblede votre lien.
Compatibilité navigateur
SVG créé en JavaScript (4,2 Ko), sélecteur :is() (Chrome 88, Firefox 78, Safari 14), ResizeObserver (Chrome 64, Firefox 69, Safari 13.1). Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 (Playwright) : deux copies dont la 2e survolée seule, script collé deux fois sans points en double, mêmes positions dans les trois navigateurs, boîte passée à 320 × 160 avec 29 points à 4 px au plus du bord, focus clavier, appui du doigt, 390 px sans débordement, mouvement réduit sans animation, 0 erreur.
Sans JavaScript, aucun point : la boîte s'affiche seule avec son contenu. Sans ResizeObserver, les points gardent la taille du premier dessin.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0774-root">
<div class="cst-box" data-cst-seed="7">
…
<!-- le script ajoute ici <svg class="cst-svg"> avec les .cst-link et les .cst-dot -->
</div>
</div>Paiement unique, sans abonnement — le code est à toi pour toujours
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Graine (HTML — data-cst-seed sur .cst-box) |
7 |
Nombre entier qui fixe les petits écarts des points et leur direction de flottement. Changez-la pour varier le dessin d'une boîte à l'autre. |
Couleurs (CSS — --cst-color, --cst-color-active, --cst-glow) |
#6366f1, #a78bfa, rgba(99, 102, 241, .8) |
Points et lignes au repos, points à l'état actif, lueur des points. |
Écart entre les points (JS — SPACING) |
36 px |
Plus petit, plus de points ; huit points au minimum, quelle que soit la taille. |
Longueur des liaisons (JS — LINK) |
70 px |
Distance maximale entre deux points reliés. Gardez environ deux fois SPACING. |
Taille de la boîte (CSS — width / min-height de .cst-box) |
200 × 120 px au moins | Les points suivent le bord à toutes les tailles et se replacent si elle change. |
État actif forcé (HTML — classe cst-on) |
absente | Garde la constellation formée, par exemple sur l'élément choisi. Le script ne retire que celle qu'il a posée au toucher. |
FAQ
Math.random(), le dessin changeait à chaque visite et une capture d'écran ne correspondait jamais à la page. La graine rend le rendu identique partout, tout en gardant un air irrégulier. Pour des dessins différents sur une même page, donnez une graine différente à chaque boîte.LINK vers 40 px pour ne garder que les liaisons le long du bord.cst-box au <a> de la carte et mettez votre contenu dedans ; le script ajoute son SVG à la fin. Le survol, Tab et l'appui du doigt forment la constellation, et la carte reste un lien ordinaire. Gardez une racine .fx-0774-root par carte : le script ne dessine que la première .cst-box de chaque racine.
