网页版涂鸦绘本：手写可视化与纸感网页

这两天 Claude 的手写可视化很火。很多人看到的是"手写字体"，@Xian0063 看到的是另一件事：

网页终于不再只是规整的卡片和模板，而是重新有了纸张、涂鸦、翻页、拖拽和人的手感。

他整理了 5 个同方向、而且真的可以玩的交互作品（原帖实列 3 个）。这课是本专题唯一讲"手绘质感网页"的——与第 4 课（手绘白板视频）、第 20 课（手绘纸纹风格）呼应，但媒介是可交互的网页。

过去十年的网页长一个样：规整的卡片、统一的圆角、模板化的排版——高效，但没人味。

涂鸦绘本风反其道而行：纸张、铅笔线、儿童涂鸦、横向拖动。不完美，但让人想摸一摸。

Mr. Panda's Paper Portfolio：像把小时候画在笔记本上的世界，剪下来放进浏览器。

元素：纸张、铅笔线、儿童涂鸦、横向拖动。作者说它最特别的不是技术多炫，而是整个网站让人感觉很安全、很柔软。

网址：mr-pandas-psychologically-safe-portfolio.com（"psychologically safe"心理安全——连域名都在讲"柔软"）。

Ponpon Mania：一只梦想成为 DJ 的羊，做成一本会呼吸的互动漫画。

设计：平时是黑白手绘，进入幻想时颜色开始渗出来。滚动、转场、声音、鼠标反馈都在推动故事，而不是单纯展示特效。

关键句："滚动、转场、声音和鼠标反馈都在推动故事，而不是单纯展示特效"——交互是叙事的一部分，不是皮肤。

Justine Soulié Portfolio（插画师 / 艺术总监）：这里的插画不是网页上的装饰，插画本身就是界面。

拖动、悬停、滚动速度不同，画面给不同反馈。每个项目像一张可以被拉扯、拨动和唤醒的动态海报。

网址：justinesoulie.fr。

• 手感是功能：纸张、涂鸦、拖拽带来的"人的手感"，本身就是留住人的理由（呼应第 4 课"画的过程本身在留人"）。
• 交互要叙事：动效不是装饰，是故事的一部分——颜色渗出=进入幻想，拉扯=唤醒海报。
• 不完美是风格：铅笔线的抖动、涂鸦的随意，恰恰是模板时代最稀缺的东西。

• 本课（第 23 课）：手绘质感网页——可交互的涂鸦绘本。
• 第 4 课：手绘白板视频——Excalidraw 线条 + 逐笔动画。
• 第 20 课：手绘纸纹 / 沙画风格的代码动画。

同一美学，三种媒介：网页可玩、视频可看、代码可改。做内容时先选媒介，再选手绘的表达方式。