IMMERSIVE PORTFOLIO JOURNEY · 17 WORKS
沉浸式
作品行程
一趟穿越 17 件沉浸式網頁作品的策展行程——從會呼吸的數位生命體、捲動驅動的品牌宇宙、AI 戰鬥指揮艙,到黑金軌道酒店。皆以 Three.js／WebGL Shader／Web Audio 原生打造。
◆SELECTED CASE STUDIES · 深度案例
真實專案,
看我們怎麼想、怎麼做。
● 真實專案沉浸式 · 3D 官網
HEART & MIND
Blender 玻璃渲染 × 捲動敘事
- 挑戰
- HCF 旗下格鬥與設計雙品牌,需要一個能同時傳遞「熱血」與「智慧」的沉浸式門面。
- 做法
- 以 Blender Cycles 打造即時感玻璃心臟與大腦,搭配捲動敘事與 Michroma 字體的電影級版面。
- 成果
- 上線可分享的沉浸式官網,品牌記憶點與質感一次到位。
● 真實專案格鬥 · 運動
ENTER THE ARENA
自有品牌 · 沉浸式官網 × Motion
- 挑戰
- 格鬥品牌需要強烈的情緒張力與會員導流。
- 做法
- 打造八章捲動沉浸式官網與動態視覺。
- 成果
- 自有品牌實驗專案,驗證捲動敘事在格鬥館場景的呈現。
◆LIVE SHOWCASE · 真機實跑
10 支 LIVE 作品,
在這台 MacBook 裡輪番上映。
下面每一幀都是作品在瀏覽器裡真實渲染的畫面截圖——不是示意圖。點縮圖切換,或按「進入作品」直接開啟完整的沉浸式體驗。
17 件作品 · 真實畫面截圖 · 10 支原生 LIVE ＋ 7 支 React 即時運行 · 點縮圖切換,或「進入作品」開啟完整體驗
以下為完整 17 件沉浸式作品行程 · 4 章節 · ● LIVE 為原生 HTML、◆ REACT 為瀏覽器內即時編譯——17 件全部都能直接點「進入作品」開啟完整體驗。
數位生命體
Living Intelligence不是背景,而是活著的核心。以 Simplex 噪點頂點位移、菲涅耳玻璃光與 55Hz 低頻聲學,打造會呼吸、會凝視、會變形的 AI 意識體。
INFINITY DESIGN
十種可即時切換的生命型態——奇點種子、液態智慧、分形生命、量子綻放到起源物體。左側選擇器切換,核心以噪點膨脹重塑幾何。
ELDRITCH CHRONICLE
SILENT LUXURY 清水模美學 ↔ ELDRITCH OS 宇宙活體之間平滑漸變。神經突觸實時生長、全視之眼隨游標凝視。
SPATIAL INTELLIGENCE
神經宇宙大腦:Universe 待機與 Neural Burst 工作雙型態。POI 空間節點追蹤 3D 座標,UnrealBloom 後製發光。
AI OS PORTAL ∞
官方入口級空間 OS:10 生命型態轉化器、8 活體器官皮層、JARVIS ↔ Eldritch 古神雙模式、Webcam 人體追焦與神經音學,Canvas 起源大腦即時運算。
MATERIAL DNA
材質基因演化引擎:CORE／FLOW／FOCUS／CREATIVE／DREAM／ALERT 六態自動突變,90k 粒子外殼＋液態玻璃菲涅耳,深淵全視之眼隨機睜眼凝視。
SYMBIOTE
生物共生體。55Hz 深海心跳 Lub-Dub 雙拍、LFO 呼吸粉紅噪音,讓數位生命擁有真實的生理共振。React 原型。
MATERIAL LIFE
材質生命體。玻璃、黑曜石、電漿、星雲——每種材質配上專屬波形與濾波聲學紋理,觸碰即發聲。React 原型。
NEURAL CORE v3.0
2,800 點解剖級 3D 大腦(皮層／小腦／腦幹),突觸電脈衝沿晶格傳導、EEG 四波即時示波、5 Agent 群體對齊,DEFENSE／HEURISTIC／SLEEP 模式切換。React 原型。
SENTIENT CORE
12 種情緒液態生命:Webcam 凝視＋麥克風音量驅動粒子叢集,接 Gemini 多模態推理與 TTS 語音,情緒躍遷即時改色。React 原型。
SYMBIOTE EVOLUTION
共生流體六態:DORMANT→AWAKEN→MANIFEST→WORK→COMBAT→DREAM,100 節點液態黑曜石隨滑鼠成形上半身,白金神經脈衝。React 原型。
品牌宇宙
Brand Universe捲動即敘事。相機軌道穿越星際實驗室與品牌星系,把冷冰冰的服務轉化為一場有懸念、有張力的沉浸式滾動大片。
VISUAL LAB
6 章捲動穿越三維品牌實驗室——量子星塵風阻、玻璃展示艙點擊解密、即時遙測數據牆、高轉換率專案表單一氣呵成。
HCF UNIVERSE
5 章滾動品牌宇宙:AI Awakening 開機、服務星球、作品星系、300% 成長數據流,最後 AI 對話生成成長路徑。React 原型。
實戰場域
Arena & Operations從敘事到營運。10 幕拳館靈魂覺醒之旅、格鬥宇宙 v3,到 8 大 Cortex 即時運算的 AI 戰鬥指揮艙——把美學變成可落地的銷售與經營戰力。
IMMERSIVE ARENA
榮譽·勇氣·信仰。10 幕拳館靈魂覺醒敘事:3D 擂台組裝、Before/After 蛻變滑桿、主題色場切換、Jarvis AI 智能教練。
COMMAND COCKPIT
戰鬥指揮艙。8 大 Cortex(營收/銷售/留存/排課/內容/客服/教練/設計)即時運算,單一資料源 SSOT、TTS 語音播報。React 原型。
COMBAT UNIVERSE v3
進入格鬥宇宙 v3.0 深色版:多幕捲動戰術敘事(ST_01 THE COMBAT ARCH 起),Orbitron 霓虹紅、系統開機序列與場景切換。
COMBAT UNIVERSE v3
格鬥宇宙 v3.0 淺色戰術版:同一敘事引擎的高明度日戰配色,霓虹紅點綴於清水灰白,適合白天品牌展示與截圖。
跨界星域
Beyond · Cross-Domain把同一套沉浸式引擎推出品牌之外。黑金奢華、軌道視差、菲涅耳大氣光暈——證明這套技術能為任何頂級品牌打造獨一無二的世界。
AETHEREA
頂級星際旅遊與軌道酒店:Three.js 暗面地球＋菲涅耳大氣光暈、金色軌道環與滑鼠視差,米其林零重力晚宴敘事——一場黑金奢華的跨界練習。
STYLE GALLERY · 107 支風格型錄
一台筆電，
翻遍我們的能力光譜。
從奇異生命體、鍍鉻水銀、沉浸式 3D 場域,到各產業官網範型——107 支即打即用的風格 demo,是我們和你談「網站要長怎樣」時的活菜單。下面這台 MacBook 裡跑的就是完整型錄,點開全螢幕逐支點進去看。