Output
Web Haptics 体験デモ
和太鼓・花火・餅つきの3つのインタラクティブ振動体験。タップに連動してデバイスが振動するモバイルWebの触覚フィードバックを体感できます。
MCP Apps デモ
MCP（Model Context Protocol）の公式UI拡張「MCP Apps」を使ったインタラクティブUIデモ。AIチャット内にiframeサンドボックスで安全に描画されるUIを構築。Anthropic + OpenAI共同策定のStable仕様に基づく実装。
3D 太宰府天満宮デモ
AI画像生成（Nano Banana Pro）× AI 3Dモデル生成（Meshy.ai）× React Three Fiber で構築した太宰府天満宮 仮殿の3Dジオラマ。藤本壮介設計の「屋根に森が生える」建築をインタラクティブに体験できます。
SVG Beam 解説デモ
SVG path + mask + radialGradient + CSS offset-path を使った光るビームアニメーションの仕組みをステップバイステップで解説。スライダーやボタンでインタラクティブに体験できます。
AI NEWS APP
AIが毎日自動で公式ブログやGit Hub から情報を取得し、要約をしてSlackのチャンネルにニュースを発信するアプリケーション。障害情報も通知するように設定。
Tanstack Start & Convex
Tanstack StartとConvexを使用して、リアルタイムアプリケーションのデモを作成。データは定期的に削除されるので複数ブラウザを立ち上げて遊んでみてください。
3D Marquee 解説デモ
CSS 3D Transform と Motion を使った3Dマーキーの仕組みをステップバイステップで解説。perspective、rotateX/Y/Z、アニメーションの各要素をインタラクティブに体験できます。
Claude Code Permission Popup
Claude Codeの権限リクエストをmacOSネイティブポップアップで表示するツール。コマンドの内容を日本語で解説し、リスクレベルを5段階で色分け表示。許可/拒否をポップアップから直接操作できます。
freee 退勤通知 Chrome 拡張機能
freeeでの8時間勤務をサポートするChrome拡張機能。複数回の休憩にも対応し、退勤前に自動でデスクトップ通知します。
生成画像スクロールデモ
チップが分解・組み立てされるスクロール連動アニメーション。Google Whisk と Flow で生成したフレームを Canvas で滑らかに描画。スクロールして体験してみてください。
AI Podcast App
AIがSlackチャンネルの動きを要約して、1週間のまとめをPodcastで発信するアプリケーション。クリックすると、AIが生成したサンプルのポッドキャストを聴くことができます。
MCP AI Chat App
AIとチャットを通してTODOの状態を更新するアプリケーション。MCPサーバーを自作して、AIと連携することで、チャットでTODOの状態を更新を実現。
商品管理・在庫管理・購入履歴管理システム
Shopify を参考に商品管理画面を作成。Next.js + Drizzle + Stripeを使用して作成。商品登録のエディタにこだわりUXを最大限向上。