Blossom Carousel Logo
GitHub

Native scrolling.Physical draging.Built for modern web.

Blossom enhances native scrolling instead of replacing it.

Built with Blossom

Used in high quality productions and downloaded over 45.5K times month over month.

DX Designed with intention

Slots right into your project without any abstraction. 

<BlossomCarousel id="my-carousel">
   <div data-blossom-slide></div>
   <div data-blossom-slide></div>
   <div data-blossom-slide></div>
   ...
</BlossomCarousel>

<BlossomPrev for="my-carousel">←</BlossomPrev>
<BlossomNext for="my-carousel">→</BlossomNext>
<BlossomDots for="my-carousel"/>
Navigation components

lazy-loaded only when needed

npm install 
#my-carousel {
   scroll-snap-type: x mandatory;
}

.slide {
   scroll-snap-align: center;
   animation: linear slide both;
   animation-timeline: view();
}

@keyframes {
   from {
      transform: scale(0.5);
   }
}
CSS config
Framework guides

News and updates

The web evolves, Blossom evolves with it. Stay updated with the latest news.

Everything you need, nothing you don't

Simple by design, powerful when it matters.

Native scrolling

Used in high quality productions and downloaded over 54.000 times month over month.

Physical dragging

Mouse dragging that feels native and seamlessly hands off between scroll and drag.

CSS config

Works with CSS scroll-snap, position sticky, scroll-driven animations and more.

Framework wrappers

With Blossom's Framework wrappers you can get up and running in no time.

Full control

Nothing is overridden or restricted, letting you customize every detail without friction.

Small by design

Blossom's engine only loads when needed making it 0kb on touch devices.

Make it draggable.

Get Started