首屏打字机改为固定字号 + CSS 光标,并修掉首屏白屏

按 Firefly banner 的做法重做,三件事:

1) 字号固定,不随句子长度变
   - 文案从 4 句(14/11/4/4 字,差 3.5 倍)压成 2 句长度接近的王小波
   - 字号用 text-[clamp(1.125rem,5.6vw,4rem)],只跟视口缩放
     · 手机 390px → 21.8px(15 个字一行刚好放得下)
     · 桌面 1280px → 64px(比 Firefly 的 3rem 更大更醒目)
   - 容器 max-w-4xl(896px) → max-w-5xl(1024px):15 字 × 64px = 954px,4xl 装不下
   - 实测 320/360/390/430/640/768/1024/1280/1920 全部放得下,无溢出

2) 光标改成 CSS ::after
   - 删掉整套运行时测量:measureRef / designRef / fontSize state /
     fitFontSize / ResizeObserver / CURSOR_EM / CURSOR_GAP_PX / 两个隐藏量具
   - hero.tsx 298 → 208 行,两个文件净减 52 行
   - 顺带消除测量误差,光标跟着字号自动缩放

3) 去掉和打字机重复的 Flannery O'Connor 引语

另外修掉两个自己发现的问题:

- 【真 bug】首屏在 JS 加载前是隐形的
  SSR 出来的包裹层带 opacity-0,要等 React hydrate 才变可见,
  慢网络下第一屏是白屏、LCP 被拖后。改成 CSS 入场动画(.hero-enter),
  SSR 即可见;顺带删掉只为它存在的 mounted state

- 【算错】第一版 clamp 封顶写了 4.25rem(68px),但容器 896px 装不下
  1013px,≥1280px 会溢出。一起修掉了

验证:pnpm build 退出码 0;dist 里已无 hero-cursor span、无隐藏量具、
无 Flannery 引语,h1 class 为 hero-typewriter + clamp 字号
This commit is contained in:
dsh
2026-09-16 17:47:20 +08:00
parent c597427b9a
commit ee5ec50602
3 changed files with 85 additions and 137 deletions
+4 -4
View File
@@ -1,5 +1,5 @@
{
"updatedAt": "2026-09-15T10:00:22.188Z",
"updatedAt": "2026-09-16T09:46:47.801Z",
"source": "weread",
"books": [
{
@@ -8,12 +8,12 @@
"author": "布尔加科夫",
"category": "文学-外国文学",
"cover": "https://wfqqreader-1252317822.image.myqcloud.com/cover/299/26678299/t6_26678299.jpg",
"progress": 30,
"progress": 31,
"finished": false,
"lastReadAt": "2026-09-13T15:08:26.000Z",
"lastReadAt": "2026-09-15T16:12:26.000Z",
"startedAt": "2026-09-04T16:07:07.000Z",
"finishedAt": null,
"readingSeconds": 4030,
"readingSeconds": 4209,
"deepLink": "https://weread.qq.com/book-detail?type=1&v=34c329807197141b34cf1db"
},
{