# Liquid Morphology — Skecher UI

A WebGL image slideshow for landing-page backgrounds with liquid glass, frost, ripple, plasma, and timeshift shader transitions.

## Install

```bash
bunx --bun shadcn@latest add CoDesign-Spa27/skecher-ui/liquid-morphology-slideshow
```

## Dependencies

- None beyond React.

## Implementation guidance

- No additional implementation constraints are documented.

## Usage

```tsx
import { LiquidMorphologySlideshow } from "@/components/ui/liquid-morphology-slideshow";

const slides = [
  {
    title: "Northern light",
    src: "/images/slides/northern-light.jpg",
    alt: "Green aurora over a mountain range",
    category: "Expedition",
    description: "Field journal",
  },
  {
    title: "Open water",
    src: "/images/slides/open-water.jpg",
    alt: "Sunlight reflecting across the ocean",
    category: "Travel",
    description: "Coastal study",
  },
];

export default function LiquidMorphologyExample() {
  return (
    <LiquidMorphologySlideshow
      slides={slides}
      effect="ripple"
      autoPlay
      interval={5000}
      transitionDuration={1.8}
      initialIndex={0}
      brandName="Northstar"
      navItems={[
        { label: "Work", href: "#work" },
        { label: "About", href: "#about" },
      ]}
      kicker="Selected journeys"
      headline="Stories shaped by light and motion."
      description="A cinematic collection of landscapes from around the world."
      ctaLabel="Explore the journal"
      ctaHref="#journal"
      clickToAdvance
      keyboardControls
      className="h-[42rem]"
    />
  );
}
```

## Source files

- components/ui-components/liquid-morphology-slideshow.tsx — Liquid Morphology Slideshow component

## Canonical resources

- Documentation: https://skecher-ui.com/docs/liquid-morphology-slideshow
- Registry item with complete source: https://skecher-ui.com/r/liquid-morphology-slideshow.json
- Component AI context: https://skecher-ui.com/llms/liquid-morphology-slideshow