rocky/OSGKeyboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs(pages): restyle homepage in the logo's acrylic material

Browse Source 
- One acrylic material in three thicknesses (canvas, panel, keycap) with grain and sheen
- Unify buttons and chips as rounded rectangles on a 10/14/24/32 radius scale
- Restrain green to logo, status, progress and the default badge
- Regroup sections: four-act story with a new hold-to-ask-AI clip, smoked privacy panel
  absorbing account info, platform reliability chips, centered FAQ, acrylic download panel
This commit is contained in:
Rocky
2026-10-01 14:03:18 +08:00
parent a9bf57ccf7
commit d5cf818134
15 changed files with 1021 additions and 1174 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/assets/site.css
+853 -883
View File
File diff suppressed because it is too large Load Diff
docs/assets/site.js
+9 -30
View File
@@ -5,16 +5,15 @@
* 2. 深浅色主题（默认跟随系统，手动选择后持久化；支持时以圆形扩散过渡）
* 3. 移动端导航开合、导航滑块与当前区块高亮
* 4. 逐字拆分标题（data-split）
* 5. 滚动引擎：进度条、Hero 设备「立起」、媒体视差、三幕滚动叙事（真机录屏随幕切换）
* 5. 滚动引擎：进度条、Hero 设备「立起」、媒体视差、四幕滚动叙事（真机录屏随幕切换）
* 6. 声波渲染、Hero 语音胶囊打字机、数字计数
* 7. 指针光斑 / 3D 倾斜 / 磁吸按钮、FAQ 高度过渡、离屏视频暂停
* 7. 亚克力反光 / 磁吸按钮、FAQ 高度过渡、离屏视频暂停
* 开启「减弱动态效果」时，持续动画与指针动效全部停用，内容直接呈现最终态。
*/
(function () {
"use strict";
const root = document.documentElement;
const siteNav = document.getElementById("siteNav");
const languageButton = document.getElementById("languageToggle");
const themeButton = document.getElementById("themeToggle");
const themeIconUse = document.getElementById("themeIconUse");
@@ -211,8 +210,8 @@
themeButton.setAttribute("aria-label", label);
}
// 深色舞台在各主题下配色一致，theme-color 跟随舞台色
themeColor?.setAttribute("content", "#0e1013");
// 浏览器顶栏颜色与底板一致（与 site.css 的 --canvas 保持同步）
themeColor?.setAttribute("content", resolved === "dark" ? "#0e1011" : "#eff1f0");
document.querySelectorAll("[data-shot]").forEach((image) => {
const lang = root.dataset.lang || "zh";
@@ -541,10 +540,9 @@
languageHooks.push(queueClipRefresh);
themeHooks.push(queueClipRefresh);
/* ---------------- 三幕滚动叙事 ---------------- */
/* ---------------- 四幕滚动叙事 ---------------- */
// 滚动只决定「当前是哪一幕」；画面是这一幕的真机片段，从头播放，播完停留片刻再重播
const ACT_RANGES = [[0, 0.34], [0.34, 0.67], [0.67, 1]];
const STORY_REPLAY_DELAY = 2200;
const story = document.getElementById("storyStage");
@@ -576,8 +574,8 @@
const inView = rect.bottom > 0 && rect.top < viewport;
const p = clamp(-rect.top / Math.max(1, story.offsetHeight - viewport));
let act = 0;
ACT_RANGES.forEach(([start], i) => { if (p >= start) act = i; });
// 滚动距离按幕数均分
const act = Math.min(storyActs.length - 1, Math.floor(p * storyActs.length));
// 离开视口暂停，回来接着播
if (inView !== storyInView) {
@@ -625,17 +623,11 @@
let scrollTicking = false;
let lastHeroProgress = -1;
function updateNavState() {
siteNav?.classList.toggle("is-scrolled", window.scrollY > 24);
}
function updateScroll() {
scrollTicking = false;
const y = window.scrollY;
const viewport = innerHeight;
updateNavState();
if (progressBar) {
const max = Math.max(1, root.scrollHeight - viewport);
progressBar.style.transform = `scaleX(${clamp(y / max).toFixed(4)})`;
@@ -822,9 +814,10 @@
if (!document.hidden) wakeWaves();
});
/* ---------------- 指针动效：光斑 / 倾斜 / 磁吸 / Hero 光斑 ---------------- */
/* ---------------- 指针动效：亚克力反光 / 磁吸 / Hero 光斑 ---------------- */
if (finePointer && !reduceMotion) {
// 亚克力反光：高光跟随指针在面板表面移动
document.querySelectorAll(".spot").forEach((element) => {
element.addEventListener("pointermove", (event) => {
const rect = element.getBoundingClientRect();
@@ -833,20 +826,6 @@
});
});
document.querySelectorAll(".tilt").forEach((element) => {
element.addEventListener("pointermove", (event) => {
const rect = element.getBoundingClientRect();
const x = (event.clientX - rect.left) / rect.width;
const y = (event.clientY - rect.top) / rect.height;
element.style.setProperty("--rx", `${((0.5 - y) * 9).toFixed(2)}deg`);
element.style.setProperty("--ry", `${((x - 0.5) * 11).toFixed(2)}deg`);
});
element.addEventListener("pointerleave", () => {
element.style.setProperty("--rx", "0deg");
element.style.setProperty("--ry", "0deg");
});
});
// 磁吸按钮：指针靠近时按钮被「吸」向指针，离开时弹簧回位
document.querySelectorAll(".magnetic").forEach((element) => {
element.addEventListener("pointermove", (event) => {
docs/assets/story/ask-en-dark-key.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 46 KiB

docs/assets/story/ask-en-dark.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 44 KiB

docs/assets/story/ask-en-dark.mp4
BIN
View File
Binary file not shown.
docs/assets/story/ask-en-light-key.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 47 KiB

docs/assets/story/ask-en-light.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 45 KiB

docs/assets/story/ask-en-light.mp4
BIN
View File
Binary file not shown.
docs/assets/story/ask-zh-dark-key.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 39 KiB

docs/assets/story/ask-zh-dark.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

docs/assets/story/ask-zh-dark.mp4
BIN
View File
Binary file not shown.
docs/assets/story/ask-zh-light-key.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 39 KiB

docs/assets/story/ask-zh-light.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 39 KiB

docs/assets/story/ask-zh-light.mp4
BIN
View File
Binary file not shown.
docs/index.html
+159 -261
View File
@@ -15,7 +15,7 @@
content="语音输入法,嘴替输入法,AI 输入法,AI 语音键盘,Agentic keyboard,agentic 键盘,iPhone 语音输入法,Mac 语音输入,端侧语音识别,OSGKeyboard"
>
<meta name="robots" content="index, follow, max-image-preview:large">
<meta name="theme-color" content="#0e1013">
<meta name="theme-color" content="#eff1f0">
<meta name="color-scheme" content="light dark">
<link rel="canonical" href="https://osg.osglab.com/">
<link rel="alternate" hreflang="zh-Hans" href="https://osg.osglab.com/">
@@ -50,7 +50,7 @@
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&display=swap" rel="stylesheet">
<!-- v= 查询串用于缓存刷新：GitHub Pages 对静态资源有 10 分钟缓存窗口，改版本号强制浏览器取新文件 -->
<link rel="stylesheet" href="assets/site.css?v=20261001c">
<link rel="stylesheet" href="assets/site.css?v=20261002a">
<script>
// 首屏前确定主题，避免闪烁；无保存偏好时跟随系统。
// .js 类只在脚本可用时出现：所有「先隐藏、再动效显现」的初始态都挂在它下面，
@@ -181,10 +181,6 @@
<symbol id="i-user-off" viewBox="0 0 24 24"><circle cx="10" cy="7.8" r="3.4"/><path d="M4.2 20c.7-3.1 3-4.9 5.8-4.9 1.3 0 2.5.4 3.5 1.1M16.8 16.8l4 4M20.8 16.8l-4 4"/></symbol>
<symbol id="i-code" viewBox="0 0 24 24"><path d="M8.5 8 4 12l4.5 4M15.5 8 20 12l-4.5 4"/></symbol>
<symbol id="i-mic" viewBox="0 0 24 24"><rect x="9" y="3" width="6" height="11" rx="3"/><path d="M5.5 11a6.5 6.5 0 0 0 13 0M12 17.5V21M9 21h6"/></symbol>
<symbol id="i-sparkle" viewBox="0 0 24 24"><path d="M11 4l1.8 4.7L17.5 10.5l-4.7 1.8L11 17l-1.8-4.7L4.5 10.5l4.7-1.8L11 4Z"/><path d="M18 14.5l.9 2.3 2.3.9-2.3.9-.9 2.3-.9-2.3-2.3-.9 2.3-.9.9-2.3Z"/></symbol>
<symbol id="i-bubble" viewBox="0 0 24 24"><path d="M20.5 11.5a8 6.8 0 0 1-8 6.8c-1.2 0-2.3-.2-3.3-.7L4.5 19.3l1.2-3.1a6.6 6.6 0 0 1-1.2-4.7 8 6.8 0 0 1 16 0Z"/><path d="M8.5 10.2c.8-1.4 2.4-1.7 3.2-.7.6.8.2 1.9-.8 2.6-.9.6-1.6 1.1-1.6 2.2M13.8 10.2c.8-1.4 2.4-1.7 3.2-.7.6.8.2 1.9-.8 2.6-.9.6-1.6 1.1-1.6 2.2"/></symbol>
<symbol id="i-keyboard" viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="12" rx="2.5"/><path d="M7 10h.01M11 10h.01M15 10h.01M17.5 10h.01M7 14h.01M17.5 14h.01M9.8 14h4.4"/></symbol>
<symbol id="i-paste" viewBox="0 0 24 24"><rect x="5.5" y="4.5" width="13" height="16" rx="2.5"/><path d="M9 4.8a3 3 0 0 1 6 0"/><path d="M12 10v6.2M9.3 13.6l2.7 2.7 2.7-2.7"/></symbol>
<symbol id="i-translate" viewBox="0 0 24 24"><path d="M4 6.5h9M8.5 4.5v2c0 3.3-2.4 6.6-4.3 8M6 9.8c1 2.3 3.3 4.6 5.7 5.6"/><path d="M13 20l4.3-9 4.3 9M14.5 16.8h5.6"/></symbol>
<symbol id="i-spellcheck" viewBox="0 0 24 24"><path d="M4 15.5 7.6 6l3.6 9.5M5.5 12.5h4.2"/><path d="M13.5 15.8l2.4 2.4 4.6-5"/></symbol>
<symbol id="i-reply" viewBox="0 0 24 24"><path d="M9.5 10.5 4.5 15l5 4.5"/><path d="M4.5 15h9a6.5 6.5 0 0 0 6.5-6.5V6"/></symbol>
@@ -193,13 +189,11 @@
<symbol id="i-event" viewBox="0 0 24 24"><rect x="4" y="5.5" width="16" height="15" rx="2.5"/><path d="M4 10.2h16M8.5 3.2v3.3M15.5 3.2v3.3"/><path d="M8 14.2h2.4M13.6 14.2H16M8 17.4h2.4"/></symbol>
<symbol id="i-note" viewBox="0 0 24 24"><path d="M6.5 3.5H15l4 4v11a2 2 0 0 1-2 2H6.5a2 2 0 0 1-2-2v-13a2 2 0 0 1 2-2Z"/><path d="M14.8 3.8V8H19"/><path d="M8.5 12.5h7M8.5 16h4.5"/></symbol>
<symbol id="i-nav" viewBox="0 0 24 24"><path d="M12 3.5 18.8 20 12 16.6 5.2 20 12 3.5Z"/></symbol>
<symbol id="i-shield" viewBox="0 0 24 24"><path d="M12 3 5 5.8v5.4c0 4.6 3 7.9 7 9.8 4-1.9 7-5.2 7-9.8V5.8L12 3Z"/><path d="M9 11.9l2.2 2.2 3.9-4.1"/></symbol>
<symbol id="i-key" viewBox="0 0 24 24"><circle cx="8" cy="15.5" r="4.3"/><path d="M11.1 12.4 20 3.5M16.6 7l2.9 2.9M13.9 9.7l2.1 2.1"/></symbol>
<symbol id="i-coin" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8.5"/><path d="M12 7.3v9.4M15.2 9.2c-.6-.9-1.8-1.4-3.2-1.4-1.7 0-3 .9-3 2.2 0 3 6.1 1.6 6.1 4.4 0 1.4-1.4 2.3-3.1 2.3-1.4 0-2.6-.5-3.2-1.5"/></symbol>
<symbol id="i-terminal" viewBox="0 0 24 24"><rect x="3" y="4.5" width="18" height="15" rx="2.5"/><path d="M7 9.5 10 12l-3 2.5M12.5 14.8H17"/></symbol>
<symbol id="i-arrow-out" viewBox="0 0 24 24"><path d="M7 17 17 7M9.2 7H17v7.8"/></symbol>
<symbol id="i-check" viewBox="0 0 24 24"><path d="M5 12.5l4.5 4.5L19 7.5"/></symbol>
<symbol id="i-globe" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8.5"/><path d="M3.5 12h17M12 3.5c2.4 2.4 3.6 5.2 3.6 8.5s-1.2 6.1-3.6 8.5c-2.4-2.4-3.6-5.2-3.6-8.5S9.6 5.9 12 3.5Z"/></symbol>
</defs>
</svg>
@@ -210,17 +204,15 @@
data-en="Skip to main content"
>跳到主要内容</a>
<!-- 页面滚动进度：顶部一像素级的声波绿线 -->
<div class="scroll-progress" aria-hidden="true"></div>
<header class="site-nav" id="siteNav">
<!-- 悬浮的亚克力导航条；底边一根细线显示页面滚动进度 -->
<nav class="nav-shell" aria-label="主导航" data-zh-label="主导航" data-en-label="Primary navigation">
<a class="brand" href="#top" aria-label="OSGKeyboard">
<img src="assets/app-icon.png?v=20260927b" width="30" height="30" alt="">
<img src="assets/app-icon.png?v=20260927b" width="32" height="32" alt="">
<span>OSGKeyboard</span>
</a>
<div class="nav-links" id="navLinks">
<!-- 滑动指示器：跟随悬停与当前阅读区块移动 -->
<!-- 滑动指示器：一颗小键帽，跟随悬停与当前阅读区块移动 -->
<span class="nav-indicator" aria-hidden="true"></span>
<a href="#story" data-zh="体验" data-en="Experience">体验</a>
<a href="#personal" data-zh="嘴替" data-en="Your voice">嘴替</a>
@@ -246,6 +238,7 @@
<svg class="i" aria-hidden="true"><use id="themeIconUse" href="#i-moon"/></svg>
</button>
</div>
<span class="scroll-progress" aria-hidden="true"></span>
</nav>
<nav class="mobile-nav" id="mobileNav" aria-label="移动端导航" data-zh-label="移动端导航" data-en-label="Mobile navigation" hidden>
<a href="#story" data-zh="体验" data-en="Experience">体验</a>
@@ -258,8 +251,8 @@
<main id="main">
<!--
Hero：深色产品舞台（两种主题下保持一致）。
动效层次：极光背景缓慢漂移 → 标题逐字浮现 → 三端主视觉随滚动「立起」 → 语音胶囊实时转写。
Hero：与整页同一块底板，跟随深浅主题。
动效层次：柔光缓慢漂移 → 图标键帽浮起、反光扫过 → 标题逐字浮现 → 三端主视觉随滚动「立起」 → 语音胶囊实时转写。
-->
<section class="hero" id="top">
<div class="hero-backdrop" aria-hidden="true">
@@ -267,11 +260,13 @@
<span class="aurora aurora-b"></span>
<span class="aurora aurora-c"></span>
<span class="hero-rings"><i></i><i></i><i></i></span>
<span class="hero-grid"></span>
<span class="hero-spot"></span>
</div>
<div class="hero-inner">
<p class="launch-pill hero-in" style="--d:.05s">
<div class="hero-mark hero-in" style="--d:0s" aria-hidden="true">
<img src="assets/app-icon.png?v=20260927b" width="96" height="96" alt="">
</div>
<p class="launch-pill chip hero-in" style="--d:.08s">
<span class="launch-dot" aria-hidden="true"></span>
<span data-zh="OSGKeyboard 2.1 · 为 iOS / iPadOS 26 打造" data-en="OSGKeyboard 2.1 · Built for iOS and iPadOS 26">
OSGKeyboard 2.1 · 为 iOS / iPadOS 26 打造
@@ -279,7 +274,7 @@
</p>
<h1
class="hero-kicker hero-in"
style="--d:.12s"
style="--d:.14s"
data-zh="AI 语音输入法 · 嘴替输入法 · Agentic 键盘"
data-en="Agentic keyboard · AI voice keyboard for iPhone, iPad &amp; Mac"
>AI 语音输入法 · 嘴替输入法 · Agentic 键盘</h1>
@@ -312,20 +307,14 @@
height="48"
>
</a>
<a
class="ghost-action magnetic"
href="https://testflight.apple.com/join/c2Bz4qK9"
rel="noopener"
>
<a class="keycap magnetic" href="https://testflight.apple.com/join/c2Bz4qK9" rel="noopener">
<svg class="i" aria-hidden="true"><use href="#i-plane"/></svg>
<span data-zh="TestFlight 公测" data-en="Join the TestFlight beta">TestFlight 公测</span>
</a>
<a
class="text-action"
href="https://github.com/hkgood/OSGKeyboard"
data-zh="查看源码"
data-en="View source"
>查看源码</a>
<a class="keycap magnetic" href="https://github.com/hkgood/OSGKeyboard">
<svg class="i" aria-hidden="true"><use href="#i-code"/></svg>
<span data-zh="查看源码" data-en="View source">查看源码</span>
</a>
</div>
<ul class="hero-trust hero-in" style="--d:.94s" aria-label="产品承诺" data-zh-label="产品承诺" data-en-label="Product promises">
<li><svg class="i" aria-hidden="true"><use href="#i-chip"/></svg><span data-zh="端侧优先" data-en="On-device first">端侧优先</span></li>
@@ -351,7 +340,7 @@
待机绿色麦克风 → 轻点听写变红并显示 7 条声波 → 插入成功打勾；
长按问 AI 变青色 → 思考中转圈 → 给出回答。
-->
<div class="voice-capsule" aria-hidden="true">
<div class="voice-capsule acrylic" aria-hidden="true">
<span class="capsule-mic">
<svg class="i cap-mic"><use href="#i-mic"/></svg>
<span class="capsule-wave" data-wave="7"></span>
@@ -364,7 +353,7 @@
</span>
</div>
</figure>
<a class="scroll-cue" href="#ways" aria-label="向下滚动" data-zh-label="向下滚动" data-en-label="Scroll down"><span></span></a>
<a class="scroll-cue" href="#story" aria-label="向下滚动" data-zh-label="向下滚动" data-en-label="Scroll down"><span></span></a>
</section>
<!-- 能力跑马灯：无限循环，悬停暂停；第二组仅用于无缝衔接，对读屏隐藏 -->
@@ -397,37 +386,9 @@
</div>
</div>
<!-- 四种输入方式：锚点速览条（光斑跟随 + 轻微 3D 倾斜 + 图标微动效） -->
<section class="section ways-section" id="ways">
<div class="section-inner">
<div class="ways-grid">
<a class="way-card spot tilt reveal" href="#assistant">
<span class="way-icon way-icon-mic"><svg class="i" aria-hidden="true"><use href="#i-mic"/></svg></span>
<h3 data-zh="语音听写" data-en="Dictation">语音听写</h3>
<p data-zh="轻点麦克风，端侧识别实时上屏。" data-en="Tap the mic; on-device recognition types as you speak.">轻点麦克风，端侧识别实时上屏。</p>
</a>
<a class="way-card spot tilt reveal" href="#assistant" style="--d:.06s">
<span class="way-icon way-icon-sparkle"><svg class="i" aria-hidden="true"><use href="#i-sparkle"/></svg></span>
<h3 data-zh="长按问 AI" data-en="Hold to ask AI">长按问 AI</h3>
<p data-zh="回答先预览，确认再插入。" data-en="Answers stream into a preview — insert when ready.">回答先预览，确认再插入。</p>
</a>
<a class="way-card spot tilt reveal" href="#personal" style="--d:.12s">
<span class="way-icon way-icon-bubble"><svg class="i" aria-hidden="true"><use href="#i-bubble"/></svg></span>
<h3 data-zh="AI 嘴替" data-en="Your voice double">AI 嘴替</h3>
<p data-zh="学习你的语气，替你表达。" data-en="Learns your voice and speaks for you.">学习你的语气，替你表达。</p>
</a>
<a class="way-card spot tilt reveal" href="#skills" style="--d:.18s">
<span class="way-icon way-icon-paste"><svg class="i" aria-hidden="true"><use href="#i-paste"/></svg></span>
<h3 data-zh="替你行动" data-en="Acts for you">替你行动</h3>
<p data-zh="复制之后，直接行动。" data-en="Copy, then it takes action.">复制之后，直接行动。</p>
</a>
</div>
</div>
</section>
<!--
滚动叙事：三幕剧「说 → 像你 → 替你做」。
舞台随滚动钉住，滚动进度直接驱动手机里的听写、语气切换、发送与 Agentic 动作；
滚动叙事：四幕「听写 → 问 AI → 像你一样回复 → 替你做」。
舞台随滚动钉住，滚动进度决定当前幕，手机里播放这一幕的真机录屏；
左侧文案是真实可索引的内容，右侧手机为装饰性演示（对读屏隐藏）。
-->
<section class="section story-section" id="story">
@@ -435,9 +396,9 @@
<p class="eyebrow" data-zh="Agentic 语音输入法" data-en="The agentic voice keyboard">Agentic 语音输入法</p>
<h2 data-split data-zh="会听、会说，还会替你做事。" data-en="It listens, speaks like you, and gets things done.">会听、会说，还会替你做事。</h2>
<p
data-zh="一次真实的聊天，三个动作完成：语音输入法负责听写，嘴替输入法负责把话说好，Agentic 键盘负责下一步。向下滚动，看它怎样工作。"
data-en="One real conversation, three moves: the voice keyboard listens, the reply engine says it in your voice, and the agentic keyboard takes the next step. Scroll to watch it work."
>一次真实的聊天，三个动作完成：语音输入法负责听写，嘴替输入法负责把话说好，Agentic 键盘负责下一步。向下滚动，看它怎样工作。</p>
data-zh="一次真实的聊天，四个动作完成：语音输入法负责听写，AI 助手先预览再插入，嘴替输入法负责把话说好，Agentic 键盘负责下一步。向下滚动，看它怎样工作。"
data-en="One real conversation, four moves: the voice keyboard listens, the AI previews before it inserts, replies come out in your voice, and the agentic keyboard takes the next step. Scroll to watch it work."
>一次真实的聊天，四个动作完成：语音输入法负责听写，AI 助手先预览再插入，嘴替输入法负责把话说好，Agentic 键盘负责下一步。向下滚动，看它怎样工作。</p>
</div>
<div class="story" id="storyStage">
<div class="story-sticky">
@@ -454,6 +415,15 @@
</li>
<li class="story-act" data-act="1">
<span class="act-index">02</span>
<div class="act-body">
<p class="act-kicker" data-zh="长按问 AI" data-en="Hold to ask AI">长按问 AI</p>
<h3 data-zh="先预览，再插入。" data-en="Preview first. Insert when ready.">先预览，再插入。</h3>
<p data-zh="长按麦克风直接向 AI 提问，回答流式显示在键盘里，确认后才进入输入框；仅当光标与上下文没变时才自动上屏。" data-en="Hold the mic to ask AI. The answer streams into the keyboard and reaches the text field only when you confirm — and only if the cursor and context haven’t changed.">长按麦克风直接向 AI 提问，回答流式显示在键盘里，确认后才进入输入框；仅当光标与上下文没变时才自动上屏。</p>
<span class="act-bar" aria-hidden="true"><i></i></span>
</div>
</li>
<li class="story-act" data-act="2">
<span class="act-index">03</span>
<div class="act-body">
<p class="act-kicker" data-zh="嘴替输入法" data-en="Replies in your voice">嘴替输入法</p>
<h3 data-zh="随口一说，发出去很得体。" data-en="Say it casually. Send it well.">随口一说，发出去很得体。</h3>
@@ -461,8 +431,8 @@
<span class="act-bar" aria-hidden="true"><i></i></span>
</div>
</li>
<li class="story-act" data-act="2">
<span class="act-index">03</span>
<li class="story-act" data-act="3">
<span class="act-index">04</span>
<div class="act-body">
<p class="act-kicker" data-zh="Agentic 键盘" data-en="Agentic keyboard">Agentic 键盘</p>
<h3 data-zh="看懂内容，替你行动。" data-en="It reads the room, then acts.">看懂内容，替你行动。</h3>
@@ -481,6 +451,7 @@
<figure class="iphone">
<div class="iphone-screen">
<video class="iphone-clip is-on" data-clip="voice" muted playsinline preload="auto" poster="assets/story/voice-zh-light.jpg"></video>
<video class="iphone-clip" data-clip="ask" muted playsinline preload="metadata" poster="assets/story/ask-zh-light.jpg"></video>
<video class="iphone-clip" data-clip="reply" muted playsinline preload="metadata" poster="assets/story/reply-zh-light.jpg"></video>
<video class="iphone-clip" data-clip="agent" muted playsinline preload="metadata" poster="assets/story/agent-zh-light.jpg"></video>
</div>
@@ -492,82 +463,8 @@
</div>
</section>
<!-- 数字带：进入视口时滚动计数（无 JS 时直接显示最终数值） -->
<section class="numbers-section" aria-label="产品数字" data-zh-label="产品数字" data-en-label="By the numbers">
<div class="section-inner numbers-grid">
<div class="number reveal">
<strong data-count="5">5</strong>
<span data-zh="种中文输入方案：全拼与四种双拼" data-en="Chinese input schemes: full pinyin plus four double pinyin">种中文输入方案：全拼与四种双拼</span>
</div>
<div class="number reveal" style="--d:.06s">
<strong data-count="40000" data-prefix="≈">≈40,000</strong>
<span data-zh="离线英文词表，补全、纠错与预测" data-en="offline English words for completion, correction, and prediction">离线英文词表，补全、纠错与预测</span>
</div>
<div class="number reveal" style="--d:.12s">
<strong data-count="2500">2,500</strong>
<span data-zh="个听写字符，即可生成你的专属风格" data-en="dictated characters to unlock a style that sounds like you">个听写字符，即可生成你的专属风格</span>
</div>
<div class="number reveal" style="--d:.18s">
<strong data-count="0" data-from="99">0</strong>
<span data-zh="个第三方追踪 SDK，击键从不上传" data-en="third-party tracking SDKs — keystrokes are never uploaded">个第三方追踪 SDK，击键从不上传</span>
</div>
</div>
</section>
<!-- 语音 + AI 助手：实机视频为视觉主体 -->
<section class="section feature-section" id="assistant">
<div class="section-inner split-layout">
<div class="feature-copy reveal">
<p class="eyebrow" data-zh="语音输入法 + AI 助手" data-en="Voice keyboard + AI assistant">语音输入法 + AI 助手</p>
<h2 data-split data-zh="先预览，再插入。" data-en="Preview first. Insert when ready.">先预览，再插入。</h2>
<p
data-zh="轻点麦克风开始听写，长按直接向 AI 提问。回答流式显示在键盘里，确认后才进入输入框——每一步都在你的掌控之中。"
data-en="Tap the mic to dictate, or hold it to ask AI. Answers stream into the keyboard and reach the text field only when you confirm — every step stays under your control."
>轻点麦克风开始听写，长按直接向 AI 提问。回答流式显示在键盘里，确认后才进入输入框——每一步都在你的掌控之中。</p>
<ol class="step-list">
<li class="reveal" style="--d:.1s">
<span class="step-index">01</span>
<div>
<h3 data-zh="说出需求" data-en="Say what you need">说出需求</h3>
<p data-zh="轻点听写，长按提问，语音与 AI 共用一个入口。" data-en="Tap to dictate, hold to ask — voice and AI share one entry.">轻点听写，长按提问，语音与 AI 共用一个入口。</p>
</div>
</li>
<li class="reveal" style="--d:.18s">
<span class="step-index">02</span>
<div>
<h3 data-zh="流式生成" data-en="Watch it stream">流式生成</h3>
<p data-zh="回答实时显示，可随时停下、修改或重来。" data-en="Answers appear live; stop, revise, or retry at any time.">回答实时显示，可随时停下、修改或重来。</p>
</div>
</li>
<li class="reveal" style="--d:.26s">
<span class="step-index">03</span>
<div>
<h3 data-zh="确认插入" data-en="Confirm the insert">确认插入</h3>
<p data-zh="仅当光标位置与输入上下文未变化时才自动上屏，还能口述修改最近一次插入的文字。" data-en="Auto-insert only when the cursor and context are unchanged — or revise the last inserted text by voice.">仅当光标位置与输入上下文未变化时才自动上屏，还能口述修改最近一次插入的文字。</p>
</div>
</li>
</ol>
</div>
<div class="media-frame unmask reveal" data-parallax="0.06" style="--d:.12s">
<video
src="assets/whats-new/ai-voice-assistant-zh.mp4"
data-zh-src="assets/whats-new/ai-voice-assistant-zh.mp4"
data-en-src="assets/whats-new/ai-voice-assistant-en.mp4"
autoplay
muted
loop
playsinline
preload="metadata"
data-zh-label="OSGKeyboard 语音输入法与 AI 助手实机演示"
data-en-label="OSGKeyboard voice keyboard and AI assistant recorded on device"
aria-label="OSGKeyboard 语音输入法与 AI 助手实机演示"
></video>
</div>
</div>
</section>
<!-- 嘴替输入法：2.1 核心卖点，真实界面卡片 + 实机视频 -->
<section class="section personal-section section-alt" id="personal">
<!-- 嘴替输入法：2.1 核心卖点，三块亚克力面板里是真实界面 -->
<section class="section personal-section" id="personal">
<div class="section-inner">
<div class="center-heading reveal">
<p class="eyebrow" data-zh="嘴替输入法" data-en="AI replies in your voice">嘴替输入法</p>
@@ -578,8 +475,8 @@
>嘴替输入法从你确认过的真实输入中学习，而不是套用模板。所有偏好与词库只保存在本机。</p>
</div>
<div class="personal-grid">
<article class="personal-card spot reveal">
<div class="personal-media">
<article class="personal-card acrylic spot lift reveal">
<div class="personal-media media-inset">
<img
src="assets/whats-new/personal-style-card-zh.png"
data-zh-src="assets/whats-new/personal-style-card-zh.png"
@@ -594,8 +491,8 @@
<h3 data-zh="专属说话风格" data-en="A style that sounds like you">专属说话风格</h3>
<p data-zh="累积 2,500 个有效听写字符即可生成；优先学习你反复出现的口述与明确修改，保存前需你确认。" data-en="Unlocks after 2,500 effective dictated characters. It prioritizes your recurring phrasing and explicit edits, and nothing is saved without your review.">累积 2,500 个有效听写字符即可生成；优先学习你反复出现的口述与明确修改，保存前需你确认。</p>
</article>
<article class="personal-card spot reveal" style="--d:.08s">
<div class="personal-media">
<article class="personal-card acrylic spot lift reveal" style="--d:.08s">
<div class="personal-media media-inset is-video">
<video
src="assets/whats-new/smart-reply-zh.mp4"
data-zh-src="assets/whats-new/smart-reply-zh.mp4"
@@ -613,8 +510,8 @@
<h3 data-zh="个性回复，三种语气" data-en="Replies in three tones">个性回复，三种语气</h3>
<p data-zh="普通、正式、轻松趣味，一键切换；回复偏好与听写偏好分别学习，选择反馈仅保留在本机。" data-en="Ordinary, formal, or relaxed &amp; playful — one tap apart. Reply and dictation preferences are learned separately, and choice feedback stays on device.">普通、正式、轻松趣味，一键切换；回复偏好与听写偏好分别学习，选择反馈仅保留在本机。</p>
</article>
<article class="personal-card spot reveal" style="--d:.16s">
<div class="personal-media">
<article class="personal-card acrylic spot lift reveal" style="--d:.16s">
<div class="personal-media media-inset">
<img
src="assets/whats-new/monthly-usage-zh.png"
data-zh-src="assets/whats-new/monthly-usage-zh.png"
@@ -644,13 +541,13 @@
data-en="Copy any text and on-device semantic analysis understands where it should go — reply, summarize, translate, tasks, events, navigation. The keyboard’s top bar lists only the skills that fit, ranked by relevance, and the analysis never uploads the clipboard text."
>复制一段文字，本地语义分析会理解它该去哪——回复、总结、翻译、待办、日程、导航。键盘顶栏只按相关度列出用得上的技能，分析全程不上传剪贴板原文。</p>
<div class="skill-chips" aria-label="内置技能" data-zh-label="内置技能" data-en-label="Built-in skills">
<span style="--ci:0"><svg class="i" aria-hidden="true"><use href="#i-reply"/></svg><span data-zh="回复" data-en="Reply">回复</span></span>
<span style="--ci:1"><svg class="i" aria-hidden="true"><use href="#i-summarize"/></svg><span data-zh="总结" data-en="Summary">总结</span></span>
<span style="--ci:2"><svg class="i" aria-hidden="true"><use href="#i-translate"/></svg><span data-zh="翻译" data-en="Translate">翻译</span></span>
<span style="--ci:3"><svg class="i" aria-hidden="true"><use href="#i-task"/></svg><span data-zh="待办" data-en="Tasks">待办</span></span>
<span style="--ci:4"><svg class="i" aria-hidden="true"><use href="#i-event"/></svg><span data-zh="日程" data-en="Events">日程</span></span>
<span style="--ci:5"><svg class="i" aria-hidden="true"><use href="#i-note"/></svg><span data-zh="备忘录" data-en="Notes">备忘录</span></span>
<span style="--ci:6"><svg class="i" aria-hidden="true"><use href="#i-nav"/></svg><span data-zh="导航" data-en="Navigate">导航</span></span>
<span class="chip" style="--ci:0"><svg class="i" aria-hidden="true"><use href="#i-reply"/></svg><span data-zh="回复" data-en="Reply">回复</span></span>
<span class="chip" style="--ci:1"><svg class="i" aria-hidden="true"><use href="#i-summarize"/></svg><span data-zh="总结" data-en="Summary">总结</span></span>
<span class="chip" style="--ci:2"><svg class="i" aria-hidden="true"><use href="#i-translate"/></svg><span data-zh="翻译" data-en="Translate">翻译</span></span>
<span class="chip" style="--ci:3"><svg class="i" aria-hidden="true"><use href="#i-task"/></svg><span data-zh="待办" data-en="Tasks">待办</span></span>
<span class="chip" style="--ci:4"><svg class="i" aria-hidden="true"><use href="#i-event"/></svg><span data-zh="日程" data-en="Events">日程</span></span>
<span class="chip" style="--ci:5"><svg class="i" aria-hidden="true"><use href="#i-note"/></svg><span data-zh="备忘录" data-en="Notes">备忘录</span></span>
<span class="chip" style="--ci:6"><svg class="i" aria-hidden="true"><use href="#i-nav"/></svg><span data-zh="导航" data-en="Navigate">导航</span></span>
</div>
<ul class="quiet-list">
<li data-zh="待办与日程经原生 EventKit 写入，日历仅申请「仅写入」权限" data-en="To-dos and events write natively through EventKit; Calendar is write-only">待办与日程经原生 EventKit 写入，日历仅申请「仅写入」权限</li>
@@ -680,8 +577,8 @@
</div>
</section>
<!-- 中英打字：不方便说话时的兜底能力 -->
<section class="section feature-section section-alt" id="typing">
<!-- 中英打字：不方便说话时的兜底能力；两个数字放在这里，与内容一一对应 -->
<section class="section feature-section" id="typing">
<div class="section-inner split-layout reverse">
<div class="feature-copy reveal">
<p class="eyebrow" data-zh="中英打字" data-en="Chinese and English typing">中英打字</p>
@@ -692,7 +589,17 @@
</div>
<div class="mini-feature">
<h3><svg class="i" aria-hidden="true"><use href="#i-spellcheck"/></svg><span data-zh="英文：补全、纠错、预测" data-en="English: complete, correct, predict">英文：补全、纠错、预测</span></h3>
<p data-zh="三格 QuickType、约 4 万词离线词表、前缀补全、自动纠错、下一词建议、撤销纠错与句首自动大写。" data-en="Three-slot QuickType, a 40k-word offline lexicon, prefix completion, autocorrect, next-word suggestions, undo, and sentence capitalization.">三格 QuickType、约 4 万词离线词表、前缀补全、自动纠错、下一词建议、撤销纠错与句首自动大写。</p>
<p data-zh="三格 QuickType、前缀补全、自动纠错、下一词建议、撤销纠错与句首自动大写。" data-en="Three-slot QuickType, prefix completion, autocorrect, next-word suggestions, undo, and sentence capitalization.">三格 QuickType、前缀补全、自动纠错、下一词建议、撤销纠错与句首自动大写。</p>
</div>
<div class="stat-row">
<div class="stat acrylic">
<strong data-count="5">5</strong>
<span data-zh="种中文输入方案：全拼与四种双拼" data-en="Chinese schemes: full pinyin plus four double pinyin">种中文输入方案：全拼与四种双拼</span>
</div>
<div class="stat acrylic">
<strong data-count="40000" data-prefix="≈">≈40,000</strong>
<span data-zh="离线英文词表，补全、纠错与预测" data-en="offline English words for completion, correction, and prediction">离线英文词表，补全、纠错与预测</span>
</div>
</div>
<p
class="feature-note"
@@ -718,98 +625,96 @@
</div>
</section>
<!-- 三种服务路径：端侧放大为主信任状（深色区块），顶部徽记演示「数据留在设备内」 -->
<!--
隐私：整页唯一的烟熏亚克力面板。三种服务路径 + 可选账号 + 信任证明；
顶部徽记演示「数据留在设备内」。
-->
<section class="section privacy-section" id="privacy">
<div class="section-inner">
<div class="center-heading inverse reveal">
<div class="device-emblem" aria-hidden="true">
<svg viewBox="0 0 160 160">
<circle class="emblem-orbit" cx="80" cy="80" r="66"/>
<g class="emblem-spin"><circle cx="80" cy="14" r="3.2"/><circle cx="146" cy="80" r="2.2"/></g>
<g class="emblem-spin emblem-spin-rev"><circle cx="80" cy="146" r="2.6"/><circle cx="14" cy="80" r="1.8"/></g>
<rect class="emblem-device" x="52" y="34" width="56" height="92" rx="14"/>
<g class="emblem-wave">
<rect x="62" y="72" width="4" height="16" rx="2"/>
<rect x="70" y="66" width="4" height="28" rx="2"/>
<rect x="78" y="60" width="4" height="40" rx="2"/>
<rect x="86" y="66" width="4" height="28" rx="2"/>
<rect x="94" y="72" width="4" height="16" rx="2"/>
</g>
</svg>
<div class="privacy-panel acrylic-smoke reveal">
<div class="center-heading">
<div class="device-emblem" aria-hidden="true">
<svg viewBox="0 0 160 160">
<circle class="emblem-orbit" cx="80" cy="80" r="66"/>
<g class="emblem-spin"><circle cx="80" cy="14" r="3.2"/><circle cx="146" cy="80" r="2.2"/></g>
<g class="emblem-spin emblem-spin-rev"><circle cx="80" cy="146" r="2.6"/><circle cx="14" cy="80" r="1.8"/></g>
<rect class="emblem-device" x="52" y="34" width="56" height="92" rx="14"/>
<g class="emblem-wave">
<rect x="62" y="72" width="4" height="16" rx="2"/>
<rect x="70" y="66" width="4" height="28" rx="2"/>
<rect x="78" y="60" width="4" height="40" rx="2"/>
<rect x="86" y="66" width="4" height="28" rx="2"/>
<rect x="94" y="72" width="4" height="16" rx="2"/>
</g>
</svg>
</div>
<p class="eyebrow" data-zh="隐私与选择" data-en="Privacy and choice">隐私与选择</p>
<h2 data-split data-zh="数据如何处理，由你决定。" data-en="You choose how your data is processed.">数据如何处理，由你决定。</h2>
<p
data-zh="默认优先使用端侧能力。需要云端识别或 AI 功能时，可配置自己的 API 密钥，或选择托管积分服务。"
data-en="On-device processing is the default. For cloud recognition or AI features, bring your own API key or use optional managed credits."
>默认优先使用端侧能力。需要云端识别或 AI 功能时，可配置自己的 API 密钥，或选择托管积分服务。</p>
</div>
<p class="eyebrow" data-zh="隐私与选择" data-en="Privacy and choice">隐私与选择</p>
<h2 data-split data-zh="数据如何处理，由你决定。" data-en="You choose how your data is processed.">数据如何处理，由你决定。</h2>
<p
data-zh="默认优先使用端侧能力。需要云端识别或 AI 功能时，可配置自己的 API 密钥，或选择托管积分服务。"
data-en="On-device processing is the default. For cloud recognition or AI features, bring your own API key or use optional managed credits."
>默认优先使用端侧能力。需要云端识别或 AI 功能时，可配置自己的 API 密钥，或选择托管积分服务。</p>
</div>
<div class="service-paths">
<article class="path-primary spot reveal">
<span class="path-badge" data-zh="默认" data-en="Default">默认</span>
<svg class="i path-icon" aria-hidden="true"><use href="#i-chip"/></svg>
<h3 data-zh="端侧优先" data-en="On-device first">端侧优先</h3>
<p data-zh="iPhone 与 iPad 默认使用 Apple 设备端语音识别；搭载 Apple 芯片的 Mac 默认运行本地 Qwen3 MLX 模型。原始录音不离开设备。" data-en="iPhone and iPad use Apple’s on-device speech recognition by default; Apple Silicon Macs run a local Qwen3 MLX model. Raw audio never leaves the device.">iPhone 与 iPad 默认使用 Apple 设备端语音识别；搭载 Apple 芯片的 Mac 默认运行本地 Qwen3 MLX 模型。原始录音不离开设备。</p>
<span class="path-note" data-zh="无需 OSG 账号 · 音频留在设备" data-en="No OSG account · Audio stays on device">无需 OSG 账号 · 音频留在设备</span>
</article>
<article class="spot reveal" style="--d:.08s">
<svg class="i path-icon" aria-hidden="true"><use href="#i-key"/></svg>
<h3 data-zh="自备服务商" data-en="Your own API key">自备服务商</h3>
<p data-zh="配置你选择的语音识别或 AI 服务商，请求直达服务商；凭证保存在系统钥匙串。" data-en="Configure the speech or AI provider you choose; requests go directly to them, and credentials stay in the system Keychain.">配置你选择的语音识别或 AI 服务商，请求直达服务商；凭证保存在系统钥匙串。</p>
<span class="path-note" data-zh="无需 OSG 账号" data-en="No OSG account">无需 OSG 账号</span>
</article>
<article class="spot reveal" style="--d:.16s">
<svg class="i path-icon" aria-hidden="true"><use href="#i-coin"/></svg>
<h3 data-zh="托管积分" data-en="Managed credits">托管积分</h3>
<p data-zh="在 iPhone 与 iPad 上，可通过 Apple 登录使用托管语音与 AI，无需自行管理密钥。" data-en="On iPhone and iPad, optionally sign in with Apple to use managed speech and AI — no keys to manage.">在 iPhone 与 iPad 上，可通过 Apple 登录使用托管语音与 AI，无需自行管理密钥。</p>
<span class="path-note" data-zh="主动选择后启用 · 可注销账号" data-en="Explicit opt-in · Deletion available">主动选择后启用 · 可注销账号</span>
</article>
</div>
<div class="privacy-proof reveal">
<div>
<svg class="i" aria-hidden="true"><use href="#i-shield"/></svg>
<h3 data-zh="击键不上传；剪贴板访问需由你主动开启；不集成第三方追踪 SDK。" data-en="Keystrokes are never uploaded. Clipboard access is opt-in. No third-party tracking SDKs.">
击键不上传；剪贴板访问需由你主动开启；不集成第三方追踪 SDK。
</h3>
<div class="service-paths">
<article class="smoke-card is-primary spot">
<span class="path-badge" data-zh="默认" data-en="Default">默认</span>
<svg class="i path-icon" aria-hidden="true"><use href="#i-chip"/></svg>
<h3 data-zh="端侧优先" data-en="On-device first">端侧优先</h3>
<p data-zh="iPhone 与 iPad 默认使用 Apple 设备端语音识别；搭载 Apple 芯片的 Mac 默认运行本地 Qwen3 MLX 模型。原始录音不离开设备。" data-en="iPhone and iPad use Apple’s on-device speech recognition by default; Apple Silicon Macs run a local Qwen3 MLX model. Raw audio never leaves the device.">iPhone 与 iPad 默认使用 Apple 设备端语音识别；搭载 Apple 芯片的 Mac 默认运行本地 Qwen3 MLX 模型。原始录音不离开设备。</p>
<span class="path-note" data-zh="无需 OSG 账号 · 音频留在设备" data-en="No OSG account · Audio stays on device">无需 OSG 账号 · 音频留在设备</span>
</article>
<article class="smoke-card spot">
<svg class="i path-icon" aria-hidden="true"><use href="#i-key"/></svg>
<h3 data-zh="自备服务商" data-en="Your own API key">自备服务商</h3>
<p data-zh="配置你选择的语音识别或 AI 服务商，请求直达服务商；凭证保存在系统钥匙串。" data-en="Configure the speech or AI provider you choose; requests go directly to them, and credentials stay in the system Keychain.">配置你选择的语音识别或 AI 服务商，请求直达服务商；凭证保存在系统钥匙串。</p>
<span class="path-note" data-zh="无需 OSG 账号" data-en="No OSG account">无需 OSG 账号</span>
</article>
<article class="smoke-card spot">
<svg class="i path-icon" aria-hidden="true"><use href="#i-coin"/></svg>
<h3 data-zh="托管积分" data-en="Managed credits">托管积分</h3>
<p data-zh="在 iPhone 与 iPad 上，可通过 Apple 登录使用托管语音与 AI，无需自行管理密钥。" data-en="On iPhone and iPad, optionally sign in with Apple to use managed speech and AI — no keys to manage.">在 iPhone 与 iPad 上，可通过 Apple 登录使用托管语音与 AI，无需自行管理密钥。</p>
<span class="path-note" data-zh="主动选择后启用 · 可注销账号" data-en="Explicit opt-in · Deletion available">主动选择后启用 · 可注销账号</span>
</article>
</div>
<!-- 可选账号与积分：原独立区块并入这里，与「托管积分」路径相邻 -->
<div class="account-row smoke-card" id="account">
<div>
<h3 data-zh="账号是选项，不是门槛。" data-en="An account is an option, not a gate.">账号是选项，不是门槛。</h3>
<p data-zh="本地听写和自备服务商始终可以独立使用，登录只在你需要托管积分时发生。" data-en="On-device dictation and your own providers always work on their own. Sign-in only happens when you want managed credits.">本地听写和自备服务商始终可以独立使用，登录只在你需要托管积分时发生。</p>
</div>
<ul class="quiet-list">
<li data-zh="首次引导以匿名凭证送 4 次免费体验，不创建账号、不消耗积分" data-en="First-run guidance includes 4 free guided trials via anonymous credentials — no account, no credits spent">首次引导以匿名凭证送 4 次免费体验，不创建账号、不消耗积分</li>
<li data-zh="Apple 登录即可领取符合条件的 1,000 积分注册奖励" data-en="Sign in with Apple to claim an eligible 1,000-credit welcome reward">Apple 登录即可领取符合条件的 1,000 积分注册奖励</li>
<li data-zh="邀请好友，双方均可获得积分奖励" data-en="Invite friends and you both earn credits">邀请好友，双方均可获得积分奖励</li>
<li data-zh="账号令牌不下发给键盘扩展；应用内可注销账号" data-en="Account tokens never reach the keyboard extension; deletion is available in-app">账号令牌不下发给键盘扩展；应用内可注销账号</li>
</ul>
</div>
<div class="privacy-proof smoke-card">
<div>
<strong data-count="0" data-from="99">0</strong>
<h3 data-zh="个第三方追踪 SDK。击键不上传；剪贴板访问需由你主动开启。" data-en="third-party tracking SDKs. Keystrokes are never uploaded, and clipboard access is opt-in.">
个第三方追踪 SDK。击键不上传；剪贴板访问需由你主动开启。
</h3>
</div>
<a class="keycap" href="privacy/">
<span data-zh="阅读完整隐私政策" data-en="Read the full privacy policy">阅读完整隐私政策</span>
<svg class="i" aria-hidden="true"><use href="#i-arrow-out"/></svg>
</a>
</div>
<a class="inverse-link" href="privacy/">
<span data-zh="阅读完整隐私政策" data-en="Read the full privacy policy">阅读完整隐私政策</span>
<svg class="i" aria-hidden="true"><use href="#i-arrow-out"/></svg>
</a>
</div>
</div>
</section>
<!-- 可选账号与积分 -->
<section class="section account-section" id="account">
<div class="section-inner account-layout">
<div class="feature-copy reveal">
<p class="eyebrow" data-zh="可选账号与积分" data-en="Optional account and credits">可选账号与积分</p>
<h2 data-split data-zh="账号是选项，不是门槛。" data-en="An account is an option, not a gate.">账号是选项，不是门槛。</h2>
<p
data-zh="本地听写和自备服务商始终可以独立使用。登录只在你需要托管积分时发生。"
data-en="On-device dictation and your own providers always work on their own. Sign-in only happens when you want managed credits."
>本地听写和自备服务商始终可以独立使用。登录只在你需要托管积分时发生。</p>
<ul class="quiet-list">
<li data-zh="首次引导以匿名凭证送 4 次免费体验，不创建账号、不消耗积分" data-en="First-run guidance includes 4 free guided trials via anonymous credentials — no account, no credits spent">首次引导以匿名凭证送 4 次免费体验，不创建账号、不消耗积分</li>
<li data-zh="Apple 登录即可领取符合条件的 1,000 积分注册奖励" data-en="Sign in with Apple to claim an eligible 1,000-credit welcome reward">Apple 登录即可领取符合条件的 1,000 积分注册奖励</li>
<li data-zh="邀请好友，双方均可获得积分奖励" data-en="Invite friends and you both earn credits">邀请好友，双方均可获得积分奖励</li>
<li data-zh="账号令牌不下发给键盘扩展；应用内可注销账号" data-en="Account tokens never reach the keyboard extension; deletion is available in-app">账号令牌不下发给键盘扩展；应用内可注销账号</li>
</ul>
</div>
</div>
</section>
<!-- 平台：实机截图随语言与主题自动切换 -->
<section class="section platforms-section section-alt" id="platforms">
<!-- 平台：实机截图随语言与主题自动切换；稳定性标签挂在末尾 -->
<section class="section platforms-section" id="platforms">
<div class="section-inner">
<div class="center-heading reveal">
<p class="eyebrow" data-zh="iPhone 与 Mac 语音输入法" data-en="Voice keyboard for iPhone and Mac">iPhone 与 Mac 语音输入法</p>
<h2 data-split data-zh="在 iPhone、iPad 上输入，在 Mac 上听写。" data-en="Type on iPhone and iPad. Dictate on Mac.">在 iPhone、iPad 上输入，在 Mac 上听写。</h2>
</div>
<div class="platform-grid">
<article class="platform-card spot reveal">
<div class="media-frame">
<article class="platform-card acrylic spot lift reveal">
<div class="media-inset">
<img
src="assets/screenshots/zh/light/iphone-home.png"
data-shot="iphone-home.png"
@@ -824,8 +729,8 @@
<h3 data-zh="一把键盘，覆盖完整输入流程" data-en="A complete input workspace in one keyboard">一把键盘，覆盖完整输入流程</h3>
<p data-zh="听写、AI 助手、中文与英文输入、剪贴板技能、个人词典和可选 iCloud 同步。" data-en="Dictation, AI assistant, Chinese and English typing, clipboard skills, personal dictionary, and optional iCloud sync.">听写、AI 助手、中文与英文输入、剪贴板技能、个人词典和可选 iCloud 同步。</p>
</article>
<article class="platform-card spot reveal" style="--d:.1s">
<div class="media-frame">
<article class="platform-card acrylic spot lift reveal" style="--d:.1s">
<div class="media-inset">
<img
src="assets/screenshots/zh/light/mac-recording.png"
data-shot="mac-recording.png"
@@ -846,32 +751,24 @@
公开下载的 Mac DMG 是已签名并公证的历史版本 1.1；仓库中的 Mac 源码已演进至 2.2，最新功能请用 Xcode 26 从源码构建。
</span>
</p>
</div>
</section>
<!-- 稳定性信任条 -->
<section class="section reliability-section">
<div class="section-inner">
<div class="reliability-strip reveal">
<span class="strip-title" data-zh="稳定性同样是功能" data-en="Reliability is a feature">稳定性同样是功能</span>
<ul>
<li data-zh="内存阈值主动降级" data-en="Proactive memory relief">内存阈值主动降级</li>
<li data-zh="MetricKit 本机诊断" data-en="On-device MetricKit diagnostics">MetricKit 本机诊断</li>
<li data-zh="启动保护与中断恢复" data-en="Startup protection and recovery">启动保护与中断恢复</li>
<li data-zh="CI 校验跨端配置" data-en="CI-checked configuration">CI 校验跨端配置</li>
</ul>
<div class="reliability reveal" aria-label="稳定性" data-zh-label="稳定性" data-en-label="Reliability">
<span class="reliability-title" data-zh="稳定性同样是功能" data-en="Reliability is a feature">稳定性同样是功能</span>
<span class="chip" data-zh="内存阈值主动降级" data-en="Proactive memory relief">内存阈值主动降级</span>
<span class="chip" data-zh="MetricKit 本机诊断" data-en="On-device MetricKit diagnostics">MetricKit 本机诊断</span>
<span class="chip" data-zh="启动保护与中断恢复" data-en="Startup protection and recovery">启动保护与中断恢复</span>
<span class="chip" data-zh="CI 校验跨端配置" data-en="CI-checked configuration">CI 校验跨端配置</span>
</div>
</div>
</section>
<!-- FAQ：展开 / 收起带高度过渡；前三问定义产品品类，同时作为 FAQPage 结构化数据 -->
<section class="section faq-section section-alt" id="faq">
<div class="section-inner faq-layout">
<div class="faq-heading reveal">
<!-- FAQ：居中单栏，展开 / 收起带高度过渡；前三问定义产品品类，同时作为 FAQPage 结构化数据 -->
<section class="section faq-section" id="faq">
<div class="section-inner">
<div class="center-heading reveal">
<p class="eyebrow" data-zh="常见问题" data-en="FAQ">常见问题</p>
<h2 data-split data-zh="品类、隐私和限制，提前说清楚。" data-en="The category, privacy, and limits — answered up front.">品类、隐私和限制，提前说清楚。</h2>
</div>
<div class="faq-list">
<div class="faq-list acrylic reveal">
<details class="faq-item reveal">
<summary data-zh="什么是嘴替输入法？" data-en="What is a “zuiti” (speak-for-me) keyboard?">什么是嘴替输入法？</summary>
<p data-zh="嘴替输入法是能替你把话说好的输入法：你随口说出想法，它在保留你个人语气的前提下整理成得体的文字。OSGKeyboard 会从你确认过的真实听写中学习说话风格，复制对方的消息后，会按你的口吻给出普通、正式、轻松趣味三条回复，点选即插入。" data-en="“Zuiti” (嘴替) is Chinese internet slang for someone who says what you mean, better than you would. OSGKeyboard learns from dictation you have confirmed, then turns casual speech into polished text in your own tone. Copy a message and it drafts three replies — ordinary, formal, and relaxed &amp; playful — tap one to insert.">
@@ -924,10 +821,10 @@
</div>
</section>
<!-- 下载 CTA：与 Hero 呼应的深色舞台，背景声波沿路径流动 -->
<!-- 下载：一块大亚克力面板，图标键帽与首屏首尾呼应，背景声波沿路径流动 -->
<section class="section download-section" id="download">
<div class="section-inner">
<div class="download-panel reveal">
<div class="download-panel acrylic spot reveal">
<div class="download-backdrop" aria-hidden="true">
<span class="aurora aurora-a"></span>
<span class="aurora aurora-b"></span>
@@ -937,6 +834,7 @@
</svg>
</div>
<div class="download-copy">
<img class="download-mark" src="assets/app-icon.png?v=20260927b" width="64" height="64" alt="" loading="lazy">
<p class="eyebrow" data-zh="开口即文字" data-en="Say it. It’s typed.">开口即文字</p>
<h2 data-split data-zh="下一段文字，开口就能输入。" data-en="Your next sentence starts with your voice.">下一段文字，开口就能输入。</h2>
<p data-zh="先使用免费的端侧核心功能；需要时，再配置自己的 API 密钥或选择托管积分服务。" data-en="Start with the free, on-device core. Add your own API key or managed credits only when needed.">
@@ -975,7 +873,7 @@
>
</a>
<a
class="outline-action magnetic"
class="keycap magnetic"
href="https://github.com/hkgood/OSGKeyboard#从源码构建"
data-zh-href="https://github.com/hkgood/OSGKeyboard#从源码构建"
data-en-href="https://github.com/hkgood/OSGKeyboard/blob/main/README.en.md#build-from-source"
@@ -1003,6 +901,6 @@
</div>
</footer>
<script src="assets/site.js?v=20261001c"></script>
<script src="assets/site.js?v=20261002a"></script>
</body>
</html>