← Biblioteca de Componentes

Ink Drop

Manchas de tinta que se expanden al mover el cursor, con ondas de ripple y blend mode multiply para mezcla realista de colores sobre papel.

Vista previa — mueve el cursor y haz clic
Fullstack Developer & AI

Juan Camilo
Salazar Restrepo

Desarrollo aplicaciones web y soluciones con inteligencia artificial que impulsan negocios al siguiente nivel.

Características

  • Fondo papel crema — las manchas persisten como tinta real
  • globalCompositeOperation: multiply para mezcla de pigmentos
  • 3 ondas de ripple concéntricas por cada gota
  • Crecimiento con deceleración física (grow *= 0.978)
  • Clic genera 4 gotas simultáneas con dispersión
  • 7 colores de tinta: índigo, morado, azul petróleo, rojo, verde, violeta, café

Uso

import InkDrop from "@/components/InkDrop";

// Fondo claro recomendado para efecto multiply
<div style={{ position: "relative", height: "100vh",
  background: "#faf8f5" }}>
  <InkDrop />
  <div style={{ position: "relative", zIndex: 2 }}>
    <h1 style={{ color: "#1a1a2e" }}>Tu contenido</h1>
  </div>
</div>