Ajoute une couche de micro-animations sur tout le site
Deploy / deploy (push) Successful in 1m13s

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>
This commit is contained in:
2026-08-02 16:04:41 +02:00
parent 8fd9ca88cc
commit 9b6638eb00
66 changed files with 3938 additions and 1469 deletions
+30
View File
@@ -0,0 +1,30 @@
import { Stagger, StaggerItem } from "../ui/Stagger";
/**
* One sentence, full width, no eyebrow, no button.
*
* The tonal break between the hero and the game showcase: the page stops
* selling for a moment and simply says what the studio is for. The type is
* fluid rather than stepped, and the band carries its own gradient so the
* page is not one uninterrupted flat black from hero to footer.
*
* The two lines arrive separately, a beat apart. It is the only piece of copy
* on the site meant to be read as speech, and the pause between them is the
* point — the second line answers the first.
*/
export function Statement() {
return (
<section className="bg-[linear-gradient(180deg,#0a0a0a_0%,#151515_50%,#0a0a0a_100%)] px-6 py-24 sm:py-36 lg:px-10">
<Stagger step={0.22} className="mx-auto max-w-6xl">
<p className="font-display text-[clamp(1.75rem,1rem+3.2vw,4rem)] leading-[1.12] tracking-wider text-balance text-foreground-muted">
<StaggerItem as="span" className="block">
A game you finish is a game you leave behind.
</StaggerItem>
<StaggerItem as="span" className="block text-foreground">
We build worlds worth staying in.
</StaggerItem>
</p>
</Stagger>
</section>
);
}