feat: enhance new website experiment motion

website/app/globals.css

@@ -2357,6 +2357,9 @@ a {
   --new-panel: rgba(8, 11, 12, 0.68);
   --new-panel-strong: rgba(9, 13, 16, 0.84);
   --new-muted: rgba(248, 255, 244, 0.66);
+  --acid-scroll: 0;
+  --acid-hue-shift: 0;
+  --acid-band-shift: 0px;
   position: relative;
   min-height: 100dvh;
   overflow: hidden;
@@ -2367,6 +2370,7 @@ a {
     #050509;
   color: var(--new-ink);
   isolation: isolate;
+  filter: hue-rotate(calc(var(--acid-hue-shift) * 1deg));
 }
 
 .new-acid-page::before {
@@ -2382,6 +2386,7 @@ a {
   opacity: 0.34;
   mix-blend-mode: screen;
   mask-image: linear-gradient(to bottom, black, transparent 82%);
+  transform: translate3d(0, calc(var(--acid-band-shift) * -0.22), 0);
 }
 
 .new-acid-page::after {
@@ -2395,7 +2400,7 @@ a {
     radial-gradient(circle at 48% 42%, rgba(103, 255, 216, 0.18), transparent 46%);
   filter: saturate(1.35) contrast(1.08);
   opacity: 0.46;
-  transform: rotate(-8deg);
+  transform: translate3d(0, calc(var(--acid-band-shift) * 0.16), 0) rotate(calc(-8deg + var(--acid-scroll) * 12deg));
 }
 
 .new-acid-noise {
@@ -2425,11 +2430,19 @@ a {
 
 .new-acid-three.is-fallback {
   background:
-    conic-gradient(from 44deg at 56% 44%, rgba(215, 255, 45, 0.22), rgba(255, 61, 242, 0.18), rgba(103, 255, 216, 0.2), rgba(215, 255, 45, 0.22)),
+    conic-gradient(from calc(44deg + var(--acid-scroll) * 80deg) at 56% 44%, rgba(215, 255, 45, 0.22), rgba(255, 61, 242, 0.18), rgba(103, 255, 216, 0.2), rgba(215, 255, 45, 0.22)),
     repeating-linear-gradient(118deg, transparent 0 22px, rgba(255, 255, 255, 0.08) 22px 24px);
   filter: saturate(1.4);
 }
 
+.new-acid-motion-ready [data-new-motion] {
+  will-change: transform, opacity;
+}
+
+.new-acid-lenis-active {
+  scroll-behavior: auto;
+}
+
 .new-acid-nav,
 .new-acid-hero,
 .new-acid-signal-grid,
@@ -2635,6 +2648,7 @@ a {
     repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 28px),
     repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 28px);
   mask-image: linear-gradient(to bottom, transparent, black 16%, black 72%, transparent);
+  transform: translate3d(0, calc(var(--acid-band-shift) * 0.34), 0);
 }
 
 .new-acid-router-top,
@@ -2755,6 +2769,19 @@ a {
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
 }
 
+.new-acid-signal-grid article::before,
+.new-acid-proof-steps article::before {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  content: "";
+  border-radius: inherit;
+  background:
+    linear-gradient(112deg, transparent 0 36%, rgba(215, 255, 45, calc(0.08 + var(--acid-scroll) * 0.08)) 42%, transparent 54%),
+    radial-gradient(circle at 80% 18%, rgba(255, 61, 242, 0.14), transparent 34%);
+  opacity: 0.74;
+}
+
 .new-acid-signal-grid article:nth-child(even) {
   transform: translateY(24px);
 }
@@ -2838,12 +2865,14 @@ a {
 .new-acid-proof-copy,
 .new-acid-proof-steps article,
 .new-acid-final {
+  position: relative;
   border: 1px solid rgba(248, 255, 244, 0.18);
   border-radius: 28px;
   background: var(--new-panel-strong);
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
   backdrop-filter: blur(18px) saturate(1.18);
   -webkit-backdrop-filter: blur(18px) saturate(1.18);
+  overflow: hidden;
 }
 
 .new-acid-proof-copy {
@@ -3039,4 +3068,8 @@ a {
   .new-acid-three canvas {
     display: none;
   }
+
+  .new-acid-motion-ready [data-new-motion] {
+    will-change: auto;
+  }
 }

website/app/new/AcidExperience.tsx

@@ -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();
+    },
+  };
+}

website/app/new/AcidThreeField.tsx

@@ -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"
-    />
-  );
-}

website/app/new/page.tsx

@@ -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="/">