Beta

Image Player

Create your own image player GIF/video.

Open in 21st dev

Installation

Usage

<ImagePlayer
  images={IMAGES}
  interval={200}
  renderImage={(src) => (
    <Image
      src={src}
      width={400}
      height={300}
      className="size-full h-auto max-h-full max-w-xl object-cover inline-block align-middle"
      alt="showcalse"
    />
  )}
/>

Props

PropTypeDefault
images
string
-
interval?
number
500
renderImage?
(src: string, index: number) => React.ReactNode
-
onComplete?
() => void
-
loop?
boolean
true

Bento Grid

Bento Grid, container with multiple variants and displays, five cells by default, four cells, and three cells.

Parallax

Parallax block, creates a parallax effect.