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:
@@ -0,0 +1,39 @@
|
||||
import Image from "next/image";
|
||||
import { BRAND } from "@/lib/site";
|
||||
|
||||
type Props = {
|
||||
/** `mark` = mountain only, `wordmark` = mountain + studio name. */
|
||||
variant?: "mark" | "wordmark";
|
||||
/** Rendered width in px. Height is derived from the file's real ratio. */
|
||||
width?: number;
|
||||
priority?: boolean;
|
||||
className?: string;
|
||||
/** Decorative by default — pass a label when the logo carries meaning. */
|
||||
alt?: string;
|
||||
};
|
||||
|
||||
/**
|
||||
* Renders a brand asset at the correct aspect ratio.
|
||||
* Previously the 1344×768 mark was hard-coded as 36×36, 120×80, 180×120…
|
||||
* in six different files, which squashed the mountain differently each time.
|
||||
*/
|
||||
export function Logo({
|
||||
variant = "mark",
|
||||
width = 40,
|
||||
priority = false,
|
||||
className = "",
|
||||
alt = "",
|
||||
}: Props) {
|
||||
const asset = BRAND[variant];
|
||||
|
||||
return (
|
||||
<Image
|
||||
src={asset.src}
|
||||
alt={alt}
|
||||
width={width}
|
||||
height={Math.round((width * asset.height) / asset.width)}
|
||||
priority={priority}
|
||||
className={className}
|
||||
/>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user