3D Marquee

Animated 3D marquee with perspective grid transforms and smooth scrolling images. Perfect for React applications requiring immersive visual displays with Next.js integration and TypeScript support.

Motion

Loading component...

"use client";import { ThreeDMarquee } from "@/components/ui/shadcn-io/3d-marquee";export default function ThreeDMarqueeDemo() {  const images = [    "https://assets.aceternity.com/cloudinary_bkp/3d-card.png",    "https://assets.aceternity.com/animated-modal.png",    "https://assets.aceternity.com/animated-testimonials.webp",    "https://assets.aceternity.com/cloudinary_bkp/Tooltip_luwy44.png",    "https://assets.aceternity.com/github-globe.png",    "https://assets.aceternity.com/glare-card.png",    "https://assets.aceternity.com/layout-grid.png",    "https://assets.aceternity.com/flip-text.png",    "https://assets.aceternity.com/hero-highlight.png",    "https://assets.aceternity.com/carousel.webp",    "https://assets.aceternity.com/placeholders-and-vanish-input.png",    "https://assets.aceternity.com/shooting-stars-and-stars-background.png",    "https://assets.aceternity.com/signup-form.png",    "https://assets.aceternity.com/cloudinary_bkp/stars_sxle3d.png",    "https://assets.aceternity.com/spotlight-new.webp",    "https://assets.aceternity.com/cloudinary_bkp/Spotlight_ar5jpr.png",    "https://assets.aceternity.com/cloudinary_bkp/Parallax_Scroll_pzlatw_anfkh7.png",    "https://assets.aceternity.com/tabs.png",    "https://assets.aceternity.com/cloudinary_bkp/Tracing_Beam_npujte.png",    "https://assets.aceternity.com/cloudinary_bkp/typewriter-effect.png",    "https://assets.aceternity.com/glowing-effect.webp",    "https://assets.aceternity.com/hover-border-gradient.png",    "https://assets.aceternity.com/cloudinary_bkp/Infinite_Moving_Cards_evhzur.png",    "https://assets.aceternity.com/cloudinary_bkp/Lamp_hlq3ln.png",    "https://assets.aceternity.com/macbook-scroll.png",    "https://assets.aceternity.com/cloudinary_bkp/Meteors_fye3ys.png",    "https://assets.aceternity.com/cloudinary_bkp/Moving_Border_yn78lv.png",    "https://assets.aceternity.com/multi-step-loader.png",    "https://assets.aceternity.com/vortex.png",    "https://assets.aceternity.com/wobble-card.png",    "https://assets.aceternity.com/world-map.webp",  ];  return (    <div className="mx-auto my-10 max-w-7xl rounded-3xl bg-gray-950/5 p-2 ring-1 ring-neutral-700/10 dark:bg-neutral-800">      <ThreeDMarquee images={images} />    </div>  );}

"use client";import { motion } from "motion/react";import { cn } from "@/lib/utils";import React from "react";export type ThreeDMarqueeProps = {  images: string[];  className?: string;};export const ThreeDMarquee = ({ images, className }: ThreeDMarqueeProps) => {  // Split the images array into 4 equal parts  const chunkSize = Math.ceil(images.length / 4);  const chunks = Array.from({ length: 4 }, (_, colIndex) => {    const start = colIndex * chunkSize;    return images.slice(start, start + chunkSize);  });  return (    <div      className={cn(        "mx-auto block h-[600px] overflow-hidden rounded-2xl max-sm:h-100",        className,      )}    >      <div className="flex size-full items-center justify-center">        <div className="size-[1720px] shrink-0 scale-50 sm:scale-75 lg:scale-100">          <div            style={{              transform: "rotateX(55deg) rotateY(0deg) rotateZ(-45deg)",            }}            className="relative top-96 right-[50%] grid size-full origin-top-left grid-cols-4 gap-8 transform-3d"          >            {chunks.map((subarray, colIndex) => (              <motion.div                animate={{ y: colIndex % 2 === 0 ? 100 : -100 }}                transition={{                  duration: colIndex % 2 === 0 ? 10 : 15,                  repeat: Infinity,                  repeatType: "reverse",                }}                key={colIndex + "marquee"}                className="flex flex-col items-start gap-8"              >                <GridLineVertical className="-left-4" offset="80px" />                {subarray.map((image, imageIndex) => (                  <div className="relative" key={imageIndex + image}>                    <GridLineHorizontal className="-top-4" offset="20px" />                    <motion.img                      whileHover={{                        y: -10,                      }}                      transition={{                        duration: 0.3,                        ease: "easeInOut",                      }}                      key={imageIndex + image}                      src={image}                      alt={`Image ${imageIndex + 1}`}                      className="aspect-[970/700] rounded-lg object-cover ring ring-gray-950/5 hover:shadow-2xl"                      width={970}                      height={700}                    />                  </div>                ))}              </motion.div>            ))}          </div>        </div>      </div>    </div>  );};export type GridLineHorizontalProps = {  className?: string;  offset?: string;};const GridLineHorizontal = ({ className, offset }: GridLineHorizontalProps) => {  return (    <div      style={        {          "--background": "#ffffff",          "--color": "rgba(0, 0, 0, 0.2)",          "--height": "1px",          "--width": "5px",          "--fade-stop": "90%",          "--offset": offset || "200px", //-100px if you want to keep the line inside          "--color-dark": "rgba(255, 255, 255, 0.2)",          maskComposite: "exclude",        } as React.CSSProperties      }      className={cn(        "absolute left-[calc(var(--offset)/2*-1)] h-[var(--height)] w-[calc(100%+var(--offset))]",        "bg-[linear-gradient(to_right,var(--color),var(--color)_50%,transparent_0,transparent)]",        "[background-size:var(--width)_var(--height)]",        "[mask:linear-gradient(to_left,var(--background)_var(--fade-stop),transparent),_linear-gradient(to_right,var(--background)_var(--fade-stop),transparent),_linear-gradient(black,black)]",        "[mask-composite:exclude]",        "z-30",        "dark:bg-[linear-gradient(to_right,var(--color-dark),var(--color-dark)_50%,transparent_0,transparent)]",        className,      )}    ></div>  );};export type GridLineVerticalProps = {  className?: string;  offset?: string;};const GridLineVertical = ({ className, offset }: GridLineVerticalProps) => {  return (    <div      style={        {          "--background": "#ffffff",          "--color": "rgba(0, 0, 0, 0.2)",          "--height": "5px",          "--width": "1px",          "--fade-stop": "90%",          "--offset": offset || "150px", //-100px if you want to keep the line inside          "--color-dark": "rgba(255, 255, 255, 0.2)",          maskComposite: "exclude",        } as React.CSSProperties      }      className={cn(        "absolute top-[calc(var(--offset)/2*-1)] h-[calc(100%+var(--offset))] w-[var(--width)]",        "bg-[linear-gradient(to_bottom,var(--color),var(--color)_50%,transparent_0,transparent)]",        "[background-size:var(--width)_var(--height)]",        "[mask:linear-gradient(to_top,var(--background)_var(--fade-stop),transparent),_linear-gradient(to_bottom,var(--background)_var(--fade-stop),transparent),_linear-gradient(black,black)]",        "[mask-composite:exclude]",        "z-30",        "dark:bg-[linear-gradient(to_bottom,var(--color-dark),var(--color-dark)_50%,transparent_0,transparent)]",        className,      )}    ></div>  );};export { GridLineHorizontal, GridLineVertical };

Installation

npx shadcn@latest add https://www.shadcn.io/registry/3d-marquee.json

npx shadcn@latest add https://www.shadcn.io/registry/3d-marquee.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/3d-marquee.json

bunx shadcn@latest add https://www.shadcn.io/registry/3d-marquee.json

Features

3D perspective grid with rotated transforms and dynamic image positioning
Smooth column animations with alternating vertical movement patterns using Motion
Responsive scaling adapts to different screen sizes (50% mobile, 75% tablet, 100% desktop)
Hover interactions with individual image lifting effects and shadow animations
Grid line overlays with customizable horizontal and vertical decorative elements
TypeScript support with comprehensive prop interfaces and type safety
Motion integration compatible with shadcn/ui design system and Tailwind CSS

Examples

Fullscreen Hero

Loading component...

"use client";import { ThreeDMarquee } from "@/components/ui/shadcn-io/3d-marquee";export default function ThreeDMarqueeFullscreenDemo() {  const images = [    "https://assets.aceternity.com/cloudinary_bkp/3d-card.png",    "https://assets.aceternity.com/animated-modal.png",    "https://assets.aceternity.com/animated-testimonials.webp",    "https://assets.aceternity.com/cloudinary_bkp/Tooltip_luwy44.png",    "https://assets.aceternity.com/github-globe.png",    "https://assets.aceternity.com/glare-card.png",    "https://assets.aceternity.com/layout-grid.png",    "https://assets.aceternity.com/flip-text.png",    "https://assets.aceternity.com/hero-highlight.png",    "https://assets.aceternity.com/carousel.webp",    "https://assets.aceternity.com/placeholders-and-vanish-input.png",    "https://assets.aceternity.com/shooting-stars-and-stars-background.png",    "https://assets.aceternity.com/signup-form.png",    "https://assets.aceternity.com/cloudinary_bkp/stars_sxle3d.png",    "https://assets.aceternity.com/spotlight-new.webp",    "https://assets.aceternity.com/cloudinary_bkp/Spotlight_ar5jpr.png",    "https://assets.aceternity.com/cloudinary_bkp/Parallax_Scroll_pzlatw_anfkh7.png",    "https://assets.aceternity.com/tabs.png",    "https://assets.aceternity.com/cloudinary_bkp/Tracing_Beam_npujte.png",    "https://assets.aceternity.com/cloudinary_bkp/typewriter-effect.png",    "https://assets.aceternity.com/glowing-effect.webp",    "https://assets.aceternity.com/hover-border-gradient.png",    "https://assets.aceternity.com/cloudinary_bkp/Infinite_Moving_Cards_evhzur.png",    "https://assets.aceternity.com/cloudinary_bkp/Lamp_hlq3ln.png",    "https://assets.aceternity.com/macbook-scroll.png",    "https://assets.aceternity.com/cloudinary_bkp/Meteors_fye3ys.png",    "https://assets.aceternity.com/cloudinary_bkp/Moving_Border_yn78lv.png",    "https://assets.aceternity.com/multi-step-loader.png",    "https://assets.aceternity.com/vortex.png",    "https://assets.aceternity.com/wobble-card.png",    "https://assets.aceternity.com/world-map.webp",  ];  return (    <div className="relative mx-auto my-10 flex h-screen w-full max-w-7xl flex-col items-center justify-center overflow-hidden rounded-3xl">      <h2 className="relative z-20 mx-auto max-w-4xl text-center text-2xl font-bold text-balance text-white md:text-4xl lg:text-6xl">        This is your life and it&apos;s ending one{" "}        <span className="relative z-20 inline-block rounded-xl bg-blue-500/40 px-4 py-1 text-white underline decoration-sky-500 decoration-[6px] underline-offset-[16px] backdrop-blur-sm">          moment        </span>{" "}        at a time.      </h2>      <p className="relative z-20 mx-auto max-w-2xl py-8 text-center text-sm text-neutral-200 md:text-base">        You are not your job, you&apos;re not how much money you have in the        bank. You are not the car you drive. You&apos;re not the contents of        your wallet.      </p>      <div className="relative z-20 flex flex-wrap items-center justify-center gap-4 pt-4">        <button className="rounded-md bg-sky-600 px-6 py-2.5 text-sm font-medium text-white transition-colors hover:bg-sky-700 focus:ring-2 focus:ring-sky-500 focus:ring-offset-2 focus:ring-offset-black focus:outline-none">          Join the club        </button>        <button className="rounded-md border border-white/20 bg-white/10 px-6 py-2.5 text-sm font-medium text-white backdrop-blur-sm transition-colors hover:bg-white/20 focus:ring-2 focus:ring-white/20 focus:ring-offset-2 focus:ring-offset-black focus:outline-none">          Read more        </button>      </div>      {/* overlay */}      <div className="absolute inset-0 z-10 h-full w-full bg-black/80 dark:bg-black/40" />      <ThreeDMarquee        className="pointer-events-none absolute inset-0 h-full w-full"        images={images}      />    </div>  );}

"use client";import { motion } from "motion/react";import { cn } from "@/lib/utils";import React from "react";export type ThreeDMarqueeProps = {  images: string[];  className?: string;};export const ThreeDMarquee = ({ images, className }: ThreeDMarqueeProps) => {  // Split the images array into 4 equal parts  const chunkSize = Math.ceil(images.length / 4);  const chunks = Array.from({ length: 4 }, (_, colIndex) => {    const start = colIndex * chunkSize;    return images.slice(start, start + chunkSize);  });  return (    <div      className={cn(        "mx-auto block h-[600px] overflow-hidden rounded-2xl max-sm:h-100",        className,      )}    >      <div className="flex size-full items-center justify-center">        <div className="size-[1720px] shrink-0 scale-50 sm:scale-75 lg:scale-100">          <div            style={{              transform: "rotateX(55deg) rotateY(0deg) rotateZ(-45deg)",            }}            className="relative top-96 right-[50%] grid size-full origin-top-left grid-cols-4 gap-8 transform-3d"          >            {chunks.map((subarray, colIndex) => (              <motion.div                animate={{ y: colIndex % 2 === 0 ? 100 : -100 }}                transition={{                  duration: colIndex % 2 === 0 ? 10 : 15,                  repeat: Infinity,                  repeatType: "reverse",                }}                key={colIndex + "marquee"}                className="flex flex-col items-start gap-8"              >                <GridLineVertical className="-left-4" offset="80px" />                {subarray.map((image, imageIndex) => (                  <div className="relative" key={imageIndex + image}>                    <GridLineHorizontal className="-top-4" offset="20px" />                    <motion.img                      whileHover={{                        y: -10,                      }}                      transition={{                        duration: 0.3,                        ease: "easeInOut",                      }}                      key={imageIndex + image}                      src={image}                      alt={`Image ${imageIndex + 1}`}                      className="aspect-[970/700] rounded-lg object-cover ring ring-gray-950/5 hover:shadow-2xl"                      width={970}                      height={700}                    />                  </div>                ))}              </motion.div>            ))}          </div>        </div>      </div>    </div>  );};export type GridLineHorizontalProps = {  className?: string;  offset?: string;};const GridLineHorizontal = ({ className, offset }: GridLineHorizontalProps) => {  return (    <div      style={        {          "--background": "#ffffff",          "--color": "rgba(0, 0, 0, 0.2)",          "--height": "1px",          "--width": "5px",          "--fade-stop": "90%",          "--offset": offset || "200px", //-100px if you want to keep the line inside          "--color-dark": "rgba(255, 255, 255, 0.2)",          maskComposite: "exclude",        } as React.CSSProperties      }      className={cn(        "absolute left-[calc(var(--offset)/2*-1)] h-[var(--height)] w-[calc(100%+var(--offset))]",        "bg-[linear-gradient(to_right,var(--color),var(--color)_50%,transparent_0,transparent)]",        "[background-size:var(--width)_var(--height)]",        "[mask:linear-gradient(to_left,var(--background)_var(--fade-stop),transparent),_linear-gradient(to_right,var(--background)_var(--fade-stop),transparent),_linear-gradient(black,black)]",        "[mask-composite:exclude]",        "z-30",        "dark:bg-[linear-gradient(to_right,var(--color-dark),var(--color-dark)_50%,transparent_0,transparent)]",        className,      )}    ></div>  );};export type GridLineVerticalProps = {  className?: string;  offset?: string;};const GridLineVertical = ({ className, offset }: GridLineVerticalProps) => {  return (    <div      style={        {          "--background": "#ffffff",          "--color": "rgba(0, 0, 0, 0.2)",          "--height": "5px",          "--width": "1px",          "--fade-stop": "90%",          "--offset": offset || "150px", //-100px if you want to keep the line inside          "--color-dark": "rgba(255, 255, 255, 0.2)",          maskComposite: "exclude",        } as React.CSSProperties      }      className={cn(        "absolute top-[calc(var(--offset)/2*-1)] h-[calc(100%+var(--offset))] w-[var(--width)]",        "bg-[linear-gradient(to_bottom,var(--color),var(--color)_50%,transparent_0,transparent)]",        "[background-size:var(--width)_var(--height)]",        "[mask:linear-gradient(to_top,var(--background)_var(--fade-stop),transparent),_linear-gradient(to_bottom,var(--background)_var(--fade-stop),transparent),_linear-gradient(black,black)]",        "[mask-composite:exclude]",        "z-30",        "dark:bg-[linear-gradient(to_bottom,var(--color-dark),var(--color-dark)_50%,transparent_0,transparent)]",        className,      )}    ></div>  );};export { GridLineHorizontal, GridLineVertical };

Immersive fullscreen layout with content overlay and background marquee effect.

Use Cases

This free open source React component works well for:

Hero sections - Immersive landing page backgrounds built with Next.js
Portfolio showcases - Creative image galleries using TypeScript and Motion
Brand presentations - Dynamic visual displays with 3D perspective effects
Background animations - Ambient content for modern web applications

API Reference

ThreeDMarquee

Prop	Type	Default	Description
`images`	`string[]`	required	Array of image URLs to display in the 3D grid
`className`	`string`	`undefined`	Additional CSS classes for the marquee container

GridLineHorizontal

Prop	Type	Default	Description
`className`	`string`	`undefined`	Additional CSS classes for the horizontal grid line
`offset`	`string`	`"200px"`	Extension of the line beyond element boundaries

GridLineVertical

Prop	Type	Default	Description
`className`	`string`	`undefined`	Additional CSS classes for the vertical grid line
`offset`	`string`	`"150px"`	Extension of the line beyond element boundaries

Implementation Notes

Images are automatically distributed across 4 columns with alternating animations
Component uses CSS 3D transforms with 55° X-rotation and -45° Z-rotation
Alternating columns animate with 10s and 15s duration cycles
Grid lines use CSS custom properties for theming and positioning
Compatible with Motion's animation system and performance optimizations
Requires container with defined height for proper 3D perspective display

React3d-marquee

React3d-marquee

On this page