← Biblioteca de Componentes

Holo Globe

Globo holográfico de puntos con continentes procedurales, atmósfera fresnel y arcos de datos que viajan entre ciudades. Ideal para SaaS, fintech y productos globales.

Three.jsGLSLData vizProcedural
Vista previa — interactivo
Global Scale

Conecta tu negocio
con el mundo

Infraestructura y software que operan en cualquier país, en tiempo real y sin fricción.

Mueve el cursor para girar el globo

Características

  • Continentes procedurales con PRNG con semilla: siempre el mismo mapa
  • Miles de puntos sobre una esfera de Fibonacci con parpadeo individual
  • Puntos de la cara oculta atenuados según la normal en espacio de vista
  • Atmósfera fresnel aditiva (BackSide) alrededor del globo
  • 16 arcos Bézier con un paquete de luz que recorre cada conexión
  • Anillos que laten en los extremos de cada arco

Uso

import HoloGlobe from "@/components/HoloGlobe";

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

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