Liquid Gooey Carousel

A WebGL2 signed distance field carousel where cards behave like drops of liquid held on glass, fusing together and stretching organic strands.

38 KB
•
Updated on September 12, 2026
Active on Canvas Stage

Each card is a rounded-box distance field. A fullscreen pass evaluates a smooth minimum (smin) across all cards, allowing them to fuse seamlessly like drops of liquid metal.

Installation

Bash
pnpm dlx shadcn@latest add @spaceui/block-liquid-gooey-carousel

Usage

Code
import BlockLiquidGooeyCarousel from '@/components/blocks/liquid-gooey-carousel'

export default function Showcase() {
  return <BlockLiquidGooeyCarousel />
}

Keep in mind

  • MIT License: Free and open-source for personal and commercial use. Feel free to copy, tweak, and adapt the components to match your exact needs.
  • Credits & Inspiration: Some components on this site are inspired by or recreated from great ideas across the web. I'm not here to take credit; just to learn, experiment, and push interface craft further.
  • Reach out & Claims: If an attribution was missed, or if you have any inquiry or claim, feel free to reach out directly on X to @adrielzimbril. I'll be glad to update or resolve it right away.

Related Components

Dither Carousel BlockBlock

3D cylindrical spiral carousel in WebGL2 with curved cards, axial directional blur, and matrix dither pattern.

View
Lens Carousel BlockBlock

Vertical WebGL lens gallery. Scroll-linked image planes from Immersive Lens.

View
Prism Carousel BlockBlock

Continuous image strip rendered to an offscreen texture and sampled through a thick optical glass lens shader with radial refraction and chromatic aberration.

View
Dither Carousel
Prism Carousel
pnpm dlx shadcn@latest add @spaceui/components-spaceui-ui