Astra

Morph Slider

WebGL slider that melts between images with a displacement transition.

Morph Slider, a Astra component

Use Morph Slider in your project

Choose JavaScript or TypeScript and plain CSS or Tailwind. Enable JavaScript for the interactive preview, customization controls and source tabs.

npx shadcn@latest add @react-bits/MorphSlider-TS-TW
How to install Astra components

Related components

  • Fluid Glass

    A 3D glass object that refracts your headline, image or video, follows the cursor and melts between shapes.

  • Circular Carousel

    A 3D ring of images with bendable cards, momentum drag, snapping and click to focus.

  • Decay Card

    An image card that tears and melts as the pointer moves, then pulls itself back together.