// Shared building blocks for the "Tours virtuels stations de ski" page
// Animated snow, chairlift, mountain SVG layers, skier trails.
// All components are pure presentational; pass in colors so they adapt
// to each visual direction (Cinématique / Éditorial / Carte).
// -----------------------------------------------------------------------------
// Inject keyframes once
if (typeof document !== 'undefined' && !document.getElementById('ski-anim-styles')) {
const css = document.createElement('style');
css.id = 'ski-anim-styles';
css.textContent = `
@keyframes ski-snowfall {
0% { transform: translate3d(0,-20px,0); opacity: 0; }
8% { opacity: var(--op,0.8); }
90% { opacity: var(--op,0.8); }
100% { transform: translate3d(var(--drift,20px), var(--dist,1200px), 0); opacity: 0; }
}
@keyframes ski-lift-cable {
0% { transform: translate3d(0,0,0); }
100% { transform: translate3d(var(--lift-dx, -120px), var(--lift-dy, 60px), 0); }
}
@keyframes ski-lift-cable-up {
0% { transform: translate3d(0,0,0); }
100% { transform: translate3d(var(--lift-dx, 120px), var(--lift-dy, -60px), 0); }
}
@keyframes ski-chair-sway {
0%,100% { transform: rotate(-2deg); }
50% { transform: rotate(2deg); }
}
@keyframes ski-skier-down {
0% { transform: translate3d(0,0,0); opacity: 0; }
5% { opacity: 1; }
95% { opacity: 1; }
100% { transform: translate3d(var(--skier-dx,400px), var(--skier-dy,800px), 0); opacity: 0; }
}
@keyframes ski-pulse {
0%,100% { transform: scale(1); opacity: 0.7; }
50% { transform: scale(1.15); opacity: 0.4; }
}
@keyframes ski-glow {
0%,100% { opacity: 0.4; }
50% { opacity: 0.9; }
}
@keyframes ski-float-slow {
0%,100% { transform: translateY(0); }
50% { transform: translateY(-12px); }
}
`;
document.head.appendChild(css);
}
// -----------------------------------------------------------------------------
// SnowField, random falling flakes inside a parent (parent must be position:relative)
const SnowField = ({ count = 80, color = '#ffffff', sizeRange = [2,5], speedRange = [6,16], areaHeight = 1200, blur = false }) => {
// Generated once per mount so positions are stable.
const flakes = React.useMemo(() => (
Array.from({length: count}).map((_,i) => {
const size = sizeRange[0] + Math.random() * (sizeRange[1]-sizeRange[0]);
const dur = speedRange[0] + Math.random() * (speedRange[1]-speedRange[0]);
return {
i,
left: Math.random() * 100, // %
delay: -Math.random() * dur, // negative so they start mid-air
dur,
size,
opacity: 0.4 + Math.random() * 0.6,
drift: (Math.random() * 80 - 40), // px sideways
dist: areaHeight + Math.random() * 200, // px down
};
})
), [count, areaHeight]);
return (
);
};
// -----------------------------------------------------------------------------
// Chairlift, animated chairlift along a diagonal cable.
// Both directions: chairs going up AND chairs coming down on the parallel return line.
// Pass `theme` colors: { cable, pole, chair, chairAccent, glow }
const Chairlift = ({
start = {x: 10, y: 80}, // % of viewBox 1000x600
end = {x: 90, y: 25},
chairs = 5,
speed = 18, // seconds for a chair to traverse
theme = {},
poles = true,
}) => {
const c = {
cable: '#1a2240',
pole: '#0a1840',
chair: '#0a1840',
chairAccent: '#48d2b1',
glow: 'transparent',
...theme,
};
// Compute the parallel return-line offset perpendicular to the cable
const dx = end.x - start.x;
const dy = end.y - start.y;
const len = Math.hypot(dx, dy);
const nx = -dy / len, ny = dx / len; // unit normal
const offset = 2.4; // % units in viewBox
const start2 = { x: start.x + nx*offset, y: start.y + ny*offset };
const end2 = { x: end.x + nx*offset, y: end.y + ny*offset };
// px deltas for the chair animation (scaled to the 1000x600 viewBox)
const liftDx = dx * 10; // 1% of viewBox width = 10 (since width=1000)
const liftDy = dy * 6; // 1% of viewBox height = 6 (since height=600)
const ChairUp = ({offset:o}) => (
{/* hanger arm */}
{/* chair body */}
{/* seat back */}
{/* footrest */}
{/* tiny accent */}
);
const ChairDown = ({offset:o}) => (
);
const chairOffsets = Array.from({length: chairs}).map((_,i) => i/chairs);
return (
);
};
// -----------------------------------------------------------------------------
// MountainLayers, stacked silhouettes. Pass an array of {color, points, opacity, blur}
// `points` is a sequence of "x,y" pairs in a 1000x600 viewBox; we close to baseline.
const MountainLayers = ({ layers = [] }) => (
);
// -----------------------------------------------------------------------------
// Pines, scattered pine-tree silhouettes
const Pines = ({ trees = [], color = '#0a1840', opacity = 1 }) => (
);
// -----------------------------------------------------------------------------
// SkierTrail, a winding ski track that descends through a section
const SkierTrail = ({ d, color = '#ffffff', width = 4, dashed = true, glow = false }) => (
);
// -----------------------------------------------------------------------------
// TopoLines, topographic contour lines for the "Carte" direction
const TopoLines = ({ color = '#0a1840', opacity = 0.12 }) => (
);
// -----------------------------------------------------------------------------
// Star sky, for the cinematic night-mode hero
const StarField = ({ count = 60, color = '#ffffff' }) => {
const stars = React.useMemo(() => Array.from({length: count}).map((_,i) => ({
i, x: Math.random()*100, y: Math.random()*60, r: 0.4 + Math.random()*1.6,
d: 1.5 + Math.random()*3, delay: -Math.random()*4,
})), [count]);
return (
);
};
window.SnowField = SnowField;
window.Chairlift = Chairlift;
window.MountainLayers = MountainLayers;
window.Pines = Pines;
window.SkierTrail = SkierTrail;
window.TopoLines = TopoLines;
window.StarField = StarField;