Future Style Periodic Table：開源賽博龐克元素週期表，118 個元素的 3D 互動視覺化

用 AI 摘要這篇文章：

ChatGPT Claude Perplexity Google Grok

把化學元素週期表做成賽博龐克風格的互動儀表板，聽起來像是設計系學生的期末專題。Future Style Periodic Table 把這件事推到了一個值得前端工程圈與化學教學圈一起看的位置：作者 Sean Wong 用 TypeScript 加 Vite 把 118 個元素、電子軌道、熱力圖、元素分類全部塞進一個靜態網頁，部署在 GitHub Pages 上，原始碼以 MIT 釋出。它展示了一個老派但被低估的判斷，CSS 3D Transforms 加 CSS Grid 能撐起頗有份量的教育視覺化，不必動用 WebGL 或 Three.js 這類較重的技術棧。

下面會從這個設計判斷出發，拆開它的技術選擇、資料來源、限制，以及和同類工具的差異。

賽博龐克外殼下的純前端化學視覺化

未進細節前先把範圍講清楚。Future Style Periodic Table 是一個涵蓋全部 118 種化學元素的純前端靜態專案，採用深色賽博龐克搭配玻璃擬態的視覺風格。讀者打開官方 Demo（GitHub Pages 託管）就能看到整張週期表，點任一元素進入詳情頁，切換熱力圖模式把原子半徑、電負性、熔沸點等性質用色譜呈現，或把原子模型用 3D 電子軌道轉給你看。

Pin

幾個關鍵背景數字先放著。GitHub 上 495 顆星、67 個 fork、預設分支 main、最近一次推送在 2026 年 7 月 21 日，由開發者 SeanWong17 建立。README 上方掛著科技愛好者週刊第 383 期的推薦徽章，英文版介面由 Melody Young（GitHub 帳號 keepwow）協作完成。這些數字都來自 GitHub API 與 repo 本身，不是行銷文案。

要特別提一個校正點。ahhhhhfs 原本的介紹文把它形容成「原生 JavaScript 與 CSS3 的純粹展現，沒有依賴龐大框架」。實際翻 repo 的 package.json 與 README 技術棧表會看到另一個故事，這個專案用的是 TypeScript 加 Vite 的模組化架構，啟用了 TypeScript Strict Mode 做嚴格型別覆蓋，並把功能拆成 table、modal、atom3d、heatmap、legend、search、media 等獨立模組。把它當作「展示 TypeScript 加 Vite 如何組織中等規模視覺化專案」的範例會更貼近實情。

三個值得拆開來看的設計選擇

把這個專案放在前端工程的脈絡裡，最值得參考的是下面幾個判斷。

在版面處理上，CSS Grid 處理非對稱網格的能力發揮得相當徹底。元素週期表不是整齊的方格陣列，鑭系與錒系要拉到下方獨立排列，不同週期的欄數不同，分類色塊又要疊在格子上。CSS Grid 對這類非對稱版面遠比 Flexbox 或 float 時代來得從容，README 也把 Advanced CSS Grid 列為核心技術亮點之一。

在 3D 模型上，作者選擇 CSS 3D Transforms 而非 WebGL。3D 原子模型用的是 transform-style: preserve-3d 屬性搭配電子排布演算法即時渲染電子層與旋轉電子，沒有用 Three.js 或 WebGL。這個選擇有取捨，CSS 3D Transforms 在複雜光影與大量粒子時不如 WebGL；對「電子繞核旋轉」這種結構相對單純的視覺需求，它能避免讀者載入額外的 3D 引擎，部署成本也壓到最低。對於想用純 CSS 做 3D 視覺化的人，這個 repo 是相當扎實的參考實作。如果你對 CSS 做 3D 視覺有興趣，TechMoon 先前介紹過的 3D Book Image CSS Generator 是另一個把 CSS 3D 用在包裝視覺的輕量工具，兩者擺在一起看會看到 CSS 3D 在「教學視覺化」與「行銷素材」兩種截然不同的應用面貌。

在架構上，模組化 TypeScript 的切分也值得讀。src 目錄把狀態管理、國際化（中英文翻譯拆 zh.ts／en.ts）、資料處理、DOM 工具分層，heatmap.ts 負責七種熱力圖模式，atom3d.ts 負責拖拽與縮放，table.ts 負責週期表渲染與定位演算法。對於想把「資料驅動的 DOM」這個設計模式讀懂的人，這個 repo 的模組切分是清晰的範例。

資料溯源：資料從哪來、可以怎麼用

誠實把資料來源攤開。README 的致謝段寫得相當清楚，主要元素資料來自 Bowserinator/Periodic-Table-JSON 這個 GitHub 專案，採用 CC BY-SA 3.0 授權；化合價與同位素資料基於公開資料整理。授權議題這裡需要特別留意，程式碼本身是 MIT（可以自由使用、修改、分發，須保留版權聲明），但資料層是 CC BY-SA 3.0，這個 Creative Commons 授權帶有 same-license 條款，衍生作品必須以相同授權釋出並標示來源。

換句話說，讀者拿這個 repo 的程式碼去改介面、換配色、加功能都只需遵守 MIT，但如果你要把打包後的成品（包含資料）再發布出去，就必須連資料層一起以 CC BY-SA 3.0 釋出。對教學單位或商業團隊想拿它做二次應用的人，這個雙重授權結構務必先弄清楚。

幾個技術條件也直接寫進來。瀏覽器相容性官方列出的支援範圍是 Chrome 90+、Firefox 88+、Safari 14+、Edge 90+，這對應 CSS 3D Transforms 與部分現代 CSS 特性的最低門檻。專案支援 Docker 部署，README 提供 Dockerfile 範例可以直接打 image 跑在本機 8080 port，對想把它放進內部教學網的單位很方便。

要查 GitHub 上還有哪些同類開源專案值得挖，可以搭配 SimilarRepos 這個 AI 推薦工具做橫向搜尋。

熱力圖模式：把抽象性質變成視覺規律

熱力圖是這個專案把「資料視覺化」思維搬進化學教學的關鍵設計。一般週期表給你的就是分類色塊，熱力圖模式則讓你切換原子半徑、電負性、第一電離能、熔點、沸點等性質，整張表的顏色會依數值重新分布。

Pin

這個功能在教學上的價值不在於「漂亮」，而在於把肉眼讀不出來的規律變成色階。例如把電負性打開，氟（F）的深色與銫（Cs）的淺色立刻把「右上高電負性、左下低電負性」的週期趨勢攤出來；切到原子半徑則會看到由右上往左下漸深的反向分布。對於教週期律的老師，這個色譜切換比口頭講解或課本靜態圖有效得多。

熱力圖模式共七種，由前述的 heatmap.ts 模組負責渲染。模組化也讓未來新增性質欄位相對容易，讀者想自己 fork 加上離子半徑或電子親和力的色譜是可行的擴充方向。對「結構化資料視覺化」這個議題有興趣的讀者，先前介紹過的 OpenGridWorks 電力網地圖 是另一個把即時結構化資料畫進互動地圖的範例，兩者擺在一起看會發現「色彩編碼加互動切換」是跨領域共通的視覺化套路。

3D 原子模型與一個值得記下的科學誠實聲明

點任一元素進入詳情頁會看到 3D 原子模型，讀者可以用滑鼠拖拽或觸屏滑動 360 度旋轉，滾輪縮放觀察電子層細節。模型用前述 CSS 3D Transforms 渲染，依電子排布演算法即時計算電子層數與旋轉電子位置，而非預先畫好的圖片。

Pin

這裡要特別點出作者主動寫進 README 的一段科學聲明。原文的意思是，3D 原子模型是「簡化的玻爾模型視覺化」，僅用於教學演示，「並非真實的電子雲概率分布」。實際電子行為遵循量子力學原理，以概率雲形式存在於原子軌道中。

這個聲明值得記下來有兩個原因。一方面，它把模型的限制講清楚而不是推給讀者自己腦補，這對教育工具尤其重要，學生不會把簡化模型誤當真實物理。另一方面，它示範了「視覺化專案如何誠實標示自己的邊界」這件事，這個態度比模型本身的炫光更值得參考。對其他做科學視覺化的開發者來說，這是個可效仿的範本。

3D 視覺化在教育與展示領域還有不少有趣的案例，Globe 3D 是另一個用 3D 互動做地理學習的工具，跨領域來看「3D 模型加互動操控」是個不斷被重新組合的有效模式。

進階讀者的二次開發空間

對想把這個 repo 當起點繼續擴充的人，模組化架構留下了幾條可行的路徑。其一是在 heatmap.ts 增加新的熱力圖維度，例如把鮑林電負性換成艾倫電負性，或加入第一至第三電離能的對比色譜，讓學生看到同一性質在不同定義下的差異。其二是把 i18n 的 zh.ts 補上正體中文用語分支，做成「簡體中文／正體中文／英文」三語切換，這對繁中教學現場會更友善，也順便化解前述中文介面用詞差異的問題。

其三是把 atom3d 模型升級成更接近量子力學的電子雲視覺化。作者已在 README 主動聲明目前的模型是簡化的玻爾版本，這個邊界正好為進階開發者留下擴充空間，例如在 modal 加上可切換的軌域形狀（s 為球形、p 為啞鈴形、d 為四葉形），用 SVG 或 Canvas 補點概率密度示意，就能把這個工具從入門教學推到普生化學層次。這條改造路徑在技術上不算太難，主因是作者的模組切分已經把原子模型單獨封裝，後續維護者不必動到 table.ts 或 heatmap.ts 的邏輯。

其四是把資料層換成更權威的來源。目前資料來自 Bowserinator/Periodic-Table-JSON，覆蓋面廣但部分罕見同位素仍可能未收齊，進階用途可以改接 NIST 或 IUPAC 的資料集，不過要記得同步調整授權標示（CC BY-SA 3.0 的 same-license 要求會跟著新資料層走，新資料集若為更嚴格的授權會影響衍生作品的發布條件）。

這幾條路徑都不是空想，repo 的模組邊界、型別定義、Vitest 測試目錄都為這類擴充預留了位置。對於想拿開源專案當練習標的的中級前端開發者，這個 repo 的學習投資報酬率相當不錯。

跑起來的三種途徑

要把這個工具用上或讀通原始碼，有三條路徑，難度由低到高。

最快的是官方 Demo。直接打開 seanwong17.github.io 上的 GitHub Pages 連結就能體驗全部功能，這也是一般化學教學現場最常見的用法，投影到教室大螢幕即可。

進一步可以本機跑原始碼。按 README 的快速開始流程，git clone 後 npm install，再 npm run dev 就能在本機 5173 port 跑開發伺服器。ahhhhhfs 介紹文提到「下載源碼後直接跑 index.html 即可離線使用」這點不太準確，Vite 專案需要先 install 依賴再跑 dev 或 build，直接打開 index.html 會因為模組解析失敗而無法運作。要離線使用，跑 npm run build 產出 dist 目錄，再把它扔到任何靜態檔案伺服器（含 GitHub Pages、Cloudflare Pages、Netlify）才靠譜。

更進一步是 Docker 自架。README 提供 Dockerfile 範例，docker build -t future-style-periodic-table . 後 docker run -p 8080:80 future-style-periodic-table，就能在本機 8080 跑起來。對想把工具放進內部訓練網、不想依賴外部 GitHub Pages 的單位，這條路最穩。

與同類元素週期表工具的差異

元素週期表從來不缺網路資源，把它和幾個主流選項擺在一起看會更知道這個專案的位置。

從這個表看得出來，Future Style Periodic Table 的差異化不在資料權威（資料源同樣來自開源社群），而在「完全開源加可自架、3D 電子軌道視覺化、熱力圖切換」這個組合。對於需要把工具放進自己的教學環境或想拿它當 CSS 3D 教材的人，它是少見的選項。

已知限制與風險

誠實條列幾個使用前要知道的邊界。

科學準確性方面，3D 模型是簡化的玻爾模型，作者已主動標示非電子雲概率分布。把它當「幫學生建立空間直覺」的入門視覺化合理，把它當嚴謹的量子物理教材會失準。資料層的 118 種元素資訊來自 Periodic-Table-JSON 專案（CC BY-SA 3.0），準確度取決於上游資料集，較冷門的同位素或罕見化合價未必齊全。

授權方面，程式碼 MIT 但資料 CC BY-SA 3.0 的雙重授權前面已提過。把這個專案打包發布衍生作品時，資料層的 same-license 要求務必遵守。商業用途在保留版權聲明且資料層合規的前提下可行，但建議先與法務確認 CC BY-SA 3.0 對你的具體使用情境的影響。

中文介面方面，README 宣稱支援中英雙語切換，但中文用語偏向對岸慣用詞，部分詞彙與台灣用法有差異，切換到中文後可能需要自行容忍用詞落差，或乾脆使用英文介面。未親自跑過所有介面文字的兩岸差異，建議讀者打開 Demo 自行確認。

維護節奏方面也要留意。495 顆星、最近一次推送在 2026 年 7 月 21 日，算中等規模且仍在活動，但不像 ptable.com 那種長年穩定營運的服務。把它當教學或開發參考合適，把它當「長期依賴的唯一工具」要保留自架的退路。

適合誰

化學教學現場的老師會直接受惠，把熱力圖與 3D 原子模型投影到大螢幕，比傳統平面週期表更能引起學生注意，對建立電子排布的空間直覺尤其有幫助。

中學與大學化學科目的學生自己拿來複習電負性、原子半徑的週期趨勢也合適，熱力圖模式切換色譜的過程本身就是「看見規律」的練習。

前端工程學習者是另一個受眾。想看 TypeScript 加 Vite 如何把一個中等規模視覺化專案組織起來，或想理解 CSS 3D Transforms 與 CSS Grid 在實戰中能撐到什麼程度，這個 repo 是相當扎實的開放教材。

科學視覺化與教育科技的研究者也能從中汲取設計參考，特別是「作者主動標示模型邊界」這個寫作姿態，對自己的專案文件寫作有啟發。

結論

Future Style Periodic Table 不會是取代 ptable.com 或皇家化學學會權威資料的角色，它的價值在於示範「TypeScript 加 Vite 加 CSS 3D 加 CSS Grid 這組合，能把教育視覺化做到什麼程度」，並且用相對扎實的模組化架構、清楚的授權標示、主動的科學聲明，把這個示範做成了可以閱讀、可以修改、可以自架的開放素材。

把它放在華語化學課堂當輔助視覺、當前端工程學習的閱讀材料、當 CSS 3D 技術選型的評估參考，三種用法都成立。使用前把 CC BY-SA 3.0 的資料層限制與中文介面用詞差異放進考量，這個工具就能用得相當順手。

常見問題

Future Style Periodic Table 完全免費嗎？可以商用嗎？

程式碼以 MIT 釋出，可以免費使用、修改、分發，商業用途在保留版權聲明下允許。要注意資料層採 CC BY-SA 3.0，衍生作品的資料部分須以相同授權發布。把它當內部教學工具使用沒有問題，當作對外商業產品的核心資料層則需要法務評估。

資料準確度如何？

主要元素資料來自開源專案 Bowserinator/Periodic-Table-JSON，這個資料集在開源化學教育圈被廣泛引用，準確度尚可。較冷門的同位素或罕見化合價可能未完整覆蓋，嚴謹學術用途建議交叉比對皇家化學學會或 NIST 等權威來源。

中文介面支援繁體中文嗎？

README 宣稱支援中英雙語切換。實測過的中文用語偏向對岸慣用詞，習慣台灣用語的人可能需要切換到英文介面或容忍部分用詞差異。

可以自己加新的視覺化模式嗎？

可以。原始碼模組化架構清楚，heatmap.ts 負責熱力圖渲染，想新增其他性質的色譜切換是可行的擴充方向。README 致謝段也歡迎社群提交 Pull Request，作者已接受過英文適配等社群貢獻。

需要聯網才能使用嗎？

官方 Demo 託管在 GitHub Pages，需要網路。下載原始碼後跑 npm run build 產出 dist 目錄，可以部署到任何靜態檔案伺服器離線使用，這也是把它放進內部教學網的標準做法。