Spectra UI
ShowcaseComponents

Marquee

A light glare effect which pans across text making it appear as if it is shimmering.

Jack

@jack

I've never seen anything like this before. It's amazing. I love it.
Jill

@jill

I don't know what to say. I'm speechless. This is amazing.
John

@john

I'm at a loss for words. This is amazing. I love it.
Jack

@jack

I've never seen anything like this before. It's amazing. I love it.
Jill

@jill

I don't know what to say. I'm speechless. This is amazing.
John

@john

I'm at a loss for words. This is amazing. I love it.
Jack

@jack

I've never seen anything like this before. It's amazing. I love it.
Jill

@jill

I don't know what to say. I'm speechless. This is amazing.
John

@john

I'm at a loss for words. This is amazing. I love it.
Jack

@jack

I've never seen anything like this before. It's amazing. I love it.
Jill

@jill

I don't know what to say. I'm speechless. This is amazing.
John

@john

I'm at a loss for words. This is amazing. I love it.
Jane

@jane

I'm at a loss for words. This is amazing. I love it.
Jenny

@jenny

I'm at a loss for words. This is amazing. I love it.
James

@james

I'm at a loss for words. This is amazing. I love it.
Jane

@jane

I'm at a loss for words. This is amazing. I love it.
Jenny

@jenny

I'm at a loss for words. This is amazing. I love it.
James

@james

I'm at a loss for words. This is amazing. I love it.
Jane

@jane

I'm at a loss for words. This is amazing. I love it.
Jenny

@jenny

I'm at a loss for words. This is amazing. I love it.
James

@james

I'm at a loss for words. This is amazing. I love it.
Jane

@jane

I'm at a loss for words. This is amazing. I love it.
Jenny

@jenny

I'm at a loss for words. This is amazing. I love it.
James

@james

I'm at a loss for words. This is amazing. I love it.

Installation

Copy and paste the following code into your project.

npx spectraui-cli add globe

Update the import paths to match your project setup.

Update tailwind.config.ts

Add the following animations to your tailwind.config.ts file:

/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
extend: {
  animation: {
    marquee: "marquee var(--duration) linear infinite", 
    "marquee-vertical": "marquee-vertical var(--duration) linear infinite", 
  }, 
  keyframes: {  
    marquee: { 
      from: { transform: "translateX(0)" }, 
      to: { transform: "translateX(calc(-100% - var(--gap)))" }, 
    }, 
    "marquee-vertical": { 
      from: { transform: "translateY(0)" }, 
      to: { transform: "translateY(calc(-100% - var(--gap)))" }, 
    }, 
  },
},
...
PropTypeDefault
className
string
-
reverse
boolean
false
pauseOnHover
boolean
false
vertical
boolean
false
children
node
-
repeat
number
1

Previous

Dock

Next

Tweet Card

On this page

InstallationCopy and paste the following code into your project.Update the import paths to match your project setup.Update tailwind.config.tsAdd the following animations to your tailwind.config.ts file: