Interactive Infinite Text Marquee with Hover Image Reveal & Scroll-Driven Animation

Create stunning editorial marquees with interactive image previews that follow the cursor. Display an infinitely looping list of customizable text items, reveal images on hover with smooth crossfade animations, or switch to a scroll-driven mode that syncs movement with page scrolling. Built for Framer with performance optimizations, flexible typography controls, and fully customizable styling.

Key Features

• Infinite seamless marquee animation

• Cursor-following image preview on hover

• Smooth crossfade transitions using AnimatePresence

• Spring-based mouse tracking for natural motion

• Optional scroll-driven marquee movement

• Left or right animation direction

• Custom typography with Framer Font Control

• Text transform options (Uppercase, Lowercase, Capitalize)

• Mix filled and outlined text items

• Fully customizable colors (text, accent, borders, background)

• Three separator styles: Dot, Custom SVG, or Text/Icon

• Adjustable preview image size

• Automatic image preloading for smoother hover interactions

• Hover pauses the marquee animation

• Responsive spacing for desktop and mobile

• Optimized for Framer Canvas with static renderer detection

• Lightweight CSS animation with minimal runtime overhead

• Easy-to-edit marquee items with individual images and outline styles

• Glassmorphism-inspired translucent background with backdrop blur

• Continuous looping without visible seams

• Extensive property controls for complete visual customization

Perfect For

• Portfolio showcases

• Creative agency websites

• Fashion & editorial layouts

• Photography portfolios

• Architecture studios

• Brand storytelling

• Product collections

• Landing page hero sections

• Luxury and premium websites

• Interactive navigation or featured work sections