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: mostly 1×1 tiles with a few 2×1 / 2×2 in the single blue at 5% / 10% opacities, plus one or two solid-blue accents; a rare few periodically flip, Windows 10 live-tile style. Hand-written JS, no photography, no AI imagery. Round 7–8 re-terrain: the hero field runs on larger 40px cells; the Contact section carries a full-bleed backdrop at half density on a top-left → bottom-right diagonal with 40px cells; Experience keeps a right-column tile accent beside its timeline; the fail page carries its own field. The data strip is cold white; the night zone is retired. SPOTLIGHT is a horizontal sweep rail, wheel-hijacked on hover; one dot field lies under every page.

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

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

全站签名是 Metro 磁贴场：主题蓝单一色、5% / 10% 两档透明度，1×1 为主、2×1 / 2×2 点缀，一至两块实心蓝点睛；极少数磁贴如 Windows 10 Live Tile 般周期性翻转。手写 JS 生成，不用照片、不用 AI 生成图。第七、八轮重排地形：Hero 磁贴改用 40px 大格；Contact 区为半密度、左上→右下对角疏密、40px 大格的全幅背景场；Experience 保留时间线右侧的磁贴点缀列；Fail 页自带磁贴场。数据带冷白，夜间场域退役。SPOTLIGHT 为横向扫转轨，悬停劫持滚轮；径向半调点阵铺满每一页。

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

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

全站簽名是 Metro 磁貼場：主題藍單一色、5% / 10% 兩檔透明度，1×1 為主、2×1 / 2×2 點綴，一至兩塊實心藍點睛；極少數磁貼如 Windows 10 Live Tile 般週期性翻轉。手寫 JS 生成，不用照片、不用 AI 生成圖。第七、八輪重排地形：Hero 磁貼改用 40px 大格；Contact 區為半密度、左上→右下對角疏密、40px 大格的全幅背景場；Experience 保留時間線右側的磁貼點綴列；Fail 頁自帶磁貼場。數據帶冷白，夜間場域退役。SPOTLIGHT 為橫向掃轉軌，懸停劫持滾輪；徑向半調點陣鋪滿每一頁。

Motion is fast and dry: every transition ≤250ms on an ease-out curve — no springs, no bounce. The system: a wordmark preloader; a 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 work images — only on precise-hover devices, touch sees colour by default; a counting data strip — a single-line marquee — plus a capabilities word wall, both auto-scrolling at differential speeds, drag-following, pausing together on hover; fade-in + staggered filtering on All Works; About paragraphs rise line-by-line from masks; a frosted-glass nav that stays on; a double-arrow nudge above the SPOTLIGHT rail that fades after the first drag; parallax section titles, fade-scale media reveals and an image lightbox on every case page. Page changes are plain native loads — the blue entry wipe retired in round 8. All of it honours prefers-reduced-motion.

动效快而干脆：所有过渡 ≤250ms、ease-out 曲线——无弹性、无弹跳。系统包括：字标预载器；标题与就地语言切换的文字解码；顶部滚动进度线；标注可交互目标的自定义光标；磁性按钮；作品图灰度→显色——仅精确悬停设备，触屏默认彩色；滚动计数的数据带——单行 Marquee——与能力词汇墙，二者差速自动滚动、拖拽跟手、悬停联动暂停；全部作品页的淡入 + 错位筛选；About 两段简介逐行遮罩上滑；毛玻璃导航常驻；SPOTLIGHT 轨道上方双向箭头提示，首次拖拽后淡出；案例页的章节标题视差、媒体淡入缩放与图片 lightbox。页面切换为原生加载——蓝色进入扫屏于第八轮退役。全部遵循 prefers-reduced-motion。

動效快而乾脆：所有過渡 ≤250ms、ease-out 曲線——無彈性、無彈跳。系統包括：字標預載器；標題與就地語言切換的文字解碼；頂部滾動進度線；標註可互動目標的自定義光標；磁性按鈕；作品圖灰度→顯色——僅精確懸停設備，觸屏預設彩色；滾動計數的數據帶——單行 Marquee——與能力詞彙牆，二者差速自動滾動、拖拽跟手、懸停聯動暫停；全部作品頁的淡入 + 錯位篩選；About 兩段簡介逐行遮罩上滑；毛玻璃導航常駐；SPOTLIGHT 軌道上方雙向箭頭提示，首次拖拽後淡出；案例頁的章節標題視差、媒體淡入縮放與圖片 lightbox。頁面切換為原生載入——藍色進入掃屏於第八輪退役。全部遵循 prefers-reduced-motion。