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>
62 lines
2.1 KiB
TypeScript
62 lines
2.1 KiB
TypeScript
import { Reveal } from "../ui/Reveal";
|
||
import { CountUp } from "../ui/CountUp";
|
||
|
||
type Props = {
|
||
/** e.g. "1-6". Rendered as "1–6" with a real en dash. */
|
||
players: string;
|
||
};
|
||
|
||
/**
|
||
* The one number worth shouting.
|
||
*
|
||
* A player count buried in a fact sheet is a specification; at this size it is
|
||
* an argument. Borrowed from the EmberWild site's co-op band — the page needs
|
||
* one moment where the type does the talking instead of a paragraph.
|
||
*/
|
||
export function CoopBand({ players }: Props) {
|
||
const [min, max] = players.split(/[-–]/);
|
||
|
||
// "1-6" counts up to six; a non-numeric range ("2+", "TBA") is printed as
|
||
// written rather than guessed at.
|
||
const maxValue = Number(max);
|
||
const countable = Number.isFinite(maxValue) && maxValue > Number(min);
|
||
|
||
return (
|
||
<section className="relative isolate overflow-hidden border-t border-border px-6 py-20 text-center sm:py-28 lg:px-10">
|
||
<div
|
||
aria-hidden
|
||
className="absolute inset-0 -z-10 bg-[radial-gradient(55%_80%_at_50%_50%,rgba(196,184,150,0.12),transparent_70%)]"
|
||
/>
|
||
|
||
<Reveal direction="scale" duration={0.8}>
|
||
<p className="flex items-center justify-center gap-[0.06em] font-display text-[clamp(4.5rem,14vw,10rem)] leading-[0.82] tracking-wider text-accent">
|
||
<span>{min}</span>
|
||
{max && (
|
||
<>
|
||
<span className="text-[0.4em] text-foreground-muted">–</span>
|
||
{countable ? (
|
||
<CountUp
|
||
value={maxValue}
|
||
from={Number(min)}
|
||
duration={1.1}
|
||
className="tabular-nums"
|
||
/>
|
||
) : (
|
||
<span>{max}</span>
|
||
)}
|
||
</>
|
||
)}
|
||
</p>
|
||
|
||
<h2 className="mt-8 font-display text-2xl uppercase tracking-wider sm:text-3xl">
|
||
Better together
|
||
</h2>
|
||
|
||
<p className="mx-auto mt-4 max-w-[34ch] text-lg leading-relaxed text-foreground-muted">
|
||
Solo works. Six works better. One world, shared by all of you.
|
||
</p>
|
||
</Reveal>
|
||
</section>
|
||
);
|
||
}
|