How this site
was made

The design follows a single written specification: a visual analysis of the Mirror's Edge: Catalyst artbook distilled into web rules. Its essence is a «sterilised futurism» — a white city as canvas, order as composition, and one saturated accent doing all the signalling.

Where the artbook uses runner red, this site uses a single blue (#2F2FE4) — my own call. Every rule transfers: the accent appears only where action is possible (links, focus, progress, the route line), never as decoration. Whitespace is structure, not absence. Geometry is sharp — zero border-radius, 1px hairlines instead of shadows.

The site's signature is the Metro live-tile field: mixed 1×1 / 2×1 / 2×2 / 3×2 tiles in the single blue at 4% / 8% / 16% opacities — sparse on the left, dense on the right, with one or two solid-blue accents; a minority of tiles periodically flip, Windows 10 live-tile style. Hand-written JS, no photography, no AI imagery. The tile field anchors the landing-page hero; a tile band divides the chapters; the All Works index and the fail page carry their own tile fields. The data strip went cold white; the night zone is retired. Round 3 extended the terrain — SPOTLIGHT returned to a horizontal sweep rail, wheel-hijacked on hover; and one dot field now lies under every page, fail page included.

设计遵循一份唯一的书面规范：《镜之边缘：催化剂》美术设定集的视觉分析转译为网页规则。其本质是一种「消毒过的未来主义」——纯白城市是画布，秩序是构图，唯一的高饱和色承担全部信号功能。

画册用的是「跑者红」，本站改用唯一的蓝色（#2F2FE4）——这是我的个人决定。其余规则全部平移：强调色只出现在「可以行动」的位置（链接、焦点、进度、动线），绝不作装饰；留白是结构而非空白；几何是锋利的——全局零圆角，以 1px 发丝线代替阴影。

全站签名是 Metro 磁贴场：主题蓝单一色、4% / 8% / 16% 三档透明度，1×1 / 2×1 / 2×2 / 3×2 大中小混排、左疏右密，一至两块实心蓝点睛；少数磁贴如 Windows 10 Live Tile 般周期性翻转。手写 JS 生成，不用照片、不用 AI 生成图。磁贴场锚定落地页 Hero；磁贴带分隔章节；全部作品索引页与 Fail 页各有一片磁贴场。数据带改为冷白，夜间场域正式退役。第三轮把地形语言延伸——SPOTLIGHT 恢复横向扫转轨，悬停劫持滚轮；径向半调点阵铺满每一页，包括 Fail 页。

設計遵循一份唯一的書面規範：《鏡之邊緣：催化劑》美術設定集的視覺分析轉譯為網頁規則。其本質是一種「消毒過的未來主義」——純白城市是畫布，秩序是構圖，唯一的高飽和色承擔全部信號功能。

畫冊用的是「跑者紅」，本站改用唯一的藍色（#2F2FE4）——這是我的個人決定。其餘規則全部平移：強調色只出現在「可以行動」的位置（連結、焦點、進度、動線），絕不作裝飾；留白是結構而非空白；幾何是鋒利的——全局零圓角，以 1px 髮絲線代替陰影。

全站簽名是 Metro 磁貼場：主題藍單一色、4% / 8% / 16% 三檔透明度，1×1 / 2×1 / 2×2 / 3×2 大中小混排、左疏右密，一至兩塊實心藍點睛；少數磁貼如 Windows 10 Live Tile 般週期性翻轉。手寫 JS 生成，不用照片、不用 AI 生成圖。磁貼場錨定落地頁 Hero；磁貼帶分隔章節；全部作品索引頁與 Fail 頁各有一片磁貼場。數據帶改為冷白，夜間場域正式退役。第三輪把地形語言延伸——SPOTLIGHT 恢復橫向掃轉軌，懸停劫持滾輪；徑向半調點陣鋪滿每一頁，包括 Fail 頁。

Motion is fast and dry: every transition ≤250ms on an ease-out curve — no springs, no bounce. The system: a blue entry wipe between documents (round-3 softening: 420ms, feathered edge, ~90% opacity, 700ms debounce against rapid clicks); a wordmark preloader; text scramble on headlines and in-place language switches; a scroll progress bar; a custom cursor that labels interactive targets; magnetic buttons; grayscale→colour reveals on every work image; a counting data strip — now a single-line marquee — plus a capabilities word wall — both auto-scroll, follow the pointer on drag, and pause together on hover; fade-in + staggered filtering on All Works; a colour portrait that follows the pointer near the About Me title (tap-to-toggle on touch); parallax section titles, fade-scale media reveals and an image lightbox on every case page. All of it honours prefers-reduced-motion.

动效快而干脆：所有过渡 ≤250ms、ease-out 曲线——无弹性、无弹跳。系统包括：页面之间的蓝色进入扫屏（第三轮柔化：420ms、羽化边缘、约 90% 不透明度、700ms 连点防抖）；字标预载器；标题与就地语言切换的文字解码；顶部滚动进度线；标注可交互目标的自定义光标；磁性按钮；全部作品图灰度→显色；滚动计数的数据带——现已改为单行 Marquee——与能力词汇墙，二者自动滚动、拖拽跟手、悬停联动暂停；全部作品页的淡入 + 错位筛选；悬停「关于我」大标题时跟随指针浮现的彩色肖像（触屏点按切换）；案例页的章节标题视差、媒体淡入缩放与图片 lightbox。全部遵循 prefers-reduced-motion。

動效快而乾脆：所有過渡 ≤250ms、ease-out 曲線——無彈性、無彈跳。系統包括：頁面之間的藍色進入掃屏（第三輪柔化：420ms、羽化邊緣、約 90% 不透明度、700ms 連點防抖）；字標預載器；標題與就地語言切換的文字解碼；頂部滾動進度線；標註可互動目標的自定義光標；磁性按鈕；全部作品圖灰度→顯色；滾動計數的數據帶——現已改為單行 Marquee——與能力詞彙牆，二者自動滾動、拖拽跟手、懸停聯動暫停；全部作品頁的淡入 + 錯位篩選；懸停「關於我」大標題時跟隨指針浮現的彩色肖像（觸屏點按切換）；案例頁的章節標題視差、媒體淡入縮放與圖片 lightbox。全部遵循 prefers-reduced-motion。