Cómo crear un banner de anuncio con degradado animado en React
Un banner con degradado animado en React desplaza el background-position de un linear gradient con 200% de ancho mediante una animación CSS keyframe, mientras que un flag useState controla el cierre. La entrada deslizante es una keyframe independiente que traslada el banner de -100% a 0 al montarse.
- Stack: React 18 + Tailwind v4 + lucide-react, ~100 líneas, sin necesidad de Framer Motion.
- Dos keyframes CSS inyectadas gestionan toda la animación: gradient-shift (bucle de 6s) y banner-in (entrada de 0.4s).
- Accesible: el botón de cierre lleva un aria-label; el banner usa tokens de color semánticos, no valores fijos en el código.
- Totalmente responsive, el texto pasa de xs a sm, el botón de cierre se posiciona en absolute para que nunca rompa la maquetación.
- Funciona tanto en tema claro como oscuro mediante tokens de custom properties CSS (--color-accent, --color-background).
Banner Gradient es una barra de anuncio descartable para la parte superior de una página. Un degradado CSS en bucle anima el fondo, una breve keyframe de entrada anuncia su presencia al montarse, y un botón de cierre lo elimina del DOM sin recargar la página. Lo bastante simple para integrarse en cualquier layout, lo bastante cuidado para resultar intencional.
Anatomía
La div raíz está en position:relative con overflow:hidden. Dos divs en position:absolute se superponen dentro: primero, el fondo de degradado animado (linear-gradient con 200% de ancho, desplazado por keyframe); segundo, una superposición radial sutil que añade profundidad luminosa. Encima de ambas va la fila de contenido: un icono Sparkles, un párrafo corto con un link inline opcional, y un botón de cierre fijado al borde derecho con position:absolute.
Cómo funciona
El efecto de degradado solo necesita dos keyframes CSS inyectadas mediante una etiqueta `<style>` dentro del componente. `banner-gradient-shift` desplaza el background-position de `0% 50%` a `100% 50%` y de vuelta en 6 segundos con ease-in-out, creando un barrido de color fluido. `banner-gradient-in` traslada todo el banner de `translateY(-100%)` a `translateY(0)` con ease-out en 0.4s al montarse. El cierre se basa en un simple `useState(true)`: al pasar a false, el componente devuelve null y React lo desmonta de forma limpia.
Cómo crearlo en React
Montar la estructura en capas
Crea una div relative con overflow:hidden como raíz. Dentro, añade dos divs en position absolute: una para el fondo de degradado y otra para la superposición radial. Ambas deben cubrir toda la raíz con `inset-0`. La fila de contenido va al final, en position relative para situarse por encima de las capas de fondo.
Inyectar las keyframes CSS
Coloca una etiqueta `<style>` al final del JSX para definir ambas keyframes. La animación de degradado necesita que backgroundSize esté en `200% 200%` en el elemento objetivo para que el desplazamiento de posición produzca un movimiento visible. Mantén la animación de entrada en el elemento raíz mediante la prop style `animation`.
@keyframes banner-gradient-shift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } @keyframes banner-gradient-in { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; transform: translateY(0); } }Conectar el cierre con useState
Mantén un único flag booleano. Cuando es false, devuelve null de inmediato para que React elimine por completo el elemento del DOM. El botón de cierre llama a setVisible(false) mediante onClick. Aquí no hace falta animación de salida, pero puedes envolver la raíz en un AnimatePresence de Framer Motion si quieres un fundido al cerrar.
const [visible, setVisible] = useState(true); if (!visible) return null;Usar tokens CSS para el theming
Evita los valores hex fijos en el código. Conecta `var(--color-accent)` al degradado y `var(--color-background)` a los colores de texto e icono. Así el banner respeta automáticamente el preset de tema activo sin lógica JavaScript adicional.
Cuándo usarlo
Úsalo para anuncios limitados en el tiempo: un descuento de lanzamiento, una ventana de mantenimiento planificada, el despliegue de una nueva funcionalidad. Funciona mejor como opener real en la parte superior de la página, colocado antes de la navbar o el hero. Evítalo en páginas donde el CTA principal debe ser lo primero que lea el visitante; el banner competirá por la atención. Evita también apilar varios banners a la vez: un mensaje, un banner.
Usado por
- GitHub, Usa banners superiores con degradado para las alertas de estado de la plataforma y los anuncios de funcionalidades.
- Vercel, Muestra barras de anuncio con degradado descartables para los lanzamientos de producto y los eventos de conferencias.
- Stripe, Despliega banners superiores con fondos que cambian de color para Stripe Sessions y las actualizaciones de producto importantes.
FAQ
¿Cómo persisto el estado de cierre entre recargas de página?
Sustituye useState por un valor leído desde localStorage. Al montar, comprueba si una clave como `banner-dismissed` está definida; si es así, inicializa visible a false. Escribe la clave en el handler de cierre. Envuelve la lectura de localStorage en un try/catch por seguridad en SSR.
¿Puedo añadir una animación de fundido al cerrar el banner?
Sí. Envuelve la div raíz en el AnimatePresence de Framer Motion y añade una prop exit con opacity:0 e y:-20. Cambia la div interior a motion.div y pasa el exit junto a initial y animate. El banner se fundirá y se deslizará hacia arriba antes de que React lo retire.
¿Por qué inyectar las keyframes en una etiqueta <style> en lugar de una clase Tailwind?
Tailwind v4 sí admite keyframes arbitrarias mediante la config, pero para un componente autónomo que se entrega como snippet de copy-paste la etiqueta <style> inline concentra toda la lógica de animación en un solo archivo. No requiere cambios en la config de build, y las keyframes quedan aisladas por sus nombres únicos.
¿Funciona el banner sin JavaScript?
No. La directiva 'use client' lo convierte en un componente cliente; sin JS el banner no se renderiza. Para un fallback sin JS, mueve el banner a un Server Component y elimina el botón de cierre, o renderízalo dentro de una etiqueta <noscript> como barra HTML estática.