Animated Marquee Strip
An infinite scrolling strip with premium cards for logos, partners, or testimonials.
Realtime insights
Track core metrics as they update.
Smart alerts
Stay ahead with instant notifications.
Workflow automation
Connect tools without the overhead.
Design review
Collaborate on the final polish.
Realtime insights
Track core metrics as they update.
Smart alerts
Stay ahead with instant notifications.
Workflow automation
Connect tools without the overhead.
Design review
Collaborate on the final polish.
Dependencies
- clsx
- tailwind-merge
- framer-motion
Files
- components/ui/animated-marquee-strip.tsx
Installation
Using shadcn CLI
npx shadcn add animated-marquee-strip --url https://ui.hampton.ioManual installation
Copy the component file to your project and install dependencies:
npm install clsx tailwind-merge framer-motionRelated Effects Components
Animated Beam Connectors
Animated connector beams that link nodes with a flowing motion trail.
Animated Border Gradient
Animated conic gradient border wrapper with configurable radius and hover pause.
Confetti
Animated confetti effect component perfect for celebrations. Includes a ready-to-use ConfettiButton wrapper.
Confetti Burst
Triggered confetti celebration effect that bursts outward from the center.
Cursor Spotlight
A spotlight section that tracks the cursor and reveals content inside the highlight.
Flip Card
3D card component that flips on hover or click to reveal content on the back. Supports both horizontal and vertical flip animations.