芋泥椰子冻 · 个人文字站

这个项目是什么

/writing 是我的个人文字站。诗词、音乐、读书笔记、随笔、荐读——从 2016 年写到现在的东西，都在这里。站点本身是 2024 年搭起来的，但里面的内容跨了十年。我把每篇文章的日期都回溯到了内容被创作的那一天，还特意改了 front matter，让每篇文章可以记录四个日期——内容创建、内容修改、页面创建、页面修改。对我来说，一首诗被写下的那个时刻比它被上传的时刻重要得多。

站是在 Jekyll 的模板上一点一点改出来的。换了霞鹜文楷做正文字体，然后加了非常多自己的小组件。做到后来，这个站的设计语言和主站、tech 站完全不同——这是有意的。它是我的一个完整的切片，和文学作品、音乐作品一样，站本身也是和它们一道的作品。

关于风铃

风铃是诗词集的导航。每篇有名字的诗词集是一只风铃，挂在木架上，下面的纸短册写着标题。

2024 年大概是我诗词写作的巅峰。那一年我大四，没什么课，几乎是一整年在思考、探索、游历，去寻找自己真正喜欢的东西。毕业那个夏天，我写了《雨季八首》，写完的时候就知道，以后大概很难再写出这么动人的东西了。

八首的最后一首，最后一联写的是——

风铃未解别离意，犹向长亭款款飞。

毕业的时候，一位比我大一岁的引领者送给了我一枚风铃。于是风铃这个意象就承载了很多东西：毕业、告别、诗、还有那段不会再回来的时光。

后来做站点的时候，自然而然就想到用风铃做导航。每一只风铃会随微风轻轻晃动，鼠标划过会像被手拨了一下，点击的时候会发出玻璃的声音。我希望打开这个页面的时候，能感觉到风从屏幕里吹出来。

唱片

鼠标移动到唱片上的时候，黑胶会从封套里滑出来翻转，能看到中间的序号标签。封套有两种：有专辑封面的歌会装在 CD 盒子里——塑料壳、铰链、里面插着一张封面打印纸，就像小时候经常见到的那种唱片。没有封面的就用纸套子，简简单单包起来。

唱片的封面和交互动画调了很久。拟态的说服力在细节里——铰链、塑料壳表面的光泽、月牙形卡扣——这些东西单独看不起眼，放在一起才有「像真的」的感觉。

椰子

芋泥椰子冻——雨夜——芋椰。🥥从上面掉下来，点击之后椰子变成 🧉——打开了。椰林飘香是我最喜欢的鸡尾酒。

椰子列出的是一个叫《椰子壳里》的专题系列。2024 年开始，我从心理学的视角对自己做了一些剖析——身份、童年、创伤。这些文章比诗更私密，放在椰子壳里，需要你亲手打开。

为什么要做拟态

写诗是很感性的事，听歌也是，剖析自己更是。我不想打开自己的站看到一排方块列表，那个感觉太无趣了。我想要的是：看到风铃在晃、听到玻璃在响、把唱片从封套里抽出来。这些交互本身就是内容的一部分。

这些 CSS 是 2026 年 3 月和 AI 一起写的，但每一个都调了很久。拟物设计并不简单——有时候我需要像写 caption 一样详细描述我脑子里的画面，有时候需要把感觉翻译成精确的技术语言和数值，实在不行的时候就自己上手古法改 CSS，改到满意为止。

做到后来我觉得，拟态最重要的是三件事。第一是材质——木纹的明暗、玻璃的反光、纸的纤维噪点，细节堆起来才有「像真的」的感觉。第二是物理——风铃的 transform-origin 设在顶部，不然看起来是「浮着」而不是「挂着」，眼睛马上能分辨。第三是声音——视觉告诉你它是什么，声音告诉你它在做什么。

纯 CSS + Vanilla JS，不依赖任何框架。我希望十年后这个站还能跑。

写诗写了十年，变化大吗？

变了很多。最早的那些诗和现在的完全不像同一个人写的。但我把它们都放在一起，不做区分——那些青涩的东西也是我的一部分。我改了 front matter 让每篇文章可以记四个日期，就是因为不想让任何一个时刻被覆盖掉。

这个站和 tech 站的关系是什么？

它们是平行的世界。lyy0323.space 的首页有四个入口——writing、geo、tech、image——每个世界的设计语言完全不同。writing 用暖色调、霞鹜文楷、拟态组件；tech 用终端风格、等宽字体、命令行交互。它们是我的不同切面，各自自洽。

风铃的声音是怎么做的？

Web Audio API 合成的。一个 2800Hz 左右的正弦波，加上 1.5 倍频的泛音让它听起来不那么单薄，10ms 的 attack 和 1.5 秒的指数衰减。代码不到二十行，不需要加载任何音频文件——这样不管网速多慢，风铃永远会响。