The simplest approach: add a replayKey state in page.tsx, pass it to FireworksCanvas. When the replay button is clicked, increment replayKey. In FireworksCanvas, when replayKey changes, reset the state machine. I'll also expose an onDone callback so the button only appears when the sequence finishes.

Now add the onDone callback when state transitions to "done":

Now update page.tsx to add the replay button:

Now add the replay button UI before the closing </main>:

シーケンスが一巡し終わると画面中央に「Replay」ボタンがフェードイン表示されます。ボタンをクリックすると replayKey がインクリメントされ、花火キャンバスの状態がリセットされて最初から打ち上げが再開されます。ボタンはクリック後すぐに非表示になります。

アナウンサーの発声リズムに合わせるには、1文字ごとに固定間隔ではなく、文字の種類に応じた可変タイミングが必要です。母音（あ、い、う、え、お）はそれぞれ発音の長さが異なり、「ん」は撥音で短めです。

固定の launchInterval を廃止し、入力シーケンスの各文字ごとに個別の間隔（ms）を計算して配列で渡す方式に変更します。

Now remove the old fixed launchInterval state and the LaunchTimingInput import/usage, and update the canvas props:

Now update FireworksCanvas to accept launchIntervals (array) instead of launchInterval (single number):

Now update the state machine to use the per-step interval:

打ち上げ間隔をアナウンサーの発声リズムに合わせました。固定の launchInterval を廃止し、入力シーケンスの各文字ごとに個別の間隔（ms）を計算して配列で渡す方式に変更しています。母音ごとに発音の長さが異なり、「あ」420ms、「い」350ms、「う」380ms、「え」370ms、「お」430ms、「ん」220ms で、アナウンサーの明瞭な発声テンポを再現しています。