GOONS DESIGN

The home page runs on a single three.js scene that sits behind the content. The GOONS letterforms (G, I, a half-A and the full logo) are GLTF models. As you scroll, they move through seven staged poses, one per section: hero, about, works, highlight, workflow, reviews, contact. Section progress comes from Locomotive Scroll and is interpolated into position, rotation and scale, so the models never jump between states.

首頁背後是一個常駐的 three.js 場景。GOONS 的字母（G、I、半個 A 和完整 Logo）是 GLTF 模型，隨捲動在七個段落之間換位：hero、about、works、highlight、workflow、reviews、contact。每段的捲動進度從 Locomotive Scroll 取得，再內插成位置、旋轉和縮放，模型在段落之間不會跳。

The models use a gradient material I wrote in GLSL. Three colours follow the model's rotation, with rim light and an emissive term, so the letters shift colour as they turn instead of looking like flat plastic. Behind them, a particle field reacts to scroll velocity: scroll fast and the particles stream, stop and they settle back with damping.

材質是我用 GLSL 寫的漸層 shader。三個顏色跟著模型旋轉走，加上邊緣光和自發光，字母轉動時顏色會跟著變，看起來不像一塊平的塑膠。後面的粒子會依捲動速度反應，滑得快就流動，停下來會帶阻尼慢慢靜止。

In the contact section, text is drawn onto a 2D canvas, uploaded as a repeating texture and scrolled by UV offset, so a marquee runs across a 3D surface. I sized the canvas against the device's WebGL texture limit so it doesn't break on phones.

Contact 段落的文字先畫在 2D canvas 上，再當成重複貼圖丟進 3D，用 UV 位移做跑馬燈。canvas 尺寸會依裝置的 WebGL 貼圖上限調整，手機上才不會爆掉。

On the About page, the agency's services became physical objects. Each tag is a matter-js capsule sized from its measured text, and you can grab and throw them around a walled canvas.

About 頁把服務項目做成實體。每個標籤是一顆 matter-js 膠囊，寬度依文字實際量測，可以抓起來丟、撞牆。

Tuning 3D by editing numbers and reloading is slow. I built a dev-only control panel that edits model transforms live in the browser, so designers could sit with me and dial in each stage by eye.

調 3D 如果要改數字再重新整理，非常慢。我做了一個只在開發環境出現的控制面板，可以直接在瀏覽器裡即時調模型參數，設計師坐在旁邊，一段一段用眼睛對到滿意。

• Full WebGL teardown on route change (geometries, materials, textures, renderer) after I tracked down a memory leak on long sessions. • WordPress → Nuxt revalidation cache, CSP hardening, nginx static caching. • Bilingual zh/en.

• 換頁時完整釋放 WebGL 資源（geometry、material、texture、renderer），這是追查長時間瀏覽的記憶體洩漏後補上的。 • WordPress → Nuxt 的 revalidate 快取、CSP 強化、nginx 靜態快取。 • 中英雙語。

SEO/structured data by Simon (GOONS). Production environment setup by GOONS RD.

SEO 與結構化資料由 Simon（GOONS）負責；正式環境建置由 GOONS RD 處理。