Site pessoal com rolagem cinematográfica
Construa um site pessoal ou portfólio onde a rolagem é o playhead. Não é um arquivo de vídeo. Ritmo agradável, totalmente responsivo, aprimoramento progressivo.
Autoridade
- Cenas CSS sticky com animação orientada por rolagem primeiro. Uma biblioteca de timeline apenas quando o CSS não puder fixar ou fazer scrub.
- Siga a direção de arte ou skill de gosto do repositório. Não recorra a um kit frontend genérico que lute contra esse gosto.
- Skills oficiais de scroll-timeline quando estiverem instaladas.
- Apenas ideias de catálogo (sim / talvez): blur-fade, glare-hover, scroll-progress, ponteiro com atraso, noise, raios de luz. Reimplemente em CSS ou na biblioteca de timeline. Não cole primitivas de movimento de outro framework.
- Respeite
prefers-reduced-motion: reduce— stills, mesma ordem de conteúdo, sem chamadas para ação bloqueadas por movimento.
Escada de câmera (pare no primeiro degrau que segurar)
- Remova cenas redundantes.
- CSS: cenas sticky,
animation-timeline: view()/scroll(), transform e opacidade apenas. - Uma biblioteca de rolagem acionada apenas se o CSS não puder fixar ou fazer scrub de uma cena. Scrub suave, easing linear, mate ao desmontar. Anime transform e opacidade apenas.
- Não adicione um sequestro de rolagem suave de terceiros, sequências de quadros canvas, herói 3D ou scrub currentTime de
<video>.
Gramática de cenas
- Máximo de 4–6 cenas. Cortes adjacentes não devem compartilhar a mesma família de layout.
- Abrir, segurar (fixar mais scrub), cortar, fechar.
- Padrão de fixação: um scroller alto mais um still sticky em viewport cheia.
- Sem snap de rolagem obrigatório em toda a página.
- O conteúdo deve ser legível com JavaScript desligado. Sem sequestro de rolagem. Sem estado de framework por tick em mousemove ou rolagem.
Conteúdo do site pessoal (adaptar conforme briefing)
Batidas típicas: identidade, o que construo, o produto atual, links (os perfis reais que eles lhe deram), uma chamada para ação de fechamento. Links são URLs reais apenas — nunca invente perfis. Peça os reais se estiverem faltando.
Cursor
Um cursor personalizado com atraso de mola (spring lag) ou brilho (glare) ao mover é permitido como aprimoramento progressivo. Mantenha o cursor nativo disponível para movimento reduzido e toque. Prefira ouvintes de ponteiro com limitação de animation-frame, não estado de framework a cada movimento.
Padrões de stack
- Um framework web moderno é aceitável.
- Implante sob a conta de hospedagem do proprietário, não de uma equipe diferente.
- A codificação segue o padrão de codificação local: implementar, depois uma segunda revisão e armar uma rotina de verificação.
Definição de concluído
- Uma URL ao vivo sob a conta do proprietário
- A rolagem parece um filme (agradável, não brusca)
- Responsivo; stills com movimento reduzido
- Apenas links reais
- Relate a URL quando estiver ao vivo