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>
40 lines
1.3 KiB
JavaScript
40 lines
1.3 KiB
JavaScript
// Derives a transparent wordmark from `Full Logo.png`.
|
|
//
|
|
// The source file has an opaque pure-black (#000000) plate, which shows up as
|
|
// a visible rectangle on the site background (#0a0a0a). The logo is two-tone
|
|
// (cream on black), so its luminance can be reused directly as an alpha mask.
|
|
//
|
|
// Run with: node scripts/build-wordmark.mjs
|
|
|
|
import sharp from "sharp";
|
|
import { resolve } from "node:path";
|
|
|
|
const ROOT = resolve(import.meta.dirname, "..");
|
|
const SOURCE = resolve(ROOT, "public/image/Studio/Full Logo.png");
|
|
const OUT = resolve(ROOT, "public/image/Studio/Wordmark.png");
|
|
|
|
const INK = { r: 232, g: 223, b: 204 }; // --foreground
|
|
|
|
const { width, height } = await sharp(SOURCE).metadata();
|
|
|
|
// Luminance of the source becomes the alpha channel.
|
|
const alpha = await sharp(SOURCE).greyscale().raw().toBuffer();
|
|
|
|
const tinted = await sharp({
|
|
create: { width, height, channels: 3, background: INK },
|
|
})
|
|
.joinChannel(alpha, { raw: { width, height, channels: 1 } })
|
|
.png()
|
|
.toBuffer();
|
|
|
|
// Drop the empty margins so the asset can be sized predictably.
|
|
const trimmed = await sharp(tinted)
|
|
.trim({ threshold: 2 })
|
|
.png({ compressionLevel: 9 })
|
|
.toBuffer();
|
|
|
|
const meta = await sharp(trimmed).metadata();
|
|
await sharp(trimmed).toFile(OUT);
|
|
|
|
console.log(`Wordmark.png: ${meta.width}x${meta.height}, ${trimmed.length} bytes`);
|