El cursor personalizado es el equivalente digital de la puerta de un Bentley: pequeño, sutil, y transmite "premium" antes de que hables.
Cuándo usarlo - **Portfolios y agencias**: casi obligatorio en 2026. - **Landings de producto premium**: potencia percepción de valor. - **Sitios editoriales**: bonito si es sutil. - **NUNCA en ecommerce transaccional** — confunde el pointer natural.
Cómo hacerlo bien 1. **Tamaño**: 8–16px de diámetro. Más grande estorba. 2. **Mix blend mode**: `mix-blend-mode: difference` para inversión automática de color. 3. **Follow suave**: interpolación con Framer Motion o GSAP, no snap directo. 4. **Estados**: crece 2–3x al hover en enlaces y CTAs. 5. **Oculta el cursor nativo**: `cursor: none` en `html`. 6. **Desactivar en mobile**: media query `(pointer: fine)`. 7. **Fallback**: mantén cursor nativo si prefers-reduced-motion.
El costo oculto Un cursor mal hecho lagea. Usa `transform` (no top/left) y `will-change: transform`. Sin esto, degradas Web Vitals.
Ejemplo mínimo Un div fijo, `position: fixed`, mix-blend-mode difference, se posiciona con transform en cada mousemove, con lerp de 0.15 para suavidad. Total: 40 líneas incluyendo estados hover.
Sencillo, elegante, memorable.
R
Rayden Gonzalez
Diseño y construyo sitios web premium para negocios que quieren vender de verdad.