Merge remote-tracking branch 'origin/main'

# Conflicts: # docs/index.html # docs/sitemap.xml
2026-10-07 11:19:12 +08:00
parent ec963e3a79 d5cf818134
commit 7ae9dbcde7
100 changed files with 3844 additions and 2600 deletions
@@ -0,0 +1 @@
+osg.osglab.com
@@ -1,373 +0,0 @@
-/*!
- * OSGKeyboard hero beams — vanilla Three.js recreation inspired by
- * React Bits "Beams" (https://reactbits.dev/backgrounds/beams).
- * Parameters match the shared demo preset.
- * three.js is MIT; this file is project code.
- */
-(function (global) {
-  "use strict";
-
-  const NOISE = `
-float random (in vec2 st) {
-  return fract(sin(dot(st.xy, vec2(12.9898,78.233))) * 43758.5453123);
-}
-float noise (in vec2 st) {
-  vec2 i = floor(st);
-  vec2 f = fract(st);
-  float a = random(i);
-  float b = random(i + vec2(1.0, 0.0));
-  float c = random(i + vec2(0.0, 1.0));
-  float d = random(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;
-}
-vec4 permute(vec4 x){return mod(((x*34.0)+1.0)*x, 289.0);}
-vec4 taylorInvSqrt(vec4 r){return 1.79284291400159 - 0.85373472095314 * r;}
-vec3 fade(vec3 t) {return t*t*t*(t*(t*6.0-15.0)+10.0);}
-float cnoise(vec3 P){
-  vec3 Pi0 = floor(P);
-  vec3 Pi1 = Pi0 + vec3(1.0);
-  Pi0 = mod(Pi0, 289.0);
-  Pi1 = mod(Pi1, 289.0);
-  vec3 Pf0 = fract(P);
-  vec3 Pf1 = Pf0 - vec3(1.0);
-  vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);
-  vec4 iy = vec4(Pi0.yy, Pi1.yy);
-  vec4 iz0 = Pi0.zzzz;
-  vec4 iz1 = Pi1.zzzz;
-  vec4 ixy = permute(permute(ix) + iy);
-  vec4 ixy0 = permute(ixy + iz0);
-  vec4 ixy1 = permute(ixy + iz1);
-  vec4 gx0 = ixy0 / 7.0;
-  vec4 gy0 = fract(floor(gx0) / 7.0) - 0.5;
-  gx0 = fract(gx0);
-  vec4 gz0 = vec4(0.5) - abs(gx0) - abs(gy0);
-  vec4 sz0 = step(gz0, vec4(0.0));
-  gx0 -= sz0 * (step(0.0, gx0) - 0.5);
-  gy0 -= sz0 * (step(0.0, gy0) - 0.5);
-  vec4 gx1 = ixy1 / 7.0;
-  vec4 gy1 = fract(floor(gx1) / 7.0) - 0.5;
-  gx1 = fract(gx1);
-  vec4 gz1 = vec4(0.5) - abs(gx1) - abs(gy1);
-  vec4 sz1 = step(gz1, vec4(0.0));
-  gx1 -= sz1 * (step(0.0, gx1) - 0.5);
-  gy1 -= sz1 * (step(0.0, gy1) - 0.5);
-  vec3 g000 = vec3(gx0.x,gy0.x,gz0.x);
-  vec3 g100 = vec3(gx0.y,gy0.y,gz0.y);
-  vec3 g010 = vec3(gx0.z,gy0.z,gz0.z);
-  vec3 g110 = vec3(gx0.w,gy0.w,gz0.w);
-  vec3 g001 = vec3(gx1.x,gy1.x,gz1.x);
-  vec3 g101 = vec3(gx1.y,gy1.y,gz1.y);
-  vec3 g011 = vec3(gx1.z,gy1.z,gz1.z);
-  vec3 g111 = vec3(gx1.w,gy1.w,gz1.w);
-  vec4 norm0 = taylorInvSqrt(vec4(dot(g000,g000),dot(g010,g010),dot(g100,g100),dot(g110,g110)));
-  g000 *= norm0.x; g010 *= norm0.y; g100 *= norm0.z; g110 *= norm0.w;
-  vec4 norm1 = taylorInvSqrt(vec4(dot(g001,g001),dot(g011,g011),dot(g101,g101),dot(g111,g111)));
-  g001 *= norm1.x; g011 *= norm1.y; g101 *= norm1.z; g111 *= norm1.w;
-  float n000 = dot(g000, Pf0);
-  float n100 = dot(g100, vec3(Pf1.x,Pf0.yz));
-  float n010 = dot(g010, vec3(Pf0.x,Pf1.y,Pf0.z));
-  float n110 = dot(g110, vec3(Pf1.xy,Pf0.z));
-  float n001 = dot(g001, vec3(Pf0.xy,Pf1.z));
-  float n101 = dot(g101, vec3(Pf1.x,Pf0.y,Pf1.z));
-  float n011 = dot(g011, vec3(Pf0.x,Pf1.yz));
-  float n111 = dot(g111, Pf1);
-  vec3 fade_xyz = fade(Pf0);
-  vec4 n_z = mix(vec4(n000,n100,n010,n110),vec4(n001,n101,n011,n111),fade_xyz.z);
-  vec2 n_yz = mix(n_z.xy,n_z.zw,fade_xyz.y);
-  float n_xyz = mix(n_yz.x,n_yz.y,fade_xyz.x);
-  return 2.2 * n_xyz;
-}
-`;
-
-  function hexToNormalizedRGB(hex) {
-    const clean = String(hex).replace("#", "");
-    const full = clean.length === 3
-      ? clean.split("").map((c) => c + c).join("")
-      : clean;
-    return [
-      parseInt(full.substring(0, 2), 16) / 255,
-      parseInt(full.substring(2, 4), 16) / 255,
-      parseInt(full.substring(4, 6), 16) / 255
-    ];
-  }
-
-  function extendMaterial(THREE, BaseMaterial, cfg) {
-    const physical = THREE.ShaderLib.physical;
-    const { vertexShader: baseVert, fragmentShader: baseFrag, uniforms: baseUniforms } = physical;
-    const baseDefines = physical.defines || {};
-    const uniforms = THREE.UniformsUtils.clone(baseUniforms);
-    const defaults = new BaseMaterial(cfg.material || {});
-
-    if (defaults.color) uniforms.diffuse.value = defaults.color;
-    if ("roughness" in defaults) uniforms.roughness.value = defaults.roughness;
-    if ("metalness" in defaults) uniforms.metalness.value = defaults.metalness;
-    if ("envMap" in defaults) uniforms.envMap.value = defaults.envMap;
-    if ("envMapIntensity" in defaults) uniforms.envMapIntensity.value = defaults.envMapIntensity;
-
-    Object.entries(cfg.uniforms || {}).forEach(([key, u]) => {
-      uniforms[key] = u !== null && typeof u === "object" && "value" in u ? u : { value: u };
-    });
-
-    let vert = `${cfg.header}\n${cfg.vertexHeader || ""}\n${baseVert}`;
-    let frag = `${cfg.header}\n${cfg.fragmentHeader || ""}\n${baseFrag}`;
-    for (const [inc, code] of Object.entries(cfg.vertex || {})) {
-      vert = vert.replace(inc, `${inc}\n${code}`);
-    }
-    for (const [inc, code] of Object.entries(cfg.fragment || {})) {
-      frag = frag.replace(inc, `${inc}\n${code}`);
-    }
-
-    return new THREE.ShaderMaterial({
-      defines: { ...baseDefines },
-      uniforms,
-      vertexShader: vert,
-      fragmentShader: frag,
-      lights: true,
-      fog: !!(cfg.material && cfg.material.fog)
-    });
-  }
-
-  function createStackedPlanesBufferGeometry(THREE, n, width, height, spacing, heightSegments) {
-    const geometry = new THREE.BufferGeometry();
-    const numVertices = n * (heightSegments + 1) * 2;
-    const numFaces = n * heightSegments * 2;
-    const positions = new Float32Array(numVertices * 3);
-    const indices = new Uint32Array(numFaces * 3);
-    const uvs = new Float32Array(numVertices * 2);
-
-    let vertexOffset = 0;
-    let indexOffset = 0;
-    let uvOffset = 0;
-    const totalWidth = n * width + (n - 1) * spacing;
-    const xOffsetBase = -totalWidth / 2;
-
-    for (let i = 0; i < n; i++) {
-      const xOffset = xOffsetBase + i * (width + spacing);
-      const uvXOffset = Math.random() * 300;
-      const uvYOffset = Math.random() * 300;
-
-      for (let j = 0; j <= heightSegments; j++) {
-        const y = height * (j / heightSegments - 0.5);
-        positions.set([xOffset, y, 0, xOffset + width, y, 0], vertexOffset * 3);
-        const uvY = j / heightSegments;
-        uvs.set([uvXOffset, uvY + uvYOffset, uvXOffset + 1, uvY + uvYOffset], uvOffset);
-
-        if (j < heightSegments) {
-          const a = vertexOffset;
-          const b = vertexOffset + 1;
-          const c = vertexOffset + 2;
-          const d = vertexOffset + 3;
-          indices.set([a, b, c, c, b, d], indexOffset);
-          indexOffset += 6;
-        }
-        vertexOffset += 2;
-        uvOffset += 4;
-      }
-    }
-
-    geometry.setAttribute("position", new THREE.BufferAttribute(positions, 3));
-    geometry.setAttribute("uv", new THREE.BufferAttribute(uvs, 2));
-    geometry.setIndex(new THREE.BufferAttribute(indices, 1));
-    geometry.computeVertexNormals();
-    return geometry;
-  }
-
-  /**
-   * @param {HTMLCanvasElement} canvas
-   * @param {object} options
-   */
-  function create(canvas, options) {
-    const THREE = global.THREE;
-    if (!THREE || !canvas) throw new Error("THREE or canvas missing");
-
-    const {
-      beamWidth = 4.5,
-      beamHeight = 6,
-      beamNumber = 26,
-      lightColor = "#7CFFB2",
-      speed = 4.5,
-      noiseIntensity = 2.65,
-      scale = 0.62,
-      rotation = 208,
-      background = "#000000",
-      reduceMotion = false,
-      heightSegments = 100
-    } = options || {};
-
-    const scene = new THREE.Scene();
-    scene.background = new THREE.Color(background);
-
-    const camera = new THREE.PerspectiveCamera(30, 1, 0.1, 100);
-    camera.position.set(0, 0, 20);
-
-    const renderer = new THREE.WebGLRenderer({
-      canvas,
-      antialias: true,
-      alpha: false,
-      powerPreference: "low-power"
-    });
-    renderer.setClearColor(background, 1);
-    renderer.outputColorSpace = THREE.SRGBColorSpace;
-
-    const material = extendMaterial(THREE, THREE.MeshStandardMaterial, {
-      header: `
-  varying vec3 vEye;
-  varying float vNoise;
-  varying vec2 vUv;
-  varying vec3 vPosition;
-  uniform float time;
-  uniform float uSpeed;
-  uniform float uNoiseIntensity;
-  uniform float uScale;
-  ${NOISE}`,
-      vertexHeader: `
-  float getPos(vec3 pos) {
-    vec3 noisePos =
-      vec3(pos.x * 0., pos.y - uv.y, pos.z + time * uSpeed * 3.) * uScale;
-    return cnoise(noisePos);
-  }
-  vec3 getCurrentPos(vec3 pos) {
-    vec3 newpos = pos;
-    newpos.z += getPos(pos);
-    return newpos;
-  }
-  vec3 getNormal(vec3 pos) {
-    vec3 curpos = getCurrentPos(pos);
-    vec3 nextposX = getCurrentPos(pos + vec3(0.01, 0.0, 0.0));
-    vec3 nextposZ = getCurrentPos(pos + vec3(0.0, -0.01, 0.0));
-    vec3 tangentX = normalize(nextposX - curpos);
-    vec3 tangentZ = normalize(nextposZ - curpos);
-    return normalize(cross(tangentZ, tangentX));
-  }`,
-      vertex: {
-        "#include <begin_vertex>": "transformed.z += getPos(transformed.xyz);",
-        "#include <beginnormal_vertex>": "objectNormal = getNormal(position.xyz);"
-      },
-      fragment: {
-        "#include <dithering_fragment>": `
-    float randomNoise = noise(gl_FragCoord.xy);
-    gl_FragColor.rgb -= randomNoise / 15. * uNoiseIntensity;`
-      },
-      material: { fog: true },
-      uniforms: {
-        diffuse: new THREE.Color(...hexToNormalizedRGB("#000000")),
-        time: { value: 0 },
-        roughness: 0.3,
-        metalness: 0.3,
-        uSpeed: { value: speed },
-        envMapIntensity: 10,
-        uNoiseIntensity: { value: noiseIntensity },
-        uScale: { value: scale }
-      }
-    });
-
-    const geometry = createStackedPlanesBufferGeometry(
-      THREE,
-      beamNumber,
-      beamWidth,
-      beamHeight,
-      0,
-      heightSegments
-    );
-    const mesh = new THREE.Mesh(geometry, material);
-
-    const group = new THREE.Group();
-    group.rotation.z = THREE.MathUtils.degToRad(rotation);
-    group.add(mesh);
-
-    const dir = new THREE.DirectionalLight(lightColor, 1);
-    dir.position.set(0, 3, 10);
-    group.add(dir);
-
-    scene.add(group);
-    scene.add(new THREE.AmbientLight(0xffffff, 1));
-
-    let playing = !reduceMotion;
-    let visible = true;
-    let raf = 0;
-    let last = performance.now();
-    let disposed = false;
-
-    function resize() {
-      const parent = canvas.parentElement || canvas;
-      const rect = parent.getBoundingClientRect();
-      const w = Math.max(1, Math.floor(rect.width));
-      const h = Math.max(1, Math.floor(rect.height));
-      const dpr = Math.min(window.devicePixelRatio || 1, reduceMotion ? 1 : 1.75);
-      renderer.setPixelRatio(dpr);
-      renderer.setSize(w, h, false);
-      camera.aspect = w / h;
-      camera.updateProjectionMatrix();
-    }
-
-    function frame(now) {
-      if (disposed) return;
-      raf = requestAnimationFrame(frame);
-      if (!playing || !visible || document.hidden) return;
-      const delta = Math.min(0.05, (now - last) / 1000);
-      last = now;
-      material.uniforms.time.value += 0.1 * delta;
-      renderer.render(scene, camera);
-    }
-
-    function renderOnce() {
-      renderer.render(scene, camera);
-    }
-
-    resize();
-    // Seed a bit of displacement so the first frame isn't flat
-    material.uniforms.time.value = reduceMotion ? 2.4 : 0.2;
-    renderOnce();
-
-    if (!reduceMotion) {
-      last = performance.now();
-      raf = requestAnimationFrame(frame);
-    }
-
-    const ro = new ResizeObserver(() => {
-      resize();
-      renderOnce();
-    });
-    ro.observe(canvas.parentElement || canvas);
-
-    return {
-      setPlaying(next) {
-        playing = !!next && !reduceMotion;
-        if (playing && !raf) {
-          last = performance.now();
-          raf = requestAnimationFrame(frame);
-        }
-      },
-      setVisible(next) {
-        visible = !!next;
-        if (visible && playing && !raf) {
-          last = performance.now();
-          raf = requestAnimationFrame(frame);
-        }
-        if (visible) renderOnce();
-      },
-      setLightColor(hex) {
-        dir.color.set(hex);
-        renderOnce();
-      },
-      setBackground(hex) {
-        scene.background = new THREE.Color(hex);
-        renderer.setClearColor(hex, 1);
-        renderOnce();
-      },
-      resize,
-      destroy() {
-        disposed = true;
-        cancelAnimationFrame(raf);
-        raf = 0;
-        ro.disconnect();
-        geometry.dispose();
-        material.dispose();
-        renderer.dispose();
-      }
-    };
-  }
-
-  global.OSGBeamsHero = { create };
-})(typeof window !== "undefined" ? window : globalThis);
@@ -1,21 +0,0 @@
-The MIT License
-
-Copyright © 2010-2023 three.js authors
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in
-all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.
@@ -1,9 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="36 367 952 291" fill="none" aria-hidden="true">
-  <g fill="currentColor">
-    <path d="M627.511 512.419C627.511 448.783 576.127 397.197 512.741 397.197C449.355 397.197 397.971 448.783 397.971 512.419C397.971 576.054 449.355 627.641 512.741 627.641V637.837C443.746 637.837 387.814 581.686 387.814 512.419C387.814 443.152 443.746 387 512.741 387C581.736 387 637.668 443.152 637.668 512.419C637.668 581.686 581.736 637.837 512.741 637.837V627.641C576.127 627.641 627.511 576.054 627.511 512.419Z"/>
-    <path d="M56.2632 512.419C56.2632 581.686 112.195 637.837 181.19 637.837C250.185 637.837 306.117 581.686 306.117 512.419C306.117 443.152 250.185 387 181.19 387C112.195 387 56.2632 443.152 56.2632 512.419Z"/>
-    <path d="M399.618 562.094L399.618 552.257L512.74 552.257L512.74 562.094L399.618 562.094Z"/>
-    <path d="M512.741 483.398V473.561H625.864V483.398H512.741Z"/>
-    <path d="M843.308 387.981C910.987 387.981 966.093 441.8 968.171 508.975H843.308V518.812H968.096C965.014 585.066 910.324 637.836 843.308 637.836C774.313 637.836 718.381 581.904 718.381 512.909C718.381 443.914 774.312 387.981 843.308 387.981ZM968.234 518.812H968.096C968.187 516.855 968.234 514.888 968.234 512.909C968.234 511.593 968.211 510.281 968.171 508.975H968.234V518.812Z"/>
-  </g>
-</svg>
@@ -1,7 +1,14 @@
 /*!
- * OSGKeyboard website interactions.
- * The page remains useful without JavaScript; this file adds language,
- * theme, and compact mobile navigation controls.
+ * OSGKeyboard 主页交互与动效引擎。
+ * 无 JavaScript 时页面内容完整可读；本文件负责：
+ *   1. 中 / 英双语切换（data-zh / data-en 系列属性，含视频源）
+ *   2. 深浅色主题（默认跟随系统，手动选择后持久化；支持时以圆形扩散过渡）
+ *   3. 移动端导航开合、导航滑块与当前区块高亮
+ *   4. 逐字拆分标题（data-split）
+ *   5. 滚动引擎：进度条、Hero 设备「立起」、媒体视差、四幕滚动叙事（真机录屏随幕切换）
+ *   6. 声波渲染、Hero 语音胶囊打字机、数字计数
+ *   7. 亚克力反光 / 磁吸按钮、FAQ 高度过渡、离屏视频暂停
+ * 开启「减弱动态效果」时，持续动画与指针动效全部停用，内容直接呈现最终态。
 */
 (function () {
  "use strict";
@@ -9,14 +16,90 @@
  const root = document.documentElement;
  const languageButton = document.getElementById("languageToggle");
  const themeButton = document.getElementById("themeToggle");
-  const themeIcon = themeButton?.querySelector(".material-symbols-rounded");
+  const themeIconUse = document.getElementById("themeIconUse");
  const menuButton = document.getElementById("menuToggle");
-  const menuIcon = menuButton?.querySelector(".material-symbols-rounded");
+  const menuIconUse = document.getElementById("menuIconUse");
  const mobileNav = document.getElementById("mobileNav");
  const themeColor = document.querySelector('meta[name="theme-color"]');
  const themeMedia = window.matchMedia("(prefers-color-scheme: dark)");
  const supportedLanguages = new Set(["zh", "en"]);

+  const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  const finePointer = window.matchMedia("(hover: hover) and (pointer: fine)").matches;
+  const canObserve = "IntersectionObserver" in window;
+
+  const TITLES = {
+    zh: "OSGKeyboard｜AI 语音输入法 · 嘴替输入法 · iPhone / iPad / Mac",
+    en: "OSGKeyboard — Agentic Keyboard & AI Voice Keyboard for iPhone and Mac"
+  };
+
+  const clamp = (value, min = 0, max = 1) => Math.min(max, Math.max(min, value));
+
+  // 语言切换后需要重算的模块（胶囊文案、真机录屏、导航滑块）在此登记
+  const languageHooks = [];
+  // 主题切换后需要换源的模块（真机录屏按深浅色各录一份）在此登记
+  const themeHooks = [];
+
+  /* ---------------- 逐字拆分 ---------------- */
+
+  // 每个分组是一段不可断开的文字：英文按词，中文按「到下一个标点为止」的短句，
+  // 与原标题的 word-break: keep-all 断行效果一致，标点也不会落到行首
+  const CJK_PUNCTUATION = /[，。、！？：；）」』》…～]/;
+
+  function groupCharacters(token) {
+    const groups = [];
+    let current = [];
+    for (const character of token) {
+      current.push(character);
+      if (CJK_PUNCTUATION.test(character)) {
+        groups.push(current);
+        current = [];
+      }
+    }
+    if (current.length) groups.push(current);
+    return groups;
+  }
+
+  function splitText(element) {
+    const text = element.textContent.trim();
+    // 读屏读取完整句子，逐字拆分的视觉层对辅助技术隐藏
+    const readable = document.createElement("span");
+    readable.className = "sr-only";
+    readable.textContent = text;
+    const visual = document.createElement("span");
+    visual.setAttribute("aria-hidden", "true");
+
+    let index = 0;
+    text.split(/(\s+)/).forEach((token) => {
+      if (!token) return;
+      if (/^\s+$/.test(token)) {
+        visual.append(" ");
+        return;
+      }
+      groupCharacters(token).forEach((group) => {
+        const word = document.createElement("span");
+        word.className = "w";
+        group.forEach((character) => {
+          const span = document.createElement("span");
+          span.className = "ch";
+          span.style.setProperty("--ci", String(index++));
+          span.textContent = character;
+          word.append(span);
+        });
+        visual.append(word);
+      });
+    });
+
+    element.replaceChildren(readable, visual);
+    element.classList.add("is-split");
+  }
+
+  function splitAll() {
+    document.querySelectorAll("[data-split]").forEach(splitText);
+  }
+
+  /* ---------------- 语言 ---------------- */
+
  function preferredLanguage() {
    const query = new URLSearchParams(window.location.search).get("lang");
    if (supportedLanguages.has(query)) return query;
@@ -42,8 +125,10 @@
      element.alt = element.dataset[`${lang}Alt`] || "";
    });

+    // 同时覆盖 <img> 与 <video>：切换语言后视频自动重新加载播放
    document.querySelectorAll("[data-zh-src][data-en-src]").forEach((element) => {
-      element.src = element.dataset[`${lang}Src`] || "";
+      const next = element.dataset[`${lang}Src`] || "";
+      if (element.getAttribute("src") !== next) element.src = next;
    });

    document.querySelectorAll("[data-zh-href][data-en-href]").forEach((element) => {
@@ -58,14 +143,13 @@
      element.setAttribute("content", element.dataset[`${lang}Content`] || "");
    });

+    // 实机截图按 语言 + 主题 组合切换
    document.querySelectorAll("[data-shot]").forEach((image) => {
      const theme = root.dataset.theme || "light";
      image.src = `assets/screenshots/${lang}/${theme}/${image.dataset.shot}`;
    });

-    document.title = lang === "zh"
-      ? "OSGKeyboard — 语音输入、中英打字与 AI 助手"
-      : "OSGKeyboard — Voice input, bilingual typing, and an AI assistant";
+    document.title = TITLES[lang];

    if (languageButton) {
      languageButton.textContent = lang === "zh" ? "EN" : "中文";
@@ -85,6 +169,10 @@
      );
    }

+    // 文字已被 data-zh / data-en 重写，需要重新拆分才能继续逐字动效
+    splitAll();
+    languageHooks.forEach((hook) => hook(lang));
+
    if (persist) {
      localStorage.setItem("osg-site-language", lang);
      const url = new URL(window.location.href);
@@ -97,33 +185,21 @@
    }
  }

+  /* ---------------- 主题 ---------------- */
+
  function storedTheme() {
    const saved = localStorage.getItem("osg-site-theme");
    return saved === "light" || saved === "dark" ? saved : null;
  }

-  function setMenuOpen(isOpen) {
-    if (!menuButton || !mobileNav) return;
-    const open = Boolean(isOpen);
-    menuButton.setAttribute("aria-expanded", String(open));
-    mobileNav.hidden = !open;
-    if (menuIcon) menuIcon.textContent = open ? "close" : "menu";
-    const lang = root.dataset.lang || "zh";
-    menuButton.setAttribute(
-      "aria-label",
-      lang === "zh"
-        ? (open ? "关闭导航" : "打开导航")
-        : (open ? "Close navigation" : "Open navigation")
-    );
-  }
-
  function applyTheme(theme, persist) {
    const resolved = theme === "dark" ? "dark" : "light";
    root.dataset.theme = resolved;
    root.style.colorScheme = resolved;

-    if (themeIcon) {
-      themeIcon.textContent = resolved === "dark" ? "light_mode" : "dark_mode";
+    // 图标指向「点击后切换到的目标主题」
+    if (themeIconUse) {
+      themeIconUse.setAttribute("href", resolved === "dark" ? "#i-sun" : "#i-moon");
    }

    if (themeButton) {
@@ -134,29 +210,502 @@
      themeButton.setAttribute("aria-label", label);
    }

-    themeColor?.setAttribute("content", resolved === "dark" ? "#0c0e0f" : "#eef2f6");
+    // 浏览器顶栏颜色与底板一致（与 site.css 的 --canvas 保持同步）
+    themeColor?.setAttribute("content", resolved === "dark" ? "#0e1011" : "#eff1f0");

    document.querySelectorAll("[data-shot]").forEach((image) => {
      const lang = root.dataset.lang || "zh";
      image.src = `assets/screenshots/${lang}/${resolved}/${image.dataset.shot}`;
    });

+    themeHooks.forEach((hook) => hook(resolved));
+
    if (persist) localStorage.setItem("osg-site-theme", resolved);
  }

+  // 以主题按钮为圆心，新主题从一个点扩散覆盖整页（View Transitions API）
+  function toggleThemeWithTransition() {
+    const next = root.dataset.theme === "dark" ? "light" : "dark";
+    if (!document.startViewTransition || reduceMotion || !themeButton) {
+      applyTheme(next, true);
+      return;
+    }
+    const rect = themeButton.getBoundingClientRect();
+    const x = rect.left + rect.width / 2;
+    const y = rect.top + rect.height / 2;
+    const radius = Math.hypot(Math.max(x, innerWidth - x), Math.max(y, innerHeight - y));
+
+    root.classList.add("vt-theme");
+    const transition = document.startViewTransition(() => applyTheme(next, true));
+    transition.ready
+      .then(() => {
+        root.animate(
+          { clipPath: [`circle(0px at ${x}px ${y}px)`, `circle(${radius}px at ${x}px ${y}px)`] },
+          {
+            duration: 760,
+            easing: "cubic-bezier(0.65, 0, 0.35, 1)",
+            pseudoElement: "::view-transition-new(root)"
+          }
+        );
+      })
+      .catch(() => {});
+    transition.finished.finally(() => root.classList.remove("vt-theme"));
+  }
+
+  /* ---------------- 移动端导航 ---------------- */
+
+  function setMenuOpen(isOpen) {
+    if (!menuButton || !mobileNav) return;
+    const open = Boolean(isOpen);
+    menuButton.setAttribute("aria-expanded", String(open));
+    mobileNav.hidden = !open;
+    if (menuIconUse) menuIconUse.setAttribute("href", open ? "#i-close" : "#i-menu");
+    const lang = root.dataset.lang || "zh";
+    menuButton.setAttribute(
+      "aria-label",
+      lang === "zh"
+        ? (open ? "关闭导航" : "打开导航")
+        : (open ? "Close navigation" : "Open navigation")
+    );
+  }
+
+  /* ---------------- 导航滑块与当前区块 ---------------- */
+
+  const navHost = document.getElementById("navLinks");
+  const navLinks = navHost ? Array.from(navHost.querySelectorAll("a")) : [];
+  let activeNavLink = null;
+
+  function moveIndicator(link) {
+    if (!navHost) return;
+    if (!link) {
+      navHost.classList.remove("has-indicator");
+      return;
+    }
+    navHost.style.setProperty("--ix", `${link.offsetLeft}px`);
+    navHost.style.setProperty("--iw", `${link.offsetWidth}px`);
+    navHost.classList.add("has-indicator");
+  }
+
+  function setActiveNav(link) {
+    activeNavLink = link;
+    navLinks.forEach((item) => item.classList.toggle("is-active", item === link));
+    moveIndicator(link);
+  }
+
+  navLinks.forEach((link) => {
+    link.addEventListener("mouseenter", () => moveIndicator(link));
+    link.addEventListener("focus", () => moveIndicator(link));
+  });
+  navHost?.addEventListener("mouseleave", () => moveIndicator(activeNavLink));
+  languageHooks.push(() => requestAnimationFrame(() => moveIndicator(activeNavLink)));
+
+  if (canObserve && navLinks.length) {
+    const sectionToLink = new Map();
+    navLinks.forEach((link) => {
+      const section = document.querySelector(link.getAttribute("href"));
+      if (section) sectionToLink.set(section, link);
+    });
+    const visibleSections = new Set();
+    const spy = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) visibleSections.add(entry.target);
+          else visibleSections.delete(entry.target);
+        });
+        // 取文档顺序中最后一个处于判定带内的区块
+        let current = null;
+        sectionToLink.forEach((link, section) => {
+          if (visibleSections.has(section)) current = link;
+        });
+        if (current !== activeNavLink) setActiveNav(current);
+      },
+      { rootMargin: "-45% 0px -50% 0px" }
+    );
+    sectionToLink.forEach((_, section) => spy.observe(section));
+  }
+
+  /* ---------------- 声波渲染 ---------------- */
+
+  // 每个声波实例：bars 为条形元素，level 为目标音量，amp 为插值后的当前音量
+  const waves = [];
+
+  function createWave(container, options = {}) {
+    const count = Number(container.dataset.wave) || 16;
+    const bars = [];
+    for (let i = 0; i < count; i += 1) {
+      const bar = document.createElement("i");
+      container.append(bar);
+      bars.push(bar);
+    }
+    const wave = { bars, level: 0, amp: 0, active: true, mirror: Boolean(options.mirror), seed: Math.random() * 10 };
+    waves.push(wave);
+    return wave;
+  }
+
+  let waveFrame = 0;
+
+  function renderWaves(now) {
+    waveFrame = 0;
+    let running = false;
+    waves.forEach((wave) => {
+      if (!wave.active) return;
+      running = true;
+      wave.amp += (wave.level - wave.amp) * 0.12;
+      const length = wave.bars.length;
+      wave.bars.forEach((bar, index) => {
+        const i = wave.mirror ? length - 1 - index : index;
+        // 两路正弦叠加出「语音包络」，中间条更高，两端收敛
+        const envelope = Math.sin(((i + 0.5) / length) * Math.PI) * 0.6 + 0.4;
+        const n1 = Math.sin(now * 0.009 + i * 0.85 + wave.seed) * 0.5 + 0.5;
+        const n2 = Math.sin(now * 0.0047 + i * 1.9 + wave.seed * 2) * 0.5 + 0.5;
+        const value = 0.1 + wave.amp * envelope * (0.25 + n1 * n2 * 0.95);
+        bar.style.transform = `scaleY(${Math.min(1, value).toFixed(3)})`;
+      });
+    });
+    if (running) waveFrame = requestAnimationFrame(renderWaves);
+  }
+
+  function wakeWaves() {
+    if (!reduceMotion && !waveFrame) waveFrame = requestAnimationFrame(renderWaves);
+  }
+
+  /* ---------------- Hero 语音胶囊 ---------------- */
+
+  // 复刻键盘真实的麦克风状态流：轻点听写（红色声波 → 打勾）、长按问 AI（青色声波 → 转圈 → 回答）、
+  // 复制消息后的嘴替回复（转圈 → 回复）。文案取自 App 的实际界面字符串与演示素材。
+  const CAPSULE_SCRIPT = {
+    zh: [
+      { tag: "轻点听写", mode: "rec", text: "帮我订周五晚上七点的位子，四个人" },
+      { tag: "长按问 AI", mode: "ai", text: "周末去哪儿玩比较合适？", busy: "AI 正在思考…", answer: "可以去近郊走走：上午逛古镇，下午找家咖啡馆。" },
+      { tag: "复制 · 嘴替回复", busy: "AI 正在思考…", answer: "好的，我整理一下预算版，明天上午发你。" }
+    ],
+    en: [
+      { tag: "Tap to dictate", mode: "rec", text: "Book a table for four, Friday at seven" },
+      { tag: "Hold to ask AI", mode: "ai", text: "Where should we go this weekend?", busy: "AI is thinking…", answer: "Try a day trip: an old town in the morning, a café in the afternoon." },
+      { tag: "Copy · Reply in your voice", busy: "AI is thinking…", answer: "Sure, I’ll put the budget version together and send it over tomorrow morning." }
+    ]
+  };
+
+  const CAPSULE_STATES = ["is-rec", "is-ai", "is-busy", "is-ai-busy", "is-done"];
+
+  const hero = document.getElementById("top");
+  const capsule = document.querySelector(".voice-capsule");
+  const capsuleTag = capsule?.querySelector(".capsule-tag");
+  const capsuleLine = capsule?.querySelector(".capsule-line");
+  const capsuleWaveHost = capsule?.querySelector(".capsule-wave");
+  const capsuleWave = capsuleWaveHost ? createWave(capsuleWaveHost) : null;
+  let heroVisible = true;
+  let capsuleRun = 0;
+
+  const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+
+  // Hero 离屏或标签页隐藏时暂停打字，回来后从原处继续
+  async function whenActive(run) {
+    while (run === capsuleRun && (!heroVisible || document.hidden)) {
+      await wait(400);
+    }
+    return run === capsuleRun;
+  }
+
+  function setCapsuleState(...states) {
+    CAPSULE_STATES.forEach((name) => capsule.classList.toggle(name, states.includes(name)));
+    const listening = states.includes("is-rec") || states.includes("is-ai");
+    if (capsuleWave) capsuleWave.level = listening ? 1 : 0;
+    if (listening) wakeWaves();
+  }
+
+  // 逐字写入；返回 false 表示本轮已被新一轮（如切换语言）取代
+  async function typeLine(run, text, perChar) {
+    const characters = Array.from(text);
+    for (let i = 1; i <= characters.length; i += 1) {
+      if (!(await whenActive(run))) return false;
+      capsuleLine.textContent = characters.slice(0, i).join("");
+      await wait(perChar());
+    }
+    return true;
+  }
+
+  async function playCapsule() {
+    if (!capsule || !capsuleLine || !capsuleTag) return;
+    const run = ++capsuleRun;
+    const lang = root.dataset.lang === "en" ? "en" : "zh";
+    const script = CAPSULE_SCRIPT[lang];
+
+    if (reduceMotion) {
+      setCapsuleState();
+      capsuleTag.textContent = script[0].tag;
+      capsuleLine.textContent = script[0].text;
+      return;
+    }
+
+    const base = lang === "zh" ? 72 : 34;
+    const speech = () => base + Math.random() * base * 0.8;
+    let index = 0;
+    while (run === capsuleRun) {
+      const item = script[index % script.length];
+      setCapsuleState();
+      capsuleTag.textContent = item.tag;
+      capsuleLine.textContent = "";
+      await wait(650);
+
+      // 1. 说话：红色（听写）或青色（问 AI）胶囊 + 声波，边说边出字
+      if (item.text) {
+        setCapsuleState(item.mode === "ai" ? "is-ai" : "is-rec");
+        if (!(await typeLine(run, item.text, speech))) return;
+        await wait(420);
+      }
+
+      // 2. 处理中：胶囊转圈，显示真实界面的状态文案
+      if (item.busy) {
+        setCapsuleState("is-busy", item.mode === "ai" ? "is-ai-busy" : "");
+        capsuleLine.textContent = item.busy;
+        await wait(1300);
+        if (!(await whenActive(run))) return;
+      }
+
+      // 3. 结果：回答快速流出
+      if (item.answer) {
+        capsuleLine.textContent = "";
+        if (!(await typeLine(run, item.answer, () => 16))) return;
+      }
+
+      // 4. 插入成功：胶囊打勾
+      setCapsuleState("is-done");
+      await wait(2100);
+      if (!(await whenActive(run))) return;
+
+      // 快速回删，交给下一个能力
+      const characters = Array.from(capsuleLine.textContent);
+      for (let i = characters.length; i >= 0; i -= 2) {
+        if (run !== capsuleRun) return;
+        capsuleLine.textContent = characters.slice(0, i).join("");
+        await wait(12);
+      }
+      index += 1;
+    }
+  }
+
+  languageHooks.push(() => playCapsule());
+
+  /* ---------------- 真机录屏：Apple 机框 + 真实键盘扩展的片段 ---------------- */
+
+  // 片段按「幕-语言-主题」命名，每组都录自模拟器里真实的 OSGKeyboard 扩展
+  function clipPath(video, suffix) {
+    const lang = root.dataset.lang === "en" ? "en" : "zh";
+    const theme = root.dataset.theme === "dark" ? "dark" : "light";
+    return `assets/story/${video.dataset.clip}-${lang}-${theme}${suffix}`;
+  }
+
+  const clipVideos = Array.from(document.querySelectorAll(".iphone-clip"));
+
+  function playClip(video, restart) {
+    if (reduceMotion) return;
+    if (restart && video.readyState >= 1) video.currentTime = 0;
+    video.dataset.playing = "1";
+    video.play().catch(() => {});
+  }
+
+  function pauseClip(video) {
+    video.dataset.playing = "0";
+    video.pause();
+  }
+
+  function refreshClipSources() {
+    clipVideos.forEach((video) => {
+      // 减弱动态效果：不加载视频，只显示最能说明这一幕的关键帧海报
+      if (reduceMotion) {
+        video.poster = clipPath(video, "-key.jpg");
+        return;
+      }
+      const src = clipPath(video, ".mp4");
+      if (video.getAttribute("src") === src) return;
+      const resume = video.dataset.playing === "1";
+      video.poster = clipPath(video, ".jpg");
+      video.src = src;
+      if (resume) playClip(video, false);
+    });
+  }
+
+  // 初始化时语言与主题会先后写入，合并成一次换源，避免同一片段加载两遍
+  let clipRefreshQueued = false;
+  function queueClipRefresh() {
+    if (clipRefreshQueued) return;
+    clipRefreshQueued = true;
+    queueMicrotask(() => {
+      clipRefreshQueued = false;
+      refreshClipSources();
+    });
+  }
+
+  languageHooks.push(queueClipRefresh);
+  themeHooks.push(queueClipRefresh);
+
+  /* ---------------- 四幕滚动叙事 ---------------- */
+
+  // 滚动只决定「当前是哪一幕」；画面是这一幕的真机片段，从头播放，播完停留片刻再重播
+  const STORY_REPLAY_DELAY = 2200;
+
+  const story = document.getElementById("storyStage");
+  const storyActs = story ? Array.from(story.querySelectorAll(".story-act")) : [];
+  const storyClips = story ? Array.from(story.querySelectorAll(".iphone-clip")) : [];
+  let storyAct = -1;
+  let storyInView = false;
+  let storyReplayTimer = 0;
+
+  function setStoryAct(act) {
+    storyAct = act;
+    clearTimeout(storyReplayTimer);
+    storyActs.forEach((element, i) => {
+      element.classList.toggle("is-active", i === act);
+      // 演完的幕进度条保持满格，还没到的幕清空；当前幕由片段播放进度驱动
+      if (i !== act || reduceMotion) element.style.setProperty("--ap", i <= act ? "1" : "0");
+    });
+    storyClips.forEach((video, i) => {
+      video.classList.toggle("is-on", i === act);
+      if (i === act && storyInView) playClip(video, true);
+      else pauseClip(video);
+    });
+  }
+
+  function updateStory() {
+    if (!story) return;
+    const rect = story.getBoundingClientRect();
+    const viewport = innerHeight;
+    const inView = rect.bottom > 0 && rect.top < viewport;
+    const p = clamp(-rect.top / Math.max(1, story.offsetHeight - viewport));
+
+    // 滚动距离按幕数均分
+    const act = Math.min(storyActs.length - 1, Math.floor(p * storyActs.length));
+
+    // 离开视口暂停，回来接着播
+    if (inView !== storyInView) {
+      storyInView = inView;
+      const current = storyClips[storyAct];
+      if (current) {
+        if (inView) playClip(current, false);
+        else pauseClip(current);
+      }
+    }
+    if (act !== storyAct) setStoryAct(act);
+  }
+
+  storyClips.forEach((video, i) => {
+    video.addEventListener("timeupdate", () => {
+      if (i !== storyAct || !video.duration || reduceMotion) return;
+      storyActs[i]?.style.setProperty("--ap", (video.currentTime / video.duration).toFixed(3));
+    });
+    video.addEventListener("ended", () => {
+      storyActs[i]?.style.setProperty("--ap", "1");
+      clearTimeout(storyReplayTimer);
+      storyReplayTimer = setTimeout(() => {
+        if (i === storyAct && storyInView) playClip(video, true);
+      }, STORY_REPLAY_DELAY);
+    });
+  });
+
+  /* ---------------- 技能区、打字区：进入视口时循环播放真机片段 ---------------- */
+
+  const loopClips = clipVideos.filter((video) => !story || !story.contains(video));
+  if (!reduceMotion && loopClips.length && "IntersectionObserver" in window) {
+    const clipObserver = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) playClip(entry.target, false);
+        else pauseClip(entry.target);
+      });
+    }, { threshold: 0.35 });
+    loopClips.forEach((video) => clipObserver.observe(video));
+  }
+
+  /* ---------------- 滚动引擎 ---------------- */
+
+  const progressBar = document.querySelector(".scroll-progress");
+  const parallaxItems = new Set();
+  let scrollTicking = false;
+  let lastHeroProgress = -1;
+
+  function updateScroll() {
+    scrollTicking = false;
+    const y = window.scrollY;
+    const viewport = innerHeight;
+
+    if (progressBar) {
+      const max = Math.max(1, root.scrollHeight - viewport);
+      progressBar.style.transform = `scaleX(${clamp(y / max).toFixed(4)})`;
+    }
+
+    // Hero：滚动 0.75 屏内完成「文字淡出 + 设备立起」
+    if (hero && !reduceMotion) {
+      const heroProgress = clamp(y / (viewport * 0.75));
+      if (Math.abs(heroProgress - lastHeroProgress) > 0.001) {
+        hero.style.setProperty("--hp", heroProgress.toFixed(4));
+        lastHeroProgress = heroProgress;
+      }
+    }
+
+    // 视差：元素中心偏离视口中心越远，位移越大（方向相反，制造景深）
+    if (!reduceMotion) {
+      parallaxItems.forEach((element) => {
+        const rect = element.getBoundingClientRect();
+        const offset = rect.top + rect.height / 2 - viewport / 2;
+        const factor = Number(element.dataset.parallax) || 0.05;
+        element.style.transform = `translate3d(0, ${(-offset * factor).toFixed(1)}px, 0)`;
+      });
+    }
+
+    updateStory(false);
+  }
+
+  function requestScrollUpdate() {
+    if (!scrollTicking) {
+      scrollTicking = true;
+      requestAnimationFrame(updateScroll);
+    }
+  }
+
+  /* ---------------- 数字计数 ---------------- */
+
+  const numberFormat = new Intl.NumberFormat("en-US");
+
+  function formatCount(element, value) {
+    return `${element.dataset.prefix || ""}${numberFormat.format(value)}`;
+  }
+
+  function runCounter(element) {
+    const target = Number(element.dataset.count);
+    const from = element.dataset.from ? Number(element.dataset.from) : 0;
+    const duration = 1700;
+    const start = performance.now();
+    function frame(now) {
+      const t = clamp((now - start) / duration);
+      const eased = 1 - Math.pow(1 - t, 4);
+      element.textContent = formatCount(element, Math.round(from + (target - from) * eased));
+      if (t < 1) requestAnimationFrame(frame);
+    }
+    requestAnimationFrame(frame);
+  }
+
+  /* ---------------- 初始化 ---------------- */
+
  const initialLanguage = preferredLanguage();
  const initialTheme = storedTheme() || (themeMedia.matches ? "dark" : "light");
  applyLanguage(initialLanguage, false);
  applyTheme(initialTheme, false);

  languageButton?.addEventListener("click", () => {
-    applyLanguage(root.dataset.lang === "zh" ? "en" : "zh", true);
-    applyTheme(root.dataset.theme, false);
+    const next = root.dataset.lang === "zh" ? "en" : "zh";
+    const swap = () => {
+      applyLanguage(next, true);
+      applyTheme(root.dataset.theme, false);
+    };
+    // 支持时以交叉淡化切换语言，整页文字不会「跳」
+    if (document.startViewTransition && !reduceMotion) {
+      document.startViewTransition(swap);
+    } else {
+      swap();
+    }
  });

-  themeButton?.addEventListener("click", () => {
-    applyTheme(root.dataset.theme === "dark" ? "light" : "dark", true);
-  });
+  themeButton?.addEventListener("click", toggleThemeWithTransition);

  menuButton?.addEventListener("click", () => {
    setMenuOpen(menuButton.getAttribute("aria-expanded") !== "true");
@@ -173,4 +722,178 @@
  themeMedia.addEventListener("change", (event) => {
    if (!storedTheme()) applyTheme(event.matches ? "dark" : "light", false);
  });
+
+  window.addEventListener("scroll", requestScrollUpdate, { passive: true });
+  window.addEventListener("resize", () => {
+    requestScrollUpdate();
+    moveIndicator(activeNavLink);
+  });
+  updateScroll();
+
+  /* ---------------- 滚动显现、计数与离屏视频暂停 ---------------- */
+
+  const counters = Array.from(document.querySelectorAll("[data-count]"));
+
+  if (reduceMotion || !canObserve) {
+    document.querySelectorAll(".reveal").forEach((element) => {
+      element.classList.add("is-visible");
+    });
+  } else {
+    // 首屏以下的计数器先归位到起点，进入视口时再滚动到目标值
+    counters.forEach((element) => {
+      if (element.getBoundingClientRect().top > innerHeight) {
+        const from = element.dataset.from ? Number(element.dataset.from) : 0;
+        element.textContent = formatCount(element, from);
+        element.dataset.pending = "true";
+      }
+    });
+
+    const revealObserver = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (!entry.isIntersecting) return;
+          entry.target.classList.add("is-visible");
+          entry.target.querySelectorAll("[data-pending]").forEach((counter) => {
+            delete counter.dataset.pending;
+            runCounter(counter);
+          });
+          revealObserver.unobserve(entry.target);
+        });
+      },
+      { threshold: 0.12, rootMargin: "0px 0px -8% 0px" }
+    );
+    document.querySelectorAll(".reveal").forEach((element) => {
+      revealObserver.observe(element);
+    });
+
+    // 视差只计算视口附近的元素
+    const parallaxObserver = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) parallaxItems.add(entry.target);
+          else parallaxItems.delete(entry.target);
+        });
+        requestScrollUpdate();
+      },
+      { rootMargin: "20% 0px 20% 0px" }
+    );
+    document.querySelectorAll("[data-parallax]").forEach((element) => {
+      parallaxObserver.observe(element);
+    });
+
+    if (hero) {
+      new IntersectionObserver((entries) => {
+        heroVisible = entries[0].isIntersecting;
+        if (capsuleWave) capsuleWave.active = heroVisible;
+        if (heroVisible) wakeWaves();
+      }).observe(hero);
+    }
+  }
+
+  if (canObserve) {
+    // 视频滚出视口时暂停，回来时恢复，省电且避免分散注意力
+    const videoObserver = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          const video = entry.target;
+          if (entry.isIntersecting) {
+            video.play().catch(() => {});
+          } else {
+            video.pause();
+          }
+        });
+      },
+      { threshold: 0.15 }
+    );
+    document.querySelectorAll("video[autoplay]").forEach((video) => {
+      videoObserver.observe(video);
+    });
+  }
+
+  document.addEventListener("visibilitychange", () => {
+    if (!document.hidden) wakeWaves();
+  });
+
+  /* ---------------- 指针动效：亚克力反光 / 磁吸 / Hero 光斑 ---------------- */
+
+  if (finePointer && !reduceMotion) {
+    // 亚克力反光：高光跟随指针在面板表面移动
+    document.querySelectorAll(".spot").forEach((element) => {
+      element.addEventListener("pointermove", (event) => {
+        const rect = element.getBoundingClientRect();
+        element.style.setProperty("--mx", `${event.clientX - rect.left}px`);
+        element.style.setProperty("--my", `${event.clientY - rect.top}px`);
+      });
+    });
+
+    // 磁吸按钮：指针靠近时按钮被「吸」向指针，离开时弹簧回位
+    document.querySelectorAll(".magnetic").forEach((element) => {
+      element.addEventListener("pointermove", (event) => {
+        const rect = element.getBoundingClientRect();
+        const dx = (event.clientX - rect.left - rect.width / 2) * 0.22;
+        const dy = (event.clientY - rect.top - rect.height / 2) * 0.32;
+        element.style.transform = `translate(${dx.toFixed(1)}px, ${dy.toFixed(1)}px)`;
+      });
+      element.addEventListener("pointerleave", () => {
+        element.style.transform = "";
+      });
+    });
+
+    // Hero 光斑以插值追随指针，产生柔和的拖尾
+    if (hero) {
+      let targetX = 50;
+      let targetY = 30;
+      let currentX = 50;
+      let currentY = 30;
+      let spotFrame = 0;
+      const step = () => {
+        currentX += (targetX - currentX) * 0.08;
+        currentY += (targetY - currentY) * 0.08;
+        hero.style.setProperty("--hx", `${currentX.toFixed(2)}%`);
+        hero.style.setProperty("--hy", `${currentY.toFixed(2)}%`);
+        const settled = Math.abs(targetX - currentX) < 0.05 && Math.abs(targetY - currentY) < 0.05;
+        spotFrame = settled ? 0 : requestAnimationFrame(step);
+      };
+      hero.addEventListener("pointermove", (event) => {
+        const rect = hero.getBoundingClientRect();
+        targetX = ((event.clientX - rect.left) / rect.width) * 100;
+        targetY = ((event.clientY - rect.top) / rect.height) * 100;
+        if (!spotFrame) spotFrame = requestAnimationFrame(step);
+      });
+    }
+  }
+
+  /* ---------------- FAQ 展开高度过渡 ---------------- */
+
+  document.querySelectorAll(".faq-item").forEach((details) => {
+    const summary = details.querySelector("summary");
+    if (!summary || reduceMotion || !details.animate) return;
+    let animation = null;
+    let closing = false;
+
+    summary.addEventListener("click", (event) => {
+      event.preventDefault();
+      const startHeight = details.offsetHeight;
+      const borders = details.offsetHeight - details.clientHeight;
+
+      if (animation) {
+        animation.cancel();
+        animation = null;
+      }
+
+      closing = details.open && !closing;
+      if (!closing) details.open = true;
+      const endHeight = closing ? summary.offsetHeight + borders : details.offsetHeight;
+
+      animation = details.animate(
+        { height: [`${startHeight}px`, `${endHeight}px`] },
+        { duration: 460, easing: "cubic-bezier(0.16, 1, 0.3, 1)" }
+      );
+      animation.onfinish = () => {
+        animation = null;
+        if (closing) details.open = false;
+        closing = false;
+      };
+    });
+  });
 })();
@@ -14,11 +14,11 @@
  </script>
  <title>Redirecting · OSGKeyboard</title>
  <meta name="robots" content="noindex">
-  <link rel="canonical" href="https://hkgood.github.io/OSGKeyboard/#vs">
-  <meta http-equiv="refresh" content="0; url=../#vs">
-  <script>location.replace("../#vs");</script>
+  <link rel="canonical" href="https://osg.osglab.com/#faq">
+  <meta http-equiv="refresh" content="0; url=../#faq">
+  <script>location.replace("../#faq");</script>
 </head>
 <body>
-  <p><a href="../#vs">OSGKeyboard — compare</a></p>
+  <p><a href="../#faq">OSGKeyboard — compare</a></p>
 </body>
 </html>
@@ -14,7 +14,7 @@
  </script>
  <title>Redirecting · OSGKeyboard</title>
  <meta name="robots" content="noindex">
-  <link rel="canonical" href="https://hkgood.github.io/OSGKeyboard/?lang=en">
+  <link rel="canonical" href="https://osg.osglab.com/?lang=en">
  <meta http-equiv="refresh" content="0; url=../?lang=en">
  <script>location.replace("../?lang=en");</script>
 </head>
@@ -14,11 +14,11 @@
  </script>
  <title>Redirecting · OSGKeyboard</title>
  <meta name="robots" content="noindex">
-  <link rel="canonical" href="https://hkgood.github.io/OSGKeyboard/#start">
-  <meta http-equiv="refresh" content="0; url=../#start">
-  <script>location.replace("../#start");</script>
+  <link rel="canonical" href="https://osg.osglab.com/#download">
+  <meta http-equiv="refresh" content="0; url=../#download">
+  <script>location.replace("../#download");</script>
 </head>
 <body>
-  <p><a href="../#start">OSGKeyboard — setup</a></p>
+  <p><a href="../#download">OSGKeyboard — setup</a></p>
 </body>
 </html>
@@ -1,21 +1,29 @@
 # OSGKeyboard

-> OSGKeyboard is a source-available voice and typing tool for iPhone, iPad, and Mac. The iOS keyboard combines on-device dictation, Chinese and English typing, a unified AI assistant, clipboard skills, and optional managed credits. On Mac, hold Option for global dictation.
+> OSGKeyboard is an agentic keyboard and AI voice keyboard (Chinese: AI 语音输入法 / 嘴替输入法) for iPhone, iPad, and Mac. The iOS keyboard combines on-device dictation, a unified AI assistant, a learned personal style that sounds like you, agentic clipboard skills, Chinese and English typing, and optional managed credits. On Mac, hold Option for global dictation. It is source available, not open source.

-Current repository version: 2.0.1 (build 90). Later work is listed under CHANGELOG [Unreleased].
+Current repository version: 2.1.0 (build 110). Later work is listed under CHANGELOG [Unreleased].
+
+## Category definitions
+
+- AI voice keyboard (AI 语音输入法): OSGKeyboard turns speech into text with on-device recognition by default, lets you hold the mic to ask AI with preview before insert, and lets you revise the last insertion by voice.
+- "Zuiti" keyboard (嘴替输入法): "嘴替" is Chinese internet slang for someone who says what you mean, better than you would. OSGKeyboard learns from dictation you have confirmed; copy a message and it drafts three replies in your tone — ordinary, formal, and relaxed & playful — and you tap one to insert.
+- Agentic keyboard (Agentic 键盘): a keyboard that understands content and takes the next step. When you copy text, OSGKeyboard's on-device semantic analysis turns the keyboard's top bar into the relevant actions, ranked by relevance (reply, summarize, translate, tasks, events, notes, navigation); to-dos and events are written natively through EventKit, and suggestions do not upload the clipboard text.

 ## Product facts

 - Name: OSGKeyboard
- Tagline (EN): Speak it. It's typed.
+- Tagline (EN): Say it. It's typed.
 - Tagline (ZH): 开口即文字
+- Category (ZH): AI 语音输入法 · 嘴替输入法 · Agentic 键盘
+- Category (EN): Agentic keyboard · AI voice keyboard
 - Platforms: iPhone and iPad on iOS/iPadOS 26+; Apple Silicon Mac on macOS 15+
 - App Store: https://apps.apple.com/app/osgkeyboard/id6781553267
 - App Store China: https://apps.apple.com/cn/app/osgkeyboard/id6781553267
 - Public Mac DMG: historical signed/notarized version 1.1
 - Source: https://github.com/hkgood/OSGKeyboard
- Website: https://hkgood.github.io/OSGKeyboard/
- Privacy: https://hkgood.github.io/OSGKeyboard/privacy/
+- Website: https://osg.osglab.com/
+- Privacy: https://osg.osglab.com/privacy/
 - License: source available for personal, non-commercial local use; not open source or MIT
 - Contact: rocky.hk@gmail.com

@@ -55,10 +63,12 @@ Local dictation and user-configured providers never require an OSGKeyboard accou

 ## Documentation

- Home (ZH): https://hkgood.github.io/OSGKeyboard/
- Home (EN): https://hkgood.github.io/OSGKeyboard/?lang=en
- Setup: https://hkgood.github.io/OSGKeyboard/#start
- Privacy policy: https://hkgood.github.io/OSGKeyboard/privacy/
+- Home (ZH): https://osg.osglab.com/
+- Home (EN): https://osg.osglab.com/?lang=en
+- How it works (dictation → reply in your voice → agentic action): https://osg.osglab.com/#story
+- FAQ: https://osg.osglab.com/#faq
+- Download: https://osg.osglab.com/#download
+- Privacy policy: https://osg.osglab.com/privacy/
 - README (ZH): https://github.com/hkgood/OSGKeyboard/blob/main/README.md
 - README (EN): https://github.com/hkgood/OSGKeyboard/blob/main/README.en.md
 - Changelog: https://github.com/hkgood/OSGKeyboard/blob/main/CHANGELOG.md
@@ -66,4 +76,4 @@ Local dictation and user-configured providers never require an OSGKeyboard accou

 ## Citation guidance

-Describe OSGKeyboard as source available, not open source. Do not say that all features are free: local core functionality is free, user-configured providers may charge separately, and managed credits are optional consumable purchases. Do not describe the public Mac 1.1 DMG as the same version as the current 2.0 source tree.
+Describe OSGKeyboard as source available, not open source. Do not say that all features are free: local core functionality is free, user-configured providers may charge separately, and managed credits are optional consumable purchases. Do not describe the public Mac 1.1 DMG as the same version as the current 2.x source tree.
@@ -14,11 +14,11 @@
  </script>
  <title>Redirecting · OSGKeyboard</title>
  <meta name="robots" content="noindex">
-  <link rel="canonical" href="https://hkgood.github.io/OSGKeyboard/">
-  <meta http-equiv="refresh" content="0; url=../">
-  <script>location.replace("../");</script>
+  <link rel="canonical" href="https://osg.osglab.com/#platforms">
+  <meta http-equiv="refresh" content="0; url=../#platforms">
+  <script>location.replace("../#platforms");</script>
 </head>
 <body>
-  <p><a href="../">OSGKeyboard</a></p>
+  <p><a href="../#platforms">OSGKeyboard — Mac 语音输入</a></p>
 </body>
 </html>
@@ -14,7 +14,7 @@
  </script>
  <title>Privacy Policy · OSGKeyboard</title>
  <meta name="robots" content="noindex, follow">
-  <link rel="canonical" href="https://hkgood.github.io/OSGKeyboard/privacy/">
+  <link rel="canonical" href="https://osg.osglab.com/privacy/">
  <meta http-equiv="refresh" content="0; url=privacy/">
  <script>
    window.location.replace("privacy/" + window.location.hash);
@@ -15,11 +15,11 @@
  <title>Privacy Policy · OSGKeyboard</title>
  <meta name="description" content="OSGKeyboard privacy policy: no account required for core use, on-device speech recognition by default, optional user-configured or managed cloud services, limited first-party analytics with opt-out, no sale of personal data.">
  <meta name="robots" content="index, follow">
-  <link rel="canonical" href="https://hkgood.github.io/OSGKeyboard/privacy/">
+  <link rel="canonical" href="https://osg.osglab.com/privacy/">
  <link rel="icon" href="../assets/app-icon.png" type="image/png">
  <meta property="og:title" content="OSGKeyboard Privacy Policy">
  <meta property="og:description" content="No account required for core use. On-device by default, with optional user-configured or managed cloud services.">
-  <meta property="og:url" content="https://hkgood.github.io/OSGKeyboard/privacy/">
+  <meta property="og:url" content="https://osg.osglab.com/privacy/">
  <meta property="og:type" content="website">
  <style>
    :root { color-scheme: light dark; --bg: #f7faf8; --ink: #102218; --muted: #5c6c62; --line: rgba(16, 34, 24, 0.12); --green: #238b48; }
@@ -23,4 +23,4 @@ Allow: /
 User-agent: Bytespider
 Allow: /

-Sitemap: https://hkgood.github.io/OSGKeyboard/sitemap.xml
+Sitemap: https://osg.osglab.com/sitemap.xml
@@ -1,17 +1,24 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
-        xmlns:xhtml="http://www.w3.org/1999/xhtml">
+        xmlns:xhtml="http://www.w3.org/1999/xhtml"
+        xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
  <url>
-    <loc>https://hkgood.github.io/OSGKeyboard/</loc>
-    <lastmod>2026-08-20</lastmod>
+    <loc>https://osg.osglab.com/</loc>
+    <lastmod>2026-10-01</lastmod>
    <changefreq>weekly</changefreq>
    <priority>1.0</priority>
-    <xhtml:link rel="alternate" hreflang="zh-Hans" href="https://hkgood.github.io/OSGKeyboard/"/>
-    <xhtml:link rel="alternate" hreflang="en" href="https://hkgood.github.io/OSGKeyboard/?lang=en"/>
-    <xhtml:link rel="alternate" hreflang="x-default" href="https://hkgood.github.io/OSGKeyboard/"/>
+    <xhtml:link rel="alternate" hreflang="zh-Hans" href="https://osg.osglab.com/"/>
+    <xhtml:link rel="alternate" hreflang="en" href="https://osg.osglab.com/?lang=en"/>
+    <xhtml:link rel="alternate" hreflang="x-default" href="https://osg.osglab.com/"/>
+    <image:image>
+      <image:loc>https://osg.osglab.com/assets/hero-devices.png</image:loc>
+    </image:image>
+    <image:image>
+      <image:loc>https://osg.osglab.com/assets/og-card.png</image:loc>
+    </image:image>
  </url>
  <url>
-    <loc>https://hkgood.github.io/OSGKeyboard/privacy/</loc>
+    <loc>https://osg.osglab.com/privacy/</loc>
    <lastmod>2026-10-07</lastmod>
    <changefreq>yearly</changefreq>
    <priority>0.5</priority>