Typography typographyglitchcyberpunk

Glitch Text

High-intensity cyberpunk glitch effect for attention-grabbing titles.

Usage

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

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

<CyberpunkGlitchText text="Sample text">Content</CyberpunkGlitchText>
--- import { GlitchText } from 'astro-component-kit'; --- <CyberpunkGlitchText text="Sample text">Content</CyberpunkGlitchText>

Manual Installation

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

astro 
---
interface Props { text: string; }
const { text } = Astro.props;
---
<div class="glitch-text" data-text={text}>{text}</div>
<style>
  .glitch-text { position: relative; font-size: 3rem; font-weight: 900; color: #fff; text-transform: uppercase; }
  .glitch-text::before, .glitch-text::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
  .glitch-text::before { left: 2px; text-shadow: -2px 0 #ff003c; clip: rect(44px, 450px, 56px, 0); animation: glitch-anim 5s infinite linear alternate-reverse; }
  .glitch-text::after { left: -2px; text-shadow: -2px 0 #00e0ff; clip: rect(12px, 450px, 80px, 0); animation: glitch-anim 2s infinite linear alternate-reverse; }
  @keyframes glitch-anim { 
    0% { clip: rect(10px, 9999px, 20px, 0); transform: skew(0.5deg); } 
    20% { clip: rect(40px, 9999px, 50px, 0); } 
    40% { clip: rect(80px, 9999px, 90px, 0); } 
    60% { clip: rect(20px, 9999px, 30px, 0); } 
    80% { clip: rect(60px, 9999px, 70px, 0); } 
    100% { clip: rect(0, 9999px, 10px, 0); transform: skew(-0.5deg); } 
  }
  @media (max-width: 768px) { .glitch-text { font-size: 2rem; } }
</style>
--- interface Props { text: string; } const { text } = Astro.props; --- <div class="glitch-text" data-text={text}>{text}</div> <style> .glitch-text { position: relative; font-size: 3rem; font-weight: 900; color: #fff; text-transform: uppercase; } .glitch-text::before, .glitch-text::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .glitch-text::before { left: 2px; text-shadow: -2px 0 #ff003c; clip: rect(44px, 450px, 56px, 0); animation: glitch-anim 5s infinite linear alternate-reverse; } .glitch-text::after { left: -2px; text-shadow: -2px 0 #00e0ff; clip: rect(12px, 450px, 80px, 0); animation: glitch-anim 2s infinite linear alternate-reverse; } @keyframes glitch-anim { 0% { clip: rect(10px, 9999px, 20px, 0); transform: skew(0.5deg); } 20% { clip: rect(40px, 9999px, 50px, 0); } 40% { clip: rect(80px, 9999px, 90px, 0); } 60% { clip: rect(20px, 9999px, 30px, 0); } 80% { clip: rect(60px, 9999px, 70px, 0); } 100% { clip: rect(0, 9999px, 10px, 0); transform: skew(-0.5deg); } } @media (max-width: 768px) { .glitch-text { font-size: 2rem; } } </style>

Quick Info

Category
Typography
Filename
GlitchText.astro
Dependencies
None — pure Astro + CSS
Tags
typographyglitchcyberpunk