Components
NeoGlitch
NeoGlitch is a visually striking, interactive text component designed for modern web interfaces. It renders text on a canvas with multiple glitch layers, creating a dynamic, cyberpunk-inspired effect. The component features configurable colors, intensity, font, and glow, allowing developers to tailor it to their design system or dashboard. On hover or touch, the text exhibits a subtle jitter and chromatic aberration across blue, white, and gray layers, giving it depth and a futuristic feel. Lightweight, responsive, and highly reusable, CyberGlitchText is perfect for attention-grabbing headings, hero sections, or UI elements that demand a tech-forward aesthetic.
// This is file of your component
// You can use any dependencies from npm; we import them automatically in package.json
import { NeoGlitch } from "@/components/ui/neo-glitch"
export default function NeoGlitchDemo() {
return (
<div className="w-full flex items-center justify-center p-4 select-none">
<NeoGlitch
text="RUIXEN"
fontSize="clamp(5rem, 15vw, 12rem)"
baseColor="#00bfff"
glowColor="#ffffff"
hoverIntensity={25}
animationSpeed={0.8}
/>
</div>
);
}Published
Similar components
Explore more
Part of Ruixen UI — browse the full library on 21st.dev.