Spotlight Reveal

Spotlight Reveal: cómo crear un foco orgánico sobre interfaces complejas

Hace no tanto, esto era de esas cosas que ves y piensas: “ojalá saber hacer esto”.
Como alguien centrado en UI/UX y visual branding, el creative coding siempre me ha llamado mucho… pero también lo veía lejos. Demasiado técnico, demasiada documentación, poca conexión con lo visual.

Ahora eso ha cambiado bastante.

Hoy puedes pasar de la idea a algo real sin tragarte horas infinitas de docs. Este efecto, por ejemplo, no es teoría: lo he podido replicar, entender y ajustar a mi manera en muy poco tiempo.

La lógica detrás del efecto: capas y máscaras

Aquí no hay magia rara. Va de controlar lo que el usuario percibe.

El efecto se construye con tres capas muy claras:

• UI nítida
  Un dashboard fintech en HTML/CSS y SVG, limpio y bien definido.
• UI con blur
  La misma interfaz duplicada, pero con desenfoque por encima.
• Canvas como máscara
  Un <canvas> negro que “recorta” un agujero usando destination-out, dejando ver la capa nítida justo donde está el cursor.

Lo que marca la diferencia: la forma orgánica

Si haces un círculo perfecto, queda frío. Mecánico.

Para evitar eso, el borde del foco se deforma con noise sinusoidal con varios armónicos.
El resultado: una forma irregular que se mueve sutilmente en el tiempo. No se repite. Se siente viva.

Y aquí vienen dos detalles que elevan mucho el resultado:

• Borde suave
  Nada de corte duro. Uso varias capas de opacidad decreciente para que la transición sea progresiva y más natural.
• Inercia (lerp)
  El foco no sigue el ratón al instante. Va un poco por detrás, con una interpolación suave.
  Ese pequeño delay le da peso, lo hace más elegante.

De idea a código

Lo interesante de todo esto es que ya no tienes que pelearte con cada línea de código.

Puedes centrarte en la lógica visual —en lo que quieres conseguir— y dejar que la IA te genere la base. Luego ajustas.

Si quieres replicarlo, este sería el tipo de prompt que funciona bien:

Prompt:

Crea una animación en canvas HTML/JS con un efecto spotlight reveal sobre una UI fintech en dark mode.

Estructura:

• UI nítida (fondo navy #010408)
• UI duplicada con blur
• Canvas negro que actúa como máscara

El spotlight debe:

• Tener forma orgánica (no circular) usando noise sinusoidal con varios armónicos
• Animarse constantemente, aunque el ratón no se mueva
• Tener borde suave (transición progresiva)
• Mantener algo de opacidad dentro del área revelada
• Incluir un glow azul con movimiento suavizado (lerp)

La UI debe incluir:

• Sidebar con iconos
• Balance + gráfico de barras en SVG
• Lista de transacciones
• Cards de mercado con sparklines
• Donut chart de portfolio

Todo en HTML/CSS/SVG puro, sin librerías externas.

Añadir controles para ajustar:

• Radio del foco
• Blur
• Organicidad
• Opacidad
• Intensidad del glow

Conclusión

Este tipo de experimentos marcan un cambio bastante claro:
pasar de ver cosas que molan… a poder construirlas tú mismo.

Para mí, va justo de eso:
traducir una idea visual en algo interactivo, rápido, sin fricción.

Y, sobre todo, sin quedarte en el “algún día lo haré”.

‍