proNew172 lines · framer-motion

Hero Marquee Images

A wall of generated art, scrolling forever. A hero with one or two rows of generated SVG art tiles — unique gradient-and-shape combinations drawn inline, no photos — scrolling sideways on an infinite loop under the headline.

Use it for: Generative, creative or export-heavy products that want a visual wall of 'output' without a single real screenshot or stock photo.
Themes: Light + dark
License: Commercial use

Live

Gallery · Generated live

Every export, one scrolling wall

A full-width marquee of generated art tiles for products built around exports, templates or generative output.

Start creating →Browse the gallery

tsx

"use client";

import * as React from "react";
import { motion, useReducedMotion } from "framer-motion";
import { cn } from "@/lib/utils";

function useReducedMotionSafe() {
  const prefersReduced = useReducedMotion();
  const [mounted, setMounted] = React.useState(false);
  React.useEffect(() => setMounted(true), []);
  return mounted ? !!prefersReduced : false;
}

/**
 * Hero with one or two rows of generated SVG art tiles scrolling sideways
 * forever (a classic marquee), each tile a unique gradient + shape combo
 * drawn inline — no photos, no customer screenshots.
 */

export interface HeroMarqueeImagesProps {
  eyebrow?: string;
  headline?: string;

The rest is in Pro.

Full source, the rebuild prompt and registry install unlock with Pro or Lifetime.

Get Pro

How it behaves

→Each tile is drawn from a small set of inline SVG shapes (blob, wave, rings, bars) over a two-colour linear gradient built from design tokens; the row's tile list is duplicated once and scrolled by exactly 50% of its width so the loop is seamless.
→The scroll itself is a plain CSS @keyframes animation (not a JS loop), so it stays smooth under load; speed scales the animation duration.
→rows toggles a second row that scrolls in the opposite direction at a slightly different speed for a layered feel.
→pauseOnHover adds a CSS :hover { animation-play-state: paused } rule, so moving the pointer over a row freezes it in place without any JavaScript.
→A horizontal mask fades both edges of the marquee into the background so tiles never look cut off.
→prefers-reduced-motion removes the animation-* inline styles entirely, leaving the rows static.

Accessibility

✓Every tile is aria-hidden decorative art; only the eyebrow, heading, copy and two real <a> CTAs carry real content.
✓Headline is a single <h1>; the marquee never traps focus and has no interactive children to tab through.
✓The animation is paused automatically whenever `prefers-reduced-motion` is set, independent of the `pauseOnHover` control.
✓Honours prefers-reduced-motion.