# Fox at Dusk

A seamless, endlessly looping side view of a red fox galloping through a forest at dusk.
Everything lives in a single self-contained `index.html` (inline CSS + JavaScript, drawn on
a `<canvas>`). It uses no external assets, libraries, fonts or network requests.

Open `index.html` in any modern browser.

## What you see

- A red fox in profile running left to right with a rotary gallop: legs driven by inverse
  kinematics, a flexing and pitching spine, a head that stays steady against the bounce,
  ears and a bushy white-tipped tail that sway with the stride, and puffs of dust at push-off.
- A dusk sky with a setting sun, a crescent moon, twinkling stars and lit clouds.
- Seven parallax layers, each scrolling at its own speed: distant mountains, hills, far
  forest, mid forest, near trunks and canopy, the ground, and foreground grass. There are also
  fireflies, mist bands and soft sun rays.

## The loop

One loop lasts exactly **8 seconds**. Every frame is a pure function of the loop phase
(time mod 8 s), so the last frame flows straight into the first:

- Each layer's pattern repeats over a width that divides the distance it travels in 8 s.
- The fox takes 20 strides per loop (0.4 s each). While a paw is on the ground it moves back
  at exactly the ground's speed, so the feet don't slide.
- All other motion (sway, twinkle, tail wave, fireflies) uses whole-number frequencies of
  the loop.

## Layout

The scene is drawn at a logical 1920×1080 (16:9) and scaled to the largest 16:9 box that fits
the window, letterboxed on a dark background. The canvas resolution follows the device pixel
ratio (capped at 2×), and the scene re-fits on resize and rotation, so it stays sharp on
both desktop and phones.

## Extras

- Click or tap the scene, or press **Space**, to pause and resume.
- `index.html?t=3.2` freezes the animation at 3.2 s, which is handy for stills.