Dark Rocks Falling

Background animado em vídeo · loop contínuoGratuito

Abrir MP4

Sobre este background

Rochas escuras e irregulares caem em um fundo claro e suave com pequenos pontos de luz.

Dark Rocks Falling é 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/tpl-covers/backgrounds/master-udkqmgmu7o-07d0d448.jpg" src="https://media.shibui.build/tpl-videos/backgrounds/master-udkqmgmu7o-07d0d448.mp4" 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/tpl-covers/backgrounds/master-udkqmgmu7o-07d0d448.jpg"
    src="https://media.shibui.build/tpl-videos/backgrounds/master-udkqmgmu7o-07d0d448.mp4"></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>

Perguntas frequentes

Como colocar o background Dark Rocks Falling 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 →