Three.js Constellations
Interactive particle constellation simulation with customizable settings (rainbow colors, thickness, dynamic distance, drift speed).
全画面表示Dennis Snellenberg 再現
Dennis Snellenbergのポートフォリオに見られる、GSAP/Lenisを用いた高品位なマグネット、プレローダー、カーソル追従画像プレビュー等のインタラクション再現。
全画面表示ガラスモーフィズム 3D Tilt カード
backdrop-filterすりガラス、マウス追従スポットライト、Vercel風mask合成ボーダーグロー、背面パララックス透過画像、3D Tilt、スクロールフェード、セクション常駐カスタムカーソルの7技術を統合した高密度インタラクティブカード。
全画面表示AI オフィサー LP
起動ローダーからニューラルネット背景、3Dティルトカード、疑似ターミナルまでを一画面に統合したダークテーマの企業向けAIエージェント・ランディングページ。マウスに吸い付くマグネットボタンと慣性スクロールで没入感を演出します。
全画面表示飛び出すQR
QRサムネをクリックすると、枠は元の位置に残ったまま中身だけが中央へ飛び出して拡大する。GSAP Flip の data-flip-id 共有エレメントと pointer-events:none ステージでジッターなく滑らかに動く。
全画面表示ウェーブリボン
横長の薄い棒を100本積層し、スクロール連動で一本ずつ時間差スライド＋回転。棒の集合がリボン状にうねって流れ、背後の「SCROLL UP」が現れるGSAP ScrollTrigger stagger デモ。
全画面表示Anime.js Layout ID Attribute
同じ data-layout-id を持つ要素をコンテナ間で移動させる Anime.js v4 の createLayout (FLIP) アニメーションデモ。
全画面表示Anime.js 動的追加トランジション
グリッドに要素が追加されると既存要素が滑らかに押し退けられ、新要素が下からふわっと浮き上がる Anime.js v4 createLayout デモ。
全画面表示ホバー色変化ボタン
ボタンやナビ項目がホバーで項目ごとに別々のブランド色へ点灯する。nth-child 固定色とインライン CSS 変数の2方式で、色追加が CSS 改変なしに行える軽量な素CSS実装。
全画面表示隠密マーク（ホバー出現アイコン）
普段は完全に非表示のアイコンが、カーソルを近づけた時だけ下から浮き上がりブランド色で出現する。黒塗りでは隠しきれない問題を opacity:0 で解決した素CSSの隠密マーク。
全画面表示3D CSS 太陽系
純粋なCSS 3Dトランスフォームだけで太陽系の公転・自転・昼夜の陰影を再現したインタラクティブ作品。2D/3D切替・速度/サイズ/距離スケールをワンクリックで切り替えられます。
全画面表示3Dスクロール水流トンネル潜行
スクロール速度と連動して視野角が広がり、カメラが微小にブレながら、Simplex Noiseでうねる光の気泡トンネルを滑らかに潜り抜けるインタラクティブな3D演出です。
全画面表示Flubber モーフィング
GSAP単体では不自然になりやすい「全く頂点数や構造が異なる図形同士」の変形を、人間の直感に最も近い形で完璧に補間する究極のオープンソースアルゴリズム「Flubber」のデモです。
全画面表示GSAP Cover Flow ポートフォリオUI
GSAP の ScrollTrigger と Draggable を用いて、スクロールやドラッグで無限にループする 3D Cover Flow カルーセルを実装。
全画面表示GSAP Inertia & Draggable (慣性ドラッグUI)
ドラッグ可能な要素に超リアルな「慣性」を追加します。フリックして投げると、自然に減速したり壁で滑らかに跳ね返ったりします。
全画面表示GSAP MorphSVG (完璧な図形変形)
どんなSVGパスでも、頂点の数に関係なく別のパスへと完璧にモーフィング（変形）させます。最適な補間を自動計算し、不自然なねじれを防ぐ最強プラグインです。
全画面表示GSAP ScrollSmoother (極上スクロール)
ページ全体に慣性が効いた「バターのようになめらかなスクロール感」を追加するプレミアムプラグイン。パララックス（視差）効果もネイティブにサポートします。
全画面表示GSAP SplitText (テキスト分割アニメーション)
あらゆるテキストを一瞬で「1文字ずつ」「1単語ずつ」「1行ずつ」に分割し、複雑なタイポグラフィ・アニメーションの実装を極めて簡単にするプラグインです。
全画面表示