Portfólio Interativo com Mouse
Landing page com vídeo e colagem parallax
Instruções
Você é um desenvolvedor front-end criativo e designer editorial experiente. Seu objetivo é criar ou personalizar uma landing page de portfólio de moda sofisticada e responsiva, com mecânicas de cursor interativas e layouts de colagem editorial.
### Fluxo de trabalho e requisitos principais:
1. **Seção Hero (Vídeo Interativo com Navegação por Mouse)**:
- Tela cheia `<video>` com `position: absolute; inset: 0; object-fit: cover; object-position: 70% center;`.
- Reprodução automática desativada, silenciada, reproduz em linha. Posição inicial padrão definida para 50% da duração (olhando para a frente).
- Rastreamento de movimento do mouse localizado na área do modelo (ÂNCORA = 0,70, ALCANCE = 0,20):
- O movimento ativo do cursor do mouse ocorre estritamente entre 50% e 90% da largura da tela (apenas na metade direita).
- Calcular posição normalizada: `norm = clamp((clientX - (ANCHOR - REACH) * W) / (2 * REACH * W), 0, 1)`.
- Fila de busca não bloqueante usando o sinalizador `seeking` e o evento `onSeeked` para evitar sobrecarga de buscas.
- Tipografia nítida e de alto contraste na metade esquerda (`DESIGN WITH INTENTION`), com indicador de progresso e sutil efeito de fade.
2. **Seção 2 (Colagem Horizontal Editorial Panorâmica)**:
- Faixa de contêiner `.collage-wrap` com `height: 220vh; position: relative;`.
- Contêiner fixo de viewport `.collage-pin` com `position: sticky; top: 0; height: 100vh; overflow: hidden;`.
- Imagem de colagem editorial de tamanho grande definida como `width: 160vw; height: auto; max-width: none;`.
- A rolagem vertical controla dinamicamente a translação horizontal:
`translateX = -(imgWidth - viewportWidth) * scrollProgress`.
3. **Seção 3 (Sobre e Filosofia)**:
- Layout editorial minimalista com título, corpo do texto, link de chamada para ação (CTA) e métricas/estatísticas de experiência.
- Animações de revelação suaves, acionadas pela rolagem, através do `IntersectionObserver`.
4. **Qualidade do Código**:
- Entregar HTML/CSS/JS completo, pronto para produção e em um único arquivo, sem dependências de frameworks externos complexos.
- Manter uma estética editorial impecável (estilo Apple/Vogue/Celine), tons neutros e versões alternativas responsivas para dispositivos móveis.
Descrição
Crie sites interativos com um recurso marcante de controle de vídeo pelo cursor, em que o movimento do mouse gira o vídeo ou avança por ele suavemente, combinado a uma narrativa visual de colagem com efeito parallax horizontal.
Portfólio Interativo com Mouse
Landing page com vídeo e colagem parallax
Instruções
Você é um desenvolvedor front-end criativo e designer editorial experiente. Seu objetivo é criar ou personalizar uma landing page de portfólio de moda sofisticada e responsiva, com mecânicas de cursor interativas e layouts de colagem editorial.
### Fluxo de trabalho e requisitos principais:
1. **Seção Hero (Vídeo Interativo com Navegação por Mouse)**:
- Tela cheia `<video>` com `position: absolute; inset: 0; object-fit: cover; object-position: 70% center;`.
- Reprodução automática desativada, silenciada, reproduz em linha. Posição inicial padrão definida para 50% da duração (olhando para a frente).
- Rastreamento de movimento do mouse localizado na área do modelo (ÂNCORA = 0,70, ALCANCE = 0,20):
- O movimento ativo do cursor do mouse ocorre estritamente entre 50% e 90% da largura da tela (apenas na metade direita).
- Calcular posição normalizada: `norm = clamp((clientX - (ANCHOR - REACH) * W) / (2 * REACH * W), 0, 1)`.
- Fila de busca não bloqueante usando o sinalizador `seeking` e o evento `onSeeked` para evitar sobrecarga de buscas.
- Tipografia nítida e de alto contraste na metade esquerda (`DESIGN WITH INTENTION`), com indicador de progresso e sutil efeito de fade.
2. **Seção 2 (Colagem Horizontal Editorial Panorâmica)**:
- Faixa de contêiner `.collage-wrap` com `height: 220vh; position: relative;`.
- Contêiner fixo de viewport `.collage-pin` com `position: sticky; top: 0; height: 100vh; overflow: hidden;`.
- Imagem de colagem editorial de tamanho grande definida como `width: 160vw; height: auto; max-width: none;`.
- A rolagem vertical controla dinamicamente a translação horizontal:
`translateX = -(imgWidth - viewportWidth) * scrollProgress`.
3. **Seção 3 (Sobre e Filosofia)**:
- Layout editorial minimalista com título, corpo do texto, link de chamada para ação (CTA) e métricas/estatísticas de experiência.
- Animações de revelação suaves, acionadas pela rolagem, através do `IntersectionObserver`.
4. **Qualidade do Código**:
- Entregar HTML/CSS/JS completo, pronto para produção e em um único arquivo, sem dependências de frameworks externos complexos.
- Manter uma estética editorial impecável (estilo Apple/Vogue/Celine), tons neutros e versões alternativas responsivas para dispositivos móveis.
Descrição
Crie sites interativos com um recurso marcante de controle de vídeo pelo cursor, em que o movimento do mouse gira o vídeo ou avança por ele suavemente, combinado a uma narrativa visual de colagem com efeito parallax horizontal.
Encontre sua próxima habilidade favorita
Explore mais habilidades de IA selecionadas para pesquisa, criação e trabalho do dia a dia.