Output

生成画像スクロールデモ

チップが分解・組み立てされるスクロール連動アニメーション。Google Whisk と Flow で生成したフレームを Canvas で滑らかに描画。スクロールして体験してみてください。

Canvas API

AI Podcast App

AIがSlackチャンネルの動きを要約して、1週間のまとめをPodcastで発信するアプリケーション。クリックすると、AIが生成したサンプルのポッドキャストを聴くことができます。

AI NEWS APP

AIが毎日自動で公式ブログやGit Hub から情報を取得し、要約をしてSlackのチャンネルにニュースを発信するアプリケーション。障害情報も通知するように設定。

3D Marquee 解説デモ

CSS 3D Transform と Motion を使った3Dマーキーの仕組みをステップバイステップで解説。perspective、rotateX/Y/Z、アニメーションの各要素をインタラクティブに体験できます。

Tanstack Start & Convex

Tanstack StartとConvexを使用して、リアルタイムアプリケーションのデモを作成。データは定期的に削除されるので複数ブラウザを立ち上げて遊んでみてください。

MCP AI Chat App

AIとチャットを通してTODOの状態を更新するアプリケーション。MCPサーバーを自作して、AIと連携することで、チャットでTODOの状態を更新を実現。

商品管理・在庫管理・購入履歴管理システム

Shopify を参考に商品管理画面を作成。Next.js + Drizzle + Stripeを使用して作成。商品登録のエディタにこだわりUXを最大限向上。

freee 退勤通知 Chrome 拡張機能

freeeでの8時間勤務をサポートするChrome拡張機能。複数回の休憩にも対応し、退勤前に自動でデスクトップ通知します。