Blog

## 问题 网站首页用全屏视频做背景,需要在多个视频之间切换(比如顺序播放、用户点击随机跳转)。直接改 `<video>` 的 `src` 再 `play()`,会因为加载延迟出现黑屏闪烁——短则半秒,长则几秒。 这不是网速问题。哪怕视频文件在本地,浏览器解码也需要时间。 ## 双缓冲 借鉴图形学里双缓冲(Double Buffering)的思路,用 **4 个 `<video>` 元素...

## 为什么自己搞 影视站接的是第三方视频源,没有自带弹幕。市面上也有弹幕 API 服务,但国内访问不稳定,而且一旦服务关了就全没了。 所以自己搭了一个纯 Node.js 的弹幕聚合服务,从一个接口进,从 22 个国内视频平台(爱奇艺、腾讯、B站、优酷、搜狐、西瓜等)分别抓取弹幕,聚合成统一格式返回。 ## 架构:一个入口,多个出口 ``` 影视站请求 → danmu_api(:9321...

## 让页面有"活"的感觉 首页的 9 个板块是纯静态内容区域,如果不做任何处理,滚动过去就是一段段死文字。板块呼吸动画的目标:给当前所在的板块一个微妙的"活"的感觉——背景微微扩展,内容微微放大——告诉用户"你在这里"。 ## padding 而不是 scaleY 最先想到的是 `transform: scaleY(1.1)`: ```css .section.snap-active...

## 不做自由滚动 首页是垂直排列的多个"板块"(section),每个板块约一屏高。常见的做法是让用户自由滚动,但在视觉密度极高的页面上,自由滚动有两个问题: 1. 用户很难对准某个板块——经常卡在两个板块之间,一半亮一半暗 2. 背景视频切换需要一个明确的"当前板块"信号,半屏状态很难判断 解决方案是**纯翻页吸附**——类似手机相册翻页,每次操作严格翻一页。用户输入变成明确的翻页指令...

## 为什么不用假进度条 很多网站的 Loading 页用假进度条:设一个 `setInterval`,每几十毫秒加几个百分点,跑到某个数字就跳转。问题在于: - 跑完了资源可能还没加载好,进去后白屏 - 资源早加载好了,进度条还在慢悠悠跑到 100%,浪费时间 - 用户看到进度条到 90% 却卡住,比没有进度条更焦虑 所以换了个思路:**放弃模拟,用真实的就绪信号驱动流程**。 ##...

## 怎么让点击有水的感觉 鼠标点击屏幕,以点击位置为圆心,一个半透明圆环向外扩散——越扩越大、越来越淡,直到消失。这就是"水波纹"的视觉效果。 实现上就是 Canvas 2D 画圆。每个涟漪是一个对象: ```ts { x, y, // 圆心 radius: 0, // 当前半径 maxRadius: 80, // 最大半径(扩散到这就消失) o...

折腾了 WebRTC、TURN、P2P 之后，发现直播就该用直播的架构。用 MediaMTX + OBS + SakuraFrp 搭了一个低延迟直播系统。

用 MoonTVPlus 自建影视搜索播放系统，通过 iframe + rewrite 无缝集成到个人网站里。

从 Puppeteer 抓取到 API 签名绕过，记录一个抖音无水印下载工具的开发过程。

用 SakuraFrp 内网穿透 + Cloudflare DNS + Let's Encrypt 搭建公网可访问的个人服务器。

拉取 Bangumi 追番列表和 TMDB 电影数据，构建一个简单的动漫电影画廊。

从 Pages Router 迁移到 App Router 遇到的一些问题，以及当前版本的 Breaking Changes。

磁性跟随光标和点击涟漪效果，以及如何让交互反馈不那么生硬。

用 Ruffle 模拟器在浏览器里运行经典的 Flash 艺术游戏，踩了一些兼容性和部署的坑。

从 AudioContext 到频谱可视化，记录实现音乐播放器过程中遇到的几个典型问题。

用 Canvas 2D 实现文字粒子效果，踩了一些性能优化的坑，记录一下解决思路。