Le sentier doré — page animée

L'utilisateur demande une page avec des ombres — visiblement une illustration storybook d'un garçon et un chiot marchant dans une forêt, avec des ombres qui s'étirent et bougent doucement au sol, lumière filtrant à travers les feuilles, lumière tachetée (dappled light), ombres douces qui se déplacent lentement. C'est une demande en français (le titre "Page avec ombres" et la description sont mixtes FR/EN, mais le titre est français). Je répondrai en français. Le concept : une page web qui est une illustration storybook vivante — un garçon et son chiot marchant dans une forêt, avec : 1. Le garçon et le chiot qui marchent (animation de marche, silhouettes illustrées en SVG) 2. Leurs ombres portées au sol qui s'étirent, se déforment et bougent doucement selon la position du soleil 3. De la lumière filtrant à travers les feuilles (dappled light — taches de lumière qui dansent) 4. Des ombres douces qui se déplacent lentement 5. Style storybook — comme une page d'un livre d'images C'est un défi technique intéressant. Je vais construire une scène SVG complète et animée : **Approche visuelle :** - Une scène de forêt en couches (parallax léger possible mais restons dans une illustration fixe de "page") - Palette : verts forêt profonds, dorés/ambre pour la lumière, tons chauds crème pour le style storybook — éviter le bleu/violet générique. Palette : verts olive/sauge, ambre doré, brun chaud, crème papier. - Style storybook : textures douces, bords irréguliers, grain papier, peut-être un cadre de page de livre **Éléments techniques clés :** 1. **Le garçon qui marche** : SVG d'un personnage stylisé avec animation de marche (jambes/bras qui alternent via CSS ou SMIL). Un bonhomme avec des proportions storybook — grosse tête, petit corps, peut-être avec un chapeau ou un bâton. Animation de cycle de marche en CSS avec des groupes SVG transformés. 2. **Le chiot** : un petit chien qui trotte à côté, queue qui remue, oreilles qui sautillent. 3. **Les ombres portées** : c'est le point signature. Les ombres des personnages projetées au sol, étirées selon l'angle du soleil. L'ombre doit : - Être déformée/skewée pour paraître projetée au sol - S'étirer et rétrécir doucement au fil du temps (soleil qui "bouge" imperceptiblement, ou juste des fluctuations douces) - S'animer en phase avec la marche (les jambes de l'ombre bougent aussi) - Être douce (blur) et en forme de projection (ellipse déformée + silhouette skewée) Technique : dupliquer le personnage (via ``), le remplir d'une couleur sombre translucide, appliquer un transform 3D-like (skew + scaleY) pour le poser au sol, ajouter un blur, et animer avec la même animation de marche. Les ombres des arbres peuvent aussi traverser le sol en bandes diagonales qui oscillent lentement. 4. **Dappled light** : taches de lumière dorée qui dansent sur le sol et sur les personnages. Taches elliptiques floues avec blend-mode (screen/overlay ou soft-light) qui dérivent lentement, scintillent (opacity oscillante), positions animées avec des keyframes lentes et décalées. Aussi des "sunbeams" (god rays) diagonaux semi-transparents qui ondulent. 5. **Feuillage** : arbres en premier plan et arrière-plan, feuilles qui bougent doucement, peut-être des feuilles qui tombent. 6. **Le mouvement de marche** : le garçon et le chiot peuvent marcher sur place avec un sol qui défile légèrement ? Ou ils traversent l'écran lentement ? Pour une "page" d'illustration, je pense que la marche sur place avec un léger défilement du sol et de la végétation donne l'impression qu'ils avancent. Ou mieux : ils traversent lentement la scène de gauche à droite en boucle, avec un fondu. Hmm — pour un livre, un travelling pourrait être joli : les personnages restent au centre-gauche, la forêt derrière défile très lentement (parallax), les ombres au sol défilent avec. C'est le plus vivant. Décision : les personnages avancent en traversant la page très lentement, avec fondu d'entrée/sortie en boucle ? Ou marche sur place + sol qui bouge ? Je vais faire : les personnages au centre-gauche qui marchent sur place, et toute la scène (sol, fougères, taches de lumière, ombres d'arbres) défile lentement vers la gauche, donnant l'impression qu'ils marchent à travers la forêt. Les troncs défilent aussi avec parallax multi-couches. C'est plus "cinématique" et évite le problème du personnage qui sort du cadre. En fait, réfléchissons. Une "page avec ombres" — ça évoque une page de livre. Je pourrais faire la page entière comme un spread de livre : texte doux en haut ("Milo et son chiot marchaient dans la forêt... et leurs ombres dansaient sur le sentier"), illustration en dessous. Ça ancre le côté storybook. Avec peut-être une interaction : cliquer/glisser sur la page pour tourner... non, restons concentré. Je vais faire une composition pleine écran : l'illustration occupe tout, avec un court texte storybook incrusté en haut dans une belle typographie (police cursive/sérif élégante — j'éviterai Inter/Roboto ; je prendrai une police avec caractère, par exemple "Cormorant Garamond" pour le texte et peut-être une petite main pour le titre... Ou "Fraunces" qui a beaucoup de caractère. Pour un livre d'images en français, une sérif douce comme "Gentium" ou "EB Garamond" ou "Fraunces". Je vais utiliser Fraunces (titres) + peut-être "Gaegu" non... Restons : Fraunces pour tout, c'est distinctif et chaleureux, parfait pour storybook. Ou "Caprasimo"/"Sniglet" trop cartoon. Fraunces avec ses axes optiques est parfait. **Structure de la scène SVG (viewBox ~ 1600x900) :** Couches arrière → avant : 1. Fond ciel/dégagé : dégradé très doux vert-crème chaud (les dégradés d'ambiance dans une illustration sont légitimes — c'est du rendu d'atmosphère, pas de la déco UI ; mais je vais rester subtil, plutôt des aplats avec brume). Je vais éviter les gradients tape-à-l'œil ; une forêt storybook peut avoir un fond en aplats avec brume. J'utiliserai quelques dégradés très doux pour la lumière volumétrique uniquement (justifié picturalement — les rayons de soleil ont besoin d'un fondu). C'est de la peinture, pas de la déco. 2. Montagnes/brume d'arbres lointains : silhouettes floues vert pâle. 3. Couche arbres mi-lointains : troncs plus foncés, feuillages. 4. Le sol : chemin de terre clair traversant, herbe. 5. Ombres portées : ombres d'arbres en bandes diagonales traversant le sol (grandes formes douces qui oscillent lentement), ombres du garçon et du chiot (silhouettes skewées, floues, avec animation de marche synchronisée, s'étirant lentement). 6. Les personnages : garçon + chiot animés. 7. Dappled light : taches dorées en blend screen/soft-light qui dérivent, sur le sol ET légèrement sur les personnages. 8. God rays : faisceaux diagonaux très subtils depuis le coin haut-droit. 9. Feuillage premier plan : grandes feuilles/fougères sombres sur les bords qui se balancent doucement, quelques feuilles qui tombent. 10. Grain papier + vignette douce + cadre de page éventuel. **Animation de marche — détail technique :** Le garçon en groupes SVG : - `#boy` avec sous-groupes : tête+buste (léger bob vertical), jambe gauche, jambe droite (rotation à la hanche alternée), bras gauche/droit (rotation à l'épaule alternée opposée aux jambes). - CSS keyframes : `leg-a { rotate: 25deg ↔ -25deg }` avec `transform-origin` au niveau de la hanche, `transform-box: fill-box` ou `transform-origin: Xpx Ypx` en coordonnées SVG (attention : transform-origin en px sur SVG utilise le user space du viewBox — fiable si le SVG n'est pas scalé différemment ; je préfère `transform-box: fill-box; transform-origin: ...` mais fill-box avec origin en % du bbox de la jambe, la hanche est en haut du bbox → `transform-origin: 50% 8%`. Ça marche bien). - Bob vertical du corps : translateY ±3px en phase double (deux pas par cycle). - Le chiot : corps qui trotte, 4 pattes rapides, queue qui remue, oreilles qui flottent. Les ombres : `` avec fill noir, dans un groupe `.shadow` avec : - `transform: translate(...) scale(1,0.55) skewX(-38deg)` → silhouette allongée sur le sol. - `filter: blur(4px)`, opacité ~0.35. - La même animation de marche s'applique aux jambes de l'ombre via les classes partagées (les `` clonent les classes ? Non — `` clone le contenu shadow-DOM ; les CSS class targeting des enfants d'un `` ne fonctionne pas de façon fiable... En fait, les styles CSS s'appliquent au contenu cloné via l'héritage et les sélecteurs ne pénètrent pas le shadow tree, sauf que les éléments clonés héritent des styles correspondant à leurs classes ? Non : dans le clone, les sélecteurs CSS ne matchent pas les éléments internes. MAIS — les règles CSS déclarées s'appliquent-elles ? Le shadow tree d'un `` : les éléments clonés sont dans un shadow tree fermé ; les sélecteurs de document ne matchent pas. Cependant, les propriétés héritées (fill, etc.) se propagent. Les animations définies par classe sur les jambes originales ne s'appliqueront pas au clone. Solution : plutôt que ``, dupliquer physiquement les groupes du personnage dans un `` — duplication de code SVG. Pour éviter la duplication manuelle, je peux générer le personnage en JS : une fonction `makeBoy()` qui retourne le markup, appelée deux fois (une fois pour l'ombre, une fois pour le réel). Ou définir le personnage dans un `` et utiliser `` deux fois : `` pour l'ombre et pour le réel — mais l'animation interne des jambes ne marchera pas dans le clone... Alternative élégante : animer le personnage entier via SMIL/CSS à l'intérieur d'un symbole ? Les animations CSS ne traversent pas non plus. SMIL (``) à l'intérieur d'un ``/symbole — les animations SMIL dans les clones d'un `` fonctionnent ! SMIL anime l'élément référencé, et le clone reflète l'état animé. Oui : les animations SMIL sur les éléments sources d'un `` sont répercutées sur toutes les instances. C'est le comportement standard (l'instance reflète l'arbre animé de la source). Donc option A : SMIL partout (animateTransform avec begin="0s" dur="0.9s" repeatCount="indefinite" pour les jambes). Robuste, self-contained, et le `` pour l'ombre hérite tout. SMIL est bien supporté dans tous les navigateurs modernes (Chrome, Firefox, Safari). Option B : JS génère le SVG du personnage deux fois avec ids uniques, CSS anime les deux. Plus de contrôle (pauses, easing), mais du JS de génération de markup. Je vais choisir SMIL : propre, déclaratif, synchronisation exacte entre ombre et personnage (ils partagent la même source animée !). `` pour l'ombre + `` pour le réel — tout est parfaitement synchronisé par définition. L'ombre est stylée par le fill hérité : si le personnage source a des fills spécifiques par partie, le clone garde ces fills... Problème : l'ombre doit être uniformément sombre. Avec ``, je ne peux pas surcharger les fills internes (sauf si les fills de la source sont "unset"/currentColor et hérités). Astuce : définir le personnage avec `fill="currentColor"` partout (ou sans fill), puis : - instance réelle : `` (couleur du garçon) - instance ombre : `` avec blur + skew. currentColor se propage aux clones. Parfait. Pour les détails multicolores (écharpe, etc.) je peux utiliser des variables CSS ou juste garder le personnage en silhouette tonale (une couleur + currentColor pour l'accent). Style storybook : le garçon en silhouette chaude (brun foncé) avec un accent (écharpe rouge terracotta via var). Pour l'ombre je surcharge via CSS `--accent: transparent` ? Les variables CSS héritent dans le shadow tree des `` — oui, les custom properties héritent à travers les frontières de shadow. Donc `.shadow-instance { --coat: #241f18; --accent: #241f18; }` et le personnage utilise `fill="var(--coat)"`. Ça marche ! Les custom properties pénètrent le shadow DOM des use. Excellent — je peux même avoir un garçon multicolore dont l'ombre est uniforme. Donc plan : personnage défini dans `` avec fills `var(--skin)`, `var(--coat)`, etc. Deux usages : réel (variables couleur) et ombre (tout en brun sombre translucide). Animations SMIL internes. Ombre skewée + blur + opacity via le groupe wrapper CSS. L'étirement de l'ombre : je vais animer lentement le skew/scaleY de l'ombre (le "soleil" dérive) : keyframes CSS sur le groupe ombre `transform: translateX(..) scaleY(0.5..0.65) skewX(-40deg..-32deg)` sur 20-30s, aller-retour. Subtil et vivant — "leurs ombres s'étirent et bougent doucement". Je peux aussi moduler l'opacité de l'ombre en phase. **Le défilement / avancée :** les personnages marchent sur place au tiers gauche-centre ; le sol et les éléments du midground défilent lentement vers la gauche (translateX en boucle avec deux copies du pattern). Couches : fougères/herbes du premier plan défilent un peu plus vite, troncs intermédiaires défilent, brume du fond quasi fixe. Vitesse de marche crédible : cycle de pas ~0.9s, pas ~ 60-70px par pas → défilement ~140px/s du sol. Hmm, 140px/s c'est déjà rapide visuellement ; le sol du chemin avec cailloux/taches qui défilent à ~120px/s est bien. Les troncs : ~70px/s. Brume : 15px/s. Premier plan feuilles : 190px/s. Implémentation du défilement : chaque couche contient deux copies côte à côte d'un motif large (largeur ≥ viewBox), animées `translateX(0 → -W)` linéaire, en boucle. Les taches de dappled light du sol doivent défiler avec le sol (elles sont "sur" le sol) — je les mets dans la couche sol défilante, avec en plus leur propre scintillement (opacity) et dérive locale. Les ombres des arbres (bandes diagonales au sol) défilent aussi avec le sol — cohérent, plus une oscillation lente d'opacité/position. **Feuilles qui tombent :** quelques feuilles ambre qui tournoient et descendent lentement en dérive (CSS keyframes avec rotation + translate, multiples instances décalées). Elles tombent dans le plan du premier plan. Pour la boucle infinie sans saut visible : chaque feuille a sa propre timeline longue (12-18s), positions de départ variées via inline style/variables. **Interaction (signature) :** "la page doit répondre à l'input". Idées : - Mouvement de la souris = vent doux : les feuilles du premier plan et les taches de lumière réagissent au passage du curseur (parallax léger des couches selon la souris + les feuilles proches du curseur se balancent plus fort). - Le curseur peut agir comme un "trou de lumière" ? Trop gadget. - Cliquer sur la page fait tomber une petite rafale de feuilles + le chiot aboie (petit "!" ou houhou visuel — une bulle "Hou ! Hou !" en typographie manuscrite) et remue la queue plus vite. Mignon et storybook. - Molette ou scroll = avancer/reculer le temps de la journée ? Trop. - Un contrôle "lire l'histoire" ? Non, restons simple. Je vais implémenter : 1. Parallax doux multi-couches suivant la souris (chaque couche translate selon depth). 2. Vent au curseur : la vitesse locale du vent dérive de la position/déplacement de la souris — les feuilles du premier plan s'inclinent selon un champ simple (angle basé sur distance au curseur), avec ressort. Pour rester raisonnable : quelques feuilles en JS rAF qui s'inclinent vers le passage du curseur (calcul par feuille : angle cible = f(distance au curseur), lerp). Faisable et joli. 3. Clic : rafale de feuilles + le chiot fait "Hou ! Hou !" (petite bulle de texte manuscrite qui apparaît et s'envole doucement) et sa queue s'emballe 2s. Peut-être aussi le garçon se retourne ? Trop complexe pour le SMIL. La bulle du chiot suffit. 4. Un petit bouton discret "Le vent se lève" pour déclencher une séquence où les feuilles s'agitent davantage, la lumière scintille plus, pendant ~6s ? Optionnel — peut-être un contrôle de "brise" avec un curseur ? Non. Je garde : clic n'importe où = rafale. Et au survol du chiot : remue la queue + bulle. Survol du garçon : il... hmm, garçon complexe. Laissons le chiot comme point d'interaction principal + clic global. Peut-être aussi : appui long / maintien du clic = le soleil descend un peu (les ombres s'étirent beaucoup, la lumière dore) — joli concept "passer le temps" ! Trop ambitieux ? En fait c'est simple : une variable CSS `--sun` (0→1) pilotée en JS pendant le maintien, qui module l'angle/longueur des ombres (skew/scale interpolés en JS sur les groupes d'ombre) et la couleur de la lumière (hue). Les ombres SMIL dans use... les groupes ombre wrappers sont de vrais éléments DOM (les `` sont dans des ``), donc je peux les transformer en JS. Le "glisser pour faire avancer le temps" : maintenir enfoncé et glisser horizontalement = le soleil glisse, les ombres pivotent de l'autre côté, les god rays changent d'angle, la teinte passe de midi doré à fin d'après-midi ambre. C'est LE moment signature : "tirez la lumière". Attention complexité : les ombres d'arbres en bandes diagonales peuvent pivoter via transform sur leur groupe (rotation de bandes). Les ombres des personnages : skew + scaleY directionnels — je peux inverser skewX signe et positionner l'ombre du bon côté. Ombre à gauche vs droite : il faut déplacer le point d'ancrage des pieds. Si skewX(-θ) avec origine aux pieds, l'ombre part vers la gauche. skewX(θ) vers la droite. Avec transform-origin aux pieds du personnage, ça pivote naturellement. Donc : angle du soleil φ ∈ [-60°, 60°] (0 = zénith) → longueur de l'ombre ∝ tan-like, direction = signe. Pour le rendu : `scaleY(0.35 + 0.5·|sin φ|)` hmm, en fait longueur = L·|tan φ| approximé par L·(φ/90°·2.5). skewX = -φ. Et une compression horizontale quand l'ombre est très longue ? Les ombres très allongées : scaleY grand, et blur un peu plus fort, opacité un peu plus faible. Faisable. Pour rester dans les temps : je fais un lissage : au repos, φ oscille doucement entre ~35° et ~50° (après-midi, ombres déjà longues vers la droite... ou gauche). Le soleil haut-droite → ombres vers la gauche-gauche ? Lumière venant d'en haut à droite → ombres projetées vers la gauche-bas. Dans la vue 2D de côté, le soleil derrière la canopée en haut... en vue de profil, le soleil à droite → ombres à gauche. Décision picturale : god rays diagonaux venant du coin haut-droit vers bas-gauche, ombres étirées vers la gauche. Quand on glisse, le soleil traverse vers la gauche → ombres se raccourcissent puis pivotent vers la droite, la lumière passe du doré clair à l'ambre chaud puis orangé crépusculaire. Le texte de la page peut même changer ? Trop. Juste la lumière. Hmm, mais le maintien-glisser pendant qu'on lit... ok c'est un bonus géré proprement. Je l'implémente : pointerdown + drag horizontal → φ de 48° (par défaut, ombres longues vers la gauche, soleil à droite) jusqu'à -48°. Relâche : retour lent (ressort) vers la valeur de base qui oscille doucement (respiration automatique). La teinte de scène : filtre SVG `` ou simple : superposer un voile couleur animé + changer la couleur des taches de lumière et des rays via CSS variables sur les fills (fill="var(--sun-color)"). Les fills dans use + variables = ok. Les god rays : fill gradient... les gradients référencés par fill dans un clone héritent du gradient original (url(#...) fonctionne dans les clones). Les couleurs du gradient ne seront pas variables facilement — je peux mettre des stops avec `stop-color="var(--sun-a)"` ? Les custom properties sur les stops de gradient : les stops sont dans le même document, la propriété se résout au niveau du stop lui-même héritant de :root — oui, `stop { stop-color: var(--sun-a) }` via CSS fonctionne et se met à jour dynamiquement. OK. Voyons la charge de travail : c'est beaucoup, mais gérable. Simplifions intelligemment : - Temps/soleil glissable : oui, c'est fort. Je le fais avec une interpolation JS simple : `sunT ∈ [0,1]`, 0 = après-midi doré (défaut), 1 = fin d'après-midi ambre... En fait mieux : sunX de -1 à 1 contrôlant l'angle. Valeur de base : légère respiration auto (sin lent, ±0.08). Drag : delta.x → offset, clampé. Relâché : ressort vers base. Application : - Ombres personnages : `skewX(-angle)`, `scaleY(len)`, translate du pied. - Ombres d'arbres : rotation légère du groupe des bandes + opacité. - God rays : rotation du groupe rays (autour du coin haut) + opacité. - Couleur : `--sun-warmth` module une superposition couleur (mix orange doux en overlay/multiply léger) et la couleur des taches. - Intensité dappled : opacité globale. Je pilote tout en JS via setProperty de variables CSS + transforms directs. Les éléments concernés : wrappers d'ombres, groupe rays, voile couleur. Les wrappers d'ombres sont des éléments réels → transform JS direct, avec la respiration + drag. - Ombres personnages étirées : wrapper `` — transform du wrapper = placement au sol + skew/scale (JS ou CSS var). À l'intérieur, le `` hérite des SMIL. Le fill via variables CSS. Important : le placement des pieds. Le personnage est dessiné avec les pieds à y=0 dans son repère local (origin aux pieds), centré x=0. Comme ça, le wrapper fait `translate(xFoot, yGround) scale(s) skewX(a)` et tout suit. Le skewX autour de l'origine (pieds) : transform-origin par défaut en SVG = origin du user space (0,0) si `transform-box: view-box`... Pour les éléments SVG, le transform CSS par défaut a son origine à (0,0) du viewport (view-box), pas de l'élément ! Il faut définir `transform-origin: 0 0` — mais avec translate déjà dans le transform, l'ordre : `translate(x,y) skewX(a) scale(...)` → le skew se fait autour du point courant après translate ? Les transforms se composent : le skew est appliqué dans le repère déjà translaté, donc autour du point (0,0) local = les pieds. Oui ! Si le transform list est `translate(x,y) skewX(a) scaleY(s)`, l'effet : le contenu est d'abord mis à l'échelle/skew autour de son origine locale (0,0 = pieds puisque j'ai dessiné les pieds à 0,0), puis translaté. Exactement ce que je veux, sans transform-origin. Mais attention : scaleY(s) avec s<1 ramène le corps vers le haut ? Les pieds à y=0, le corps vers y négatif (dessiné vers le haut) → scaleY(s) réduit vers les pieds. skewX(a) : décale x proportionnellement à y (y négatif → décalage vers... skewX(a) : x' = x + y·tan(a) ; y négatif → si a>0, décalage négatif = gauche). OK cohérent. Je vais dessiner les personnages dans `` avec pieds à (0,0), hauteur ~ 200 unités (garçon), chiot ~ 90. viewBox 1600×900. Garçon placé à x≈680, sol y≈700. Chiot x≈560 devant, ou derrière ? Le chiot trotte devant/à côté. Mettons chiot légèrement à gauche du garçon, un peu plus près du spectateur (sol y≈720). **Détails du dessin du garçon (storybook, silhouette chaude) :** Proportions mignonnes : tête grosse (~ r=34), corps petit. Style : aplats avec quelques accents. - Jambes : deux rects/paths arrondis depuis la hanche (y≈-70) jusqu'à y=0, avec pieds (petites bottes). Rotation à la hanche ±22°. - Buste : path arrondi de y=-70 à y=-125, veste moutarde/olive. - Bras : depuis épaule y≈-115, rotation ±20° opposée aux jambes, mains. - Tête : cercle y≈-150 r=30, cheveux (calotte), nez pointu petit, oreille. Cheveux bruns, joue rose. - Écharpe terracotta qui flotte légèrement (petit path animé — rotation légère ou morph ? juste une petite rotation du bout de l'écharpe). - Peut-être un chapeau pointu ? Non, cheveux ébouriffés suffisent. Le chiot : - Corps oval, tête ronde avec museau, oreilles tombantes (rotation flottante), queue fine qui remue (rotation rapide ±25° à 3-4Hz ? plutôt 2.5Hz visible), 4 pattes petites en trot (rotation rapide, phases décalées), langue ? non. Couleur : crème/miel avec oreilles brunes. - Petit trot bondissant : le corps ent bounce translateY ±4px à 2× la fréquence des pattes. Échelle de temps SMIL : cycle garçon 1.0s, chiot 0.5s (trot plus rapide). **Le sol :** chemin clair (sable/terre) en perspective douce traversant du bas-gauche... En vue de côté storybook, le sol est une bande en bas (y 640→900) avec le chemin sinueux. Les personnages marchent sur le chemin à y≈700-720. Le sol défile : texture = taches d'herbe, cailloux, touffes — je génère un motif en JS ? Ou je dessine un `` ? Un pattern répétitif défilant est simple : largeur de tile 1600 ? Un `` animé : animer `patternTransform="translate"` via SMIL sur le pattern → le contenu du pattern défile partout où il est appliqué. Élégant ! `` appliqué à un rect du sol. SMIL sur patternTransform : support ok ? Les animations SMIL du patternTransform... `animateTransform` avec attributeName="patternTransform" — support historiquement correct dans les navigateurs Blink/Gecko. Risque modéré. Alternative plus sûre : deux copies d'un groupe de décor de sol (généré en JS une fois : touffes d'herbe, cailloux, papillons de lumière au sol) translatées en CSS. Je vais générer le décor de sol en JS (fonction seedable) : 60-80 éléments (touffes = petits arcs, cailloux = ellipses, brindilles) répartis sur 3200px de large, dans un `` défilant CSS `@keyframes drift { to { transform: translateX(-3200px) } }` linéaire infini. Pareil pour la couche "troncs intermédiaires" (8-10 troncs + fougères sur 3200px, défilement plus lent), la couche fond (silhouettes d'arbres, quasi statique avec très lente dérive), et le premier plan (grosses fougères/feuillage sur 3200, rapide). Génération JS = aléa contrôlé,moins de markup manuel, et cohérence de boucle (deux copies identiques). Parallax souris : j'applique sur chaque couche un container parent avec translate souris (depth différent), enfant avec le défilement keyframes. Attention : CSS transform sur le parent + animation sur l'enfant — ok, indépendants. Attention conflit : l'animation keyframes sur l'enfant utilise transform ; le parallax sur le parent. Bien. **Dappled light :** deux ensembles : - Au sol : dans la couche sol défilante ? Si les taches défilent avec le sol à 120px/s, elles bougent vite — en réalité, les taches de lumière bougent avec les feuilles, pas avec le marcheur... Mais si le marcheur avance et que la lumière est fixe, les taches doivent défiler vers l'arrière à la vitesse du sol pour rester cohérentes (elles sont attachées au monde). Oui, elles doivent défiler avec le sol. Mais en plus, elles scintillent et dérivent légèrement (feuilles qui bougent). Donc : taches dans le groupe sol-défilant, chacune avec animation CSS propre (opacity flicker 4-9s, translate drift ±10px). Génération JS : ~40 taches (ellipses floues fill var(--spot), mix-blend soft-light ou screen, blur filter via filter="url(#soft)" — attention performance blur SVG sur 40 éléments + animations... Utiliser plutôt fill radialGradient avec fondu intégré (radial gradient d'un doré vers transparent) — pas de filter blur, perf ok. Dégradés radiaux doux = lumière, c'est pictural, légitime. - Sur les personnages : une grande zone de lumière tachetée par-dessus les personnages en blend "soft-light"/"overlay" — un groupe de taches fixes qui scintillent doucement au-dessus des personnages, en screen. Léger, subtil. - Le tronc du garçon : taches qui le traversent ? En overlay léger, ok. **God rays :** 4-6 quadrilatères très doux (gradient linéaire vertical doré → transparent), rotation commune du groupe, opacité 0.06-0.14, blend screen. Balancement : rotation ±1.5° sur 9s. **Brume/atmosphère :** bandes horizontales très pâles entre les couches de fond (ellipse énorme crème, opacité 0.12). **Feuillage premier plan :** grosses feuilles simples (paths type feuille allongée) accrochées aux coins haut-gauche, haut-droit, bas-bords ; balancement rotation ±3° à des périodes 5-8s décalées ; réactives au vent curseur. En JS je crée N feuilles de premier plan dans un groupe ; chaque frame, angle = base + sway(t) + wind(mouse). Feuilles qui tombent : 6-8 feuilles indépendantes qui spiralent en tombant sur 14s, opacité fondu en fin, respawn en haut avec x aléatoire — pilotées en JS (simple : t local, position param) ou CSS keyframes avec delays. JS plus simple pour le respawn aléatoire propre. Je fais un petit moteur de particules feuilles en JS (10 feuilles max, cheap). **Le cadre "page" :** pour renforcer le storybook : la scène occupe l'écran avec une marge papier crème ? Ou pleine page avec titre typographique en haut : "L'heure dorée" / un court paragraphe narratif en français avec une belle typo, posé sur un bandeau doux en haut à gauche ou intégré dans le ciel de l'illustration. Je vais faire : plein écran, le texte storybook en overlay en haut-gauche : Titre : « La forêt des ombres longues » — mieux : « Le sentier doré ». Texte : « Milo et Pistache marchaient dans la forêt. Le soleil filtrait à travers les feuilles, et leurs ombres dansaient tout doucement sur le sentier. » Typo : Fraunces (italique doux pour le récit, petit caps pour le titre). Un petit "feuilleter" indicatif ? Ajoutons une consigne discrète en bas : « glissez la lumière — maintenez et déplacez la souris » et « cliquez pour la brise ». En typographie petite, discrète. Interactions récap : 1. Souris : parallax des couches + inclinaison des feuilles de premier plan (vent). 2. Clic : rafale de feuilles + "Hou ! Hou !" du chiot + queue frénétique 2s. 3. Maintenir-glisser horizontalement : le soleil glisse → ombres s'étirent/raccourcissent et pivotent, lumière dore/refroidit. Pendant le drag, on désactive la rafale ? Le clic simple (sans drag > seuil) = rafale. Je gère : pointerdown → track ; si mouvement horizontal > 20px → mode drag soleil ; pointerup sans drag → clic (rafale + woof). Bouton en bas à droite ? Pas nécessaire. Peut-être un contrôle discret pour rejouer ? Non. Sons ? Non, gardons silencieux (ou léger... non, pas de fichiers externes, WebAudio possible mais pas nécessaire — je skip, restons focalisés ; en fait un petit "hou" synthétisé serait kitsch. Skip). **Palette (storybook chaude, pas de bleu générique) :** - Papier / brume : #f3e9d4, #e9dcc0 - Verts forêt : fond lointain #b7c29a / #9aa87e ; mid #6e7f52, #55663f ; premier plan #3c4a2e, #2c3a22, #20291a - Troncs : #5d4a36, #4a3a2b - Chemin : #d9c49a, #e4d2ab - Lumière : #ffe6a3, #ffd47e, #ffc95c - Garçon : veste #b3552e (terracotta) ou moutarde #c98a2e ; pantalon #4a4438 ; peau #e8b98a ; cheveux #4a3category2b ; écharpe #d96f32. Décision : veste olive moutarde #b07a2a, écharpe terracotta #cf5b2e, pantalon brun #5a4a38, bottes #3a2f24. - Chiot : miel #e0b872, oreilles #8a5a34, truffe #3a2f24. - Ombres : #2a2418 à faible opacité, blur. Le fond du ciel entre les arbres : crème chaud #f2e7c9 avec brume. Lumineux, doux. **Typographie :** Google Fonts : Fraunces (avec axes : "Fraunces:ital,opsz,wght@0,9..144,300..700;1,9..144,300..700"). Titre en Fraunces 144 optical semi-bold, récit en Fraunces italic 400 opsz 28. Police d'accompagnement UI mini : Fraunces partout, cohérent. **Grain papier :** un `` en overlay plein écran (rect avec filter grain, opacity 0.05, mix-blend multiply) + vignette radiale douce (multiply sombre léger aux coins). Grain statique (pas animé — le grain animé coûte cher et fait bruit vidéo ; statique = papier). Aussi un léger "bord de page" : je peux entourer la scène d'une bordure intérieure fine (comme une illustration encadrée dans le livre) — un cadre crème de 18px autour avec un filet fin ? Sur plein écran, une marge de page autour de l'illustration (padding crème ~28px, l'illustration dans un cadre arrondi léger avec un filet brun fin et une ombre portée douce de papier) — ça dit immédiatement "page de livre". J'aime. La page : fond papier #f4ead3, l'illustration est un rectangle plein cadre avec filet #b4552e fin et coin ornement ? Restons sobre : cadre double filet fin brun, comme les gravures anciennes. Le titre et le texte sur la marge de papier en haut ? Hmm — si l'illustration est encadrée, le texte storybook peut être DANS l'illustration en haut (sur le ciel clair) ou sous le cadre dans la marge du bas. Marge basse : texte centré façon légende de livre. Titre au-dessus du cadre. Design : ``` [ marge papier ] TITRE (petit, lettres espacées, brun) — LA FORÊT DES OMBRES LONGUES ... ou « Le sentier doré » [cadre filet] [ ILLUSTRATION PLEINE ] [/cadre] légende narrative italique sur 1-2 lignes consignes d'interaction minuscules [ marge ] ``` C'est fort "album jeunesse". Le texte sur papier crème en Fraunces = très beau. Oui, je fais ça. En mobile, marges réduites. Titre : « La longue ombre » ? « Ombres au fil du sentier » ? Simple et doux : « Le sentier doré ». Récit : « Milo et Pistache traversent la forêt. Le soleil glisse entre les feuilles, et leurs ombres — longues, molles, un peu espiègles — dansent sur le sentier. » Puis consigne : « Maintenez et glissez pour promener le soleil · Cliquez pour souffler un vent de feuilles ». Interaction supplémentaire sympa : la légende pourrait changer selon la position du soleil ? Sur 3 états (après-midi → golden hour) : quand on pousse le soleil vers le soir, la légende devient « Le soir venu, les ombres s'allongèrent jusqu'à toucher les fougères. » Joli détail vivant ! Je le fais : deux/trois variantes de phrase avec fondu selon sunT. Peu coûteux, très storybook ("tourner la page" ? non). **Structure DOM :** ```

titre + filet

(cadre)

récit (change selon soleil) + hints

? ``` tale : italic centré ? Album : centré sous l'illustration. hint : centré dessous, plus petit, opacité .55, avec des séparateurs "·". Page number coin bas-droit ABSOLUTE de .page : « — 7 — » centré bas ? Je mets sous le hint : petit "— page 7 —" opacité .4. Trop de texte ? Compact : masthead (soleil+titre), plate (flex:1), colophon (tale + hint sur une zone compacte). ok. Masthead : soleil gravé : svg 34px : cercle + 8 traits rayons + visage ? juste cercle + traits, stroke #8a5b34. Titre dessous. Ou inline : ☀(dessiné) à gauche du titre entre deux filets. Design : ligne : filet — soleil — TITRE — soleil — filet ? Un seul soleil au-dessus centré, propre. Vérifions le "hint" pour mobile : « Glissez horizontalement pour promener le soleil · touchez pour un souffle de feuilles » — je détecte coarse pointer via media (pointer:coarse) pour le texte ? Simple : les deux mentions neutralisées : « Maintenez et glissez pour promener le soleil — un clic ou un toucher souffle un vent de feuilles ». Ok unique. **Attention aux conflits SMIL + CSS sur mêmes éléments** : je n'anime pas en CSS les éléments SMIL ✓. **Le tale change aussi le title de la page ? Non.** **Reduced motion ?** prefers-reduced-motion : je pourrais couper les SMIL... Les SMIL ne se coupent pas facilement via CSS ; je peux `svg.pauseAnimations()` en JS si matchMedia reduced ✓ + figer les drifts (animation: none via media query CSS ✓) et les rAF (parallax figé). Je l'ajoute proprement : @media (prefers-reduced-motion: reduce) { .drift, .spot, .swayA... { animation: none } } + JS pauseAnimations(). Bien. **Écrivons maintenant le code final avec soin.** Je vise un fichier complet, ~700-900 lignes. Structurons le JS : 1. utils (mulberry, lerp, hexMix, el()) 2. build far, canopy, mid, groundBase(static path inline dans markup), groundTex, fg leaves (+registry), dapple, rays(in markup), falling 3. pointer handlers, rAF loop 4. caption states, woof, tail frenzy Le markup manuel : defs (personnages SMIL + gradients + filter), couches statiques simples (sky, mist), rays, woof. Personnage garçon en markup : soignons les valeurs SMIL : ```svg (col) (cou) (nez) hmm le nez doit être visible : fill peau identique au cercle : silhouette continue ✓ (dépasse). (oreille) + inner arc sombre : path stroke ? fill var(--boy-skin-d) petit croissant : `M-18,-160 Q-14,-158 -15,-153 Q-18,-156 -18,-160 Z`? bon skip inner. + mèche : `M-23,-162 Q-30,-168 -28,-176 Q-24,-170 -21,-170 Z`? j'inclus plutôt 2 pointes : ajoute `` et une sur le front : `M18,-176 Q26,-170 24,-160 Q20,-170 14,-172 Z`. Bon je peaufine au feeling, l'essentiel : calotte + mèches lisible. (identique legB fills --boy-pants (plus clair? la jambe avant plus claire : pants vs pants-d : legB fill var(--boy-pants-d), legF var(--boy-pants)) + boots idem) placé comme enfant de g.upper ✓ (le g.upper a aussi… pas d'autre transform ✓). ``` Hmm : attention : si .upper a un animateTransform translate et ses enfants ont leurs propres animateTransform : indépendants ✓. Legs hors upper → fixes verticalement, rotation hanche ✓. Mais les hanches bougent avec le bob dans la vraie vie... pieds plantés, hanche monte : les jambes devraient s'allonger — visuellement acceptable sans (bob 4.5px faible, la veste couvre la jonction). ✓ Le buste bob : la jonction veste/hanches (veste bas -70/-78, hanches -76/-80) : bob fait descendre la veste sur les jambes parfois : ok chevauchement couvert. Chiot markup : ```svg (bounce translate) rect patte arrière gauche x -27 fill fur-d rotate autour (-27,-30) values "26 -27 -30;-18 -27 -30;26..." dur .45 x -19, values inverse, begin="-0.225s" path + animateTransform values "26 -36 -46;-22 -36 -46;26" dur .38 spline ; + id="tailFrenzy" 2e animateTransform additive="sum" type="rotate" values="0 -36 -46;26 -36 -46;-26 -36 -46;0 -36 -46" dur="0.5s" begin="indefinite"/> path fill ear-d rotate (18,-70) values "10 18 -70;-8 18 -70;10" dur .45 begin="-0.2s" rotate nod (24,-52) values "2.5;-2.5;2.5" dur .45 circle (30,-57) r14 fur ; museau path ; truffe ; œil ; rotate (26,-68) values "-8 26 -68;12 26 -68;-8" dur .45 x 17 fill fur rotate (17,-32) values "-20 17 -32;24 17 -32;-20" dur .45 x 25 begin="-0.225s" values inverse begin? front legs : FL & FR opposées : FR begin -0.225 values même que FL. Ok : FL values A begin 0 ; FR values A begin -0.225 ; BL values B begin 0 ; BR values B begin -0.225 (trot diagonal ✓). collier path + clochette : le collier sur le cou entre head/body : posé après body avant head ? Il doit suivre la tête ? collier fixe au corps ok. bounce : animateTransform translate values "0 0;0 -4;0 0;0 -4;0 0" dur .45 ``` La patte : `M-3.5,-30 Q-6,-14 -5,-2 Q-5,0 -2,0 L3.5,0 Q5.5,-1 5,-4 L4.5,-14 Q5.5,-25 3.5,-30 Z` fill... Bon. Les pattes hautes -30 : corps bas y≈-26..-28 : jonction ok. Pour le chiot l'ombre : vars dog → sombre. **Dapple actors (markup JS ou manuel) :** manuel court : 8 ellipses class="spot2" cx autour acteurs. Avec animation flicker CSS delays. **Spots CSS animations :** ```css .spot{ mix-blend-mode:screen; } .flick{ animation: flick var(--fd,6s) ease-in-out var(--fdel,0s) infinite alternate; } @keyframes flick{ from{opacity:var(--o0,.45)} to{opacity:var(--o1,.9)} } ``` Les spots sol : ellipse class="spot flick" style="--fd:5.2s;--fdel:-2s;--o0:.4;--o1:.95". Les dapple acteurs : class="spot flick" aussi (screen). **fg leaves sway CSS :** ```css .sway{ animation: sway var(--sd,7s) ease-in-out var(--sdel) infinite alternate; transform-box:fill-box; } @keyframes sway{ from{ transform: rotate(var(--sa,-2deg)) } to{ transform: rotate(var(--sb,2.5deg)) } } ``` transform-box fill-box + origin en bas : `transform-origin:50% 100%`? Les frondes pivotent à la base (bas de la fronde) ✓ origin bottom center. Pour feuilles suspendues : origin top center (accrochées en haut) : var --so. transform-origin via var : `transform-origin: var(--sox,50%) var(--soy,100%)`. JS wind sur parent g.leafWind rotate autour du pivot : pivot = position d'ancrage en coordonnées scène : je stocke lors de la génération (anchorX, anchorY) et setAttribute rotate. Le wind tilt appliqué : rot = windAmp * strength ; lissage par feuille : cur += (target-cur)*0.1. Wind model : global mouseVX lissé (mVX) ; pour chaque feuille : d² au pivot (distance curseur-scène) ; s = exp(-d²/140000) ; target = clamp(mVX*0.10*s, ±9) + gust*6*sin(t*13+phase) ; ✓. **Falling leaves JS :** chaque leaf : un dans wFall, formes : `M0,0 Q6,-3 12,0 Q6,3 0,0 Z` (feuille ovale pointue) avec tige ? simple : deux formes de feuille path. rotation via setAttribute transform `translate(x y) rotate(a) scale(s)`. Positions init random. Couleurs [#d9913c,#c8702e,#b45528,#e0a94f]. width feuille ~14-22. Update : ``` y += (34+14*sin(t*0.9+ph)) * dt * (1+2.4*gust); x += (sin(t*1.7+ph)*26 - 110 + mVX*20) * dt * (1+2.2*gust); // -110 : défile monde a = ph*57 + t*spin*60? spin ±120°/s ; flutter : a += sin(t*5+ph)*18 if y>920 or x<-80: respawn: x=rand(200,1500)+? x initial dans [-100,1700]; y=-40-rand40; nouvelle ph. opacity : min(1, (y>780? (920-y)/140 :1)) set. ``` 11 feuilles. dt = min(0.05, Δt). **Boucle rAF :** ``` t += dt; // mouse parallax smooth px += (tx-px)*0.06 etc. // sun if(!dragging) dragOff += (0-dragOff)*Math.min(1,dt*1.6); base = 0.5 + 0.11*Math.sin(t*0.14) ; // période ~45s target = clamp(base+dragOff, -1, 1); sunT += (target-sunT)*Math.min(1, dt*2.2); applySun(sunT); // wind global smooth: mVXs += (mVX - mVXs)*0.08 ; mVX decay *=0.9 chaque frame (vitesse pointeur) // gust decay gust *= Math.pow(0.35, dt); // decay // fg leaves update // falling update // caption check (sunT) ``` applySun : ``` p = Math.abs(sunT); warmth=(sunT+1)/2; a = (8+58*p) * Math.sign(sunT); // deg ; sign(0)? Math.sign ok sBoy = 0.30+0.95*p ; sDog=0.36+0.72*p; boyShadowWrap.setAttribute('transform', `translate(706 737) skewX(${a.toFixed(2)}) scale(0.95 ${sBoy.toFixed(3)})`); dogShadowWrap.setAttribute('transform', `translate(566 752) skewX(${(a*0.94).toFixed(2)}) scale(0.98 ${sDog.toFixed(3)})`); opacity ombres : boy: 0.34+0.2*p ; dog: 0.36+0.18*p raysRot.setAttribute('transform', `rotate(${(-30*sunT).toFixed(2)} 1500 -80)`); raysGroup.style.opacity = (0.5+0.5*warmth)*(0.8+0.2?) → fixe simple : 0.55+0.4*warmth. veil.setAttribute('fill', mix('#fff3d8','#ff9d3f',warmth)) ; veil.setAttribute('opacity', (0.05+0.30*warmth*warmth)); CSS vars: --spot-a: mix('#fff3c9','#ffc063',warmth); --spot-b: mix('#ffe29a','#ff9a3f',warmth); --sky-top: mix('#f7eed2','#f8d9a4',warmth); --sky-bot: mix('#ece0bd','#eab873',warmth); --ray: mix('#ffe6a8','#ffb454',warmth). ``` sign : à sunT≈0 : a≈8°·sign → discontinuité à 0 ? a = (8+58p)·sign : à p→0, a→±8 : saut de -8 à +8 en passant 0 : léger saut de skew 16° pendant le passage rapide — le lissage sunT (lerp) passe vite mais visiblement ? Le saut de 16° en skew : perceptible mais bref. Mieux : a = 66*sunT + 6*Math.sign(sunT)*(p>0.06?1:0)... simplifions : a = 70*sunT + 8*Math.sin(sunT*Math.PI) hmm. a = 70*sunT est linéaire continu ✓ (à p=1 : 70°, un peu moins dramatique que 66°, ok) — je prends a = 68*sunT + 10*Math.sign(sunT)*p*p (continu, accentue aux extrêmes) : à 0 → 0 ✓ pas de saut. sBoy = 0.30+0.95*p ✓ continu. Couchant p=1 : a=78° : tan ~5 : 190·1.25·… très long : l'ombre du garçon dépasserait 900px vers la gauche ! Extrême mais "soir de solstice" — clips hors cadre gauche (566-900 <0) : l'ombre sort du cadre : visuellement ok (elle continue hors champ) mais blur/edge… Le use coupé au viewport : le svg rogne naturellement ✓. D'accord, dramatique = voulu (la phrase du soir : "les ombres s'étirent jusqu'aux fougères"). Mais 78° est très incliné : l'ombre presque horizontale : skew 78° avec scaleY 1.25 : la silhouette presque couchée : réaliste pour un soleil rasant ✓. Je limite à a_max ~64 : a = 56*sunT + 8*sign*p². → max 64 ✓. sunT base 0.5 ± 0.11 : a ∈ [0.39·56+... ≈ 24..31°], s ∈ [0.60..0.66] : ombres moyennes-longes vers la gauche ✓. **Ombres positionnement :** garçon pieds (706,737) ; le personnage réel ``. L'ombre skew autour des pieds ✓. Chiot : réel translate(566 752) — 140px à gauche du garçon, 15px plus bas (plus proche). L'ombre chiot même point. Vérif : l'ombre du chiot skew s'étend vers la gauche jusqu'à ~ -250px : x 566-250 = 316 ✓ visible. **z des ombres vs groundTex :** ombres APRÈS groundTex ✓ (au-dessus des taches sol ? Les taches de lumière devraient-elles éclaircir l'ombre ? Non : l'ombre par-dessus les taches = ombre lisible ✓ ; mais les taches sol défilent et l'ombre des arbres aussi ; les spots sol sous l'ombre personnage : ok). **Le filtre blur et slices :** ombre skewed s'étend à gauche ; filter region -50%..200% du bbox de l'ombre (bbox = silhouette transformée ~ 190×420 ?) ok. **Woof placement** : au-dessus du chiot (566,700) : textes "Hou !" à (0,-30) et (30,-58) tailles 26/34 italic. La petite virgule de bande dessinée : deux petits traits sous le texte pointant vers le chiot : `M-2,-2 q-3,6 -9,9` stroke. Animation CSS .talk sur #woof : keyframes woofPop { 0%{opacity:0; transform:translate(566px,700px) } ...} — transform CSS sur g SVG remplace l'attribut transform… j'ai positionné via attribut transform ; animer en CSS translateY additionnel nécessite wrapper : #woofWrap (attribut translate) > g#woof (class talk, CSS animation translateY/rotate/opacity). ✓ Le keyframes woofPop : 0%{opacity:0;transform:translateY(8px) scale(.8)} 12%{opacity:1;transform:translateY(0) scale(1)} 70%{opacity:1} 100%{opacity:0; transform:translateY(-14px)} ; 1.9s ease-out. transform-box fill-box ? Pour un g avec seulement translate : ok sans origin. Deux textes : le 2e avec animation-delay .18s ? Ils sont dans le même g animé globalement — ok ensemble, simple. **tailFrenzy trigger** : `document.getElementById('tailFrenzy').beginElement()` — si déjà en cours, restart ? beginElement sur une animation en cours : redémarre ✓ (restart="always" défaut). Aussi petit : au survol direct du chiot (hitbox) : pareil sans rafale ? pointermove hit-test : distance au chiot <60 → déclenche woof cooldown 2.5s. Sympa. Je le fais avec un cooldown global woofCd. **Le clic rafale de feuilles supplémentaires** : en plus du gust : 6 feuilles instantanées ? Le gust accélère déjà ; j'ajoute aussi 3 "puffs" de pollen/lumière ? Skip, gust + woof suffisent. Hmm, "clic → souffle" : renforcer : je spawne 5 feuilles tombantes en haut à proximité du clic x (respawn targeted) : leaf.x = sceneX + rand(-150,150), y = rand(-40,120) → chute dense près du clic ✓ nice. **Caption logique** : state par sunT : noon si sunT<0.2, dusk si sunT>0.78 (avec zone morte) ; apply après lissage ; crossfade. **Grain data-uri** — écrire proprement encodé (utiliser %23 pour #) : ``` background-image:url("data:image/svg+xml;utf8,"); ``` alpha 0.05·a_noise — le turbulence alpha varie ✓. **Fonts import** : ``` @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..700;1,9..144,300..700&display=swap'); ``` Titre font-variation-settings ? font-optical-sizing:auto suffit ; pour forcer le grand optical size sur le titre : font-variation-settings:'opsz' 60. J'ajoute. **Ratio/hauteur page** : .page en column ; .plate flex:1 min-height:0 ; svg height 100%. Sur écran bas, min-height 320px. **Mobile portrait** : slice : visible ~ [centre] 466 units de large si ratio 9:19.5 → largeur visible = 1600·(h? recompute) : scale = max(w/1600,h/900) = h/900 (portrait) → visible width = w·900/h ≈ 415 → centre [592..1008] : les acteurs 566/706 ✓ dans le cadre, le chiot au bord gauche ✓ bien. Parfait, les acteurs sont au centre. Titre mobile : clamp. **Divers :** user-select none sur plate ; -webkit-tap-highlight transparent. Le pointermove sur toute la fenêtre (parallax) ; pointerdown/up sur la .plate. Empêcher le drag de sélectionner : preventDefault sur pointerdown. **Toast/erreurs : rien.** Vérifions qu'aucun élément interactif ne soit mort : parallax ✓, drag soleil ✓, clic rafale+woof ✓, hover chiot ✓. La légende réagit au soleil ✓. C'est vivant en continu (marche, ombres respirantes, dappled flicker, feuilles, drifts) ✓. **Écrivons le code.** Attention à bien soigner la qualité du dessin — je vais écrire les paths avec précision raisonnable. C'est un long fichier ; allons-y. Notes finales sur petites choses : - `keySplines` pour 3 values : 2 splines ✓. - SMIL `begin="-0.225s"` sur animateTransform : ok. - animateTransform sur g avec déjà transform attribut ? Les g animés SMIL (legB etc.) n'ont pas d'attribut transform statique ✓ (l'animate écraserait). - Les vars CSS : définies sur :root defaults + sur #actors/#cast-shadows overrides. - `.pl` groups : je setAttribute('transform', translate) chaque frame — 12 groupes/frame ok. - Attention : #wRays a class pl data-px et contient raysRot (rotate JS) ✓ indépendants. - mist : après far, avant canopy ? Brume devant les arbres lointains, derrière mid : ordre : far, mist, canopy(haut, indépendant), mid... canopy au-dessus de mid ? Les blobs canopy en haut du cadre (y<150) : les troncs mid montent jusqu'en haut : canopy DEVANT les troncs (feuillage devant) : canopy après mid. Réordonnons : sky, wFar(far), mist, wMid, groundBase, wGround, wCast, wActors, wCanopy? Non : canopy en haut ne touche pas les acteurs ; le mettre tôt ou tard ne change que son z vs troncs : canopy doit couvrir le haut des troncs → canopy après wMid. Mais avant ou après ground/actors : peu importe (zones disjointes) → je le laisse juste après mist pour l'ordre logique… non : pour couvrir les troncs il faut après wMid. Ordre final : sky, wFar, mist, wMid, wCanopy, groundBase, wGround, wCast, wActors, wDapple, wRays, wFall, wFg, veil, woof (woof au-dessus du veil ? la bulle doit rester lisible : après veil ✓, avant grain-global). Veil couvre tout : je le mets après wFg, woof après veil. ✓ - Le rect sky : fill url(#skyGrad) ✓. - groundBase inclut : rect herbe y600-900 (#7e8c56), frange chemin, chemin, + quelques touffes statiques derrière ? La couche groundTex défilante contient l'animé ; l'herbe de base unie + un path d'ombre sous les troncs mid ? les troncs mid sont DERRIÈRE groundBase : leur pied (y 660) recouvert par l'herbe ? Non : groundBase est APRÈS wMid → l'herbe rect y600+ couvre le bas des troncs (racines cachées) — bien : les troncs "plantés" derrière la prairie ✓. Le rect herbe de 600 à 900 cachera le pied des troncs jusqu'à y 600 ✓ : les troncs doivent descendre sous 600 : je les dessine jusqu'à y 700 ✓. - Puis le chemin sur l'herbe ✓, acteurs sur le chemin ✓. - far arbres base y ~ 590-620 : recouverts par l'herbe (600+) partiellement ✓ parfait profondeur. - mist ellipses y ~ 570-600 : chevauchent la ligne herbe ✓. **PauseAnimations pour reduced motion** ✓. **Perf du blur feGaussianBlur avec transform animé chaque frame** : le filtre recalcule ? Le contenu du use est animé SMIL (jambes) → re-render + filter re-appliqué par frame de toute façon (les jambes bougent). Blur 6 sur ~300×300 : GPU/Skia gère. Ok. stdDeviation 5. Ah, un piège : `` référençant un g avec filter... non, filter sur le wrapper g qui CONTIENT le use : le filtre s'applique au rendu du wrapper ✓. Filter sur wrapper avec transform JS chaque frame : la région du filtre suit le bbox local (indépendant du transform) ✓. **Écriture du dessin du chemin** : ``` ``` Acteurs pieds y 737/752 : sur le chemin ? Le chemin top ~768-780 : les pieds à 737 seraient SUR L'HERBE au-dessus du chemin ! Ajustons : chemin top ~735-745 : `M-80,910 L-80,760 Q150,738 400,748 Q650,758 900,742 Q1150,728 1400,744 Q1560,754 1680,742 L1680,910 Z` → top du chemin ~728-760 : pieds 737 (garçon à x706 : chemin top à x706 ≈ 752 ? interpolons : à x706 entre 650(758) et 900(742) : ≈750) → 737 < 750 : garçon AU-DESSUS du bord (sur herbe). Je veux les acteurs sur le chemin : mettre les pieds à y ≈ 780 et 795 ? Alors le sol visible en bas (795-900 = 105px devant eux ✓). Repositionnons : garçon (706, 788), chiot (566, 800). Ombres étendues vers la gauche sur le chemin ✓. La hauteur du garçon 190 → tête à ~598 : dans le cadre ✓ (ciel 0-600...). La canopée/fond au-dessus ✓. Le chiot 60 → tête ~740. Le chemin : bord haut ~735-755 ; les pieds 788/800 dedans ✓ ; le bas du chemin jusqu'à 910 (bord bas) ✓. Herbe en bas ? Non le chemin va jusqu'en bas ✓ (le chemin traverse vers le spectateur). Le path du chemin descend jusqu'à 910 : toute la zone basse = chemin ✓ ; l'herbe visible : 600→~740 en arrière-plan + touffes sur les bords latéraux ? Les bords gauche/droit du cadre en bas = chemin aussi (chemin large) ✓ très bien, simple. Touffes "bords" : y 610-730 (herbe arrière) ✓ + quelques touffes au premier plan sur le chemin (bord bas) énormes ? Non : le fg fougères couvrent le bas. Ombres d'arbres : partent des pieds des troncs mid (x aléa, y 620) → vers le bas-gauche sur le chemin ✓ traversent. Polygone de (x±w, 640) à (x+dx±w2, 910) dx=-190 : penché ✓. La rotation globale ±8° selon soleil. Le gradient treeShadow : vertical y 0→1 alpha .32→.04 ✓. Spot sol y répartis 620-900 ✓. **Placement : troncs mid x random sur 3200, éviter x≈560-760 (devant les acteurs) pour ne pas bloquer ? Les troncs défilent → passeront devant les acteurs inévitablement (couche derrière : les acteurs passent DEVANT les troncs ✓ les troncs sont derrière). ✓ pas de blocage visuel (les acteurs dessinés après). **Les fougères mid au pied des troncs** : y ~ 640-660. **Far :** base y 600-615, hauteur arbres 130-220 → sommets ~380-470 : zone médiane remplie ✓. **Canopy blobs :** y centre -10..80, rx 200-340, ry 90-140 : couvrent y jusqu'à ~200 : gaps entre blobs. + quelques grappes pendantes : cercles r 26-44 sous les blobs (y 120-190) fill plus sombre. 8 blobs sur [-100,1700] positions irrégulières : x cumulés rr(210,330)-150. **Fg :** fougères bas : 8 groupes espacés rr(300,420) sur 3200 : chaque : 5-7 frondes : path arc : `M0,0 Q40,-70 95,-88` stroke w 6-10 round, ou fronde feuillue fill : path `M0,0 Q30,-60 90,-80 Q60,-52 42,-40 Q66,-46 84,-58 ...` compliqué. Fronde simple élégante : tige courbe stroke + pinnules : trop de détail ; je fais des frondes = formes feuilles lancéolées courbées : path fermé : `M0,0 C10,-40 34,-72 78,-88 C50,-64 30,-36 22,0 Z` fill sombre, plusieurs rotations/scales autour de (0,0) → touffe de fougère ✓ + au centre des tiges hautes ? Ok. Feuilles suspendues haut : 5 groupes : chaque : branche stroke + 5-7 feuilles lancéolées (path feuille `M0,0 Q10,-8 22,-2 Q10,6 0,0 Z` scale) accrochées, fill #24301c/#2b3a22, y 0-140, pivot en haut. Ces groupes = leafWind (JS) contenant leafSway (CSS origin top). Bords latéraux ? Slice rogne ; skip. fougères fg : sway CSS origin bottom (--soy 100%) ✓ ; vent JS : pivot = (x, 900) base. Registry fg pour JS : les groupes générés : je marque data-px etc. Les éléments générés dans la couche fg drift ×2 → il faut générer le contenu UNE fois et cloner : je génère un puis cloneNode(true) translate(3200) ✓ (les clones partagent classes : CSS sway marche ; le JS vent : je collecte querySelectorAll('.leafWind') après clonage : les pivots en coordonnées scène : pour la copie B, pivot +3200 → distance au curseur fausse quand la copie est visible... Le curseur est dans [0..1600] visible ; la copie B visible quand offset~ -3200 : son contenu occupe [0..3200] avec positions réelles = positions base -offset... Le pivot stocké en base (0..3200) ; position écran réelle = base + currentDriftOffset + copies. Je peux calculer : screenX = baseX - driftPos où driftPos ∈[0,3200) lu via... compliqué. Simplification : le vent n'affecte que les feuilles dont le pivot est proche du curseur ; pour la copie B je stocke pivot-3200 (équiv position quand elle est visible au début ?) hmm. Alternative simple et robuste : le vent s'applique uniformément (pas de distance) : toutes les feuilles fg oscillent avec mVX (amplitude selon leur profondeur kk aléa) : target = mVX*0.09*kk + gust flutter. Le "vent de passage" devient global : visuellement très bien (une brise traverse tout le feuillage). Je drop la distance : plus simple, toujours correct. ✓ La distance au curseur pour le fun : je garde global. Ok. Mais alors "le curseur souffle" : le mouvement de la souris crée mVX (vitesse horizontale) → toutes les feuilles s'inclinent + les feuilles tombantes dérivent + gust au clic. Le parallax donne la spatialité. ✓ Bien. **Woof cooldown & hover dog :** sceneX/Y convertis ; dist au (566,745) <70 → woof() (cooldown 2.8s). **Chiot regarde la souris ? Trop.** **Assemblage du JS de génération** — fonctions : ```js const NS='http://www.w3.org/2000/svg'; function el(n,attrs,parent){const e=document.createElementNS(NS,n);for(const k in attrs)e.setAttribute(k,attrs[k]);if(parent)parent.appendChild(e);return e;} ``` far : ```js function buildFar(g){ let x=-80; while(x<3300){ const h=rr(120,230), bw=rr(7,14); const row = R()<0.5; // tronc el('path',{d:`M${x-3},612 L${x-bw},612-h ... `},...) — tronc : `M${x-bw},${610} L${x-bw*0.7},${610-h} L${x+bw*0.7},${610-h} L${x+bw},${610} Z` fill '#b4ab8f' op .8 // canopée : 3 ellipses for i<3: el('ellipse',{cx:x+rr(-26,26), cy:608-h+rr(-14,18), rx:rr(26,46), ry:rr(18,30), fill: pick, opacity:.85}) x+=rr(150,300); } } ``` couleurs far : ['#a9b98b','#9db07f','#b6c39a'] troncs '#b3a98d'. Deux rangées ? Une rangée + profondeur via teinte aléa ok. J'ajoute une rangée arrière plus pâle : je fais deux passes : passe pâle (y 600, couleurs désaturées claires op .7) puis passe normale (y 615). Simple : boucle 2 rangées. mid : ```js function buildMid(g){ let x=-100; while(x<3300){ const w=rr(30,64), h=rr(560,760); // top y = 700-h? tronc de y700 à 700-h... jusqu'en haut : top y = -40 : hauteur 740 : ok fixe : top -60, base 700, évasement. const c = pick(['#5f4c37','#51402d','#66523b']); el('path',{d: trunk(x,w)}, g) fill c branches: 2: el('path',{d:`M${x±}, ...` petite branche stroke w 8}) root flares: path base. fern at foot: buildFern(g, x+rr(-30,30), rr(655,685), rr(0.8,1.5), mid colors) x+=rr(280,460); } } ``` trunk path : légèrement courbe : `M${x-w/2},700 C${x-w/2-4},${400} ${x-w},${160} ${x-w*0.7},-60 L${x+w*0.7},-60 C${x+w},${160} ${x+w/2+4},${400} ${x+w/2},700 Z` ✓ + racines : `M${x-w/2},700 L${x-w/2-14},716 L${x+w/2+14},716 L${x+w/2},700 Z` même fill (sous y600 caché par herbe en partie ✓ l'herbe top 600 : base tronc 700 cachée ! L'herbe (600→910) couvre y>600 : les troncs base 700 : caché de 600 à 700 : les troncs semblent plantés derrière la prairie dont le bord est à y=600 ?! Mais le chemin top ~740 et l'herbe visible 600-740 : les troncs disparaissent à y 600 : cohérent : ils sont plantés à l'arrière de la prairie ✓. Les fougères mid au pied y 655-685 : SUR l'herbe visible ✓ (posées devant, dessinées dans la couche mid APRÈS groundBase ? Non mid est avant groundBase → fougères cachées sous l'herbe rect ! → les fougères du pied doivent être dans groundTex (défilent avec le sol ? les fougères au pied des troncs devraient défiler à la vitesse mid, pas ground). Conflit : fougères du pied entre mid (troncs) et groundBase (herbe). Réorganisons : groundBase (l'herbe) DOIT être avant les fougères du pied. Ordre : wMid(troncs) → groundBase(herbe+chemin) → wMidFerns(défile 58s même vitesse, contient fougères du pied + cailloux du chemin haut ?) → wGround... Deux couches défilantes : midDrift (troncs) et midFerns (fougères pied) même vitesse : je peux mettre les fougères dans le MÊME drift group que les troncs mais APRÈS groundBase ? Impossible (un groupe = une position z). → Je crée deux groupes drift synchronisés (même --dur, même phase begin) : #driftMidA (troncs, avant groundBase) et #driftMidB (fougères, après groundBase). Les animations CSS démarrent au chargement en même temps, mêmes durées → synchrones ✓ (léger décalage possible au démarrage quasi nul). Les x des fougères = x des troncs : je stocke les positions des troncs pour placer les fougères ✓. Détail : le rect herbe couvre 600-910 pleine largeur statique ✓ ; fougères pied y 640-700 posées dessus, défilent avec les troncs ✓ cohérent (elles appartiennent aux troncs). Et les touffes groundTex (vitesse 120) : herbe au premier plan du chemin ✓ ok deux vitesses d'herbe = parallax naturel ✓. **Le pied des troncs derrière l'herbe** : joli effet de profondeur ✓. **buildGroundTex** : ```js // ordre dans g : ombres d'arbres (sous tout), cailloux, brindilles, touffes arrière, spots, glints, touffes premier plan (grandes, y 850-905) ``` Ombres d'arbres : positions : indépendantes x : for i<10 : x=rr(0,3200) : polygone : `M${x},${648} L${x+rr(26,60)},${644} L${x-140-w? ...` : dx bas = -rr(150,260) : points : p1(x,650), p2(x+w,646), p3(x+w+dx2, 915), p4(x+dx2, 915) où dx2 = dx - w*0.3 : fill url(#treeShGrad) opacity rr(.5,.9). Rotation du groupe : #treeShadowGroup rotate(sun-angle*0.35 800 780)? appliqué en JS avec le soleil (dans applySun : treeShadows.setAttribute('transform', `rotate(${a*0.28} 800 770)`) — léger basculement ✓. Cailloux : y 745-905 : ellipse rx rr(4,14) ry rr(2,5) fill pick(['#c9b184','#bfa87c','#d3bd92']) op .8 : 46. Touffes arrière : y 612-728 : 55 touffes stroke '#6f7f4c'/'#7d8c55' op .9 s rr(0.7,1.2). Spots : y 615-905 : 44 : rx rr(26,110) ry rx*rr(.34,.55) class spot flick opacité via vars ✓ fill url(#spotGrad). Glints : 10 : rx rr(8,20) op via vars --o0 .8 --o1 1. Touffes premier plan : y rr(860,908) 22 : s rr(1.2,2.2) stroke '#3f4c2c' w up. Brindilles : 16 : path `M x,y q rr,rr ...` stroke '#8a714e' w2. Spots flick delays négatifs : style=`--fd:${rr(3.5,8).toFixed(1)}s;--fdel:${(-rr(0,8)).toFixed(1)}s;--o0:${rr(.35,.6)};--o1:${rr(.75,1)}`. **dapple acteurs (statique markup JS)** : 8 ellipses : positions [{716,590,rx60,ry30},{690,640,rx90,ry40},{740,690,rx50,ry26},{712,730,rx80,ry30} boy ; {585,700,rx36,ry20},{560,730,rx48,ry24},{600,760,rx30,ry16} dog ; +{650,660,rx120,ry46} entre les deux] class spot flick blend screen? Je mets le groupe wDapple style mix-blend-mode:screen ; opacités modérées (screen éclaircit fort) : --o0 .18 --o1 .45. ✓ subtil. **Rays markup** : ``` ... 5 rays bx = 520, 760, 1000, 1240, 1480 largeurs 70-130, incliné -260 à -350 en bas opacity par ray .5-.9 (via rayGrad alpha) + flicker CSS class flick --o0 .25 --o1 .6 ``` rayGrad : linearGradient x1=0 y1=0 x2=0 y2=1 (bbox) stops : 0 : var(--ray) op .5 ; 55% op .18 ; 100% op 0. Les rays orientés haut→bas ✓. mix-blend sur chaque path ✓ (ou sur groupe, enfants normaux : blend sur le groupe : un seul composite ✓ mieux : groupe style mix-blend-mode:screen). **Veil** : `` après wFg. **wFall** : g vide, JS. **Final HTML skeleton** : ```html Le sentier doré — page animée

? coins ornementaux ? skip.

``` Ornement masthead : petit soleil : cercle r7 + 8 rayons lignes + point centre ; stroke #9a6438. Titre entre filets ? h1 + .sub en dessous, puis plate. Ajoutons un filet fin de part et d'autre du sub ? Le sub en petites caps espacées : "· une page animée ·". Ok sobre. **CSS complet** : je vais l'écrire soigneusement (papier #f1e5cb, encre #4a3a28, accent #b4552e terracotta). plate border : `border:1px solid #a5804f; box-shadow: inset 0 0 0 5px #f4ead2? ` Double filet : outer 1px + inner : `box-shadow: 0 0 0 6px var(--paper), 0 0 0 7px rgba(138,99,60,.55), 0 18px 40px -18px rgba(96,64,28,.35)` hmm : le plate a border 1px ; à 6px à l'intérieur un second filet : ::before absolute inset:5px border:1px solid rgba(...,0.5) pointer-events none z-index 5 (au-dessus du svg, cadre intérieur fin ✓ style gravure). ✓ + radius 2px. Le tale : `font-style:italic; font-size:clamp(14px,1.8vw,19px)`. Allons-y pour écrire le fichier final. Je dois faire attention aux nombreux détails mais rester efficace. Longueur estimée ~850 lignes. OK. Petites vérifs SMIL supplémentaires : - `calcMode="spline"` avec `keyTimes="0;0.5;1"` et 2 keySplines ✓. - Le bob values 5 points keyTimes "0;0.25;0.5;0.75;1" + 4 keySplines ✓. - begin négatif sur animateTransform ✓. transform-origin CSS pour .sway : transform-box:fill-box; transform-origin:var(--ox,50%) var(--oy,100%) ✓. Legs SMIL rotate centre absolu (0,-76) : type="rotate" values "24 0 -76; ..." ✓ (rotate avec cx cy dans values ✓). Pattes chiot : centre (17,-32) etc ✓. **Ombres et `use` : href="#boyFig"** — boyFig dans defs : ✓ référencé. Defs : les figures dans ne sont pas rendues directement ✓. **Ombre chiot/garçon vars :** #castShadows g style avec toutes les vars sombres. fill-opacity ? opacity sur le use : opacity="0.5" modulé JS par wrapper .setAttribute('opacity') sur le wrap ? Le wrap a déjà transform ; opacity attribut indépendant ✓ : boyShadowWrap.setAttribute('opacity', ...). filter sur le wrap aussi (attribut). Le wrapper a des attributs transform+opacity+filter : transform écrasé par JS chaque frame ✓, opacity idem ✓, filter statique ✓. **Un détail : l'ombre pendant le bob du personnage (SMIL translate interne) : l'ombre "saute" aussi (le haut de la silhouette ombre ondule) : réalisme ok, doux (4px). ✓ **Le chiot devant le garçon ou derrière ?** chiot à gauche (566) garçon (706) : pas de chevauchement (espacés de 140, largeurs ~60/70) ✓. Le chiot 566 : largeur du chiot ±50 : [516,616] ; garçon [660,752] ✓. **Ombres qui se chevauchent** : ombre garçon étendue gauche peut recouvrir chiot/son ombre : réaliste ✓ l'ombre dessinée avant les acteurs ✓. **applySun : opacité du dapple/spot couleurs :** via CSS vars sur :root : --spot-a/--spot-b ✓ (les stops CSS référencent var ✓). Les stops CSS : ```css #spotGrad stop:nth-child(1){stop-color:var(--spot-a)} #spotGrad stop:nth-child(2){stop-color:var(--spot-b)} #spotGrad stop:nth-child(3){stop-color:var(--spot-b)} #rayGrad stop{stop-color:var(--ray)} #skyGrad stop:nth-child(1){stop-color:var(--sky-top)} #skyGrad stop:nth-child(2){stop-color:var(--sky-bot)} #treeShGrad stop:nth-child(1){stop-color:#2e2415;stop-opacity:.32} ``` JS écrit sur document.documentElement.style.setProperty ✓. La valeur initiale des vars sur :root dans CSS ✓ (première frame avant JS ok). **Le ciel radial vs linear : linear vertical ok.** **Fenêtre resize : rien à faire (SVG).** **Pointer events :** ```js plate.addEventListener('pointerdown', e=>{ down=true; moved=false; sx=e.clientX; lastX=e.clientX; t0=performance.now(); plate.setPointerCapture(e.pointerId); }) pointermove (window): mx normalisé etc ; mVX calc ; if(down){ dx=e.clientX-lastX; if(Math.abs(e.clientX-sx)>14) moved=true; if(moved){ dragOff=clamp(dragOff+dx*0.0032, -0.75, 0.75); } lastX=e.clientX; } pointerup: down=false; if(!moved && performance.now()-t0<500) burst(sceneX(e), sceneY(e)); (dragOff spring back in loop) pointercancel idem. ``` sceneX(e) : conversion slice : ```js function toScene(e){ const r=scene.getBoundingClientRect(); const s=Math.max(r.width/1600, r.height/900); const ox=(r.width-1600*s)/2, oy=(r.height-900*s)/2; return {x:(e.clientX-r.left-ox)/s, y:(e.clientY-r.top-oy)/s}; } ``` ✓ (slice : scale=max, offsets négatifs possibles ✓ formule générale correcte pour slice & meet). burst(x,y) : gust=1 ; respawn 5 falling leaves near x ; woof() (cooldown) ; tailFrenzy. woof() : if(cd>0) return; cd=2.6; retrigger class; beginElement tailFrenzy. Hover dog (pointermove, sans down) : dist to (566,742) <75 → woof(). **mVX :** sur pointermove : mVX = clamp((e.clientX-pmx)/dtms*16, -40,40) lissé ; decay dans loop mVX*=0.86. Feather target uses mVXs (lissé 0.12). **Parallax source :** pointermove window : tx=(e.clientX/innerWidth-0.5)*2, ty=... lissage loop. Sur touch : parallax suit le doigt ✓ via pointermove. **Caption fade :** ```js let taleState='gold'; function setTale(s){ if(s===taleState) return; taleState=s; taleEl.style.opacity=0; setTimeout(()=>{ taleEl.textContent=TALES[s]; taleEl.style.opacity=1; },380); } loop: const st = sunT<0.16?'noon': sunT>0.78?'dusk':'gold'; if(st!==taleState && !fading) setTale(st); ``` Éviter re-trigger pendant fade : flag. Aussi hystérésis : entrée noon <0.16, sortie noon >0.24 : je gère avec bornes selon l'état courant : ```js function zone(t){ if(taleState==='noon') return t>0.26?(t>0.78?'dusk':'gold'):'noon'; if(taleState==='dusk') return t<0.7?(t<0.16?'noon':'gold'):'dusk'; return t<0.16?'noon': t>0.78?'dusk':'gold'; } ``` ✓. transition tale : opacity .38s ease. **Initial applySun call + premier tale.** Le title de la page : « Le sentier doré · page 7 ». Ah — vérifier que je démarre tale avec la phrase gold dans le HTML ✓. **Un dernier point esthétique : le masthead sub** : petites caps : "UNE PAGE ANIMÉE — OMBRES & LUMIÈRE FILTRANTE" hmm : « ombres longues & lumière dorée ». court : `· une page animée ·`. **Hint pointer coarse wording** : je détecte `matchMedia('(pointer:coarse)')` et adapte le texte du hint : "Touchez la forêt : un appui-glisser promène le soleil, un toucher souffle un vent de feuilles." sinon "Maintenez et glissez pour promener le soleil · cliquez pour souffler un vent de feuilles". ✓ **Bord : éviter le scroll bounce pendant drag : touch-action:none sur #plate ✓ ; body overscroll ok. Allez, j'écris le fichier. Je vais m'appliquer sur les valeurs numériques des paths du garçon/chiot pour un rendu propre. Je re-vérifie mentalement chaque figure en la traçant. GARÇON — repère pieds (0,0) : - hanche y=-76 ; épaules y=-124 ; tête centre (2,-160) r24 ; sommet cheveux -192. Hauteur ~192 ✓. - Jambes : de -80 à 0. Veste : -70..-136. LegB (arrière, fill sombre pants-d) : path jambe : `M-7,-80 Q-11,-46 -8,-14 L-8,-3 Q-8,0 -5,0 L6,0 Q9,0 9,-3 L9,-13 Q12,-48 8,-80 Z` Lecture : part (−7,−80) hanche gauche, courbe vers (−8,−14) (tibia), bas jusqu'à (−5,0), traversée du pied à (6,0), remonte à (9,−13), hanche droite (8,−80) : jambe largeur ~15 ✓. Botte : `M-11,-14 Q-14,-4 -14,-1 Q-14,0 -10,0 L15,0 Q17,-1 16,-5 L12,-14 Z` : botte pointant +x (avant) ✓ dépasse la jambe vers +x (pointe) ✓. Torso : `M-16,-78 Q-22,-108 -14,-128 Q0,-140 14,-128 Q22,-108 16,-78 Q0,-70 -16,-78 Z` ✓ (bas arrondi couvre hanches). Col : `M-8,-132 L1,-121 L10,-132 L7,-135 L-5,-135 Z` coat-d ✓ sous écharpe ? L'écharpe couvre -134..-115 : le col invisible ! Skip le col (écharpe cache). Retire. Écharpe front : `M-15,-134 Q0,-124 15,-134 L15,-122 Q0,-113 -15,-122 Z` ✓. ScarfTail : `M-13,-128 Q-31,-124 -42,-112 Q-28,-108 -12,-117 Z` derrière : dessiné AVANT torso ✓ rotate autour (-13,-126) values "-9 -13 -126;10 -13 -126;-9 -13 -126" dur 1.15s. Bras : épaule avant (-10,-126) arrière (10,-126). armB (dessiné premier, manche coat-d) : `M5,-130 Q-5,-104 -4,-88 Q-3,-81 4,-81 Q11,-82 10,-89 Q11,-108 15,-126 Z` + main circle (3,-80) r5.4 skin. rotate values "-15 10 -126;14 10 -126;-15 10 -126". armF (après head, coat) : miroir x→-x : `M-5,-130 Q5,-104 4,-88 Q3,-81 -4,-81 Q-11,-82 -10,-89 Q-11,-108 -15,-126 Z` main (-3,-80). rotate values "16 -10 -126;-15 -10 -126;16 -10 -126". Hmm : les bras croisent le buste en balançant : rotation ±15 : la manche part de l'épaule et descend ; ok. Tête : cou `M-6,-142 L6,-142 L5,-151 L-5,-151 Z` skin (rect de -142 à -151, la tête cercle r24 à (2,-160) couvre -136..-184 : cou raccorde -142..-151 sous le cercle ✓ mais cou visible entre veste (-136) et tête ? veste top -140 (Q point) : le cou presque caché ✓ bon. oreille (-16,-158) r5.5 skin ; inner : `M-19,-161 Q-15,-159 -16,-154 Q-20,-157 -19,-161 Z` skin-d. nez : cercle bord droit : cx2 r24 → x=26 à y-160 ; nez : `M23,-156 Q33,-152 24,-147 Q28,-151 22,-153 Z` : pointe à x33 ✓. œil (14,-159) r2.6 eye. sourcil : `M10,-166 Q14,-168 18,-166` stroke eye w1.6 round ✓ (joli). cheek (11,-149) r4.4 cheek op .55. cheveux : calotte : `M-22,-160 Q-27,-184 -3,-190 Q21,-193 27,-170 Q29,-161 26,-154 Q20,-166 9,-170 Q-5,-174 -15,-168 Q-20,-166 -22,-160 Z` + mèche nuque : `M-22,-160 Q-32,-166 -29,-176 Q-25,-168 -20,-167 Z` + mèche front : `M16,-176 Q27,-172 25,-158 Q19,-169 12,-172 Z` Vérif : calotte couvre le haut du cercle (tête top -184 ; cheveux top -190 ✓ déborde → volume ✓). La frange : bord bas des cheveux sur le front vers y -154..-170 ✓ l'œil à -159 : la frange `Q20,-166 9,-170` passe au-dessus de l'œil ✓ ok. Ordre dans head : cou, oreille(inner avant cercle ? inner après), tête cercle, nez, oreille+inner (l'oreille doit être au bord : cercle (-16,-158) chevauche la tête ✓ dessiné après), cheek, eye, brow, hair (dernier, couvre le haut) ✓. legF : idem legB avec fills pants (clair) — même géométrie, values inverse ✓ dessiné après head. Ordre global boyFig : ``` upper[ armB, scarfTail? scarfTail derrière torso mais dans upper avant torso ✓, torso, scarf, head, armF ], legB, legF ``` Hmm legs après upper : legF (devant veste) ✓, legB (devant torso ?! legB devrait être DERRIÈRE la veste : mais si legB après upper, il recouvre le bas de la veste : les deux jambes devant la veste : acceptable ? Le bas de la veste (-70..-78) vs hanche jambe -80 : chevauchement 8px : les deux jambes recouvrent le bas de la veste : en silhouette ça reste lisible (la veste au-dessus), mais l'esthétique : jambe arrière derrière veste mieux. → legB AVANT upper, legF après. Ordre : legB, upper[armB, scarfTail, torso, scarf, head, armF], legF. ✓ (bob de upper ne bouge pas legB ✓.) CHIOT — pieds (0,0) : - pattes arrière hanches (-26,-30) & (-18,-30) ; avant (16,-32) & (24,-32). - corps : de x -38..34, y -24..-64. Patte path (générique) : `M-4,-31 Q-6,-15 -5,-3 Q-5,0 -2,0 L4,0 Q6,-1 5,-4 L4,-14 Q6,-25 4,-31 Z` ✓. legBL : translate? Je place chaque patte avec transform="translate(x 0)" statique + animateTransform rotate… conflit : animateTransform écrase le transform statique ! → les rotations incluent la position : rotate autour (x,-31) et le path dessiné à x relatif ? Deux options : dessiner chaque path à sa position (4 paths avec coordonnées décalées) — verbeux ; ou g wrapper statique translate contenant g animé rotate : `` ✓ propre ! Le wrapper statique translate, l'animé interne rotate autour (0,-30) avec path centré x0. Je fais pareil pour le garçon ? Les jambes garçon : deux paths identiques à la même position (avant/arrière quasi superposés) : offsets légers : legB à x-3, legF à x+3 : wrapper translate(-3 0)/(3 0) ✓ et path unique. Les bras : armB x+10, armF x-10 : wrappers translate(10 0)/(-10 0), rotations autour (0,-126), paths dessinés autour de x0 : réécrivons : armB wrapper translate(10 0), g anim rotate values "-15 0 -126;..." : manche path autour x0 : `M-5,-130 Q-5? ` re-centré : manche part de (0? l'épaule locale 0,-126 : path `M-6,-130 Q-6? ` faisons : `M-6,-130 Q-9,-106 -8,-89 Q-7,-82 0,-82 Q7,-82 6,-90 Q6,-110 9,-128 L4,-131 Z` bof. Simplifions le bras : forme goutte : `M-6,-130 Q-10,-108 -8,-90 Q-7,-82 1,-82 Q8,-83 7,-91 Q7,-112 8,-128 Q1,-133 -6,-130 Z` ; main circle (0,-80) r5.4. L'ordre : main après manche ✓. armF idem (fills clairs) valeurs inverses. Jambes garçon : path centré x0 : `M-8,-80 Q-12,-46 -9,-14 L-9,-3 Q-9,0 -6,0 L6,0 Q9,0 9,-3 L9,-13 Q12,-48 8,-80 Z` ✓ ; botte `M-12,-14 Q-15,-4 -15,-1 Q-15,0 -11,0 L16,0 Q18,-1 17,-5 L13,-14 Z` ✓ wrappers translate(-3 0) & (3 0). Legs rotations autour (0,-76) local ✓. Chiot wrappers : pattes arrière translate(-26 0)/( -17 0) rotate centre (0,-30) values A "24 0 -30;-20 0 -30;24 0 -30" dur .45 (B begin -0.225) ; avant translate(16 0)/(24 0) rotate (0,-32) values "-22 0 -32;26 0 -32;-22 0 -32" begins 0/-0.225 ✓ diagonales : FL(16,0,b0) & BR(-17,0,b-0.225) ensemble ? Trot : patte avant-gauche avec arrière-droit : FL begin 0 & BR begin 0 ✓ ; FR & BL begin -0.225 ✓. Peu importe la validité zoologique exacte, le rythme suffit. Corps : `M-36,-34 Q-45,-44 -36,-55 Q-18,-66 6,-62 Q26,-59 32,-47 Q35,-37 26,-31 Q8,-24 -14,-27 Q-30,-28 -36,-34 Z` fill fur. Poitrail plus clair ? museau clair suffit. Queue wrapper translate(-35 0) > g rotate values "24 0 -46;-26 0 -46;24 0 -46" dur .42 : path `M0,-6 Q-12,-10 -18,-24 Q-8,-20 2,-12 Z` → autour de (0,-46)? la queue part de (0,-6) local = (-35,-52)... recalons : queue base au corps arrière haut : corps arrière (-36,-44) : base locale (0,-44)?? wrapper translate(-36 0), rotate autour (0,-46), path `M0,-44 Q-14,-50 -20,-66 Q-9,-60 1,-52 Z` hmm le path part de (0,-44) : sous le pivot (0,-46) : la queue au-dessus du pivot ? Une queue remue : pivot à la base : path vers le haut-gauche : `M-2,-42 Q-16,-48 -22,-64 Q-10,-58 0,-50 Z` local. ok : part (-2,-42)→ pointe (-22,-64) : au-dessus/derrière ✓. rotate ±25 autour (0,-46) ✓. Frenzy additive ✓ (additive="sum" s'ajoute à l'anim de base ✓ — deux animateTransform sur le même élément : le 2e avec additive="sum" se cumule ✓ ; sans additive il remplacerait ✓). Attention : rotate autour d'un point avec additive sum : le cumul des rotations avec centres : le résultat = T1 puis T2? additive somme des transformations post-multipliées : rotate(θ1,c) ∘ rotate(θ2,c) : même centre → équivalent à rotate(θ1+θ2, c) ✓ (les deux mêmes centres ✓). Tête : wrapper translate(30 0)? Head : cercle (30,-57) r14 : je groupe head g avec rotate autour (26,-52) values "2.5 26 -52;-2.5 26 -52;2.5 26 -52" dur .45 ; contenu : cercle tête, museau `M38,-60 Q50,-58 49,-50 Q46,-45 38,-47 Q36,-52 38,-60 Z` fill muzzle ; truffe (48,-54) r3 dark ; œil (33,-59) r2.2 dark ; sourcil point ? skip ; oreille arrière : path `M20,-70 Q12,-64 14,-50 Q18,-45 23,-49 Q26,-58 27,-68 Z` fill ear-d (dans head, statique ou anim léger ? dans head ok statique relative) ; oreille avant : wrapper? dans head : g rotate autour (27,-69) values "12 27 -69;-8 27 -69;12 27 -69" dur .45 : path `M25,-71 Q17,-64 19,-50 Q23,-45 28,-49 Q31,-58 31,-70 Z` fill ear. Collier : sous la tête : après corps, avant head : path `M18,-48 Q27,-42 36,-47 L35,-41 Q26,-36 17,-41 Z` fill collar ; clochette circle (27,-38) r3.2 #d9a53a + trait ? ok. Position tête (30,-57) : museau vers +x (avant) ✓ à droite. dogAll bounce values "0 0;0 -4;0 0;0 -4;0 0" dur .45 keyTimes 0;.25;.5;.75;1 ✓. Aussi petites lignes de dos ? skip. **Le garçon a un bâton ? Non. Un petit sac à dos ? Peut-être un petit sac : rect arrondi derrière le dos : `M-22,-122 Q-30,-116 -28,-100 Q-27,-92 -19,-94` fill scarf-d ? Un baluchon rond terracotta sur le dos (côté -x) : cercle (-20,-108) r11 fill var(--boy-pack) #a04f2a + sangle : ok mignon ajoute : dans upper avant torso : circle (-19,-107) r 11 pack ; lanière : path stroke. Var --boy-pack. Ombre override ✓. **Valons. Écriture finale.** Une dernière chose : la teinte des strokes touffes sur le chemin : '#8a744e'. Le sol herbe base : #7e8c56, chemin #dcc496, frange #97a163. Spot blend sur sol : screen ✓ (sur chemin clair : screen sur clair = subtil blanc-doré ✓ ; sur herbe : doré ✓). treeShGrad stops : 0 : #2e2415 op .34 ; 1 : op .03. Blur filter id="softBlur" stdDeviation 5. Aussi : ombre portée du chiot/garçon : le wrap a fill global ? non, les fills viennent des vars ✓. Vérif : custom properties sur g SVG → héritent aux use children ✓ (standard). fill="var(--boy-coat)" : la valeur doit être une ✓. **Rédaction.** Pour la propreté je structure le script en sections commentées en français. C'est parti. Encore le masthead soleil gravé : ```svg ``` ✓ (dessiné, pas emoji ✓). Titre h1 : "LE SENTIER DORÉ" en petites caps espacées ? uppercase + letter-spacing .32em, weight 500, size clamp(16px,2.4vw,26px), Fraunces opsz haut. sub : italic opacité .65 : « où Milo et Pistache marchent sous les feuilles » — mieux que "une page animée" : doux. Et pagenum en coin : je garde « — page 7 — » sous le hint discret. TALES : - gold : « Le soleil filtre à travers les feuilles ; leurs ombres, longues et molles, dansent tout doucement sur le sentier. » - noon : « Midi clair : la lumière tombe d'aplomb, les ombres se font courtes et rondes sous leurs pas. » - dusk : « Le soir descend ; les ombres s'étirent jusqu'aux fougères, dorées comme du miel tiède. » Colophon : tale centré ; hint dessous taille 12.5px op .55 small-caps? letter-spacing .08em. Masthead : soleil au-dessus, titre, sub. Marges compactes : masthead padding-bottom 10. CSS body : display flex column min-height 100vh. .page width min(1500px, 100%) margin auto ; padding clamp(14px,2.5vw,34px). plate : flex 1 1 auto ; min-height 55vh? Sur desktop grand, height = remplissage ✓. SVG block w100 h100. Sur très petits écrans : colophon wrap. Allons-y. (Aussi : meta description pas nécessaire.) Encore un point : SMIL dans avec — Safari : les use + SMIL internes fonctionnent ✓ (pattern classique d'icônes animées). Ok. Et : les animateTransform DANS defs ne démarrent que si l'élément est référencé ? Ils démarrent sur la source (dans defs non rendue mais l'arbre temporel tourne) ; les instances reflètent ✓. Écrivons le code complet maintenant, avec rigueur sur les ids utilisés par le JS : - #scene, #plate, #wFarDrift, #wMidDrift, #wMidFerns (drift), #wGroundDrift, #wFgDrift, couches .pl data-px/py (wFar, wMid, wMidFernsL, wCanopy, wGround, wCast, wActors, wDapple, wRays, wFall, wFg) Simplifions les noms : data-px sur .pl ; drift classes d12,d58,d27,d17 via style animation-duration inline. Je mets class="drift" style="animation-duration:266.7s". - #boyShadowWrap, #dogShadowWrap, #raysRot, #rays, #veil, #treeShadows, #woofWrap>#woof, #tailFrenzy, #tale, #hint. Drift keyframes : @keyframes slide { to { transform: translateX(-3200px) } } .drift{ animation: slide var(--dd,60s) linear infinite; } et chaque g style="--dd:26.7s". Pour #wFgDrift : le vent JS modifie les .leafWind à l'intérieur (setAttribute rotate) — les leafWind sont enfants du drift g (CSS anim) : pas de conflit ✓. leafWind pivot : setAttribute('transform', `rotate(${a} ${px} ${py})`) : px/py = position du pivot dans le repère du drift-g (base 0..3200) : la rotation s'applique dans le repère local ✓ peu importe la position écran ✓. fg build : ``` function buildFg(g){ const items=[]; // fougères bas let x=rr(60,220); while(x<3200){ const s=rr(0.9,1.9); items.push(fern(g,x,rr(880,955),s, pick(['#24301b','#2c3a24','#1f2a16']))); x+=rr(260,420); } // feuillage suspendu haut x=rr(120,420); while(x<3200){ items.push(hangLeafCluster(g,x,rr(-6,60),rr(0.8,1.6))); x+=rr(420,700); } } ``` fern(g,x,y,s,c) : g.leafWind data (px:x,py:y,k:rr(0.7,1.4),ph) > g.sway (style --sd, --sdel, --sa/-sb, --ox 50% --oy 100%) > 5-7 frondes : paths rotation autour (0,0) : fronde base path : `M0,0 C6,-30 26,-58 64,-74 C44,-56 30,-32 24,0 Z` scale(s) rotate(ri(-80,80))... chaque fronde : `` dans le g à translate(x,y) — attention : le g.leafWind reçoit rotate JS autour (x,y) : MAIS le g a-t-il déjà transform translate ? Le JS setAttribute transform ÉCRASERAIT le translate ! → structure : gPos(translate statique) > leafWind(JS rotate autour 0 0) > sway(CSS) > paths. Le pivot en local (0,0) ✓ rotate autour de l'origine locale = le point d'attache ✓. Registry : {el: leafWind, k, ph, cur:0} ✓ pas besoin des px/py (rotation locale autour de l'attache ✓ plus simple). hangLeafCluster : gPos(x, y) > leafWind(JS) > sway(origin top) > branche : path stroke descendante `M0,0 Q8,40 4,86` w5 #3a3020 + feuilles le long : 6 : ellipse-pointe path `M0,0 Q9,-7 20,-1 Q9,6 0,0 Z` scale rr(0.8,1.5) fill c rotate posés le long : positions (dx along branch). Simple : je place les feuilles en grappe sous y : cy = i*13+10, dx = sin(i)*10 : rotation pendante. Ok visuel "branche de feuilles". Les fougères : frondes en éventail vers le haut ✓. falling leaf path (2 variantes) : A: `M0,0 Q7,-6 15,-2 Q8,5 0,0 Z` (petite) avec tige : ok simple. B: `M0,0 Q5,-9 14,-7 Q10,3 0,0 Z`. fill pick ambers ; scale rr(0.8,1.6). Registry fall : {el, x,y,ph,spin,vy, op}. Loop update fall (dt) : ``` for L of falls: L.t+=dt; const g=1+gust*2.4; L.x += (Math.sin(L.t*1.6+L.ph)*30 - 115 + mVXs*1.5) * dt * (1+gust*1.8); L.y += (30+12*Math.sin(L.t*0.7+L.ph)) * dt * g; L.a = L.ph*57 + L.t*L.spin + Math.sin(L.t*4+L.ph)*16; if(L.y>935||L.x<-160){ respawn(L); } el transform translate rotate scale ; opacity: L.y>800? clamp((935-L.y)/135) : 1 (fade near ground) et fade in en haut : min(1,(L.y+40)/80). ``` respawn(L, nearX?) : L.x = nearX? nearX+rr(-160,160) : rr(-80,1700) ; L.y = rr(-60,-10) ; L.t=0? garder t global continu ok ; re-spin random ; L.spin=rr(-160,160) rad/s? deg/s : rr(-140,140). 11 feuilles init dispersées y rr(-80, 700). **gust effect on fg sway** : amplitude : target = mVXs*0.09*it.k*prox? On a drop prox. target = (mVXs*0.085*it.k) + Math.sin(t*11+it.ph)*gust*5 ; clamp ±12 ; cur lerp 0.08/frame→ dt-based : cur += (target-cur)*min(1,dt*6). setAttribute rotate(cur, 0,0) ✓. **Le veil au-dessus du fg : blende aussi le woof si avant… woof après veil ✓.** **applySun + loop écrivent beaucoup de setProperty : throttle : apply couleurs seulement si warmth changé >0.003 ✓ simple check.** **Test mental du rendu global** : ciel crème, canopy sombre en haut avec gaps lumineux, rays dorés diagonaux traversant, arbres lointains pâles, brume, troncs moyens, prairie, chemin sable, ombres d'arbres diagonales, spots dorés qui scintillent, garçon terracotta/moutarde + chiot miel marchant, ombres longues douces dérivant, feuilles qui tombent, fougères sombres balancées au premier plan, voile chaud, grain papier, cadre gravure, typo album. ✓ Cohérent, chaleureux, vivant. Signature : promener le soleil au doigt et voir TOUTE la page obéir (ombres qui pivotent, phrases du livre qui changent). J'écris maintenant le fichier définitif. Je vais être méticuleux sur les appariements d'ids et la syntaxe SMIL. Pour les keySplines partout : "0.42 0 0.58 1;0.42 0 0.58 1" (ease-in-out). Garçon dur 1s ; mais un cycle légèrement irrégulier ? Non, ok. Détail : `keyTimes` requis avec spline ✓. Vérif armB path autour x0 wrapper translate(10 0) : `M-6,-130 Q-10,-108 -8,-90 Q-7,-82 0,-82 Q7,-83 6,-91 Q7,-112 6,-128 Q0,-132 -6,-130 Z` ✓ main circle (0,-80) r5.4. armF wrapper translate(-10 0) même path, fills clairs, values inverses. Attention : bras rotate ±15 autour (0,-126) : la main (y-80) balaie ~ 46·sin15 ≈ 12px ✓. Écharpe rotate : scarfTail values "-9 -13 -126;10 -13 -126;-9 -13 -126" dur "1.15s". Bob upper : values "0 0;0 -4.5;0 0;0 -4.5;0 0". Legs dur 1s ✓ bras 1s ✓ tête 1s ✓ scarfTail 1.15s ✓. Chiot : tout 0.45s ; queue 0.42 ; ears 0.45. Ombre : skew a degrés ; note : setAttribute('transform') avec skewX(a) où a peut être négatif ✓. scale(0.95 s) : garçon légèrement aplatit horizontalement ? L'ombre doit garder largeur : scale x 1 ✓ mettons 1 : `scale(1 ${s})`. Le chiot pareil. Ah : l'ombre du chiot : hauteur chiot 70 : scaleY 0.36..1.08 ✓. Écriture ! (Longueur : je vise complet mais dense ; commentaires en français concis.) Encore un détail à trancher : les spots du sol en screen sur le chemin clair #dcc496 : screen va presque blanc : opacité --o0 .35 --o1 .8 et couleurs spot douces (#ffe9b0) : ok lumineux mais pas cramé ; au couchant plus orange ✓. treeShadows rotation pivot (800,770). rays : bx list [520,770,1010,1250,1470], w rr? fixe : 90,120,80,110,95 ; bas offset -260..-340 : je code fixe : ``` M520,-60 L610,-60 L350,940 L260,940 Z M770,-60 L890,-60 L560,940 L450,940 Z M1010,-60 L1090,-60 L760,940 L690,940 Z M1250,-60 L1360,-60 L920,940 L820,940 Z M1470,-60 L1565,-60 L1160,940 L1075,940 Z ``` class ray, opacités flicker : style --o0:.28;--o1:.6 ; delays variés. Groupe #rays style mix-blend-mode:screen. rayGrad bbox vertical ✓ (objectBoundingBox défaut). skyGrad : x1=0 y1=0 x2=0 y2=1. treeShGrad : x1=0 y1=0 x2=0 y2=1 (bbox du polygone : haut → bas ✓). Filtre softBlur : ``. Veil initial fill #ffdca0 opacity .2. OK — dernière considération : le texte hint sur mobile et le tale : colophon padding. Le h1 uppercase : « Le sentier doré » → css text-transform:uppercase ; les accents majuscules ok « LE SENTIER DORÉ ». Écrivons. Je vais aussi ajouter aria-hidden sur les éléments décoratifs et role img aria-label descriptif sur le SVG. Pour le pagenum : « — 7 — » opacité .45 italique. Allons-y, code final : En l'écrivant je surveille : chaque animateTransform a attributeName="transform" ✓. Note : pour `.sway` keyframes rotate avec transform-box fill-box : fill-box du groupe = bbox des frondes : origin bottom ✓. Pour woof keyframes transform translateY : le g#woof sans transform-box : translations simples ok. Une subtilité : `.pl` transform par JS via setAttribute transform — les .pl n'ont pas d'animation CSS ✓. Les couches générées : je construis dans des présents dans le markup (ids) : je crée le contenu puis clone : ```js const farG=document.getElementById('farA'); buildFar(farG); const farB=farG.cloneNode(true); farB.setAttribute('transform','translate(3200 0)'); farG.parentNode.appendChild(farB); ``` cloneNode copie sans ids dupliqués problématiques (pas d'ids dedans ✓). drift wrappers markup : ``` ``` puis append clone à farA.parentNode ✓. Fg : après build, cloner pareil ; MAIS registry leafWind : je collecte les .leafWind des DEUX copies (clone inclus, après clonage) ✓ : registry via querySelectorAll('#wFg .leafWind'). k/ph : stockés sur leafWind en data? Les attributs data- sur SVG : ok dataset. clone copie data-attrs ✓ registry lit dataset ✓. falling : générés une fois (pas de drift copies) dans #wFall ✓ (positions -80..1700, respawn dans cette plage ✓ couvre l'écran avec parallax ±26 → ok. dapple : markup statique dans #wDapple. Écrivons vraiment maintenant. Je vais produire le HTML complet. Pré-calcul tuft function : ```js function tuft(x,y,s,color,wg){ // wg: width base const g=el('g',{stroke:color,'stroke-linecap':'round',fill:'none'},wg); const n=ri(3,5); for(let i=0;i{const f=+p.dataset.px, fy=+p.dataset.py; p.setAttribute('transform',`translate(${(px*f).toFixed(1)} ${(py*fy).toFixed(1)})`)}); // vent mVX*=Math.pow(0.0025,dt); // decay rapide (≈ *0.87 à 60fps → pow(0.87,60dt)) ``` mVX decay : mVX *= Math.exp(-dt*5.5) ok. mVXs += (mVX-mVXs)*Math.min(1,dt*7). ``` // sun if(!down||!moved) dragOff*= (down&&moved)?1: Math.exp(-dt*1.4); const target=Math.max(-1,Math.min(1, 0.5+0.11*Math.sin(T*0.14)+dragOff)); sunT+=(target-sunT)*Math.min(1,dt*2.4); applySun(); // gust gust*=Math.exp(-dt*1.1); // fg leaves for(const it of fgLeaves){ const tgt=(mVXs*0.085*(+it.dataset.k||1))+Math.sin(T*11+(+it.dataset.ph))*gust*5; it.cur+=(Math.max(-13,Math.min(13,tgt))-it.cur)*Math.min(1,dt*6); it.setAttribute('transform',`rotate(${it.cur.toFixed(2)})`); } // falling updateFalls(dt); // caption const z=zone(sunT); if(z!==taleState) setTale(z); requestAnimationFrame(loop); } ``` leafWind rotation locale autour (0,0) ✓ (leur gPos parent porte la translation ✓). mVX set on pointermove : `const dxm = e.clientX-pmx; if(pmx!=null) mVX = Math.max(-60,Math.min(60, mVX*0.6 + dxm*0.9)); pmx=e.clientX;` (par event, ~ ok). applySun (chaque frame, léger) : ```js function applySun(){ const p=Math.abs(sunT), w=(sunT+1)/2; const a=56*sunT + 8*Math.sign(sunT)*p*p; boySW.setAttribute('transform',`translate(706 788) skewX(${a.toFixed(2)}) scale(1 ${(0.30+0.95*p).toFixed(3)})`); dogSW.setAttribute('transform',`translate(566 800) skewX(${(a*0.94).toFixed(2)}) scale(1 ${(0.36+0.72*p).toFixed(3)})`); boySW.setAttribute('opacity',(0.32+0.2*p).toFixed(3)); dogSW.setAttribute('opacity',(0.34+0.2*p).toFixed(3)); raysRot.setAttribute('transform',`rotate(${(-30*sunT).toFixed(2)} 1500 -80)`); rays.style.opacity=(0.5+0.42*w).toFixed(3); treeSh.setAttribute('transform',`rotate(${(a*0.3).toFixed(2)} 800 770)`); veil.setAttribute('fill',mix('#fff2d4','#ff9d3f',w)); veil.setAttribute('opacity',(0.05+0.30*w*w).toFixed(3)); if(Math.abs(w-lastW)>0.004){ lastW=w; root.style.setProperty('--spot-a',mix('#fff3c9','#ffc063',w)); root.style.setProperty('--spot-b',mix('#ffe5a0','#ff9a3f',w)); root.style.setProperty('--ray',mix('#ffe7ac','#ffb557',w)); root.style.setProperty('--sky-top',mix('#f7eed3','#f8d8a2',w)); root.style.setProperty('--sky-bot',mix('#ecdfba','#e9b571',w)); } } ``` mix(hexA,hexB,t) : parse, round, to rgb(). Bien. woof : ```js function woof(){ if(woofCd>0) return; woofCd=2.6; const w=document.getElementById('woof'); w.classList.remove('talk'); w.getBoundingClientRect(); w.classList.add('talk'); try{ document.getElementById('tailFrenzy').beginElement(); }catch(e){} } ``` woofCd decay dans loop. burst(x,y): gust=1; for(5) respawnFall(nearX=x); woof(); pointer handlers comme prévu. Aussi hover dog : dans pointermove si !down : d2 = (sx-566)²+(sy-742)² < 75² → woof(). setTale : ```js const TALES={gold:'…',noon:'…',dusk:'…'}; function setTale(s){ taleState=s; fading=true; taleEl.style.opacity='0'; setTimeout(()=>{ taleEl.textContent=TALES[s]; taleEl.style.opacity='1'; fading=false; },400); } ``` zone(t) avec hystérésis comme décrit (fading protège). Init : buildAll ; applySun ; loop start ; reduced-motion : si matchMedia reduce : scene.pauseAnimations() et ne pas démarrer loop ? Démarrer une loop minimale (applySun une fois) ; CSS coupe drift/flick/sway. Le JS d'anim (falls, fg) : je skip le rAF d'updates d'anim si reduce (mais applySun doit tourner pour le drag ? En reduce, l'utilisateur peut encore draguer : je tourne le loop mais je saute falls/fg updates et parallax ? Simple : flag RED → dt animations off : je continue applySun + caption, saute le reste ✓). CSS reduce : `.drift,.sway,.flick,.talk{animation:none!important}`. Allez, j'écris le document complet, pour de vrai cette fois. Je fais attention à échapper les `&` etc. (pas besoin). Les guillemets français « » dans le tale ✓. Ah, il reste un souci potentiel : `use` + `filter` sur le g wrapper + `transform` : dans Firefox le filtre s'applique… ok standard. Aussi je dois donner une hauteur minimale au plate pour mobile : `min-height:min(58vh,520px)`. CSS scroll : page tient en 100vh idéalement : .page{min-height:100vh? display:flex; flex-direction:column; height:100vh? Sur mobile, height 100vh + contenu qui dépasse → scroll : j'accepte : .page{min-height:100svh; display:flex; flex-direction:column} .plate{flex:1; min-height:340px} → sur desktop une page sans scroll ✓ mobile : si ça déborde un peu, scroll ok. Voilà. Écriture finale du code. Je vais aussi vérifier que les fills var ont des fallbacks ? Pas nécessaire (vars définies). Un dernier détail : #boyFig & #dogFig dans defs : les custom props par défaut : je définis sur #actors g : ``` --boy-coat:#b07a2a;--boy-coat-d:#8f6020;--boy-pants:#5a4a38;--boy-pants-d:#4a3c2c;--boy-boots:#3a2f22;--boy-skin:#e9b686;--boy-skin-d:#d9a271;--boy-hair:#4a342a;--boy-eye:#33261c;--boy-cheek:#d98a63;--boy-scarf:#cf5b2e;--boy-scarf-d:#b04a24;--boy-pack:#a04f2a; --dog-fur:#e2b876;--dog-fur-d:#c99e5c;--dog-ear:#8a5a34;--dog-ear-d:#744a2a;--dog-muzzle:#f2dcae;--dog-dark:#33281e;--dog-collar:#b4472e; ``` #castShadows : tout → #312817 (sauf rien) : je liste les mêmes vars = #312817. (cheek aussi → uniforme ✓ ; dog-dark aussi.) Pour éviter l'erreur d'oubli : le fill fallback : fill="var(--boy-coat,#b07a2a)" — je mets fallback partout ? Verbeux ; je liste soigneusement les vars dans les deux wrappers. Ok sans fallback. Le nom des classes legs/arms sans importance. Encore : eye/brow/truffe/œil du chiot fill var(--dog-dark). Rédigeons ! Comptage taches spots flick : ok. Je vais écrire le code d'un trait en restant vigilant. Structure du

Page avec ombres A boy and a puppy walking in a forest, thei...