NYCU brand identity
- Client
- National Yang Ming Chiao Tung University 國立陽明交通大學
- Agency
- ES Design
- Year
- 2023–2024
- Role
- Front-end development: built every section of the site, 3D tuning, performance
- Design
- Eason (art direction), Constance (UI)
- Stack
- Nuxt 3 (static), three.js, GSAP ScrollTrigger, Locomotive Scroll v5
When two universities merge, the new identity needs to be explained to a lot of people. The brand guidelines became a single scrolling story: history since 1896, the wordmark, colour, type, spirit, applications and the future, followed by a guidelines page with downloads.
兩所大學合併，新的識別要跟很多人解釋。我們把品牌規範做成一條往下滑的故事：1896 年至今的歷史、標準字、色彩、字體、精神、應用和未來，最後接一頁可以下載的規範。
Hero
The hero is a three.js sphere whose surface moves with 3D simplex noise and reflects a cubemap. It rotates gently toward your mouse, lit in the identity's pink.
Hero 是一顆 three.js 球體，表面用 3D simplex noise 起伏，反射 cubemap 環境，打上識別色的粉紅光，會輕輕轉向滑鼠的方向。
If I rebuilt it today: the noise is computed on the CPU each frame across a dense mesh. Moving it into a vertex shader would cut that cost to almost nothing.
如果現在重做： noise 目前是每一幀在 CPU 上對很密的網格計算。搬到 vertex shader 裡，成本幾乎可以歸零。
Wordmark
The wordmark section is driven entirely by scroll progress. Two videos scale with your scroll, and a seven-step text sequence is worked out from where you are in the section, so the explanation unfolds at your pace.
標準字段落完全由捲動進度控制。兩支影片跟著捲動縮放，七個步驟的文字依你在段落裡的位置計算出來，說明的速度跟著你走。
Into the future
The final section is a zoom tunnel. Locomotive writes scroll progress to a CSS variable, and everything else is CSS: the scale grows up to 15×, a radial gradient expands, layers cross-fade. No JavaScript runs per frame.
最後一段是 zoom tunnel。Locomotive 把捲動進度寫進 CSS 變數，剩下全交給 CSS：縮放最多到 15 倍、放射漸層擴散、圖層交叉淡入。每一幀都不用跑 JavaScript。
Also
• A 2,000-line history timeline with progress bars and per-era image reveals. • Pinned horizontal scroll for the "Spirit" chapter, plus sticky cards that tilt slightly as they stack. • Performance work on the horizontal sections and proper Locomotive cleanup between pages.
• 2,000 行的歷史時間軸，有進度條，每個年代的圖片依序出現。 • 「精神」章節改成 pinned 橫向捲動；sticky 卡片疊上來時會微微傾斜。 • 橫向捲動段落的效能調校，換頁時正確清除 Locomotive。
Credits
Project management: Ingia. Art direction: Eason. UI: Constance. Some motion directions were prototyped first by Eason: the wordmark video scaling, mouse-driven 3D and a horizontal-scroll example. CI and security headers: Tommy Liu. Front-end: Les.
專案管理：Ingia。藝術指導：Eason。UI：Constance。部分動態方向由 Eason 先做原型：標準字影片縮放、滑鼠控制 3D、橫向捲動範例。CI 與資安標頭：Tommy Liu。前端：Les。