padreug/chateaudufaune.ariege.io
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(home): animated stag morph in the hero #1

Closed
padreug wants to merge 0 commits from feat/hero-stag-animation into main
pull from: feat/hero-stag-animation
merge into: padreug:main
Conversation 1 Commits - Files changed -
padreug commented 2026-06-10 08:37:16 +00:00
Owner
Copy link

Summary

Swap the static cosmic-stag.avif in the home hero for a seamless five-stag morph loop. Five stags, 15 stags-per-transition × 5 transitions, ~18.5 s loop, alpha preserved.

What's in the box

  • Primary — cosmic-stag-morph-1024.webm (5.2 MB, 1024×1024 VP9 + alpha). Plays on Chrome / Firefox / Edge / Safari 17+ via <video autoplay muted loop playsinline>.
  • Browser fallback — cosmic-stag-morph-fallback.webp (23 MB, 480×480 animated WebP), nested inside the <video> as the standards-compliant <img> fallback Safari uses when it can't play any <source>.
  • Reduced-motion fallback — the existing static cosmic-stag.avif renders via a sibling <img> that's display:none under motion-safe and display:block under motion-reduce (Tailwind's motion-reduce:block / motion-reduce:hidden).

Header, footer and favicon stay on the static AVIF — animating a 36 px logo or favicon doesn't read.

Test plan

  • Hero plays the morph on Chrome and Firefox
  • Hero plays the morph on Safari (WebM should work on 17+, falls back to the 23 MB animated WebP otherwise)
  • In macOS / iOS System Settings → Accessibility → Display → Reduce motion, hero renders the static AVIF instead
  • Header / footer logos still show the static AVIF
  • Build succeeds (pnpm build)
  • First-paint is acceptable on a throttled 3G connection (WebM is 5.2 MB — biggest single asset on the page; we may want a poster image or preload="metadata" if it's painful)

🤖 Generated with Claude Code

## Summary Swap the static cosmic-stag.avif in the home hero for a seamless five-stag morph loop. Five stags, 15 stags-per-transition × 5 transitions, ~18.5 s loop, alpha preserved. ## What's in the box - **Primary** — `cosmic-stag-morph-1024.webm` (5.2 MB, 1024×1024 VP9 + alpha). Plays on Chrome / Firefox / Edge / Safari 17+ via `<video autoplay muted loop playsinline>`. - **Browser fallback** — `cosmic-stag-morph-fallback.webp` (23 MB, 480×480 animated WebP), nested inside the `<video>` as the standards-compliant `<img>` fallback Safari uses when it can't play any `<source>`. - **Reduced-motion fallback** — the existing static `cosmic-stag.avif` renders via a sibling `<img>` that's `display:none` under motion-safe and `display:block` under motion-reduce (Tailwind's `motion-reduce:block` / `motion-reduce:hidden`). Header, footer and favicon stay on the static AVIF — animating a 36 px logo or favicon doesn't read. ## Test plan - [ ] Hero plays the morph on Chrome and Firefox - [ ] Hero plays the morph on Safari (WebM should work on 17+, falls back to the 23 MB animated WebP otherwise) - [ ] In macOS / iOS System Settings → Accessibility → Display → Reduce motion, hero renders the static AVIF instead - [ ] Header / footer logos still show the static AVIF - [ ] Build succeeds (`pnpm build`) - [ ] First-paint is acceptable on a throttled 3G connection (WebM is 5.2 MB — biggest single asset on the page; we may want a poster image or `preload="metadata"` if it's painful) 🤖 Generated with [Claude Code](https://claude.com/claude-code)
Replace the static cosmic-stag.avif in the hero with a five-stag
seamless morph loop (15 stags-per-transition × 5 transitions, 18.5 s
total, alpha preserved):

- Primary: 1024×1024 VP9 WebM with alpha (5.2 MB) — Chrome / Firefox /
  Edge / Safari 17+. Autoplay + muted + loop + playsinline.
- Browser fallback: 480×480 animated WebP (23 MB) inside the <video>
  as the standards-compliant <img> Safari uses when it can't play
  any <source>.
- Reduced-motion fallback: the static cosmic-stag.avif renders via a
  sibling <img> that's display:none under motion-safe and
  display:block under motion-reduce (Tailwind motion-reduce:block).

Header, footer and favicon stay on the static AVIF — animating a
36 px logo or favicon doesn't read.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
padreug force-pushed feat/hero-stag-animation from ef2242008c to 0702f05838 2026-06-10 08:38:47 +00:00 Compare
padreug force-pushed feat/hero-stag-animation from 0702f05838 to 9f8266611b 2026-06-10 08:41:26 +00:00 Compare
padreug commented 2026-06-10 21:26:03 +00:00
Author
Owner
Copy link

not sure where the actual commit with the animated stag went for this, so just going to close

not sure where the actual commit with the animated stag went for this, so just going to close
padreug closed this pull request 2026-06-10 21:26:03 +00:00

Pull request closed

Please reopen this pull request to perform a merge.
Sign in to join this conversation.
Reviewers
No reviewers
Labels
Clear labels
No items
No labels
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
padreug/chateaudufaune.ariege.io!1
No description provided.