把作品集做成「强交互」站点：一次改版记录

把静态作品集重做成强交互站点：液态玻璃输入框、手机从卡片飞出演示、服务端渲染的 Log。记录几个关键取舍：视差与性能、SPA 与 SSR 并存、以及为什么最后删掉了背景动画。

这个站原来的形态是「纸色编辑风」的长页面，信息清楚但很平。这次改版的出发点是：让演示本身成为内容，而不是用文字描述产品。

做了什么

• 开场：极光渐变背景 + 液态玻璃输入框，输入框 0.25s 就位，不与背景动画互相等待。
• 转场：点击快捷入口后，输入框从屏幕中央飞向顶部居中，变成常驻的玻璃条（左侧返回、中间标题、右侧导航与 GitHub）。
• 演示剧场：点「播放演示」，卡片里的迷你手机会放大飞出成剧场里的全尺寸手机，飞行途中屏幕已经点亮；关闭时缩回卡片。飞行用 FLIP + 交叉淡化，背景模糊随飞行进度线性渐晰。
• Log：也就是你现在看的这个板块，改为服务端渲染的真实 URL，方便搜索引擎与 AI 搜索收录。

几个取舍

1. 背景动画删了两轮。第一版是彩色弹球，第二版是统一主题色的玻璃球，最后全部删掉，只留极光渐变。原因是背景越"努力"，主体越不突出——视线管理比视觉丰富度重要。
2. 放大镜替代镜头推近。早期做法是把整个手机放大，结果超出屏幕、构图难看；改成悬浮玻璃放大镜：镜内 2x 显示焦点内容，镜外真实屏幕高斯虚化，主体突出且构图稳定。
3. SPA 与 SSR 并存。交互页保持单页应用（无刷新转场），但 Log 这类需要被收录的内容走服务端渲染的独立路由，两者共用同一套设计变量。
4. 文案比动效重要。演示最初写的是"「跳过」小得几乎看不清"，用户反馈看不懂；重写成"这就是 gkd-plus → 打开一个常用 App → 开屏广告弹出 → gkd-plus 找到了跳过按钮 → 广告没了"，播放速度也放慢了一半。

下一步

• Log 支持更多格式（表格、脚注）与标签页
• 演示增加"规则订阅"的可视化编辑