feat: animate home page sections using RevealOnScroll

app/globals.css

@@ -83,3 +83,23 @@ footer{margin:88px 0 0; border-top:1px solid var(--rule); padding:24px 0 0}
   .nav{order:3; flex-basis:100%; gap:8px 20px; font-size:14px}
   section{padding-top:56px}
 }
+/* ---------- появление при прокрутке (RevealOnScroll) ---------- */
+/* body .reveal — специфичность 11, побеждает .project (10) и гарантирует работу на /projects/ */
+body .reveal {
+  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1);
+  transition-delay: var(--d, 0s);
+}
+body .reveal.pending {
+  opacity: 0;
+  transform: translateY(16px);
+  transition: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .reveal,
+  .reveal.pending {
+    opacity: 1;
+    transform: none;
+    transition: none;
+  }
+}

components/HomePage.tsx

@@ -1,3 +1,4 @@
+import type { CSSProperties } from "react";
 import type { Metadata } from "next";
 import { SITE_URL, localePath, type Lang } from "@/lib/i18n";
 import { pageMetadata } from "@/lib/seo";
@@ -6,6 +7,7 @@ import { members } from "@/content/people";
 import { contribute, hero, meta, mission, people, principles, projectsIntro, stats } from "@/content/home";
 import { Header } from "./Header";
 import { Footer } from "./Footer";
+import { RevealOnScroll } from "./RevealOnScroll";
 import "./home.css";
 
 export function homeMetadata(lang: Lang): Metadata {
@@ -52,7 +54,7 @@ export function HomePage({ lang }: { lang: Lang }) {
           </div>
         </div>
 
-        <section id="mission">
+        <section id="mission" className="reveal">
           <p className="label">{mission.label[lang]}</p>
           <div className="prose">
             {mission.paragraphs.map((p, i) => (
@@ -62,18 +64,18 @@ export function HomePage({ lang }: { lang: Lang }) {
         </section>
 
         <section id="principles">
-          <p className="label">{principles.label[lang]}</p>
+          <p className="label reveal">{principles.label[lang]}</p>
           <div className="principles">
             {principles.items.map((item, i) => (
-              <div key={i} className="principle">
+              <div key={i} className="principle reveal" style={{ "--d": `${(i % 4) * 0.1}s` } as CSSProperties}>
                 <h3>{item.title[lang]}</h3>
                 <p>{item.text[lang]}</p>
               </div>
             ))}
           </div>
         </section>
 
-        <section id="projects">
+        <section id="projects" className="reveal">
           <p className="label">{projectsIntro.label[lang]}</p>
           <div className="prose">
             {projectsIntro.paragraphs.map((p, i) => (
@@ -87,13 +89,13 @@ export function HomePage({ lang }: { lang: Lang }) {
         </section>
 
         <section id="people">
-          <p className="label">{people.label[lang]}</p>
+          <p className="label reveal">{people.label[lang]}</p>
           <div className="prose two">
-            <p>{people.text[lang]}</p>
+            <p className="reveal">{people.text[lang]}</p>
           </div>
           <div className="members">
-            {members.map((m) => (
-              <article key={m.github} className="member">
+            {members.map((m, i) => (
+              <article key={m.github} className="member reveal" style={{ "--d": `${(i % 3) * 0.1}s` } as CSSProperties}>
                 <div className="who">
                   <img src={`https://github.com/${m.github}.png?size=160`} alt="" width={84} height={84} loading="lazy" />
                   <div>
@@ -111,13 +113,13 @@ export function HomePage({ lang }: { lang: Lang }) {
         </section>
 
         <section id="contribute">
-          <p className="label">{contribute.label[lang]}</p>
+          <p className="label reveal">{contribute.label[lang]}</p>
           <ol className="steps">
             {contribute.steps.map((s, i) => (
-              <li key={i}>{s[lang]}</li>
+              <li key={i} className="reveal" style={{ "--d": `${i * 0.1}s` } as CSSProperties}>{s[lang]}</li>
             ))}
           </ol>
-          <div className="promise">
+          <div className="promise reveal">
             <div>
               <h3>{contribute.promiseTitle[lang]}</h3>
               <ul>
@@ -133,14 +135,15 @@ export function HomePage({ lang }: { lang: Lang }) {
               </p>
             </div>
           </div>
-          <div className="ctas">
+          <div className="ctas reveal">
             <a className="cta" href={NEWCOMER_ISSUES_URL}>{contribute.newcomerIssues[lang]}</a>
             <a className="cta quiet" href={ORG_URL}>{orgOnGitHub[lang]}</a>
           </div>
         </section>
       </main>
 
       <Footer lang={lang} />
+      <RevealOnScroll />
     </div>
   );
 }

components/projects.css

@@ -64,21 +64,11 @@
 .star .n:empty{display:none}
 .star .n::after{content:" · "; font-weight:400; color:var(--muted)}
 
-/* ---------- появление при прокрутке ---------- */
-/* Прячутся только карточки ниже первого экрана (класс .pending ставит RevealOnScroll).
-   Без JS, до загрузки JS и при reduced motion всё видно сразу. */
-.project.reveal{
-  transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1);
-  transition-delay:var(--d,0s);
-}
-.project.reveal.pending{opacity:0; transform:translateY(16px); transition:none}
-
 /* ---------- завершение ---------- */
 .after{padding:64px 0 0}
 .after p{margin:0; font-size:16.5px; max-width:60ch}
 
 @media (prefers-reduced-motion:reduce){
-  .project.reveal,.project.reveal.pending{opacity:1; transform:none; transition:none}
   .status.live::before{animation:none}
   .project,.project .icon{transition:none}
   .project:hover,.project:hover .icon{transform:none}