Anime la page d'accueil : apparitions au défilement + étoiles en mouvement

- Composant Reveal (IntersectionObserver) + keyframes CSS : sections et grilles
  apparaissent en fondu/glissement, cartes en cascade (stagger). Respecte
  prefers-reduced-motion + repli no-JS.
- Étoiles (sparkles) : l'animation twinkle inclut désormais une dérive
  (translation) pour un mouvement nettement visible.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XwfhYHzC9hQWPDnQ2p53GL

src/app/globals.css

@@ -58,15 +58,26 @@ button {
 
 /* ---- Animations ---- */
 @keyframes plr-twinkle {
-  0%,
+  0% {
-  100% {
+    transform: translate(0, 0) scale(0.9) rotate(0deg);
-    transform: scale(0.85) rotate(0deg);
+    opacity: 0.55;
-    opacity: 0.5;
+  }
+  25% {
+    transform: translate(4px, -9px) scale(1.15) rotate(15deg);
+    opacity: 1;
   }
   50% {
-    transform: scale(1.3) rotate(25deg);
+    transform: translate(-3px, -13px) scale(1.32) rotate(26deg);
+    opacity: 0.85;
+  }
+  75% {
+    transform: translate(-5px, -5px) scale(1.1) rotate(12deg);
     opacity: 1;
   }
+  100% {
+    transform: translate(0, 0) scale(0.9) rotate(0deg);
+    opacity: 0.55;
+  }
 }
 @keyframes plr-floatlogo {
   0%,
@@ -86,6 +97,53 @@ button {
 .sparkle {
   clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
 }
+
+/* ---- Scroll-reveal entrance animations ---- */
+@keyframes plr-fade-up {
+  from {
+    opacity: 0;
+    transform: translateY(18px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+.reveal {
+  opacity: 0;
+}
+.reveal.is-visible {
+  animation: plr-fade-up 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) both;
+}
+
+/* Staggered children (grids) */
+.reveal-stagger > * {
+  opacity: 0;
+}
+.reveal-stagger.is-visible > * {
+  animation: plr-fade-up 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) both;
+}
+.reveal-stagger.is-visible > *:nth-child(1) { animation-delay: 0.04s; }
+.reveal-stagger.is-visible > *:nth-child(2) { animation-delay: 0.1s; }
+.reveal-stagger.is-visible > *:nth-child(3) { animation-delay: 0.16s; }
+.reveal-stagger.is-visible > *:nth-child(4) { animation-delay: 0.22s; }
+.reveal-stagger.is-visible > *:nth-child(5) { animation-delay: 0.28s; }
+.reveal-stagger.is-visible > *:nth-child(6) { animation-delay: 0.34s; }
+.reveal-stagger.is-visible > *:nth-child(7) { animation-delay: 0.4s; }
+.reveal-stagger.is-visible > *:nth-child(8) { animation-delay: 0.46s; }
+.reveal-stagger.is-visible > *:nth-child(n + 9) { animation-delay: 0.52s; }
+
+@media (prefers-reduced-motion: reduce) {
+  .reveal,
+  .reveal-stagger > * {
+    opacity: 1 !important;
+  }
+  .reveal.is-visible,
+  .reveal-stagger.is-visible > * {
+    animation: none !important;
+  }
+}
 .twinkle {
   animation: plr-twinkle 3.2s ease-in-out infinite;
 }

src/app/layout.tsx

@@ -26,6 +26,10 @@ export default function RootLayout({
           rel="stylesheet"
         />
         <link rel="icon" href="/assets/logo.png" type="image/png" />
+        {/* Fallback: if JS is disabled, never keep revealed content hidden. */}
+        <noscript>
+          <style>{`.reveal,.reveal-stagger>*{opacity:1!important}`}</style>
+        </noscript>
       </head>
       <body>{children}</body>
     </html>

src/app/page.tsx

@@ -1,5 +1,6 @@
 import Link from "next/link";
 import { Sparkle } from "@/components/Sparkle";
+import { Reveal } from "@/components/Reveal";
 import { SiteHeader } from "@/components/SiteHeader";
 import { SiteFooter } from "@/components/SiteFooter";
 import { getHighlightedMembers, getLivePromotions } from "@/lib/queries";
@@ -60,7 +61,7 @@ export default async function AccueilPage() {
             />
           </div>
 
-          <div>
+          <Reveal className="reveal">
             <div
               style={{
                 display: "inline-flex",
@@ -148,7 +149,7 @@ export default async function AccueilPage() {
                 Rechercher
               </button>
             </form>
-          </div>
+          </Reveal>
         </section>
 
         {/* promotions */}
@@ -213,7 +214,7 @@ export default async function AccueilPage() {
             </a>
           </div>
 
-          <div className="grid grid-3" style={{ marginTop: 26 }}>
+          <Reveal className="grid grid-3 reveal-stagger" style={{ marginTop: 26 }}>
             {promos.map((p) => (
               <article
                 key={p.id}
@@ -307,7 +308,7 @@ export default async function AccueilPage() {
                 </div>
               </article>
             ))}
-          </div>
+          </Reveal>
 
           {/* member CTA */}
           <div
@@ -377,7 +378,7 @@ export default async function AccueilPage() {
               Tout l&apos;annuaire →
             </a>
           </div>
-          <div className="grid grid-3" style={{ gap: 18 }}>
+          <Reveal className="grid grid-3 reveal-stagger" style={{ gap: 18 }}>
             {highlighted.map((m, i) => (
               <Link
                 key={m.id}
@@ -430,7 +431,7 @@ export default async function AccueilPage() {
                 </div>
               </Link>
             ))}
-          </div>
+          </Reveal>
         </section>
 
         {/* warm CTA */}
@@ -447,29 +448,31 @@ export default async function AccueilPage() {
         >
           <Sparkle color="#E0A63C" size={18} style={{ top: 24, left: 60 }} duration={3.4} />
           <Sparkle color="#6FB0C6" size={22} style={{ bottom: 26, right: 80 }} duration={2.8} delay={0.7} />
-          <h2 className="font-display" style={{ fontWeight: 800, fontSize: 30, margin: "0 0 10px", color: "#fff" }}>
+          <Reveal className="reveal">
-            Faites partie de l&apos;aventure Plein R
+            <h2 className="font-display" style={{ fontWeight: 800, fontSize: 30, margin: "0 0 10px", color: "#fff" }}>
-          </h2>
+              Faites partie de l&apos;aventure Plein R
-          <p style={{ margin: "0 auto 22px", fontSize: 15.5, color: "#f4e6d3", maxWidth: 480 }}>
+            </h2>
-            Rejoignez plus de 120 commerçants et entreprises qui font réseau, se rencontrent et réussissent
+            <p style={{ margin: "0 auto 22px", fontSize: 15.5, color: "#f4e6d3", maxWidth: 480 }}>
-            ensemble.
+              Rejoignez plus de 120 commerçants et entreprises qui font réseau, se rencontrent et réussissent
-          </p>
+              ensemble.
-          <a
+            </p>
-            href="#"
+            <a
-            className="font-display lift-cta"
+              href="#"
-            style={{
+              className="font-display lift-cta"
-              textDecoration: "none",
+              style={{
-              background: "#fff",
+                textDecoration: "none",
-              color: "#9a6638",
+                background: "#fff",
-              fontWeight: 700,
+                color: "#9a6638",
-              fontSize: 16,
+                fontWeight: 700,
-              padding: "15px 30px",
+                fontSize: 16,
-              borderRadius: 12,
+                padding: "15px 30px",
-              display: "inline-block",
+                borderRadius: 12,
-            }}
+                display: "inline-block",
-          >
+              }}
-            Devenir adhérent
+            >
-          </a>
+              Devenir adhérent
+            </a>
+          </Reveal>
         </section>
       </div>
 

src/components/Reveal.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import { useEffect, useRef, useState, type CSSProperties, type ReactNode } from "react";
+
+/**
+ * Wraps content and reveals it (via the `is-visible` class) when it scrolls into
+ * view. Pair with the `.reveal` or `.reveal-stagger` CSS classes. Respects
+ * prefers-reduced-motion (CSS forces content visible there).
+ */
+export function Reveal({
+  children,
+  className = "",
+  style,
+  id,
+}: {
+  children: ReactNode;
+  className?: string;
+  style?: CSSProperties;
+  id?: string;
+}) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    if (typeof IntersectionObserver === "undefined") {
+      setVisible(true);
+      return;
+    }
+    const obs = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((e) => {
+          if (e.isIntersecting) {
+            setVisible(true);
+            obs.disconnect();
+          }
+        });
+      },
+      { threshold: 0.12, rootMargin: "0px 0px -8% 0px" }
+    );
+    obs.observe(el);
+    return () => obs.disconnect();
+  }, []);
+
+  return (
+    <div ref={ref} id={id} className={`${className}${visible ? " is-visible" : ""}`} style={style}>
+      {children}
+    </div>
+  );
+}