制作说明Colophon
XANTHANL — 20 个项目 · 全部已部署上线
关于制作者
XANTHANL
XanthanL,本站的设计与开发者。写前端,也写游戏、小工具和两个 Android 应用;大部分东西开源在 GitHub,能跑在浏览器里的一律部署上线,点开就能用。
他反复琢磨一个有点偏执的问题:一个 HTML 文件到底能走多远?于是有了塞进单文件的光线投射恐怖游戏、45 KB 的生存射击,以及把同一句话交给十一个 coding agent 后收到的十一部像素舞台剧。
本站是他做的另一件事:一个从东北到西南的长期艺术项目的线上档案。这和他自己的行走并不矛盾——那条对角线的走向,最早出现在他自己的旅行时间线上。
「一个 HTML 文件到底能走多远?」
另有两件无法在浏览器里跑的东西未公开:Protocol Extract(Godot 4.5)与一个 Minecraft Fabric 模组。
枢纽
两座入口站 · 其余作品都在里面
作品索引
18 项 · 按性质分组
游戏
07惯性漂移的星域 roguelike 弹幕射击:三艘船体拖着彗尾出击,27 种模块升到 LV6 触发镀金质变,每 5 波巨像降临,第 30 波肃清后可无尽漂移。屏外目标在边缘留下同色亮点,进度自动缓存、关页可续。内置粒子引擎与 WebGL 星云——跑不动会自己降档。
260 KB 单页 · 键鼠 / 触屏
梗图改编的恶搞塔防:把植物大战僵尸的元游戏整套搬进程序员世界——离线机房、冲突水道、祖传迷雾、只有抛过去的 bug 报告才打得动的跨域高墙。★ 经济 + npm 商店(鸭店主)+ 每行 Ctrl+Z,手机可玩。
5 章 10 关
完整复刻:23 关 6 世界、2 个 Boss、阳光经济与波次节奏。美术全部由矢量代码绘制——仓库里没有一张游戏图片,是机制研究与零素材重写。
23 关 · 26 植物 · 17 僵尸
杀戮尖塔式卡牌构筑:30 张卡 / 12 件遗物 / 6 种药水 / 4 个职业,从火星地表下潜到 2000 米地核,有真实结局。
Phaser 3 · 中英双语
第一人称中式恐怖:一个 HTML 文件里的 DDA 光线投射引擎。怨灵会 BFS 寻路、有视野锥,仪式推进后听觉越来越灵。衣柜躲藏、屏息机制、程序化 WebAudio,手机可玩。
单文件 · 5 章 6 图
浏览器大战略:手绘欧洲 / 北非 / 安纳托利亚地图,60 多个国家 1444 开局,经济、外交、战争、围城与历史事件。无构建步骤。
60+ 国家 · 纯静态
顶视角自动攻击生存:5 种武器 6 种被动,升级三选一,180 秒起遭遇 Boss 并有鲜血狂潮事件,同屏 220 只。
45 KB 单文件
实验
02站点与工具
06私人旅行时间线:八年驾车,之后两年零一个月徒步走完西南 → 东北的对角线(雨崩到鹤岗)。路线用本地 vendored 的 Leaflet 画。这份行走,正是对角线计划这条线的来处。
53 篇 · 53 个地点
浏览器里的数字音频工作站:步进音序器、钢琴卷帘、带效果器的混音台、曲目编排、生成式轨道与离线 WAV 导出。全部在浏览器本地完成,不上传一个字节。
React + Tone.js · 100% 客户端
以 XanthanL 名义发布的 5 首曲子,站内流式播放(缓冲探测 / 重试 / 拖动 / 自动续播)。也收录《静电合唱团》——一首用 numpy 从零合成、自带 Web Audio 可视化的曲子。
5 首 · 含 numpy 合成
金价看板:实时报价、均线,以及用 lightweight-charts 标出的金叉 / 死叉。
Next.js 静态导出
七个维度的光谱定位问卷,提供 30 / 65 / 95 题三档长度。
7 维 · 30 / 65 / 95 题
批量个性化图片生成工具——上传底图,标记文字位置,导入名单,一键生成并打包下载。图片全程不出浏览器。
纯前端 · 批量生成
应用与插件
03离线优先的 Android 电子书阅读器:EPUB / PDF / TXT,分页与滚动双模式,书架子架与 SHA-256 去重。朗读基于 sherpa-onnx 的神经网络离线合成——不联网、不上传,高亮跟着念到的句子走。
Android · Kotlin · GPLv3
原生 Android 相机:CameraX + Jetpack Compose + OpenGL ES 3.0 实时渲染管线,23 种滤镜各带三档预设。多帧预处理是真的在跑——HDR+ 做曝光包围对齐融合,夜景做时域降噪;复古 VHS 取景框会直接烧进视频文件。
Android · OpenGL ES 3.0 · Release ≈ 4 MB
为 DeepSeek Harness 写的语义化 UI 音效插件:任务开始 / 成功 / 失败、按钮反馈各有其声,设置页可即时试听,并允许其他插件调用。
DSH 插件 · 12 组音色包
本站版本说明
对角线计划 · 线上档案
- 框架
- Next.js 14(App Router)+ TypeScript,全站静态导出
- 样式
- Tailwind CSS;动效统一走自定义曲线令牌
- 字体
- Inter(正文)· JetBrains Mono(标签与数值)· Newsreader + 思源宋体(标题)
- 图像
- 构建期生成多档 WebP 变体;远程图由 Cloudinary 协商格式
- 三维
- 天车、门楼两座子站为独立 vanilla Three.js 静态站,由单一登记表同步
- 编辑
- 自建后台 + TipTap 富文本,中英双语分栏撰写
- 语言
- 客户端 i18n,选择持久化于本地,路径不随语言变化
- 部署
- GitHub Pages + 自定义域 www.diagonal-art.com
本站亦是 Xanthan 观测站星系中的 02 号天体——一颗气态巨星。