Seu Portfólio Está Estático Demais? Dê Vida com Vídeo Hover.

Designers e desenvolvedores estão sempre em busca daquele "efeito uau". Sabe quando você entra em um site como o da Netflix ou Apple, passa o mouse sobre um card e ele ganha vida, expandindo e tocando um vídeo?

Isso se chama Interação Estratégica de Vídeo.

Além de ser visualmente impactante, essa técnica economiza espaço de tela e melhora a performance, pois o vídeo só toca quando o usuário demonstra interesse real. E a melhor notícia? No Framer, você faz isso em minutos, sem escrever uma linha de código.

Neste tutorial, vamos replicar essa técnica profissional: um card que, ao receber o mouse (hover), expande sua largura e inicia a reprodução do vídeo automaticamente.

O Conceito: Por que usar "Play on Hover"?

Antes de abrir o Framer, entenda a lógica. Vídeos em autoplay o tempo todo podem deixar o site pesado e caótico. A técnica do Hover resolve isso:

1. Estado Inicial (Default): O vídeo está pausado (ou é apenas uma capa) e ocupa um espaço discreto.

2. Estado Ativo (Hover): O componente expande, ganha destaque sobre os outros elementos e o vídeo começa a tocar.

Isso cria uma experiência de navegação fluida e altamente interativa.

Passo a Passo: Criando o Componente de Vídeo Expansível

Siga este roteiro para criar o efeito exato:

1. A Fundação (O Frame)

Comece desenhando um Frame no seu canvas. Este será o "container" do seu card. Defina um tamanho inicial (por exemplo, 400px de largura por 300px de altura) e estilize como preferir (bordas arredondadas, cor de fundo, etc).

2. Adicionando o Vídeo

• Vá no menu Insert > Media > Video.

• Arraste o vídeo para dentro do seu Frame.

• O Truque do Posicionamento: Defina a posição do vídeo como Absolute.

• Centralize o vídeo no meio do componente e defina uma largura fixa (ex: 800px).

  • Por que 800px se o frame tem 400px? Porque queremos que o vídeo já esteja grande "escondido" (usando Overflow: Hidden no frame pai) ou pronto para revelar sua qualidade total quando expandir.

3. Transformando em Componente

Selecione o Frame principal, clique com o botão direito e escolha Create Component. Isso é essencial para criarmos os estados de interação.

4. Criando a Variante Hover (A Mágica)

Agora, dentro do editor de componentes:

1. Clique em + Variant para criar um novo estado. O Framer nomeará automaticamente como "Hover" se você conectar a interação, ou você pode nomear manualmente.

2. Na Variante 1 (Default): Certifique-se de que a propriedade de reprodução do vídeo esteja em Paused (Pausado) ou que a opacidade esteja baixa, se preferir.

3. Na Variante 2 (Hover):

   • Aumente a largura do Frame principal (ex: de 400px para 800px).

   • Mude a propriedade do vídeo para Playing (Reproduzindo).

   • Ajuste o Z-Index para garantir que, ao expandir, ele fique por cima dos outros elementos vizinhos.

5. Refinando a Transição

Para não ficar um movimento seco, vá nas configurações de transição entre as variantes e escolha o tipo Spring. Ajuste para uma tensão suave (ex: Stiffness 120, Damping 20). Isso fará o vídeo "crescer" organicamente.

Dicas Pro para Performance e UX

Para garantir que seu efeito seja nota 10:

• Mute é Obrigatório: Sempre configure o vídeo para iniciar Muted (mudo). Autoplay com som é uma das piores experiências de usuário na web e os navegadores costumam bloquear.

• Poster Image: Adicione uma imagem de capa (Poster) ao vídeo. Assim, enquanto ele não carrega ou está no estado pausado, o usuário vê uma imagem de alta qualidade em vez de uma tela preta.

• Otimização: Use vídeos curtos e otimizados (formato MP4 ou WebM). Vídeos muito pesados demoram para iniciar no hover, quebrando a sensação de "instantaneidade".

Conclusão

O Framer democratizou interações que antes exigiam Javascript avançado. Com essa técnica simples de variantes e posicionamento absoluto, você transforma uma galeria de vídeos monótona em uma experiência imersiva.

O segredo do design moderno não é a complexidade, é a interatividade intencional.

Abra seu projeto, teste esse componente e veja como o tempo de permanência no seu site vai aumentar.

FAQ - Perguntas Frequentes

O vídeo precisa ser hospedado no YouTube ou Vimeo? Para este efeito específico de expansão suave, o ideal é fazer o upload do vídeo direto no Framer (MP4) ou usar um link direto. Embeds de YouTube/Vimeo muitas vezes têm iframes que demoram para carregar e não respondem bem a mudanças rápidas de tamanho.

Como faço para o vídeo voltar ao início quando tiro o mouse? Nas propriedades do vídeo dentro da variante "Default" (estado inicial), certifique-se de que ele não esteja em "Loop" e teste as configurações de reset. No entanto, o comportamento padrão nativo muitas vezes é pausar onde parou.

Isso funciona no celular (Mobile)? Em dispositivos móveis não existe "Hover" (passar o mouse). O Framer geralmente converte a interação de Hover para "Tap" (toque) automaticamente, ou você pode criar uma variante específica para mobile onde o vídeo toca ao entrar na tela (Scroll) ou ao clicar.