首页文案逐字切换动画

复制提示词，让首页引导文案逐字切换，轻柔回弹，始终稳定居中。

复刻提示词

为首页引导文案：
Find design inspiration
Create fun animations
Learn AI design workflows
Understand product design
实现循环切换动画，保持现有字体、颜色和布局不变。

文案固定单行居中，容器高度不变，不推动周围元素。首次加载直接显示第一句，每隔 2.2 秒切换下一句，末句结束后循环。

切换规则：
- 按字符从左到右依次动画，每个字符错开 30ms，空格保留，不限制末尾字符的延迟。
- 旧文案逐字向上移动 10pt，透明度从 1 降至 0，模糊从 0 增至 6pt，缩放从 1 降至 0.985。
- 新文案同步从下方 10pt 进入，透明度从 0 升至 1，模糊从 6pt 降至 0，缩放恢复至 1。
- 每个字符过渡持续 380ms，使用 easeInOut。新旧文案各自整体居中，在同一容器内叠放交接。
- 切换开始后约 1.25 秒，新文案逐字轻微放大至 1.018，再弹性恢复至 1；字符间错开 16ms，回弹轻柔克制。

保证不同长度文案切换时居中稳定、尾部字符仍逐字过渡，不出现整段突然替换、闪烁、裁切或布局跳动。不要做成打字机效果，也不要整行统一滚动。

实现约定与验收：
- 每隔 2.2 秒指相邻两次切换开始的间隔。首句静止显示 2.2 秒（2200ms）后启动第一次切换；此后依次轮换。
- 本例原稿主文案为 SF Pro Bold、22pt、行高 28pt、字距 -0.26pt、颜色 #f0711c。副文案 Leave it to NorthStar、图形与背景不参与动画。
- iOS 使用 pt，Web 使用等值 CSS px；窄屏仅整体等比例缩放参考画布，不单独压缩字距或裁切长句。
- 按字素分段，保留原始空格。字符延迟按原句索引计算；完整过渡时间为 380ms + (字符数 - 1) × 30ms，不截断、不封顶。
- Web 的 easeInOut 明确为 cubic-bezier(0.42, 0, 0.58, 1)。回弹使用阻尼弹簧，首峰归一化至 1.018，每字持续约 500ms，不用缓动曲线假装弹簧。
- 回弹从本轮切换起点 + 1250ms + 字符索引 × 16ms 开始。若末尾回弹与下一轮淡出重叠，组合缩放，不突然取消或重置。
- 保留完整句子的测量宽度和字符排版位置，分别居中旧句与新句。切换只改变字符的 transform、opacity 和 blur，不改变布局尺寸。
- 暂停、重播和进度拖动共用一条时间轴。字体加载后才开始计时；页面进入后台时冻结时间；减少动态效果开启时显示静态首句。
- 验收第一帧、长句尾部、回弹与下一轮交叠、末句到首句、调整窗口宽度，以及连续多轮播放。

动画源代码

会员解锁后可查看并复制完整 Web / Swift 源码。

<!-- # 保存为 index.html，用浏览器打开；原稿 SVG 已内嵌，无需构建或联网。 -->
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>首页文案逐字切换动画</title>
<!-- Preserve the original typography and static illustration.
     2200ms between handoff starts; 30ms per character, no capped tail delay.
     All glyphs share one deterministic clock, including the restrained spring.
     First sentence is visible immediately; reduced motion stays static. -->
<style>
:root { --border:#ddd8cc; font-family:system-ui,sans-serif; }
* { box-sizing:border-box; }
body { margin:0; padding:20px; background:#f7f6f2; }
button,input { font:inherit; }
.text-demo { max-width:760px; margin:auto; }
.motion-preview { margin: 20px 0 36px; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: #1c1c19; }
.motion-stage { box-sizing: border-box; height: 540px; display: flex; align-items: center; justify-content: center; padding: 32px 24px 24px; }
.motion-frame-holder { position: relative; width: 402px; height: 616px; flex: none; }