Skip to main content

Examples

Explore real-world examples of web-scrolling-text in different frameworks and environments.

Framework Examples​

All examples are available in the GitHub repository.

React Example​

A complete React application using Vite with TypeScript.

View Source Code →

Features:

  • TypeScript support
  • Vite for fast development
  • Custom styling with CSS modules

Next.js Example​

A Next.js application demonstrating both App Router and Pages Router usage.

View Source Code →

Features:

  • Next.js App Router
  • Server-side rendering support
  • TypeScript integration

Angular Example​

An Angular application with the scrolling text component.

View Source Code →

Features:

  • Angular standalone components
  • TypeScript support
  • Angular CLI integration

Vanilla JavaScript Example​

A simple HTML/CSS/JavaScript example without any framework.

View Source Code →

Features:

  • No build tools required
  • CDN-based installation
  • Pure JavaScript implementation

Custom Element Example​

A native Web Component (<scrolling-text>) that works in any HTML environment — no framework required.

View Source Code →

Features:

  • Native Web Component (Custom Element)
  • No framework or build tools required
  • CDN-based installation
  • Supports auto-start and manual control (start, pause, stop)
  • Rich HTML content inside slides
  • Custom enter/exit animations via attributes

Running Examples Locally​

Clone the repository and navigate to any example:

git clone https://github.com/mehardiknaik/web-scrolling-text.git
cd web-scrolling-text/examples/react  # or nextjs, angular, vanilla, element
npm install
npm run dev

Try the Interactive Playground​

Want to experiment with animations and configurations without setting up a project?

Visit the Playground →

The playground lets you:

  • Configure all options in real-time
  • Test different animations
  • Copy generated code for React or Vanilla JS
  • Preview your configuration instantly