Sticky Video Features

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

sticky-video-features-usage.tsxTSX

Props

NameTypeDefaultRequiredDescription
featuresFeatureItem[]YesArray of features with title, description, eyebrow and optional badge.
videoSrcstringYesVideo source URL for the expanding card.
posterstringNoPoster image for the video.
titleReact.ReactNodeNoSection heading.
eyebrowReact.ReactNodeNoEyebrow above heading.
descriptionReact.ReactNodeNoDescription under heading.
heightstringh-[300vh]NoTailwind height class for pinned scroll distance.
scrollDistancestringNoCSS height overriding Tailwind height.
scrollerstring | HTMLElement | nullNoCustom ScrollTrigger scroller.
initialWidthstring420pxNoInitial width of video card.
initialHeightstring240pxNoInitial height of video card.
targetWidthstring640pxNoTarget width when fully expanded.
targetHeightstring380pxNoTarget height when fully expanded.
videoClassNamestringNoAdditional class for video wrapper.
cardClassNamestringNoAdditional class for each feature card.
classNamestringNoWrapper class for the section.
© reframe/ui 2026Built by @thommysart
More in Scroll Effects