演示站：https://www.tortb.com/ 以前的版本（gpu杀手）：https://next.tor.hk/

一个透过液态玻璃美学与情感排版，探索设计、技术与文化交汇的电影级编辑档案。

Astro 5 · Tailwind CSS · Liquid Material · Atmospheric Engine

档案不是传统博客。它是一个氛围优先的出版系统——每一个像素都服务于情感传达。

• 排版即氛围 — 字体、间距、透明度共同构建情感场域
• 留白即设计 — 沉默区域是活跃的叙事元素
• 玻璃即隐喻 — 液态材质层叠创造空间深度感
• 运动即呼吸 — 动画不是装饰，而是界面的生命力

三种节点类型，构建非线性知识网络：

额外页面：

三个互联系统共同构建动态氛围：

根据一天中的时间自动切换环境光线：

6 种氛围状态，通过色相、饱和度、辉光强度控制整体视觉：

• 记忆 — 温暖琥珀（hue: 35）
• 虚空 — 冷调深蓝（hue: 220）
• 信号 — 玫瑰粉红（hue: 340）
• 梦境 — 紫调柔光（hue: 270）
• 档案 — 经典玫瑰（hue: 345）
• 传输 — 冷调青蓝（hue: 200）

IntersectionObserver 驱动的逐场景 CSS 变量更新，实现 GPU 合成的视差效果。每个场景拥有独立的进度、可见性、透明度和位移变量。

visionOS 风格液态材质系统，5 个深度层级：

每层包含：backdrop-filter、渐变边框、边缘折射、高光层、环境光响应。

作者只需书写标准 Markdown，系统自动转换为电影级视觉组件：

跨访问行为追踪系统，通过 localStorage 持久化：

• 访问次数、文章阅读记录、滚动深度、阅读时长
• 空闲检测（10 秒超时）
• 记忆深度评分（0–1），影响氛围强度
• 返回访客个性化问候

所有配置集中在 src/config/，TypeScript 类型安全：

src/
├── config/               # 配置模块
├── content/              # 内容集合
│   ├── blog/             # 长文 (MDX)
│   ├── signals/          # 信号 (MD)
│   └── fragments/        # 片段 (MD)
├── data/                 # 静态数据
│   └── supporters.json   # 赞助者
├── components/
│   ├── ambient/          # 氛围系统 (4)
│   ├── layout/           # 结构组件 (2)
│   ├── mdx/              # MDX 编辑组件 (6)
│   ├── sections/         # 页面段落 (6)
│   └── ui/               # 基础 UI (10)
├── lib/
│   ├── atmosphere.ts     # 动态氛围引擎
│   ├── memory-engine.ts  # 记忆引擎
│   ├── scroll-narrative.ts # 滚动叙事系统
│   └── rehype-editorial.ts # Markdown 电影级渲染
├── layouts/
│   └── BaseLayout.astro  # 全局布局
├── pages/                # 11 个页面
└── styles/
    └── global.css        # 全局样式 (~1450 行)

pnpm install
pnpm dev
pnpm build
pnpm preview

纯静态输出，兼容所有主流 Pages 平台。

pnpm deploy:vercel

1. 连接 GitHub 仓库
2. Framework preset: Astro
3. Build command: pnpm build
4. Build output directory: dist

pnpm deploy:cf

1. 连接 GitHub 仓库
2. Framework: Astro
3. Build command: pnpm build
4. Output directory: dist

pnpm deploy:edgeone

1. 连接 GitHub 仓库
2. Framework: Astro
3. Build command: pnpm build
4. Output directory: dist

pnpm deploy:esa

MIT