Vertical Focus Marquee

PRONew

Preview live, install via shadcn or copy the source.

Installation

Install via shadcn

This will install the component and its dependencies automatically.

PRO COMPONENT

Unlock with PRO

This component is exclusive to reframe/ui PRO.
Get instant access to all premium components and templates.

Usage

vertical-focus-marquee-usage.tsx• TSX

Props

Name	Type	Default	Required	Description
items	VerticalFocusItem[]	—	Yes	Items with label + src (video/image).
interval	number	3000	No	Ms between auto-advances. 0 disables autoplay.
duration	number	0.85	No	GSAP duration for slide/scale.
ease	string	power3.inOut	No	GSAP ease.
pauseOnHover	boolean	false	No	Pause autoplay while hovering.
accelerateOnScroll	boolean	false	No	Temporarily accelerate on scroll.
scrollAccelerationFactor	number	2.5	No	Multiplier for scroll acceleration.
scrollAccelerationResetDelay	number	250	No	Ms after last scroll before reverting.
gap	number	64	No	Gap between cards (px).
inactiveScale	number	0.9	No	Scale of inactive cards.
activeScale	number	1	No	Scale of active card.
height	string	100svh	No	Container height CSS (e.g. "520px", "68vh", "100svh").
maxHeight	string	100svh	No	Max height CSS.
scale	number	1	No	Overall scale multiplier for cards (0.5–1.5). Scales focus animation and gap proportionally.
cardWidth	string	min(820px,90vw)	No	Width of each card.
className	string	—	No	Root class.
viewportClassName	string	—	No	Viewport class.
stackClassName	string	—	No	Stack class.
cardClassName	string	—	No	Each card wrapper class.
cardMediaClassName	string	—	No	Media container class.
labelClassName	string	—	No	Label class.
mediaClassName	string	—	No	Media element class.
leftContent	React.ReactNode	—	No	Left overlay content.
rightContent	React.ReactNode	—	No	Right overlay content.
bottomLeft	React.ReactNode	—	No	Bottom-left content.
bottomRight	React.ReactNode	—	No	Bottom-right content.
renderCard	(item, index) => React.ReactNode	—	No	Custom card renderer.
loop	boolean	true	No	Seamless loop with clones.