{/* ambient warm wash */}
{/* subtle moving light sweep */}
{/* film grain */}
`
)}")`,
opacity: 0.35,
mixBlendMode: 'overlay',
}}/>
{/* heavy vignette */}
);
}
// ── Dust motes drifting through light ──────────────────────────────────────
function DustMotes() {
const t = useTime();
const motes = React.useMemo(() => {
return Array.from({ length: 18 }).map((_, i) => ({
x: Math.random() * 1200 + 40,
y: Math.random() * 680 + 20,
r: 0.8 + Math.random() * 2.2,
drift: 0.3 + Math.random() * 0.8,
phase: Math.random() * 6.28,
alpha: 0.15 + Math.random() * 0.35,
}));
}, []);
return (
);
}
// ── Light burst at unlock moment ───────────────────────────────────────────
function LightBurst({ intensity }) {
if (intensity <= 0) return null;
const size = 200 + intensity * 900;
return (
{/* core flash */}
{/* rays */}
);
}
// ── Main scene ─────────────────────────────────────────────────────────────
function PadlockScene() {
const t = useTime();
// Phase timing (shortened)
// 0 .. 0.8 : padlock reveal (fade in)
// 0.8 .. 1.4 : brief settle
// 1.4 .. 2.3 : shackle lifts, light burst
// 2.3 .. 4.0 : hold + slow drift + burst fade
// Padlock entrance (faster)
const padlockOpacity = animate({ from: 0, to: 1, start: 0, end: 0.7, ease: Easing.easeOutCubic })(t);
const padlockScale = animate({ from: 0.94, to: 1, start: 0, end: 0.9, ease: Easing.easeOutCubic })(t);
// Idle float (subtle, continuous)
const float = Math.sin(t * 0.9) * 4;
// Key trajectory
// Local key
is drawn with the bit tip at (0,0) and the bow below (y:130..220).
// When fully inserted, the bit tip should be at the pin line ~y=388 in the 500x600 viewbox.
// We translate the key in the outer SVG (1280x720 user coords) via a .
// The padlock group is centered around (640, 340) ish; keyhole center = (640, ~395 - offset)
// Actually the padlock is rendered at its own 500x600 coord, placed within the larger SVG.
// We'll place keyhole center at SVG coords (640, 420).
// Key approaches: starts offscreen right at (1320, 520), tilted 90° (bit pointing LEFT)
// Glides to (780, 420), then straightens to bit pointing UP (rotate from 90° to 0°)
// while sliding toward keyhole at (640, 420).
// Phase 1: approach 1.8 -> 4.2 (smooth arc, no bob, no overshoot)
// Key enters from the right already vertical, drifting toward the lock along
// a single continuous easeInOutCubic path so the final alignment is seamless.
const approachX = animate({
from: 1320, to: 640,
start: 1.8, end: 4.2,
ease: Easing.easeInOutCubic,
})(t);
const approachY = animate({
from: 405, to: 405,
start: 1.8, end: 4.2,
ease: Easing.easeInOutCubic,
})(t);
// Key comes in vertical already — tiny residual tilt that resolves early
const approachRot = animate({
from: 6, to: 0,
start: 1.8, end: 3.8,
ease: Easing.easeInOutCubic,
})(t);
const approachBob = 0;
// Phase 2: alignment pause & final align 4.2 -> 4.6
// Key sits just above keyhole (bit tip a few px above y=388 in padlock coords).
// In SVG coords: keyhole center ~ (640, 420), bit tip should be at (640, 420 - 15) before insert.
// We want the KEY's rendered bit tip at (keyX, keyY). Since
// puts its local origin (0,0) at that point, and the bit tip is local (0,0), keyY = bit tip y.
// Phase 3: insert 4.6 -> 5.6 (bit tip moves from y=405 down to y=420 while entering slot)
const insertProgress = clamp((t - 4.6) / 1.0, 0, 1);
const insertEase = Easing.easeInOutCubic(insertProgress);
// Base position after alignment:
let keyX = approachX;
let keyY = approachY + approachBob;
let keyRot = approachRot;
if (t >= 4.2) {
keyX = 640;
// During insert, move down 18px
keyY = 405 + insertEase * 18;
keyRot = 0;
}
// Phase 4: rotate 5.6 -> 7.2 (quarter turn)
const rotateProgress = clamp((t - 5.6) / 1.6, 0, 1);
// mechanical stutter curve — two stages with micro-settle
const rotateEase = (x) => {
if (x < 0.55) return Easing.easeInOutCubic(x / 0.55) * 0.7;
if (x < 0.75) return 0.7 + Easing.easeOutCubic((x - 0.55) / 0.2) * 0.08;
return 0.78 + Easing.easeOutBack((x - 0.75) / 0.25) * 0.22;
};
const keyTurn = rotateEase(rotateProgress) * 90;
if (t >= 5.6) keyRot = keyTurn;
// tiny click shake at turn moments
const clickShake = (() => {
// small shake at t ≈ 6.3 and 7.1
let s = 0;
const events = [6.3, 7.1];
for (const e of events) {
const dt = t - e;
if (dt > 0 && dt < 0.18) s += Math.sin(dt * 180) * (1 - dt / 0.18) * 2;
}
return s;
})();
// Phase 5: unlock 1.4 -> 2.3 — shackle pops up + light burst
const unlockProgress = clamp((t - 1.4) / 0.9, 0, 1);
const shackleLift = Easing.easeOutBack(unlockProgress);
const shackleRotate = Easing.easeOutCubic(unlockProgress) * 8;
// Burst: peaks just after unlock start, fades
const burstProgress = (() => {
const dt = t - 1.4;
if (dt < 0) return 0;
if (dt < 0.25) return dt / 0.25; // rise
if (dt < 1.6) return 1 - (dt - 0.25) / 1.35; // decay
return 0;
})();
const burstIntensity = clamp(burstProgress, 0, 1);
// After unlock, key slowly recedes down and left
let keyExitX = 0, keyExitY = 0, keyExitOpacity = 1;
if (t >= 8.6) {
const exitP = clamp((t - 8.6) / 1.4, 0, 1);
const e = Easing.easeInCubic(exitP);
keyExitY = e * 120;
keyExitOpacity = 1 - e * 0.2;
}
// Lock body "settle" shake on unlock
const lockShake = (() => {
const dt = t - 1.4;
if (dt < 0 || dt > 0.3) return 0;
return Math.sin(dt * 90) * (1 - dt / 0.3) * 2;
})();
// Keyhole stays dark (no key in this version)
const keyInsert = 0.9;
// Padlock group transform
const padlockCX = 640 + clickShake * 0.5 + lockShake;
const padlockCY = 340 + float + lockShake * 0.4;
return (
<>
{/* Key pool of light on ground */}
{/* Main SVG canvas */}
{/* Light burst overlay */}
{/* Ambient dust */}
{/* Final vignette over everything */}
);
}
Object.assign(window, { PadlockScene });