ポートフォリオ

クリエイティブデモ・WebGL作品のコレクション。

染料の流れ

水面に落とした染料がゆらめき広がるような、有機的でなめらかな流体シミュレーション。放置すると自動で色相が巡る演出に切り替わります。

全画面表示

Three.js Constellations

Interactive particle constellation simulation with customizable settings (rainbow colors, thickness, dynamic distance, drift speed).

全画面表示

ガラスモーフィズム 3D Tilt カード

backdrop-filterすりガラス、マウス追従スポットライト、Vercel風mask合成ボーダーグロー、背面パララックス透過画像、3D Tilt、スクロールフェード、セクション常駐カスタムカーソルの7技術を統合した高密度インタラクティブカード。

全画面表示

可変フォント 3D ドラム

スクロールに連動して文字列が3Dドラム状に回転。正面を向いた行ほど太く・横広く・濃くなる、可変フォント2軸(太さ・横幅)の連続制御デモ。

全画面表示

飛び出すQR

QRサムネをクリックすると、枠は元の位置に残ったまま中身だけが中央へ飛び出して拡大する。GSAP Flip の data-flip-id 共有エレメントと pointer-events:none ステージでジッターなく滑らかに動く。

全画面表示

ホバー色変化ボタン

ボタンやナビ項目がホバーで項目ごとに別々のブランド色へ点灯する。nth-child 固定色とインライン CSS 変数の2方式で、色追加が CSS 改変なしに行える軽量な素CSS実装。

全画面表示

隠密マーク(ホバー出現アイコン)

普段は完全に非表示のアイコンが、カーソルを近づけた時だけ下から浮き上がりブランド色で出現する。黒塗りでは隠しきれない問題を opacity:0 で解決した素CSSの隠密マーク。

全画面表示

ウェーブリボン

横長の薄い棒を100本積層し、スクロール連動で一本ずつ時間差スライド+回転。棒の集合がリボン状にうねって流れ、背後の「SCROLL UP」が現れるGSAP ScrollTrigger stagger デモ。

全画面表示

3D CSS Solar System

Pure CSS 3D solar system visualization using CSS transforms without WebGL.

全画面表示

Anime.js v4 Shuffle

Smooth grid items shuffling using Anime.js v4.

全画面表示

Anime.js v4 Dynamic Add

Dynamic grid items addition with entry transitions using Anime.js v4.

全画面表示

Dennis Snellenberg 再現

Dennis Snellenbergのポートフォリオに見られる、GSAP/Lenisを用いた高品位なマグネット、プレローダー、カーソル追従画像プレビュー等のインタラクション再現。

全画面表示

AIオフィサー HP

企業の意思決定を統括する「AI Officer」の洗練されたダークテーマHP。SVGローダー、GSAPスムーズ追従カスタムカーソル、吸い寄せられるマグネットボタン、流麗なCanvasパーティクル、チャットログ対話デモを搭載。

全画面表示

AIオフィサー HP (B-Suite / Light Theme)

Anime.js(juliangarnier/anime)の公式風インタラクションを再現した白ベース of 極ミニマルHP。ジグザグ線画ローダー、動的ジグザグうねうね波、クリック位置から放射状に広がる波紋グリッドスタッガーを搭載。

全画面表示

Igloo 再現

igloo.incのWebGL演出を再現。MeshPhysicalMaterialによる氷コアの透過・屈折、3D Simplexノイズ頂点シェーダーを用いたGPGPUライクな浮遊パーティクル、スクロール連動カメラワークを搭載。

全画面表示