← Biblioteca de Componentes

Flow Ribbons

Cintas 3D que fluyen y se retuercen sobre sí mismas con un degradado atardecer. Movimiento hipnótico, ideal para marcas creativas y agencias.

Three.jsGLSLAbstractoInteractivo
Vista previa — interactivo
Creative Studio

Diseño que
fluye y emociona

Identidades digitales con movimiento, color y una dirección de arte que se recuerda.

Pasa el cursor para atraer las cintas

Características

  • 9 cintas con 360 segmentos cada una, todas animadas en GPU
  • Línea central con ondas superpuestas y torsión a lo largo del recorrido
  • Normales calculadas en el shader para iluminación de doble cara
  • Degradado atardecer por cinta + brillo especular y fresnel
  • Rayado fino tipo tela técnica y extremos desvanecidos
  • El cursor atrae suavemente las cintas cercanas

Uso

import FlowRibbons from "@/components/FlowRibbons";

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

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