.site-header{position:relative;height:auto;min-height:88px;flex-wrap:wrap;padding-block:20px;gap:20px}.desktop-nav{display:flex;order:3;width:100%;gap:24px;height:auto;flex-wrap:wrap;margin:0}.desktop-nav a{min-height:44px}.header-actions{display:none}.filter-tools .filter-submit{display:none}

SUPERNOVA 视觉插画：蓝色双眼与错叠光环，左右展开的机械机翼和水平扫描线。原作归各自权利人所有。

SYS://SUPERNOVA ▸ 6 条记录 · 3 个文件LAST SYNC 2026.10.21

// MESSAGE FROM THE CORE

你不需要知道未来。因为未来已经从你开始

文章 · 项目 · 文件 —— 一个人的系统日志

LATEST RECORD ▸ #006

用 WebGL 复刻一条扫描线

2026.10.21 · 技术 · 3 min 示例

记录想法，也记录每一次开始。SCROLL TO EXPLORE ↓

L1 // LOG STREAM

最新记录.

全部文章 ↗

#006

用 WebGL 复刻一条扫描线

从一条蓝色细线开始，把插画中的光变成界面的一部分。关于距离场、发光与时间的一个小实验。

2026.10.21 · 技术 · 3 minWebGL Shader

#005

在像素里重建一座千年科技学院

从轮廓、色块到灯光，记录一个场景练习应该怎样开始。

2026.10.19 · 游戏 · 1 minPixel 场景

#004

凌晨三点的编译日志

从一次构建失败开始，重新思考怎样给一个小项目留下清晰的记录。

2026.10.16 · 随笔 · 1 min日常开发

#003

给静态博客做一个轻量搜索

在构建时生成公开内容索引，把搜索留在浏览器本地完成。

2026.10.12 · 技术 · 1 minAstro Search

#002

让内容结构在构建之前说清楚

标题、分类、关联文件和日期，都应该拥有可以检查的约定。

2026.10.08 · 技术 · 1 minAstro TypeScript

#001

从一张插画里提取界面语言

光环、扫描线和机翼刻印，如何变成一个博客的设计系统。

2026.10.01 · 随笔 · 1 min设计 CSS

R1 // SELECTED PROJECTS

构建中的世界.

全部项目 ↗

已完成

SUPERNOVA // LOG.SYS

把一张插画延伸成一个人的系统日志。一个注重阅读与视觉秩序的静态博客。

AstroTypeScriptCSS

已完成

从像素到界面

围绕焦点与扫描线组织图像派生资产，让不同尺寸的屏幕拥有同一个视觉中心。

PythonPillowWebP

已完成

HALO / 视觉语言

扫描线、错叠双框和机翼编号。让插画里的几何结构成为界面的语法。

设计CSSHalo

COORDINATES // 从这里继续探索