feat: enhance new website experiment motion
This commit is contained in:
boos
@@ -0,0 +1,525 @@
|
||||
"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();
|
||||
},
|
||||
};
|
||||
}
|
||||
@@ -1,203 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import type * as ThreeNamespace from "three";
|
||||
|
||||
type ThreeRuntime = typeof ThreeNamespace;
|
||||
|
||||
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 AcidThreeField() {
|
||||
const mountRef = useRef<HTMLDivElement>(null);
|
||||
const [fallback, setFallback] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const mount = mountRef.current;
|
||||
if (!mount) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
if (shouldSkipWebgl()) {
|
||||
setFallback(true);
|
||||
return undefined;
|
||||
}
|
||||
|
||||
let frameId = 0;
|
||||
let disposed = false;
|
||||
let cleanup: (() => void) | undefined;
|
||||
|
||||
import("three")
|
||||
.then((THREE) => {
|
||||
if (disposed || !mountRef.current) {
|
||||
return;
|
||||
}
|
||||
|
||||
cleanup = createScene(THREE, mountRef.current);
|
||||
})
|
||||
.catch(() => {
|
||||
if (!disposed) {
|
||||
setFallback(true);
|
||||
}
|
||||
});
|
||||
|
||||
function createScene(THREE: ThreeRuntime, target: HTMLDivElement) {
|
||||
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 geometry = new THREE.BufferGeometry();
|
||||
const count = 340;
|
||||
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);
|
||||
|
||||
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;
|
||||
group.rotation.y = x * 0.34;
|
||||
group.rotation.x = y * -0.18;
|
||||
};
|
||||
|
||||
const animate = () => {
|
||||
const time = performance.now() * 0.001;
|
||||
particles.rotation.z = time * 0.055;
|
||||
particles.rotation.y = time * 0.04;
|
||||
knot.rotation.x = time * 0.21;
|
||||
knot.rotation.y = time * 0.28;
|
||||
ring.rotation.z = time * -0.08;
|
||||
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 () => {
|
||||
window.cancelAnimationFrame(frameId);
|
||||
window.removeEventListener("resize", syncSize);
|
||||
window.removeEventListener("pointermove", onPointerMove);
|
||||
group.clear();
|
||||
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();
|
||||
};
|
||||
}
|
||||
|
||||
return () => {
|
||||
disposed = true;
|
||||
window.cancelAnimationFrame(frameId);
|
||||
cleanup?.();
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={mountRef}
|
||||
className={fallback ? "new-acid-three is-fallback" : "new-acid-three"}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
);
|
||||
}
|
||||
+11
-11
@@ -1,7 +1,7 @@
|
||||
import type { Metadata } from "next";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import AcidThreeField from "./AcidThreeField";
|
||||
import AcidExperience from "./AcidExperience";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "BossAI / New Signal",
|
||||
@@ -41,7 +41,7 @@ const proofItems = [
|
||||
export default function NewWebsiteExperiment() {
|
||||
return (
|
||||
<main className="new-acid-page">
|
||||
<AcidThreeField />
|
||||
<AcidExperience />
|
||||
<div className="new-acid-noise" aria-hidden="true" />
|
||||
<header className="new-acid-nav" aria-label="BossAI 实验页导航">
|
||||
<Link className="new-acid-brand" href="/" aria-label="BossAI 首页">
|
||||
@@ -58,7 +58,7 @@ export default function NewWebsiteExperiment() {
|
||||
</Link>
|
||||
</header>
|
||||
|
||||
<section className="new-acid-hero">
|
||||
<section className="new-acid-hero" data-new-motion="section">
|
||||
<div className="new-acid-hero-copy">
|
||||
<div className="new-acid-kicker">
|
||||
<span />
|
||||
@@ -81,7 +81,7 @@ export default function NewWebsiteExperiment() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="new-acid-router" aria-label="BossAI 路由演示">
|
||||
<div className="new-acid-router" data-new-motion="card" aria-label="BossAI 路由演示">
|
||||
<div className="new-acid-router-top">
|
||||
<span>Live mesh</span>
|
||||
<strong>route: healthy</strong>
|
||||
@@ -102,7 +102,7 @@ export default function NewWebsiteExperiment() {
|
||||
</div>
|
||||
<div className="new-acid-route-list">
|
||||
{routeRows.map(([type, model, state]) => (
|
||||
<div key={type}>
|
||||
<div key={type} data-new-motion="card">
|
||||
<span>{type}</span>
|
||||
<strong>{model}</strong>
|
||||
<em>{state}</em>
|
||||
@@ -112,9 +112,9 @@ export default function NewWebsiteExperiment() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="gateway" className="new-acid-signal-grid">
|
||||
<section id="gateway" className="new-acid-signal-grid" data-new-motion="section">
|
||||
{signalCards.map(([label, value, body]) => (
|
||||
<article key={label}>
|
||||
<article key={label} data-new-motion="card">
|
||||
<div>
|
||||
<span>{label}</span>
|
||||
<strong>{value}</strong>
|
||||
@@ -124,7 +124,7 @@ export default function NewWebsiteExperiment() {
|
||||
))}
|
||||
</section>
|
||||
|
||||
<section id="workflow" className="new-acid-band">
|
||||
<section id="workflow" className="new-acid-band" data-new-motion="section">
|
||||
<div>
|
||||
<span>Workflow Field</span>
|
||||
<h2>把 Comfy API、模型路由和用户余额放进同一条生产链路</h2>
|
||||
@@ -136,7 +136,7 @@ export default function NewWebsiteExperiment() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="studio" className="new-acid-proof">
|
||||
<section id="studio" className="new-acid-proof" data-new-motion="section">
|
||||
<div className="new-acid-proof-copy">
|
||||
<span>Creation Loop</span>
|
||||
<h2>从调用到产出，每一步都有日志、成本和归档位置</h2>
|
||||
@@ -146,7 +146,7 @@ export default function NewWebsiteExperiment() {
|
||||
</div>
|
||||
<div className="new-acid-proof-steps">
|
||||
{proofItems.map(([step, title, body]) => (
|
||||
<article key={step}>
|
||||
<article key={step} data-new-motion="card">
|
||||
<span>{step}</span>
|
||||
<strong>{title}</strong>
|
||||
<p>{body}</p>
|
||||
@@ -155,7 +155,7 @@ export default function NewWebsiteExperiment() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="new-acid-final">
|
||||
<section className="new-acid-final" data-new-motion="section">
|
||||
<h2>同一个 BoosAPI 内核，另一种官网表达。</h2>
|
||||
<div className="new-acid-actions">
|
||||
<Link className="new-acid-primary" href="/">
|
||||
|
||||
Reference in New Issue
Block a user