From 7e079dfede92faa95e37c7bb7ad0fc940a57979b Mon Sep 17 00:00:00 2001 From: soufiane Date: Thu, 20 Nov 2025 20:11:08 +0100 Subject: [PATCH] fix: restart icon animations from top on page refresh MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Add animation restart mechanism using React key prop to ensure tea icons always begin their falling animation from the top of the viewport when the page is refreshed, providing a consistent user experience. Changes: - Add useState and useEffect to manage animation restart - Set unique key based on timestamp on component mount - Icons container remounts on each page load, resetting CSS animations - All 35 tea icons now restart their descent from -100vh on refresh 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- app/page.tsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/app/page.tsx b/app/page.tsx index 785763f..bcb0346 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -7,8 +7,16 @@ import CountdownTimer from "@/components/CountdownTimer"; import GamePeriod from "@/components/GamePeriod"; import GrandPrize from "@/components/GrandPrize"; import AboutContest from "@/components/AboutContest"; +import { useState, useEffect } from "react"; export default function HomePage() { + const [animationKey, setAnimationKey] = useState(0); + + useEffect(() => { + // Redémarrer l'animation à chaque chargement de la page + setAnimationKey(Date.now()); + }, []); + return (
{/* Background avec icônes de thé */} @@ -17,7 +25,7 @@ export default function HomePage() {
{/* Icônes de thé dispersées avec animation de descente - 35 icônes */} -
+
{/* Ligne 1 - 5 icons */}