Glitch Layers
RGB chromatic aberration layers create glitch effect on hover.
Main Features of Glitch Layers
How to Use Glitch Layers in Next.js
Installation Guide for Glitch Layers
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
text | string | GLITCH | Text to display |
backgroundColor | string | bg-zinc-950 | Background color of the component |
baseTextColor | string | text-white | Base color of the text |
layer1Color | string | text-red-500 | Color of the first glitch layer |
layer2Color | string | text-cyan-500 | Color of the second glitch layer |
textSize | string | text-9xl | Size of the text |
glitchAmplitude | number | 5 | Amplitude of glitch movement |
animationDuration | number | 0.2 | Animation duration in seconds |
repeatDelay1 | number | 0.1 | Repeat delay for first layer |
repeatDelay2 | number | 0.2 | Repeat delay for second layer |
className | string | Additional CSS classes |
Related Components
When to Use
Ideal for tech brands, digital art platforms, and high-energy Next.js portfolios. Use this React component when you want a headline that feels 'glitched' or high-tech, perfect for cyber-security or data-driven themes.
Best Practices
Maintain consistent spacing within your design system by keeping the `glitchAmplitude` low (under 10px) to prevent characters from jumping too far. Follow React best practices by triggering the glitch effect only on hover to save GPU resources. Optimize for performance by using simple color layering without heavy filters.
Why This Component Matters in Modern UI Development
Chromatic aberration and glitch effects are iconic to modern frontend development. This customizable UI component gives you a production-level tool for building high-energy, interactive headers that add semantic authority to your real-world application architecture.
Frequently Asked Questions
QHow many layers does it use?
The component uses three layers (Base, Red, and Cyan) to create a realistic RGB chromatic aberration effect.
QCan I use it on small body text?
It is best suited for large headlines, as the glitch movement can make small font sizes difficult to read.
QIs the glitch pattern random?
Yes, the displacement values are randomized within the `glitchAmplitude` range during each animation frame.