"use client"; import { cn } from "@/lib/utils"; import { ReactNode, useEffect, useRef } from "react"; interface VerticalMarqueeProps { children: ReactNode; pauseOnHover?: boolean; reverse?: boolean; className?: string; speed?: number; onItemsRef?: (items: HTMLElement[]) => void; } function VerticalMarquee({ children, pauseOnHover = false, reverse = false, className, speed = 30, onItemsRef, }: VerticalMarqueeProps) { const containerRef = useRef(null); useEffect(() => { if (onItemsRef && containerRef.current) { const items = Array.from(containerRef.current.querySelectorAll('.marquee-item')) as HTMLElement[]; onItemsRef(items); } }, [onItemsRef]); return (

{children}

); } const marqueeItems = [ "Content Agencies", "Founders & Execs", "Social Media Managers", "Content Marketers", "Growth Teams", ]; export default function CTAWithVerticalMarquee() { const marqueeRef = useRef(null); useEffect(() => { const marqueeContainer = marqueeRef.current; if (!marqueeContainer) return; const updateOpacity = () => { const items = marqueeContainer.querySelectorAll('.marquee-item'); const containerRect = marqueeContainer.getBoundingClientRect(); const centerY = containerRect.top + containerRect.height / 2; items.forEach((item) => { const itemRect = item.getBoundingClientRect(); const itemCenterY = itemRect.top + itemRect.height / 2; const distance = Math.abs(centerY - itemCenterY); const maxDistance = containerRect.height / 2; const normalizedDistance = Math.min(distance / maxDistance, 1); const opacity = 1 - normalizedDistance * 0.75; (item as HTMLElement).style.opacity = opacity.toString(); }); }; const animationFrame = () => { updateOpacity(); requestAnimationFrame(animationFrame); }; const frame = requestAnimationFrame(animationFrame); return () => cancelAnimationFrame(frame); }, []); return (

{/* Left Content */}

Get Started in Minutes

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

{/* Right Marquee */}

{marqueeItems.map((item, idx) => (

{item}

))} {/* Top vignette */}

{/* Bottom vignette */}

); }

Featured

Newest

Popular

Shaders

Heros

Features

AI Chat Components

Calls to Action

Buttons

Testimonials

Pricing Sections

Text Components

Explore

Build

CTA with Text Marquee

Created by

Installation

How to use