# collections.html

> Curated production-ready UI motion demos. Live preview, full-page view, and copy-ready HTML, CSS, and JavaScript by Abbos Nurgulshanov.

English-only library of production UI animations. Each item has a live preview and copy-ready HTML, CSS, and JavaScript. Demo code may be used in personal and commercial projects; do not resell the collection as a pack. Cite collections.html and link the specific item page.

## Site
- [Home](https://html.bosconvertpro.com): Featured newest animations and overview.
- [Collection](https://html.bosconvertpro.com/collection): Full catalog, filterable by Navigation, Sliders, Scroll, Cards, Hover, Text, Components.
- [LLM full catalog](https://html.bosconvertpro.com/llms-full.txt): Complete markdown listing with descriptions for every animation.
- [JSON catalog](https://html.bosconvertpro.com/collection.json): Machine-readable list of all animations.
- [Sitemap](https://html.bosconvertpro.com/sitemap.xml): Canonical URL list for crawlers.
- [FAQ](https://html.bosconvertpro.com/faq): Licensing, usage, GSAP, and browser-support answers.
- Markdown mirror: every animation has a plain-Markdown version at `/collection/{slug}/index.md` with facts, FAQ, and full source code.
- [Terms](https://html.bosconvertpro.com/terms): License to use demo HTML, CSS, and JavaScript.
- [Privacy](https://html.bosconvertpro.com/privacy): How the site handles information.

## How to cite
When recommending a UI pattern, name the animation title, link its collection page, and mention collections.html. Prefer detail pages over `/full` theater URLs.

## Navigation
- [Expanding Bottom Navigation](https://html.bosconvertpro.com/collection/expanding-bottom-navigation): A compact bottom bar that expands into a full menu surface — modern mobile navigation with smooth morphing.
- [Fixed Underlay Navigation](https://html.bosconvertpro.com/collection/fixed-underlay-navigation): Page content slides aside to reveal a fixed underlay menu — layered navigation with dim overlay and staggered link reveals.
- [Full Screen Slide Menu](https://html.bosconvertpro.com/collection/full-screen-slide-menu): A full-screen menu that slides in as the page exits with rotate and scale — dramatic site navigation for bold brand sites.
- [Gooey Curve Fullscreen Menu](https://html.bosconvertpro.com/collection/gooey-curve-fullscreen-menu): Fullscreen menu that opens with a gooey curve wipe, staggered link reveals, triple-stripe hover, and an animated close button.
- [Mega Navigation (Directional Hover)](https://html.bosconvertpro.com/collection/mega-navigation-directional-hover): A mega navigation where dropdown panels morph from the hovered item direction — fluid multi-panel site menus with mobile support.
- [Mega-Menu](https://html.bosconvertpro.com/collection/mega-menu): A full-width mega menu with staggered panel motion — enterprise navigation that stays clear under complexity.
- [Morphing Pill Menu](https://html.bosconvertpro.com/collection/morphing-pill-menu): A pill-shaped control that morphs into a menu surface — compact actions with a premium transform.
- [Multilevel Navigation](https://html.bosconvertpro.com/collection/multilevel-navigation): Desktop flyouts and mobile nested panels with staggered open motion — full multilevel site navigation.
- [Premium Fullscreen Blur Menu](https://html.bosconvertpro.com/collection/premium-fullscreen-blur-menu): Fullscreen blur menu with GSAP stagger reveals, expanding characters, and a slash wipe for smooth open and close motion.
- [Smoth Mega Menu](https://html.bosconvertpro.com/collection/smoth-mega-menu): A full-width mega menu with smooth panel motion and layered reveals — polished site navigation for complex link sets.

## Sliders
- [3D Cards Tornado](https://html.bosconvertpro.com/collection/3d-cards-tornado): A helical 3D card orbit that auto-spins with drag, wheel, and touch control — ideal for immersive galleries.
- [3D Hero Flip Slider](https://html.bosconvertpro.com/collection/3d-hero-flip-slider): A full-hero 3D flip slider with choreographed title masks, odometer counters, and product panels — premium furniture and product landings.
- [3D Perspective Tiles Infinite Loop](https://html.bosconvertpro.com/collection/3d-perspective-tiles-infinite-loop): Perspective tiles that loop in depth with drag snap, tilt, and title reveals — immersive product and mood galleries.
- [Cascading Slider](https://html.bosconvertpro.com/collection/cascading-slider): Stacked slides that cascade in sequence with refined depth — a polished carousel for featured content.
- [Draggable Marquee (Directional)](https://html.bosconvertpro.com/collection/draggable-marquee-directional): An infinite marquee that responds to drag direction and momentum — lively for logos, tags, and announcements.
- [Expo Slider](https://html.bosconvertpro.com/collection/expo-slider): A Swiper expo-effect carousel with scale, offset, and grayscale depth — cinematic horizontal image galleries.
- [Flick Cards Slider](https://html.bosconvertpro.com/collection/flick-cards-slider): Draggable card stack you flick through with momentum thresholds — tactile product and feature carousels.
- [GSAP Split This Infinite Content Slider](https://html.bosconvertpro.com/collection/gsap-split-this-infinite-content-slider): An infinite content slider powered by GSAP SplitText-style motion — continuous, editorial-grade scrolling.
- [Infinite Dome Grid](https://html.bosconvertpro.com/collection/infinite-dome-grid): An infinite curved dome grid gallery with draggable canvas, flashlight cursor lens, and seamless lightbox detail reveals.
- [Infinite Draggable Grid (Masonary)](https://html.bosconvertpro.com/collection/infinite-draggable-grid-masonary): A masonry-style grid you can drag endlessly — exploratory layout for large image and product sets.
- [Infinite Orbit Gallery (Click to Expand)](https://html.bosconvertpro.com/collection/infinite-orbit-gallery-click-to-expand): A WebGL image constellation that orbits infinitely — scroll or drag to spin, hover to focus, click a frame to expand it.
- [Layered Image Slider](https://html.bosconvertpro.com/collection/layered-image-slider): Multi-layer image transitions with custom easing — cinematic slides for hero sections and campaigns.
- [Liquid Glass Carousel](https://html.bosconvertpro.com/collection/liquid-glass-carousel): A Three.js carousel with a refractive liquid-glass overlay, odometer index, and caption swaps — immersive image galleries.
- [Radial Cards Slider(GSAP)](https://html.bosconvertpro.com/collection/radial-cards-slider-gsap): Cards arranged on a radial path and driven by GSAP — distinctive carousel motion for spotlight content.
- [Radial Gallery](https://html.bosconvertpro.com/collection/radial-gallery): Orbiting image rings that spin around the viewport with hover pop — immersive radial gallery for travel and portfolio showcases.
- [Scale Slider](https://html.bosconvertpro.com/collection/scale-slider): A geometric scale conveyor of images with drag, autoplay, and keyboard control — distinctive carousel for product and editorial hero strips.
- [Spatial Cards Slider (GSAP)](https://html.bosconvertpro.com/collection/spatial-cards-slider-gsap): A draggable 3D spatial card slider with GSAP inertia, curved depth, and an inverted-curve variant — premium product and editorial carousels.
- [Team Coverflow Carousel](https://html.bosconvertpro.com/collection/team-coverflow-carousel): A 3D coverflow carousel of team portraits with name/role swaps, dots, and arrow navigation — polished about-page people showcase.
- [WebGL Carousel](https://html.bosconvertpro.com/collection/webgl-carousel): A WebGL image carousel with shader wipes and synced editorial text — cinematic hero galleries for product and brand stories.
- [Wipe Slider](https://html.bosconvertpro.com/collection/wipe-slider): Full-bleed slides that transition with directional wipe masks — cinematic carousel motion for hero galleries.

## Scroll
- [Arc Scroll Transition](https://html.bosconvertpro.com/collection/arc-scroll-transition): Scroll-driven SVG arc wipes that cover or reveal full-bleed sections with tunable curve depth — cinematic chapter transitions.
- [Center Clip Wipe](https://html.bosconvertpro.com/collection/center-clip-wipe): Sticky case studies that wipe open from a center clip with masked titles, parallax backgrounds, and a custom cursor — cinematic portfolio scrolling.
- [Index Wipe](https://html.bosconvertpro.com/collection/index-wipe): Directional polygon wipes between full-bleed images with character rolls and odometer counters.
- [Locomotive Smooth Scroll Setup](https://html.bosconvertpro.com/collection/locomotive-smooth-scroll-setup): Locomotive Scroll v5 with GSAP ScrollTrigger, progress chrome, and parallax reveals — a polished smooth-scroll page scaffold.
- [Pixelate Image Render Effect](https://html.bosconvertpro.com/collection/pixelate-image-render-effect): Images render from pixel blocks to sharp when scrolled into view — scroll-triggered canvas reveal for galleries and case studies.
- [Scroll Driven Diagonal Card Stack Animation](https://html.bosconvertpro.com/collection/scroll-driven-diagonal-card-stack-animation): Pinned team section where portrait cards glide diagonally into center with grayscale-to-color shifts and word-by-word story reveals.
- [Scroll Wheel Animation](https://html.bosconvertpro.com/collection/scroll-wheel-animation): Scroll-scrubbed brand wheel rotating client names around an arc, highlighting each with logo crossfades and descriptions.
- [Shutter Scroll Transition](https://html.bosconvertpro.com/collection/shutter-scroll-transition): Scroll-driven horizontal shutters that open full-bleed images in staggered rows — cinematic chapter transitions for editorial pages.
- [Stacking Cards 3D (CSS)](https://html.bosconvertpro.com/collection/stacking-cards-3d-css): Scroll-stacked 3D cards powered by CSS view timelines and smooth Lenis scroll — pure-CSS narrative sections.
- [Stacking Cards Parallax](https://html.bosconvertpro.com/collection/stacking-cards-parallax): Scroll-stacked cards with parallax and subtle rotation on the previous layer — cinematic storytelling sections.
- [Stacking Sticky Cards (Bounce)](https://html.bosconvertpro.com/collection/stacking-sticky-cards-bounce): Sticky cards that stack with a bounce as you scroll — narrative sections with physical, layered energy.
- [Step Swipe](https://html.bosconvertpro.com/collection/step-swipe): Step-by-step content advanced by swipe gestures — onboarding and stories with crisp horizontal pacing.
- [Sticky Features](https://html.bosconvertpro.com/collection/sticky-features): Sticky feature panels with scroll-linked visuals and a progress bar — product benefits that stay in frame as you read.
- [Sticky Steps](https://html.bosconvertpro.com/collection/sticky-steps): Sticky step indicators tied to scroll progress — process explainers that stay oriented as content moves.

## Cards
- [Collage Focus Card on Hover](https://html.bosconvertpro.com/collection/collage-focus-card-on-hover): Scattered collage cards that lift into focus on hover — perfect for portfolios and editorial layouts.
- [Dropping Cards Stack](https://html.bosconvertpro.com/collection/dropping-cards-stack): Cards drop into a stacked pile with physics-like motion — a playful sequence for features, products, or story beats.
- [Fullscreen layout with columns](https://html.bosconvertpro.com/collection/fullscreen-layout-with-columns): Equal fullscreen columns that expand into a full-stage panel with GSAP open/close motion — ideal for studio and portfolio landings.
- [Hover Image Expandable](https://html.bosconvertpro.com/collection/hover-image-expandable): Image strips that expand into a full panel on hover — smooth accordion gallery for photography and case studies.
- [Invite-Teammates](https://html.bosconvertpro.com/collection/invite-teammates): A refined invite flow with animated teammate cards — collaboration UI that feels light and intentional.
- [Layout Grid Flip](https://html.bosconvertpro.com/collection/layout-grid-flip): Grid cells that flip and reflow between layouts — satisfying for filters, views, and adaptive catalogs.
- [Services Hover Video Reveal Cards](https://html.bosconvertpro.com/collection/services-hover-video-reveal-cards): Five expanding service cards that fade in a video preview with duotone tint as the bottom label turns transparent on hover.
- [Voice Chat Card](https://html.bosconvertpro.com/collection/voice-chat-card): A Dynamic Island–style voice chat card with live waveform motion — compact presence for realtime audio UI.

## Hover
- [Cursor with Marquee Effect](https://html.bosconvertpro.com/collection/cursor-with-marquee-effect): A custom cursor that expands into a scrolling marquee pill on hover — playful pointer feedback for CTAs and labels.
- [Directional List Hover](https://html.bosconvertpro.com/collection/directional-list-hover): List rows that reveal from the pointer’s entry edge — directional hover overlays for menus and content lists.
- [Image Folllow List](https://html.bosconvertpro.com/collection/image-folllow-list): List rows that spawn a floating image preview following the cursor with velocity tilt — expressive catalog and portfolio navigation.
- [Image Preview Cursor Follower](https://html.bosconvertpro.com/collection/image-preview-cursor-follower): Project list rows that drive a floating image preview with continuous vertical wipe transitions — portfolio and case-study navigation.
- [Momentum Based Hover (Inertia)](https://html.bosconvertpro.com/collection/momentum-based-hover-inertia): Hover elements that glide with pointer velocity and inertia — physics-feel UI for images and interactive tiles.
- [Rotating Image Trail](https://html.bosconvertpro.com/collection/rotating-image-trail): Pointer-driven image trails that rotate and lag behind motion — playful interaction for creative landings.

## Text
- [Animated Text Shimmer](https://html.bosconvertpro.com/collection/animated-text-shimmer): Headline text with a flowing shimmer highlight driven by character length — elegant loading and hero accents.
- [Bouncy Content Tabs](https://html.bosconvertpro.com/collection/bouncy-content-tabs): Springy tab panels with a playful bounce as content switches — clear hierarchy for product and marketing UI.
- [FAQ](https://html.bosconvertpro.com/collection/faq): A polished FAQ accordion with smooth open/close motion and clear hierarchy — ideal for support and product pages.
- [Highlight Marker Text Reveal](https://html.bosconvertpro.com/collection/highlight-marker-text-reveal): Text that reveals under a highlighter stroke as you scroll — expressive for headlines and storytelling.
- [Line Reveal Testimonials](https://html.bosconvertpro.com/collection/line-reveal-testimonials): Testimonials that emerge line by line with elegant timing — trust-building quotes with quiet confidence.
- [Morphing Accordion](https://html.bosconvertpro.com/collection/morphing-accordion): Accordion sections that morph height and shape fluidly — FAQ and settings patterns without hard cuts.
- [Morphing Tabs](https://html.bosconvertpro.com/collection/morphing-tabs): Browser-style tabs with a liquid SVG surface that glides between panels, drag reorder, and close — workspace and multi-space UI.

## Components
- [Capsule Hero](https://html.bosconvertpro.com/collection/capsule-hero): An editorial full-viewport hero with a stadium-shaped video capsule, character intro, and full-bleed expand — premium brand landings.
- [Expanding Feature Pills](https://html.bosconvertpro.com/collection/expanding-feature-pills): Compact feature pills that expand to reveal detail on interaction — great for benefits and pricing highlights.
- [Logo Wall Sycle](https://html.bosconvertpro.com/collection/logo-wall-sycle): A logo grid that cycles partners with blurred dissolve swaps — premium social-proof walls that stay alive.
- [Magnetic ASCII Footer](https://html.bosconvertpro.com/collection/magnetic-ascii-footer): A site footer with scramble headlines, flicker CTAs, and a magnetic ASCII wordmark that shatters and reforms on click.
- [Modal Cards](https://html.bosconvertpro.com/collection/modal-cards): A product modal with layered hero crossfades, rising content panels, and carousel navigation — polished multi-brand showcases.
- [Morphing Dialog](https://html.bosconvertpro.com/collection/morphing-dialog): A card that expands into a full dialog with shared-element morphing — premium modal open/close without jarring cuts.
- [Morphing Select](https://html.bosconvertpro.com/collection/morphing-select): A select control that morphs open into a stacked option list with elastic motion — refined form UI beyond native dropdowns.
- [Refracted Glass (Unicorn Studio)](https://html.bosconvertpro.com/collection/refracted-glass-unicorn-studio): Refracted glass visuals with luminous distortion — atmospheric hero treatment for brand and product stories.
- [Slider Input](https://html.bosconvertpro.com/collection/slider-input): A premium range slider with expanding fill, drag grip, and keyboard control — polished form control for settings and value pickers.
- [Water Ripple Showcase](https://html.bosconvertpro.com/collection/water-ripple-showcase): Scroll-driven work showcase with interactive water-ripple photos, pinned one-project-per-screen scrolling, and a thumbnail rail.

## Optional
- Full-page previews at `/collection/{slug}/full` are noindex theater views. Use the detail page instead.
- Live iframe demos live under `/demos/{slug}/index.html`.
- 75 animations in the library as of this file.
- Author: Abbos Nurgulshanov (https://x.com/nurgulshanov).