1. イベント発生
マウス移動イベント(mousemove)またはタッチ移動イベント(touchmove)が発生
↓
2. スロットリングチェック
前回の処理から50ミリ秒経過しているか確認。経過していない場合は処理をスキップ
↓
3. 花びら生成
マウス位置を基準に、8枚の花びらを生成。各花びらにランダムな位置オフセットと回転角度を設定
↓
4. DOMに追加
生成した花びら要素をbody(またはコンテナ)に追加。CSS transitionを設定(3秒)
↓
5. アニメーション開始
requestAnimationFrameで次のフレームに移動・回転・フェードアウトを適用
↓
6. アニメーション実行
CSS transitionにより、3秒かけて滑らかに移動・回転・フェードアウト
↓
7. メモリ管理
3秒後にsetTimeoutで要素をDOMから削除。メモリリークを防止