我用前端技术做了一本可以交互的科普书——关于人类如何破解衰老当 Canvas 粒子遇上长寿科学当 CSS 动画讲述细胞重编程这不仅仅是一个网页而是一场关于永生的沉浸式阅读实验。先上链接在线体验点击体验建议用电脑打开首屏的视觉效果值得一看。这个项目是什么《永生密码》是一本可交互的前端科普教程主题是人类长寿科学。从端粒损耗到表观遗传从 AlphaFold 到细胞重编程从热量限制到基因编辑——六个章节系统性地拆解了衰老这个生物学程序。但这不是传统的图文排版。我们用前端技术做了一件事让科普内容本身成为一种体验。技术实现亮点首屏视觉多重动画叠加的沉浸感打开首页你会看到Canvas 粒子星空200 粒子在背景中缓慢漂移鼠标靠近时产生引力扰动字符瀑布动画标题永生密码四个字逐字从下方浮入每个字有独立的延迟和缓动曲线扫描光效渐变文字上有一道倾斜的光束周期性扫过鼠标聚光灯鼠标移动时背景会跟随产生一圈柔和的光晕打字机副标题解码人类长寿的终极科学逐字打出带闪烁光标这些效果全部原生实现零依赖。核心是requestAnimationFrame CSSclip-path CSS 变量追踪鼠标坐标。纯 SVG 极坐标图表首页中央有一个 12 根柱子的极坐标条形图展示的是2023 年更新的 12 个衰老标志Hallmarks of Aging。前 9 根为青色2013 年原始标志后 3 根为金色2023 年新增。这个图表最初用 ECharts 实现但考虑到 CDN 在国内的稳定性问题最终重写为纯 SVG 原生 JS。支持鼠标悬停 tooltip、滚动触发的逐根入场动画、发光滤镜效果。数字滚动计数器四个关键数据以动画形式呈现522.7 亿美元 —— 全球抗衰老药物市场202530 亿美元 —— 贝索斯投资 Altos Labs12 个标志 —— 2023 年更新的衰老标志150 岁 —— 人类寿命理论极限数字从 0 滚动到目标值使用requestAnimationFrame ease-out 缓动函数。3D 透视卡片章节卡片支持鼠标跟随的 3D 倾斜效果。当鼠标在卡片上移动时卡片会根据鼠标位置产生rotateX和rotateY的轻微倾斜同时叠加一层渐变高光linear-gradient模拟。实现核心是perspective(800px) 鼠标坐标到旋转角度的映射。阅读体验系统每个章节页面内置了一套完整的阅读体验阅读进度条固定在顶部滚动时实时更新明暗主题切换localStorage 持久化全站同步键盘导航j/k滚动、gg/G跳转顶部/底部、t切换主题、?显示快捷键面板阅读位置记忆sessionStorage 保存滚动位置返回页面时自动恢复阅读成就系统读完一章自动记录首页显示完成进度侧边进度点桌面端右侧悬浮圆点点击跳转对应章节章节内的交互模块每个章节不仅有文字还包含四个交互模块叙事钩子用一个场景故事引入主题降低阅读门槛科学争议呈现正反两方观点培养批判性思维自我评估测试选择题形式检验理解答对绿色高亮、答错红色高亮并自动展开解析行动指南给出读者可以实际操作的步骤内容结构章节主题核心内容第一章衰老的密码12 个衰老标志、端粒与表观遗传第二章AI 与生命AlphaFold、AI 衰老时钟、AI 药物发现第三章重写生命基因编辑、细胞重编程、山中伸弥因子第四章燃料与引擎代谢、饮食、NAD、mTOR、热量限制第五章修复与替换干细胞、再生医学、3D 生物打印第六章未来已来投资热潮、伦理争议、技术路线图设计哲学整个项目的设计围绕一个核心阅读体验优先。阅读宽度限制在 720px行高 1.9长文阅读不累眼深色主题为主配合微妙的径向渐变环境光营造沉浸感所有动画都有prefers-reduced-motion降级尊重用户偏好字体栈精心选择Jura标题、CrimsonPro正文、InstrumentSansUI、GeistMono代码一些数据6 个章节总字数约 5 万字首页首屏包含 7 种动画效果12 个衰老标志的交互式极坐标图24 道自我评估测试题每章 4 题支持键盘快捷键、明暗主题、阅读进度、位置记忆等 10 项阅读辅助功能写在最后这个项目最初只是一个把科普内容做成网页的想法但在迭代过程中逐渐变成了一场关于阅读体验的实验。我们发现当内容本身足够硬核时形式可以成为内容的放大器——一个好的视觉设计能让读者更愿意深入一个好的交互设计能让抽象概念变得可感知。衰老生物学是一个正在爆发的领域。2024 年诺贝尔化学奖颁给了 AlphaFold 的团队贝索斯、Altman、Peter Thiel 等硅谷巨头正在向长寿科技投入数十亿美元。也许十年后回头看我们会发现 2026 年是这道永生方程式被真正解开的起点。而在此之前先用前端技术把这个未来讲清楚也挺酷的。欢迎体验点击体验如果有任何建议或发现 bug欢迎在评论区交流。