Day 19。ライブイベント向けに、楽しくてインタラクティブなものを作りたかった。ミートアップでプロジェクターに映して、みんながスマホからリアクションを送れるようなやつ。
プロンプト#
「イベント向けのライブリアクションウォールを作って。イベントを作成し、リンクかQRコードを共有すると、リアルタイムでリアクションが画面を飛び交う。下部に絵文字バー、テキストメッセージも送れるように。フルスクリーンのプロジェクションモード付き。リアルタイム同期にはFirebaseを使用。」
どうやって作ったか#
Watchfireがこれを9つのタスクに分解してくれた。最初のいくつかは基盤部分：Firebase Realtime Databaseのセットアップ、イベント作成フロー、サインアップ不要の匿名認証。その後、絵文字リアクションバー、Framer Motionを使った飛び回るアニメーション、プロジェクター用のフルスクリーン表示モード、サウンドトグル、そして最終的な仕上げに取り組んだ。
リアルタイム部分がここでの核心的な課題だった。すべてのリアクションが、そのイベントを見ているすべての画面に即座に表示される必要がある。Firebase Realtime Databaseはそれをそのまま処理してくれるけど、気持ちよく動かすには多くの微調整が必要だった。リアクションは30秒のスライディングウィンドウを使っていて古いものは消えていく。また、1秒に1リアクションのレート制限を設けて、カオスにならないようにしている。
出来上がったもの#
ランディングページはクリーンでダークなデザイン。ボタン1つでイベントウォールを作成できる。
イベントに名前を付けて「Go Live」を押す。セットアップはそれだけ。
入ったら、左上にQRコードと共有リンクが表示されるので、参加者はスマホから即座に参加できる。画面の下部には8つのオプション付きの絵文字バーと、50文字までのカスタムメッセージ用テキスト入力がある。
ディスプレイモードが一番楽しいところ。フルスクリーン、ダーク背景、グロウエフェクト付きでリアクションが飛び交う。絵文字はランダムな軌道、サイズ、揺れアニメーションを持っている。テキストメッセージも紫色の小さなバブルの中を漂っていく。みんながリアクションを連打し始めると、バーストエフェクトが発動する。
明示的に頼んでいないのに追加された素敵な機能もある。リアクション送信時のモバイルでの触覚フィードバック。Web Audio APIによるポップ音とそのオン・オフトグル。レート制限後にいつまた送れるかがわかるクールダウンインジケーター。
技術スタック#
- React 19 + TypeScript + Vite
- Firebase Anonymous Auth + Realtime Database
- Framer Motion（飛ぶアニメーション全般）
- QRCode.react（共有用QRコード）
Framer Motionがビジュアル面の重い部分を担当している。各リアクションは、軌道、回転、スケールのランダムパラメータを持つ独自のアニメーションを持っている。その結果、画面を飛び交うリアクションは2つとして同じものがない。
試してみて#
イベントを作って、スマホでリンクを開いて、自分にリアクションを送ってみて。思っている以上に気持ちいいから。
Day 19の感想#
これはリアルタイム性がプロジェクトに命を吹き込むタイプのやつだ。静的なアプリも悪くないけど、誰かがスマホをタップした瞬間にリアクションがポップアップするのを見ると、本物のプロダクトみたいに感じられる。Firebaseが同期レイヤーを、Framer Motionがアニメーションレイヤーを担当して、全体がライブイベントで実際に使えるものとしてまとまった。
QRコードでの共有、フルスクリーン表示モード、何もインストールする必要もアカウントを作る必要もないこと。ミートアップやカンファレンスのトークには、これで十分役に立つ。プロダクションレベルではないけど、プロジェクターに映して盛り上がるには十分だ。
これは30 Days of Vibe Codingの19日目です。AIアシストコーディングで30日間に30プロジェクトを出荷する様子をフォローしてね。
