Volver al Blog
Tutorial

Pinceles de Efectos: Neón, Resplandor y Destellos — Iluminación Mágica en Brinimate

Domina los tres pinceles de Efectos de Brinimate — Neón, Resplandor y Destellos/Brillo. Aprende cómo el shadowBlur crea simulación de luz real y cómo usarlos para animaciones cyberpunk, mágicas y de fantasía.

L

LuisOA

Equipo Brinimate

Pinceles de Efectos: Iluminación en Tiempo Real en Vector

Los tres pinceles de Efectos en Brinimate utilizan una técnica que ninguna otra categoría de pinceles emplea: renderizado nativo de shadowBlur. Esta función de la API Canvas2D desenfoca la sombra de un trazo, creando una emisión de luz suave que genuinamente parece una fuente de luz — no es un filtro, no es una importación, se renderiza en vivo por la GPU del navegador.


🌟 Neón — El Letrero de Club

Perfil técnico: opacidad: 92%, widthFactor: 1, shadowBlur: 2.5×anchura, shadowOpacity: 85%, tension: 0.4

El pincel Neón renderiza un trazo central nítido con un halo de brillo amplio y brillante. El color de la sombra (brillo) coincide exactamente con el color del trazo, y con 2.5× la anchura del trazo, crea la impresión visual de un tubo de neón real: un centro brillante con una amplia aura luminosa.

Mejor para:

  • Letreros y texto en ciudades cyberpunk.
  • Animaciones de interfaces sci-fi con elementos de UI brillantes.
  • Tarjetas de título y revelaciones de logos usando texto brillante.
  • Fuentes de luz en escenas nocturnas: farolas, pantallas, faros de automóviles.

El truco del fondo negro: En un lienzo blanco, el Neón se lee como un trazo de color brillante. Cambia el relleno del fondo del lienzo a un color muy oscuro y los trazos de Neón se transforman inmediatamente en letreros luminosos convincentes. Los mismos objetos vectoriales, atmósfera completamente diferente.

Combinación de Texto + Neón (del manual): Dibuja objetos de texto, luego superpón trazos del pincel Neón a lo largo de las formas de las letras para un impresionante efecto de animación de texto brillante. Usa el tween para animar el brillo pulsando hacia dentro y hacia fuera variando la anchura del trazo.


✨ Resplandor — La Fuente de Luz Suave

Perfil técnico: opacidad: 75%, widthFactor: 1.5, shadowBlur: 5×anchura, shadowOpacity: 60%

El Resplandor es más ancho y suave que el Neón. Con un desenfoque de sombra de 5× (el doble que el Neón), crea un halo luminoso amplio y gentil en lugar de un tubo de neón ajustado. La opacidad reducida (75%) y la opacidad de sombra (60%) lo hacen menos agresivo — se mezcla más naturalmente con la escena circundante.

Mejor para:

  • Auras mágicas alrededor de personajes u objetos.
  • Efectos de destellos suaves para escenas de hadas o fantasía.
  • Derrame de luz al amanecer/atardecer en elementos del paisaje.
  • Efectos de energía: brillos de power-up, campos de fuerza, círculos mágicos.

La técnica de la “diosa”: Dibuja el contorno de un personaje en Normal/blanco. Usa el pincel Resplandor para añadir un brillo exterior grueso trazado a lo largo del mismo contorno. El trazo Normal original proporciona la estructura nítida; el Resplandor añade la emanación divina.


💎 Destellos (Brillo) — Puntos de Luz Dispersos

Perfil técnico: opacidad: 90%, widthFactor: 0.4, dash: [0, w*3.5], shadowBlur: 1.5×anchura, shadowOpacity: 100%

Los Destellos son mecánicamente el pincel de Efectos más interesante. Usa un patrón de guiones de [0, w*3.5] — un segmento de longitud cero con un espacio muy grande. Esto significa que el trazo se renderiza como puntos aislados individuales espaciados a lo largo del path, no como una línea continua en absoluto.

Cada punto es muy pequeño (0.4× anchura), tiene 100% de shadowOpacity y un shadowBlur nítido — creando la impresión de una pequeña fuente de luz brillante en cada punto. Arrastra por el lienzo y obtienes un rastro de puntos de luz centelleantes.

Mejor para:

  • Efectos mágicos: polvo de hadas, lanzamiento de hechizos, rastros de pixies.
  • Animaciones de brillo y confeti.
  • Campos de estrellas y fondos de nebulosas espaciales.
  • Efectos de celebración: brasas de fuegos artificiales, rastros de bengalas.

La técnica de la fuente de destellos:

  1. Dibuja varios trazos de Destellos curvando hacia arriba desde un punto central.
  2. Aplica tweens de movimiento para animarlos subiendo y desvaneciéndose (reduce la opacidad mediante override).
  3. Pon la animación en bucle.
  4. Resultado: Una fuente continua mágica de luz centelleante — el tipo usado en revelaciones de logos y pantallas de inicio de aplicaciones.

💡 Consejo de Pro — Capas de los Tres Efectos: Las composiciones de pinceles de Efectos más impresionantes usan los tres juntos:

  1. Destellos como la energía dispersa más exterior.
  2. Resplandor como un aura suave de rango medio.
  3. Neón como el elemento central nítido.

Piénsalo como una fuente de luz del mundo real: el filamento de tungsteno (Neón) → el envoltorio de vidrio iluminado (Resplandor) → la dispersión de luz por la habitación (Destellos). Tres capas concéntricas del mismo color con diferentes características de bloom. Prueba esto con azul eléctrico sobre un fondo oscuro para un impresionante efecto eléctrico.