A minimal Next.js demo project showcasing a reusable React text glitch animation component. This component provides smooth, eye-catching transitions between status messages with a glitch effect.
This glitch animation was inspired by @tomjohndesign.
- Node.js 18+ installed
- npm (comes with Node.js)
- Install dependencies:
npm install- Run the development server:
npm run dev- Open http://localhost:3000 in your browser to see the demo.
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
currentStatus |
string |
Yes | - | The status text to display |
isAnimating |
boolean |
Yes | - | Triggers animation when status changes |
className |
string |
No | "" |
Additional CSS classes |
fontSize |
string |
No | "text-sm" |
Tailwind font size class |
fontFamily |
string |
No | "font-medium" |
Tailwind font weight class |
import { StatusAnimation } from "@/src/components/StatusAnimation";
function App() {
const [status, setStatus] = useState("Initial");
const [animating, setAnimating] = useState(false);
return (
<div>
<StatusAnimation
currentStatus={status}
isAnimating={animating}
className="text-primary font-mono"
fontSize="text-2xl"
fontFamily="font-bold"
/>
<button onClick={() => {
setAnimating(true);
setStatus("New Status");
}}>
Change Status
</button>
</div>
);
}The component is also available as an npm package:
npm install glitch-status-animationimport { StatusAnimation } from 'glitch-status-animation';- Next.js 16 - React framework
- React 19 - UI library
- TypeScript - Type safety
- Tailwind CSS 4 - Styling
MIT License
Made by Anton Gridz