A lightweight, customizable text animation library for creating smooth scrolling text effects with support for React, Next.js, Angular and vanilla JavaScript
npm install web-scrolling-textA lightweight, customizable text animation library for creating smooth scrolling text effects with support for React, Next.js, Angular, and Vanilla JavaScript.
🚀 Live Demo • 🎮 Playground • 📚 Documentation
https://github.com/user-attachments/assets/87e55d25-2435-4ca6-aaad-ef0fb9d378d7
``bash`
npm i web-scrolling-text
`html`
Via CDN:
`html
Hello
World
`
Via NPM (Bundlers):
`javascript`
import { register } from "web-scrolling-text/element";
register();
`tsx
import ScrollingText from "web-scrolling-text/react";
function App() {
return (
Hello
World
👋
);
}
`
`tsx
"use client";
import ScrollingText from "web-scrolling-text/react";
export default function App() {
return (
Welcome
to Next.js
);
}
`
- 🎨 8+ Pre-built Animations - Fade, bounce, flip, rotate, scale, and more
- ⚡ Lightweight - Minimal bundle size with zero dependencies
- 🔧 Highly Customizable - Control timing, animations, and behavior
- 📱 Responsive - Works seamlessly on all devices
- 🎯 TypeScript Support - Full type definitions included
- 🌐 Framework Agnostic - Use with React, Next.js, Angular, or vanilla JS
- 🎭 SSR Compatible - Works with server-side rendering
- ♿ Accessible - Built with accessibility in mind
`tsx
import ScrollingText from "web-scrolling-text/react";
import fade from "web-scrolling-text/animation/fade";
Beautiful
Animations
`
`tsx
const scrollerRef = useRef();
Controlled
Animation
scrollerRef.current?.pause(); // Pause
scrollerRef.current?.start(); // Resume
``
Contributions are welcome! Please feel free to submit a Pull Request.
ICS © Hardik Naik
- GitHub Repository
- NPM Package
- Documentation
- Live Demo
- Playground
- Examples