boos
526 lines
15 KiB
TypeScript
526 lines
15 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useRef, useState, type MutableRefObject } from "react";
|
|
import type * as ThreeNamespace from "three";
|
|
|
|
type ThreeRuntime = typeof ThreeNamespace;
|
|
type AcidUniforms = {
|
|
uTime: { value: number };
|
|
uScroll: { value: number };
|
|
uPulse: { value: number };
|
|
uPointer: { value: ThreeNamespace.Vector2 };
|
|
};
|
|
type SceneControls = {
|
|
uniforms: AcidUniforms;
|
|
setScrollProgress(progress: number): void;
|
|
dispose(): void;
|
|
};
|
|
|
|
function shouldSkipWebgl() {
|
|
if (typeof window === "undefined") {
|
|
return true;
|
|
}
|
|
|
|
const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
|
const coarsePointer = window.matchMedia("(pointer: coarse)").matches;
|
|
const narrowScreen = window.matchMedia("(max-width: 720px)").matches;
|
|
const memory = typeof navigator !== "undefined"
|
|
? (navigator as Navigator & { deviceMemory?: number }).deviceMemory
|
|
: undefined;
|
|
|
|
return reduceMotion || (coarsePointer && narrowScreen) || (typeof memory === "number" && memory <= 3);
|
|
}
|
|
|
|
export default function AcidExperience() {
|
|
const rootRef = useRef<HTMLElement | null>(null);
|
|
const mountRef = useRef<HTMLDivElement>(null);
|
|
const controlsRef = useRef<SceneControls | null>(null);
|
|
const [fallback, setFallback] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const mount = mountRef.current;
|
|
const root = mount?.closest<HTMLElement>(".new-acid-page") || null;
|
|
if (!mount || !root) {
|
|
return undefined;
|
|
}
|
|
rootRef.current = root;
|
|
|
|
const reduceMotionQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
|
|
if (shouldSkipWebgl()) {
|
|
setFallback(true);
|
|
}
|
|
|
|
let disposed = false;
|
|
let sceneCleanup: (() => void) | undefined;
|
|
let motionCleanup: (() => void) | undefined;
|
|
|
|
Promise.all([
|
|
import("gsap"),
|
|
import("gsap/ScrollTrigger"),
|
|
import("lenis"),
|
|
shouldSkipWebgl() ? Promise.resolve(null) : import("three"),
|
|
])
|
|
.then(([gsapModule, scrollModule, lenisModule, THREE]) => {
|
|
if (disposed) {
|
|
return;
|
|
}
|
|
|
|
const gsap = gsapModule.gsap || gsapModule.default;
|
|
const ScrollTrigger = scrollModule.ScrollTrigger;
|
|
gsap.registerPlugin(ScrollTrigger);
|
|
|
|
if (THREE && !reduceMotionQuery.matches && mountRef.current) {
|
|
controlsRef.current = createScene(THREE, mountRef.current);
|
|
}
|
|
|
|
motionCleanup = setupMotion({
|
|
root,
|
|
gsap,
|
|
ScrollTrigger,
|
|
Lenis: lenisModule.default,
|
|
controls: controlsRef,
|
|
reduceMotionQuery,
|
|
});
|
|
})
|
|
.catch(() => {
|
|
if (!disposed) {
|
|
setFallback(true);
|
|
}
|
|
});
|
|
|
|
sceneCleanup = () => {
|
|
controlsRef.current?.dispose();
|
|
controlsRef.current = null;
|
|
};
|
|
|
|
return () => {
|
|
disposed = true;
|
|
motionCleanup?.();
|
|
sceneCleanup?.();
|
|
rootRef.current?.classList.remove("new-acid-motion-ready", "new-acid-lenis-active");
|
|
rootRef.current = null;
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<div
|
|
ref={mountRef}
|
|
className={fallback ? "new-acid-three is-fallback" : "new-acid-three"}
|
|
aria-hidden="true"
|
|
/>
|
|
);
|
|
}
|
|
|
|
function setupMotion({
|
|
root,
|
|
gsap,
|
|
ScrollTrigger,
|
|
Lenis,
|
|
controls,
|
|
reduceMotionQuery,
|
|
}: {
|
|
root: HTMLElement;
|
|
gsap: typeof import("gsap").gsap;
|
|
ScrollTrigger: typeof import("gsap/ScrollTrigger").ScrollTrigger;
|
|
Lenis: typeof import("lenis").default;
|
|
controls: MutableRefObject<SceneControls | null>;
|
|
reduceMotionQuery: MediaQueryList;
|
|
}) {
|
|
const reduceMotion = reduceMotionQuery.matches;
|
|
const mm = gsap.matchMedia();
|
|
const ctx = gsap.context(() => {
|
|
root.classList.add("new-acid-motion-ready");
|
|
|
|
gsap.set(root, {
|
|
"--acid-scroll": 0,
|
|
"--acid-hue-shift": 0,
|
|
"--acid-band-shift": "0px",
|
|
});
|
|
|
|
if (reduceMotion) {
|
|
gsap.set(root.querySelectorAll("[data-new-motion]"), {
|
|
autoAlpha: 1,
|
|
clearProps: "transform,opacity,visibility",
|
|
});
|
|
return;
|
|
}
|
|
|
|
const heroTimeline = gsap.timeline({ defaults: { ease: "power3.out", overwrite: "auto" } });
|
|
heroTimeline
|
|
.from(root.querySelector(".new-acid-brand"), { y: -10, autoAlpha: 0, duration: 0.55 })
|
|
.from(root.querySelectorAll(".new-acid-nav nav a, .new-acid-console-link"), {
|
|
y: -8,
|
|
autoAlpha: 0,
|
|
duration: 0.44,
|
|
stagger: 0.045,
|
|
}, "-=0.32")
|
|
.from(root.querySelector(".new-acid-kicker"), { y: 16, autoAlpha: 0, duration: 0.58 }, "-=0.22")
|
|
.from(root.querySelectorAll(".new-acid-hero h1, .new-acid-hero p, .new-acid-actions"), {
|
|
y: 24,
|
|
autoAlpha: 0,
|
|
duration: 0.72,
|
|
stagger: 0.08,
|
|
}, "-=0.38")
|
|
.from(root.querySelector(".new-acid-router"), { y: 28, rotationX: 4, autoAlpha: 0, duration: 0.78 }, "-=0.62")
|
|
.from(root.querySelectorAll(".new-acid-route-list > div, .new-acid-router-core > div"), {
|
|
x: 18,
|
|
autoAlpha: 0,
|
|
duration: 0.48,
|
|
stagger: 0.045,
|
|
}, "-=0.52");
|
|
|
|
gsap.to(root, {
|
|
"--acid-scroll": 1,
|
|
"--acid-hue-shift": 42,
|
|
"--acid-band-shift": "86px",
|
|
ease: "none",
|
|
scrollTrigger: {
|
|
trigger: root,
|
|
start: "top top",
|
|
end: "bottom bottom",
|
|
scrub: 0.8,
|
|
onUpdate: (self) => {
|
|
controls.current?.setScrollProgress(self.progress);
|
|
},
|
|
},
|
|
});
|
|
|
|
gsap.to(root.querySelector(".new-acid-hero-copy"), {
|
|
yPercent: -10,
|
|
autoAlpha: 0.84,
|
|
ease: "none",
|
|
scrollTrigger: {
|
|
trigger: root.querySelector(".new-acid-hero"),
|
|
start: "top top",
|
|
end: "bottom top",
|
|
scrub: 0.9,
|
|
},
|
|
});
|
|
|
|
gsap.to(root.querySelector(".new-acid-router"), {
|
|
yPercent: -18,
|
|
rotationY: -5,
|
|
ease: "none",
|
|
scrollTrigger: {
|
|
trigger: root.querySelector(".new-acid-hero"),
|
|
start: "top top",
|
|
end: "bottom top",
|
|
scrub: 0.85,
|
|
},
|
|
});
|
|
|
|
gsap.utils.toArray<HTMLElement>("[data-new-motion='section']", root).forEach((section) => {
|
|
gsap.from(section, {
|
|
autoAlpha: 0,
|
|
y: 46,
|
|
scale: 0.985,
|
|
duration: 0.8,
|
|
ease: "power3.out",
|
|
scrollTrigger: {
|
|
trigger: section,
|
|
start: "top 82%",
|
|
once: true,
|
|
},
|
|
});
|
|
});
|
|
|
|
gsap.utils.toArray<HTMLElement>("[data-new-motion='card']", root).forEach((card, index) => {
|
|
gsap.from(card, {
|
|
autoAlpha: 0,
|
|
y: 30,
|
|
rotationX: index % 2 === 0 ? 2 : -2,
|
|
duration: 0.62,
|
|
ease: "power3.out",
|
|
scrollTrigger: {
|
|
trigger: card,
|
|
start: "top 86%",
|
|
once: true,
|
|
},
|
|
});
|
|
});
|
|
|
|
mm.add("(min-width: 981px)", () => {
|
|
const band = root.querySelector(".new-acid-band");
|
|
const stack = root.querySelector(".new-acid-stack");
|
|
if (band && stack) {
|
|
gsap.to(stack, {
|
|
xPercent: -10,
|
|
ease: "none",
|
|
scrollTrigger: {
|
|
trigger: band,
|
|
start: "top bottom",
|
|
end: "bottom top",
|
|
scrub: 1,
|
|
},
|
|
});
|
|
}
|
|
|
|
return undefined;
|
|
});
|
|
}, root);
|
|
|
|
let lenis: InstanceType<typeof Lenis> | null = null;
|
|
const lenisTick = (time: number) => {
|
|
lenis?.raf(time * 1000);
|
|
};
|
|
let rafId = 0;
|
|
const canSmoothScroll = !reduceMotion && window.matchMedia("(min-width: 900px) and (pointer: fine)").matches;
|
|
|
|
if (canSmoothScroll) {
|
|
lenis = new Lenis({
|
|
duration: 1.08,
|
|
easing: (t: number) => 1 - Math.pow(1 - t, 3),
|
|
smoothWheel: true,
|
|
wheelMultiplier: 0.86,
|
|
touchMultiplier: 1,
|
|
});
|
|
root.classList.add("new-acid-lenis-active");
|
|
lenis.on("scroll", () => ScrollTrigger.update());
|
|
gsap.ticker.add(lenisTick);
|
|
gsap.ticker.lagSmoothing(0);
|
|
}
|
|
|
|
const onResize = () => ScrollTrigger.refresh();
|
|
window.addEventListener("resize", onResize, { passive: true });
|
|
rafId = window.requestAnimationFrame(() => ScrollTrigger.refresh());
|
|
|
|
return () => {
|
|
window.cancelAnimationFrame(rafId);
|
|
window.removeEventListener("resize", onResize);
|
|
if (lenis) {
|
|
gsap.ticker.remove(lenisTick);
|
|
lenis.destroy();
|
|
lenis = null;
|
|
}
|
|
mm.revert();
|
|
ctx.revert();
|
|
ScrollTrigger.getAll().forEach((trigger) => trigger.kill());
|
|
root.classList.remove("new-acid-motion-ready", "new-acid-lenis-active");
|
|
};
|
|
}
|
|
|
|
function createScene(THREE: ThreeRuntime, target: HTMLDivElement): SceneControls {
|
|
const renderer = new THREE.WebGLRenderer({
|
|
alpha: true,
|
|
antialias: false,
|
|
preserveDrawingBuffer: true,
|
|
powerPreference: "low-power",
|
|
});
|
|
renderer.setClearColor(0x000000, 0);
|
|
renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 1.35));
|
|
renderer.setSize(target.clientWidth, target.clientHeight, false);
|
|
target.appendChild(renderer.domElement);
|
|
|
|
const scene = new THREE.Scene();
|
|
const camera = new THREE.PerspectiveCamera(46, 1, 0.1, 100);
|
|
camera.position.set(0, 0, 9);
|
|
|
|
const group = new THREE.Group();
|
|
scene.add(group);
|
|
|
|
const uniforms: AcidUniforms = {
|
|
uTime: { value: 0 },
|
|
uScroll: { value: 0 },
|
|
uPulse: { value: 0.42 },
|
|
uPointer: { value: new THREE.Vector2(0, 0) },
|
|
};
|
|
|
|
const shader = new THREE.Mesh(
|
|
new THREE.PlaneGeometry(18, 12, 1, 1),
|
|
new THREE.ShaderMaterial({
|
|
transparent: true,
|
|
depthWrite: false,
|
|
blending: THREE.AdditiveBlending,
|
|
uniforms,
|
|
vertexShader: `
|
|
varying vec2 vUv;
|
|
void main() {
|
|
vUv = uv;
|
|
gl_Position = vec4(position.xy, 0.0, 1.0);
|
|
}
|
|
`,
|
|
fragmentShader: `
|
|
precision highp float;
|
|
uniform float uTime;
|
|
uniform float uScroll;
|
|
uniform float uPulse;
|
|
uniform vec2 uPointer;
|
|
varying vec2 vUv;
|
|
|
|
float hash(vec2 p) {
|
|
p = fract(p * vec2(123.34, 456.21));
|
|
p += dot(p, p + 34.345);
|
|
return fract(p.x * p.y);
|
|
}
|
|
|
|
float noise(vec2 p) {
|
|
vec2 i = floor(p);
|
|
vec2 f = fract(p);
|
|
float a = hash(i);
|
|
float b = hash(i + vec2(1.0, 0.0));
|
|
float c = hash(i + vec2(0.0, 1.0));
|
|
float d = hash(i + vec2(1.0, 1.0));
|
|
vec2 u = f * f * (3.0 - 2.0 * f);
|
|
return mix(a, b, u.x) + (c - a) * u.y * (1.0 - u.x) + (d - b) * u.x * u.y;
|
|
}
|
|
|
|
void main() {
|
|
vec2 uv = vUv;
|
|
vec2 p = (uv - 0.5) * vec2(1.55, 1.0);
|
|
float t = uTime * 0.16;
|
|
float n = noise(p * 5.2 + vec2(t * 1.6, -t + uScroll * 2.0));
|
|
float n2 = noise(p * 12.0 - vec2(t, t * 1.4));
|
|
float ring = sin((length(p - uPointer * 0.18) * 12.0) - t * 18.0 + uScroll * 6.0);
|
|
float acid = smoothstep(0.18, 0.98, n * 0.72 + n2 * 0.28 + ring * 0.12);
|
|
vec3 lime = vec3(0.84, 1.0, 0.13);
|
|
vec3 mint = vec3(0.38, 1.0, 0.84);
|
|
vec3 pink = vec3(1.0, 0.22, 0.95);
|
|
vec3 blue = vec3(0.34, 0.66, 1.0);
|
|
vec3 color = mix(mix(lime, mint, uv.x), mix(pink, blue, uv.y), acid);
|
|
float vignette = smoothstep(0.86, 0.18, length(uv - 0.5));
|
|
float alpha = (0.12 + acid * 0.26 + uPulse * 0.06) * vignette;
|
|
gl_FragColor = vec4(color, alpha);
|
|
}
|
|
`,
|
|
}),
|
|
);
|
|
shader.position.z = -4;
|
|
scene.add(shader);
|
|
|
|
const geometry = new THREE.BufferGeometry();
|
|
const count = 420;
|
|
const positions = new Float32Array(count * 3);
|
|
const colors = new Float32Array(count * 3);
|
|
const color = new THREE.Color();
|
|
|
|
for (let index = 0; index < count; index += 1) {
|
|
const radius = 1.3 + Math.random() * 4.2;
|
|
const angle = index * 0.43;
|
|
const spin = Math.sin(index * 1.17) * 0.8;
|
|
positions[index * 3] = Math.cos(angle) * radius + spin;
|
|
positions[index * 3 + 1] = Math.sin(angle * 1.14) * radius * 0.72;
|
|
positions[index * 3 + 2] = (Math.random() - 0.5) * 4.4;
|
|
|
|
const hue = (0.28 + (index % 96) / 180) % 1;
|
|
color.setHSL(hue, 0.92, index % 3 === 0 ? 0.66 : 0.53);
|
|
colors[index * 3] = color.r;
|
|
colors[index * 3 + 1] = color.g;
|
|
colors[index * 3 + 2] = color.b;
|
|
}
|
|
|
|
geometry.setAttribute("position", new THREE.BufferAttribute(positions, 3));
|
|
geometry.setAttribute("color", new THREE.BufferAttribute(colors, 3));
|
|
|
|
const material = new THREE.PointsMaterial({
|
|
size: 0.075,
|
|
vertexColors: true,
|
|
transparent: true,
|
|
opacity: 0.76,
|
|
depthWrite: false,
|
|
blending: THREE.AdditiveBlending,
|
|
});
|
|
|
|
const particles = new THREE.Points(geometry, material);
|
|
group.add(particles);
|
|
|
|
const knot = new THREE.Mesh(
|
|
new THREE.TorusKnotGeometry(1.24, 0.22, 96, 12, 2, 5),
|
|
new THREE.MeshBasicMaterial({
|
|
color: 0xd7ff2d,
|
|
transparent: true,
|
|
opacity: 0.24,
|
|
wireframe: true,
|
|
}),
|
|
);
|
|
knot.position.set(1.4, -0.2, -0.8);
|
|
group.add(knot);
|
|
|
|
const ring = new THREE.Mesh(
|
|
new THREE.TorusGeometry(3.1, 0.018, 8, 120),
|
|
new THREE.MeshBasicMaterial({
|
|
color: 0x69ffe0,
|
|
transparent: true,
|
|
opacity: 0.34,
|
|
}),
|
|
);
|
|
ring.rotation.set(1.12, 0.14, -0.24);
|
|
group.add(ring);
|
|
|
|
let frameId = 0;
|
|
let scrollProgress = 0;
|
|
const pointerTarget = new THREE.Vector2(0, 0);
|
|
|
|
const syncSize = () => {
|
|
const width = Math.max(target.clientWidth, 1);
|
|
const height = Math.max(target.clientHeight, 1);
|
|
camera.aspect = width / height;
|
|
camera.updateProjectionMatrix();
|
|
renderer.setSize(width, height, false);
|
|
};
|
|
|
|
const onPointerMove = (event: PointerEvent) => {
|
|
const x = event.clientX / Math.max(window.innerWidth, 1) - 0.5;
|
|
const y = event.clientY / Math.max(window.innerHeight, 1) - 0.5;
|
|
pointerTarget.set(x, -y);
|
|
group.rotation.y = x * 0.34;
|
|
group.rotation.x = y * -0.18;
|
|
};
|
|
|
|
const animate = () => {
|
|
const time = performance.now() * 0.001;
|
|
uniforms.uTime.value = time;
|
|
uniforms.uScroll.value += (scrollProgress - uniforms.uScroll.value) * 0.08;
|
|
uniforms.uPulse.value = 0.42 + Math.sin(time * 0.9) * 0.16;
|
|
uniforms.uPointer.value.lerp(pointerTarget, 0.08);
|
|
particles.rotation.z = time * 0.055 + uniforms.uScroll.value * 0.28;
|
|
particles.rotation.y = time * 0.04 + uniforms.uScroll.value * 0.42;
|
|
knot.rotation.x = time * 0.21 + uniforms.uScroll.value * 0.8;
|
|
knot.rotation.y = time * 0.28;
|
|
ring.rotation.z = time * -0.08 - uniforms.uScroll.value * 0.5;
|
|
group.position.y = uniforms.uScroll.value * -0.72;
|
|
renderer.render(scene, camera);
|
|
frameId = window.requestAnimationFrame(animate);
|
|
};
|
|
|
|
syncSize();
|
|
window.addEventListener("resize", syncSize, { passive: true });
|
|
window.addEventListener("pointermove", onPointerMove, { passive: true });
|
|
frameId = window.requestAnimationFrame(animate);
|
|
|
|
return {
|
|
uniforms,
|
|
setScrollProgress(progress: number) {
|
|
scrollProgress = progress;
|
|
},
|
|
dispose() {
|
|
window.cancelAnimationFrame(frameId);
|
|
window.removeEventListener("resize", syncSize);
|
|
window.removeEventListener("pointermove", onPointerMove);
|
|
group.clear();
|
|
scene.remove(shader);
|
|
shader.geometry.dispose();
|
|
if (Array.isArray(shader.material)) {
|
|
shader.material.forEach((item) => item.dispose());
|
|
} else {
|
|
shader.material.dispose();
|
|
}
|
|
geometry.dispose();
|
|
material.dispose();
|
|
knot.geometry.dispose();
|
|
if (Array.isArray(knot.material)) {
|
|
knot.material.forEach((item) => item.dispose());
|
|
} else {
|
|
knot.material.dispose();
|
|
}
|
|
ring.geometry.dispose();
|
|
if (Array.isArray(ring.material)) {
|
|
ring.material.forEach((item) => item.dispose());
|
|
} else {
|
|
ring.material.dispose();
|
|
}
|
|
renderer.dispose();
|
|
renderer.domElement.remove();
|
|
},
|
|
};
|
|
}
|