A CSS only glitch text effect with RGB channel split and clip path slices. GPU friendly and reduced motion safe, ideal for gaming, tech and cyberpunk headlines.
"use client";
import * as React from "react";
import { TextGlitch } from "@/components/ui/text-glitch";
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";
function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
type GlitchTrigger = "always" | "hover";
const THEME_AUTO = "theme";
const settings = {
text: "wensity",
duration: 2.4,
offset: 5,
enableShadows: true,
trigger: "always",
leftColor: THEME_AUTO,
rightColor: THEME_AUTO,
};
function PreviewShell({
children,
className,
}: {
children: React.ReactNode;
className?: string;
}) {
return (
<div
className={cn(
"flex w-full items-center justify-center overflow-visible px-4 py-10 sm:px-8",
className,
)}
>
{children}
</div>
);
}
function Headline({
text,
duration,
offset,
enableShadows,
trigger,
leftColor,
rightColor,
compact,
}: {
text: string;
duration: number;
offset: number;
enableShadows: boolean;
trigger: GlitchTrigger;
leftColor: string;
rightColor: string;
compact?: boolean;
}) {
return (
<TextGlitch
as="h1"
text={text || "wensity"}
duration={duration}
offset={offset}
enableShadows={enableShadows}
trigger={trigger}
leftColor={leftColor === THEME_AUTO ? undefined : leftColor}
rightColor={rightColor === THEME_AUTO ? undefined : rightColor}
className={cn(
"font-display font-black tracking-tight text-neutral-900 dark:text-white",
compact
? "text-5xl sm:text-6xl"
: "text-[clamp(2.5rem,12vw,7rem)]",
)}
/>
);
}
export function TextGlitchPreview(props: Partial<typeof settings> = {}) {
const state = { ...settings, ...props };
return (
<PreviewShell className="min-h-[360px]">
<Headline
text={state.text}
duration={state.duration}
offset={state.offset}
enableShadows={state.enableShadows}
trigger={state.trigger}
leftColor={state.leftColor}
rightColor={state.rightColor}
/>
</PreviewShell>
);
}
export default function Demo(props: Partial<typeof settings>) {
return <TextGlitchPreview {...props} />;
}