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技術を統合した高密度インタラクティブカード。
全画面表示飛び出す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.
全画面表示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ライクな浮遊パーティクル、スクロール連動カメラワークを搭載。
全画面表示