RGB Glitch Image Carousel

Heroes 15

About

RGB glitch image carousel for React: cuts between photos with a signal glitch, the picture tearing into bands as its red, green and blue channels slide apart before snapping to the next. Canvas 2D. Arrows, swipe, keyboard and autoplay, reduced-motion aware. Use for music, tech and gaming sites.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds RGB Glitch Image Carousel to your project and fits it to your theme.

Code

How RGB Glitch Image Carousel is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client"

import RgbGlitchCarousel from "@/components/ui/rgb-glitch-carousel"

// Real landscape photography (Unsplash).
const U = (id: string) => "https://images.unsplash.com/photo-" + id + "?q=80&w=1800&auto=format&fit=crop"

export default function DemoPhotos() {
  return (
    <RgbGlitchCarousel
      slides={[
        { image: U("1506905925346-21bda4d32df4"), title: "Above the Clouds", caption: "Valais, Switzerland — sunrise at 3,100 m." },
        { image: U("1501785888041-af3ef285b470"), title: "Glass Lake", caption: "Lago di Braies, a rowboat at noon." },
        { image: U("1469474968028-56623f02e42e"), title: "Gold Valley", caption: "Late light pouring over the ridge." },
        { image: U("1464822759023-fed622ff2c3b"), title: "Snow Line", caption: "Pines, river flats and the high range." },
        { image: U("1500534314209-a25ddb2bd429"), title: "Blue Ridges", caption: "Seven layers of haze before dusk." },
        { image: U("1433086966358-54859d0ed716"), title: "Falls Bridge", caption: "Multnomah Falls after the rain." },
        { image: U("1470071459604-3b5ec3a7fe05"), title: "Morning Fog", caption: "Cloud pouring over the pass at first light." },
        { image: U("1441974231531-c6227db76b6e"), title: "Green Cathedral", caption: "Beech trunks and late-summer light." },
      ]}
    />
  )
}