1 estrella en GitHub = 1 componente nuevo.

Dar una estrella
Tipografía typographyshimmerglass

Glass Text Shimmer

Animación de revelado gradual de texto con efecto de desenfoque y brillo de cristal.

Glass Text Shimmer

Uso

Copia y pega este código directamente en tu página de Astro:

astro 
---
import { GlassTextShimmer } from 'astro-component-kit';
---

<GlassTextReveal>Content</GlassTextReveal>
--- import { GlassTextShimmer } from 'astro-component-kit'; --- <GlassTextReveal>Content</GlassTextReveal>

Instalación Manual

Si no estás usando el paquete npm, crea un archivo nuevo y pega el siguiente código: src/components/lib/GlassTextShimmer.astro:

astro 
---
---
<h3 class="shimmer-txt"><slot /></h3>
<style>
  .shimmer-txt { font-size: 2rem; color: rgba(255,255,255,0.2); background: linear-gradient(90deg, transparent, #fff, transparent); background-size: 200% 100%; -webkit-background-clip: text; animation: shimmer-anim 3s infinite linear; margin: 0; font-weight: 800; }
  @keyframes shimmer-anim { 0% { background-position: -100% 0; } 100% { background-position: 100% 0; } }
</style>
--- --- <h3 class="shimmer-txt"><slot /></h3> <style> .shimmer-txt { font-size: 2rem; color: rgba(255,255,255,0.2); background: linear-gradient(90deg, transparent, #fff, transparent); background-size: 200% 100%; -webkit-background-clip: text; animation: shimmer-anim 3s infinite linear; margin: 0; font-weight: 800; } @keyframes shimmer-anim { 0% { background-position: -100% 0; } 100% { background-position: 100% 0; } } </style>

Información Rápida

Categoría
Tipografía
Nombre de archivo
GlassTextShimmer.astro
Dependencias
Ninguna — Astro nativo + CSS puro
Etiquetas
typographyshimmerglass