Misty Cabin Light

Background animado em vídeo · loop contínuoIncluído no Pro

Desbloquear com Shibui Pro →

Sobre este background

Uma cabana iluminada em uma floresta enevoada com árvores escuras e um riacho.

Misty Cabin Light é um background animado em vídeo para sites: um loop curto, sem áudio, feito para ficar atrás do conteúdo.

Funciona como fundo de hero em landing page, faixa de destaque entre seções, tela de login ou capa de portfólio. O vídeo não tem áudio e o loop fecha sem corte, então ele roda o tempo todo sem chamar atenção para si — o texto por cima continua sendo o protagonista.

Para manter a leitura, coloque uma camada escura ou clara semitransparente entre o vídeo e o texto e use o pôster (a primeira imagem) enquanto o vídeo carrega no celular.

Como usar

Vídeo solto (HTML)

<video autoplay muted loop playsinline poster="https://media.shibui.build/…" src="https://media.shibui.build/…" style="width:100%;height:100%;object-fit:cover"></video>

Fundo de seção (HTML + CSS)

<section class="hero-bg">
  <video class="hero-bg__video" autoplay muted loop playsinline
    poster="https://media.shibui.build/…"
    src="https://media.shibui.build/…"></video>
  <div class="hero-bg__content">
    <h1>Seu título aqui</h1>
  </div>
</section>

<style>
  .hero-bg { position: relative; isolation: isolate; min-height: 100vh; overflow: hidden; }
  .hero-bg__video { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; }
  .hero-bg__content { position: relative; }
</style>

Código e vídeo em alta para assinantes Shibui Pro

Assine o Shibui Pro para copiar o código com o vídeo original sem marca d'água — junto com os 388 backgrounds do acervo e os 463 prompts de motion.

Desbloquear com Shibui Pro →

Perguntas frequentes

Como colocar o background Misty Cabin Light no meu site?

Copie o código em "Como usar" e cole na seção onde o fundo deve aparecer. O vídeo já está hospedado no CDN do Shibui; você só ajusta o texto que vai por cima.

O vídeo pesa no carregamento da página?

O navegador mostra primeiro o pôster (uma imagem leve) e carrega o vídeo em seguida. Para economizar dados no celular, você pode trocar o autoplay por um pôster estático em telas pequenas.

Posso usar em sites de clientes?

Sim. A licença cobre uso comercial em sites próprios e em projetos entregues a clientes.

Backgrounds parecidos

Ver todos os backgrounds →