A growing visual directory of carousels, heroes, transitions, and every other element you need when starting a website. Filter by category, click a tile to see the demo + code + variants.
Big image + small thumbnails. The Airbnb/Zillow pattern for property galleries.
Native swipe gallery. Sliver of next item visible — strong "swipe me" cue.
Grid of tiles that open fullscreen on tap. Uses CSS :target, zero JS.
Drag handle reveals one image under another. Renovations, staging.
Cards stacked with rotation. Luxury feel for curated 4–6 item sets.
Auto-rotating slideshow, pure CSS. Ambient hero backgrounds.
Atmospheric video + dark gradient + content. The King Kong pattern.
Transparent over hero, solid dark on scroll. The premium-site standard.
Input + button as a single pill. The King Kong agency hero CTA.
Single dark section mid-page. The "trust vault" moment.
Tiny circle + expanding ring pulse. Scarcity, status, availability.
Subtle arrow nudge animation. Adds momentum without screaming.
Panels expand on click. Pure CSS via :has(). 3–6 zones max.
Split-screen landing. One URL, two visual directions to self-select.
Letters fade in one by one with realistic neon ignition. Retro / diner brands.
Top gradient bar that fills as the user scrolls. Long-page reading cue.
Elements fade up into place as they enter the viewport. IntersectionObserver.
Floating circle bottom-right, appears after scroll, smooth-scrolls home.
Diagonal light streak sweeps across the button. Premium polish.
3-card row with overlay + slow bg scale on hover. Apple-product-page feel.
Active carousel dot stretches into a pill. Unmistakable position cue.
Full-screen overlay, blur backdrop, staggered link reveals. Pure CSS.
Frosted-glass container with active link as a brand-colored pill.
Header collapses from 72px → 56px, gradient → glass. Tiny JS.
Polished-metal CTA. Gradient + 4-layer shadow stack. Retro / automotive.
Stacked-ring glow that intensifies on hover. The hero CTA.
Use position: fixed on the header, not sticky. Hero starts at y=0; header floats. The seam class of bugs vanishes.
background-attachment: fixed on the section. Auto-clipped to section bounds, no JS. Don't use sticky or position:fixed+JS — both have bugs. The chevy55 / "Cómo lo hacemos" effect.
Same product, multiple colors. Bg + jacket morph while price/sizes stay put. Previous variant lives in corner.
Active link auto-syncs to the section in view. IntersectionObserver pattern.
Interactive hover swaps "popular" highlight between tiers.
Anton + Cormorant Garamond + Geist — the pricing-led marketing stack.
ES · EN · DE · CAT pill in the nav. The Peñaranda y Cobo pattern.
Dark veil hides a vibrant layer underneath. Soft-edged mask follows the cursor — like a flashlight in a dark room. Two pseudo-elements + 10 lines of JS.
Infinite auto-scrolling logo strip. List duplicated in HTML, translate -50% in keyframes for seamless loop. Pauses on hover.
Stats count up from 0 to target as they enter viewport. IntersectionObserver + requestAnimationFrame with ease-out cubic.
Translate -4px + soft shadow + border-color accent on hover, 300ms cubic-bezier. The canonical "this is clickable" cue.
Animated underline draws left → right in 300ms on hover. Pseudo-element with transform: scaleX(0) → 1.
Two stacked box-shadows create a ring with white-space offset around inputs on focus. Form polish + accessibility win.
CSS custom properties at :root, .dark class override on <html>. One toggle inverts the whole site. Optional auto-by-time-of-day.
Gentle float up/down on a slow ease-in-out loop. Shadow expands as element rises. "Treading in water."
SVG path draws from left to right via stroke-dasharray + stroke-dashoffset animation. Sells "progress" viscerally.
Linear-gradient + background-clip: text + transparent color. Optional flow animation by shifting bg-position.
Hover a top-level link reveals a panel of subpages. Visibility-delay trick keeps menu clickable during fade-out. :focus-within for keyboards.
Inline SVG fractal noise as overlay, low opacity, blend-mode overlay. Adds film-grain texture. Imperceptible alone, conspicuously absent when missing.
Radial-gradient + background-size repeating dots. Pure CSS, single property. Common on developer-tool / SaaS aesthetics.
Large blurred organic colored shapes drift behind content. Filter: blur + transform animation. Heavy on GPU — limit to 3.
Embed a Spline community-remix 3D scene as a hero element. Cursor-tracking, depth, light — without writing Three.js by hand. ~5 MB trade-off.
Generate brand-specific 3–5s video clips via Higsfield's Sedence 2.0 model, called from Claude via MCP. Replaces stock footage and weeks of designer work.