Ajoute une couche de micro-animations sur tout le site

Deux courbes partagées dans lib/motion.ts, pour que le CSS et Framer aient le même feeling, et quatre primitives que Tailwind ne sait pas exprimer : reflet de bouton, halo qui suit le curseur, soulignement qui se dessine, secousse d'erreur. Nouveaux composants : Stagger (les collections se distribuent une par une), Spotlight (trouve son parent tout seul, donc les cartes restent des composants serveur), ScrollProgress, BackToTop, Parallax, Spinner, CheckMark. Reveal accepte maintenant une direction. Côté rendu : le trait de nav glisse d'un onglet à l'autre, les cartes se soulèvent, le hero réagit au scroll, les piliers entrent en zig-zag, la lightbox glisse dans le sens demandé et les formulaires répondent. prefers-reduced-motion est respecté partout : Framer coupe via useReducedMotion, le CSS via la media query déjà en place. Le commit embarque aussi la réorganisation des composants par domaine qui était en cours dans l'arbre de travail — les deux étaient trop imbriquées pour être séparées proprement. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
2026-08-02 16:04:41 +02:00
parent 8fd9ca88cc
commit 9b6638eb00
66 changed files with 3938 additions and 1469 deletions
@@ -0,0 +1,97 @@
+import { Section } from "../ui/Section";
+import { SectionHeading } from "../ui/SectionHeading";
+import { ButtonLink } from "../ui/ButtonLink";
+import { Reveal } from "../ui/Reveal";
+import { Stagger, StaggerItem } from "../ui/Stagger";
+import { Logo } from "../ui/Logo";
+import { CountUp } from "../ui/CountUp";
+import { STUDIO } from "@/lib/site";
+import { games } from "@/lib/games";
+import { TEAM } from "@/lib/studio";
+
+/**
+ * Who is behind the game.
+ *
+ * Two columns rather than another full-width text block: the copy on the left,
+ * a brand plate on the right. The figures are counted from the real data, so
+ * the home page cannot claim a team size or a catalogue the rest of the site
+ * contradicts.
+ */
+export function StudioIntro() {
+  const foundingYear = Number(STUDIO.foundingDate);
+
+  const facts = [
+    { value: TEAM.length, from: 0, label: "People" },
+    {
+      value: games.length,
+      from: 0,
+      label: games.length > 1 ? "Worlds in progress" : "World in progress",
+    },
+    // A year counting up from zero reads as a random number for most of the
+    // animation. Rolling the last dozen keeps it legible as a date throughout.
+    { value: foundingYear, from: foundingYear - 12, label: "Founded" },
+  ];
+
+  return (
+    <Section divider>
+      <div className="grid items-center gap-12 lg:grid-cols-[1.1fr_0.9fr] lg:gap-20">
+        <Reveal>
+          <SectionHeading
+            eyebrow="THE STUDIO"
+            title={
+              <>
+                A SMALL TEAM,
+                <br />
+                BIG HORIZONS.
+              </>
+            }
+            lead="We build worlds where every horizon hides a story. Hand-crafted games made to be lived in, not just played through. Each one a different summit, a different climb."
+          />
+
+          {/* The three figures land one after the other, each one starting to
+              count as it arrives — three counters running at once is a slot
+              machine. */}
+          <Stagger
+            as="ul"
+            step={0.12}
+            className="mt-10 grid grid-cols-3 gap-6 border-t border-border pt-8"
+          >
+            {facts.map((fact) => (
+              <StaggerItem as="li" key={fact.label}>
+                <p className="font-display text-3xl tracking-wider text-accent sm:text-4xl">
+                  <CountUp value={fact.value} from={fact.from} />
+                </p>
+                <p className="mt-2 text-[0.65rem] uppercase tracking-[0.2em] text-foreground-muted">
+                  {fact.label}
+                </p>
+              </StaggerItem>
+            ))}
+          </Stagger>
+
+          <div className="mt-10">
+            <ButtonLink href="/studio" variant="outline">
+              MEET THE TEAM
+            </ButtonLink>
+          </div>
+        </Reveal>
+
+        {/* Brand plate. Deliberately not a team photo: only one member has been
+            shot so far, and a single face cannot stand in for the studio. */}
+        <Reveal delay={0.1} direction="right">
+          <div className="group relative isolate flex aspect-[4/3] items-center justify-center overflow-hidden rounded-2xl border border-border bg-surface transition-colors duration-500 hover:border-accent/40 lg:aspect-[4/5]">
+            <div
+              aria-hidden
+              className="absolute inset-0 -z-10 bg-[radial-gradient(60%_60%_at_50%_45%,rgba(196,184,150,0.14),transparent_70%)]"
+            />
+            <Logo
+              variant="wordmark"
+              width={320}
+              alt={STUDIO.name}
+              className="h-auto w-[min(72%,320px)] transition-transform duration-700 ease-out group-hover:scale-[1.03]"
+            />
+          </div>
+        </Reveal>
+      </div>
+    </Section>
+  );
+}