Call to Action

Marquee CTA Media

Dynamic hero sections with marquee image galleries and video backgrounds

Marquee Base

A hero section with dual horizontal marquee image galleries on the right side and content on the left, featuring a scramble button effect.

The Future of Creative Design

March 2025

Design Studio

Image 1
Image 2
Image 3
Image 4
Image 5
Image 6
Image 7
Image 8

Install the component using the shadcn CLI:

npx shadcn@latest add @uimix/cta-marquee-base

This will automatically add the component to your project.

Copy and paste the following code into your project:

Loading source…

Make sure you have the required animations in your tailwind.config.js:

tailwind.config.js
module.exports = {theme: {  extend: {    keyframes: {      "marquee": {        "0%": { transform: "translateX(0)" },        "100%": { transform: "translateX(-100%)" }      }    },    animation: {      "marquee": "marquee var(--duration, 40s) linear infinite"    }  }}}

Add the required classes to your global stylesheet:

app/global.css
@keyframes marquee {0% { transform: translateX(0); }100% { transform: translateX(-100%); }}.animate-marquee {animation: marquee var(--duration, 40s) linear infinite;}

Usage

import HeroWithMarquee from '@/registry/default/cta-marquee-base'

export default function Page() {
  return <HeroWithMarquee />
}

Features

  • •
    Horizontal scrolling - Smooth infinite scroll animation
  • •
    Dual marquees - Two rows of marquee content
  • •
    Responsive - Adapts to different screen sizes

Marquee Large

Full-width hero section with large marquee images, designed for maximum visual impact.

Discover Innovation Through Design

Spring 2025

Creative Lab

Image 1
Image 2
Image 3
Image 4
Image 5
Image 6
Image 7
Image 8

Install the component using the shadcn CLI:

npx shadcn@latest add @uimix/cta-marquee-large

This will automatically add the component to your project.

Copy and paste the following code into your project:

Loading source…

Make sure you have the required animations in your tailwind.config.js:

tailwind.config.js
module.exports = {theme: {  extend: {    keyframes: {      "marquee": {        "0%": { transform: "translateX(0)" },        "100%": { transform: "translateX(-100%)" }      }    },    animation: {      "marquee": "marquee var(--duration, 40s) linear infinite"    }  }}}

Add the required classes to your global stylesheet:

app/global.css
@keyframes marquee {0% { transform: translateX(0); }100% { transform: translateX(-100%); }}.animate-marquee {animation: marquee var(--duration, 40s) linear infinite;}

Usage

import HeroWithMarqueeLarge from '@/registry/default/cta-marquee-large'

export default function Page() {
  return <HeroWithMarqueeLarge />
}
  • •
    Large images - Full-size image gallery with no gaps
  • •
    Flexible layout - Content on left, marquee fills remaining space
  • •
    Seamless loop - No-gap marquee for continuous effect

Marquee Reverse

Hero section with marquee on the left and content on the right - a reversed layout variation.

Image 1
Image 2
Image 3
Image 4
Image 5
Image 6
Image 7
Image 8

The Future of Creative Design

March 2025

Design Studio

Install the component using the shadcn CLI:

npx shadcn@latest add @uimix/cta-marquee-reverse

This will automatically add the component to your project.

Copy and paste the following code into your project:

Loading source…

Make sure you have the required animations in your tailwind.config.js:

tailwind.config.js
module.exports = {theme: {  extend: {    keyframes: {      "marquee": {        "0%": { transform: "translateX(0)" },        "100%": { transform: "translateX(-100%)" }      }    },    animation: {      "marquee": "marquee var(--duration, 40s) linear infinite"    }  }}}

Add the required classes to your global stylesheet:

app/global.css
@keyframes marquee {0% { transform: translateX(0); }100% { transform: translateX(-100%); }}.animate-marquee {animation: marquee var(--duration, 40s) linear infinite;}

Usage

import HeroWithMarqueeReverse from '@/registry/default/cta-marquee-reverse'

export default function Page() {
  return <HeroWithMarqueeReverse />
}
  • •
    Reversed layout - Marquee gallery on left, content on right

CTA with Video

Hero section with autoplay video background, perfect for showcasing product demos or atmospheric content.

Experience Next-Gen AI Video Generation

Powered by Ray2 API

Advanced AI Technology

Install the component using the shadcn CLI:

npx shadcn@latest add @uimix/cta-with-video

This will automatically add the component to your project.

Copy and paste the following code into your project:

Loading source…

Make sure you have the required animations in your tailwind.config.js:

tailwind.config.js
module.exports = {theme: {  extend: {}}}

Add the required classes to your global stylesheet:

app/global.css
/* No additional CSS required */

Usage

import HeroWithVideo from '@/registry/default/cta-with-video'

export default function Page() {
  return <HeroWithVideo />
}
  • •
    Autoplay video - Video plays automatically on load
  • •
    Looping - Video loops continuously

Marquee CTA

A dynamic call-to-action component with vertical scrolling marquee effect

FAQ

Frequently Asked Questions components with unique designs and interactive features

On this page

Marquee BaseUsageFeaturesMarquee LargeUsageMarquee ReverseUsageCTA with VideoUsage