refactor: clean slate — remove all WebGL, keep static + loading screen
REMOVED: - AtomGlitch.tsx (countdown 3D atom) - WebGLBackground.tsx (PCB 3D scene) - WebGLCards.tsx (scroll animations) - webgl-cards.css - All GLB models (models3d/) - Orbitron + Space Mono fonts KEPT: - static.astro (accessible version, no JS) - Loading screen with BMU photo on preview - Dark site CSS tokens in global.css - bmu-assembly.jpg photo SIMPLIFIED: - index.astro: countdown without WebGL (placeholder div ready) - preview.astro: loading screen + sections, WebGL placeholder ready - Both pages have empty #webgl-* divs for new WebGL implementation Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Clément SAILLANT
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -1,640 +0,0 @@
|
||||
import { useRef, useMemo, useEffect, useState, useCallback } from 'react';
|
||||
import { Canvas, useFrame, useThree } from '@react-three/fiber';
|
||||
import { Text } from '@react-three/drei';
|
||||
import { EffectComposer, Bloom, ChromaticAberration, Scanline, Glitch as GlitchEffect } from '@react-three/postprocessing';
|
||||
import { GlitchMode, BlendFunction } from 'postprocessing';
|
||||
import * as THREE from 'three';
|
||||
|
||||
/* ===================================================================
|
||||
ATOM GLITCH — cinematic WebGL countdown for L'Electron Rare
|
||||
- Nucleus core with pulsing energy
|
||||
- 3 electron orbits with trail particles
|
||||
- Particle cloud (electrons as sparks)
|
||||
- Post-processing: bloom, chromatic aberration, glitch, scanlines
|
||||
- Mouse-reactive + auto-orbit
|
||||
=================================================================== */
|
||||
|
||||
const COLORS = {
|
||||
cyan: new THREE.Color('#5bd1d8'),
|
||||
amber: new THREE.Color('#f1c27a'),
|
||||
green: new THREE.Color('#b6d18f'),
|
||||
electric: new THREE.Color('#0071e3'),
|
||||
white: new THREE.Color('#ffffff'),
|
||||
nucleus: new THREE.Color('#ff6b35'),
|
||||
};
|
||||
|
||||
/* ---------- Particle cloud around the atom ---------- */
|
||||
function ParticleField({ count = 600 }) {
|
||||
const ref = useRef<THREE.Points>(null);
|
||||
|
||||
const { positions, velocities, colors } = useMemo(() => {
|
||||
const pos = new Float32Array(count * 3);
|
||||
const vel = new Float32Array(count * 3);
|
||||
const col = new Float32Array(count * 3);
|
||||
const palette = [COLORS.cyan, COLORS.amber, COLORS.green, COLORS.electric];
|
||||
|
||||
for (let i = 0; i < count; i++) {
|
||||
const r = 2 + Math.random() * 6;
|
||||
const theta = Math.random() * Math.PI * 2;
|
||||
const phi = Math.acos(2 * Math.random() - 1);
|
||||
pos[i * 3] = r * Math.sin(phi) * Math.cos(theta);
|
||||
pos[i * 3 + 1] = r * Math.sin(phi) * Math.sin(theta);
|
||||
pos[i * 3 + 2] = r * Math.cos(phi);
|
||||
|
||||
vel[i * 3] = (Math.random() - 0.5) * 0.004;
|
||||
vel[i * 3 + 1] = (Math.random() - 0.5) * 0.004;
|
||||
vel[i * 3 + 2] = (Math.random() - 0.5) * 0.004;
|
||||
|
||||
const c = palette[Math.floor(Math.random() * palette.length)];
|
||||
col[i * 3] = c.r;
|
||||
col[i * 3 + 1] = c.g;
|
||||
col[i * 3 + 2] = c.b;
|
||||
}
|
||||
return { positions: pos, velocities: vel, colors: col };
|
||||
}, [count]);
|
||||
|
||||
useFrame(({ clock }) => {
|
||||
if (!ref.current) return;
|
||||
const posAttr = ref.current.geometry.attributes.position as THREE.BufferAttribute;
|
||||
const arr = posAttr.array as Float32Array;
|
||||
const t = clock.getElapsedTime();
|
||||
|
||||
for (let i = 0; i < count; i++) {
|
||||
arr[i * 3] += velocities[i * 3] + Math.sin(t * 0.5 + i) * 0.002;
|
||||
arr[i * 3 + 1] += velocities[i * 3 + 1] + Math.cos(t * 0.3 + i) * 0.002;
|
||||
arr[i * 3 + 2] += velocities[i * 3 + 2];
|
||||
|
||||
// respawn far particles
|
||||
const dist = Math.sqrt(arr[i * 3] ** 2 + arr[i * 3 + 1] ** 2 + arr[i * 3 + 2] ** 2);
|
||||
if (dist > 8) {
|
||||
const r = 2 + Math.random() * 2;
|
||||
const theta = Math.random() * Math.PI * 2;
|
||||
const phi = Math.acos(2 * Math.random() - 1);
|
||||
arr[i * 3] = r * Math.sin(phi) * Math.cos(theta);
|
||||
arr[i * 3 + 1] = r * Math.sin(phi) * Math.sin(theta);
|
||||
arr[i * 3 + 2] = r * Math.cos(phi);
|
||||
}
|
||||
}
|
||||
posAttr.needsUpdate = true;
|
||||
});
|
||||
|
||||
return (
|
||||
<points ref={ref}>
|
||||
<bufferGeometry>
|
||||
<bufferAttribute attach="attributes-position" args={[positions, 3]} />
|
||||
<bufferAttribute attach="attributes-color" args={[colors, 3]} />
|
||||
</bufferGeometry>
|
||||
<pointsMaterial size={0.04} vertexColors transparent opacity={0.7} sizeAttenuation depthWrite={false} blending={THREE.AdditiveBlending} />
|
||||
</points>
|
||||
);
|
||||
}
|
||||
|
||||
/* ---------- Orbit trail (instanced tube of spheres) ---------- */
|
||||
function OrbitTrail({ tilt, speed, color, trailCount = 30 }: { tilt: number[]; speed: number; color: THREE.Color; trailCount?: number }) {
|
||||
const meshRef = useRef<THREE.InstancedMesh>(null);
|
||||
const phase = useMemo(() => Math.random() * Math.PI * 2, []);
|
||||
const dummy = useMemo(() => new THREE.Object3D(), []);
|
||||
const orbitA = 3.2;
|
||||
const orbitB = orbitA * 0.38;
|
||||
|
||||
useFrame(({ clock }) => {
|
||||
if (!meshRef.current) return;
|
||||
const t = clock.getElapsedTime() * speed + phase;
|
||||
|
||||
for (let i = 0; i < trailCount; i++) {
|
||||
const age = i / trailCount;
|
||||
const angle = t - age * 0.8;
|
||||
dummy.position.set(Math.cos(angle) * orbitA, Math.sin(angle) * orbitB, 0);
|
||||
const s = (1 - age) * 0.14 + 0.02;
|
||||
dummy.scale.setScalar(s);
|
||||
dummy.updateMatrix();
|
||||
meshRef.current.setMatrixAt(i, dummy.matrix);
|
||||
}
|
||||
meshRef.current.instanceMatrix.needsUpdate = true;
|
||||
});
|
||||
|
||||
return (
|
||||
<group rotation={tilt as [number, number, number]}>
|
||||
<instancedMesh ref={meshRef} args={[undefined, undefined, trailCount]}>
|
||||
<sphereGeometry args={[1, 8, 8]} />
|
||||
<meshStandardMaterial color={color} emissive={color} emissiveIntensity={2} transparent opacity={0.9} />
|
||||
</instancedMesh>
|
||||
</group>
|
||||
);
|
||||
}
|
||||
|
||||
/* ---------- Orbit ring (thin glowing line) ---------- */
|
||||
function OrbitRing({ tilt, color }: { tilt: number[]; color: THREE.Color }) {
|
||||
const points = useMemo(() => {
|
||||
const pts: THREE.Vector3[] = [];
|
||||
for (let i = 0; i <= 128; i++) {
|
||||
const t = (i / 128) * Math.PI * 2;
|
||||
pts.push(new THREE.Vector3(Math.cos(t) * 3.2, Math.sin(t) * 3.2 * 0.38, 0));
|
||||
}
|
||||
return pts;
|
||||
}, []);
|
||||
const geo = useMemo(() => new THREE.BufferGeometry().setFromPoints(points), [points]);
|
||||
|
||||
return (
|
||||
<group rotation={tilt as [number, number, number]}>
|
||||
<line geometry={geo}>
|
||||
<lineBasicMaterial color={color} transparent opacity={0.12} />
|
||||
</line>
|
||||
</group>
|
||||
);
|
||||
}
|
||||
|
||||
/* ---------- Nucleus: pulsing energy core ---------- */
|
||||
function Nucleus() {
|
||||
const coreRef = useRef<THREE.Mesh>(null);
|
||||
const glowRef = useRef<THREE.Mesh>(null);
|
||||
const outerRef = useRef<THREE.Mesh>(null);
|
||||
|
||||
useFrame(({ clock, pointer }) => {
|
||||
const t = clock.getElapsedTime();
|
||||
const mouseDist = Math.sqrt(pointer.x ** 2 + pointer.y ** 2);
|
||||
const mouseProximity = Math.max(0, 1 - mouseDist); // 1 at center, 0 at edges
|
||||
|
||||
if (coreRef.current) {
|
||||
const s = 1 + Math.sin(t * 3) * 0.08 + Math.sin(t * 7.3) * 0.03 + mouseProximity * 0.15;
|
||||
coreRef.current.scale.setScalar(s);
|
||||
(coreRef.current.material as THREE.MeshStandardMaterial).emissiveIntensity = 2 + mouseProximity * 3;
|
||||
}
|
||||
if (glowRef.current) {
|
||||
const s = 1 + Math.sin(t * 2) * 0.15 + mouseProximity * 0.3;
|
||||
glowRef.current.scale.setScalar(s);
|
||||
(glowRef.current.material as THREE.MeshStandardMaterial).opacity = 0.15 + Math.sin(t * 4) * 0.08 + mouseProximity * 0.2;
|
||||
}
|
||||
if (outerRef.current) {
|
||||
outerRef.current.rotation.y = t * (0.5 + mouseProximity * 2);
|
||||
outerRef.current.rotation.x = t * (0.3 + mouseProximity * 1.5);
|
||||
}
|
||||
});
|
||||
|
||||
// Logo refs — 3 copies at different rotations
|
||||
const logo1Ref = useRef<THREE.Group>(null);
|
||||
const logo2Ref = useRef<THREE.Group>(null);
|
||||
const logo3Ref = useRef<THREE.Group>(null);
|
||||
|
||||
useFrame(({ clock, camera }) => {
|
||||
const t = clock.getElapsedTime();
|
||||
// Each logo copy rotates on a different axis
|
||||
if (logo1Ref.current) {
|
||||
logo1Ref.current.rotation.y = t * 0.8;
|
||||
logo1Ref.current.quaternion.copy(camera.quaternion);
|
||||
}
|
||||
if (logo2Ref.current) {
|
||||
logo2Ref.current.rotation.set(t * 0.5, t * 0.3, 0);
|
||||
}
|
||||
if (logo3Ref.current) {
|
||||
logo3Ref.current.rotation.set(0, t * -0.4, t * 0.6);
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<group>
|
||||
{/* outer energy shell */}
|
||||
<mesh ref={outerRef}>
|
||||
<icosahedronGeometry args={[0.9, 1]} />
|
||||
<meshStandardMaterial color={COLORS.electric} wireframe transparent opacity={0.08} emissive={COLORS.electric} emissiveIntensity={0.5} />
|
||||
</mesh>
|
||||
{/* glow sphere */}
|
||||
<mesh ref={glowRef}>
|
||||
<sphereGeometry args={[0.7, 32, 32]} />
|
||||
<meshStandardMaterial color={COLORS.nucleus} transparent opacity={0.15} emissive={COLORS.nucleus} emissiveIntensity={1.2} />
|
||||
</mesh>
|
||||
{/* solid core */}
|
||||
<mesh ref={coreRef}>
|
||||
<sphereGeometry args={[0.32, 32, 32]} />
|
||||
<meshStandardMaterial color="#ffffff" emissive={COLORS.amber} emissiveIntensity={2} metalness={0.6} roughness={0.2} />
|
||||
</mesh>
|
||||
|
||||
{/* ER logo — 3 copies at center, different rotations */}
|
||||
<group ref={logo1Ref}>
|
||||
<Text fontSize={0.25} font={FONT_URL} anchorX="center" anchorY="middle" letterSpacing={0.05}>
|
||||
ER
|
||||
<meshStandardMaterial color="#ffffff" emissive="#5bd1d8" emissiveIntensity={1.5} transparent opacity={0.7} />
|
||||
</Text>
|
||||
</group>
|
||||
<group ref={logo2Ref}>
|
||||
<Text fontSize={0.2} font={FONT_URL} anchorX="center" anchorY="middle" letterSpacing={0.05}>
|
||||
ER
|
||||
<meshStandardMaterial color="#ffffff" emissive="#f1c27a" emissiveIntensity={1} transparent opacity={0.35} />
|
||||
</Text>
|
||||
</group>
|
||||
<group ref={logo3Ref}>
|
||||
<Text fontSize={0.18} font={FONT_URL} anchorX="center" anchorY="middle" letterSpacing={0.05}>
|
||||
ER
|
||||
<meshStandardMaterial color="#ffffff" emissive="#b6d18f" emissiveIntensity={0.8} transparent opacity={0.25} />
|
||||
</Text>
|
||||
</group>
|
||||
</group>
|
||||
);
|
||||
}
|
||||
|
||||
/* ---------- ER logo (PNG) orbiting close to nucleus ---------- */
|
||||
function LogoOrbit({ tilt, speed, radius, color }: {
|
||||
tilt: number[]; speed: number; radius: number; color: string;
|
||||
}) {
|
||||
const ref = useRef<THREE.Group>(null);
|
||||
const planeRef = useRef<THREE.Group>(null);
|
||||
const [texture, setTexture] = useState<THREE.Texture | null>(null);
|
||||
const phase = useMemo(() => Math.random() * Math.PI * 2, []);
|
||||
const eccentricity = 0.35;
|
||||
const threeColor = useMemo(() => new THREE.Color(color), [color]);
|
||||
|
||||
useEffect(() => {
|
||||
new THREE.TextureLoader().load('/assets/brand/logo-mark.png', (tex) => {
|
||||
tex.minFilter = THREE.LinearFilter;
|
||||
tex.magFilter = THREE.LinearFilter;
|
||||
setTexture(tex);
|
||||
});
|
||||
}, []);
|
||||
|
||||
useFrame(({ clock, camera }) => {
|
||||
if (!ref.current || !planeRef.current) return;
|
||||
const t = clock.getElapsedTime() * speed + phase;
|
||||
|
||||
ref.current.position.set(
|
||||
Math.cos(t) * radius,
|
||||
Math.sin(t) * radius * eccentricity,
|
||||
0,
|
||||
);
|
||||
|
||||
// Billboard — always face camera
|
||||
planeRef.current.quaternion.copy(camera.quaternion);
|
||||
});
|
||||
|
||||
if (!texture) return null;
|
||||
|
||||
return (
|
||||
<group rotation={tilt as [number, number, number]}>
|
||||
<group ref={ref}>
|
||||
<group ref={planeRef}>
|
||||
{/* Logo PNG on a plane */}
|
||||
<mesh>
|
||||
<planeGeometry args={[0.35, 0.35]} />
|
||||
<meshStandardMaterial
|
||||
map={texture}
|
||||
transparent
|
||||
opacity={0.85}
|
||||
emissive={threeColor}
|
||||
emissiveIntensity={0.8}
|
||||
side={THREE.DoubleSide}
|
||||
alphaTest={0.1}
|
||||
/>
|
||||
</mesh>
|
||||
</group>
|
||||
{/* Glow sphere behind logo */}
|
||||
<mesh>
|
||||
<sphereGeometry args={[0.15, 8, 8]} />
|
||||
<meshStandardMaterial
|
||||
color={color}
|
||||
emissive={threeColor}
|
||||
emissiveIntensity={1.2}
|
||||
transparent
|
||||
opacity={0.15}
|
||||
/>
|
||||
</mesh>
|
||||
</group>
|
||||
</group>
|
||||
);
|
||||
}
|
||||
|
||||
/* ---------- Energy arcs (random lightning) ---------- */
|
||||
function EnergyArc({ color }: { color: THREE.Color }) {
|
||||
const ref = useRef<THREE.Line>(null);
|
||||
const [visible, setVisible] = useState(true);
|
||||
|
||||
useFrame(({ clock }) => {
|
||||
const t = clock.getElapsedTime();
|
||||
// flash randomly
|
||||
setVisible(Math.sin(t * 12 + Math.random() * 100) > 0.7);
|
||||
|
||||
if (ref.current && visible) {
|
||||
const geo = ref.current.geometry;
|
||||
const pts: THREE.Vector3[] = [];
|
||||
const segments = 8;
|
||||
const startAngle = Math.sin(t * 2) * Math.PI;
|
||||
for (let i = 0; i <= segments; i++) {
|
||||
const frac = i / segments;
|
||||
const r = 0.4 + frac * 2.5;
|
||||
const angle = startAngle + frac * 1.5;
|
||||
pts.push(new THREE.Vector3(
|
||||
Math.cos(angle) * r + (Math.random() - 0.5) * 0.3,
|
||||
Math.sin(angle) * r * 0.4 + (Math.random() - 0.5) * 0.2,
|
||||
(Math.random() - 0.5) * 0.4,
|
||||
));
|
||||
}
|
||||
geo.setFromPoints(pts);
|
||||
}
|
||||
});
|
||||
|
||||
if (!visible) return null;
|
||||
|
||||
return (
|
||||
<line ref={ref}>
|
||||
<bufferGeometry />
|
||||
<lineBasicMaterial color={color} transparent opacity={0.4} blending={THREE.AdditiveBlending} />
|
||||
</line>
|
||||
);
|
||||
}
|
||||
|
||||
/* ---------- 3D Circular / Orbital text ---------- */
|
||||
const LAUNCH = new Date('2026-05-01T00:00:00+02:00').getTime();
|
||||
const FONT_URL = '/assets/fonts/orbitron-bold.ttf';
|
||||
|
||||
function pad(n: number) { return String(n).padStart(2, '0'); }
|
||||
|
||||
/* Each character placed on a circle arc, rotating together */
|
||||
function CircularText({ text, radius, speed, tilt, fontSize, color, emissive, opacity = 0.9, spread = 0.8 }: {
|
||||
text: string; radius: number; speed: number; tilt: number[];
|
||||
fontSize: number; color: string; emissive: string; opacity?: number; spread?: number;
|
||||
}) {
|
||||
const groupRef = useRef<THREE.Group>(null);
|
||||
const chars = useMemo(() => text.split(''), [text]);
|
||||
const charWidth = fontSize * 0.55;
|
||||
|
||||
useFrame(({ clock }) => {
|
||||
if (!groupRef.current) return;
|
||||
const t = clock.getElapsedTime() * speed;
|
||||
groupRef.current.rotation.y = t;
|
||||
});
|
||||
|
||||
return (
|
||||
<group rotation={tilt as [number, number, number]}>
|
||||
<group ref={groupRef}>
|
||||
{chars.map((char, i) => {
|
||||
const angle = ((i - chars.length / 2) * charWidth * spread) / radius;
|
||||
const x = Math.sin(angle) * radius;
|
||||
const z = Math.cos(angle) * radius;
|
||||
return (
|
||||
<Text
|
||||
key={i}
|
||||
position={[x, 0, z]}
|
||||
rotation={[0, -angle, 0]}
|
||||
fontSize={fontSize}
|
||||
font={FONT_URL}
|
||||
anchorX="center"
|
||||
anchorY="middle"
|
||||
>
|
||||
{char}
|
||||
<meshStandardMaterial
|
||||
color={color}
|
||||
emissive={emissive}
|
||||
emissiveIntensity={0.6}
|
||||
transparent
|
||||
opacity={opacity}
|
||||
side={THREE.DoubleSide}
|
||||
/>
|
||||
</Text>
|
||||
);
|
||||
})}
|
||||
</group>
|
||||
</group>
|
||||
);
|
||||
}
|
||||
|
||||
/* Countdown — characters on a spinning ring */
|
||||
function CountdownRing() {
|
||||
const [time, setTime] = useState('');
|
||||
const groupRef = useRef<THREE.Group>(null);
|
||||
const radius = 2.5;
|
||||
|
||||
useEffect(() => {
|
||||
function tick() {
|
||||
const diff = Math.max(0, LAUNCH - Date.now());
|
||||
const d = Math.floor(diff / 86400000);
|
||||
const h = Math.floor((diff % 86400000) / 3600000);
|
||||
const m = Math.floor((diff % 3600000) / 60000);
|
||||
const s = Math.floor((diff % 60000) / 1000);
|
||||
setTime(`${pad(d)}J ${pad(h)}H ${pad(m)}M ${pad(s)}S`);
|
||||
}
|
||||
tick();
|
||||
const id = setInterval(tick, 1000);
|
||||
return () => clearInterval(id);
|
||||
}, []);
|
||||
|
||||
useFrame(({ clock }) => {
|
||||
if (!groupRef.current) return;
|
||||
groupRef.current.rotation.y = clock.getElapsedTime() * -0.2;
|
||||
});
|
||||
|
||||
const chars = time.split('');
|
||||
const fontSize = 0.28;
|
||||
const charWidth = fontSize * 0.5;
|
||||
|
||||
return (
|
||||
<group rotation={[0.3, 0, 0.1]}>
|
||||
<group ref={groupRef}>
|
||||
{chars.map((char, i) => {
|
||||
const angle = ((i - chars.length / 2) * charWidth * 0.9) / radius;
|
||||
const x = Math.sin(angle) * radius;
|
||||
const z = Math.cos(angle) * radius;
|
||||
return (
|
||||
<Text
|
||||
key={i}
|
||||
position={[x, 0, z]}
|
||||
rotation={[0, -angle, 0]}
|
||||
fontSize={fontSize}
|
||||
font={FONT_URL}
|
||||
anchorX="center"
|
||||
anchorY="middle"
|
||||
>
|
||||
{char}
|
||||
<meshStandardMaterial
|
||||
color="#ffffff"
|
||||
emissive="#5bd1d8"
|
||||
emissiveIntensity={0.8}
|
||||
transparent
|
||||
opacity={0.95}
|
||||
side={THREE.DoubleSide}
|
||||
/>
|
||||
</Text>
|
||||
);
|
||||
})}
|
||||
</group>
|
||||
</group>
|
||||
);
|
||||
}
|
||||
|
||||
/* All circular texts assembled */
|
||||
function CountdownText() {
|
||||
return (
|
||||
<group>
|
||||
{/* "L'electron" — tight elliptical orbit, close to nucleus */}
|
||||
<CircularText
|
||||
text={"L'\u00e9lectron"}
|
||||
radius={2.0}
|
||||
speed={0.18}
|
||||
tilt={[-0.4, 0, 0]}
|
||||
fontSize={0.45}
|
||||
color="#ffffff"
|
||||
emissive="#ffffff"
|
||||
spread={1.2}
|
||||
/>
|
||||
|
||||
{/* "rare" — opposite tilt, close */}
|
||||
<CircularText
|
||||
text="rare"
|
||||
radius={1.8}
|
||||
speed={-0.22}
|
||||
tilt={[0.6, 0.3, 0]}
|
||||
fontSize={0.7}
|
||||
color="#ffffff"
|
||||
emissive="#5bd1d8"
|
||||
spread={1.3}
|
||||
/>
|
||||
|
||||
{/* Subtitle — medium ring */}
|
||||
<CircularText
|
||||
text="SYSTEMES ELECTRONIQUES SPECIFIQUES"
|
||||
radius={3.0}
|
||||
speed={0.1}
|
||||
tilt={[1.2, 0.2, 0.3]}
|
||||
fontSize={0.1}
|
||||
color="#ffffff"
|
||||
emissive="#5bd1d8"
|
||||
opacity={0.35}
|
||||
spread={0.6}
|
||||
/>
|
||||
|
||||
{/* "LANCEMENT DANS" — small tight ring */}
|
||||
<CircularText
|
||||
text="LANCEMENT DANS"
|
||||
radius={1.5}
|
||||
speed={0.3}
|
||||
tilt={[-0.8, -0.2, 0.15]}
|
||||
fontSize={0.09}
|
||||
color="#5bd1d8"
|
||||
emissive="#5bd1d8"
|
||||
opacity={0.5}
|
||||
spread={0.8}
|
||||
/>
|
||||
|
||||
{/* 3x ER logo orbiting close to nucleus like inner electrons */}
|
||||
<LogoOrbit tilt={[-0.3, 0, 0.1]} speed={0.6} radius={1.2} color="#5bd1d8" />
|
||||
<LogoOrbit tilt={[0.5, 0.2, -0.1]} speed={-0.45} radius={1.0} color="#f1c27a" />
|
||||
<LogoOrbit tilt={[1.2, -0.3, 0.3]} speed={0.35} radius={1.3} color="#b6d18f" />
|
||||
|
||||
{/* Countdown timer — spinning ring */}
|
||||
<CountdownRing />
|
||||
|
||||
{/* Extra decorative text rings */}
|
||||
<CircularText
|
||||
text="electronique automatisme energie stockage prototypage formation"
|
||||
radius={3.5}
|
||||
speed={-0.06}
|
||||
tilt={[0.8, -0.4, 0.5]}
|
||||
fontSize={0.06}
|
||||
color="#5bd1d8"
|
||||
emissive="#5bd1d8"
|
||||
opacity={0.2}
|
||||
spread={0.5}
|
||||
/>
|
||||
</group>
|
||||
);
|
||||
}
|
||||
|
||||
/* ---------- Main scene ---------- */
|
||||
function AtomScene() {
|
||||
const groupRef = useRef<THREE.Group>(null);
|
||||
|
||||
const orbits = useMemo(() => [
|
||||
{ tilt: [-0.5, 0, 0], speed: 1.0, color: COLORS.cyan },
|
||||
{ tilt: [0.5, 0.3, 0], speed: 0.72, color: COLORS.amber },
|
||||
{ tilt: [1.57, 0.2, 0.4], speed: 0.55, color: COLORS.green },
|
||||
], []);
|
||||
|
||||
useFrame(({ clock, pointer }) => {
|
||||
if (!groupRef.current) return;
|
||||
const t = clock.getElapsedTime();
|
||||
// Mouse distance from center = speed boost
|
||||
const mouseDist = Math.sqrt(pointer.x ** 2 + pointer.y ** 2);
|
||||
const speedMul = 1 + mouseDist * 0.8;
|
||||
groupRef.current.rotation.y = t * 0.12 * speedMul + pointer.x * 0.6;
|
||||
groupRef.current.rotation.x = -0.2 + pointer.y * 0.4;
|
||||
groupRef.current.rotation.z = pointer.x * 0.1;
|
||||
});
|
||||
|
||||
return (
|
||||
<group ref={groupRef}>
|
||||
<Nucleus />
|
||||
{orbits.map((o, i) => (
|
||||
<OrbitRing key={`ring-${i}`} tilt={o.tilt} color={o.color} />
|
||||
))}
|
||||
{orbits.map((o, i) => (
|
||||
<OrbitTrail key={`trail-${i}`} tilt={o.tilt} speed={o.speed} color={o.color} />
|
||||
))}
|
||||
<EnergyArc color={COLORS.cyan} />
|
||||
<EnergyArc color={COLORS.amber} />
|
||||
<ParticleField />
|
||||
{/* Textes orbitants — dans le groupe, tournent avec l'atome */}
|
||||
<CountdownText />
|
||||
</group>
|
||||
);
|
||||
}
|
||||
|
||||
/* ---------- Camera with mouse parallax ---------- */
|
||||
function CameraRig() {
|
||||
const { camera } = useThree();
|
||||
const mouse = useRef({ x: 0, y: 0 });
|
||||
const smooth = useRef({ x: 0, y: 0 });
|
||||
|
||||
useFrame(({ clock, pointer }) => {
|
||||
const t = clock.getElapsedTime();
|
||||
|
||||
// Smooth mouse follow (lerp)
|
||||
mouse.current.x = pointer.x;
|
||||
mouse.current.y = pointer.y;
|
||||
smooth.current.x += (mouse.current.x - smooth.current.x) * 0.05;
|
||||
smooth.current.y += (mouse.current.y - smooth.current.y) * 0.05;
|
||||
|
||||
// Camera orbits gently + follows mouse
|
||||
camera.position.x = Math.sin(t * 0.08) * 0.5 + smooth.current.x * 2.5;
|
||||
camera.position.y = Math.cos(t * 0.06) * 0.3 + smooth.current.y * 1.5;
|
||||
camera.position.z = 9 + Math.sin(t * 0.1) * 0.3;
|
||||
camera.lookAt(smooth.current.x * 0.5, smooth.current.y * 0.3, 0);
|
||||
});
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
/* ---------- Exported component ---------- */
|
||||
export default function AtomGlitch() {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
width: '100vw',
|
||||
height: '100vh',
|
||||
}}
|
||||
aria-label="Atome 3D animé — L'Electron Rare"
|
||||
role="img"
|
||||
>
|
||||
<Canvas
|
||||
camera={{ position: [0, -0.5, 9], fov: 45 }}
|
||||
dpr={[1, 2]}
|
||||
gl={{ antialias: true, alpha: true, powerPreference: 'high-performance' }}
|
||||
style={{ background: 'transparent' }}
|
||||
>
|
||||
<color attach="background" args={['#000000']} />
|
||||
<fog attach="fog" args={['#000000', 8, 18]} />
|
||||
|
||||
<ambientLight intensity={0.15} />
|
||||
<pointLight position={[5, 3, 5]} intensity={0.8} color="#ffffff" />
|
||||
<pointLight position={[-4, -2, 3]} intensity={0.4} color="#5bd1d8" />
|
||||
<pointLight position={[0, 4, -3]} intensity={0.3} color="#f1c27a" />
|
||||
|
||||
<CameraRig />
|
||||
<AtomScene />
|
||||
|
||||
<EffectComposer>
|
||||
<Bloom luminanceThreshold={0.2} luminanceSmoothing={0.9} intensity={1.8} mipmapBlur />
|
||||
<ChromaticAberration blendFunction={BlendFunction.NORMAL} offset={new THREE.Vector2(0.002, 0.002)} />
|
||||
<GlitchEffect delay={new THREE.Vector2(3, 8)} duration={new THREE.Vector2(0.1, 0.4)} strength={new THREE.Vector2(0.05, 0.15)} mode={GlitchMode.SPORADIC} />
|
||||
<Scanline blendFunction={BlendFunction.OVERLAY} density={1.8} opacity={0.05} />
|
||||
</EffectComposer>
|
||||
</Canvas>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,513 +0,0 @@
|
||||
import { useRef, useMemo, useEffect, useState, Suspense } from 'react';
|
||||
import { Canvas, useFrame, useThree } from '@react-three/fiber';
|
||||
import { Text, useGLTF } from '@react-three/drei';
|
||||
import { EffectComposer, Bloom, ChromaticAberration, Scanline } from '@react-three/postprocessing';
|
||||
import { BlendFunction } from 'postprocessing';
|
||||
import * as THREE from 'three';
|
||||
|
||||
/* ===================================================================
|
||||
PCB JOURNEY v2 — Real KiCad PCB + real component GLBs
|
||||
|
||||
The BMU v2 PCB is loaded as the central 3D object.
|
||||
Camera orbits around it, zooming into component zones on scroll.
|
||||
Real GLB components from KiCad library placed on the board.
|
||||
Current flows along the copper traces.
|
||||
=================================================================== */
|
||||
|
||||
const COLORS = {
|
||||
copper: new THREE.Color('#c87533'),
|
||||
copperBright: new THREE.Color('#e8a040'),
|
||||
current: new THREE.Color('#5bd1d8'),
|
||||
currentWarm: new THREE.Color('#f1c27a'),
|
||||
silkscreen: new THREE.Color('#e8e8d0'),
|
||||
};
|
||||
|
||||
const FONT_URL = '/assets/fonts/orbitron-bold.ttf';
|
||||
|
||||
/* ---------- Scroll state ---------- */
|
||||
let scrollProgress = 0;
|
||||
|
||||
/* ---------- Real PCB Board (full 3D with components from FreeCAD) ---------- */
|
||||
function RealPCB() {
|
||||
let glb: any = null;
|
||||
try { glb = useGLTF('/assets/models3d/bmu-assembly.glb'); } catch {}
|
||||
|
||||
if (!glb?.scene) return null;
|
||||
|
||||
// Deep clone with materials preserved
|
||||
const cloned = useMemo(() => {
|
||||
const clone = glb.scene.clone(true);
|
||||
clone.traverse((child: any) => {
|
||||
if (child.isMesh && child.material) {
|
||||
child.material = child.material.clone();
|
||||
}
|
||||
});
|
||||
return clone;
|
||||
}, [glb.scene]);
|
||||
|
||||
return (
|
||||
<primitive
|
||||
object={cloned}
|
||||
scale={1}
|
||||
rotation={[-Math.PI / 2, 0, 0]}
|
||||
position={[0, 0, 0]}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
/* ---------- GLB Component placement ---------- */
|
||||
function GLBComponent({ modelUrl, position, scale = 1, rotation = [0, 0, 0] as [number, number, number] }: {
|
||||
modelUrl: string; position: [number, number, number]; scale?: number; rotation?: [number, number, number];
|
||||
}) {
|
||||
let glb: any = null;
|
||||
try { glb = useGLTF(modelUrl); } catch {}
|
||||
if (!glb?.scene) return null;
|
||||
return (
|
||||
<primitive
|
||||
object={glb.scene.clone()}
|
||||
position={position}
|
||||
scale={scale}
|
||||
rotation={rotation}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
/* ---------- Section label (silkscreen on board, clickable) ---------- */
|
||||
function SectionLabel({ position, text, subtitle, scrollTarget }: {
|
||||
position: [number, number, number]; text: string; subtitle?: string; scrollTarget?: string;
|
||||
}) {
|
||||
const ref = useRef<THREE.Group>(null);
|
||||
const [hovered, setHovered] = useState(false);
|
||||
|
||||
useFrame(({ camera }) => {
|
||||
if (!ref.current) return;
|
||||
const worldPos = new THREE.Vector3();
|
||||
ref.current.getWorldPosition(worldPos);
|
||||
const dist = camera.position.distanceTo(worldPos);
|
||||
const glow = Math.max(0, 1 - dist / 12);
|
||||
// Dynamic opacity based on camera distance
|
||||
ref.current.children.forEach(child => {
|
||||
if ((child as any).material) {
|
||||
(child as any).material.opacity = hovered ? 0.9 : 0.3 + glow * 0.4;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const handleClick = () => {
|
||||
if (!scrollTarget) return;
|
||||
if (scrollTarget === '#contact') {
|
||||
// Open contact popup
|
||||
document.getElementById('contact')?.classList.add('contact-3d-popup--open');
|
||||
} else {
|
||||
const el = document.querySelector(scrollTarget);
|
||||
if (el) el.scrollIntoView({ behavior: 'smooth' });
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<group
|
||||
ref={ref}
|
||||
position={position}
|
||||
onClick={handleClick}
|
||||
onPointerOver={() => { setHovered(true); document.body.style.cursor = scrollTarget ? 'pointer' : 'default'; }}
|
||||
onPointerOut={() => { setHovered(false); document.body.style.cursor = 'default'; }}
|
||||
>
|
||||
{/* Clickable hit area (invisible plane) */}
|
||||
<mesh rotation={[-Math.PI / 2, 0, 0]} position={[0, 0.01, 0.4]}>
|
||||
<planeGeometry args={[text.length * 0.55, 2.5]} />
|
||||
<meshBasicMaterial transparent opacity={0} side={THREE.DoubleSide} />
|
||||
</mesh>
|
||||
|
||||
{/* Main label */}
|
||||
<Text
|
||||
rotation={[-Math.PI / 2, 0, 0]}
|
||||
fontSize={hovered ? 0.9 : 0.8}
|
||||
font={FONT_URL}
|
||||
color={hovered ? '#ffffff' : '#5bd1d8'}
|
||||
anchorX="center"
|
||||
anchorY="middle"
|
||||
material-transparent
|
||||
material-opacity={0.4}
|
||||
letterSpacing={0.08}
|
||||
>
|
||||
{text}
|
||||
<meshStandardMaterial
|
||||
color={hovered ? '#ffffff' : '#5bd1d8'}
|
||||
emissive={hovered ? '#5bd1d8' : '#5bd1d8'}
|
||||
emissiveIntensity={hovered ? 1.5 : 0.3}
|
||||
transparent
|
||||
opacity={0.4}
|
||||
side={THREE.DoubleSide}
|
||||
/>
|
||||
</Text>
|
||||
|
||||
{/* Subtitle */}
|
||||
{subtitle && (
|
||||
<Text
|
||||
position={[0, 0, 1.2]}
|
||||
rotation={[-Math.PI / 2, 0, 0]}
|
||||
fontSize={0.3}
|
||||
font={FONT_URL}
|
||||
color="#e8e8d0"
|
||||
anchorX="center"
|
||||
anchorY="middle"
|
||||
material-transparent
|
||||
material-opacity={hovered ? 0.5 : 0.2}
|
||||
letterSpacing={0.04}
|
||||
>
|
||||
{subtitle}
|
||||
</Text>
|
||||
)}
|
||||
|
||||
{/* Hover glow ring */}
|
||||
{hovered && (
|
||||
<mesh rotation={[-Math.PI / 2, 0, 0]} position={[0, 0.02, 0.4]}>
|
||||
<ringGeometry args={[text.length * 0.25, text.length * 0.28, 32]} />
|
||||
<meshStandardMaterial color="#5bd1d8" emissive="#5bd1d8" emissiveIntensity={2} transparent opacity={0.15} side={THREE.DoubleSide} />
|
||||
</mesh>
|
||||
)}
|
||||
</group>
|
||||
);
|
||||
}
|
||||
|
||||
/* ---------- Current flow particles ---------- */
|
||||
function CurrentFlow({ count = 80 }) {
|
||||
const ref = useRef<THREE.InstancedMesh>(null);
|
||||
const dummy = useMemo(() => new THREE.Object3D(), []);
|
||||
|
||||
// Particles follow a circular path around the PCB
|
||||
const phases = useMemo(() => Array.from({ length: count }, () => Math.random()), [count]);
|
||||
const radii = useMemo(() => Array.from({ length: count }, () => 3 + Math.random() * 8), [count]);
|
||||
const heights = useMemo(() => Array.from({ length: count }, () => 0.3 + Math.random() * 0.5), [count]);
|
||||
|
||||
useFrame(({ clock }) => {
|
||||
if (!ref.current) return;
|
||||
const t = clock.getElapsedTime();
|
||||
|
||||
for (let i = 0; i < count; i++) {
|
||||
const angle = phases[i] * Math.PI * 2 + t * (0.1 + phases[i] * 0.1);
|
||||
const r = radii[i];
|
||||
dummy.position.set(
|
||||
Math.cos(angle) * r,
|
||||
heights[i] + Math.sin(t * 2 + i) * 0.1,
|
||||
Math.sin(angle) * r * 0.6,
|
||||
);
|
||||
const proximity = Math.max(0.2, 1 - Math.abs(scrollProgress - phases[i]) * 3);
|
||||
dummy.scale.setScalar(0.04 * proximity);
|
||||
dummy.updateMatrix();
|
||||
ref.current.setMatrixAt(i, dummy.matrix);
|
||||
}
|
||||
ref.current.instanceMatrix.needsUpdate = true;
|
||||
});
|
||||
|
||||
return (
|
||||
<instancedMesh ref={ref} args={[undefined, undefined, count]}>
|
||||
<sphereGeometry args={[1, 6, 6]} />
|
||||
<meshStandardMaterial color={COLORS.current} emissive={COLORS.current} emissiveIntensity={3} transparent opacity={0.8} />
|
||||
</instancedMesh>
|
||||
);
|
||||
}
|
||||
|
||||
/* ---------- Warm current (second layer) ---------- */
|
||||
function WarmCurrent({ count = 40 }) {
|
||||
const ref = useRef<THREE.InstancedMesh>(null);
|
||||
const dummy = useMemo(() => new THREE.Object3D(), []);
|
||||
const phases = useMemo(() => Array.from({ length: count }, () => Math.random()), [count]);
|
||||
|
||||
useFrame(({ clock }) => {
|
||||
if (!ref.current) return;
|
||||
const t = clock.getElapsedTime();
|
||||
for (let i = 0; i < count; i++) {
|
||||
const angle = phases[i] * Math.PI * 2 + t * 0.06 + Math.PI;
|
||||
const r = 4 + phases[i] * 6;
|
||||
dummy.position.set(
|
||||
Math.cos(angle) * r,
|
||||
0.2 + Math.sin(t + i) * 0.05,
|
||||
Math.sin(angle) * r * 0.5,
|
||||
);
|
||||
dummy.scale.setScalar(0.025);
|
||||
dummy.updateMatrix();
|
||||
ref.current.setMatrixAt(i, dummy.matrix);
|
||||
}
|
||||
ref.current.instanceMatrix.needsUpdate = true;
|
||||
});
|
||||
|
||||
return (
|
||||
<instancedMesh ref={ref} args={[undefined, undefined, count]}>
|
||||
<sphereGeometry args={[1, 6, 6]} />
|
||||
<meshStandardMaterial color={COLORS.currentWarm} emissive={COLORS.currentWarm} emissiveIntensity={2} transparent opacity={0.6} />
|
||||
</instancedMesh>
|
||||
);
|
||||
}
|
||||
|
||||
/* ---------- Ambient dust ---------- */
|
||||
function AmbientDust({ count = 150 }) {
|
||||
const ref = useRef<THREE.Points>(null);
|
||||
const positions = useMemo(() => {
|
||||
const pos = new Float32Array(count * 3);
|
||||
for (let i = 0; i < count; i++) {
|
||||
pos[i * 3] = (Math.random() - 0.5) * 30;
|
||||
pos[i * 3 + 1] = Math.random() * 4;
|
||||
pos[i * 3 + 2] = (Math.random() - 0.5) * 20;
|
||||
}
|
||||
return pos;
|
||||
}, [count]);
|
||||
|
||||
useFrame(({ clock }) => {
|
||||
if (!ref.current) return;
|
||||
const arr = (ref.current.geometry.attributes.position as THREE.BufferAttribute).array as Float32Array;
|
||||
const t = clock.getElapsedTime();
|
||||
for (let i = 0; i < count; i++) {
|
||||
arr[i * 3 + 1] += Math.sin(t * 0.3 + i * 0.5) * 0.001;
|
||||
}
|
||||
ref.current.geometry.attributes.position.needsUpdate = true;
|
||||
});
|
||||
|
||||
return (
|
||||
<points ref={ref}>
|
||||
<bufferGeometry>
|
||||
<bufferAttribute attach="attributes-position" args={[positions, 3]} />
|
||||
</bufferGeometry>
|
||||
<pointsMaterial size={0.04} color={COLORS.current} transparent opacity={0.15} sizeAttenuation depthWrite={false} blending={THREE.AdditiveBlending} />
|
||||
</points>
|
||||
);
|
||||
}
|
||||
|
||||
/* ---------- Component clusters around the PCB ---------- */
|
||||
function ComponentCluster() {
|
||||
const R = [-Math.PI / 2, 0, 0] as [number, number, number];
|
||||
const S_RES = 8;
|
||||
const S_CAP = 10;
|
||||
const S_LED = 8;
|
||||
const S_IC_SM = 6;
|
||||
const S_IC_LG = 3;
|
||||
|
||||
return (
|
||||
<group>
|
||||
{/* Zone 1 — MCU area (top-right of board) */}
|
||||
<SectionLabel position={[40, 90, -10]} text="MCU" subtitle="Approche & expertise" scrollTarget="#a-propos" />
|
||||
<GLBComponent modelUrl="/assets/models3d/qfp32.glb" position={[5, 0.3, -2]} scale={S_IC_LG} rotation={R} />
|
||||
<GLBComponent modelUrl="/assets/models3d/soic8.glb" position={[3, 0.3, -1]} scale={S_IC_SM} rotation={R} />
|
||||
<GLBComponent modelUrl="/assets/models3d/resistor_0603.glb" position={[4, 0.3, 0]} scale={S_RES} rotation={R} />
|
||||
<GLBComponent modelUrl="/assets/models3d/resistor_0603.glb" position={[4.5, 0.3, 0.5]} scale={S_RES} rotation={R} />
|
||||
<GLBComponent modelUrl="/assets/models3d/capacitor_0805.glb" position={[6.5, 0.3, -0.5]} scale={S_CAP} rotation={R} />
|
||||
<GLBComponent modelUrl="/assets/models3d/capacitor_0805.glb" position={[7, 0.3, -3]} scale={S_CAP} rotation={R} />
|
||||
<GLBComponent modelUrl="/assets/models3d/led_0603.glb" position={[7.5, 0.3, -1]} scale={S_LED} rotation={R} />
|
||||
<GLBComponent modelUrl="/assets/models3d/led_0603.glb" position={[7.5, 0.3, -2.5]} scale={S_LED} rotation={R} />
|
||||
|
||||
{/* Zone 2 — Analog / Op-amp area (left of board) */}
|
||||
<SectionLabel position={[-30, 90, -10]} text="ANALOG" subtitle="Cas concrets" scrollTarget="#cas-concrets" />
|
||||
<GLBComponent modelUrl="/assets/models3d/soic8.glb" position={[-5, 0.3, -1]} scale={S_IC_SM} rotation={R} />
|
||||
<GLBComponent modelUrl="/assets/models3d/soic8.glb" position={[-3, 0.3, -2]} scale={S_IC_SM} rotation={R} />
|
||||
<GLBComponent modelUrl="/assets/models3d/resistor_0603.glb" position={[-4, 0.3, 0]} scale={S_RES} rotation={R} />
|
||||
<GLBComponent modelUrl="/assets/models3d/resistor_0603.glb" position={[-6, 0.3, -2]} scale={S_RES} rotation={R} />
|
||||
<GLBComponent modelUrl="/assets/models3d/resistor_0603.glb" position={[-4.5, 0.3, -3]} scale={S_RES} rotation={R} />
|
||||
<GLBComponent modelUrl="/assets/models3d/capacitor_0805.glb" position={[-6.5, 0.3, 0]} scale={S_CAP} rotation={R} />
|
||||
<GLBComponent modelUrl="/assets/models3d/inductor_0805.glb" position={[-3.5, 0.3, 1]} scale={S_CAP} rotation={R} />
|
||||
<GLBComponent modelUrl="/assets/models3d/led_0603.glb" position={[-2, 0.3, -1]} scale={S_LED} rotation={R} />
|
||||
|
||||
{/* Zone 3 — Power stage (bottom-right) */}
|
||||
<SectionLabel position={[40, 30, -10]} text="POWER" subtitle="Photos & videos terrain" scrollTarget="#photos" />
|
||||
<GLBComponent modelUrl="/assets/models3d/qfp32.glb" position={[4, 0.3, 4]} scale={S_IC_LG} rotation={R} />
|
||||
<GLBComponent modelUrl="/assets/models3d/capacitor_0805.glb" position={[2, 0.3, 3]} scale={S_CAP * 1.5} rotation={R} />
|
||||
<GLBComponent modelUrl="/assets/models3d/capacitor_0805.glb" position={[6, 0.3, 5]} scale={S_CAP * 1.5} rotation={R} />
|
||||
<GLBComponent modelUrl="/assets/models3d/capacitor_0805.glb" position={[3, 0.3, 5.5]} scale={S_CAP} rotation={R} />
|
||||
<GLBComponent modelUrl="/assets/models3d/inductor_0805.glb" position={[5, 0.3, 3]} scale={S_CAP * 1.2} rotation={R} />
|
||||
<GLBComponent modelUrl="/assets/models3d/resistor_0603.glb" position={[5.5, 0.3, 6]} scale={S_RES} rotation={R} />
|
||||
<GLBComponent modelUrl="/assets/models3d/led_0603.glb" position={[7, 0.3, 4.5]} scale={S_LED} rotation={R} />
|
||||
<GLBComponent modelUrl="/assets/models3d/led_0603.glb" position={[1.5, 0.3, 4.5]} scale={S_LED} rotation={R} />
|
||||
|
||||
{/* Zone 4 — Communication (bottom-left) */}
|
||||
<SectionLabel position={[-30, 30, -10]} text="FORMATION" subtitle="Workshops & programmes" scrollTarget="/formation/" />
|
||||
<GLBComponent modelUrl="/assets/models3d/soic8.glb" position={[-5, 0.3, 4]} scale={S_IC_SM} rotation={R} />
|
||||
<GLBComponent modelUrl="/assets/models3d/soic8.glb" position={[-3, 0.3, 5]} scale={S_IC_SM} rotation={R} />
|
||||
<GLBComponent modelUrl="/assets/models3d/resistor_0603.glb" position={[-6, 0.3, 3]} scale={S_RES} rotation={R} />
|
||||
<GLBComponent modelUrl="/assets/models3d/resistor_0603.glb" position={[-4, 0.3, 6]} scale={S_RES} rotation={R} />
|
||||
<GLBComponent modelUrl="/assets/models3d/capacitor_0805.glb" position={[-6.5, 0.3, 5]} scale={S_CAP} rotation={R} />
|
||||
<GLBComponent modelUrl="/assets/models3d/led_0603.glb" position={[-2, 0.3, 3.5]} scale={S_LED} rotation={R} />
|
||||
<GLBComponent modelUrl="/assets/models3d/led_0603.glb" position={[-7, 0.3, 4.5]} scale={S_LED} rotation={R} />
|
||||
|
||||
{/* Zone 5 — DSP / Neural (center-top) */}
|
||||
<SectionLabel position={[4, 110, -10]} text="MISSIONS" subtitle="Diagnostic · Prototype · Production" scrollTarget="#graphic-sprints-title" />
|
||||
<GLBComponent modelUrl="/assets/models3d/qfp32.glb" position={[0, 0.3, -4]} scale={S_IC_LG} rotation={R} />
|
||||
<GLBComponent modelUrl="/assets/models3d/capacitor_0805.glb" position={[-2, 0.3, -4.5]} scale={S_CAP} rotation={R} />
|
||||
<GLBComponent modelUrl="/assets/models3d/capacitor_0805.glb" position={[2, 0.3, -3.5]} scale={S_CAP} rotation={R} />
|
||||
<GLBComponent modelUrl="/assets/models3d/resistor_0603.glb" position={[-1, 0.3, -5]} scale={S_RES} rotation={R} />
|
||||
<GLBComponent modelUrl="/assets/models3d/resistor_0603.glb" position={[1, 0.3, -5.5]} scale={S_RES} rotation={R} />
|
||||
<GLBComponent modelUrl="/assets/models3d/inductor_0805.glb" position={[0, 0.3, -6]} scale={S_CAP} rotation={R} />
|
||||
|
||||
{/* Zone 6 — Contact area (center) */}
|
||||
<SectionLabel position={[4, 66, -10]} text="CONTACT" subtitle="Discuter de votre projet" scrollTarget="#contact" />
|
||||
|
||||
{/* Scattered passives */}
|
||||
{Array.from({ length: 15 }).map((_, i) => (
|
||||
<GLBComponent
|
||||
key={`scat-r-${i}`}
|
||||
modelUrl="/assets/models3d/resistor_0603.glb"
|
||||
position={[(Math.random() - 0.5) * 16, 0.3, (Math.random() - 0.5) * 14]}
|
||||
scale={S_RES}
|
||||
rotation={[-Math.PI / 2, 0, Math.random() * Math.PI]}
|
||||
/>
|
||||
))}
|
||||
{Array.from({ length: 10 }).map((_, i) => (
|
||||
<GLBComponent
|
||||
key={`scat-c-${i}`}
|
||||
modelUrl="/assets/models3d/capacitor_0805.glb"
|
||||
position={[(Math.random() - 0.5) * 16, 0.3, (Math.random() - 0.5) * 14]}
|
||||
scale={S_CAP}
|
||||
rotation={R}
|
||||
/>
|
||||
))}
|
||||
</group>
|
||||
);
|
||||
}
|
||||
|
||||
/* ---------- Board title silkscreen ---------- */
|
||||
/* ---------- Light that follows the camera ---------- */
|
||||
function CameraLight() {
|
||||
const lightRef = useRef<THREE.PointLight>(null);
|
||||
const { camera } = useThree();
|
||||
|
||||
useFrame(() => {
|
||||
if (!lightRef.current) return;
|
||||
lightRef.current.position.copy(camera.position);
|
||||
lightRef.current.position.y += 0.03;
|
||||
});
|
||||
|
||||
return (
|
||||
<pointLight ref={lightRef} intensity={0.6} color="#ffffff" distance={0.5} decay={1.5} />
|
||||
);
|
||||
}
|
||||
|
||||
/* ---------- Camera — orbits around PCB, zooms on scroll ---------- */
|
||||
// STEP units = METERS. Board ~0.17m wide, ~0.10m tall. After -π/2 X rotation:
|
||||
// model Y→scene -Z, model Z→scene Y. Board center ≈ (0, 0.04, 0).
|
||||
const CAMERA_STOPS = [
|
||||
{ scroll: 0.00, pos: [0, 0.3, 0.2], look: [0, 0.04, 0] }, // Overview
|
||||
{ scroll: 0.12, pos: [0.06, 0.12, 0.02], look: [0.04, 0.04, 0] }, // MCU (right)
|
||||
{ scroll: 0.28, pos: [-0.06, 0.12, 0.02], look: [-0.04, 0.04, 0] }, // Analog (left)
|
||||
{ scroll: 0.42, pos: [0.05, 0.08, -0.03], look: [0.03, 0.04, -0.02] }, // Power
|
||||
{ scroll: 0.56, pos: [-0.05, 0.08, -0.03], look: [-0.03, 0.04, -0.02] }, // Formation
|
||||
{ scroll: 0.70, pos: [0, 0.15, 0.05], look: [0, 0.06, 0] }, // Missions
|
||||
{ scroll: 0.85, pos: [0, 0.08, 0.01], look: [0, 0.04, 0] }, // Contact (close)
|
||||
{ scroll: 1.00, pos: [0, 0.4, 0.25], look: [0, 0.04, 0] }, // Pull back
|
||||
];
|
||||
|
||||
function OrbitCamera() {
|
||||
const { camera } = useThree();
|
||||
const smooth = useRef({ x: 0, y: 0, z: 0, lx: 0, ly: 0, lz: 0 });
|
||||
|
||||
useFrame(({ pointer }) => {
|
||||
const s = scrollProgress;
|
||||
|
||||
let a = CAMERA_STOPS[0], b = CAMERA_STOPS[1];
|
||||
for (let i = 0; i < CAMERA_STOPS.length - 1; i++) {
|
||||
if (s >= CAMERA_STOPS[i].scroll && s <= CAMERA_STOPS[i + 1].scroll) {
|
||||
a = CAMERA_STOPS[i];
|
||||
b = CAMERA_STOPS[i + 1];
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
const range = b.scroll - a.scroll;
|
||||
const t = range > 0 ? (s - a.scroll) / range : 0;
|
||||
const ease = t * t * (3 - 2 * t);
|
||||
|
||||
const tx = a.pos[0] + (b.pos[0] - a.pos[0]) * ease + pointer.x * 0.03;
|
||||
const ty = a.pos[1] + (b.pos[1] - a.pos[1]) * ease + pointer.y * 0.01;
|
||||
const tz = a.pos[2] + (b.pos[2] - a.pos[2]) * ease;
|
||||
const lx = a.look[0] + (b.look[0] - a.look[0]) * ease + pointer.x * 0.005;
|
||||
const ly = a.look[1] + (b.look[1] - a.look[1]) * ease;
|
||||
const lz = a.look[2] + (b.look[2] - a.look[2]) * ease;
|
||||
|
||||
smooth.current.x += (tx - smooth.current.x) * 0.05;
|
||||
smooth.current.y += (ty - smooth.current.y) * 0.05;
|
||||
smooth.current.z += (tz - smooth.current.z) * 0.05;
|
||||
smooth.current.lx += (lx - smooth.current.lx) * 0.05;
|
||||
smooth.current.ly += (ly - smooth.current.ly) * 0.05;
|
||||
smooth.current.lz += (lz - smooth.current.lz) * 0.05;
|
||||
|
||||
camera.position.set(smooth.current.x, smooth.current.y, smooth.current.z);
|
||||
camera.lookAt(smooth.current.lx, smooth.current.ly, smooth.current.lz);
|
||||
});
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
/* ---------- Full scene ---------- */
|
||||
function PCBScene() {
|
||||
return (
|
||||
<group>
|
||||
<Suspense fallback={null}>
|
||||
<RealPCB />
|
||||
<ComponentCluster />
|
||||
</Suspense>
|
||||
<CurrentFlow />
|
||||
<WarmCurrent />
|
||||
<AmbientDust />
|
||||
</group>
|
||||
);
|
||||
}
|
||||
|
||||
/* ---------- Exported component ---------- */
|
||||
export default function WebGLBackground() {
|
||||
useEffect(() => {
|
||||
const onScroll = () => {
|
||||
const el = document.documentElement;
|
||||
const max = Math.max(1, el.scrollHeight - el.clientHeight);
|
||||
scrollProgress = el.scrollTop / max;
|
||||
};
|
||||
window.addEventListener('scroll', onScroll, { passive: true });
|
||||
onScroll();
|
||||
return () => window.removeEventListener('scroll', onScroll);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
position: 'fixed',
|
||||
inset: 0,
|
||||
width: '100vw',
|
||||
height: '100vh',
|
||||
zIndex: 0,
|
||||
pointerEvents: 'none',
|
||||
}}
|
||||
aria-hidden="true"
|
||||
>
|
||||
<Canvas
|
||||
camera={{ position: [0, 0.3, 0.2], fov: 50 }}
|
||||
dpr={[1, 1.5]}
|
||||
gl={{ antialias: true, alpha: true, powerPreference: 'high-performance' }}
|
||||
style={{ pointerEvents: 'auto' }}
|
||||
>
|
||||
<color attach="background" args={['#060a06']} />
|
||||
<fog attach="fog" args={['#060a06', 0.2, 0.8]} />
|
||||
|
||||
<ambientLight intensity={0.25} />
|
||||
<directionalLight position={[0.1, 0.2, 0.1]} intensity={0.7} color="#ffffff" />
|
||||
<directionalLight position={[-0.1, 0.15, -0.1]} intensity={0.3} color="#5bd1d8" />
|
||||
<pointLight position={[0, 0.1, 0]} intensity={0.4} color="#f1c27a" distance={0.5} />
|
||||
<CameraLight />
|
||||
|
||||
<OrbitCamera />
|
||||
<PCBScene />
|
||||
|
||||
<EffectComposer>
|
||||
<Bloom luminanceThreshold={0.4} luminanceSmoothing={0.9} intensity={0.7} mipmapBlur />
|
||||
<ChromaticAberration blendFunction={BlendFunction.NORMAL} offset={new THREE.Vector2(0.0006, 0.0006)} />
|
||||
<Scanline blendFunction={BlendFunction.OVERLAY} density={1.5} opacity={0.03} />
|
||||
</EffectComposer>
|
||||
</Canvas>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* Preload all models */
|
||||
useGLTF.preload('/assets/models3d/bmu-assembly.glb');
|
||||
useGLTF.preload('/assets/models3d/resistor_0603.glb');
|
||||
useGLTF.preload('/assets/models3d/capacitor_0805.glb');
|
||||
useGLTF.preload('/assets/models3d/inductor_0805.glb');
|
||||
useGLTF.preload('/assets/models3d/led_0603.glb');
|
||||
useGLTF.preload('/assets/models3d/soic8.glb');
|
||||
useGLTF.preload('/assets/models3d/qfp32.glb');
|
||||
@@ -1,203 +0,0 @@
|
||||
import { useRef, useEffect, useState, useCallback } from 'react';
|
||||
import * as THREE from 'three';
|
||||
|
||||
/* ===================================================================
|
||||
WEBGL CARDS — Scroll-triggered tile animations + media lightbox
|
||||
|
||||
Features:
|
||||
- Cards materialize with particle burst on scroll-in
|
||||
- Cards dissolve with particle scatter on scroll-out
|
||||
- Photos/videos appear in a front-view lightbox on click
|
||||
- Energy ring orbits around focused media
|
||||
=================================================================== */
|
||||
|
||||
/* ---------- Particle burst effect (CSS + JS, no Three.js needed) ---------- */
|
||||
function createParticleBurst(el: HTMLElement, color: string = '#5bd1d8') {
|
||||
const rect = el.getBoundingClientRect();
|
||||
const cx = rect.left + rect.width / 2;
|
||||
const cy = rect.top + rect.height / 2;
|
||||
const count = 12;
|
||||
|
||||
for (let i = 0; i < count; i++) {
|
||||
const particle = document.createElement('div');
|
||||
particle.className = 'webgl-particle-burst';
|
||||
const angle = (i / count) * Math.PI * 2;
|
||||
const dist = 40 + Math.random() * 60;
|
||||
const dx = Math.cos(angle) * dist;
|
||||
const dy = Math.sin(angle) * dist;
|
||||
const size = 2 + Math.random() * 4;
|
||||
|
||||
Object.assign(particle.style, {
|
||||
position: 'fixed',
|
||||
left: `${cx}px`,
|
||||
top: `${cy}px`,
|
||||
width: `${size}px`,
|
||||
height: `${size}px`,
|
||||
borderRadius: '50%',
|
||||
background: color,
|
||||
boxShadow: `0 0 ${size * 2}px ${color}`,
|
||||
pointerEvents: 'none',
|
||||
zIndex: '9999',
|
||||
transition: 'all 0.6s cubic-bezier(0.16, 1, 0.3, 1)',
|
||||
opacity: '1',
|
||||
});
|
||||
|
||||
document.body.appendChild(particle);
|
||||
|
||||
requestAnimationFrame(() => {
|
||||
particle.style.transform = `translate(${dx}px, ${dy}px) scale(0)`;
|
||||
particle.style.opacity = '0';
|
||||
});
|
||||
|
||||
setTimeout(() => particle.remove(), 700);
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- Scroll-triggered card wrapper ---------- */
|
||||
export function WebGLCard({ children, color = '#5bd1d8', delay = 0 }: {
|
||||
children: React.ReactNode;
|
||||
color?: string;
|
||||
delay?: number;
|
||||
}) {
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
const [visible, setVisible] = useState(false);
|
||||
const hasAnimated = useRef(false);
|
||||
|
||||
useEffect(() => {
|
||||
const el = ref.current;
|
||||
if (!el) return;
|
||||
|
||||
const observer = new IntersectionObserver(
|
||||
([entry]) => {
|
||||
if (entry.isIntersecting && !hasAnimated.current) {
|
||||
setTimeout(() => {
|
||||
setVisible(true);
|
||||
hasAnimated.current = true;
|
||||
createParticleBurst(el, color);
|
||||
}, delay);
|
||||
}
|
||||
},
|
||||
{ threshold: 0.2 }
|
||||
);
|
||||
|
||||
observer.observe(el);
|
||||
return () => observer.disconnect();
|
||||
}, [color, delay]);
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
className={`webgl-card ${visible ? 'webgl-card--visible' : ''}`}
|
||||
style={{ '--card-accent': color } as React.CSSProperties}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ---------- Media lightbox (photo/video front view) ---------- */
|
||||
export function MediaLightbox() {
|
||||
const [active, setActive] = useState<{ type: 'img' | 'video'; src: string; alt?: string } | null>(null);
|
||||
const overlayRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
// Listen for clicks on photos and videos
|
||||
const handler = (e: MouseEvent) => {
|
||||
const target = e.target as HTMLElement;
|
||||
|
||||
// Photo click
|
||||
if (target.matches('.photo-strip-img, .webgl-media-trigger img')) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
const img = target as HTMLImageElement;
|
||||
setActive({ type: 'img', src: img.src, alt: img.alt });
|
||||
createParticleBurst(target, '#5bd1d8');
|
||||
}
|
||||
|
||||
// Video click
|
||||
if (target.matches('.video-strip-clip, .webgl-media-trigger video')) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
const video = target as HTMLVideoElement;
|
||||
setActive({ type: 'video', src: video.src });
|
||||
createParticleBurst(target, '#f1c27a');
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('click', handler, true);
|
||||
return () => document.removeEventListener('click', handler, true);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!active) return;
|
||||
const onKey = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape') setActive(null);
|
||||
};
|
||||
window.addEventListener('keydown', onKey);
|
||||
return () => window.removeEventListener('keydown', onKey);
|
||||
}, [active]);
|
||||
|
||||
if (!active) return null;
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={overlayRef}
|
||||
className="media-lightbox"
|
||||
onClick={(e) => { if (e.target === overlayRef.current) setActive(null); }}
|
||||
>
|
||||
{/* Energy ring animation */}
|
||||
<div className="lightbox-ring lightbox-ring--1" />
|
||||
<div className="lightbox-ring lightbox-ring--2" />
|
||||
<div className="lightbox-ring lightbox-ring--3" />
|
||||
|
||||
<div className="lightbox-content">
|
||||
{active.type === 'img' ? (
|
||||
<img src={active.src} alt={active.alt || ''} className="lightbox-media" />
|
||||
) : (
|
||||
<video src={active.src} controls autoPlay muted loop className="lightbox-media" />
|
||||
)}
|
||||
<button className="lightbox-close" onClick={() => setActive(null)} aria-label="Fermer">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<line x1="18" y1="6" x2="6" y2="18" />
|
||||
<line x1="6" y1="6" x2="18" y2="18" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ---------- Scroll-triggered section with atomic reveal ---------- */
|
||||
export function WebGLSection({ children, id, className = '' }: {
|
||||
children: React.ReactNode;
|
||||
id?: string;
|
||||
className?: string;
|
||||
}) {
|
||||
const ref = useRef<HTMLElement>(null);
|
||||
const [visible, setVisible] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const el = ref.current;
|
||||
if (!el) return;
|
||||
|
||||
const observer = new IntersectionObserver(
|
||||
([entry]) => {
|
||||
setVisible(entry.isIntersecting);
|
||||
},
|
||||
{ threshold: 0.1 }
|
||||
);
|
||||
|
||||
observer.observe(el);
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<section
|
||||
ref={ref}
|
||||
id={id}
|
||||
className={`webgl-section ${visible ? 'webgl-section--visible' : ''} ${className}`}
|
||||
>
|
||||
{children}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
+36
-235
@@ -1,6 +1,5 @@
|
||||
---
|
||||
import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
import AtomGlitch from '@/components/AtomGlitch';
|
||||
import '@/styles/global.css';
|
||||
import '@/styles/home-workbench.css';
|
||||
import SiteHeader from '@/components/SiteHeader.astro';
|
||||
@@ -30,114 +29,72 @@ const title = isLaunched
|
||||
? "Systèmes électroniques spécifiques | L'électron rare"
|
||||
: "L'Electron Rare — Bientôt";
|
||||
const description = isLaunched
|
||||
? "L'Électron Rare conçoit, met au point et fiabilise des systèmes électroniques spécifiques en électronique, automatisme, énergie et stockage."
|
||||
? "Conception, mise au point et fiabilisation de systèmes électroniques spécifiques."
|
||||
: "L'Electron Rare arrive. Systèmes électroniques spécifiques, formations, prototypage.";
|
||||
---
|
||||
|
||||
<BaseLayout title={title} description={description}>
|
||||
{isLaunched ? (
|
||||
<!-- ============ SITE COMPLET (après 1er mai) ============ -->
|
||||
<Fragment>
|
||||
<SiteHeader brandHref="#top" items={headerItems} quickHref="#contact" />
|
||||
|
||||
<main id="main-content" class="site-shell studio-structure pb-12 pt-3">
|
||||
<!-- Hero avec WebGL en background -->
|
||||
<section class="structure-grid structure-grid--hero hero-webgl-wrapper" data-reveal>
|
||||
<div class="hero-webgl-bg">
|
||||
<AtomGlitch client:visible />
|
||||
</div>
|
||||
<div class="structure-cell structure-cell--hero hero-webgl-content">
|
||||
<section class="structure-grid structure-grid--hero" data-reveal>
|
||||
<div class="structure-cell structure-cell--hero">
|
||||
<Hero />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="structure-grid structure-grid--systems" data-reveal>
|
||||
<div class="structure-cell structure-cell--about">
|
||||
<About />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="structure-grid structure-grid--cases" data-reveal>
|
||||
<div class="structure-cell structure-cell--cases">
|
||||
<CaseStudies />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="photo-strip" aria-label="Photos de terrain" data-reveal>
|
||||
<div class="photo-strip-track">
|
||||
<img src={withSiteBase('/assets/photos/pcb-teensy-led-kxkm.webp')} alt="PCB custom Teensy LED — projet spectacle vivant KXKM" loading="lazy" decoding="async" width="280" height="190" class="photo-strip-img" />
|
||||
<img src={withSiteBase('/assets/photos/platine-automate-cablage.webp')} alt="Câblage automate industriel — intervention terrain" loading="lazy" decoding="async" width="280" height="190" class="photo-strip-img" />
|
||||
<img src={withSiteBase('/assets/photos/bench-bms-batteries-xt60.webp')} alt="Banc de test BMS batteries — prototypage" loading="lazy" decoding="async" width="280" height="190" class="photo-strip-img" />
|
||||
<img src={withSiteBase('/assets/photos/automate-siemens-s7.webp')} alt="Automate Siemens S7 — diagnostic industriel" loading="lazy" decoding="async" width="280" height="190" class="photo-strip-img" />
|
||||
<img src={withSiteBase('/assets/photos/soudure-pcb-composants.webp')} alt="Soudure PCB — formation et prototypage" loading="lazy" decoding="async" width="280" height="190" class="photo-strip-img" />
|
||||
<img src={withSiteBase('/assets/photos/oscilloscope-philips-vintage.webp')} alt="Instrumentation et mesure — oscilloscope" loading="lazy" decoding="async" width="280" height="190" class="photo-strip-img" />
|
||||
<img src={withSiteBase('/assets/photos/rack-cbtc-lon-connecteurs.webp')} alt="Rack CBTC transport — connectique industrielle" loading="lazy" decoding="async" width="280" height="190" class="photo-strip-img" />
|
||||
<img src={withSiteBase('/assets/photos/pcb-embarquee-boitier-test.webp')} alt="Carte embarquée en test — validation prototype" loading="lazy" decoding="async" width="280" height="190" class="photo-strip-img" />
|
||||
<img src={withSiteBase('/assets/photos/armoire-automate-schneider.webp')} alt="Armoire Schneider — automatisme industriel" loading="lazy" decoding="async" width="280" height="190" class="photo-strip-img" />
|
||||
<img src={withSiteBase('/assets/photos/outillage-atelier-pro.webp')} alt="Atelier professionnel — outillage organisé" loading="lazy" decoding="async" width="280" height="190" class="photo-strip-img" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="video-strip" aria-label="Vidéos de terrain" data-reveal>
|
||||
<div class="video-strip-track">
|
||||
<video src={withSiteBase('/assets/videos/video-bench-electronique.mp4')} poster={withSiteBase('/assets/videos/video-bench-electronique-poster.webp')} controls muted loop playsinline preload="none" width="320" height="180" class="video-strip-clip" aria-label="Bench électronique en action"></video>
|
||||
<video src={withSiteBase('/assets/videos/video-test-prototype.mp4')} poster={withSiteBase('/assets/videos/video-test-prototype-poster.webp')} controls muted loop playsinline preload="none" width="320" height="180" class="video-strip-clip" aria-label="Test de prototype"></video>
|
||||
<video src={withSiteBase('/assets/videos/video-instrumentation.mp4')} poster={withSiteBase('/assets/videos/video-instrumentation-poster.webp')} controls muted loop playsinline preload="none" width="320" height="180" class="video-strip-clip" aria-label="Instrumentation et mesure"></video>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="structure-grid structure-grid--sprints" data-reveal>
|
||||
<div class="structure-cell structure-cell--sprints">
|
||||
<GraphicSprints />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="structure-grid structure-grid--faq" data-reveal>
|
||||
<div class="structure-cell structure-cell--faq">
|
||||
<Faq />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="structure-grid structure-grid--conversion" data-reveal>
|
||||
<div class="structure-cell structure-cell--contact">
|
||||
<Contact />
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="site-footer border-t border-[var(--line)] py-6 text-sm text-[var(--text-muted)]">
|
||||
<div class="site-shell footer-grid footer-grid--enhanced">
|
||||
<div class="footer-col footer-col--brand">
|
||||
<p class="m-0 footer-title">L'électron rare</p>
|
||||
<div class="footer-brand-meta">
|
||||
<p class="mb-0 footer-copy">© 2026 Clément Saillant - systèmes électroniques spécifiques, conseil, formation — industrie, culture et projets multi-techniques.</p>
|
||||
<p class="mb-0 footer-copy footer-copy--right">Contact direct : LinkedIn DM ou contact@lelectronrare.fr</p>
|
||||
<p class="mb-0 footer-copy">© 2026 Clément Saillant</p>
|
||||
</div>
|
||||
</div>
|
||||
<nav aria-label="Ressources studio" class="footer-links footer-links--single-rail">
|
||||
<nav aria-label="Ressources" class="footer-links footer-links--single-rail">
|
||||
<a href="#a-propos" class="footer-link">Approche</a>
|
||||
<a href="#graphic-sprints-title" class="footer-link">Missions</a>
|
||||
<a href={formationHref} class="footer-link">Formation</a>
|
||||
<a href="#faq" class="footer-link">FAQ</a>
|
||||
<a href="#contact" class="footer-link">Contact</a>
|
||||
<a href="https://fr.linkedin.com/in/electron-rare" target="_blank" rel="noopener noreferrer me" {...trackAttrs(TRACK_EVENTS.outboundLinkedinContact, 'linkedin.com')} class="footer-link">LinkedIn</a>
|
||||
<a href="https://github.com/electron-rare/" target="_blank" rel="noopener noreferrer me" {...trackAttrs(TRACK_EVENTS.outboundGithubContact, 'github.com')} class="footer-link">GitHub</a>
|
||||
<a href="https://blog.saillant.cc" target="_blank" rel="noopener noreferrer me" class="footer-link">Blog technique</a>
|
||||
<a href={mentionsHref} class="footer-link">Mentions légales</a>
|
||||
</nav>
|
||||
</div>
|
||||
</footer>
|
||||
</Fragment>
|
||||
) : (
|
||||
<!-- ============ COUNTDOWN (avant 1er mai) ============ -->
|
||||
<!-- COUNTDOWN — WebGL placeholder -->
|
||||
<main class="countdown-page">
|
||||
<div class="webgl-bg">
|
||||
<AtomGlitch client:load />
|
||||
</div>
|
||||
<!-- WebGL goes here -->
|
||||
<div class="webgl-bg" id="webgl-countdown"></div>
|
||||
|
||||
<div class="overlay">
|
||||
<div class="top-bar">
|
||||
<div class="logo-sprite" id="logo-sprite" aria-label="L'Electron Rare — logo animé"></div>
|
||||
<div class="logo-sprite" id="logo-sprite" aria-label="L'Electron Rare"></div>
|
||||
<span class="brand-mark">L'ELECTRON RARE</span>
|
||||
</div>
|
||||
|
||||
@@ -153,11 +110,10 @@ const description = isLaunched
|
||||
<span class="bottom-right">mai 2026</span>
|
||||
</div>
|
||||
|
||||
<!-- Cartouche footer -->
|
||||
<div class="cartouche">
|
||||
<p class="cartouche-title">L'électron rare</p>
|
||||
<p class="cartouche-copy">© 2026 Clément Saillant — systèmes électroniques spécifiques, conseil, formation — industrie, culture et projets multi-techniques.</p>
|
||||
<p class="cartouche-contact">Contact direct : <a href="https://fr.linkedin.com/in/electron-rare" target="_blank" rel="noopener">LinkedIn DM</a> ou <a href="mailto:contact@lelectronrare.fr">contact@lelectronrare.fr</a></p>
|
||||
<p class="cartouche-contact">Contact : <a href="https://fr.linkedin.com/in/electron-rare" target="_blank" rel="noopener">LinkedIn</a> · <a href="mailto:contact@lelectronrare.fr">contact@lelectronrare.fr</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
@@ -186,8 +142,9 @@ const description = isLaunched
|
||||
let msgIndex = Math.floor(Math.random() * messages.length);
|
||||
|
||||
function rotateMessage() {
|
||||
const bubble = document.getElementById('tagline-bubble')!;
|
||||
const el = document.getElementById('tagline')!;
|
||||
const bubble = document.getElementById('tagline-bubble');
|
||||
const el = document.getElementById('tagline');
|
||||
if (!bubble || !el) return;
|
||||
bubble.style.opacity = '0';
|
||||
bubble.style.transform = 'translateY(4px)';
|
||||
setTimeout(() => {
|
||||
@@ -198,8 +155,8 @@ const description = isLaunched
|
||||
}, 400);
|
||||
}
|
||||
|
||||
const sprite = document.getElementById('logo-sprite')!;
|
||||
sprite.style.backgroundImage = `url(/assets/brand/logo-mark.png)`;
|
||||
const sprite = document.getElementById('logo-sprite');
|
||||
if (sprite) sprite.style.backgroundImage = 'url(/assets/brand/logo-mark.png)';
|
||||
|
||||
rotateMessage();
|
||||
setInterval(rotateMessage, 8000);
|
||||
@@ -207,181 +164,25 @@ const description = isLaunched
|
||||
)}
|
||||
|
||||
<style>
|
||||
/* ============ COUNTDOWN STYLES ============ */
|
||||
.countdown-page {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
overflow: hidden;
|
||||
background: #000;
|
||||
font-family: 'Manrope', -apple-system, 'SF Pro Display', 'Helvetica Neue', sans-serif;
|
||||
color: #fff;
|
||||
}
|
||||
.webgl-bg {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
pointer-events: auto;
|
||||
}
|
||||
.overlay {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: clamp(20px, 3vw, 40px) clamp(24px, 5vw, 60px);
|
||||
pointer-events: none;
|
||||
}
|
||||
.overlay > * { pointer-events: none; }
|
||||
.overlay a, .overlay .tagline-area { pointer-events: auto; }
|
||||
.top-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
animation: fade-in 0.8s ease both;
|
||||
}
|
||||
.logo-sprite {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
filter: brightness(1.2) drop-shadow(0 0 12px rgba(91, 209, 216, 0.4));
|
||||
}
|
||||
.brand-mark {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.25em;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.center-spacer {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
padding-bottom: clamp(20px, 3vw, 40px);
|
||||
}
|
||||
.tagline-area {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-height: 36px;
|
||||
padding: 10px 20px;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
border-radius: 8px;
|
||||
transition: opacity 0.4s ease, transform 0.4s ease;
|
||||
animation: fade-in 0.8s 1.1s ease both;
|
||||
}
|
||||
.tagline-cursor {
|
||||
font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
|
||||
font-size: 14px;
|
||||
color: #5bd1d8;
|
||||
animation: blink 1s step-end infinite;
|
||||
}
|
||||
@keyframes blink { 50% { opacity: 0; } }
|
||||
.tagline-text {
|
||||
font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
|
||||
font-size: clamp(11px, 1.3vw, 14px);
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
.bottom-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
animation: fade-in 0.8s 1.2s ease both;
|
||||
}
|
||||
.bottom-left, .bottom-right {
|
||||
font-size: clamp(10px, 1.1vw, 12px);
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.08em;
|
||||
color: rgba(255, 255, 255, 0.15);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
@keyframes fade-in {
|
||||
from { opacity: 0; transform: translateY(12px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
/* ============ CARTOUCHE FOOTER ============ */
|
||||
.cartouche {
|
||||
position: fixed;
|
||||
bottom: clamp(16px, 2vw, 24px);
|
||||
right: clamp(16px, 2vw, 24px);
|
||||
max-width: 320px;
|
||||
padding: 14px 18px;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
border-radius: 12px;
|
||||
pointer-events: auto;
|
||||
animation: fade-in 0.8s 1.5s ease both;
|
||||
}
|
||||
.cartouche-title {
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
margin: 0 0 6px;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
.cartouche-copy {
|
||||
font-size: 9px;
|
||||
color: rgba(255, 255, 255, 0.25);
|
||||
margin: 0 0 4px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.cartouche-contact {
|
||||
font-size: 9px;
|
||||
color: rgba(255, 255, 255, 0.25);
|
||||
margin: 0;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.cartouche-contact a {
|
||||
color: #5bd1d8;
|
||||
text-decoration: none;
|
||||
}
|
||||
.cartouche-contact a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.cartouche {
|
||||
position: relative;
|
||||
bottom: auto;
|
||||
right: auto;
|
||||
max-width: 100%;
|
||||
margin-top: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============ HERO WEBGL (site complet) ============ */
|
||||
.hero-webgl-wrapper {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.hero-webgl-bg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
opacity: 0.25;
|
||||
pointer-events: none;
|
||||
}
|
||||
.hero-webgl-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.bottom-bar { flex-direction: column; align-items: center; gap: 4px; }
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.logo-sprite, .top-bar, .tagline-area, .bottom-bar { animation: none; opacity: 1; }
|
||||
.webgl-bg, .hero-webgl-bg { display: none; }
|
||||
}
|
||||
.countdown-page { position:relative; min-height:100vh; overflow:hidden; background:#000; color:#fff; font-family:'Manrope',-apple-system,sans-serif; }
|
||||
.webgl-bg { position:fixed; inset:0; z-index:0; width:100vw; height:100vh; pointer-events:auto; }
|
||||
.overlay { position:relative; z-index:10; min-height:100vh; display:flex; flex-direction:column; justify-content:space-between; padding:clamp(20px,3vw,40px) clamp(24px,5vw,60px); pointer-events:none; }
|
||||
.overlay > * { pointer-events:none; }
|
||||
.overlay a { pointer-events:auto; }
|
||||
.top-bar { display:flex; align-items:center; gap:16px; }
|
||||
.logo-sprite { width:48px; height:48px; background-size:contain; background-repeat:no-repeat; filter:brightness(1.2) drop-shadow(0 0 12px rgba(91,209,216,0.4)); }
|
||||
.brand-mark { font-size:11px; font-weight:600; letter-spacing:0.25em; color:rgba(255,255,255,0.5); text-transform:uppercase; }
|
||||
.center-spacer { flex:1; display:flex; align-items:center; justify-content:center; }
|
||||
.tagline-area { display:flex; align-items:center; gap:8px; padding:10px 20px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); border-radius:8px; transition:opacity 0.4s ease, transform 0.4s ease; pointer-events:auto; }
|
||||
.tagline-cursor { font-family:monospace; font-size:14px; color:#5bd1d8; animation:blink 1s step-end infinite; }
|
||||
@keyframes blink { 50% { opacity:0; } }
|
||||
.tagline-text { font-family:monospace; font-size:clamp(11px,1.3vw,14px); color:rgba(255,255,255,0.4); }
|
||||
.bottom-bar { display:flex; justify-content:space-between; align-items:flex-end; }
|
||||
.bottom-left, .bottom-right { font-size:clamp(10px,1.1vw,12px); color:rgba(255,255,255,0.15); letter-spacing:0.08em; text-transform:uppercase; }
|
||||
.cartouche { position:fixed; bottom:clamp(16px,2vw,24px); right:clamp(16px,2vw,24px); max-width:320px; padding:14px 18px; background:rgba(0,0,0,0.5); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,0.06); border-radius:12px; pointer-events:auto; }
|
||||
.cartouche-title { font-size:13px; font-weight:700; color:rgba(255,255,255,0.6); margin:0 0 6px; }
|
||||
.cartouche-copy { font-size:9px; color:rgba(255,255,255,0.25); margin:0 0 4px; line-height:1.4; }
|
||||
.cartouche-contact { font-size:9px; color:rgba(255,255,255,0.25); margin:0; }
|
||||
.cartouche-contact a { color:#5bd1d8; text-decoration:none; }
|
||||
@media (max-width:640px) { .bottom-bar{flex-direction:column;align-items:center;gap:4px;} .cartouche{position:relative;bottom:auto;right:auto;max-width:100%;margin-top:12px;text-align:center;} }
|
||||
</style>
|
||||
|
||||
+75
-757
@@ -1,12 +1,8 @@
|
||||
---
|
||||
import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
import WebGLBackground from '@/components/WebGLBackground';
|
||||
import { MediaLightbox } from '@/components/WebGLCards';
|
||||
import '@/styles/global.css';
|
||||
import '@/styles/home-workbench.css';
|
||||
import '@/styles/webgl-cards.css';
|
||||
import SiteHeader from '@/components/SiteHeader.astro';
|
||||
// Hero removed — PCB 3D is the hero
|
||||
import { About } from '@/components/sections/About';
|
||||
import { CaseStudies } from '@/components/sections/CaseStudies';
|
||||
import { GraphicSprints } from '@/components/sections/GraphicSprints';
|
||||
@@ -27,7 +23,7 @@ const headerItems = [
|
||||
---
|
||||
|
||||
<BaseLayout>
|
||||
<!-- Loading screen — shows BMU photo while WebGL loads -->
|
||||
<!-- Loading screen — BMU photo while WebGL loads -->
|
||||
<div class="loading-screen" id="loading-screen">
|
||||
<div class="loading-content">
|
||||
<img src="/assets/photos/bmu-assembly.jpg" alt="BMU v2 Assembly" class="loading-bmu-img" />
|
||||
@@ -35,124 +31,67 @@ const headerItems = [
|
||||
<div class="loading-bar">
|
||||
<div class="loading-bar-fill" id="loading-bar-fill"></div>
|
||||
</div>
|
||||
<p class="loading-status" id="loading-status">Chargement du PCB 3D...</p>
|
||||
<p class="loading-status" id="loading-status">Chargement...</p>
|
||||
<a href="/static/" class="loading-static-btn">Version sans 3D →</a>
|
||||
<p class="loading-tagline">électronique · automatisme · énergie</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- WebGL background layer — fixed, subtle, always visible -->
|
||||
<WebGLBackground client:load />
|
||||
<!-- Media lightbox (click photos/videos to view full) -->
|
||||
<MediaLightbox client:load />
|
||||
<!-- WebGL background placeholder — NEW WEBGL GOES HERE -->
|
||||
<div id="webgl-container"></div>
|
||||
|
||||
<SiteHeader brandHref="#top" items={headerItems} quickHref="#contact" />
|
||||
|
||||
<main id="main-content" class="dark-site">
|
||||
<!-- No HTML hero — the PCB 3D IS the hero. First spacer = overview of the board -->
|
||||
<div class="pcb-spacer pcb-spacer--hero" id="top" aria-hidden="true"></div>
|
||||
|
||||
<!-- ABOUT -->
|
||||
<section class="section-dark webgl-section" id="a-propos">
|
||||
<div class="section-content webgl-card" style="--card-accent: #5bd1d8">
|
||||
<section class="section-dark" id="a-propos">
|
||||
<div class="section-content">
|
||||
<About />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="pcb-spacer" aria-hidden="true"></div>
|
||||
|
||||
<!-- CASE STUDIES -->
|
||||
<section class="section-dark webgl-section">
|
||||
<div class="section-content webgl-card" style="--card-accent: #f1c27a">
|
||||
<section class="section-dark">
|
||||
<div class="section-content">
|
||||
<CaseStudies />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="pcb-spacer" aria-hidden="true"></div>
|
||||
|
||||
<!-- PHOTO CAROUSEL (atomic orbit) -->
|
||||
<section class="section-dark webgl-section atomic-carousel" aria-label="Photos de terrain">
|
||||
<div class="section-content">
|
||||
<h2 style="color: rgba(255,255,255,0.4); font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; text-align: center; margin-bottom: 8px;">Terrain</h2>
|
||||
<section class="photo-strip section-dark" aria-label="Photos de terrain">
|
||||
<div class="photo-strip-track">
|
||||
<img src={withSiteBase('/assets/photos/pcb-teensy-led-kxkm.webp')} alt="PCB custom Teensy LED" loading="lazy" decoding="async" width="280" height="190" class="photo-strip-img" />
|
||||
<img src={withSiteBase('/assets/photos/platine-automate-cablage.webp')} alt="Câblage automate industriel" loading="lazy" decoding="async" width="280" height="190" class="photo-strip-img" />
|
||||
<img src={withSiteBase('/assets/photos/bench-bms-batteries-xt60.webp')} alt="Banc de test BMS batteries" loading="lazy" decoding="async" width="280" height="190" class="photo-strip-img" />
|
||||
<img src={withSiteBase('/assets/photos/automate-siemens-s7.webp')} alt="Automate Siemens S7" loading="lazy" decoding="async" width="280" height="190" class="photo-strip-img" />
|
||||
<img src={withSiteBase('/assets/photos/soudure-pcb-composants.webp')} alt="Soudure PCB" loading="lazy" decoding="async" width="280" height="190" class="photo-strip-img" />
|
||||
<img src={withSiteBase('/assets/photos/oscilloscope-philips-vintage.webp')} alt="Oscilloscope" loading="lazy" decoding="async" width="280" height="190" class="photo-strip-img" />
|
||||
</div>
|
||||
<button class="atomic-carousel-nav atomic-carousel-nav--prev" data-carousel="photos" data-dir="-1" aria-label="Precedent">‹</button>
|
||||
<div class="atomic-carousel-orbit" id="photo-orbit">
|
||||
<div class="atomic-carousel-item" style="width: 300px; height: 200px;">
|
||||
<img src={withSiteBase('/assets/photos/pcb-teensy-led-kxkm.webp')} alt="PCB custom Teensy LED — projet spectacle vivant KXKM" loading="lazy" decoding="async" class="photo-strip-img" />
|
||||
</div>
|
||||
<div class="atomic-carousel-item" style="width: 300px; height: 200px;">
|
||||
<img src={withSiteBase('/assets/photos/platine-automate-cablage.webp')} alt="Câblage automate industriel" loading="lazy" decoding="async" class="photo-strip-img" />
|
||||
</div>
|
||||
<div class="atomic-carousel-item" style="width: 300px; height: 200px;">
|
||||
<img src={withSiteBase('/assets/photos/bench-bms-batteries-xt60.webp')} alt="Banc de test BMS batteries" loading="lazy" decoding="async" class="photo-strip-img" />
|
||||
</div>
|
||||
<div class="atomic-carousel-item" style="width: 300px; height: 200px;">
|
||||
<img src={withSiteBase('/assets/photos/automate-siemens-s7.webp')} alt="Automate Siemens S7" loading="lazy" decoding="async" class="photo-strip-img" />
|
||||
</div>
|
||||
<div class="atomic-carousel-item" style="width: 300px; height: 200px;">
|
||||
<img src={withSiteBase('/assets/photos/soudure-pcb-composants.webp')} alt="Soudure PCB composants" loading="lazy" decoding="async" class="photo-strip-img" />
|
||||
</div>
|
||||
<div class="atomic-carousel-item" style="width: 300px; height: 200px;">
|
||||
<img src={withSiteBase('/assets/photos/oscilloscope-philips-vintage.webp')} alt="Oscilloscope vintage" loading="lazy" decoding="async" class="photo-strip-img" />
|
||||
</div>
|
||||
<div class="atomic-carousel-item" style="width: 300px; height: 200px;">
|
||||
<img src={withSiteBase('/assets/photos/rack-cbtc-lon-connecteurs.webp')} alt="Rack CBTC connectique" loading="lazy" decoding="async" class="photo-strip-img" />
|
||||
</div>
|
||||
<div class="atomic-carousel-item" style="width: 300px; height: 200px;">
|
||||
<img src={withSiteBase('/assets/photos/pcb-embarquee-boitier-test.webp')} alt="Carte embarquée en test" loading="lazy" decoding="async" class="photo-strip-img" />
|
||||
</div>
|
||||
<div class="atomic-carousel-item" style="width: 300px; height: 200px;">
|
||||
<img src={withSiteBase('/assets/photos/armoire-automate-schneider.webp')} alt="Armoire Schneider" loading="lazy" decoding="async" class="photo-strip-img" />
|
||||
</div>
|
||||
<div class="atomic-carousel-item" style="width: 300px; height: 200px;">
|
||||
<img src={withSiteBase('/assets/photos/outillage-atelier-pro.webp')} alt="Atelier professionnel" loading="lazy" decoding="async" class="photo-strip-img" />
|
||||
</div>
|
||||
</div>
|
||||
<button class="atomic-carousel-nav atomic-carousel-nav--next" data-carousel="photos" data-dir="1" aria-label="Suivant">›</button>
|
||||
<div class="atomic-carousel-track" id="photo-track"></div>
|
||||
</section>
|
||||
|
||||
<!-- VIDEO CAROUSEL (atomic orbit) -->
|
||||
<section class="section-dark webgl-section atomic-carousel" aria-label="Vidéos de terrain">
|
||||
<button class="atomic-carousel-nav atomic-carousel-nav--prev" data-carousel="videos" data-dir="-1" aria-label="Precedent">‹</button>
|
||||
<div class="atomic-carousel-orbit" id="video-orbit">
|
||||
<div class="atomic-carousel-item" style="width: 360px; height: 200px;">
|
||||
<video src={withSiteBase('/assets/videos/video-bench-electronique.mp4')} poster={withSiteBase('/assets/videos/video-bench-electronique-poster.webp')} muted loop playsinline preload="none" class="video-strip-clip" aria-label="Bench électronique"></video>
|
||||
</div>
|
||||
<div class="atomic-carousel-item" style="width: 360px; height: 200px;">
|
||||
<video src={withSiteBase('/assets/videos/video-test-prototype.mp4')} poster={withSiteBase('/assets/videos/video-test-prototype-poster.webp')} muted loop playsinline preload="none" class="video-strip-clip" aria-label="Test prototype"></video>
|
||||
</div>
|
||||
<div class="atomic-carousel-item" style="width: 360px; height: 200px;">
|
||||
<video src={withSiteBase('/assets/videos/video-instrumentation.mp4')} poster={withSiteBase('/assets/videos/video-instrumentation-poster.webp')} muted loop playsinline preload="none" class="video-strip-clip" aria-label="Instrumentation"></video>
|
||||
</div>
|
||||
</div>
|
||||
<button class="atomic-carousel-nav atomic-carousel-nav--next" data-carousel="videos" data-dir="1" aria-label="Suivant">›</button>
|
||||
<div class="atomic-carousel-track" id="video-track"></div>
|
||||
</section>
|
||||
|
||||
<div class="pcb-spacer" aria-hidden="true"></div>
|
||||
|
||||
<!-- SPRINTS -->
|
||||
<section class="section-dark webgl-section" id="graphic-sprints-title">
|
||||
<div class="section-content webgl-card" style="--card-accent: #b6d18f">
|
||||
<section class="section-dark" id="graphic-sprints-title">
|
||||
<div class="section-content">
|
||||
<GraphicSprints />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="pcb-spacer" aria-hidden="true"></div>
|
||||
|
||||
<!-- FAQ -->
|
||||
<section class="section-dark webgl-section" id="faq">
|
||||
<div class="section-content webgl-card" style="--card-accent: #5bd1d8">
|
||||
<section class="section-dark" id="faq">
|
||||
<div class="section-content">
|
||||
<Faq />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CONTACT — hidden by default, appears as 3D tile on click or end of scroll -->
|
||||
<section class="section-dark section-contact contact-3d-popup" id="contact">
|
||||
<div class="contact-3d-backdrop" id="contact-backdrop"></div>
|
||||
<div class="section-content contact-3d-tile" id="contact-tile">
|
||||
<button class="contact-3d-close" id="contact-close" aria-label="Fermer">✕</button>
|
||||
<div class="pcb-spacer" aria-hidden="true"></div>
|
||||
|
||||
<section class="section-dark" id="contact">
|
||||
<div class="section-content">
|
||||
<Contact />
|
||||
</div>
|
||||
</section>
|
||||
@@ -163,697 +102,76 @@ const headerItems = [
|
||||
<div class="footer-col footer-col--brand">
|
||||
<p class="m-0 footer-title">L'électron rare</p>
|
||||
<div class="footer-brand-meta">
|
||||
<p class="mb-0 footer-copy">© 2026 Clément Saillant - systèmes électroniques spécifiques, conseil, formation — industrie, culture et projets multi-techniques.</p>
|
||||
<p class="mb-0 footer-copy footer-copy--right">Contact direct : LinkedIn DM ou contact@lelectronrare.fr</p>
|
||||
<p class="mb-0 footer-copy">© 2026 Clément Saillant — systèmes électroniques spécifiques, conseil, formation.</p>
|
||||
<p class="mb-0 footer-copy">Contact : <a href="mailto:contact@lelectronrare.fr">contact@lelectronrare.fr</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<nav aria-label="Ressources studio" class="footer-links footer-links--single-rail">
|
||||
<nav aria-label="Ressources" class="footer-links footer-links--single-rail">
|
||||
<a href="#a-propos" class="footer-link">Approche</a>
|
||||
<a href="#graphic-sprints-title" class="footer-link">Missions</a>
|
||||
<a href={formationHref} class="footer-link">Formation</a>
|
||||
<a href="#faq" class="footer-link">FAQ</a>
|
||||
<a href="#contact" class="footer-link">Contact</a>
|
||||
<a href="https://fr.linkedin.com/in/electron-rare" target="_blank" rel="noopener noreferrer me" {...trackAttrs(TRACK_EVENTS.outboundLinkedinContact, 'linkedin.com')} class="footer-link">LinkedIn</a>
|
||||
<a href="https://github.com/electron-rare/" target="_blank" rel="noopener noreferrer me" {...trackAttrs(TRACK_EVENTS.outboundGithubContact, 'github.com')} class="footer-link">GitHub</a>
|
||||
<a href="https://blog.saillant.cc" target="_blank" rel="noopener noreferrer me" class="footer-link">Blog technique</a>
|
||||
<a href="https://fr.linkedin.com/in/electron-rare" target="_blank" rel="noopener" class="footer-link">LinkedIn</a>
|
||||
<a href="https://github.com/electron-rare/" target="_blank" rel="noopener" class="footer-link">GitHub</a>
|
||||
<a href={mentionsHref} class="footer-link">Mentions légales</a>
|
||||
</nav>
|
||||
</div>
|
||||
</footer>
|
||||
</BaseLayout>
|
||||
|
||||
<style>
|
||||
/* ============ DARK TECH THEME ============ */
|
||||
.dark-site {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
background: transparent;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.section-dark {
|
||||
position: relative;
|
||||
padding: clamp(40px, 8vw, 100px) 0;
|
||||
}
|
||||
|
||||
.section-hero {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.section-content {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 clamp(20px, 4vw, 48px);
|
||||
}
|
||||
|
||||
/* Glass cards for content sections */
|
||||
.section-dark :global(.circuit-board-section),
|
||||
.section-dark :global(.about-card),
|
||||
.section-dark :global(.case-card),
|
||||
.section-dark :global(.sprint-card) {
|
||||
background: rgba(255, 255, 255, 0.03) !important;
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.06) !important;
|
||||
color: #e0e0e0 !important;
|
||||
}
|
||||
|
||||
/* Text overrides for dark */
|
||||
.section-dark :global(h1),
|
||||
.section-dark :global(h2),
|
||||
.section-dark :global(h3),
|
||||
.section-dark :global(.section-title),
|
||||
.section-dark :global(.hero-title-word) {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
.section-dark :global(p),
|
||||
.section-dark :global(li),
|
||||
.section-dark :global(.about-bio),
|
||||
.section-dark :global(.case-text),
|
||||
.section-dark :global(.sprint-deliverables) {
|
||||
color: rgba(255, 255, 255, 0.7) !important;
|
||||
}
|
||||
|
||||
.section-dark :global(a) {
|
||||
color: #5bd1d8 !important;
|
||||
}
|
||||
|
||||
.section-dark :global(.hero-slogan-char) {
|
||||
color: rgba(91, 209, 216, 0.8) !important;
|
||||
}
|
||||
|
||||
/* Photo strip dark */
|
||||
.section-dark.photo-strip {
|
||||
padding: clamp(20px, 4vw, 40px) 0;
|
||||
}
|
||||
.section-dark :global(.photo-strip-img) {
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-radius: 12px;
|
||||
opacity: 0.85;
|
||||
transition: opacity 0.3s ease, transform 0.3s ease;
|
||||
}
|
||||
.section-dark :global(.photo-strip-img:hover) {
|
||||
opacity: 1;
|
||||
transform: scale(1.03);
|
||||
}
|
||||
|
||||
/* Video strip dark */
|
||||
.section-dark :global(.video-strip-clip) {
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
/* FAQ dark */
|
||||
.section-dark :global(.faq-question) {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
.section-dark :global(.faq-answer) {
|
||||
color: rgba(255, 255, 255, 0.6) !important;
|
||||
}
|
||||
.section-dark :global(details) {
|
||||
border-color: rgba(255, 255, 255, 0.08) !important;
|
||||
}
|
||||
|
||||
/* Chips/badges glow */
|
||||
.section-dark :global(.about-chip) {
|
||||
border-color: rgba(255, 255, 255, 0.1) !important;
|
||||
background: rgba(255, 255, 255, 0.04) !important;
|
||||
}
|
||||
|
||||
/* Sprint progress bars glow */
|
||||
.section-dark :global(.sprint-progress-fill) {
|
||||
box-shadow: 0 0 12px rgba(91, 209, 216, 0.4);
|
||||
}
|
||||
|
||||
/* CTA buttons */
|
||||
.section-dark :global(.btn-primary),
|
||||
.section-dark :global([data-track]) {
|
||||
background: rgba(91, 209, 216, 0.15) !important;
|
||||
border: 1px solid rgba(91, 209, 216, 0.3) !important;
|
||||
color: #5bd1d8 !important;
|
||||
}
|
||||
.section-dark :global(.btn-primary:hover) {
|
||||
background: rgba(91, 209, 216, 0.25) !important;
|
||||
}
|
||||
|
||||
/* Contact form dark (Minitel) */
|
||||
.section-dark :global(.minitel-body) {
|
||||
background: rgba(0, 0, 0, 0.6) !important;
|
||||
backdrop-filter: blur(16px);
|
||||
}
|
||||
.section-dark :global(.minitel-input),
|
||||
.section-dark :global(.minitel-textarea),
|
||||
.section-dark :global(.minitel-select) {
|
||||
background: rgba(255, 255, 255, 0.05) !important;
|
||||
border-color: rgba(255, 255, 255, 0.1) !important;
|
||||
color: #e0e0e0 !important;
|
||||
}
|
||||
|
||||
/* Hero background image — very subtle dark blend */
|
||||
.section-dark :global(.figma-lab-hero-grid) {
|
||||
position: relative;
|
||||
}
|
||||
.section-dark :global(.hero-panel-image) {
|
||||
opacity: 0.1 !important;
|
||||
mix-blend-mode: luminosity;
|
||||
}
|
||||
|
||||
/* ============ DARK FOOTER ============ */
|
||||
.dark-footer {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.06);
|
||||
padding: 24px 0;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
.dark-footer :global(.footer-title) {
|
||||
color: #ffffff;
|
||||
}
|
||||
.dark-footer :global(.footer-copy) {
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
.dark-footer :global(.footer-link) {
|
||||
color: rgba(255, 255, 255, 0.5) !important;
|
||||
}
|
||||
.dark-footer :global(.footer-link:hover) {
|
||||
color: #5bd1d8 !important;
|
||||
}
|
||||
|
||||
/* ============ LOADING SCREEN ============ */
|
||||
.loading-screen {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 9999;
|
||||
background: #000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: opacity 1s ease, visibility 1s ease;
|
||||
}
|
||||
.loading-screen.loading-done {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
.loading-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
gap: 20px;
|
||||
padding: 24px;
|
||||
animation: loading-fade-in 0.8s ease both;
|
||||
}
|
||||
@keyframes loading-fade-in {
|
||||
from { opacity: 0; transform: translateY(20px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
.loading-bmu-img {
|
||||
width: clamp(200px, 50vw, 400px);
|
||||
height: auto;
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgba(91, 209, 216, 0.15);
|
||||
box-shadow: 0 0 40px rgba(91, 209, 216, 0.08), 0 12px 40px rgba(0,0,0,0.5);
|
||||
animation: loading-float 4s ease-in-out infinite;
|
||||
}
|
||||
@keyframes loading-float {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-8px); }
|
||||
}
|
||||
.loading-title {
|
||||
font-family: 'Manrope', -apple-system, sans-serif;
|
||||
font-size: clamp(28px, 5vw, 48px);
|
||||
font-weight: 800;
|
||||
color: #ffffff;
|
||||
margin: 0;
|
||||
letter-spacing: -0.03em;
|
||||
text-shadow: 0 0 30px rgba(91, 209, 216, 0.2);
|
||||
}
|
||||
.loading-electric {
|
||||
color: #5bd1d8;
|
||||
text-shadow: 0 0 15px rgba(91, 209, 216, 0.6);
|
||||
}
|
||||
.loading-bar {
|
||||
width: clamp(200px, 40vw, 300px);
|
||||
height: 2px;
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
border-radius: 1px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.loading-bar-fill {
|
||||
height: 100%;
|
||||
width: 0%;
|
||||
background: linear-gradient(90deg, #5bd1d8, #f1c27a);
|
||||
border-radius: 1px;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
.loading-status {
|
||||
font-family: 'JetBrains Mono', 'SF Mono', monospace;
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.3);
|
||||
margin: 0;
|
||||
}
|
||||
.loading-static-btn {
|
||||
font-family: 'JetBrains Mono', 'SF Mono', monospace;
|
||||
font-size: 11px;
|
||||
color: rgba(91, 209, 216, 0.6);
|
||||
text-decoration: none;
|
||||
padding: 8px 16px;
|
||||
border: 1px solid rgba(91, 209, 216, 0.15);
|
||||
border-radius: 8px;
|
||||
transition: all 0.2s ease;
|
||||
pointer-events: auto;
|
||||
}
|
||||
.loading-static-btn:hover {
|
||||
color: #5bd1d8;
|
||||
border-color: rgba(91, 209, 216, 0.4);
|
||||
background: rgba(91, 209, 216, 0.05);
|
||||
}
|
||||
.loading-tagline {
|
||||
font-size: 11px;
|
||||
color: rgba(255, 255, 255, 0.12);
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ============ HERO BMU ============ */
|
||||
.hero-bmu {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
padding: clamp(60px, 10vw, 120px) clamp(20px, 4vw, 48px);
|
||||
gap: clamp(24px, 4vw, 48px);
|
||||
}
|
||||
|
||||
.hero-bmu-title {
|
||||
animation: hero-title-in 1.2s cubic-bezier(0.16, 1, 0.3, 1) both;
|
||||
}
|
||||
@keyframes hero-title-in {
|
||||
from { opacity: 0; transform: translateY(30px); filter: blur(8px); }
|
||||
to { opacity: 1; transform: translateY(0); filter: blur(0); }
|
||||
}
|
||||
|
||||
.hero-bmu-h1 {
|
||||
font-family: 'Manrope', -apple-system, sans-serif;
|
||||
font-size: clamp(36px, 7vw, 72px);
|
||||
font-weight: 800;
|
||||
color: #ffffff;
|
||||
margin: 0;
|
||||
letter-spacing: -0.03em;
|
||||
line-height: 1;
|
||||
text-shadow: 0 0 40px rgba(91, 209, 216, 0.2);
|
||||
}
|
||||
.hero-electric {
|
||||
color: #5bd1d8;
|
||||
text-shadow: 0 0 20px rgba(91, 209, 216, 0.6);
|
||||
}
|
||||
|
||||
.hero-bmu-sub {
|
||||
font-size: clamp(14px, 2vw, 18px);
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
margin: 12px 0 0;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.02em;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
/* Navigation zones — PCB component style */
|
||||
.hero-bmu-nav {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: clamp(10px, 2vw, 20px);
|
||||
max-width: 700px;
|
||||
animation: hero-nav-in 1s 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
|
||||
}
|
||||
@keyframes hero-nav-in {
|
||||
from { opacity: 0; transform: translateY(20px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.hero-bmu-zone {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: clamp(14px, 2vw, 24px) clamp(18px, 3vw, 32px);
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
border-radius: 16px;
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
min-width: 120px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero-bmu-zone::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: -1px;
|
||||
border-radius: 16px;
|
||||
padding: 1px;
|
||||
background: linear-gradient(135deg, var(--zone-color, #5bd1d8) 0%, transparent 50%);
|
||||
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
||||
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
||||
-webkit-mask-composite: xor;
|
||||
mask-composite: exclude;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.hero-bmu-zone:hover {
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
transform: translateY(-4px) scale(1.03);
|
||||
box-shadow: 0 0 24px rgba(91, 209, 216, 0.1), 0 8px 32px rgba(0, 0, 0, 0.3);
|
||||
border-color: rgba(91, 209, 216, 0.15);
|
||||
}
|
||||
.hero-bmu-zone:hover::before { opacity: 0.5; }
|
||||
|
||||
.hero-bmu-zone--mcu { --zone-color: #5bd1d8; }
|
||||
.hero-bmu-zone--analog { --zone-color: #f1c27a; }
|
||||
.hero-bmu-zone--mission { --zone-color: #b6d18f; }
|
||||
.hero-bmu-zone--formation { --zone-color: #ff9f0a; }
|
||||
.hero-bmu-zone--contact { --zone-color: #ff6b35; }
|
||||
|
||||
.hero-bmu-zone-icon {
|
||||
font-size: 24px;
|
||||
opacity: 0.6;
|
||||
color: var(--zone-color, #5bd1d8);
|
||||
filter: drop-shadow(0 0 6px var(--zone-color, #5bd1d8));
|
||||
}
|
||||
|
||||
.hero-bmu-zone-label {
|
||||
font-family: 'Orbitron', 'Manrope', sans-serif;
|
||||
font-size: clamp(11px, 1.3vw, 14px);
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.15em;
|
||||
color: var(--zone-color, #5bd1d8);
|
||||
}
|
||||
|
||||
.hero-bmu-zone-desc {
|
||||
font-size: clamp(10px, 1vw, 12px);
|
||||
color: rgba(255, 255, 255, 0.35);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.hero-bmu-tagline {
|
||||
animation: hero-tag-in 0.8s 0.6s ease both;
|
||||
}
|
||||
@keyframes hero-tag-in {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
.hero-bmu-tagline span {
|
||||
font-size: clamp(10px, 1.2vw, 13px);
|
||||
color: rgba(255, 255, 255, 0.15);
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.hero-bmu-nav { flex-direction: column; align-items: stretch; }
|
||||
.hero-bmu-zone { flex-direction: row; gap: 12px; text-align: left; }
|
||||
}
|
||||
|
||||
/* ============ PCB SPACER ============ */
|
||||
.pcb-spacer {
|
||||
height: 60vh;
|
||||
pointer-events: none;
|
||||
}
|
||||
.pcb-spacer--hero {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
/* ============ CONTACT 3D POPUP ============ */
|
||||
.contact-3d-popup {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity 0.4s ease, visibility 0.4s ease;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.contact-3d-popup.contact-3d-popup--open {
|
||||
pointer-events: auto;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.contact-3d-backdrop {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
}
|
||||
|
||||
.contact-3d-tile {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
max-width: 600px;
|
||||
width: 90vw;
|
||||
max-height: 85vh;
|
||||
overflow-y: auto;
|
||||
background: rgba(10, 10, 10, 0.9);
|
||||
border: 1px solid rgba(91, 209, 216, 0.15);
|
||||
border-radius: 20px;
|
||||
padding: clamp(20px, 4vw, 40px);
|
||||
box-shadow:
|
||||
0 0 40px rgba(91, 209, 216, 0.08),
|
||||
0 24px 80px rgba(0, 0, 0, 0.6);
|
||||
transform: perspective(1200px) rotateY(-15deg) rotateX(5deg) scale(0.85) translateY(40px);
|
||||
opacity: 0;
|
||||
transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease;
|
||||
}
|
||||
|
||||
.contact-3d-popup--open .contact-3d-tile {
|
||||
transform: perspective(1200px) rotateY(0deg) rotateX(0deg) scale(1) translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.contact-3d-close {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 16px;
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 50%;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.contact-3d-close:hover {
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
color: #ffffff;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.section-hero { min-height: auto; }
|
||||
.contact-3d-tile { transform: none; }
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
// Initialize scroll-triggered webgl-card and webgl-section animations
|
||||
function initScrollAnimations() {
|
||||
const cards = document.querySelectorAll('.webgl-card');
|
||||
const sections = document.querySelectorAll('.webgl-section');
|
||||
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add(
|
||||
entry.target.classList.contains('webgl-card')
|
||||
? 'webgl-card--visible'
|
||||
: 'webgl-section--visible'
|
||||
);
|
||||
}
|
||||
});
|
||||
},
|
||||
{ threshold: 0.15 }
|
||||
);
|
||||
|
||||
cards.forEach((el) => observer.observe(el));
|
||||
sections.forEach((el) => observer.observe(el));
|
||||
}
|
||||
|
||||
// 3D tilt on scroll — cards tilt based on their position in viewport
|
||||
function initScrollTilt() {
|
||||
const cards = document.querySelectorAll('.webgl-card--visible');
|
||||
function updateTilt() {
|
||||
cards.forEach((card) => {
|
||||
const rect = card.getBoundingClientRect();
|
||||
const vh = window.innerHeight;
|
||||
const center = rect.top + rect.height / 2;
|
||||
const ratio = (center - vh / 2) / (vh / 2); // -1 (top) to 1 (bottom)
|
||||
const rotateX = ratio * -3;
|
||||
const rotateY = ratio * 1.5;
|
||||
(card as HTMLElement).style.transform =
|
||||
`perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
|
||||
});
|
||||
requestAnimationFrame(updateTilt);
|
||||
}
|
||||
updateTilt();
|
||||
}
|
||||
|
||||
// Carousel navigation
|
||||
function initCarousels() {
|
||||
document.querySelectorAll('.atomic-carousel-nav').forEach((btn) => {
|
||||
btn.addEventListener('click', () => {
|
||||
const dir = parseInt(btn.getAttribute('data-dir') || '1');
|
||||
const carouselType = btn.getAttribute('data-carousel');
|
||||
const orbit = document.getElementById(carouselType === 'photos' ? 'photo-orbit' : 'video-orbit');
|
||||
if (!orbit) return;
|
||||
const itemWidth = orbit.querySelector('.atomic-carousel-item')?.clientWidth || 320;
|
||||
orbit.scrollBy({ left: dir * (itemWidth + 24), behavior: 'smooth' });
|
||||
});
|
||||
});
|
||||
|
||||
// Track position indicator
|
||||
['photo-orbit', 'video-orbit'].forEach((id) => {
|
||||
const orbit = document.getElementById(id);
|
||||
const track = document.getElementById(id.replace('orbit', 'track'));
|
||||
if (!orbit || !track) return;
|
||||
orbit.addEventListener('scroll', () => {
|
||||
const pct = orbit.scrollLeft / (orbit.scrollWidth - orbit.clientWidth) * 100;
|
||||
track.style.setProperty('--track-position', `${pct}%`);
|
||||
});
|
||||
});
|
||||
|
||||
// Video hover play
|
||||
document.querySelectorAll('.atomic-carousel-item video').forEach((video) => {
|
||||
const v = video as HTMLVideoElement;
|
||||
v.closest('.atomic-carousel-item')?.addEventListener('mouseenter', () => v.play());
|
||||
v.closest('.atomic-carousel-item')?.addEventListener('mouseleave', () => { v.pause(); v.currentTime = 0; });
|
||||
});
|
||||
}
|
||||
|
||||
// Run on load and on Astro page transitions
|
||||
initScrollAnimations();
|
||||
setTimeout(initScrollTilt, 2000);
|
||||
initCarousels();
|
||||
// Contact 3D popup
|
||||
function initContactPopup() {
|
||||
const popup = document.getElementById('contact');
|
||||
const backdrop = document.getElementById('contact-backdrop');
|
||||
const closeBtn = document.getElementById('contact-close');
|
||||
if (!popup) return;
|
||||
|
||||
function openContact() {
|
||||
popup.classList.add('contact-3d-popup--open');
|
||||
}
|
||||
function closeContact() {
|
||||
popup.classList.remove('contact-3d-popup--open');
|
||||
}
|
||||
|
||||
// Open on any #contact link click
|
||||
document.querySelectorAll('a[href="#contact"]').forEach(link => {
|
||||
link.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
openContact();
|
||||
});
|
||||
});
|
||||
|
||||
// Open at end of scroll (>95%)
|
||||
let endTriggered = false;
|
||||
window.addEventListener('scroll', () => {
|
||||
const el = document.documentElement;
|
||||
const pct = el.scrollTop / (el.scrollHeight - el.clientHeight);
|
||||
if (pct > 0.95 && !endTriggered) {
|
||||
endTriggered = true;
|
||||
openContact();
|
||||
}
|
||||
if (pct < 0.9) endTriggered = false;
|
||||
}, { passive: true });
|
||||
|
||||
// Close
|
||||
backdrop?.addEventListener('click', closeContact);
|
||||
closeBtn?.addEventListener('click', closeContact);
|
||||
window.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape') closeContact();
|
||||
});
|
||||
}
|
||||
|
||||
// Loading screen — fade out when WebGL canvas renders
|
||||
const loadingMessages = [
|
||||
"Chargement du PCB 3D...",
|
||||
"Initialisation des composants...",
|
||||
"Soudure des connexions...",
|
||||
"Calibration de la caméra...",
|
||||
"Vérification des pistes cuivre...",
|
||||
"Flash du rendu WebGL...",
|
||||
];
|
||||
let loadMsgIdx = 0;
|
||||
// Loading screen — auto-hide after 10s or when ready
|
||||
const loadScreen = document.getElementById('loading-screen');
|
||||
const loadBar = document.getElementById('loading-bar-fill');
|
||||
const loadStatus = document.getElementById('loading-status');
|
||||
const loadScreen = document.getElementById('loading-screen');
|
||||
|
||||
const loadInterval = setInterval(() => {
|
||||
loadMsgIdx = (loadMsgIdx + 1) % loadingMessages.length;
|
||||
if (loadStatus) loadStatus.textContent = loadingMessages[loadMsgIdx];
|
||||
if (loadBar) {
|
||||
const pct = Math.min(90, parseFloat(loadBar.style.width || '0') + 15);
|
||||
loadBar.style.width = pct + '%';
|
||||
}
|
||||
}, 800);
|
||||
const msgs = ["Chargement...", "Initialisation...", "Préparation du rendu..."];
|
||||
let idx = 0;
|
||||
const interval = setInterval(() => {
|
||||
idx = (idx + 1) % msgs.length;
|
||||
if (loadStatus) loadStatus.textContent = msgs[idx];
|
||||
if (loadBar) loadBar.style.width = Math.min(90, parseFloat(loadBar.style.width || '0') + 20) + '%';
|
||||
}, 1500);
|
||||
|
||||
// Force 10s minimum loading, then fade out
|
||||
setTimeout(() => {
|
||||
if (loadBar) loadBar.style.width = '100%';
|
||||
if (loadStatus) loadStatus.textContent = 'PCB prêt.';
|
||||
clearInterval(loadInterval);
|
||||
setTimeout(() => {
|
||||
loadScreen?.classList.add('loading-done');
|
||||
}, 600);
|
||||
if (loadStatus) loadStatus.textContent = 'Prêt.';
|
||||
clearInterval(interval);
|
||||
setTimeout(() => loadScreen?.classList.add('loading-done'), 500);
|
||||
}, 10000);
|
||||
|
||||
// Hero BMU zone smooth scroll
|
||||
document.querySelectorAll('.hero-bmu-zone[href^="#"]').forEach(link => {
|
||||
link.addEventListener('click', (e) => {
|
||||
const href = link.getAttribute('href');
|
||||
if (href === '#contact') return;
|
||||
e.preventDefault();
|
||||
const target = document.querySelector(href);
|
||||
if (target) target.scrollIntoView({ behavior: 'smooth' });
|
||||
});
|
||||
});
|
||||
|
||||
initContactPopup();
|
||||
document.addEventListener('astro:page-load', () => {
|
||||
initScrollAnimations();
|
||||
setTimeout(initScrollTilt, 2000);
|
||||
initCarousels();
|
||||
initContactPopup();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* Loading screen */
|
||||
.loading-screen { position:fixed; inset:0; z-index:9999; background:#000; display:flex; align-items:center; justify-content:center; transition:opacity 1s ease, visibility 1s ease; }
|
||||
.loading-screen.loading-done { opacity:0; visibility:hidden; pointer-events:none; }
|
||||
.loading-content { display:flex; flex-direction:column; align-items:center; text-align:center; gap:20px; padding:24px; }
|
||||
.loading-bmu-img { width:clamp(200px,50vw,400px); height:auto; border-radius:16px; border:1px solid rgba(91,209,216,0.15); box-shadow:0 0 40px rgba(91,209,216,0.08); }
|
||||
.loading-title { font-size:clamp(28px,5vw,48px); font-weight:800; color:#fff; margin:0; }
|
||||
.loading-electric { color:#5bd1d8; }
|
||||
.loading-bar { width:clamp(200px,40vw,300px); height:2px; background:rgba(255,255,255,0.06); border-radius:1px; overflow:hidden; }
|
||||
.loading-bar-fill { height:100%; width:0%; background:linear-gradient(90deg,#5bd1d8,#f1c27a); transition:width 0.3s ease; }
|
||||
.loading-status { font-family:monospace; font-size:12px; color:rgba(255,255,255,0.3); margin:0; }
|
||||
.loading-static-btn { font-size:11px; color:rgba(91,209,216,0.6); text-decoration:none; padding:8px 16px; border:1px solid rgba(91,209,216,0.15); border-radius:8px; }
|
||||
.loading-static-btn:hover { color:#5bd1d8; border-color:rgba(91,209,216,0.4); }
|
||||
.loading-tagline { font-size:11px; color:rgba(255,255,255,0.12); letter-spacing:0.1em; text-transform:uppercase; margin:0; }
|
||||
|
||||
/* Dark site base */
|
||||
.dark-site { position:relative; z-index:1; background:transparent; color:#e0e0e0; }
|
||||
.section-dark { padding:clamp(40px,8vw,100px) 0; }
|
||||
.section-content { max-width:1200px; margin:0 auto; padding:0 clamp(20px,4vw,48px); }
|
||||
.pcb-spacer { height:60vh; }
|
||||
.pcb-spacer--hero { height:100vh; }
|
||||
|
||||
/* Dark overrides */
|
||||
.section-dark :global(h1), .section-dark :global(h2), .section-dark :global(h3) { color:#fff !important; }
|
||||
.section-dark :global(p), .section-dark :global(li) { color:rgba(255,255,255,0.7) !important; }
|
||||
.section-dark :global(a) { color:#5bd1d8 !important; }
|
||||
|
||||
/* Dark footer */
|
||||
.dark-footer { position:relative; z-index:2; border-top:1px solid rgba(255,255,255,0.06); padding:24px 0; background:rgba(0,0,0,0.4); }
|
||||
.dark-footer :global(.footer-title) { color:#fff; }
|
||||
.dark-footer :global(.footer-copy) { color:rgba(255,255,255,0.4); }
|
||||
.dark-footer :global(.footer-link) { color:rgba(255,255,255,0.5) !important; }
|
||||
</style>
|
||||
|
||||
@@ -1,460 +0,0 @@
|
||||
/* ═══════════════════════════════════════════════════════
|
||||
WEBGL CARDS — Atomic scroll animations + lightbox
|
||||
═══════════════════════════════════════════════════════ */
|
||||
|
||||
/* ── Card materialize animation ─────────────────────── */
|
||||
.webgl-card {
|
||||
opacity: 0;
|
||||
transform: translateY(30px) scale(0.95);
|
||||
filter: blur(6px);
|
||||
transition:
|
||||
opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
|
||||
transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
|
||||
filter 0.8s cubic-bezier(0.16, 1, 0.3, 1),
|
||||
box-shadow 0.4s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.webgl-card--visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
filter: blur(0);
|
||||
}
|
||||
|
||||
/* Glow border on appear */
|
||||
.webgl-card--visible::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: -1px;
|
||||
border-radius: inherit;
|
||||
padding: 1px;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
var(--card-accent, #5bd1d8) 0%,
|
||||
transparent 40%,
|
||||
transparent 60%,
|
||||
var(--card-accent, #5bd1d8) 100%
|
||||
);
|
||||
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
||||
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
||||
-webkit-mask-composite: xor;
|
||||
mask-composite: exclude;
|
||||
opacity: 0;
|
||||
animation: glow-border-in 1.2s 0.3s ease forwards;
|
||||
}
|
||||
|
||||
@keyframes glow-border-in {
|
||||
0% { opacity: 0; }
|
||||
50% { opacity: 0.6; }
|
||||
100% { opacity: 0.15; }
|
||||
}
|
||||
|
||||
/* Card hover tilt effect */
|
||||
.webgl-card--visible:hover {
|
||||
box-shadow:
|
||||
0 0 20px rgba(91, 209, 216, 0.08),
|
||||
0 8px 32px rgba(0, 0, 0, 0.3);
|
||||
transform: translateY(-2px) scale(1.01);
|
||||
}
|
||||
|
||||
/* ── Section atomic reveal — alternate orbit direction ── */
|
||||
.webgl-section {
|
||||
opacity: 0;
|
||||
transition:
|
||||
opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
|
||||
transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
/* Odd sections slide from left orbit */
|
||||
.webgl-section:nth-child(odd) {
|
||||
transform: translateX(-60px) rotate(-1deg);
|
||||
}
|
||||
|
||||
/* Even sections slide from right orbit */
|
||||
.webgl-section:nth-child(even) {
|
||||
transform: translateX(60px) rotate(1deg);
|
||||
}
|
||||
|
||||
.webgl-section--visible {
|
||||
opacity: 1;
|
||||
transform: translateX(0) rotate(0deg);
|
||||
}
|
||||
|
||||
/* Staggered children reveal */
|
||||
.webgl-section--visible > *:nth-child(1) { transition-delay: 0s; }
|
||||
.webgl-section--visible > *:nth-child(2) { transition-delay: 0.1s; }
|
||||
.webgl-section--visible > *:nth-child(3) { transition-delay: 0.2s; }
|
||||
.webgl-section--visible > *:nth-child(4) { transition-delay: 0.3s; }
|
||||
.webgl-section--visible > *:nth-child(5) { transition-delay: 0.4s; }
|
||||
|
||||
/* ── Photo/Video hover effect ───────────────────────── */
|
||||
.photo-strip-img,
|
||||
.video-strip-clip {
|
||||
cursor: pointer;
|
||||
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, filter 0.3s ease;
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.photo-strip-img:hover,
|
||||
.video-strip-clip:hover {
|
||||
transform: scale(1.05) translateY(-4px);
|
||||
box-shadow:
|
||||
0 0 24px rgba(91, 209, 216, 0.15),
|
||||
0 12px 40px rgba(0, 0, 0, 0.4);
|
||||
filter: brightness(1.1);
|
||||
border-color: rgba(91, 209, 216, 0.2);
|
||||
}
|
||||
|
||||
/* ── Lightbox ───────────────────────────────────────── */
|
||||
.media-lightbox {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 10000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(0, 0, 0, 0.85);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
animation: lightbox-in 0.4s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@keyframes lightbox-in {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
.lightbox-content {
|
||||
position: relative;
|
||||
max-width: 90vw;
|
||||
max-height: 85vh;
|
||||
cursor: default;
|
||||
animation: lightbox-content-in 0.5s 0.1s cubic-bezier(0.16, 1, 0.3, 1) both;
|
||||
}
|
||||
|
||||
@keyframes lightbox-content-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.8) translateY(20px);
|
||||
filter: blur(8px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1) translateY(0);
|
||||
filter: blur(0);
|
||||
}
|
||||
}
|
||||
|
||||
.lightbox-media {
|
||||
max-width: 90vw;
|
||||
max-height: 85vh;
|
||||
object-fit: contain;
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow:
|
||||
0 0 60px rgba(91, 209, 216, 0.1),
|
||||
0 24px 80px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.lightbox-close {
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
right: 0;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 50%;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.lightbox-close:hover {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
color: #ffffff;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
/* ── Energy rings around lightbox media ──────────────── */
|
||||
.lightbox-ring {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
border: 1px solid rgba(91, 209, 216, 0.15);
|
||||
border-radius: 50%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.lightbox-ring--1 {
|
||||
width: 110%;
|
||||
height: 110%;
|
||||
transform: translate(-50%, -50%) rotate(0deg);
|
||||
animation: ring-orbit 8s linear infinite;
|
||||
border-style: dashed;
|
||||
border-color: rgba(91, 209, 216, 0.1);
|
||||
}
|
||||
|
||||
.lightbox-ring--2 {
|
||||
width: 120%;
|
||||
height: 120%;
|
||||
transform: translate(-50%, -50%) rotate(0deg);
|
||||
animation: ring-orbit 12s linear infinite reverse;
|
||||
border-color: rgba(241, 194, 122, 0.08);
|
||||
}
|
||||
|
||||
.lightbox-ring--3 {
|
||||
width: 130%;
|
||||
height: 60%;
|
||||
transform: translate(-50%, -50%) rotate(30deg);
|
||||
animation: ring-orbit 6s linear infinite;
|
||||
border-color: rgba(182, 209, 143, 0.06);
|
||||
}
|
||||
|
||||
@keyframes ring-orbit {
|
||||
from { transform: translate(-50%, -50%) rotate(0deg); }
|
||||
to { transform: translate(-50%, -50%) rotate(360deg); }
|
||||
}
|
||||
|
||||
/* ── Particle burst (injected by JS) ─────────────────── */
|
||||
.webgl-particle-burst {
|
||||
will-change: transform, opacity;
|
||||
}
|
||||
|
||||
/* ── 3D Tilt on scroll ──────────────────────────────── */
|
||||
.webgl-card {
|
||||
perspective: 1000px;
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
|
||||
/* Alternating left/right orbit entry */
|
||||
.webgl-card--visible {
|
||||
animation: card-orbit-right 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
||||
}
|
||||
|
||||
/* Even cards enter from right, odd from left */
|
||||
.webgl-section:nth-child(odd) .webgl-card--visible {
|
||||
animation-name: card-orbit-left;
|
||||
}
|
||||
.webgl-section:nth-child(even) .webgl-card--visible {
|
||||
animation-name: card-orbit-right;
|
||||
}
|
||||
|
||||
@keyframes card-orbit-left {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: perspective(1200px) translateX(-120px) rotateY(25deg) rotateZ(-3deg) scale(0.85);
|
||||
filter: blur(8px);
|
||||
}
|
||||
40% {
|
||||
opacity: 0.7;
|
||||
transform: perspective(1200px) translateX(-20px) rotateY(8deg) rotateZ(-1deg) scale(0.97);
|
||||
filter: blur(2px);
|
||||
}
|
||||
70% {
|
||||
opacity: 1;
|
||||
transform: perspective(1200px) translateX(8px) rotateY(-2deg) rotateZ(0.5deg) scale(1.01);
|
||||
filter: blur(0);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: perspective(1200px) translateX(0) rotateY(0deg) rotateZ(0deg) scale(1);
|
||||
filter: blur(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes card-orbit-right {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: perspective(1200px) translateX(120px) rotateY(-25deg) rotateZ(3deg) scale(0.85);
|
||||
filter: blur(8px);
|
||||
}
|
||||
40% {
|
||||
opacity: 0.7;
|
||||
transform: perspective(1200px) translateX(20px) rotateY(-8deg) rotateZ(1deg) scale(0.97);
|
||||
filter: blur(2px);
|
||||
}
|
||||
70% {
|
||||
opacity: 1;
|
||||
transform: perspective(1200px) translateX(-8px) rotateY(2deg) rotateZ(-0.5deg) scale(1.01);
|
||||
filter: blur(0);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: perspective(1200px) translateX(0) rotateY(0deg) rotateZ(0deg) scale(1);
|
||||
filter: blur(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Mouse-driven 3D tilt on hover */
|
||||
.webgl-card--visible:hover {
|
||||
transition: box-shadow 0.3s ease;
|
||||
box-shadow:
|
||||
0 0 24px rgba(91, 209, 216, 0.08),
|
||||
0 12px 40px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
|
||||
/* ── Atomic carousel for photos/videos ─────────────── */
|
||||
.atomic-carousel {
|
||||
position: relative;
|
||||
padding: clamp(40px, 6vw, 80px) 0;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.atomic-carousel-orbit {
|
||||
display: flex;
|
||||
gap: clamp(12px, 2vw, 24px);
|
||||
overflow-x: auto;
|
||||
scroll-snap-type: x mandatory;
|
||||
scroll-behavior: smooth;
|
||||
padding: 20px clamp(20px, 4vw, 48px);
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.atomic-carousel-orbit::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.atomic-carousel-item {
|
||||
flex: 0 0 auto;
|
||||
scroll-snap-align: center;
|
||||
position: relative;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
transform: perspective(800px) rotateY(0deg);
|
||||
}
|
||||
|
||||
.atomic-carousel-item::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgba(91, 209, 216, 0.08);
|
||||
pointer-events: none;
|
||||
transition: border-color 0.3s ease, box-shadow 0.3s ease;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.atomic-carousel-item:hover {
|
||||
transform: perspective(800px) rotateY(-3deg) translateY(-8px) scale(1.04);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.atomic-carousel-item:hover::before {
|
||||
border-color: rgba(91, 209, 216, 0.3);
|
||||
box-shadow:
|
||||
0 0 30px rgba(91, 209, 216, 0.12),
|
||||
inset 0 0 20px rgba(91, 209, 216, 0.03);
|
||||
}
|
||||
|
||||
/* Electron dots orbiting around hovered item */
|
||||
.atomic-carousel-item:hover::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: #5bd1d8;
|
||||
box-shadow: 0 0 12px #5bd1d8;
|
||||
top: -3px;
|
||||
left: 50%;
|
||||
z-index: 3;
|
||||
animation: electron-orbit-item 2s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes electron-orbit-item {
|
||||
0% { top: -3px; left: 50%; }
|
||||
25% { top: 50%; left: calc(100% + 3px); }
|
||||
50% { top: calc(100% + 3px); left: 50%; }
|
||||
75% { top: 50%; left: -3px; }
|
||||
100% { top: -3px; left: 50%; }
|
||||
}
|
||||
|
||||
.atomic-carousel-item img,
|
||||
.atomic-carousel-item video {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: filter 0.3s ease, transform 0.3s ease;
|
||||
}
|
||||
|
||||
.atomic-carousel-item:hover img,
|
||||
.atomic-carousel-item:hover video {
|
||||
filter: brightness(1.15) contrast(1.05);
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
/* Carousel navigation arrows */
|
||||
.atomic-carousel-nav {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background: rgba(91, 209, 216, 0.1);
|
||||
border: 1px solid rgba(91, 209, 216, 0.2);
|
||||
color: #5bd1d8;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
z-index: 20;
|
||||
transition: all 0.2s ease;
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
.atomic-carousel-nav:hover {
|
||||
background: rgba(91, 209, 216, 0.2);
|
||||
transform: translateY(-50%) scale(1.1);
|
||||
box-shadow: 0 0 20px rgba(91, 209, 216, 0.2);
|
||||
}
|
||||
|
||||
.atomic-carousel-nav--prev { left: 8px; }
|
||||
.atomic-carousel-nav--next { right: 8px; }
|
||||
|
||||
/* Orbital track line under carousel */
|
||||
.atomic-carousel-track {
|
||||
height: 1px;
|
||||
margin: 16px auto 0;
|
||||
max-width: 200px;
|
||||
background: linear-gradient(90deg, transparent, rgba(91, 209, 216, 0.3), transparent);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.atomic-carousel-track::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: #5bd1d8;
|
||||
box-shadow: 0 0 10px #5bd1d8;
|
||||
top: -3px;
|
||||
left: var(--track-position, 50%);
|
||||
transition: left 0.3s ease;
|
||||
}
|
||||
|
||||
/* ── Reduced motion ──────────────────────────────────── */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.webgl-card,
|
||||
.webgl-section {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
filter: none;
|
||||
transition: none;
|
||||
}
|
||||
.webgl-card--visible::before { display: none; }
|
||||
.lightbox-ring { display: none; }
|
||||
.lightbox-content { animation: none; opacity: 1; transform: none; }
|
||||
}
|
||||
Reference in New Issue
Block a user