Introducing Blossom Carousel

Carousels have become a powerful and popular choice among the many ways to structure content hierarchy. They are one of the main means to create a spatial form of progressive disclosure by collapsing vertical real estate while inviting horizontal exploration, and their scrolling behavior makes them stand out especially on touch devices where swiping is such a natural gesture.

A scroll container works naturally with touch, but dragging with a mouse or trackpad is still something developers need to build themselves. Historically, carousel libraries solved this by taking over completely: replacing the browser's scrolling model with their own JavaScript-powered implementation.

That made sense when the platform lacked the primitives we have today.

But the web has changed.

The current state of carousels

A carousel is, at its core, simply a horizontal scroll container. Browsers know exceptionally well how to handle scrolling with smooth momentum, rubber-banding, keyboard navigation, touch handling and more. All of it ships for free inside the browser.

So it's strange that almost every carousel library throws all of that away. To make slides draggable, they stop scrolling entirely and slide a track around with CSS transforms instead.

Eventhough scrolling is the first casualty, the few libraries that try to win it back bolt scrolling on after the fact by intercepting the wheel, second-guessing every flick and nudge the browser would have handled for free. Either way you pay the same tax: motion that feels just slightly off, layout that fights the platform, and a bundle that grows with every edge case the browser already solved. And once scrolling is simulated, all its native capabilities are lost.

On top of that, because on touch devices dragging and scrolling is the same gesture many developers started rolling 2 different carousel solutions, one for touch and one for pointer devices.

The result is a strange split and we ended up with two different carousel implementations where one should be enough.

Introducing Blossom

Blossom is a carousel built on a real scroll container. Your slides are real markup, your layout is real CSS, and the scroll position is the real, native source of truth. On top of that, Blossom adds one thing: a lightweight, physics-based drag engine for pointer devices that hands off seamlessly to native scrolling.

Here it is. Drag it with a mouse, flick it on a trackpad, swipe it on a phone. Same component, works everywhere.

Because Blossom is built on a real scroll container, the browser's capabilities remain available.

That means features like these work naturally:

• scroll-snap controls slide alignment
• position: sticky creates layered layouts
• scroll-driven animations respond to real movement
• scroll-state queries can react to scroll position

Blossom does not introduce another abstraction for these things. It lets the platform continue doing what it already does best.

Your CSS describes the experience. Blossom simply makes the interaction complete.

Built for the future of the web

The direction of the platform is moving toward more native carousel capabilities.

Browser vendors are already exploring ways to bring common carousel features directly into CSS and HTML, including native controls and more advanced scrolling behavior.

Blossom is designed around that same direction. Rather than fighting the platform, it follows it. The future of carousels is not more JavaScript controlling more pixels. It is better primitives, composed together.

Get started

Blossom ships as first-class components for React, Vue, Svelte, and Web Components, all sharing one framework-agnostic core. Pick the package that matches your stack:

npm install @blossom-carousel/vue

npm install @blossom-carousel/react

npm install @blossom-carousel/svelte

npm install @blossom-carousel/web

npm install @blossom-carousel/core

Install Blossom for your framework, copy an example or install the Agent Skills to get started.

npx skills add https://www.blossom-carousel.com