PRO

Magnetic Spotlight Marquee

A continuously looping row of six images that follows the pointer vertically. As the strip travels down the frame, nearby text lines rise with its wake and settle independently, preserving the source motion model and responsive composition.

Component

[email protected]

Instagram, YouTube, X

BLANK Studio

Making digital work worth remembering

BLANK explores web design, motion, and front end development through practical experiments and detailed walkthroughs. Every release is made to help developers build engaging digital experiences.

From GSAP animation and interactive interfaces to complete website builds, the studio focuses on creative techniques, clean code, and thoughtful processes that belong in real projects.

BLANK is dedicated to the craft of modern web development through tutorials, creative experiments, and detailed project breakdowns. Every release is designed to inspire curiosity, encourage learning, and help developers build better experiences for the web.

Install
npx shadcn@latest add https://ui.aryank.space/r/magnetic-spotlight-marquee.json

Installs from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.

Files

API
PropTypeDefaultDescription
imagesstring[]6 BLANK-hosted JPGsImages cloned into the infinite horizontal track.
title / tagline / email / socialLinksstringBLANK studio copyPrimary identity and navigation copy.
copy / footer[string, string] / stringBLANK studio copyBody columns and centered footer description.
Customize
imagesasset-url

Six photographs in the repeating marquee set.

title / tagline / copy / footertext

Studio heading and supporting copy moved by the strip.

Dependencies
gsap