Typography typographyshimmerglass

Glass Text Shimmer

Text with a moving translucent shimmer effect.

Glass Text Shimmer

Usage

Copy the full block below to use this component with its imports.

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

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

Manual Installation

If you are not using the npm package, create a new file src/components/lib/GlassTextShimmer.astro and paste the following code:

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>

Quick Info

Category
Typography
Filename
GlassTextShimmer.astro
Dependencies
None — pure Astro + CSS
Tags
typographyshimmerglass