Merge pull request #11 from KYJCASTER/post/mac-miller-tribute

post(mac-miller): 致 Mac Miller 致敬专题页 + 导流短文

Author: KYJCASTER

.gitignore

@@ -10,6 +10,9 @@
 /out/
 /dist/
 
+# local-only screenshot / scratch dumps
+/.tmp-shots/
+
 # misc
 .DS_Store
 *.pem

content/posts/mac-miller-tribute.md

@@ -0,0 +1,87 @@
+---
+title: "致 Mac Miller：把一封情书做成了网页"
+slug: "mac-miller-tribute"
+date: "2026-06-15"
+tags: ["音乐", "前端", "随笔"]
+excerpt: "做这个专题页的时候，我一直在想，如果他还在，会不会觉得这种用网页写情书的方式很怪。最后还是决定，把它原样放上来。"
+published: true
+---
+
+# 致 Mac Miller：把一封情书做成了网页
+
+写这篇之前我犹豫了很久。
+
+[Mac Miller](https://en.wikipedia.org/wiki/Mac_Miller) 是我大学几年里听得最多的一个 rapper——准确地说，到了大二之后我已经分不清自己到底在听 rap，还是在听一个用 MPC 和钢琴在自言自语的人。他 2018 年走的那年我才上初中，听说他名字的时候，他已经成了一个"过去式"的歌手。我是从 *Swimming* 开始倒着听回去的，从《Self Care》到 *Faces*，再到 *K.I.D.S.*，把这个时间轴反过来走了一遍，越听越觉得不对劲——明明是越来越年轻、越来越喧闹的声音，可越往前走，反而越像是在听他一点点地"还魂"。
+
+前阵子《Balloonerism》（2025 年正式发行的那张 2014 年的老母带）出了之后，我趁着考完试的那几天，做了一个**献给他的中文专题页**。
+
+不是文章，是网页。
+
+> 嘛意思呢——我想做一份**实物感的杂志**。能撕、能折角、有指纹、有油墨蹭脏的痕迹那种。
+>
+> 但我又只会写代码。所以最后做出来的，是它的"赛博影印版"。
+
+---
+
+## 在新标签页里翻这本"杂志"
+
+页面已经原样部署在站点下了，**点这里翻**：
+
+> ### → [**M·M — 致 Mac Miller 的一封情书（1992–2018）**](/Kairos_blog/tribute/mac-miller/)
+>
+> 建议在桌面浏览器里打开，留点耐心慢慢往下滑。
+> 里面有很多你刚翻到才会注意到的小东西。
+
+---
+
+## 这一份里有什么
+
+它分成五章，外加一个 B 面：
+
+- **壹 · 起点**　Point Breeze 街区那个孩子，借来一手 flow，骨子里却装着一架钢琴。
+- **贰 · 暗流**　*Watching Movies with the Sound Off* / *Faces* / *GO:OD AM* / *The Divine Feminine* 四张唱片摆在一起的样子。
+- **叁 · 言语**　他在采访里、在巡演大巴上说过的那些话，被抄在了卡片上。
+- **肆 · 唱片**　按时间顺序的全部唱片，包括两张遗作。
+- **伍 · 此后**　*Circles*，以及 2018 年 9 月 7 日之后的故事。
+- **B 面 · 脚注**　Larry Fisherman、Larry Lovestein、Delusional Thomas，以及那场 Tiny Desk。
+
+视觉上是想做成一份"印出来过、被翻过、被收藏过"的旧杂志——所以你会看到：
+
+- 全屏盖了一层颗粒和暗角，模拟印刷品的纸面纹理；
+- 四个角的**裁切登记标记**，像还没修边的样张；
+- 顶部一条左滑的**滚动条 ticker**，从《K.I.D.S.》一路滚到《Balloonerism》；
+- 右上角实时跳动的**匹兹堡时间**（他的家乡）；
+- 顶部的滚动进度条；
+- *Swimming* 那一段做了一段会"假装在播放"的**波形条**和曲目表；
+- 桌面端有一个会跟着你跑的**墨迹光标**，一颗小黑点 + 一个圆环——是我自己最满意的小细节；
+- 右下角永远挂着一个"正在播放"的小播放器，显示当前轨；
+- Frick 公园那一带是手画的**SVG 小地图**，标了 Point Breeze 的那道蓝色滑梯。
+
+整页是**纯静态的 HTML + CSS + 一段不到 300 行的 JS**——没有框架、没有打包、没有依赖任何 npm 包。我把它当成一道"前端基本功练习"在写：尽量只用语义标签、CSS Grid、CSS 变量、SVG 和 `requestAnimationFrame`。
+
+---
+
+## 这是一份非商业的乐迷致敬
+
+需要在最显眼的地方写一遍：
+
+> 这页东西**不卖**、**不接广告**、**不导流**到任何商业内容。专辑封面来自 Apple Music 的公开 CDN，仅作纪念展示之用。如果版权方介意，告诉我，我立刻撤掉。
+
+文末我留了 [Mac Miller Circles Fund](https://www.macmillerfund.com/) 的链接——他家人在他走后成立的非营利组织，资助来自欠发达社区的青少年音乐人。如果这一页你看完心里有点东西想给谁，请考虑给那边一点。匹兹堡的孩子，也值得拥有一架钢琴。
+
+---
+
+## 写在最后
+
+做这个专题页的时候，我一直在想，**如果他还在，会不会觉得这种用网页写情书的方式很怪。**
+
+我猜他大概会笑一下，然后说一句 "yeah, that's dope"，再回去继续弹他的钢琴。
+
+> "我曾在水里下沉，
+> 可现在，我正在游泳。"
+>
+> ——*Swimming* (2018)
+
+我们想你，Malcolm。
+
+→ 现在，[去翻那本"杂志"吧](/Kairos_blog/tribute/mac-miller/)。