Call to Action

Marquee CTA

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

Vertical Marquee CTA

Get Started in Minutes

Start getting more distribution and ROI out of your content. Try Assembly for free for 14 days.

Content Agencies
Founders & Execs
Social Media Managers
Content Marketers
Growth Teams

Install the component using the shadcn CLI:

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

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-vertical": {        "0%": { transform: "translateY(0)" },        "100%": { transform: "translateY(-100%)" }      },      "marquee": {        "0%": { transform: "translateX(0)" },        "100%": { transform: "translateX(-100%)" }      },      "fade-in-up": {        "0%": { opacity: "0", transform: "translateY(20px)" },        "100%": { opacity: "1", transform: "translateY(0)" }      }    },    animation: {      "marquee-vertical": "marquee-vertical var(--duration, 30s) linear infinite",      "marquee": "marquee var(--duration, 40s) linear infinite",      "fade-in-up": "fade-in-up 0.6s ease-out forwards"    }  }}}

Add the required classes to your global stylesheet:

app/global.css
@keyframes marquee {  0% { transform: translateX(0); }  100% { transform: translateX(-100%); }}@keyframes marquee-vertical {  0% { transform: translateY(0); }  100% { transform: translateY(-100%); }}@keyframes fade-in-up {  0% { opacity: 0; transform: translateY(20px); }  100% { opacity: 1; transform: translateY(0); }}.animate-marquee {  animation: marquee var(--duration, 40s) linear infinite;}.animate-marquee-vertical {  animation: marquee-vertical var(--duration, 30s) linear infinite;}.animate-fade-in-up {  animation: fade-in-up 0.6s ease-out forwards;}.marquee-item { opacity: 0.25; }.marquee-item-horizontal { opacity: 0.25; }

Usage

import CtaVerticalMarquee from '@/registry/default/cta-vertical-marquee/cta-vertical-marquee'

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

Features

  • •
    Vertical scrolling - Smooth infinite scroll animation
  • •
    Opacity fade - Items fade based on distance from center
  • •
    Responsive - Adapts to different screen sizes

Variations

Vertical Marquee (Left Layout)

Content Agencies
Founders & Execs
Social Media Managers
Content Marketers
Growth Teams

Get Started in Minutes

Start getting more distribution and ROI out of your content. Try Assembly for free for 14 days.

Install the component using the shadcn CLI:

npx shadcn@latest add @uimix/cta-with-vertical-marquee-left

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-vertical": {        "0%": { transform: "translateY(0)" },        "100%": { transform: "translateY(-100%)" }      },      "fade-in-up": {        "0%": { opacity: "0", transform: "translateY(20px)" },        "100%": { opacity: "1", transform: "translateY(0)" }      }    },    animation: {      "marquee-vertical": "marquee-vertical var(--duration, 30s) linear infinite",      "fade-in-up": "fade-in-up 0.6s ease-out forwards"    }  }}}

Add the required classes to your global stylesheet:

app/global.css
@keyframes marquee-vertical {  0% { transform: translateY(0); }  100% { transform: translateY(-100%); }}@keyframes fade-in-up {  0% { opacity: 0; transform: translateY(20px); }  100% { opacity: 1; transform: translateY(0); }}.animate-marquee-vertical {  animation: marquee-vertical var(--duration, 30s) linear infinite;}.animate-fade-in-up {  animation: fade-in-up 0.6s ease-out forwards;}.marquee-item { opacity: 0.25; }

Usage

import CTAWithVerticalMarqueeLeft from '@/registry/default/cta-with-vertical-marquee-left/cta-with-vertical-marquee-left'

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

Horizontal Marquee

Get Started in Minutes

Start getting more distribution and ROI out of your content. Try Assembly for free for 14 days.

Content Agencies
Founders & Execs
Social Media Managers
Content Marketers
Growth Teams

Install the component using the shadcn CLI:

npx shadcn@latest add @uimix/cta-with-horizontal-marquee

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%)" }      },      "fade-in-up": {        "0%": { opacity: "0", transform: "translateY(20px)" },        "100%": { opacity: "1", transform: "translateY(0)" }      }    },    animation: {      "marquee": "marquee var(--duration, 40s) linear infinite",      "fade-in-up": "fade-in-up 0.6s ease-out forwards"    }  }}}

Add the required classes to your global stylesheet:

app/global.css
@keyframes marquee {  0% { transform: translateX(0); }  100% { transform: translateX(-100%); }}@keyframes fade-in-up {  0% { opacity: 0; transform: translateY(20px); }  100% { opacity: 1; transform: translateY(0); }}.animate-marquee {  animation: marquee var(--duration, 40s) linear infinite;}.animate-fade-in-up {  animation: fade-in-up 0.6s ease-out forwards;}.marquee-item-horizontal { opacity: 0.25; }

Usage

import CTAWithHorizontalMarquee from '@/registry/default/cta-with-horizontal-marquee/cta-with-horizontal-marquee'

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

Call to Action

Call to Action components for engaging users and driving conversions

Marquee CTA Media

Dynamic hero sections with marquee image galleries and video backgrounds

On this page

Vertical Marquee CTAUsageFeaturesVariationsVertical Marquee (Left Layout)UsageHorizontal MarqueeUsage