デモ
スクロールと 3D の、
表現のデモ。
スクロールに合わせて画面が動く表現と、ブラウザで描く 3D の表現のデモです。
3 つとも「事業のアイデアが、動くプロダクトになるまで」を、違う手法で描いています。
- Demo 01結像 — Formation霧のような光の粒子が、スクロールに合わせて進むカメラの前で、線・画面・プロダクト・循環へと順にかたちを結んでいく、短い映像のようなデモです。GPU で動かす光の粒子（最大 26 万個）レールの上を進むカメラ粒子の文字と HTML の見出しを重ねる デモを見る
- Demo 02活字 — Living Type活字と一本の線が、句点の扉から問いの断片、組版、フェーズの線、組み上げ、循環へと継ぎ目なくつながっていく、文字が主役のデモです。CSS 3D で文字の間を進むカメラ字をひとつずつ運ぶ組版明朝体の字形から作る点群字幅が変わる可変フォント デモを見る
- Demo 03見当 — Registrationページ上の見出しや画像に、同じ位置で重なる WebGL の「版」を描き、スクロールの間だけずらして止まると合わせる、印刷の見当合わせを題材にしたデモです。HTML と WebGL を同じ座標で重ねる数式だけで描く 6 つのシェーダーGPU で動かす点の文字描画の負荷をその場で計測 デモを見る
端末の「視差効果を減らす」などの設定がオンのときや、WebGL が使えない環境では、動きを止めた構図で表示します。各デモの画面からも、動きを減らした表示に切り替えられます。
使用しているライブラリ・書体
three.js（MIT License）/ GSAP（GreenSock Standard "No Charge" License）/ Lenis（MIT License）/ webgl-noise（MIT License）/ Google Fonts（SIL Open Font License）