💡 Nuevo: Ahora puedes activar el modo dibujo desde cualquier página usando el menú flotante en el lado derecho. Incluye Highlighter fino, Marker y Lápiz.
Dibuja directamente sobre la página. Los dibujos se pueden guardar como imagen.
Cómo usar:
🎨 Ahora usando Rough.js para efectos sketch más orgánicos. Haz scroll para ver las animaciones.
💡 Tip: Ajusta el roughness (0-3) para controlar cuán orgánico/irregular es el dibujo.
Creamos herramientas visuales que ayudan a pensar mejor.
Subrayado a lápiz tradicional más sutil y elegante.
Efecto pincel artístico con blur suave.
Highlight al hover
Highlight inmediato sin esperar scroll.
Haz scroll arriba/abajo para ver cómo se repite
Cada vez que este elemento entra en el viewport, la animación se ejecuta de nuevo.
Herramientas visuales para pensar mejor
<DrawAnimation
type="underline"
color="#FFE45C"
duration={1.2}
roughness={1.5} // 0-3, controla irregularidad
>
Texto subrayado
</DrawAnimation><AnimatedHighlight color="#FFE45C" style="marker"> texto destacado </AnimatedHighlight>
<DrawingCanvas
enabled={true}
tool="marker" // marker, pencil, eraser
color="#FFE45C"
onClose={() => setEnabled(false)}
/>
// Marker: roughness 1.5, doble pasada
// Pencil: roughness 0.5, trazo fino