Infinite Marquee

effects

Smooth infinite loop scrolling ticker banner with gradient edge feathering.

#marquee#ticker#scroll#infinite#loop

Live Interactive Preview

Next.js 16

Tailwind CSS v4

TypeScript

Zero Dependencies

Spatial UI

Copy & Paste

3D Animations

AI Ready

Micro-Interactions

Next.js 16

Tailwind CSS v4

TypeScript

Zero Dependencies

Spatial UI

Copy & Paste

3D Animations

AI Ready

Micro-Interactions

Next.js 16

Tailwind CSS v4

TypeScript

Zero Dependencies

Spatial UI

Copy & Paste

3D Animations

AI Ready

Micro-Interactions

Component Source Code

Select language in the dropdown

Marquee.tsx

1'use client';
2
3import React from 'react';
4import { Sparkles, Code, Cpu, Zap, Layers, Shield, Rocket, Globe, Terminal } from 'lucide-react';
5
6export default function Marquee() {
7  const items = [
8    { label: 'Next.js 16', icon: Rocket, color: 'text-blue-500' },
9    { label: 'Tailwind CSS v4', icon: Code, color: 'text-cyan-500' },
10    { label: 'TypeScript', icon: Terminal, color: 'text-blue-400' },
11    { label: 'Zero Dependencies', icon: Shield, color: 'text-emerald-500' },
12    { label: 'Spatial UI', icon: Layers, color: 'text-purple-500' },
13    { label: 'Copy & Paste', icon: Zap, color: 'text-amber-500' },
14    { label: '3D Animations', icon: Globe, color: 'text-rose-500' },
15    { label: 'AI Ready', icon: Cpu, color: 'text-indigo-500' },
16    { label: 'Micro-Interactions', icon: Sparkles, color: 'text-teal-500' },
17  ];
18
19  return (
20    <div className="relative w-full overflow-hidden py-4 select-none bg-white dark:bg-zinc-950 rounded-2xl border border-zinc-200 dark:border-zinc-800">
21      <div className="absolute left-0 top-0 bottom-0 w-16 sm:w-24 bg-gradient-to-r from-white dark:from-zinc-950 to-transparent z-10 pointer-events-none" />
22      <div className="absolute right-0 top-0 bottom-0 w-16 sm:w-24 bg-gradient-to-l from-white dark:from-zinc-950 to-transparent z-10 pointer-events-none" />
23
24      <div className="animate-marquee gap-3 sm:gap-4 flex items-center">
25        {[...items, ...items, ...items].map((item, idx) => {
26          const Icon = item.icon;
27          return (
28            <div
29              key={idx}
30              className="flex items-center gap-2.5 rounded-xl border border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-900 px-4 py-2.5 text-xs font-semibold text-zinc-800 dark:text-zinc-200 shadow-xs hover:border-blue-500 dark:hover:border-blue-400 hover:scale-105 transition-all duration-200 shrink-0"
31            >
32              <Icon className={`h-4 w-4 ${item.color}`} />
33              <span>{item.label}</span>
34            </div>
35          );
36        })}
37      </div>
38    </div>
39  );
40}

Installation & Integration Guide

Step 1: Tailwind CSS v4 Setup

Tailwind Docs

If you do not have Tailwind installed yet, run this installation command:

Terminal

npm install tailwindcss @tailwindcss/postcss postcss

Then add the Tailwind directive to your main stylesheet (globals.css):

@import "tailwindcss";

Step 2: Install Icon Dependencies

npm install lucide-react react-icons

Step 3: Add Component File

Create a new file in your project at src/components/effects/Marquee.tsx and paste the copied code from the source viewer above.

Step 4: Usage Example

ExamplePage.tsx

1import InfiniteMarquee from '@/components/effects/Marquee';
2
3export default function ExamplePage() {
4  return (
5    <main className="p-8 flex items-center justify-center min-h-screen">
6      <InfiniteMarquee />
7    </main>
8  );
9}