学習・デモ
技術学習の記録とデモサイトをまとめています。
※只今、項目を随時追加中です。
Tursoの検証（Next.js × Turso × Better Auth）
SNS風タイムラインの実装です。
使用技術
Next.jsTailwind CSS
nuqsの検証
nuqsライブラリを活用し、URL状態とReactステートを同期させた検索・フィルタリング機能を実装。直感的なUXを実現。
使用技術
Next.jsTailwind CSS
Nextjsでgsapアニメーションの検証
GSAPのScrollTriggerを用いたスクロール連動型UIの実装デモ。実案件を想定したパフォーマンスとUX設計を検証。
使用技術
Next.jsTailwind CSS
Next.js + Googleスプレッドシート（API）でSSRデモ
Google Apps ScriptをバックエンドAPIとして活用し、スプレッドシートのデータをNext.jsのSSRで動的レンダリングする実装検証。
使用技術
Next.jsTailwind CSSGAS
Next.js + Googleスプレッドシート（API）でSSGデモ
Google Apps ScriptをバックエンドAPIとして活用し、スプレッドシートのデータをNext.jsのSSGで静的生成する実装検証。
使用技術
Next.jsTailwind CSSGAS
WebGL × GLSL カスタムシェーダーによる画像トランジションの検証
生のWebGL(RawShaderMaterial)とGLSLカスタムシェーダーによる画像トランジションエフェクトの実装検証。スクロール進行度に応じた動的な視覚表現を実現。
使用技術
WebGLThree.jsTypeScript
Barba.jsを使って非同期のページ遷移
SPAライクなページ遷移とアニメーション実装
使用技術
JavaScriptHTMLCSS
WebGLを使って画像の揺らぎのデモ
複数枚の画像を波形トランジションでシームレスに切り替える技術検証。
使用技術
WebGLThree.js
Gemini3を試してみたもの
ただの試してみたものになります。
使用技術
Vite