Skip to content

feat(capsule): animated thinking shine indicator#408

Merged
appergb merged 1 commit into
betafrom
pr/capsule-thinking-shine
May 11, 2026
Merged

feat(capsule): animated thinking shine indicator#408
appergb merged 1 commit into
betafrom
pr/capsule-thinking-shine

Conversation

@appergb
Copy link
Copy Markdown
Collaborator

@appergb appergb commented May 11, 2026

User description

Summary

  • 把 transcribing / polishing 阶段的胶囊从 "三个圆点 + 文案" 换成扫光的 thinking 文字效果
  • 字号 11 → 14,字重 500,linear-gradient + background-clip: text 实现扫光
  • 进入流式头 2 秒走 0.9s 高速扫光(提示「刚开始」),之后切到 2.4s 稳态;duration 变化时浏览器不重启动画,会平滑减速
  • 5 个 locale 的 `capsule.thinking` 文案统一为 'thinking'(小写英文),与扫光字面视觉一致

Test plan

  • `npm run build` pass
  • 真机验证:录音 → 转写 → 润色全程胶囊文字扫光动画顺滑,状态切换有淡入提示
  • 中英日韩繁五种 locale 下扫光字面尺寸排版一致

PR Type

Enhancement


Description

  • Replaced processing dots with thinking shine

  • Added fast-then-slow shimmer timing

  • Faded in state transitions

  • Unified thinking text across locales


Diagram Walkthrough

flowchart LR
  A["Capsule processing state"] -- "renders" --> B["Shining thinking text"]
  B -- "uses" --> C["Fast burst then steady shimmer"]
  B -- "applies" --> D["State enter fade-in"]
  E["Locale strings"] -- "normalize to" --> F["thinking"]
  F -- "feeds" --> B
Loading

File Walkthrough

Relevant files
Enhancement
Capsule.tsx
Replace dots with animated thinking shine                               

openless-all/app/src/components/Capsule.tsx

  • Removed the ProcessingDots indicator entirely.
  • Rendered thinking as gradient-clipped animated text.
  • Added a fast initial shimmer, then steady speed.
  • Added a brief state-enter fade for transitions.
+46/-29 
Localization
en.ts
Normalize English thinking label                                                 

openless-all/app/src/i18n/en.ts

  • Changed capsule.thinking from Thinking… to thinking.
  • Keeps the visual label aligned with the new shine effect.
+1/-1     
ja.ts
Normalize Japanese thinking label                                               

openless-all/app/src/i18n/ja.ts

  • Changed capsule.thinking from Japanese text to thinking.
  • Removes locale-length variance from the capsule layout.
+1/-1     
ko.ts
Normalize Korean thinking label                                                   

openless-all/app/src/i18n/ko.ts

  • Changed capsule.thinking from Korean text to thinking.
  • Ensures consistent width for the animated text treatment.
+1/-1     
zh-CN.ts
Normalize Simplified Chinese thinking label                           

openless-all/app/src/i18n/zh-CN.ts

  • Changed capsule.thinking from Chinese text to thinking.
  • Aligns the displayed text with the new shimmer styling.
+1/-1     
zh-TW.ts
Normalize Traditional Chinese thinking label                         

openless-all/app/src/i18n/zh-TW.ts

  • Changed capsule.thinking from Chinese text to thinking.
  • Keeps the capsule label visually consistent across locales.
+1/-1     

把 transcribing / polishing 阶段的胶囊从原来的"三个圆点 + 文案"换成
扫光的 thinking 文字效果:

- 移除 ProcessingDots 组件
- 文字字号 11 → 14,字重 500,扫光 linear-gradient + background-clip: text
- 进入 transcribing / polishing 的头 2 秒走 0.9s/cycle 快速扫光(提示「刚开始」),
  之后切回 2.4s 稳态。React 副作用切 duration 不重启动画,会平滑减速
- 切换 state 时多一道 220ms 淡入(cap-state-enter)让用户更容易感知
- 5 个 locale 的 capsule.thinking 文案统一为 'thinking'(小写英文),与扫光字面
  视觉一致,避免不同语言长度差影响排版

CSS keyframes 改名 cap-dot → cap-shine,并加 cap-state-enter。
@github-actions
Copy link
Copy Markdown

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪
🧪 No relevant tests
🔒 No security concerns identified
⚡ No major issues detected

@appergb appergb merged commit 1f11e25 into beta May 11, 2026
4 checks passed
@appergb appergb deleted the pr/capsule-thinking-shine branch May 11, 2026 16:32
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant