<Canvas dpr={[1, 2]} camera={{ fov: 40, position: [0, 0, camZ] }} gl={{ antialias: true, alpha: true }}>

export default function ActDistance({ isMobile }: ActDistanceProps) {
  const root = useRef<HTMLElement>(null);
  const tape = useRef<HTMLDivElement>(null);
  const [linear, setLinear] = useState(false);
  const vw = useViewportWidth();

  const Kt = isMobile ? 5 : 7;
  const padL = vw * 0.55;
  const padR = vw * 0.62;
  const trackLen = (linear ? 13 : isMobile ? 4.4 : 4.6) * vw;
  const f = (au) => linear ? au / NEPTUNE_AU : Math.pow(au / NEPTUNE_AU, 0.45);
  const x = (au) => padL + trackLen * f(au);
  const tapeW = padL + trackLen + padR;
  const maxShift = Math.max(tapeW - vw, 1);
  const sunD = SUN.radiusEarth * Kt;

  // 几何与抵达点写入 ref，供 scrub 回调读取（切换线性无需重建 ScrollTrigger）
  const geo = useRef({ maxShift, arrivals: [] as {slug:string, at:number}[], blankAt: 0 });
  geo.current.maxShift = maxShift;
  const at = (au:number) => clamp01((x(au) - vw*0.5) / maxShift);
  geo.current.arrivals = PLANETS.map(p => ({slug: p.slug, at: clamp01(at(p.aAU))}));
  geo.current.blankAt = clamp01(at(BLANK_AU));

  const progress = useRef(0);
  const shownSet = useRef(new Set<string>()); // 已抵达的行星/气泡

  useGSAP(() => {
    if (!root.current || !tape.current) return;
    const q = gsap.utils.selector(root);
    const apply = (p: number) => {
      progress.current = p;
      // 卷尺平移（quickTo 平滑）
      tapeX(-p * geo.current.maxShift);
      // 抵达动画：正向穿越播放弹跳，反向穿越收回
      for (const a of geo.current.arrivals) {
        const shown = shownSet.current.has(a.slug);
        if (p >= a.at && !shown) { shownSet.current.add(a.slug); popIn(a.slug); }
        else if (p < a.at && shown) { shownSet.current.delete(a.slug); popOut(a.slug); }
      }
      // blank bubble window
      ...
    };
    const tapeX = gsap.quickTo(tape.current, 'x', { duration: 0.5, ease: 'power2.out' });
    ...
  }, { scope: root, dependencies: [isMobile, vw] });

ScrollTrigger.create({
  trigger: root.current, start: 'top top', end: () => `+=${window.innerHeight*2.5}`,
  pin: true, anticipatePin: 1,
  onUpdate: self => apply(self.progress),
  onRefresh: self => apply(self.progress),
});

const obj = { p: 0 };
const total = linear ? 42 : 26; // — but linear not in deps... use ref for speed? The duration differs per mode. For mobile, we can keep timeline with dependencies [isMobile, vw, linear] — mobile has no pin, rebuild is harmless-ish (progress resets to start, acceptable). But to be safe and consistent, use gsap.to(obj, {p:1, duration: geo.current.total? }) — total depends on linear... use a ref totalRef updated on render, and onRepeat nothing needed since duration fixed at creation. Simpler: on mobile include linear in deps for rebuilding the non-pinned loop; rebuild just restarts巡游 — acceptable UX on mobile.

if (isMobile) {
  const tick = (_: number, dtms: number) => {
    const g = geo.current;
    autoP.current += dtms / 1000 / g.total; // g.total from ref (26 or 42)
    if (autoP.current > 1.06) autoP.current = 0; // 终点停留一拍
    apply(Math.min(autoP.current, 1));
  };
  gsap.ticker.add(tick);
  return () => gsap.ticker.remove(tick);
}

export default function ActDistance({ isMobile }: ActDistanceProps) {
  const root = useRef<HTMLElement>(null);
  const tape = useRef<HTMLDivElement>(null);
  const [linear, setLinear] = useState(false);
  const vw = useViewportWidth();

  const Kt = isMobile ? 5 : 7;
  const padL = vw * 0.55;
  const padR = vw * 0.62;
  const trackLen = (linear ? 13 : isMobile ? 4.4 : 4.6) * vw;
  const f = (au: number) => (linear ? au / NEPTUNE_AU : Math.pow(au / NEPTUNE_AU, 0.45));
  const x = (au: number) => padL + trackLen * f(au);
  const tapeW = padL + trackLen + padR;
  const maxShift = Math.max(tapeW - vw, 1);
  const sunD = SUN.radiusEarth * Kt;

  /* 几何写入 ref：ScrollTrigger 只建一次（不随 linear 重建），回调读取最新几何 */
  const geo = useRef({ maxShift: 1, total: 26, arrivals: [] as { slug: string; at: number }[], blankAt: 0.5 });
  const at = (au: number) => clamp01((x(au) - vw * 0.5) / maxShift);
  geo.current = {
    maxShift,
    total: linear ? 42 : 26,
    arrivals: PLANETS.map((p) => ({ slug: p.slug, at: clamp01(at(p.aAU)) })),
    blankAt: clamp01(at(BLANK_AU)),
  };

  const progress = useRef(0);
  const shown = useRef(new Set<string>());
  const applyRef = useRef<(p: number) => void>(() => {});

  useGSAP(
    () => {
      if (!root.current || !tape.current) return;
      const q = gsap.utils.selector(root);

      // 初始状态
      gsap.set(q('.tape-ball'), { scale: 0 });
      gsap.set(q('.tape-pop'), { autoAlpha: 0, y: 10 });
      gsap.set(q('.tape-blank'), { autoAlpha: 0, y: 26 });
      gsap.set(tape.current, { x: 0 });
      shown.current.clear();

      // 太阳开场
      gsap.fromTo(q('.tape-sun'), { scale: 0.5, opacity: 0.5 }, { scale: 1, opacity: 1, duration: 0.8, ease: 'power1.out' });

      const tapeX = gsap.quickTo(tape.current, 'x', { duration: 0.55, ease: 'power2.out' });

      const popIn = (slug: string) => {
        gsap.fromTo(q(`[data-tape-planet="${slug}"] .tape-ball`), { scale: 0 }, { scale: 1, duration: 0.55, ease: 'back.out(2.2)', overwrite: 'auto' });
        gsap.fromTo(q(`[data-tape-planet="${slug}"] .tape-pop`), { autoAlpha: 0, y: 10 }, { autoAlpha: 1, y: 0, duration: 0.4, delay: 0.12, ease: 'power1.out', overwrite: 'auto' });
      };
      const popOut = (slug: string) => {
        gsap.to(q(`[data-tape-planet="${slug}"] .tape-ball`), { scale: 0, duration: 0.22, ease: 'power1.in', overwrite: 'auto' });
        gsap.to(q(`[data-tape-planet="${slug}"] .tape-pop`), { autoAlpha: 0, y: 10, duration: 0.18, overwrite: 'auto' });
      };

      const apply = (p: number) => {
        progress.current = p;
        const g = geo.current;
        tapeX(-p * g.maxShift);
        for (const a of g.arrivals) {
          const is = shown.current.has(a.slug);
          if (p >= a.at && !is) { shown.current.add(a.slug); popIn(a.slug); }
          else if (p < a.at && is) { shown.current.delete(a.slug); popOut(a.slug); }
        }
        // 空白气泡：进入窗口显示，离开隐藏
        const inWin = p > g.blankAt - 0.06 && p < g.blankAt + 0.09;
        const bShown = shown.current.has('blank');
        if (inWin && !bShown) { shown.current.add('blank'); gsap.to(q('.tape-blank'), { autoAlpha: 1, y: 0, duration: 0.45, ease: 'power1.out', overwrite: 'auto' }); }
        else if (!inWin && bShown) { shown.current.delete('blank'); gsap.to(q('.tape-blank'), { autoAlpha: 0, y: -22, duration: 0.35, ease: 'power1.in', overwrite: 'auto' }); }
      };
      applyRef.current = apply;

      if (isMobile) {
        // 自动巡游：ticker 推进进度，几何变化（切换线性）即时生效
        let last = 0;
        const tick = (time: number) => {
          const dt = last ? Math.min(time - last, 0.1) : 0;
          last = time;
          let np = progress.current + dt / geo.current.total;
          if (np > 1.06) np = 0; // 终点停留一拍再重播
          apply(Math.min(np, 1));
        };
        gsap.ticker.add(tick);
        return () => { gsap.ticker.remove(tick); };
      }

      const st = ScrollTrigger.create({
        trigger: root.current,
        start: 'top top',
        end: () => `+=${window.innerHeight * 2.5}`,
        pin: true,
        anticipatePin: 1,
        onUpdate: (self) => apply(self.progress),
        onRefresh: (self) => apply(self.progress),
      });
      const t = setTimeout(() => ScrollTrigger.refresh(), 600);
      return () => { st.kill(); clearTimeout(t); };
    },
    { scope: root, dependencies: [isMobile, vw] },
  );

  // 切换线性/视口变化后，用最新几何重放当前进度（无需滚动即更新画面）
  useEffect(() => { applyRef.current(progress.current); }, [linear, vw]);

const omega = rotationRate(meta); // 2π / rotationHours → rad per "模拟小时"
spinRef.current.rotation.y += omega * delta; // delta 是真实秒！

const targetOmega = omega * simHoursPerRealSec(rate)  // rad per real sec
omegaVis = clamp magnitude to MAX_SPIN (e.g. 1.2 rad/s ≈ 0.19 rev/s)
smooth damp omegaCur → omegaVis; angle += omegaCur * delta

// 目标角速度（弧度/真实秒）= 2π/rotationHours * (模拟小时/真实秒)
const targetOmega = (2π / rotationHours) * (clock.playing ? clock.rate / 3600 : 0)

omegaCur.current = damp(omegaCur.current, clampedTarget, 4, delta)
spinRef.current.rotation.y += omegaCur.current * delta

const omegaRef = useRef(0); // 当前平滑后的角速度（弧度/真实秒）

useFrame((_, delta) => {
  ...
  // 自转跟随模拟时钟：角速度 = 2π/自转周期(h) × 模拟速率(小时/真实秒)
  // 高倍率下按 MAX_SPIN 限幅，避免频闪；暂停时归零；金星/天王星负值逆向
  const rateH = clock.playing ? clock.rate / 3600 : 0; // 模拟小时 / 真实秒
  const target = THREE.MathUtils.clamp(omega * rateH, -MAX_SPIN, MAX_SPIN);
  omegaRef.current = damp(omegaRef.current, target, 4, delta);
  if (spinRef.current) spinRef.current.rotation.y += omegaRef.current * delta;
  if (cloudRef.current) cloudRef.current.rotation.y += (omegaRef.current * 1.15 + (clock.playing ? 0.004 : 0)) * delta;

<div className="flex gap-6 overflow-x-auto no-scrollbar pb-4 snap-x snap-mandatory md:snap-none">

<div className="flex gap-6 overflow-x-auto no-scrollbar pb-4 snap-x snap-mandatory md:snap-none md:flex-wrap md:justify-center md:overflow-visible">