CC米饭的次世代小世界PERSONAL SIGNAL · 2026

04 / COMPONENT LAB

组件展台_

个人信号站的零件目录:金属窗口、实体旋钮、终端状态与有按压感的按钮。

01

FOUNDATION

色彩与材质

SIGNAL YELLOW#F4ED18 · --signal
EVA VIOLET#8244C7 · --violet
DEEP NIGHT#0E0A18 · --night
CHROME LIGHT#F4F0FB · --paper
02

INTERACTION

拟物按钮

INTERACTION LOG 已发送 0 次信号 · 当前频道 A

试试悬停、按下与 Tab 键聚焦按钮。

03

INPUT DEVICE

文章频道旋钮

CHANNEL SELECTCH–04 / ANALOG

当前频道 全部

INPUT DEVICE / CH–04

旋转频道,检索不同频段。

当前选择:全部可拖动旋钮、点击档位,或聚焦旋钮后使用方向键。
CHANNEL MONITORLED–04 / MATRIX
CH.01SIGNAL LOCKED全部ALL // CHANNEL ACTIVE
CHANNEL SELECTCH–04 / ANALOG
下方为 /posts 档案页的组合:左侧 LED 显示屏实时播报当前频道,右侧旋钮(隐藏内置读数行)。两只旋钮与显示屏同步联动。
04

WINDOW SYSTEM

窗口与终端

ARCHIVE_NOTICE.TXT

WINDOW 98 / PERSONAL FILE

界面正在调频。

这是承载精选文章和系统消息的内容窗口。标题栏与边框负责表达年代感,正文仍以阅读为先。

iABOUT_NEON.NOT

NEON / NOTES

关于技术、设计与日常生活的个人记录。

PERSONAL ARCHIVE

NEON_OS / BOOT.LOG● BUSY

>

08

NAVIGATION

导航转场

站内链接由 PJAX 系统接管:点击后页面中央出现 NAV.SYS 终端,跑完代码再完成跳转;浏览器前进后退会播放短版 restore 脚本。点击下面的按钮亲身体验。

05

TYPOGRAPHY

字体层级

DISPLAY / 64

下一种未来。

HEADING / 32

把灵感存入个人档案

BODY / 16

阅读需要安静的背景与清晰的层次。装饰负责营造气氛,文字负责讲好故事。

MONO / 12

TRANSMISSION_001 · 2026.09.18

06

CONTENT

文章卡片

09

ARCHIVE INDEX

文章索引行与悬浮预览

POST ROW — /posts 档案页的文字索引行;带封面的行在光标悬浮时以故障效果浮现预览图并跟随移动,触摸设备与「减少动态效果」下不显示。第 4 篇无封面,仅作文字高亮对照。

07

AMBIENT

环境层

HERO PARTICLES — 抖动像素流体团,亮黄与紫双阈值 Bayer 抖动,12 秒无缝循环,仅在首屏渲染。

PIXEL FIELD — 像素点阵被光标推开并弹簧回位;触摸设备与“减少动态效果”下退化为静止点阵。

10

EXTERNAL RELAY

DEMO DATA

住在浏览器窗口里的网页卡片。

/links 中继站把友链装进一扇完整的模拟浏览器窗口(FRIEND_LINKS.EXE):标签页、只读地址栏与凹陷视口。视口内的卡片是「网页卡片」而非又一扇 Win98 窗口——细描边、深底浅字,与外层金属边框拉开层级。

  • 悬停:亮黄高亮 + 故障抖动(位移 / 色差 / 扫描线)
  • focus-visible:3px 信号黄焦点框,键盘可达
  • 整卡为外链,新窗口打开,演示站点均标注 DEMO

LINK CARD — /links 友情链接页视口内的网页卡片;域名行由 URL 自动提取,长描述在 320px 宽度下不溢出。

11

MEDIA

懒加载图片

拟物按钮状态占位封面(演示)

LAZY IMAGE — 全站图片统一入口:非首屏图片原生懒加载,代码式占位符(> decode … + █ 进度行)垫在图下,加载完成后故障抖动切入;首屏关键图(首页精选 / 详情封面)eager 高优先级不延迟;不支持懒加载的旧浏览器忽略属性、正常加载;动态换图(悬浮预览、正文插图)自动重放占位与过渡。本地图片加载极快,占位符可能只是一闪而过。

12

WRITING FORMAT

Markdown 正文

信号日志 // 004

Markdown 正文与富文本正文二选一:填写后前台优先渲染 Markdown,适合从 Typecho 等来源直接粘贴原文。

排版沿用站内统一的阅读样式:标题带 # 标记,引用是紫色信号块,代码走终端风凹陷框。

  • 加粗、斜体 与 删除线 都能正常显示
  • 任务列表:已完成的条目
  • 待办:继续观测信号
频道记录状态
技术02ONLINE
思想01ONLINE
export function lockChannel(channel: Channel) {
  // 注释:信号锁定后只展示对应频道
  return signals.filter((item) => item.channel === channel)
}

雨天霓虹占位封面

MARKDOWN BODY — 后台「Markdown 正文」与富文本正文二选一,填写 Markdown 时前台优先渲染(适合从 Typecho 等来源直接粘贴原文)。以上示例即由 MarkdownBody 渲染:GFM 表格、任务列表、删除线可用,代码块按语言着色(信号黄 / EVA 紫 / 银铬,无红色),图片经 LazyImage 懒加载并限宽在阅读列内。