Carousel, Glass
& Dither.

You can explore all three effects in your browser. To add one to your site, use an existing React project with TypeScript support for the downloaded .tsx file.

1. Select Carousel, Glass, or Dither at the top of the playground, then choose a version and adjust its controls.
2. Compare Before with After. Switch back to After to export the effect.
3. Choose Download .tsx for the complete component. Save it next to your example file.
4. Select Usage → Copy code for the short example that imports the component and applies your settings.

Image format

Portrait uses 180 × 210 px, Square 200 × 200 px, and Wide 260 × 160 px. You can adjust width and height separately.

Motion & depth

speed and direction control the rotation. tilt and perspective change how you view the ring.

Interaction

drag enables pointer control. sensitivity changes how strongly the carousel responds.

Download RoundCarousel.tsx and put this example beside it. Keep the outer container’s explicit height: the carousel fills its parent. Replace the image paths with your own when you’re ready.

"use client";

import RoundCarousel from './RoundCarousel';

export default function CarouselExample() {
  return (
    <div style={{ width: '100%', height: 520 }}>
      <RoundCarousel
        images={Array.from({ length: 8 }, (_, i) => ({
          src: `/images/photo-${i + 1}.png`,
        }))}
        imageWidth={180}
        imageHeight={210}
        spacing={3}
        speed={2}
        direction="right"
        tilt={-7}
        perspective={3000}
        cornerRadius={15}
        innerDim={3.5}
        background="#171717"
        drag={true}
        sensitivity={5}
      />
    </div>
  );
}

The ring uses CSS 3D transforms on image elements. The small guide preview scales the ring to fit; the code uses the image dimensions you select.

Shape

Use "Torus", "Sphere", or "X" in the code. The playground calls X “Cross.”

Glass finish

Start with frost: 6 and chromatic: 40, then adjust by eye. Lower frost keeps the backdrop clearer.

Backdrop

Change the text, textColor, and font in the example. Put essential page text outside the graphic too.

Save GlassIcon.tsx beside this example. Keep an explicit width and height so the canvas has space to render.

"use client";

import GlassIcon from './GlassIcon';

export default function GlassExample() {
  return (
    <GlassIcon
      shape="Torus"
      speed={17}
      size={72}
      background="#e9eff6"
      glass={{ frost: 6, chromatic: 40 }}
      orient={{ angleX: 24, angleY: -22, angleZ: -12 }}
      backdrop={{
        type: 'Text', text: 'fluid.', textColor: '#334d7a',
        font: { fontFamily: 'Georgia, serif', fontSize: 180, fontStyle: 'italic' },
      }}
      style={{ width: '100%', height: 520 }}
    />
  );
}

Pattern

Ordered maps to "bayer8". The other values are "lines" and "noise".

Reveal edge

revealRadius sets the area uncovered around the pointer; revealSoftness blends the edge.

Wave

Add wave={false} to remove the animated wave while keeping the pointer reveal.

Save DitherReveal.tsx beside this example. Put the sample dither.jpg in public/images, or change the image path and description to use your own photo.

"use client";

import DitherReveal from './DitherReveal';

export default function DitherExample() {
  return (
    <DitherReveal
      image={{ src: '/images/dither.jpg', alt: 'Two hands in orange and purple light.' }}
      ditherStyle="bayer8"
      dotSize={5}
      revealRadius={135}
      revealSoftness={40}
      waveSpeed={52}
      waveDensity={25}
      style={{ width: '100%', height: 520 }}
    />
  );
}

Render your example from the page where you want the effect. A usage snippet imports the renderer, so keep the full downloaded component and its images in the right locations. In a Next.js App Router project, keep the included "use client" boundary.

Add the attached Carousel, Glass, or Dither component and usage snippet to my existing React site at [where it should appear]. Preserve my chosen settings and the site's existing layout.

Use the complete attached .tsx source and keep the usage import working. Put local image assets in public/images. Use a responsive width and an explicit height. For RoundCarousel, put the height on its outer container.

Provide a static fallback and respect prefers-reduced-motion. Keep essential text outside the graphic. For hover effects, add a keyboard-accessible Show original control and verify touch behavior. Check for missing images, WebGL support where needed, and cleanup when navigating away.

Here is the usage snippet:
[Paste the code copied from the playground here]

Pause controls freeze these previews. Exported code keeps the animation settings; add a pause control or static fallback when integrating it into your page.