feat(home/hero): swap stag still for autoplaying morph video

Replace the static cosmic-stag.avif in the hero with an autoplaying,
muted, looping <video> of the morph (webm), falling back to a still
WebP frame inside the <video> for browsers that can't play any
<source>. Standards-compliant fallback pattern; assets imported via
Vite so they get content-hashed.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Padreug 2026-06-11 01:15:39 +02:00
commit 826052770f
3 changed files with 12 additions and 5 deletions

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 778 KiB

View file

@ -3,7 +3,8 @@ import { useI18n } from 'vue-i18n'
import { RouterLink } from 'vue-router'
import { Button } from '@/components/ui/button'
import { Card, CardContent } from '@/components/ui/card'
import cosmicStag from '@/assets/cosmic-stag.avif'
import cosmicStagMorphWebm from '@/assets/cosmic-stag-morph-1024.webm'
import cosmicStagMorphFallback from '@/assets/cosmic-stag-morph-fallback.webp'
import heroLandscape from '@/assets/hero-landscape.webp'
import sectionTile from '@/assets/section-tile.webp'
@ -74,11 +75,17 @@ const featuredEvents = [
>
Château du Faune
</h1>
<img
:src="cosmicStag"
alt=""
<video
autoplay
muted
loop
playsinline
aria-hidden="true"
class="mt-4 h-80 w-80 object-contain md:h-[28rem] md:w-[28rem] lg:h-[36rem] lg:w-[36rem] xl:h-[42rem] xl:w-[42rem]"
/>
>
<source :src="cosmicStagMorphWebm" type="video/webm" />
<img :src="cosmicStagMorphFallback" alt="" />
</video>
</div>
</section>