Application webWeb, sur mobile et ordinateur, 2026
Aura
La météo qui se voit.
- Rôle
- Conception, design et développement
- Client
- Projet personnel
- Modèle
- Gratuit, sans compte
- Stack
- HTML, CSS, JavaScript, Canvas 2D, SVG, Open-Meteo, Vercel
Le projet
Aura transforme les prévisions en un ciel vivant : nuages, pluie, soleil et lune se dessinent à partir des données réelles, et un seul geste fait voyager toute l’interface dans les 48 prochaines heures.
Le fond de l’écran n’est pas une illustration. Il traduit les mesures : couverture nuageuse, pluie inclinée selon la force et la direction du vent, neige, brouillard, éclairs, soleil placé entre son lever et son coucher réels, lune dessinée dans sa phase du jour. L’unique couleur d’accent de l’interface est calculée à partir de la température affichée.
Autour de ce ciel, l’application répond aux questions concrètes : quand sortir, quel temps cette semaine, comment se situe la journée face aux trente dernières années. Le tout est écrit en JavaScript natif, accessible au clavier et au lecteur d’écran, respecte la réduction des animations et fonctionne sans clé d’API.
La plupart des applications météo alignent les mêmes cartes : température, pluie, vent, UV. Elles donnent beaucoup de chiffres et peu de réponses. Aura part du principe inverse : montrer d’abord le temps qu’il fera, puis répondre directement à la question que l’on se pose vraiment : « quand sortir ? ».
Fonctionnalités
- 1 / 6
Le ciel est la donnée
Le fond animé traduit les mesures en temps réel : nuages, pluie, neige, brouillard, soleil et lune à leur place. On lit le temps d’un coup d’œil, avant même les chiffres.
- 2 / 6
Un curseur sur 48 heures
On fait glisser le doigt sur la courbe et toute l’interface voyage dans le temps : ciel, température, instruments. Les valeurs prévues passent en italique, celles du moment restent droites : on sait toujours ce que l’on regarde.
- 3 / 6
Vos meilleurs créneaux
Pour six activités (course, vélo, terrasse, linge, photo à l’heure dorée, étoiles), un score horaire transparent trouve le meilleur moment des 48 heures, les classe et nomme leur point faible. Un toucher montre le ciel à ce moment-là.
- 4 / 6
La semaine et les instruments
Les sept prochains jours à la même échelle, avec leurs détails dépliables, et huit instruments : vent et échelle de Beaufort, UV, humidité, pression, visibilité, lune, course du soleil, qualité de l’air.
- 5 / 6
La mémoire du climat
Trente ans d’archives situent la journée face à la normale de saison : centile, répartition des maximales et bandes climatiques à explorer à la souris ou au clavier.
- 6 / 6
Vos lieux, en un geste
Recherche de ville au clavier (touche /), géolocalisation, lieux enregistrés avec leur température, °C ou °F, et une adresse à partager pour chaque lieu.
Sous le capot
Trois fichiers statiques et aucune dépendance : tout se passe dans le navigateur, branché directement sur des données météo ouvertes.
- FrontJavaScript natif
- HTML, CSS et JavaScript, sans framework ni étape de build
- Ciel en Canvas 2D : nuages, pluie, neige, brouillard, soleil et lune
- Graphiques SVG dessinés à la main
- Accessible au clavier et au lecteur d’écran, animations réduites respectées
- Responsive dès 320 px, avec des container queries
- BackPas de serveur
- Site statique servi par Vercel
- Appels directs aux API depuis le navigateur, sans clé
- Archives et lieux enregistrés gardés dans le navigateur
- En-têtes de sécurité : CSP stricte et géolocalisation réservée au site
- ServicesDonnées et hébergement
- Open-Meteo : prévisions, géocodage, qualité de l’air, archives ERA5
- Vercel : hébergement, redéploiement à chaque push
- GitHub : code source public
- Google Fonts : Bodoni Moda et Figtree
Galerie
Glissez pour voir les écrans.
Où en est le projet
En production et libre à tous : gratuite, sans compte et sans publicité. Chaque mise à jour poussée sur GitHub est déployée automatiquement. Le contraste du texte dépasse 4,5:1 même par ciel couvert, et la mise en page est vérifiée de 320 px au grand écran.