Carousels & Tickers

Top-of-page rotating announcement bar with dot indicators and a session-persistent dismiss control, vanilla JS only.

Astro

Auto-advancing carousel where segmented progress bars double as slide indicators, with pause-on-hover and a play/pause control.

React

Drag-handle before/after image comparison slider using pointer events and a keyboard-accessible slider role.

React

Horizontal card scroller on native CSS scroll-snap with edge-aware arrow buttons and keyboard navigation.

React

One slide engine with three swappable indicator styles — dots, prev/next arrows only, or a numeric counter.

React

CategoryHoverGallery — a grid of category cards, each holding a strip of thumbnails that shifts left and zooms slightly on hover/focus.

Astro

Horizontally scrollable filter pill row with edge-fade masks, conditional nudge arrows and roving-tabindex keyboard navigation.

React

3D coverflow-style carousel using CSS perspective and rotateY transforms, with a flattened fallback under reduced motion.

React

Screenshot carousel inside a CSS-drawn phone or browser-chrome frame, with crossfade, arrows, dots and swipe.

React

Price/range filter with two independently draggable handles on one track, each a fully keyboard-operable slider role.

React

FreeScrollMediaStrip — horizontal strip of variable-width image cells with native momentum scroll (no forced snapping — this is a free-scroll strip, not a paged carousel) plus pointer-drag-to-scroll on desktop and fade-mask edges.

Astro

Framework-free vanilla-JS one-up carousel for arbitrary slotted content, with arrows, dots, keyboard and swipe.

Astro

HeroFullscreenSlider — N-slide full-viewport hero slider: each slide is a full-bleed background image with a centred frosted-glass content card (eyebrow/title/description/CTA).

Astro

Full-bleed crossfading hero image slider with scrim overlay, headline/CTA content, autoplay, arrows, dots and swipe.

React

Large image preview with a clickable, auto-scrolling thumbnail rail, arrow/keyboard navigation and swipe support.

React

InfinitePanZoomGallery — items scattered across a pannable, zoomable canvas.

React

CSS-only infinite marquee of client/partner logos that loops seamlessly in either direction and pauses on hover or focus.

Astro

Breaking-news style ticker with a fixed live tag and a CSS-only infinite-scrolling headline marquee.

Astro

A user-paced, never-autoplaying in-app tour: icon, title and body slides with a progress-dot rail, explicit Back/Next/Skip controls and a finishing CTA.

React

A scroll-snap row of episode cards with a stable per-episode waveform that animates only on the externally controlled playing card. Presentational — it drops into any existing player store.

React

PortfolioGalleryBoxed — work/portfolio gallery on native CSS scroll-snap, capped at a max container width, px-stepped cell height across breakpoints.

Astro

PortfolioGalleryCompact — work/portfolio gallery on native CSS scroll-snap, boxed at max-w-7xl, the smallest cell-height ladder of the three gallery variants.

Astro

PortfolioGalleryFullBleed — full-bleed work/portfolio gallery on native CSS scroll-snap, no max-width cap, vh-based cell height.

Astro

PortfolioGridGallery — static project grid: image, category label, title and tag chips per card, with a gentle hover zoom + lift.

Astro

Pricing cards that render as a full grid on desktop and collapse into a one-card-at-a-time snap-scroll carousel with dots on mobile.

React

Large-type quote rotator with a pure crossfade transition, autoplay, dots and an explicit pause control.

React

RadialOrbitGallery — items arranged in a ring you drag to rotate (pointer events + a small rAF inertia decay, no animation library).

React

Pinned section where vertical page scroll drives horizontal image movement, falling back to a plain snap-scroll row under reduced motion.

React

Tinder-style stacked card deck that tracks pointer drag and flies off past a threshold, with explicit accept/reject buttons as a non-drag path.

React

CSS-only infinite marquee of stat tiles with a count-up animation triggered on scroll-into-view.

Astro

Discrete step slider snapped to labeled ticks (plan tiers, quantity breaks), draggable with full keyboard support.

React

Two side-by-side scroll-snap tracks that move in lockstep, so dragging either one snaps the other to match. A mobile-friendly comparison carousel rather than a single drag-reveal slider.

React

Scroll-snap team cards that flip in 3D on click, tap or Enter to reveal a bio, one open at a time — a click-first reveal that works on touch, unlike hover-only team cards.

React

Multi-card testimonial carousel on native CSS scroll-snap showing a peek of the next card, with synced dots and arrow controls.

React

One-up crossfading testimonial carousel with arrows, dots, autoplay with pause-on-hover, swipe and keyboard navigation.

React

A continuously scrolling wall of testimonial cards across two rows moving in opposite directions, each pausing independently on hover or focus.

Astro

CSS-only scrolling text strip for announcements, joining phrases with a separator glyph and looping infinitely.

Astro

Horizontal year-marker timeline with a filling progress line, clickable markers and a content panel for the active event.

React

Vertical auto-advancing news/updates ticker with manual step controls and an explicit pause toggle.

React