← Biblioteca de Componentes

Synthwave Terrain

Paisaje retro de los 80: terreno de grilla neón generado con ruido, sol a franjas y niebla al horizonte. Avance infinito sin recrear geometría.

Three.jsGLSLRetroProcedural
Vista previa — interactivo
Retro Future

Back to
the future

Interfaces con personalidad: estética synthwave, animación fluida y rendimiento de 60 fps.

Mantén pulsado para acelerar

Características

  • Terreno de 168×216 segmentos desplazado con ruido en el vertex shader
  • Valle central plano y montañas que crecen hacia los lados
  • Grilla antialiasada con fwidth, color según la altura
  • Avance infinito: solo se desplaza el muestreo del ruido
  • Sol con franjas animadas, halo aditivo y estrellas
  • Niebla al horizonte que funde el terreno con el cielo

Uso

import SynthwaveTerrain from "@/components/SynthwaveTerrain";

// Copia también la carpeta components/three (escena + utilidades).
// Requiere: npm i three

<section style={{ position: "relative", height: "100vh" }}>
  <SynthwaveTerrain />
  <div style={{ position: "relative", zIndex: 2 }}>
    <h1>Tu contenido</h1>
  </div>
</section>