Dark Portfolio Hero
Estilo Dark Portfolio com loading screen animado, vídeo HLS, GSAP animations e gradient accent azul. Ideal para portfólios de desenvolvedores, designers e criativos fullstack.
Uso: Portfólios de desenvolvedores, Designers criativos, Freelancers fullstack, Sites pessoais premium
Contexto Histórico
Representa o ápice dos portfólios pessoais premium, combinando loading screens cinematográficos, GSAP animations, vídeo HLS e micro-interações sofisticadas.
Especificações Técnicas
Cores
Primárias
Secundárias
Efeitos
VÍDEO: Stream HLS (~17s loop) com animação abstrata de fluido escuro. Ondas e gradientes orgânicos em tons de azul marinho profundo (#1a2a4a) e preto, com movimento suave e contínuo sem texto ou objetos. Aspect ratio ~2:1 (332x160px storyboard). Overlay preto 20% sutil e gradient fade inferior (h-48 from bg to transparent) fundem o vídeo no fundo #0a0a0a da página. Cria atmosfera contemplativa e premium para o portfólio. | EFEITOS CSS: Loading screen animado (2.7s): contador 000→100 via requestAnimationFrame, palavras rotativas (Design→Create→Inspire) com AnimatePresence, barra de progresso gradiente azul com glow, fade-out 0.6s. Hero com vídeo HLS de fundo (fluid/wave dark blue), overlay preto 20%, gradient fade inferior h-48. Pill navbar flutuante com logo gradiente azul ring 36x36px, links pill active state, botão Say hi com gradient border hover. Headline massiva Instrument Serif italic com GSAP entrance (y 50→0, 1.2s). Role cycling a cada 2s com fade-in. Scroll indicator com dot animado translateY loop 1.5s. Botões CTA com gradient border hover technique
Light/Dark
✗ Not Recommended / ✓ Full
Relacionados
Última sincronização: 01/04/2026