Glide — Carousels that feel delightful to swipe

Summary

A cheerful, friendly multi-card carousel rendered as a complete one-screen 'Glide' landing on a warm cream palette with a sky-blue + coral gradient accent. A sticky translucent cream nav sits over a centered hero (a 'Prompt library . Carousel pattern' pill eyebrow, an extrabold 'Carousels that feel delightful to swipe' headline whose 'delightful to swipe' runs a sky-to-coral gradient clip with a hand-drawn coral underline squiggle, a muted intro line, and a 'Try the carousel' / 'Copy the prompt' button pair). Then the carousel itself, set inside a big white rounded showcase panel with soft blurred corner blobs: a meta row ('Featured collections' title + a 'Draggable' pill) above a draggable, snap-scrolling track of rounded cream cards (three in view on desktop, two on tablet, one on mobile) each with a floating gradient icon tile, a numbered uppercase category pill, a title, a description and a swatch/feature footer, with rounded prev/next arrow buttons that hover to the accent color and a dot pagination row whose active dot stretches into a sky pill. Below: a full-bleed white 'Why Glide' feature band (a three-up rounded card row), a 'How it works' two-column section (a numbered three-step list beside a floating 'prompt.txt' code-card mock with a Generate button), a full-bleed sky-to-coral gradient CTA panel with white blurred blobs, and a cream footer. Poppins throughout, Iconify Phosphor 'ph:*' icons, cheerful and soft.

Style

A warm, cheerful, playful aesthetic where soft pastels and rounded everything make the whole page feel friendly and tactile. The page sits on a warm cream #fdf9f3 ground, with a two-tone accent system of sky-blue #38bdf8 and coral #fb7185 (often combined in a left-to-right gradient on the brand mark, the headline highlight, the CTA panel and primary buttons), slate text (slate-900 headings, slate-600/500 body, slate-400 muted) and pure-white surfaces for the showcase panel, the feature/how cards and the code-card mock. Cards and tiles are softly oversized-rounded (cards rounded-[1.4rem], the showcase panel rounded-[2rem], the CTA rounded-[2.5rem], buttons fully rounded-full) with custom soft layered shadows (shadow-soft a sky-tinted glow, shadow-card a neutral lift, shadow-lift a coral-tinted hover lift). Typography is Poppins at every weight (400..800), extrabold for headlines with tight tracking, medium for nav/body. Signature playful touches: a hand-drawn coral SVG underline squiggle under the gradient-clipped headline phrase; a 6s floaty keyframe (translateY -10px) gently bobbing the card icon tiles and the code-card mock (staggered via animation-delay); a faint sky radial-dot 'grain' texture (radial-gradient dots, 22px tiling) on the hero and how-it-works bands; soft blurred decorative color blobs (sky/20, coral/20) bleeding off the hero and inside the showcase panel; small ring-2 ring-white color swatch dots and gradient icon tiles inside cards. The carousel is genuinely interactive: scroll-snap-type x mandatory with snap-align center, a hidden scrollbar (no-scrollbar), cursor-grab/active:cursor-grabbing pointer-drag-to-scroll, dot pagination whose active dot stretches from a 2.5 dot into a w-7 sky pill, and arrows that hover from neutral to sky (prev) / coral (next). Smooth scroll, antialiased text. Cheerful, soft, approachable; warm human copy with zero em-dashes.

Layout & Structure

A sticky translucent cream nav, then a centered hero (a pill eyebrow + an extrabold gradient-highlighted headline with a hand-drawn underline + a muted intro line + a two-button row, over soft blurred corner blobs and a faint dot grain), then the showcase section (a big white rounded panel holding a meta row above the draggable snap carousel of rounded cards with prev/next arrows and a dot-pagination row), then a full-bleed white 'Why Glide' feature band (a three-up card row), then a 'How it works' two-column section (a numbered three-step list beside a floating 'prompt.txt' code-card mock), then a full-bleed sky-to-coral gradient CTA panel, then a cream footer. Most containers center in mx-auto max-w-6xl px-6.

Sticky translucent nav

Hero

Showcase panel + carousel meta row

The carousel (track, cards, arrows)

Dot pagination

Why Glide feature band (full-bleed)

How it works (two-column + code-card mock)

CTA panel (full-bleed gradient)

Footer

Responsive reflow

Special Notes

Built on the Tailwind CDN with a custom theme.extend: fontFamily.sans = ['Poppins','sans-serif']; colors.cream #fdf9f3, colors.sky #38bdf8, colors.coral #fb7185; boxShadow.soft '0 18px 40px -18px rgba(56,189,248,0.35)', boxShadow.card '0 24px 48px -22px rgba(15,23,42,0.18)', boxShadow.lift '0 32px 60px -24px rgba(251,113,133,0.30)'. Google Fonts: Poppins (weights 400;500;600;700;800). CSS keys: html scroll-behavior smooth; body background #fdf9f3 + font-sans + text-slate-800 + antialiased. .no-scrollbar { ::-webkit-scrollbar display none; -ms-overflow-style none; scrollbar-width none }. .track { scroll-snap-type: x mandatory } and .snap-card { scroll-snap-align: center }. @keyframes floaty { 0%,100% transform translateY(0); 50% transform translateY(-10px) }; .floaty { animation floaty 6s ease-in-out infinite } (per-card inline animation-delay staggers it). .grain { background-image radial-gradient(rgba(56,189,248,0.06) 1px, transparent 1px); background-size 22px 22px }. Carousel JS: builds one dot per card; cardStep = cards[0] width + 20 (gap-5); activeIndex = round(track.scrollLeft / cardStep); setActive() stretches the active dot to an h-2.5 w-7 bg-sky shadow-soft pill (others h-2.5 w-2.5 bg-slate-300, hover bg-coral); the scroll listener is rAF-throttled and passive; dots scrollTo their index, prevBtn/nextBtn scrollBy +/- a step (smooth); pointer drag-to-scroll via pointerdown (capture, record startX + startScroll) / pointermove (scrollLeft = startScroll - dx, mark moved if |dx|>3) / pointerup, and a capture-phase click handler that preventDefaults the click if a drag moved. Icons via Iconify (Phosphor 'ph:*' set: arrows-out-cardinal-bold, sparkle-fill, arrow-right-bold, copy-bold, hand-pointing-bold, caret-left-bold, caret-right-bold, palette-fill, squares-four-fill, cursor-click-fill, heart-fill, rocket-launch-fill, ruler-bold, circle-half-tilt-bold, lightning-fill, magnet-straight-bold, package-bold, check-circle-bold, hand-swipe-right-bold, dots-three-circle-bold, devices-bold, magic-wand-bold, twitter-logo-bold, github-logo-bold, dribbble-logo-bold) loaded from https://code.iconify.design/3/3.1.0/iconify.min.js. Cream #fdf9f3 is the ground, slate is the type ramp (slate-900 / 600 / 500 / 400), sky #38bdf8 + coral #fb7185 are the twin accents (used solo on cards/buttons and combined as a sky-to-coral gradient on the brand mark, the headline highlight, the numbered step 1/2 badges, the CTA panel and primary buttons); white is the showcase panel / feature+how card / code-card surface. The reusable prompt-library value is the MULTI-CARD CAROUSEL pattern: a draggable, scroll-snapping track of rounded cards (three in view on desktop, two on tablet, one peeking on mobile), each with a floating gradient icon tile + a numbered category pill + a title + a description + a swatch/feature footer, driven by rounded accent-hover prev/next arrows and a stretching-dot pagination row, all wrapped into a complete one-screen cheerful 'Glide' landing (a sticky translucent cream nav, a centered hero with a gradient-clipped + hand-underlined headline, a white showcase panel, a 'Why Glide' feature band, a 'How it works' two-column section with a floating code-card mock, a sky-to-coral gradient CTA panel and a footer). Original prompt-library product for the placeholder brand 'Glide', anchored on the canonical shadcn/ui multi-item carousel 'sizes' pattern (https://ui.shadcn.com/docs/components/carousel#sizes) as a LAYOUT anchor and rebuilt warm + cheerful. Responsive: cards step their min-width so 3/2/1 show across lg/sm/base (the track always a snap-x overflow-x-auto drag-to-scroll row), the arrows hide below sm (drag + dots remain), the nav links hide below md, the headline scales 4xl -> 5xl -> 6xl, the feature grid + how-it-works + showcase meta row + button rows + footer all collapse to one column / stack below their breakpoints, no overflow at 390px.