diff --git a/README.md b/README.md index 952bd66..bea3325 100644 --- a/README.md +++ b/README.md @@ -47,11 +47,23 @@ O número "Mais de X projetos desenvolvidos" no topo da home vem da API do GitHu Para incluir os privados, defina `GITHUB_STATS_TOKEN` no ambiente de build e de execução (não use o prefixo `NEXT_PUBLIC_`). O token deve ser um [fine-grained personal access token](https://github.com/settings/personal-access-tokens/new) com acesso a todos os repositórios da conta e uma única permissão, **Metadata: Read-only**. Sem o token, ou se a consulta falhar, o número simplesmente não aparece. -## Vídeos dos projetos +## Vitrine de vídeos dos projetos -Cada card de projeto da home mostra um vídeo curto, em loop e sem áudio, da página rolando em velocidade constante. Os arquivos ficam em `public/videos//` (`desktop` em WebM, MP4 e poster WebP, até 3 MB cada vídeo, mais a versão `mobile`) e são ligados aos cards em `lib/project-videos.ts`. +Cada projeto com site gravado aparece de três formas na seção Projetos da home. Tudo mora em `app/components/showcase/`, os dados em `lib/project-showcase.ts` e os estilos em `showcase.css`. -Em `app/components/ProjectVideo.tsx`, o vídeo só começa a ser baixado quando o card entra na tela (IntersectionObserver), pausa ao sair, e quem tem `prefers-reduced-motion` vê só o poster. Para gravar ou regravar um projeto, use `scripts/record-project-videos.mjs` (as instruções de instalação do Playwright e do ffmpeg estão no cabeçalho do script). +- **Cards.** O vídeo de rolagem fica numa moldura de navegador com o endereço real do site. Só um vídeo toca por vez: o do card sob o mouse (ou com foco) e, sem mouse, o mais perto do centro da tela. Nada é baixado até o card tocar pela primeira vez, e um botão pausa os vídeos que se mexem sozinhos. Clicar na moldura abre o vídeo ampliado (`` nativo, com troca computador/celular que mantém o ponto do site, capítulos clicáveis e controles próprios). +- **Vitrine animada.** Logo abaixo dos cards, uma cena presa na rolagem (`position: sticky`) em que o site de cada projeto rola dentro de um notebook, com um celular ao lado, conforme o visitante rola a página. Os capítulos de cada projeto (`chapters` em `lib/project-showcase.ts`, marcados nos quadros dos vídeos) nomeiam o trecho na tela e mantêm notebook e celular no mesmo ponto do site. Só o projeto em cena e os vizinhos baixam vídeo, e nada baixa com "economizar dados" ligado. Com `prefers-reduced-motion` ou sem JavaScript ela some e os cards continuam mostrando os posters. +- **Capa de compartilhamento.** `/cases/` usa o poster do projeto como fundo da imagem Open Graph (`lib/og-card.tsx`), quando existe. + +Arquivos de cada projeto em `public/videos//`: + +| Arquivo | Para quê | +| --- | --- | +| `desktop.{webm,mp4,webp}` e `mobile.{webm,mp4,webp}` | cards e vídeo ampliado (até 3 MB cada vídeo) | +| `scrub-desktop.mp4` e `scrub-mobile.mp4` | vitrine animada: quadro-chave a cada 6 quadros, sem B-frames, para o tempo mudar a cada quadro da rolagem | +| `og.jpg` | capa 1200x630 de compartilhamento | + +Para gravar ou regravar um projeto, use `scripts/record-project-videos.mjs`; para gerar os `scrub-*.mp4`, `scripts/encode-scrub-video.mjs` (as instruções de instalação do Playwright e do ffmpeg estão no cabeçalho de cada script). Depois de gravar, marque os capítulos do projeto em `lib/project-showcase.ts`. ## Stack diff --git a/scripts/encode-scrub-video.mjs b/scripts/encode-scrub-video.mjs new file mode 100644 index 0000000..a6a3130 --- /dev/null +++ b/scripts/encode-scrub-video.mjs @@ -0,0 +1,101 @@ +/** + * Recodifica um vídeo para a vitrine animada, em que o tempo do vídeo muda a cada quadro da rolagem. + * Para a busca ser instantânea o vídeo precisa de um quadro-chave a cada 6 quadros e nenhum B-frame; o tamanho + * de cada arquivo fica em até 3 MB (sobe o CRF e, se preciso, reduz a imagem até caber). + * + * ffmpeg-static não é dependência do site: instale-o numa pasta temporária e rode o script a partir dela + * (as dependências são resolvidas a partir da pasta onde o comando foi executado): + * + * mkdir rec && cd rec && npm init -y && npm i ffmpeg-static + * node /scripts/encode-scrub-video.mjs --in desktop-original.mp4 --out /public/videos//scrub-desktop.mp4 --size 1120x700 + * node /scripts/encode-scrub-video.mjs --in mobile-original.mp4 --out /public/videos//scrub-mobile.mp4 --size 390x844 + * + * Use como entrada o vídeo de melhor qualidade que existir (a entrada de record-project-videos.mjs antes do corte + * para MP4/WebM), não os MP4 já comprimidos de public/videos. + * + * A capa de compartilhamento (og.jpg, 1200x630) sai do poster desktop: + * ffmpeg -i public/videos//desktop.webp -vf "scale=1200:750:flags=lanczos,crop=1200:630:0:0" -q:v 4 public/videos//og.jpg + */ +import { spawnSync } from "node:child_process"; +import { statSync } from "node:fs"; +import { createRequire } from "node:module"; +import { join } from "node:path"; + +const require = createRequire(join(process.cwd(), "noop.js")); +const ffmpegPath = require("ffmpeg-static"); + +const args = Object.fromEntries( + process.argv.slice(2).reduce((acc, cur, i, all) => { + if (cur.startsWith("--")) acc.push([cur.slice(2), all[i + 1]]); + return acc; + }, []), +); +const { in: input, out: output } = args; +const [width, height] = (args.size ?? "1120x700").split("x").map(Number); +const MAX_BYTES = Number(args["max-mb"] ?? 3) * 1024 * 1024; + +if (!input || !output || !width || !height) { + console.error( + "uso: --in