Stepped Morph Image Slider

Stepped morph image slider for React: each slide is revealed through a stepped skyline mask that morphs column by column into the next picture, with a story-style segmented timeline that fills as it autoplays, arrows, keyboard and swipe. Painted landscape demo, reduced-motion aware. Use as a hero slider or travel gallery.

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

"use client"

import SteppedMorphSlider from "@/components/ui/stepped-morph-slider"

export default function Demo() {
  return (
    <div className="w-full">
      <SteppedMorphSlider />
    </div>
  )
}