Twilight Sky
A smooth cross-fade transition between content panels.
The carousel-wc component supports two display modes. By default it uses scroll-snap for a native horizontal scroll experience. When a transition attribute is set and the browser supports the View Transitions API, it switches to a stacked-grid layout where slide changes are animated with CSS view transitions.
Cross-fade between slides. The outgoing slide fades out while the incoming slide fades in.
A smooth cross-fade transition between content panels.
Rich green tones evoking a lush canopy overhead.
Warm orange hues fading gently between slides.
Deep magenta gradients with a soft transition feel.
Directional slide animation. Content slides left when advancing and right when going back, matching the navigation direction.
Slides in from the right as you move forward.
Directional awareness creates a natural flow.
Warm yellows sliding across the viewport.
Bold reds anchoring the final slide position.
The outgoing slide scales down while the incoming slide scales up, creating a zoom-like depth effect.
Scale transitions add a sense of depth to slide changes.
Fresh greens zooming into focus.
Earthy tones expanding to fill the frame.
Without transition, the carousel uses native scroll-snap. Swipe or drag to navigate. This is the progressive enhancement baseline and works without the View Transitions API.
Native horizontal scroll with snap points.
Smooth momentum scrolling on touch devices.
Works in every browser, no API required.
The reliable fallback for all environments.