← IndexWork 31 / 36
チームの公式サイト｜three.js・GLSL
Seraf() Official Web
ゲーム制作チーム Seraf() の公式サイト。屈折するガラスのキューブと破片が、スクロールに合わせて形を変えながらセクションごとの背景になる。
- Period
- 2024.09 – 運用中
- Role
- Web デザイン / 設計 / 実装 / 3DCG・GLSL 演出
- Team
- Seraf()
Overview
チームの紹介、作品、メンバー、ニュースをまとめたサイトです。背景の 3D は three.js を直接書いた独自の描画で、ガラスの屈折と分光、光のにじみ（ブルーム）、色収差や粒子感までを、いくつもの描画パスを重ねて作っています。
作品ごとのページとして、InvI のゲーム紹介、ヴォイドライブのルールブック、そしてこのポートフォリオも同じサイトの中に置いています。
What I did
- 01
セクションごとに変形する背景
ガラスの破片や球は、消えて入れ替わるのではなく、スクロールに合わせて同じものが隊列を組み替えます。ヒーローの軌道から、夜明けの光、銀河、シャボン玉、流星、伴星、最後は Contact の門へと役割を変えていきます。
- 02
ID パスとチケットのカード
メンバーは ID パス、作品は入場チケットを模したカードにし、層を重ねて傾きに合わせた奥行きを出しました。
- 03
ライト・ダークのテーマ
テーマの切り替えは、押した場所から円が広がるように切り替わります。背景の 3D もテーマに合わせて色の扱いを変えています。
Facts
- コミット
- 221（2024.09 – 2026.07）
Stack
Remix · React · three.js · GLSL · Tailwind CSS · Lenis · Cloudflare