Store · Loja de Efeitos
Todos os efeitos

Loja / Fundo / Serra ao Entardecer

Serra ao Entardecer Ultra

Fundo de hero: uma cordilheira gerada na hora corre devagar ao fim da tarde, com neblina, neve nos picos e um sol baixo que o cursor move pelo horizonte.

Ver na loja e baixar

Sobre este efeito

Fundo de hero com uma cordilheira gerada na hora, ao fim da tarde. A serra corre devagar em direção a quem vê, sem fim e sem emenda, porque o terreno é gerado por ruído e nunca repete. Um sol baixo no horizonte ilumina as cristas viradas pra ele, com a luz quente batendo nas encostas e um brilho de contraluz nas bordas; o cursor move o sol pelo horizonte e, sem mouse, ele passeia sozinho num arco lento. As serras de trás somem numa neblina de distância, mais densa nos vales, os picos mais altos têm neve, e o céu tem um degradê que esquenta em volta do sol e estrelas que piscam cada uma no seu tempo. Se quiser, as montanhas ficam em facetas, no estilo low poly. Há um vale no meio da cena, pra o texto do hero ficar sobre céu e neblina, não sobre rocha. Fora da tela, com a aba escondida ou com a preferência de menos movimento, nada é desenhado (com menos movimento fica um quadro parado). Céu, horizonte, rocha, neblina, luz do sol, altura da neve, relevo, velocidade, facetas, estrelas e quanto o cursor move o sol ajustáveis. WebGL sem biblioteca; sem WebGL, fica um céu em degradê.

Ficha

Categoria
Fundo
Onde combina
topo (hero)
Alcance
Área: vive dentro de um bloco da página.
Plano
Exclusivo de quem assina o Ultra (R$ 39,90/mês).
Peso
10 KB de código comprimido. Sem biblioteca externa.
No celular
Leve: usa 15% do processador de um celular intermediário enquanto anima.
Placa de vídeo
Desenha com a placa de vídeo; em celular muito simples a fluidez depende dela.
Na loja desde
26/09/2026

Como colocar no seu site

  1. Criando o site com IA (Claude Code, Codex e parecidas): baixe o kit, extraia na pasta do projeto e cole o pedido pronto que a loja entrega. Não precisa saber programar.
  2. Usando um construtor (Elementor, Shopify, Webflow e outros): a loja mostra o passo a passo de cada um.
  3. Programando: importe o efeito.css e o efeito.js e marque o elemento com a classe fx-serra-ao-entardecer.

Assuntos

  • fundo
  • hero
  • montanha
  • serra
  • paisagem
  • 3d
  • sol
  • entardecer
  • neblina
  • estrelas
  • mouse
  • webgl