Mathew
9b6638eb00
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>
31 lines
1.3 KiB
TypeScript
31 lines
1.3 KiB
TypeScript
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>
|
|
);
|
|
}
|