Neu Clock
Une horloge analogique de 200 px en relief, cadran creusé de 180 px, 12 repères des heures et trois aiguilles qui suivent l'heure réelle de l'appareil, recalculée chaque seconde en JavaScript. Autant d'horloges que voulu dans la page.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Glassmorphism comprend 47 effets, dont 6 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Deux disques dans la teinte #e0e5ec. Le boîtier .neu-clock (200 px) sort de la surface par #b8bec7 12px 12px 24px et #fff -12px -12px 24px ; le cadran .neu-clock-inner (180 px) y est creusé par des ombres internes de 4 px / 8 px. Douze repères .neu-clock-mark tournent autour du centre grâce à transform-origin: center 82px (8 px du bord + 82 px = le centre du cadran) : huit petits de 2 × 12 px en #9ca3af, quatre grands de 3 × 16 px en #6b7280 à 12, 3, 6 et 9 h. Les aiguilles partent du centre (bottom: 50%, transform-origin: center bottom) : heures 4 × 50 px en #374151, minutes 3 × 65 px en #6b7280, secondes 1,5 × 72 px en violet #8b5cf6, sous un moyeu violet de 10 px.
Le JavaScript lit new Date() une fois par seconde et calcule trois angles : secondes à 6° par seconde, minutes à 6° par minute plus 0,1° par seconde (l'aiguille glisse entre deux minutes), heures à 30° par heure plus 0,5° par minute. Aucune transition CSS : la trotteuse saute d'un cran à chaque seconde, comme un mouvement à quartz, et ne repart jamais en arrière au passage de 59 à 0. L'heure est celle de l'appareil du visiteur, dans son fuseau. À chaque tic, le script écrit aussi l'heure dans aria-label (toLocaleTimeString, heures et minutes) sur l'horloge, qui porte role="img".
Le cadran porte ses douze repères dans le HTML, et leur margin-left les centre exactement (−1 px et −1,5 px). Le script ne vise aucun identifiant : il anime toutes les .neu-clock de la page, si bien qu'une deuxième horloge n'est pas condamnée à rester figée sur la position écrite dans le HTML — mesuré, deux horloges collées côte à côte affichent le même angle à la seconde près. Et .neu-clock-scene porte sa surface (#e0e5ec, padding: 40px, assez pour l'ombre de 12 + 24 px), pour que le relief ne dépende pas du fond de votre page.
Accessibilité
- Texte alternatif vivant : l'horloge est une image (
role="img") dont le nom suit l'heure, par exemple « 07:52 » ; il n'est mis à jour que dans l'attribut, sans annonce répétée chaque seconde, ce qui évite de saturer un lecteur d'écran. Si l'heure est l'information principale de la page, ajoutez-la aussi en texte visible. - Contraste : sur le cadran
#e0e5ec, l'aiguille des heures#374151mesure 8,1:1, celle des minutes#6b72803,8:1, la trotteuse violette 3,3:1 et les grands repères 3,8:1 — au-dessus des 3:1 demandés aux éléments graphiques. Les petits repères#9ca3af(2,0:1) sont en dessous : passez-les en#6b7280si l'horloge doit se lire de loin. - Mouvement : seule la trotteuse bouge, d'un cran par seconde, sans animation CSS.
prefers-reduced-motionn'est pas pris en compte ; pour un écran calme, masquez-la :@media (prefers-reduced-motion: reduce) { .neu-clock-hand--second { display: none } }. Le code ne s'arrête pas quand l'onglet est caché : le navigateur ralentit lui-même le minuteur, sans conséquence sur l'heure affichée au retour. - Rien à atteindre au clavier : l'horloge n'est pas interactive, elle ne prend pas le focus.
Compatibilité navigateur
CSS : box-shadow portées et internes, transform: rotate() avec transform-origin en pixels, border-radius: 50%. JavaScript : setInterval, Date, toLocaleTimeString, querySelectorAll(...).forEach (NodeList.forEach : Chrome 51, Firefox 50, Safari 10). Mesuré dans Chromium, Firefox et WebKit (Playwright) : 12 repères à égale distance du centre, trotteuse qui avance d'un cran par seconde, deux horloges synchrones, aucune erreur console.
Sans JavaScript, le cadran s'affiche avec ses repères et des aiguilles figées sur la position écrite dans le HTML (environ 3 h 02) : retirez ces styles en ligne si une heure fausse vous gêne plus qu'une horloge sans aiguilles.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec Premium) :
<div class="neu-clock-scene">
<div class="neu-clock" role="img" aria-label="Horloge">
<div class="neu-clock-inner">
<span class="neu-clock-mark neu-clock-mark--major" style="transform: rotate(0deg);"></span>
<span class="neu-clock-mark" style="transform: rotate(30deg);"></span>
<!-- … 10 autres repères, de 60 à 330° -->
<div class="neu-clock-dot"></div>
<div class="neu-clock-hand neu-clock-hand--hour"></div>
<div class="neu-clock-hand neu-clock-hand--minute"></div>
<div class="neu-clock-hand neu-clock-hand--second"></div>
</div>
</div>
</div>Le code complet HTML + CSS + JS de Neu Clock, prêt à coller — et les 840 effets. Ou 299 € TTC une fois, accès à vie.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Taille (CSS — .neu-clock 200 px, .neu-clock-inner 180 px) |
200 px | Pour 300 px, multipliez par 1,5 : cadran 270 px, aiguilles 75 / 97 / 108 px, repères à top: 12px avec transform-origin: center 123px (rayon du cadran − top). Ou gardez le CSS et réduisez avec transform: scale(.6) sur .neu-clock. |
Trotteuse (CSS — .neu-clock-hand--second) |
1,5 × 72 px, violet #8b5cf6 | display: none pour une horloge calme (salle d'attente, chambre). Pour un balayage continu au lieu des sauts : transition: transform 1s linear — mais l'aiguille fera alors un tour à l'envers de 354° à 0°. |
Repères (HTML — 12 .neu-clock-mark, --major à 0, 90, 180 et 270°) |
4 grands, 8 petits | Ne gardez que les quatre grands pour un cadran épuré, ou ajoutez la classe --major aux douze. Les angles sont dans l'attribut style de chaque repère. |
Fuseau horaire (JS — new Date()) |
heure locale de l'appareil | Pour afficher Tokyo : var now = new Date(new Date().toLocaleString('en-US', { timeZone: 'Asia/Tokyo' })) à la place de la première ligne de tick. |
Couleurs des aiguilles (CSS — #374151, #6b7280, #8b5cf6) |
gris foncé, gris, violet | Gardez au moins 3:1 sur #e0e5ec : une trotteuse rouge #dc2626 mesure 3,8:1. |
FAQ
.neu-clock présentes au chargement, sans identifiant. Une horloge ajoutée plus tard par votre code n'est pas prise en compte : relancez le script, ou appelez-le après avoir inséré le HTML.Date.now() et ajoutez-le dans tick.
