Reference: landonorris.com / 2026-06-11

丝滑动效拆解

结论先说：不需要大改 Hexo/Solitude 框架。Lando Norris 官网的完整方案非常重，核心是 Webflow + Lenis + GSAP/ScrollTrigger + Rive/THREE/WebGL。你的个人站更适合做“轻量体感复刻”：鼠标光晕、卡片磁吸、呼吸背景、滚动入场、滚动进度、局部 pinned 叙事。

本报告自身带了一个低成本鼠标光晕、背景呼吸和滚动入场演示。

观察证据

维度 参考站观察到的特征 对 Orizuru 的含义
技术栈 页面由 Webflow 输出，外部脚本含 GSAP、ScrollTrigger、Lenis、Rive、THREE/WebGL 等特征。 直接搬完整体系会过重；应抽象为少量自定义 CSS/JS 增强。
DOM 结构 大量 data-rive-*、data-gl-*、data-anim-high、sticky-track、horizontal-pin-sticky 标记。 可以借鉴“用 data 属性声明动效”的组织方式，接入现有 source/js/orizuru-motion.js。
资源量 桌面首屏观察到约 20 个 canvas、133 张图片、86 个 SVG，页面高度约 11334px。 完整复刻不适合轻博客；个人站应控制 canvas 和大图数量。
现有基础 Orizuru 已有滚动入场、背景呼吸、卡片 hover、PJAX 过渡、reduced-motion 兜底。 具备增量增强基础，不需要换框架。

可作为个人建站参考的效果

Cursor

鼠标跟随光晕 / 指针氛围层

参考站有大量鼠标与 WebGL/按钮交互。个人站可用一个 fixed radial-gradient 光晕跟随鼠标，低成本制造“活着”的感觉。

适合度：高
Breath

背景呼吸与慢速位移

参考站的背景层和 canvas 会随滚动/时间变化。Orizuru 已有背景呼吸，可继续做得更细：慢缩放、轻位移、低透明度纹理。

适合度：高
Hover

卡片局部高光与磁吸 hover

参考站按钮、图卡和头盔网格 hover 反馈很明确。个人站可给文章卡、友链卡、导航按钮加局部高光和轻微位移。

适合度：高
Reveal

文字/卡片滚动入场

参考站用 split text 和 ScrollTrigger 做逐行入场。个人站不必引入完整 SplitType，可继续用 IntersectionObserver 加 stagger。

适合度：高
Progress

阅读/页面滚动进度条

参考站右侧有 fixed scroll indicator。个人博客很适合做顶部细进度条，文章页尤其有用。

适合度：高
Transition

PJAX 页面过渡

参考站有全屏 loader/transition。你的站点已用 PJAX，可做轻量遮罩淡入淡出，不建议做全屏复杂动画。

适合度：中高
Pinned

局部 pinned 叙事段

参考站 sticky hero 和横向 pinned 段很强。个人站可只在 About 或专题页做一段“折鹤时间线”，不建议全站铺开。

适合度：中
Mask

图片 clip-path / mask hover

参考站在图片和合作模块里用椭圆 clip-path、mask-image。个人站可用于友链头像、文章封面、关于页照片。

适合度：中
Rive/WebGL

Rive / WebGL 角色动画

参考站的头盔、签名、赛道等大量用 Rive/THREE。若 Orizuru 后续有专属折鹤动画，可单独做一个 canvas 模块，但不适合当前首轮。

适合度：低到中

是否需要大改框架？

方案 改动范围 性能风险 建议
轻量增强 继续使用 Hexo/Solitude，只改 source/css/orizuru.css 和 source/js/orizuru-motion.js。 低。可保留当前 mobile 和 reduced-motion 兜底。 推荐，能拿到 70% 体感。
局部专题页增强 只给 About/专题页增加 pinned timeline、图片 mask、局部横向滚动。 中。需要更多响应式验证。 第二阶段做。
完整动效引擎 引入 Lenis + GSAP/ScrollTrigger，重做滚动系统和多个页面模块。 中高。可能和 Solitude/PJAX/移动端产生冲突。 不建议全站做。
WebGL/Rive 复刻 需要专门设计资产、canvas 生命周期、懒加载和降级策略。 高。资源和维护成本明显上升。 只适合后续品牌视觉成熟后单独立项。

推荐落地路径

Phase 1

鼠标光晕 + 卡片局部高光 + 滚动进度

改动最小，直接挂到现有 orizuru-motion.js。桌面启用，触屏和 reduced-motion 关闭。

Phase 2

增强滚动入场与 PJAX 过渡

扩展现有 IntersectionObserver：分组 stagger、标题行入场、页面切换遮罩。继续保持无第三方依赖。

Phase 3

About 专题动效段

给关于页做一段 sticky timeline：学习、项目、工具、灵感，用 CSS sticky + transform 模拟 pinned 叙事。

Phase 4

专属折鹤/Rive 动画

等图片和视觉体系确定后再做。可以是一只小折鹤的 Rive 或 canvas 动画，懒加载，不能影响首屏。

建议代码组织

沿用当前文件，不需要换框架：

source/js/orizuru-motion.js - addPointerGlow() - addCardLight() - addScrollProgress() - enhanceRevealGroups() - bindPjaxReinit() source/css/orizuru.css - .orizuru-cursor-glow - [data-or-hover-light] - .orizuru-scroll-progress - stronger reduced-motion/mobile guards

判断结论

可以马上做 鼠标光晕、卡片 hover 高光、滚动进度条、滚动入场细化、背景呼吸微调。
谨慎做 页面切换遮罩、局部 sticky 叙事、图片 clip-path hover。
暂缓 Lenis 全站平滑滚动、GSAP/ScrollTrigger 全量接入、Rive/WebGL 多 canvas 动效。
不需要 不需要从 Hexo/Solitude 换到 Webflow、Next、React 或重建主题。