Tracking the line against the rotating globe was finicky and never
quite aligned. Strip out the SVG route, the great-circle slerp, the
3D projection and the debug overlay — the rotating Earth alone is
the visual now.
Re-add a subtle mouse parallax: the video shifts up to 22px against
the cursor, the CTA button tilts 8px the opposite way for a 3D feel.
On mobile, deviceorientation drives the same vars.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Replace the Pexels stock clip with a higher-quality Earth-from-space loop
hosted in /videos (720p, 60s, slowed 2x, 12 MB). The static SVG arc is
gone — the route is now computed every frame from a 3D projection that
follows the globe's rotation:
- France (48.85N, 2.35E) and Antananarivo (-18.9N, 47.5E) are placed on
a unit sphere, then rotated around the Y axis to match the apparent
central longitude of the video at each frame (LON0=140 deg, omega
=-5.75 deg/s, calibrated empirically from sample frames).
- A great-circle arc is sampled with slerp and projected
orthographically; only the front-side portion (z > 0) is drawn.
- Pins fade out when their city rotates behind the globe; the whole
group fades out when both endpoints are on the back side.
Mouse parallax dropped — it would desync the SVG from the video and
break alignment.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Replace clouds video (Pexels 2098989) with actual Earth-from-space footage
(Pexels 854275 — Europe/Africa visible + orbiting satellite) and remove
the static Unsplash Earth photo layer that was overlaying the video.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Background video: aerial cloudscape (Pexels free video, 7.4 MB SD)
autoplay, loop, muted; fastest mouse parallax (-45px). Hue-shifted
toward navy and slightly desaturated.
- Earth-from-space photo overlaid in screen blend mode at 78%
opacity so the cloud motion shows through; medium parallax.
- Navy night tint preserves brand palette and central legibility.
- New SVG route layer: thin red gradient stroke (1.5px) curving
Paris → Antananarivo, with a glow filter, a soft halo path
beneath, two fixed pin markers at each endpoint, and a white
pulse traveling along the path on a 3.6s loop.
- Centered card content was stripped to JUST the gold "Accéder au
site" button (continuous pulse ring + hover shine + lift).
The full text block (welcome / subtitle / 3 meta stats) is gone.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Previous SVG illustrations and emojis were dropped per user feedback.
The new intro is a single fixed viewport (no scroll) where every
layer reacts to mouse movement only:
Layer 1 — Real photo: Earth at night from space (NASA / Unsplash),
slow parallax (-18px max).
Layer 2 — Navy gradient tint to anchor the brand palette and
ensure central card legibility.
Layer 3 — Real photo: aerial sunset clouds (Unsplash), 28%
opacity with mix-blend-mode soft-light, faster
parallax (-32px max).
Layer 4 — Gold radial glow that follows the cursor (mix-blend
screen), giving an interactive "spotlight" feel.
Layer 5 — 12 floating gold particles with continuous CSS
animation, fastest parallax (-55px max).
Center card (glassmorphism, navy + gold border, blur 24px) tilts in
the OPPOSITE direction (+12px) for a 3D depth illusion. The CTA
button has a continuous pulse ring, hover lift + shine sweep, and
routes to accueil.html.
Mobile: device-orientation events drive the parallax instead of
mouse. prefers-reduced-motion kills all animations.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
The new index.html is a 3-act scroll-driven storytelling intro:
Act 1 (Tarmac at sunset)
Sunset gradient sky, mountain silhouettes, hangar, runway with
centerline lights. Inline SVG cargo plane (MVA-branded gold tail)
sits on the ground while box emojis cycle up a loading ramp.
Act 2 (Take-off at dusk)
Dusk sky, two parallax cloud layers and distant mountains. The
plane translates diagonally up-and-right with a slight tilt and
a glowing contrail, sized down progressively.
Act 3 (Arrival at night)
Deep navy night sky with twinkling stars, a glowing moon, and
the Madagascar coastline silhouette. A small plane fades in
descending toward the island, then a centered CTA block reveals:
"Bienvenue à bord" with the gold "Accéder au site" button that
routes to accueil.html (the real homepage).
Implementation:
- Pure CSS layered scenes; no library
- Scroll progress driven by a single CSS custom property --scroll
(0→1) updated via rAF, layers transform off it
- Mouse-move parallax on layers via --mx/--my (skipped on touch)
- Inline SVG plane reused across the 3 scenes
- All text is i18n-driven with a new `intro` section in FR/EN/MG
Architecture changes:
- index.html → new parallax intro
- accueil.html → former index.html content (full homepage)
- All nav/logo/footer links updated index.html → accueil.html across
the 8 existing pages
- Mobile-nav on accueil.html now also includes Service Commande
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
