# Fox at Dusk

A seamless 8-second looping side-view animation of a red fox running left to right through a dusk forest.

- **Run it:** open `index.html` in any modern browser. It is a single self-contained file with inline CSS and JavaScript, drawn on one `<canvas>`. It uses no libraries, fonts, images or network requests.
- **Controls:** click, tap or press Space to pause and resume.
- **Display:** the scene is drawn on a fixed 1920×1080 virtual canvas and scaled to the largest 16:9 frame that fits the window. It is letterboxed on phones and ultrawide screens, and the backing store is capped at 2560 px wide.

## How it works

- **Loop:** all motion is a pure function of `t` in `[0, 8)`. Every scrolling layer moves a whole number of its own tile widths per loop, and every periodic motion (gait, tail, ears, stars, fireflies) completes a whole number of cycles. Frame `t = 8` is therefore identical to frame `t = 0`, with no seam or jump.
- **Gait:** one stride takes 0.5 s, so there are 16 strides per loop. Each leg is a solved chain (shoulder or hip, then elbow or knee, then wrist or hock, then paw). During stance, each paw moves backward at exactly the ground's scroll speed, so the paws do not slide. During swing, each paw follows a lifted arc. The body bobs, pitches and flexes its spine, the tail trails with a travelling wave, and the head and ears counter-move. Dust puffs are kicked up at each paw strike.
- **Parallax:** the layers scroll at these speeds. The ground has three speed bands, so its lower edge moves faster than its back edge.

  | Layer | Speed |
  |---|---|
  | Ridge | 80 px/s |
  | Far trees | 120 px/s |
  | Mid trees | 240 px/s |
  | Near trees and ground back edge | 420 to 450 px/s |
  | Fox plane | 600 px/s |
  | Ground front edge | 900 px/s |
  | Foreground foliage | 1080 px/s |

- **Sky:** the clouds cross-fade between two fields while drifting, which keeps their slow drift loop-safe. The stars twinkle on whole-number cycles.
- **Tuning:** the constants at the top of each section (`LOOP`, `GROUND_V`, `FOX`, `LEG`, `LAYERS`) control timing, speed, gait geometry and tree layout.