ui-ux-pro-mcp

No,Pattern Name,Keywords,Section Order,Primary CTA Placement,Color Strategy,Recommended Effects,Conversion Optimization,Layout_CSS,Grid_System_Config,Bento_Layout_Map,Responsive_Strategy 1,Hero + Features + CTA,"hero, hero-centric, features, feature-rich, cta, call-to-action","1. Hero with headline/image, 2. Value prop, 3. Key features (3-5), 4. CTA section, 5. Footer",Hero (sticky) + Bottom,Hero: Brand primary or vibrant. Features: Card bg #FAFAFA. CTA: Contrasting accent color,"Hero parallax, feature card hover lift, CTA glow on hover",Deep CTA placement. Use contrasting color (at least 7:1 contrast ratio). Sticky navbar CTA.,".hero { min-height: 100vh; display: flex; align-items: center; } .hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; } .features { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; }","{""cols"":12,""gap"":""2rem"",""container"":""1280px""}","[{""id"":""text"",""colSpan"":6,""rowSpan"":1,""align"":""center-left""},{""id"":""visual"",""colSpan"":6,""rowSpan"":1,""align"":""center-right""}]",Desktop: 12-col Grid. Mobile: Single column stack. Order preserved. 2,Hero + Testimonials + CTA,"hero, testimonials, social-proof, trust, reviews, cta, video testimonial, avatar, carousel, lazy load","1. Hero, 2. Problem statement, 3. Solution overview, 4. Testimonials carousel, 5. CTA",Hero (sticky) + Post-testimonials,"Hero: Brand color. Testimonials: Light bg #F5F5F5. Quotes: Italic, muted color #666. CTA: Vibrant","Testimonial carousel slide animations, quote marks animations, avatar fade-in, video testimonial play","Social proof before CTA. Use 3-5 testimonials. Include photo + name + role. CTA after social proof. Consider video testimonials for 2x engagement.",".hero { min-height: 100vh; display: flex; align-items: center; justify-content: center; } .testimonials { display: flex; gap: 2rem; overflow-x: auto; scroll-snap-type: x mandatory; } .testimonial-card { scroll-snap-align: start; flex: 0 0 350px; } /* Video Testimonial Embed */ .video-testimonial-container { position: relative; border-radius: 1rem; overflow: hidden; aspect-ratio: 16/9; max-width: 500px; } .video-testimonial-container video { width: 100%; height: 100%; object-fit: cover; } .video-testimonial-container .poster { position: absolute; inset: 0; background-size: cover; background-position: center; } .video-play-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.3); cursor: pointer; transition: background 0.2s ease; } .video-play-overlay:hover { background: rgba(0,0,0,0.4); } .video-play-btn { width: 72px; height: 72px; background: rgba(255,255,255,0.95); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(0,0,0,0.2); transition: transform 0.2s ease; } .video-play-overlay:hover .video-play-btn { transform: scale(1.1); } .video-testimonial-info { position: absolute; bottom: 1rem; left: 1rem; right: 1rem; color: white; text-shadow: 0 1px 3px rgba(0,0,0,0.5); } .video-testimonial-info .name { font-weight: 600; } .video-testimonial-info .role { font-size: 0.875rem; opacity: 0.9; }","{""cols"":12,""gap"":""2rem"",""container"":""1280px""}","[{""id"":""text"",""colSpan"":6,""rowSpan"":1,""align"":""center-left""},{""id"":""visual"",""colSpan"":6,""rowSpan"":1,""align"":""center-right""}]",Desktop: 12-col Grid. Mobile: Single column stack. Order preserved. 3,Product Demo + Features,"demo, product-demo, features, showcase, interactive","1. Hero, 2. Product video/mockup (center), 3. Feature breakdown per section, 4. Comparison (optional), 5. CTA",Video center + CTA right/bottom,Video surround: Brand color overlay. Features: Icon color #0080FF. Text: Dark #222,"Video play button pulse, feature scroll reveals, demo interaction highlights",Embedded product demo increases engagement. Use interactive mockup if possible. Auto-play video muted.,".demo-section { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } .video-container { position: relative; aspect-ratio: 16/9; } .features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }","{""cols"":12,""gap"":""2rem"",""container"":""1280px""}","[{""id"":""section"",""colSpan"":12,""rowSpan"":1}]",Desktop: 12-col Grid. Mobile: Single column stack. Order preserved. 4,Minimal Single Column,"minimal, simple, direct, single-column, clean","1. Hero headline, 2. Short description, 3. Benefit bullets (3 max), 4. CTA, 5. Footer","Center, large CTA button",Minimalist: Brand + white #FFFFFF + accent. Buttons: High contrast 7:1+. Text: Black/Dark grey,Minimal hover effects. Smooth scroll. CTA scale on hover (subtle),Single CTA focus. Large typography. Lots of whitespace. No nav clutter. Mobile-first.,.container { max-width: 680px; margin: 0 auto; padding: 0 1.5rem; } .hero { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; text-align: center; },"{""cols"":1,""max_width"":""680px"",""center"":true}","[{""id"":""main"",""colSpan"":12,""rowSpan"":1,""align"":""center""}]",Desktop: Centered narrow column. Mobile: Full width with padding. 5,Funnel (3-Step Conversion),"funnel, conversion, steps, wizard, onboarding","1. Hero, 2. Step 1 (problem), 3. Step 2 (solution), 4. Step 3 (action), 5. CTA progression",Each step: mini-CTA. Final: main CTA,"Step colors: 1 (Red/Problem), 2 (Orange/Process), 3 (Green/Solution). CTA: Brand color","Step number animations, progress bar fill, step transitions smooth scroll",Progressive disclosure. Show only essential info per step. Use progress indicators. Multiple CTAs.,.funnel { display: flex; flex-direction: column; gap: 0; } .step { min-height: 100vh; display: flex; align-items: center; } .progress-bar { position: fixed; top: 0; left: 0; height: 4px; background: var(--brand); },"{""cols"":12,""gap"":""2rem"",""container"":""1280px""}","[{""id"":""section"",""colSpan"":12,""rowSpan"":1}]",Desktop: 12-col Grid. Mobile: Single column stack. Order preserved. 6,Comparison Table + CTA,"comparison, table, compare, versus, cta, sticky header, scroll shadow, horizontal scroll mobile, tooltips, feature highlight","1. Hero, 2. Problem intro, 3. Comparison table (product vs competitors), 4. Pricing (optional), 5. CTA",Table: Right column. CTA: Below table,Table: Alternating rows (white/light grey). Your product: Highlight #FFFACD (light yellow) or green. Text: Dark,"Table row hover highlight, price toggle animations, feature checkmark animations, sticky header scroll shadow, tooltip reveal",Use comparison to show unique value. Highlight your product row. Include 'free trial' in pricing row. Add tooltips for complex features.,".comparison-table { width: 100%; border-collapse: collapse; overflow-x: auto; -webkit-overflow-scrolling: touch; } .comparison-table th, .comparison-table td { padding: 1rem; text-align: center; } .comparison-table tr:nth-child(even) { background: #f9fafb; } .highlight-column { background: #fffacd; } /* Sticky Header with Scroll Shadow */ .comparison-table thead th { position: sticky; top: 0; background: white; z-index: 10; } .comparison-table.scrolled thead { box-shadow: 0 2px 8px rgba(0,0,0,0.1); } /* Feature Tooltip */ .feature-info { display: inline-flex; align-items: center; gap: 0.25rem; cursor: help; position: relative; } .feature-tooltip { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: #1f2937; color: white; padding: 0.5rem 0.75rem; border-radius: 6px; font-size: 0.75rem; white-space: nowrap; opacity: 0; visibility: hidden; transition: all 0.2s; } .feature-info:hover .feature-tooltip { opacity: 1; visibility: visible; } /* Mobile Horizontal Scroll Indicator */ @media (max-width: 768px) { .comparison-wrapper { position: relative; } .comparison-wrapper::after { content: '→'; position: absolute; right: 0; top: 50%; background: linear-gradient(90deg, transparent, white); padding: 1rem; } }","{""cols"":12,""gap"":""2rem"",""container"":""1280px""}","[{""id"":""section"",""colSpan"":12,""rowSpan"":1}]",Desktop: 12-col Grid. Mobile: Single column stack with horizontal scroll. Order preserved. 7,Lead Magnet + Form,"lead, form, signup, capture, email, magnet","1. Hero (benefit headline), 2. Lead magnet preview (ebook cover, checklist, etc), 3. Form (minimal fields), 4. CTA submit",Form CTA: Submit button,Lead magnet: Professional design. Form: Clean white bg. Inputs: Light border #CCCCCC. CTA: Brand color,"Form focus state animations, input validation animations, success confirmation animation",Form fields ≤ 3 for best conversion. Offer valuable lead magnet preview. Show form submission progress.,".lead-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } .form-container { background: #fff; padding: 2rem; border-radius: 1rem; box-shadow: 0 4px 20px rgba(0,0,0,0.1); } .form-input { width: 100%; padding: 1rem; margin-bottom: 1rem; }","{""cols"":12,""gap"":""2rem"",""container"":""1280px""}","[{""id"":""section"",""colSpan"":12,""rowSpan"":1}]",Desktop: 12-col Grid. Mobile: Single column stack. Order preserved. 8,Pricing Page + CTA,"pricing, plans, tiers, comparison, cta, toggle animation, Framer Motion, monthly yearly switch, currency badge, micro-interaction","1. Hero (pricing headline), 2. Price comparison cards, 3. Feature comparison table, 4. FAQ section, 5. Final CTA",Each card: CTA button. Sticky CTA in nav,"Free: Grey, Starter: Blue, Pro: Green/Gold, Enterprise: Dark. Cards: 1px border, shadow","Price toggle animation (monthly/yearly), card comparison highlight, FAQ accordion open/close, badge pop animation, price counter scale",Recommend starter plan (pre-select/highlight). Show annual discount (20-30%). Use FAQs to address concerns.,".pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } @media (max-width: 768px) { .pricing-grid { grid-template-columns: 1fr; } } .pricing-card { padding: 2rem; border: 1px solid #e5e7eb; border-radius: 1rem; } .pricing-card.popular { border-color: var(--brand); transform: scale(1.05); } /* Pricing Toggle Animation */ .pricing-toggle { display: flex; align-items: center; gap: 0.5rem; background: rgba(0,0,0,0.05); padding: 4px; border-radius: 9999px; } .toggle-btn { padding: 0.5rem 1rem; border-radius: 9999px; border: none; cursor: pointer; transition: all 0.3s cubic-bezier(0.4,0,0.2,1); background: transparent; } .toggle-btn.active { background: white; box-shadow: 0 2px 8px rgba(0,0,0,0.1); } .save-badge { background: #10b981; color: white; font-size: 0.75rem; padding: 2px 8px; border-radius: 9999px; animation: badge-pop 0.3s ease-out; } @keyframes badge-pop { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } } /* Price counter animation */ .price-value { transition: transform 0.3s ease; display: inline-block; } .price-value.changing { transform: scale(1.05); }","{""cols"":12,""gap"":""2rem"",""container"":""1280px""}","[{""id"":""section"",""colSpan"":12,""rowSpan"":1}]",Desktop: 12-col Grid. Mobile: Single column stack. Order preserved. 9,Video-First Hero,"video, hero, media, visual, engaging, lazy video, IntersectionObserver, prefers-reduced-motion, poster fallback, autoplay muted","1. Hero with video background, 2. Key features overlay, 3. Benefits section, 4. CTA",Overlay on video (center/bottom) + Bottom section,Dark overlay 60% on video. Brand accent for CTA. White text on dark.,"Video autoplay muted, parallax scroll, text fade-in on scroll, lazy load reveal, reduced motion fallback",86% higher engagement with video. Add captions for accessibility. Compress video for performance. Use poster image for fast LCP. Lazy load video with IntersectionObserver.,".video-hero { position: relative; min-height: 100vh; overflow: hidden; background-size: cover; background-position: center; } .video-hero video { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; transform: translate(-50%, -50%); object-fit: cover; opacity: 0; transition: opacity 0.5s; } .video-hero video.loaded { opacity: 1; } .video-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; } .poster-fallback { display: none; position: absolute; inset: 0; background-size: cover; background-position: center; } /* Reduced Motion Fallback */ @media (prefers-reduced-motion: reduce) { .video-hero video { display: none; } .video-hero .poster-fallback { display: block; } } /* JS: Lazy load video with IntersectionObserver const video = document.querySelector('.hero-video'); const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { video.src = video.dataset.src; video.load(); video.addEventListener('canplay', () => video.classList.add('loaded')); observer.disconnect(); } }); }, { rootMargin: '100px' }); observer.observe(video); */","{""cols"":12,""gap"":""2rem"",""container"":""1280px""}","[{""id"":""text"",""colSpan"":6,""rowSpan"":1,""align"":""center-left""},{""id"":""visual"",""colSpan"":6,""rowSpan"":1,""align"":""center-right""}]",Desktop: 12-col Grid. Mobile: Single column stack with poster fallback. Order preserved. 10,Scroll-Triggered Storytelling,"storytelling, scroll, narrative, story, immersive","1. Intro hook, 2. Chapter 1 (problem), 3. Chapter 2 (journey), 4. Chapter 3 (solution), 5. Climax CTA",End of each chapter (mini) + Final climax CTA,Progressive reveal. Each chapter has distinct color. Building intensity.,"ScrollTrigger animations, parallax layers, progressive disclosure, chapter transitions",Narrative increases time-on-page 3x. Use progress indicator. Mobile: simplify animations.,.chapter { min-height: 100vh; display: flex; align-items: center; position: relative; } .parallax-layer { position: absolute; inset: 0; } .story-progress { position: fixed; right: 2rem; top: 50%; transform: translateY(-50%); },"{""cols"":12,""gap"":""2rem"",""container"":""1280px""}","[{""id"":""section"",""colSpan"":12,""rowSpan"":1}]",Desktop: 12-col Grid. Mobile: Single column stack. Order preserved. 11,AI Personalization Landing,"ai, personalization, smart, recommendation, dynamic","1. Dynamic hero (personalized), 2. Relevant features, 3. Tailored testimonials, 4. Smart CTA",Context-aware placement based on user segment,Adaptive based on user data. A/B test color variations per segment.,"Dynamic content swap, fade transitions, personalized product recommendations",20%+ conversion with personalization. Requires analytics integration. Fallback for new users.,".dynamic-hero { min-height: 100vh; display: flex; align-items: center; } .content-swap { transition: opacity 0.3s ease; } .personalized-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; }","{""cols"":12,""gap"":""2rem"",""container"":""1280px""}","[{""id"":""section"",""colSpan"":12,""rowSpan"":1}]",Desktop: 12-col Grid. Mobile: Single column stack. Order preserved. 12,Waitlist/Coming Soon,"waitlist, coming-soon, launch, early-access, notify","1. Hero with countdown, 2. Product teaser/preview, 3. Email capture form, 4. Social proof (waitlist count)",Email form prominent (above fold) + Sticky form on scroll,Anticipation: Dark + accent highlights. Countdown in brand color. Urgency indicators.,"Countdown timer animation, email validation feedback, success confetti, social share buttons",Scarcity + exclusivity. Show waitlist count. Early access benefits. Referral program.,.waitlist-hero { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .countdown { display: flex; gap: 1.5rem; } .countdown-item { display: flex; flex-direction: column; align-items: center; } .email-form { display: flex; gap: 0.5rem; max-width: 500px; },"{""cols"":12,""gap"":""2rem"",""container"":""1280px""}","[{""id"":""section"",""colSpan"":12,""rowSpan"":1}]",Desktop: 12-col Grid. Mobile: Single column stack. Order preserved. 13,Comparison Table Focus,"comparison, table, versus, compare, features, sticky header, scroll shadow, horizontal scroll mobile, tooltips, feature highlight","1. Hero (problem statement), 2. Comparison matrix (you vs competitors), 3. Feature deep-dive, 4. Winner CTA",After comparison table (highlighted row) + Bottom,Your product column highlighted (accent bg or green). Competitors neutral. Checkmarks green.,"Table row hover highlight, feature checkmark animations, sticky comparison header, scroll shadow indicator, tooltip reveal",Show value vs competitors. 35% higher conversion. Be factual. Include pricing if favorable. Add tooltips for feature explanations.,".comparison-section { overflow-x: auto; -webkit-overflow-scrolling: touch; position: relative; } .comparison-matrix { width: 100%; min-width: 600px; border-collapse: collapse; } .comparison-matrix th { position: sticky; top: 0; background: #fff; z-index: 10; padding: 1rem; } .comparison-matrix.scrolled th { box-shadow: 0 2px 8px rgba(0,0,0,0.1); } .your-product { background: linear-gradient(to bottom, #ecfdf5, #fff); } /* Feature Tooltip */ .feature-info { display: inline-flex; align-items: center; gap: 0.25rem; cursor: help; position: relative; } .feature-tooltip { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: #1f2937; color: white; padding: 0.5rem 0.75rem; border-radius: 6px; font-size: 0.75rem; white-space: nowrap; opacity: 0; visibility: hidden; transition: all 0.2s; z-index: 20; } .feature-info:hover .feature-tooltip { opacity: 1; visibility: visible; } /* Mobile Scroll Indicator */ @media (max-width: 768px) { .comparison-section::after { content: '→ Scroll'; position: absolute; right: 0; top: 50%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.95)); padding: 0.5rem 1rem; font-size: 0.75rem; color: #666; pointer-events: none; } .comparison-section.scrolled-right::after { display: none; } }","{""cols"":12,""gap"":""2rem"",""container"":""1280px""}","[{""id"":""section"",""colSpan"":12,""rowSpan"":1}]",Desktop: 12-col Grid. Mobile: Single column stack with horizontal scroll indicator. Order preserved. 14,Pricing-Focused Landing,"pricing, price, cost, plans, subscription, toggle animation, Framer Motion, monthly yearly switch, currency badge, micro-interaction","1. Hero (value proposition), 2. Pricing cards (3 tiers), 3. Feature comparison, 4. FAQ, 5. Final CTA","Each pricing card + Sticky CTA in nav + Bottom","Popular plan highlighted (brand color border/bg). Free: grey. Enterprise: dark/premium.","Price toggle monthly/annual animation, card hover lift, FAQ accordion smooth open, badge pop animation, price counter scale","Annual discount 20-30%. Recommend mid-tier (most popular badge). Address objections in FAQ.",".pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } @media (max-width: 768px) { .pricing-grid { grid-template-columns: 1fr; } } .plan-card { padding: 2.5rem; border-radius: 1.5rem; } .plan-popular { border: 2px solid var(--brand); position: relative; } /* Pricing Toggle Animation */ .pricing-toggle { display: flex; align-items: center; gap: 0.5rem; background: rgba(0,0,0,0.05); padding: 4px; border-radius: 9999px; margin: 0 auto 2rem; width: fit-content; } .toggle-btn { padding: 0.5rem 1rem; border-radius: 9999px; border: none; cursor: pointer; transition: all 0.3s cubic-bezier(0.4,0,0.2,1); background: transparent; font-weight: 500; } .toggle-btn.active { background: white; box-shadow: 0 2px 8px rgba(0,0,0,0.1); } .save-badge { background: #10b981; color: white; font-size: 0.75rem; padding: 2px 8px; border-radius: 9999px; animation: badge-pop 0.3s ease-out; margin-left: 0.5rem; } @keyframes badge-pop { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } } /* Price counter animation */ .price-value { transition: transform 0.3s ease; display: inline-block; } .price-value.changing { transform: scale(1.05); }","{""cols"":12,""gap"":""2rem"",""container"":""1280px""}","[{""id"":""section"",""colSpan"":12,""rowSpan"":1}]","Desktop: 12-col Grid. Mobile: Single column stack. Order preserved." 15,App Store Style Landing,"app, mobile, download, store, install","1. Hero with device mockup, 2. Screenshots carousel, 3. Features with icons, 4. Reviews/ratings, 5. Download CTAs",Download buttons prominent (App Store + Play Store) throughout,Dark/light matching app store feel. Star ratings in gold. Screenshots with device frames.,"Device mockup rotations, screenshot slider, star rating animations, download button pulse",Show real screenshots. Include ratings (4.5+ stars). QR code for mobile. Platform-specific CTAs.,.app-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } .device-mockup { max-width: 300px; } .screenshots-carousel { display: flex; gap: 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2rem 0; } .screenshot { scroll-snap-align: center; border-radius: 1rem; },"{""cols"":12,""gap"":""1rem"",""sidebar_width"":""250px"",""mobile_behavior"":""drawer""}","[{""area"":""sidebar"",""colSpan"":2,""rowSpan"":12,""sticky"":true},{""area"":""header"",""colSpan"":10,""rowSpan"":1},{""area"":""content"",""colSpan"":10,""rowSpan"":11}]",Desktop: 12-col Grid. Mobile: Single column stack. Order preserved. 16,FAQ/Documentation Landing,"faq, documentation, help, support, questions","1. Hero with search bar, 2. Popular categories, 3. FAQ accordion, 4. Contact/support CTA",Search bar prominent + Contact CTA for unresolved questions,"Clean, high readability. Minimal color. Category icons in brand color. Success green for resolved.","Search autocomplete, smooth accordion open/close, category hover, helpful feedback buttons",Reduce support tickets. Track search analytics. Show related articles. Contact escalation path.,".search-hero { padding: 4rem 0; text-align: center; } .search-input { max-width: 600px; width: 100%; padding: 1rem 1.5rem; font-size: 1.125rem; border-radius: 2rem; } .categories-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; } .accordion-item { border-bottom: 1px solid #e5e7eb; }","{""cols"":12,""gap"":""2rem"",""container"":""1280px""}","[{""id"":""section"",""colSpan"":12,""rowSpan"":1}]",Desktop: 12-col Grid. Mobile: Single column stack. Order preserved. 17,Immersive/Interactive Experience,"immersive, interactive, experience, 3d, animation","1. Full-screen interactive element, 2. Guided product tour, 3. Key benefits revealed, 4. CTA after completion",After interaction complete + Skip option for impatient users,Immersive experience colors. Dark background for focus. Highlight interactive elements.,"WebGL, 3D interactions, gamification elements, progress indicators, reward animations",40% higher engagement. Performance trade-off. Provide skip option. Mobile fallback essential.,.immersive-container { position: fixed; inset: 0; background: #000; } .canvas-wrapper { width: 100%; height: 100vh; } .skip-button { position: fixed; bottom: 2rem; right: 2rem; z-index: 100; } .tour-overlay { position: absolute; pointer-events: none; },"{""cols"":12,""gap"":""2rem"",""container"":""1280px""}","[{""id"":""section"",""colSpan"":12,""rowSpan"":1}]",Desktop: 12-col Grid. Mobile: Single column stack. Order preserved. 18,Event/Conference Landing,"event, conference, meetup, registration, schedule","1. Hero (date/location/countdown), 2. Speakers grid, 3. Agenda/schedule, 4. Sponsors, 5. Register CTA",Register CTA sticky + After speakers + Bottom,Urgency colors (countdown). Event branding. Speaker cards professional. Sponsor logos neutral.,"Countdown timer, speaker hover cards with bio, agenda tabs, early bird countdown",Early bird pricing with deadline. Social proof (past attendees). Speaker credibility. Multi-ticket discounts.,".event-hero { min-height: 80vh; display: flex; flex-direction: column; justify-content: center; text-align: center; } .speakers-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; } .agenda-tabs { display: flex; gap: 1rem; margin-bottom: 2rem; } .sponsors-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 3rem; align-items: center; }","{""cols"":12,""gap"":""2rem"",""container"":""1280px""}","[{""id"":""section"",""colSpan"":12,""rowSpan"":1}]",Desktop: 12-col Grid. Mobile: Single column stack. Order preserved. 19,Product Review/Ratings Focused,"reviews, ratings, testimonials, social-proof, stars","1. Hero (product + aggregate rating), 2. Rating breakdown, 3. Individual reviews, 4. Buy/CTA",After reviews summary + Buy button alongside reviews,Trust colors. Star ratings gold. Verified badge green. Review sentiment colors.,"Star fill animations, review filtering, helpful vote interactions, photo lightbox",User-generated content builds trust. Show verified purchases. Filter by rating. Respond to negative reviews.,.product-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; } .rating-breakdown { display: flex; flex-direction: column; gap: 0.5rem; } .rating-bar { display: flex; align-items: center; gap: 1rem; } .reviews-list { display: flex; flex-direction: column; gap: 1.5rem; },"{""cols"":12,""gap"":""2rem"",""container"":""1280px""}","[{""id"":""section"",""colSpan"":12,""rowSpan"":1}]",Desktop: 12-col Grid. Mobile: Single column stack. Order preserved. 20,Community/Forum Landing,"community, forum, social, members, discussion","1. Hero (community value prop), 2. Popular topics/categories, 3. Active members showcase, 4. Join CTA",Join button prominent + After member showcase,"Warm, welcoming. Member photos add humanity. Topic badges in brand colors. Activity indicators green.","Member avatars animation, activity feed live updates, topic hover previews, join success celebration","Show active community (member count, posts today). Highlight benefits. Preview content. Easy onboarding.",".community-hero { min-height: 70vh; display: flex; align-items: center; } .topics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; } .members-showcase { display: flex; } .avatar-stack { display: flex; } .avatar-stack img { margin-left: -0.75rem; border: 2px solid #fff; border-radius: 50%; }","{""cols"":12,""gap"":""2rem"",""container"":""1280px""}","[{""id"":""section"",""colSpan"":12,""rowSpan"":1}]",Desktop: 12-col Grid. Mobile: Single column stack. Order preserved. 21,Before-After Transformation,"before-after, transformation, results, comparison","1. Hero (problem state), 2. Transformation slider/comparison, 3. How it works, 4. Results CTA",After transformation reveal + Bottom,Contrast: muted/grey (before) vs vibrant/colorful (after). Success green for results.,"Slider comparison interaction, before/after reveal animations, result counters, testimonial videos",Visual proof of value. 45% higher conversion. Real results. Specific metrics. Guarantee offer.,".comparison-slider { position: relative; overflow: hidden; } .comparison-slider img { display: block; width: 100%; } .slider-handle { position: absolute; top: 0; bottom: 0; width: 4px; background: #fff; cursor: ew-resize; } .results-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; text-align: center; }","{""cols"":12,""gap"":""2rem"",""container"":""1280px""}","[{""id"":""section"",""colSpan"":12,""rowSpan"":1}]",Desktop: 12-col Grid. Mobile: Single column stack. Order preserved. 22,Marketplace / Directory,"marketplace, directory, search, listing","1. Hero (Search focused), 2. Categories, 3. Featured Listings, 4. Trust/Safety, 5. CTA (Become a host/seller)",Hero Search Bar + Navbar 'List your item',Search: High contrast. Categories: Visual icons. Trust: Blue/Green.,"Search autocomplete animation, map hover pins, card carousel",Search bar is the CTA. Reduce friction to search. Popular searches suggestions.,".marketplace-hero { padding: 6rem 0; text-align: center; } .search-bar { display: flex; max-width: 700px; margin: 0 auto; } .categories-scroll { display: flex; gap: 1rem; overflow-x: auto; padding: 1rem 0; } .listings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; }","{""cols"":12,""gap"":""2rem"",""container"":""1280px""}","[{""id"":""section"",""colSpan"":12,""rowSpan"":1}]",Desktop: 12-col Grid. Mobile: Single column stack. Order preserved. 23,Newsletter / Content First,"newsletter, content, writer, blog, subscribe","1. Hero (Value Prop + Form), 2. Recent Issues/Archives, 3. Social Proof (Subscriber count), 4. About Author",Hero inline form + Sticky header form,Minimalist. Paper-like background. Text focus. Accent color for Subscribe.,"Text highlight animations, typewriter effect, subtle fade-in","Single field form (Email only). Show 'Join X,000 readers'. Read sample link.",.newsletter-hero { max-width: 600px; margin: 0 auto; padding: 8rem 1.5rem; text-align: center; } .subscribe-form { display: flex; gap: 0.5rem; justify-content: center; } .archives-list { display: flex; flex-direction: column; gap: 1rem; } .issue-card { display: flex; justify-content: space-between; padding: 1rem; border-bottom: 1px solid #e5e7eb; },"{""cols"":12,""gap"":""2rem"",""container"":""1280px""}","[{""id"":""section"",""colSpan"":12,""rowSpan"":1}]",Desktop: 12-col Grid. Mobile: Single column stack. Order preserved. 24,Webinar Registration,"webinar, registration, event, training, live","1. Hero (Topic + Timer + Form), 2. What you'll learn, 3. Speaker Bio, 4. Urgency/Bonuses, 5. Form (again)",Hero (Right side form) + Bottom anchor,Urgency: Red/Orange. Professional: Blue/Navy. Form: High contrast white.,"Countdown timer, speaker avatar float, urgent ticker",Limited seats logic. 'Live' indicator. Auto-fill timezone.,".webinar-hero { display: grid; grid-template-columns: 1fr 400px; gap: 4rem; align-items: start; min-height: 100vh; padding: 4rem 0; } .registration-form { background: #fff; padding: 2rem; border-radius: 1rem; box-shadow: 0 10px 40px rgba(0,0,0,0.1); position: sticky; top: 2rem; } .learn-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }","{""cols"":12,""gap"":""2rem"",""container"":""1280px""}","[{""id"":""section"",""colSpan"":12,""rowSpan"":1}]",Desktop: 12-col Grid. Mobile: Single column stack. Order preserved. 25,Enterprise Gateway,"enterprise, corporate, gateway, solutions, portal","1. Hero (Video/Mission), 2. Solutions by Industry, 3. Solutions by Role, 4. Client Logos, 5. Contact Sales",Contact Sales (Primary) + Login (Secondary),Corporate: Navy/Grey. High integrity. Conservative accents.,"Slow video background, logo carousel, tab switching for industries",Path selection (I am a...). Mega menu navigation. Trust signals prominent.,".enterprise-hero { min-height: 90vh; display: flex; align-items: center; background: linear-gradient(135deg, #1e3a5f, #0f172a); } .solutions-tabs { display: flex; gap: 1rem; border-bottom: 1px solid #e5e7eb; } .solutions-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } .logos-carousel { display: flex; gap: 4rem; align-items: center; animation: scroll 20s linear infinite; }","{""cols"":12,""gap"":""2rem"",""container"":""1280px""}","[{""id"":""section"",""colSpan"":12,""rowSpan"":1}]",Desktop: 12-col Grid. Mobile: Single column stack. Order preserved. 26,Portfolio Grid,"portfolio, grid, showcase, gallery, masonry","1. Hero (Name/Role), 2. Project Grid (Masonry), 3. About/Philosophy, 4. Contact",Project Card Hover + Footer Contact,Neutral background (let work shine). Text: Black/White. Accent: Minimal.,"Image lazy load reveal, hover overlay info, lightbox view",Visuals first. Filter by category. Fast loading essential.,.portfolio-hero { min-height: 50vh; display: flex; flex-direction: column; justify-content: center; } .masonry-grid { columns: 3; column-gap: 1.5rem; } @media (max-width: 768px) { .masonry-grid { columns: 1; } } .project-card { break-inside: avoid; margin-bottom: 1.5rem; position: relative; overflow: hidden; },"{""cols"":12,""gap"":""1.5rem"",""mobile_cols"":1,""row_height"":""auto""}","[{""id"":""hero"",""colSpan"":8,""rowSpan"":2,""mobile"":{""colSpan"":1,""rowSpan"":1}},{""id"":""stat1"",""colSpan"":4,""rowSpan"":1,""mobile"":{""colSpan"":1,""rowSpan"":1}},{""id"":""stat2"",""colSpan"":4,""rowSpan"":1,""mobile"":{""colSpan"":1,""rowSpan"":1}},{""id"":""feature1"",""colSpan"":4,""rowSpan"":1,""mobile"":{""colSpan"":1,""rowSpan"":1}},{""id"":""feature2"",""colSpan"":4,""rowSpan"":1,""mobile"":{""colSpan"":1,""rowSpan"":1}},{""id"":""feature3"",""colSpan"":4,""rowSpan"":1,""mobile"":{""colSpan"":1,""rowSpan"":1}}]",Desktop: 12-col Grid. Mobile: Single column stack. Order preserved. 27,Horizontal Scroll Journey,"horizontal, scroll, journey, gallery, storytelling, panoramic","1. Intro (Vertical), 2. The Journey (Horizontal Track), 3. Detail Reveal, 4. Vertical Footer",Floating Sticky CTA or End of Horizontal Track,Continuous palette transition. Chapter colors. Progress bar #000000.,"Scroll-jacking (careful), parallax layers, horizontal slide, progress indicator",Immersive product discovery. High engagement. Keep navigation visible.,.horizontal-wrapper { overflow-x: hidden; } .horizontal-track { display: flex; width: max-content; } .horizontal-section { width: 100vw; height: 100vh; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .scroll-progress { position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%); },"{""cols"":12,""gap"":""2rem"",""container"":""1280px""}","[{""id"":""section"",""colSpan"":12,""rowSpan"":1}]",Desktop: 12-col Grid. Mobile: Single column stack. Order preserved. 28,Bento Grid Showcase,"bento, grid, features, modular, apple-style, showcase","1. Hero, 2. Bento Grid (Key Features), 3. Detail Cards, 4. Tech Specs, 5. CTA",Floating Action Button or Bottom of Grid,Card backgrounds: #F5F5F7 or Glass. Icons: Vibrant brand colors. Text: Dark.,"Hover card scale (1.02), video inside cards, tilt effect, staggered reveal",Scannable value props. High information density without clutter. Mobile stack.,".bento-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 200px); gap: 1rem; } .bento-item.large { grid-column: span 2; grid-row: span 2; } .bento-item { background: #f5f5f7; border-radius: 1.5rem; padding: 2rem; } @media (max-width: 768px) { .bento-grid { grid-template-columns: 1fr; } .bento-item.large { grid-column: span 1; grid-row: span 1; } }","{""cols"":12,""gap"":""1.5rem"",""mobile_cols"":1,""row_height"":""auto""}","[{""id"":""hero"",""colSpan"":8,""rowSpan"":2,""mobile"":{""colSpan"":1,""rowSpan"":1}},{""id"":""stat1"",""colSpan"":4,""rowSpan"":1,""mobile"":{""colSpan"":1,""rowSpan"":1}},{""id"":""stat2"",""colSpan"":4,""rowSpan"":1,""mobile"":{""colSpan"":1,""rowSpan"":1}},{""id"":""feature1"",""colSpan"":4,""rowSpan"":1,""mobile"":{""colSpan"":1,""rowSpan"":1}},{""id"":""feature2"",""colSpan"":4,""rowSpan"":1,""mobile"":{""colSpan"":1,""rowSpan"":1}},{""id"":""feature3"",""colSpan"":4,""rowSpan"":1,""mobile"":{""colSpan"":1,""rowSpan"":1}}]",Desktop: Complex Grid (Auto-fit). Tablet: 2-col Masonry. Mobile: Linear Stack (Order: Hero -> Stats -> Features). 29,Interactive 3D Configurator,"3d, configurator, customizer, interactive, product","1. Hero (Configurator), 2. Feature Highlight (synced), 3. Price/Specs, 4. Purchase",Inside Configurator UI + Sticky Bottom Bar,Neutral studio background. Product: Realistic materials. UI: Minimal overlay.,"Real-time rendering, material swap animation, camera rotate/zoom, light reflection",Increases ownership feeling. 360 view reduces return rates. Direct add-to-cart.,.configurator-layout { display: grid; grid-template-columns: 1fr 350px; height: 100vh; } .canvas-container { background: #f5f5f5; } .config-panel { padding: 2rem; overflow-y: auto; } .option-group { margin-bottom: 2rem; } .color-swatches { display: flex; gap: 0.5rem; } .sticky-price { position: sticky; bottom: 0; background: #fff; padding: 1.5rem; border-top: 1px solid #e5e7eb; },"{""cols"":12,""gap"":""2rem"",""container"":""1280px""}","[{""id"":""section"",""colSpan"":12,""rowSpan"":1}]",Desktop: 12-col Grid. Mobile: Single column stack. Order preserved. 30,AI-Driven Dynamic Landing,"ai, dynamic, personalized, adaptive, generative","1. Prompt/Input Hero, 2. Generated Result Preview, 3. How it Works, 4. Value Prop",Input Field (Hero) + 'Try it' Buttons,Adaptive to user input. Dark mode for compute feel. Neon accents.,"Typing text effects, shimmering generation loaders, morphing layouts","Immediate value demonstration. 'Show, don't tell'. Low friction start.",.ai-hero { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #0a0a0a; } .prompt-input { width: 100%; max-width: 600px; padding: 1.5rem; background: #1a1a1a; border: 1px solid #333; border-radius: 1rem; color: #fff; } .result-preview { margin-top: 2rem; padding: 2rem; background: #111; border-radius: 1rem; min-height: 200px; },"{""cols"":12,""gap"":""2rem"",""container"":""1280px""}","[{""id"":""section"",""colSpan"":12,""rowSpan"":1}]",Desktop: 12-col Grid. Mobile: Single column stack. Order preserved. 31,AI Product Hero,"ai, streaming, demo, try-it, interactive, hero","1. Hero with Live Demo Input, 2. Streaming Output Display, 3. Use Cases, 4. Pricing, 5. CTA",Input field in hero + Streaming demo area,Dark mode: #0A0A0A bg. AI Purple #7C3AED. Success Green #10B981. Streaming text white.,"Typing indicator animation, streaming text reveal, input focus glow, result fade-in",Let users try immediately. Show AI working in real-time. Reduce friction to first interaction.,.ai-product-hero { min-height: 100vh; background: #0a0a0a; color: #fff; display: flex; align-items: center; } .demo-container { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; } .input-area { background: #111; border-radius: 1rem; padding: 1.5rem; } .output-stream { background: #111; border-radius: 1rem; padding: 1.5rem; min-height: 300px; font-family: monospace; },"{""cols"":12,""gap"":""2rem"",""container"":""1280px""}","[{""id"":""text"",""colSpan"":6,""rowSpan"":1,""align"":""center-left""},{""id"":""visual"",""colSpan"":6,""rowSpan"":1,""align"":""center-right""}]",Desktop: 12-col Grid. Mobile: Single column stack. Order preserved. 32,Bento Grid Feature,"bento, grid, features, modular, apple-style, cards","1. Hero, 2. Bento Grid (3-6 feature cards), 3. Detail Sections, 4. CTA",Inside prominent grid cards + Bottom CTA,Card bg: #FFFFFF or glass. Page bg: #F5F5F7. Icons: Brand accent. Text: #1D1D1F.,"Card hover scale (1.02), staggered reveal, video autoplay in cards, parallax subtle",Feature hierarchy through card size. Large card = primary feature. Scannable value props.,".feature-bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .bento-card { background: #fff; border-radius: 1.5rem; padding: 2rem; transition: transform 0.3s ease; } .bento-card:hover { transform: scale(1.02); } .bento-card.featured { grid-column: span 2; } @media (max-width: 768px) { .feature-bento { grid-template-columns: 1fr; } .bento-card.featured { grid-column: span 1; } }","{""cols"":12,""gap"":""1.5rem"",""mobile_cols"":1,""row_height"":""auto""}","[{""id"":""hero"",""colSpan"":8,""rowSpan"":2,""mobile"":{""colSpan"":1,""rowSpan"":1}},{""id"":""stat1"",""colSpan"":4,""rowSpan"":1,""mobile"":{""colSpan"":1,""rowSpan"":1}},{""id"":""stat2"",""colSpan"":4,""rowSpan"":1,""mobile"":{""colSpan"":1,""rowSpan"":1}},{""id"":""feature1"",""colSpan"":4,""rowSpan"":1,""mobile"":{""colSpan"":1,""rowSpan"":1}},{""id"":""feature2"",""colSpan"":4,""rowSpan"":1,""mobile"":{""colSpan"":1,""rowSpan"":1}},{""id"":""feature3"",""colSpan"":4,""rowSpan"":1,""mobile"":{""colSpan"":1,""rowSpan"":1}}]",Desktop: Complex Grid (Auto-fit). Tablet: 2-col Masonry. Mobile: Linear Stack (Order: Hero -> Stats -> Features). 33,Social Proof Wall,"testimonials, reviews, grid, social-proof, trust, wall, masonry, marquee, infinite scroll, video testimonial, lazy load, avatar, platform badges, Trustpilot, G2","1. Hero, 2. Testimonial Grid/Masonry, 3. Key Metrics (X users, Y reviews), 4. CTA",After testimonial wall + Floating CTA,Trust colors. Avatar photos. Star rating gold #F59E0B. Quote text dark. Card bg light.,"Masonry layout animation, testimonial carousel, count-up metrics, logo carousel fade, infinite marquee, video testimonial embed",Volume of social proof. Show faces and names. Include company logos. Real metrics.,".testimonial-masonry { columns: 3; column-gap: 1rem; } .testimonial-card { break-inside: avoid; margin-bottom: 1rem; background: #fff; padding: 1.5rem; border-radius: 1rem; box-shadow: 0 2px 10px rgba(0,0,0,0.05); } /* Infinite Marquee */ .testimonial-marquee { display: flex; animation: marquee 30s linear infinite; gap: 2rem; } .testimonial-marquee:hover { animation-play-state: paused; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Lazy Load Avatars */ .avatar { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; } .avatar.loaded { animation: none; background: none; } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Platform Badge */ .platform-badge { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: #666; margin-top: 0.75rem; } .platform-badge img { height: 16px; } .platform-badge.trustpilot { color: #00b67a; } .platform-badge.g2 { color: #ff492c; } /* Video testimonial */ .video-testimonial { position: relative; border-radius: 1rem; overflow: hidden; aspect-ratio: 16/9; } .video-testimonial video { width: 100%; height: 100%; object-fit: cover; } .video-play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; background: rgba(255,255,255,0.9); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 0.2s ease; } .video-play-btn:hover { transform: translate(-50%, -50%) scale(1.1); } @media (prefers-reduced-motion: reduce) { .testimonial-marquee { animation: none; } .avatar { animation: none; } } @media (max-width: 768px) { .testimonial-masonry { columns: 1; } } .metrics-row { display: flex; justify-content: center; gap: 4rem; }","{""cols"":12,""gap"":""2rem"",""container"":""1280px""}","[{""id"":""section"",""colSpan"":12,""rowSpan"":1}]",Desktop: 12-col Grid. Mobile: Single column stack. Order preserved. 34,Interactive Demo Section,"demo, interactive, try, product, preview, hands-on","1. Hero, 2. Interactive Demo Embed, 3. Key Features Explained, 4. Full CTA",Demo interaction points + After demo CTA,Interface colors match product. Demo highlights in brand accent. Instructions subtle.,"Demo step highlighting, tooltip guides, success animations, progress indicators",Guided product experience. Reduce signup friction. Show value before commitment.,".demo-section { padding: 6rem 0; } .demo-embed { max-width: 1000px; margin: 0 auto; border-radius: 1rem; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.15); } .demo-steps { display: flex; justify-content: center; gap: 2rem; margin-top: 3rem; } .step-indicator { display: flex; align-items: center; gap: 0.5rem; }","{""cols"":12,""gap"":""2rem"",""container"":""1280px""}","[{""id"":""section"",""colSpan"":12,""rowSpan"":1}]",Desktop: 12-col Grid. Mobile: Single column stack. Order preserved. 35,Comparison Table Section,"comparison, versus, table, features, competitors, sticky header, scroll shadow, horizontal scroll mobile, tooltips, feature highlight","1. Hero, 2. Comparison Table (You vs Others), 3. Why Choose Us, 4. CTA",Your column highlighted + Below table CTA,Your column: Light accent bg #EFF6FF. Checkmarks: #22C55E. X marks: #EF4444.,"Table row hover, sticky header, feature expand, checkbox animations, scroll shadow indicator, tooltip reveal","Honest comparison. Highlight strengths. Address weaknesses. Clear winner visual. Add tooltips for complex features.",".comparison-container { overflow-x: auto; -webkit-overflow-scrolling: touch; position: relative; } .comparison-table { width: 100%; border-collapse: collapse; min-width: 700px; } .comparison-table th { position: sticky; top: 0; background: #fff; padding: 1rem; z-index: 10; } .comparison-table.scrolled th { box-shadow: 0 2px 8px rgba(0,0,0,0.1); } .comparison-table td { padding: 1rem; text-align: center; border-bottom: 1px solid #e5e7eb; } .your-column { background: #eff6ff; } /* Feature Tooltip */ .feature-info { display: inline-flex; align-items: center; gap: 0.25rem; cursor: help; position: relative; } .feature-tooltip { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: #1f2937; color: white; padding: 0.5rem 0.75rem; border-radius: 6px; font-size: 0.75rem; white-space: nowrap; opacity: 0; visibility: hidden; transition: all 0.2s; z-index: 20; } .feature-info:hover .feature-tooltip { opacity: 1; visibility: visible; } /* Mobile Horizontal Scroll Indicator */ @media (max-width: 768px) { .comparison-container::after { content: '→ Scroll'; position: absolute; right: 0; top: 50%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.95)); padding: 0.5rem 1rem; font-size: 0.75rem; color: #666; pointer-events: none; } }","{""cols"":12,""gap"":""2rem"",""container"":""1280px""}","[{""id"":""section"",""colSpan"":12,""rowSpan"":1}]",Desktop: 12-col Grid. Mobile: Single column stack with horizontal scroll indicator. Order preserved. 36,Pricing Calculator Interactive,"pricing, calculator, interactive, estimate, cost, quote","1. Hero with Calculator, 2. Sliding/Input Controls, 3. Live Price Update, 4. CTA to Purchase",Calculator result area + Proceed to checkout CTA,Neutral calculator bg. Price highlight large. Slider track brand color. Result card accent.,"Slider smooth animation, price counter animation, package recommendation highlight",Personalized pricing. Show value for cost. Reduce pricing page anxiety.,".calculator-section { padding: 6rem 0; } .calculator-card { max-width: 600px; margin: 0 auto; background: #fff; padding: 3rem; border-radius: 1.5rem; box-shadow: 0 10px 40px rgba(0,0,0,0.1); } .slider-group { margin-bottom: 2rem; } .price-display { font-size: 3rem; font-weight: 700; text-align: center; margin: 2rem 0; }","{""cols"":12,""gap"":""2rem"",""container"":""1280px""}","[{""id"":""section"",""colSpan"":12,""rowSpan"":1}]",Desktop: 12-col Grid. Mobile: Single column stack. Order preserved. 37,Exit Intent Modal,"exit, modal, popup, retention, last-chance, offer",N/A - Overlay pattern,Modal center screen,Urgency: #EF4444 accent. Offer: #22C55E highlight. Modal: White with shadow. Overlay: Dark 60%.,"Fade-in modal (300ms), subtle scale entrance, countdown timer if time-limited",One-time offer. Clear value prop. Easy dismiss. Don't annoy. A/B test triggers.,".modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 1000; opacity: 0; transition: opacity 0.3s ease; } .modal-overlay.active { opacity: 1; } .modal-content { background: #fff; padding: 2.5rem; border-radius: 1rem; max-width: 500px; transform: scale(0.9); transition: transform 0.3s ease; } .modal-overlay.active .modal-content { transform: scale(1); }","{""cols"":12,""gap"":""2rem"",""container"":""1280px""}","[{""id"":""section"",""colSpan"":12,""rowSpan"":1}]",Desktop: 12-col Grid. Mobile: Single column stack. Order preserved. 38,Floating CTA Bar,"sticky, floating, cta, bar, bottom, persistent",N/A - UI pattern element,Bottom sticky bar with primary CTA,Brand primary for CTA button. Bar bg: White or dark with blur. Text: High contrast.,"Slide up on scroll, hide on scroll down, appear on intent, shadow on separation",Persistent conversion point. Don't obstruct content. Show on scroll intent.,".floating-cta { position: fixed; bottom: 0; left: 0; right: 0; background: rgba(255,255,255,0.95); backdrop-filter: blur(10px); padding: 1rem 2rem; display: flex; justify-content: space-between; align-items: center; transform: translateY(100%); transition: transform 0.3s ease; box-shadow: 0 -4px 20px rgba(0,0,0,0.1); z-index: 100; } .floating-cta.visible { transform: translateY(0); }","{""cols"":12,""gap"":""2rem"",""container"":""1280px""}","[{""id"":""section"",""colSpan"":12,""rowSpan"":1}]",Desktop: 12-col Grid. Mobile: Single column stack. Order preserved. 39,Video Background Hero,"video, hero, background, cinematic, immersive, visual, lazy video, IntersectionObserver, prefers-reduced-motion, poster fallback, autoplay muted","1. Video Hero with Overlay, 2. Value Prop Text, 3. Features, 4. CTA",Center hero over video + Below fold CTA,Dark overlay 40-60% on video. White/light text. CTA high contrast button.,"Video autoplay muted loop, text fade-in, parallax scroll, video pause on CTA hover, lazy load reveal, reduced motion fallback",Emotional connection. Compress video for performance. Poster image fallback. Mobile: static image. Use IntersectionObserver for lazy loading. Respect prefers-reduced-motion.,".video-bg-hero { position: relative; min-height: 100vh; overflow: hidden; background-size: cover; background-position: center; } .video-bg-hero video { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; transform: translate(-50%, -50%); object-fit: cover; z-index: -1; opacity: 0; transition: opacity 0.5s; } .video-bg-hero video.loaded { opacity: 1; } .hero-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.5); } .hero-content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; color: #fff; text-align: center; } .poster-fallback { display: none; position: absolute; inset: 0; background-size: cover; background-position: center; z-index: -1; } /* Reduced Motion Fallback */ @media (prefers-reduced-motion: reduce) { .video-bg-hero video { display: none; } .video-bg-hero .poster-fallback { display: block; } } /* Mobile: Static Image Fallback */ @media (max-width: 768px) { .video-bg-hero video { display: none; } .video-bg-hero .poster-fallback { display: block; } } /* JS: Lazy load video with IntersectionObserver const video = document.querySelector('.bg-hero-video'); const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { video.src = video.dataset.src; video.load(); video.addEventListener('canplay', () => video.classList.add('loaded')); observer.disconnect(); } }); }, { rootMargin: '100px' }); if (video) observer.observe(video); */","{""cols"":12,""gap"":""2rem"",""container"":""1280px""}","[{""id"":""text"",""colSpan"":6,""rowSpan"":1,""align"":""center-left""},{""id"":""visual"",""colSpan"":6,""rowSpan"":1,""align"":""center-right""}]",Desktop: 12-col Grid. Mobile: Single column stack with poster fallback. Order preserved. 40,Stats Counter Section,"stats, metrics, counter, numbers, achievements, social-proof","1. Hero, 2. Stats Counter Row (3-4 metrics), 3. Supporting Content, 4. CTA",After stats display,Large numbers: #0F172A or brand. Labels: #64748B. Background: Light or accent subtle.,"Number count-up animation on scroll, metric card stagger, icon pulse on complete",Specific impressive numbers. Use real metrics. Count animation on viewport enter.,".stats-section { padding: 5rem 0; background: #f8fafc; } .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; text-align: center; } @media (max-width: 768px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } } .stat-item { padding: 2rem; } .stat-number { font-size: 3rem; font-weight: 700; color: #0f172a; } .stat-label { color: #64748b; margin-top: 0.5rem; }","{""cols"":12,""gap"":""2rem"",""container"":""1280px""}","[{""id"":""section"",""colSpan"":12,""rowSpan"":1}]",Desktop: 12-col Grid. Mobile: Single column stack. Order preserved. 41,Scroll-Reactive Header,"navbar scroll sticky header shrink compact glassmorphism fixed navigation transparent blur height transition scroll-driven animation","Fixed position always visible","Navigation links and main CTA button","Transparent to solid with blur on scroll. Default: transparent or rgba(255,255,255,0.1). Scrolled: rgba(255,255,255,0.95) with backdrop-filter blur.","Smooth height transition (80px → 56px), backdrop-filter blur on scroll, box-shadow appear, logo scale, CTA glow, CSS scroll-driven animation","Use 50-100px scroll threshold for state change. Explicit height: 80px → 56px on scroll. Sticky CTA in navbar increases conversion. Smooth transitions 0.3-0.4s. Use animation-timeline: scroll() for CSS-native approach (90%+ browser support 2026).","/* CSS Scroll-Driven Animation (2026 Modern - 90%+ browser support) */ @supports (animation-timeline: scroll()) { .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: 80px; animation: navbar-shrink linear both; animation-timeline: scroll(root block); animation-range: 0px 100px; } @keyframes navbar-shrink { from { height: 80px; padding: 1.5rem 2rem; background: transparent; backdrop-filter: blur(0); box-shadow: none; } to { height: 56px; padding: 0.75rem 2rem; background: rgba(255,255,255,0.95); backdrop-filter: blur(12px); box-shadow: 0 4px 20px rgba(0,0,0,0.08); } } } /* JS Fallback for older browsers */ .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: 80px; padding: 1.5rem 2rem; background: transparent; transition: all 0.3s ease-out; } .navbar.scrolled { height: 56px; padding: 0.75rem 2rem; background: rgba(255,255,255,0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 4px 20px rgba(0,0,0,0.08); border-bottom: 1px solid rgba(0,0,0,0.05); } .navbar-logo { transition: transform 0.3s ease; } .navbar.scrolled .navbar-logo { transform: scale(0.9); } .navbar-cta { transition: all 0.3s ease; } .navbar.scrolled .navbar-cta { box-shadow: 0 0 20px rgba(59,130,246,0.4); } /* JS Fallback: window.addEventListener('scroll', () => { if (!CSS.supports('animation-timeline', 'scroll()')) { const navbar = document.querySelector('.navbar'); navbar.classList.toggle('scrolled', window.scrollY > 50); } }); */","{""cols"":12,""gap"":""2rem"",""container"":""1280px""}","[{""id"":""nav"",""colSpan"":12,""rowSpan"":1,""sticky"":true}]","Desktop: Fixed top, full width. Mobile: Same fixed behavior with hamburger menu." 42,Mobile Navigation Overlay,"mobile menu hamburger overlay slide navigation responsive drawer","Hamburger icon triggers overlay","Hamburger button + close button in overlay","Overlay: rgba(0,0,0,0.5) backdrop. Menu bg: #FFFFFF or dark mode #1F2937. Accent for active links.","Hamburger morphs to X animation, slide-in from right (transform), max-height animation for accordion, focus trap","Mobile menu should trap focus. Use max-height + opacity for smooth open/close. Include close on outside click.",".mobile-nav { position: fixed; inset: 0; z-index: 100; visibility: hidden; opacity: 0; transition: opacity 0.3s ease, visibility 0.3s ease; } .mobile-nav.active { visibility: visible; opacity: 1; } .mobile-nav-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.5); } .mobile-nav-menu { position: absolute; right: 0; top: 0; bottom: 0; width: 80%; max-width: 320px; background: #fff; transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); padding: 5rem 2rem 2rem; overflow-y: auto; } .mobile-nav.active .mobile-nav-menu { transform: translateX(0); } .hamburger { width: 24px; height: 20px; position: relative; cursor: pointer; } .hamburger span { display: block; position: absolute; height: 2px; width: 100%; background: currentColor; transition: all 0.3s ease; } .hamburger span:nth-child(1) { top: 0; } .hamburger span:nth-child(2) { top: 9px; } .hamburger span:nth-child(3) { bottom: 0; } .hamburger.active span:nth-child(1) { transform: rotate(45deg); top: 9px; } .hamburger.active span:nth-child(2) { opacity: 0; } .hamburger.active span:nth-child(3) { transform: rotate(-45deg); bottom: 9px; }","{""cols"":1,""gap"":""0"",""container"":""100%""}","[{""id"":""overlay"",""colSpan"":1,""rowSpan"":1,""fullscreen"":true}]","Mobile: Full-screen overlay. Tablet+: Hidden, use desktop nav." 43,Modern Footer Layout,"footer bottom social newsletter links sitemap copyright legal column grid","Logo + Description | Link Columns | Newsletter | Social Icons | Copyright",Newsletter signup,Dark/muted background #1F2937 or #0F172A with contrast links. Links: #9CA3AF hover #FFFFFF. Accent for newsletter button.,"Link hover underline animation, social icon hover scale/color, newsletter input focus glow, smooth scroll to top",Footer is last conversion opportunity. Include newsletter signup. Social proof (trust badges). Mobile: stack columns vertically.,".site-footer { background: #1f2937; color: #9ca3af; padding: 4rem 2rem 2rem; } .footer-grid { display: grid; grid-template-columns: 2fr repeat(3, 1fr) 1.5fr; gap: 3rem; max-width: 1280px; margin: 0 auto; } @media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr; gap: 2rem; text-align: center; } } .footer-brand { display: flex; flex-direction: column; gap: 1rem; } .footer-brand p { line-height: 1.6; } .footer-links h4 { color: #fff; font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 1rem; } .footer-links ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.75rem; } .footer-links a { color: #9ca3af; text-decoration: none; transition: color 0.2s ease; } .footer-links a:hover { color: #fff; } .footer-newsletter h4 { color: #fff; margin-bottom: 1rem; } .newsletter-form { display: flex; gap: 0.5rem; } .newsletter-form input { flex: 1; padding: 0.75rem 1rem; border: 1px solid #374151; border-radius: 0.5rem; background: #374151; color: #fff; } .newsletter-form input:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,0.2); } .newsletter-form button { padding: 0.75rem 1.5rem; background: #3b82f6; color: #fff; border: none; border-radius: 0.5rem; cursor: pointer; transition: background 0.2s ease; } .newsletter-form button:hover { background: #2563eb; } .social-icons { display: flex; gap: 1rem; margin-top: 1.5rem; } @media (max-width: 768px) { .social-icons { justify-content: center; } } .social-icons a { color: #9ca3af; transition: color 0.2s ease, transform 0.2s ease; } .social-icons a:hover { color: #fff; transform: scale(1.1); } .footer-bottom { border-top: 1px solid #374151; margin-top: 3rem; padding-top: 2rem; display: flex; justify-content: space-between; align-items: center; max-width: 1280px; margin-left: auto; margin-right: auto; } @media (max-width: 768px) { .footer-bottom { flex-direction: column; gap: 1rem; } } .footer-legal { display: flex; gap: 1.5rem; } .footer-legal a { color: #9ca3af; text-decoration: none; font-size: 0.875rem; } .footer-legal a:hover { color: #fff; }","{""cols"":12,""gap"":""2rem"",""container"":""1280px""}","[{""id"":""footer"",""colSpan"":12,""rowSpan"":1}]","Desktop: Multi-column grid. Mobile: Single column stack with centered content." 44,Section Dividers,"divider wave diagonal separator section transition gradient parallax curve svg clip-path","N/A - Decorative pattern between sections",N/A - Visual transition element,Divider color matches next section background. Common: #F8FAFC to #FFFFFF or brand gradient. Use currentColor for flexibility.,"Wave subtle animation (optional), parallax depth layers, gradient fade transitions, smooth color blend",Use dividers to guide eye flow to next section. Match divider color to following section. SVG waves are resolution-independent.,".wave-divider { position: relative; width: 100%; overflow: hidden; line-height: 0; } .wave-divider svg { position: relative; display: block; width: calc(100% + 1.3px); height: 80px; } .wave-divider .shape-fill { fill: #FFFFFF; } /* Wave Divider Bottom - add to section::after */ .section-with-wave { position: relative; } .section-with-wave::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 80px; background: url(""data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z' fill='%23ffffff'/%3E%3C/svg%3E"") no-repeat bottom center; background-size: 100% 100%; } /* Diagonal Divider using clip-path */ .diagonal-divider { position: relative; } .diagonal-divider::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 100px; background: inherit; clip-path: polygon(0 0, 100% 0, 100% 0, 0 100%); } .section-diagonal-top { clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 100%); margin-top: -50px; padding-top: 100px; } .section-diagonal-bottom { clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%); } /* Gradient Fade Divider using mask-image */ .gradient-fade-divider { position: relative; } .gradient-fade-divider::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 150px; background: linear-gradient(to bottom, transparent, #ffffff); pointer-events: none; } .section-fade-transition { -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%); } /* Curved Divider */ .curve-divider { position: absolute; bottom: 0; left: 0; width: 100%; overflow: hidden; line-height: 0; transform: rotate(180deg); } .curve-divider svg { position: relative; display: block; width: calc(134% + 1.3px); height: 100px; } @media (max-width: 768px) { .wave-divider svg, .curve-divider svg { height: 50px; } .section-diagonal-top { clip-path: polygon(0 5%, 100% 0, 100% 100%, 0 100%); margin-top: -25px; padding-top: 50px; } }","{""cols"":12,""gap"":""0"",""container"":""100%""}","[{""id"":""divider"",""colSpan"":12,""rowSpan"":1,""decorative"":true}]","Desktop: Full-width decorative. Mobile: Reduced height for performance." 45,Content Slider Carousel,"slider carousel swiper autoplay pagination navigation dots arrows testimonials products featured Embla Swiper scroll-snap RTL touch gestures prefers-reduced-motion A11y","Container | Track | Slides | Navigation Arrows | Pagination Dots","Navigation arrows and pagination dots for engagement","Track bg: transparent or section color. Dots: inactive #CBD5E1 active brand color. Arrows: #1F2937 hover brand color.","Slide transform transition 0.5s ease, dot scale on active, arrow hover translate, autoplay with pause on hover","Use for testimonials, products, featured content. Include touch/swipe support. Pause autoplay on interaction. Show 1-3 slides based on viewport. Limit to 5 slides max for engagement; pause autoplay on hover/focus; include keyboard navigation for accessibility.",".slider-container { position: relative; overflow: hidden; padding: 2rem 0; } .slider-track { display: flex; transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); } .slider-slide { flex: 0 0 100%; min-width: 0; padding: 0 1rem; box-sizing: border-box; } .slider-slide-multi { flex: 0 0 33.333%; } @media (max-width: 1024px) { .slider-slide-multi { flex: 0 0 50%; } } @media (max-width: 640px) { .slider-slide-multi { flex: 0 0 100%; } } .slider-content { background: #fff; border-radius: 1rem; padding: 2rem; box-shadow: 0 4px 20px rgba(0,0,0,0.08); height: 100%; } .slider-arrows { position: absolute; top: 50%; left: 0; right: 0; display: flex; justify-content: space-between; padding: 0 1rem; transform: translateY(-50%); pointer-events: none; z-index: 10; } .slider-arrow { width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,0.9); border: 1px solid #e5e7eb; display: flex; align-items: center; justify-content: center; cursor: pointer; pointer-events: auto; transition: all 0.2s ease; box-shadow: 0 2px 10px rgba(0,0,0,0.1); } .slider-arrow:hover { background: #fff; transform: scale(1.1); border-color: #3b82f6; color: #3b82f6; } .slider-arrow:disabled { opacity: 0.5; cursor: not-allowed; } .slider-arrow:disabled:hover { transform: none; } .slider-arrow-prev:hover { transform: scale(1.1) translateX(-2px); } .slider-arrow-next:hover { transform: scale(1.1) translateX(2px); } .slider-dots { display: flex; justify-content: center; gap: 0.5rem; margin-top: 1.5rem; } .slider-dot { width: 10px; height: 10px; border-radius: 50%; background: #cbd5e1; border: none; cursor: pointer; transition: all 0.3s ease; padding: 0; } .slider-dot:hover { background: #94a3b8; } .slider-dot.active { background: #3b82f6; transform: scale(1.2); } /* CSS scroll-snap alternative */ .slider-scroll-snap { scroll-snap-type: x mandatory; scroll-behavior: smooth; overflow-x: auto; display: flex; } .slider-scroll-snap .slider-slide { scroll-snap-align: start; } /* RTL support */ [dir=""rtl""] .slider-container { direction: rtl; } [dir=""rtl""] .slider-track { flex-direction: row-reverse; } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .slider-container { scroll-behavior: auto; } .slider-track { transition: none; } .slider-dot, .slider-arrow { transition: none; } } /* Touch gesture hint */ .slider-track { touch-action: pan-x; } /* Accessibility: add aria-live for slide announcements */ .slider-announcer { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* Autoplay progress bar optional */ .slider-progress { position: absolute; bottom: 0; left: 0; height: 3px; background: #3b82f6; transition: width 0.1s linear; }","{""cols"":12,""gap"":""1rem"",""container"":""1280px""}","[{""id"":""slider"",""colSpan"":12,""rowSpan"":1}]","Desktop: Show 3 slides. Tablet: Show 2 slides. Mobile: Show 1 slide with touch swipe." 46,Auto-Hiding Header,"navbar hide scroll down show up auto hide reveal sticky header direction aware smart navigation disappear reappear","Direction-aware fixed header that hides on scroll down and reveals on scroll up","Reveals on scroll up for quick access to navigation","Transparent when hidden via transform. Solid with blur when visible: rgba(255,255,255,0.95) with backdrop-filter blur(12px).","Transform translateY(-100%) for hide with smooth 0.3s transition. Box-shadow and backdrop-filter when visible. Direction detection.","Best for content-heavy pages, mobile-first designs, blogs, documentation. Use 80px threshold before hiding to avoid jitter. Track scroll direction with prevScrollY comparison. Used by Linear, Vercel, Stripe.",".navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: 64px; padding: 1rem 2rem; background: rgba(255,255,255,0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 1px 3px rgba(0,0,0,0.1); transform: translateY(0); transition: transform 0.3s ease, box-shadow 0.3s ease; } .navbar.hidden { transform: translateY(-100%); box-shadow: none; } .navbar.at-top { background: transparent; backdrop-filter: none; box-shadow: none; } /* JS Direction Detection: let prevScrollY = window.scrollY; let ticking = false; window.addEventListener('scroll', () => { if (!ticking) { window.requestAnimationFrame(() => { const currScrollY = window.scrollY; const navbar = document.querySelector('.navbar'); // At top of page if (currScrollY <= 0) { navbar.classList.add('at-top'); navbar.classList.remove('hidden'); } else { navbar.classList.remove('at-top'); // Scrolling down past threshold - hide if (currScrollY > prevScrollY && currScrollY > 80) { navbar.classList.add('hidden'); } // Scrolling up - show else if (currScrollY < prevScrollY) { navbar.classList.remove('hidden'); } } prevScrollY = currScrollY; ticking = false; }); ticking = true; } }); */","{""cols"":12,""gap"":""2rem"",""container"":""1280px""}","[{""id"":""nav"",""colSpan"":12,""rowSpan"":1,""sticky"":true}]","Desktop: Fixed top, full width. Mobile: Same behavior optimized for touch scrolling." 47,Tab Navigation Component,"tabs tablist tabpanel ARIA accessible keyboard navigation animated indicator underline switch segmented",Tab trigger container | Tab content panels,Active tab content,"Subtle indicator color, accessible contrast for active state. Inactive tabs: #666666. Active tab: #000000. Indicator: var(--primary). Focus ring: var(--primary).",Animated underline indicator sliding with cubic-bezier transition. Focus-visible outline for accessibility. Tab hover color transition.,"ARIA-compliant tab pattern increases usability. Keyboard navigation (arrows, Home/End) required for accessibility. Use role=""tablist"" and role=""tab"". aria-selected for active state. Best for settings pages, product features, documentation, dashboards.",".tablist { display: flex; gap: 0.5rem; border-bottom: 1px solid rgba(0,0,0,0.1); position: relative; } .tab { padding: 0.75rem 1rem; background: none; border: none; cursor: pointer; color: #666; font-size: 0.875rem; font-weight: 500; transition: color 0.2s ease; position: relative; } .tab:hover { color: #333; } .tab[aria-selected=""true""] { color: #000; } .tab:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; } .tab-indicator { position: absolute; bottom: -1px; height: 2px; background: var(--primary); transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), width 0.3s cubic-bezier(0.4,0,0.2,1); } .tabpanel { padding: 1.5rem 0; } .tabpanel[hidden] { display: none; } .tabpanel:focus { outline: none; } /* JS: const tabs = document.querySelectorAll('[role=""tab""]'); const panels = document.querySelectorAll('[role=""tabpanel""]'); const indicator = document.querySelector('.tab-indicator'); function selectTab(tab) { tabs.forEach(t => t.setAttribute('aria-selected', 'false')); panels.forEach(p => p.hidden = true); tab.setAttribute('aria-selected', 'true'); document.getElementById(tab.getAttribute('aria-controls')).hidden = false; indicator.style.width = tab.offsetWidth + 'px'; indicator.style.transform = 'translateX(' + tab.offsetLeft + 'px)'; } tabs.forEach(tab => { tab.addEventListener('click', () => selectTab(tab)); tab.addEventListener('keydown', (e) => { const idx = [...tabs].indexOf(tab); if (e.key === 'ArrowRight') tabs[(idx + 1) % tabs.length].focus(); if (e.key === 'ArrowLeft') tabs[(idx - 1 + tabs.length) % tabs.length].focus(); if (e.key === 'Home') tabs[0].focus(); if (e.key === 'End') tabs[tabs.length - 1].focus(); if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); selectTab(tab); } }); }); selectTab(tabs[0]); */","{""cols"":12,""gap"":""1rem"",""container"":""1280px""}","[{""id"":""tablist"",""colSpan"":12,""rowSpan"":1},{""id"":""tabpanel"",""colSpan"":12,""rowSpan"":1}]","Desktop: Full width tabs. Mobile: Scrollable tab list or convert to accordion." 48,Analytics Dashboard Layout,"dashboard analytics KPI cards widget grid metrics charts Recharts Tremor real-time indicators data visualization admin panel","KPI Cards Row | Chart Grid | Data Tables | Filters Sidebar",Key metrics and action buttons prominently displayed,"Neutral bg: #F8FAFC or #F1F5F9. Card bg: #FFFFFF. Positive delta: #10B981. Negative delta: #EF4444. Charts: Brand color palette. Text: #0F172A.","KPI card hover lift, number count-up animation, chart tooltip interactions, real-time data pulse indicator, skeleton loading states","Show positive metrics prominently with green deltas. Use sparklines for trends. KPI cards above fold. Responsive grid adapts 4→2→1 columns. Sidebar filters collapse to drawer on mobile. Used by Vercel, Linear, Stripe dashboards.",".dashboard { display: grid; grid-template-columns: 250px 1fr; gap: 1.5rem; min-height: 100vh; } .dashboard-main { padding: 1.5rem; } .dashboard-sidebar { background: #fff; border-right: 1px solid #e5e7eb; padding: 1.5rem; } .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; } .kpi-card { background: #fff; border-radius: 12px; padding: 1.5rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); transition: transform 0.2s ease, box-shadow 0.2s ease; } .kpi-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); } .kpi-label { font-size: 0.875rem; color: #64748b; margin-bottom: 0.5rem; } .kpi-value { font-size: 2rem; font-weight: 700; color: #0f172a; } .kpi-delta { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.875rem; margin-top: 0.5rem; } .kpi-delta.positive { color: #10b981; } .kpi-delta.negative { color: #ef4444; } .kpi-sparkline { margin-top: 1rem; height: 40px; } .chart-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; } .chart-card { background: #fff; border-radius: 12px; padding: 1.5rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); grid-column: span 6; } .chart-card.full { grid-column: span 12; } .chart-card.third { grid-column: span 4; } .chart-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; } .chart-title { font-weight: 600; color: #0f172a; } .data-table { width: 100%; border-collapse: collapse; margin-top: 1.5rem; } .data-table th, .data-table td { padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid #e5e7eb; } .data-table th { background: #f8fafc; font-weight: 600; font-size: 0.75rem; text-transform: uppercase; color: #64748b; } @media (max-width: 1024px) { .chart-card { grid-column: span 12; } .chart-card.third { grid-column: span 6; } } @media (max-width: 768px) { .dashboard { grid-template-columns: 1fr; } .dashboard-sidebar { display: none; } .chart-card.third { grid-column: span 12; } }","{""cols"":12,""gap"":""1rem"",""sidebar_width"":""250px"",""mobile_behavior"":""drawer""}","[{""area"":""sidebar"",""colSpan"":2,""rowSpan"":12,""sticky"":true},{""area"":""kpi"",""colSpan"":10,""rowSpan"":1},{""area"":""charts"",""colSpan"":10,""rowSpan"":6},{""area"":""table"",""colSpan"":10,""rowSpan"":5}]","Desktop: Sidebar + 12-col content. Tablet: Collapsible sidebar. Mobile: Hidden sidebar with drawer toggle." 49,Mega Menu Navigation,"mega menu dropdown navigation multi-column categories enterprise keyboard accessible focus trap ARIA hover flyout","Nav trigger | Mega dropdown panel | Category columns | Featured items",Product/feature links within categories,"Light bg panel: #FFFFFF. Subtle shadows: 0 8px 30px rgba(0,0,0,0.12). Accent on hover: var(--primary). Column headers: #666666. Links: #333333.","Visibility/opacity/transform transition 0.3s cubic-bezier. Staggered column reveal. Link hover color and arrow animation. Focus within keeps menu open.","Enterprise navigation pattern used by Stripe, Apple, Vercel. Keyboard navigation required: arrows between columns, Escape to close. Use :focus-within to keep menu open. Featured section highlights key products. Mobile: convert to accordion or drawer.",".nav-container { position: relative; } .nav-list { display: flex; gap: 0.5rem; list-style: none; margin: 0; padding: 0; } .nav-item { position: relative; } .nav-trigger { display: flex; align-items: center; gap: 0.25rem; padding: 0.75rem 1rem; background: none; border: none; cursor: pointer; font-size: 0.875rem; font-weight: 500; color: #333; transition: color 0.2s ease; } .nav-trigger:hover, .nav-item:focus-within .nav-trigger { color: var(--primary); } .nav-trigger svg { transition: transform 0.2s ease; } .nav-item:hover .nav-trigger svg, .nav-item:focus-within .nav-trigger svg { transform: rotate(180deg); } .mega-menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(-10px); width: 100vw; max-width: 1000px; visibility: hidden; opacity: 0; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); background: #fff; box-shadow: 0 8px 30px rgba(0,0,0,0.12); border-radius: 0 0 12px 12px; padding: 2rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; z-index: 1000; } .nav-item:hover .mega-menu, .nav-item:focus-within .mega-menu { visibility: visible; opacity: 1; transform: translateX(-50%) translateY(0); } .mega-column { display: flex; flex-direction: column; } .mega-column h3 { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: #666; margin-bottom: 1rem; font-weight: 600; } .mega-links { display: flex; flex-direction: column; gap: 0.5rem; } .mega-link { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem; border-radius: 8px; color: #333; text-decoration: none; transition: background 0.2s ease, color 0.2s ease; } .mega-link:hover { background: #f8fafc; color: var(--primary); } .mega-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .mega-link-icon { width: 40px; height: 40px; background: #f1f5f9; border-radius: 8px; display: flex; align-items: center; justify-content: center; } .mega-link-content { flex: 1; } .mega-link-title { font-weight: 500; font-size: 0.875rem; } .mega-link-desc { font-size: 0.75rem; color: #64748b; margin-top: 0.125rem; } .mega-featured { grid-column: span 1; background: #f8fafc; border-radius: 12px; padding: 1.5rem; } .mega-featured h4 { font-size: 0.875rem; font-weight: 600; margin-bottom: 0.75rem; }","{""cols"":12,""gap"":""2rem"",""container"":""1200px""}","[{""id"":""nav"",""colSpan"":12,""rowSpan"":1},{""id"":""mega-panel"",""colSpan"":12,""rowSpan"":1,""columns"":4}]","Desktop: Multi-column dropdown. Tablet: 2-column dropdown. Mobile: Accordion or full-screen drawer." 50,Mobile Bottom Navigation Pattern,"mobile bottom nav tab bar thumb zone iOS Android Material 3 safe area 5 destinations badge notification floating dock","Bottom Tab Bar | Active Indicator | Badge Count | Safe Area Padding",Center primary action in thumb zone,"Active: Brand primary. Inactive: #9CA3AF. Badge: #EF4444. Background: rgba(255,255,255,0.95) with blur.","Active tab scale 1.1 with spring animation, badge pulse, haptic feedback integration, smooth color transitions","Limit to 3-5 key destinations. Place most important action center. Use filled icons for active state. Include safe-area-inset-bottom padding. Badge for notifications. 25% higher retention than hamburger menus.",".bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; height: calc(56px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: rgba(255,255,255,0.95); backdrop-filter: blur(12px); border-top: 1px solid rgba(0,0,0,0.08); display: flex; justify-content: space-around; align-items: center; z-index: 50; } .nav-item { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 16px; color: #9CA3AF; } .nav-item.active { color: var(--primary, #3B82F6); transform: scale(1.05); } .nav-badge { position: absolute; top: 2px; right: 8px; min-width: 16px; height: 16px; background: #EF4444; color: white; font-size: 10px; border-radius: 8px; }","{""cols"":5,""gap"":""0"",""container"":""100%""}","[{""id"":""nav-item"",""colSpan"":1,""rowSpan"":1,""repeat"":5}]","Mobile-only pattern. Hide on desktop or transform to sidebar. Use CSS env() for safe areas." 51,Mobile Floating Tabs Pattern,"floating tabs Material 3 expressive elevated pills segmented control iOS Android gesture swipe animated indicator","Floating Container | Tab Pills | Active Indicator | Swipe Gesture Area",Floating above content with elevation,"Active: White text on primary. Inactive: #6B7280 on transparent. Container: rgba(0,0,0,0.05) rounded-full.","Pill slide animation with spring physics, indicator morph, swipe gesture support, elevation shadow on scroll","Material 3 Expressive style. Use for 2-4 options. Rounded pill shape. Elevated above content. Support horizontal swipe to switch. Add haptic feedback on selection.",".floating-tabs { position: sticky; top: 16px; z-index: 40; display: flex; justify-content: center; padding: 0 16px; } .tabs-container { display: flex; background: rgba(0,0,0,0.05); border-radius: 100px; padding: 4px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); } .tab-pill { padding: 10px 20px; font-size: 14px; font-weight: 500; color: #6B7280; background: transparent; border: none; border-radius: 100px; } .tab-pill.active { color: white; } .tab-indicator { position: absolute; background: var(--primary, #3B82F6); border-radius: 100px; }","{""cols"":1,""gap"":""0"",""container"":""100%""}","[{""id"":""floating-tabs"",""colSpan"":1,""rowSpan"":1,""sticky"":true}]","Mobile: Floating centered. Tablet: Can expand width. Desktop: Consider traditional tabs." 52,Mobile Gesture Navigation Pattern,"gesture navigation swipe back edge swipe pinch zoom diagonal haptic feedback iOS Android touch interaction","Edge Swipe Area | Gesture Indicator | Haptic Zone | Visual Feedback Layer",Edge areas for navigation gestures,"Gesture indicator: rgba(0,0,0,0.1). Active gesture: Brand primary at 20% opacity. Feedback: Subtle blur effect.","Edge swipe reveals previous screen, pinch-to-zoom with smooth scaling, diagonal gesture support, haptic feedback pulses","Design for thumb reachability. Edge swipe for back (iOS/Android standard). Support pinch-to-zoom on media. Add visual feedback during gesture. Integrate haptic feedback. 40% faster navigation than button taps.",".gesture-container { position: relative; overflow: hidden; touch-action: manipulation; } .edge-swipe-zone { position: fixed; top: 0; bottom: 0; width: 20px; z-index: 100; } .gesture-indicator { position: fixed; top: 50%; left: 0; width: 8px; height: 60px; background: rgba(0,0,0,0.1); border-radius: 0 4px 4px 0; transform: translateY(-50%) translateX(-8px); opacity: 0; } .gesture-indicator.active { transform: translateY(-50%) translateX(0); opacity: 1; }","{""cols"":1,""gap"":""0"",""container"":""100%""}","[{""id"":""gesture-area"",""colSpan"":1,""rowSpan"":1,""fullscreen"":true}]","Mobile: Full gesture support. Tablet: Edge gestures. Desktop: Mouse alternatives." 53,Mobile Tab Bar Pattern,"tab bar segmented iOS UIKit Android navigation pill selector switch toggle option","Tab Bar Container | Segment Options | Selection Indicator | Dividers",Prominent selection indicator,"Selected: White on primary or primary on white. Unselected: #6B7280. Divider: rgba(0,0,0,0.1).","Smooth indicator slide, segment press feedback, color fade transition, selection haptic","iOS-style segmented control. Use for 2-4 mutually exclusive options. Equal width segments. Clear visual distinction for selected state.",".tab-bar { display: flex; background: rgba(0,0,0,0.06); border-radius: 8px; padding: 2px; } .tab-segment { flex: 1; padding: 8px 12px; font-size: 13px; font-weight: 500; color: #6B7280; background: transparent; border: none; border-radius: 6px; text-align: center; } .tab-segment.selected { color: #1F2937; } .tab-bar-indicator { position: absolute; background: white; border-radius: 6px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }","{""cols"":1,""gap"":""0"",""container"":""100%""}","[{""id"":""tab-bar"",""colSpan"":1,""rowSpan"":1}]","Mobile: Full width. Tablet/Desktop: Consider max-width constraint or inline placement." 54,Mobile Card Feed Layout,"card feed stream timeline social media modular scannable chunks live tracking micro-animations skeleton loading","Card Stack | Card Item | Media Zone | Action Bar | Loading Skeleton",Card action buttons in thumb zone,"Card bg: #FFFFFF. Border: rgba(0,0,0,0.08). Shadow: 0 2px 8px rgba(0,0,0,0.04). Accent: Brand primary for actions.","Card entrance stagger animation, pull-to-refresh spring, action button micro-interactions, skeleton shimmer loading, live content pulse","Design scannable content chunks. Support live tracking updates. Add micro-animations for engagement. Use skeleton loading for perceived performance. Thumb-friendly action placement.",".card-feed { display: flex; flex-direction: column; gap: 16px; padding: 16px; } .feed-card { background: white; border-radius: 16px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.04); border: 1px solid rgba(0,0,0,0.08); } .skeleton { background: linear-gradient(90deg, #F3F4F6 25%, #E5E7EB 50%, #F3F4F6 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }","{""cols"":1,""gap"":""16px"",""container"":""100%""}","[{""id"":""card"",""colSpan"":1,""rowSpan"":1,""repeat"":""n""}]","Mobile: Single column stack. Tablet: 2-column grid. Desktop: 3-column masonry or grid." 55,Mobile Adaptive Grid Layout,"adaptive grid responsive window size class foldable compact medium expanded Android iOS breakpoints fluid","Adaptive Container | Grid Cells | Breakpoint Handler | Size Class Detector",Adapt CTAs to current size class,"Compact: Single column focus. Medium: 2-col balanced. Expanded: 3+ col with sidebar potential.","Smooth grid reflow animation, cell resize transitions, orientation change handling, fold-aware animations","Use Android window size classes (compact <600dp, medium 600-840dp, expanded >840dp). Support foldable devices. Animate layout changes. Test all configurations.",".adaptive-grid { display: grid; gap: 16px; padding: 16px; } @media (max-width: 599px) { .adaptive-grid { grid-template-columns: 1fr; } } @media (min-width: 600px) and (max-width: 839px) { .adaptive-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 840px) { .adaptive-grid { grid-template-columns: repeat(3, 1fr); } }","{""cols"":""auto"",""gap"":""16px"",""container"":""100%""}","[{""id"":""cell"",""colSpan"":""responsive"",""rowSpan"":1}]","Compact: 1 col. Medium: 2 col. Expanded: 3+ col. Foldable: Split across fold." 56,Mobile Foldable Layout,"foldable fold-aware dual screen hinge posture table-top flex mode Samsung Galaxy Fold Android 12L multi-window","Fold-Aware Container | Primary Pane | Secondary Pane | Hinge Spacer | Posture Detector",Split CTAs across fold when unfolded,"Primary pane: Content focus. Secondary pane: Complementary info. Hinge area: Transparent spacer.","Smooth pane transitions on fold/unfold, content reflow animation, hinge-aware spacing, posture change animations","Design for multiple postures (flat, flex, tent, book). Avoid placing interactive elements on fold. Use hinge as natural divider. Test with Fold emulator.",".foldable-container { display: grid; grid-template-columns: 1fr; min-height: 100vh; } @media (horizontal-viewport-segments: 2) { .foldable-container { grid-template-columns: env(viewport-segment-width 0 0) env(viewport-segment-width 1 0); } .primary-pane { grid-column: 1; } .secondary-pane { grid-column: 2; } } .pane { padding: 24px; overflow-y: auto; }","{""cols"":""fold-aware"",""gap"":""hinge"",""container"":""100%""}","[{""id"":""primary"",""colSpan"":1,""rowSpan"":1},{""id"":""secondary"",""colSpan"":1,""rowSpan"":1}]","Folded: Single pane. Unfolded: Dual pane. Flex mode: Top content, bottom controls." 57,Mobile Multi-Window Layout,"multi-window split screen picture-in-picture PiP Android freeform iPad Stage Manager resize window","Resizable Container | Window Chrome | Resize Handle | PiP Overlay | Window Stack",Persistent CTA in each window,"Window chrome: rgba(255,255,255,0.95). Active window: Full opacity. Inactive: 0.95 opacity. Resize handle: #9CA3AF.","Window resize spring animation, PiP enter/exit transition, window focus elevation change, drag reposition smooth","Support Android 16 resizability (>600dp). Design for minimum viable window size. Maintain usability in PiP. Handle window focus states. iPad Stage Manager compatible.",".window-container { position: relative; width: 100%; height: 100%; min-width: 320px; min-height: 400px; } .app-window { position: absolute; background: white; border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,0.12); overflow: hidden; } .app-window.focused { box-shadow: 0 12px 48px rgba(0,0,0,0.2); z-index: 10; } .window-chrome { height: 44px; background: rgba(255,255,255,0.95); backdrop-filter: blur(12px); cursor: grab; } .pip-window { position: fixed; bottom: 24px; right: 24px; width: 180px; aspect-ratio: 16/9; border-radius: 12px; z-index: 1000; }","{""cols"":""dynamic"",""gap"":""8px"",""container"":""viewport""}","[{""id"":""window"",""colSpan"":""resizable"",""rowSpan"":""resizable""}]","Adapt to available window size. Support minimum dimensions. Handle PiP separately." 58,Mobile App Onboarding Pattern,"onboarding walkthrough tutorial first-run welcome carousel pager dots skip progress permission request value prop","Pager Container | Page Slides | Progress Dots | Skip Button | CTA Button | Permission Request",Final slide strong CTA + Skip always visible,"Background: Gradient or brand color. Text: High contrast white. Dots: Inactive rgba(255,255,255,0.4), Active white. CTA: Contrasting solid button.","Page swipe with parallax layers, dot active animation, content fade/slide entrance, permission prompt animation, confetti on complete","Limit to 3-5 screens max. Show value before asking permissions. Always provide skip option. Use visual storytelling. 40% higher completion with progress indicators.",".onboarding-container { height: 100vh; height: 100dvh; display: flex; flex-direction: column; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); } .onboarding-pager { flex: 1; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; } .onboarding-slide { flex: 0 0 100%; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 24px; color: white; } .progress-dots { display: flex; gap: 8px; } .dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.4); } .dot.active { width: 24px; border-radius: 4px; background: white; }","{""cols"":1,""gap"":""0"",""container"":""100dvh""}","[{""id"":""pager"",""colSpan"":1,""rowSpan"":1,""fullscreen"":true}]","Mobile: Full screen pager. Tablet: Centered modal option. Desktop: Side-by-side layout." 59,Mobile Quick Actions Pattern,"quick actions FAB floating action button speed dial contextual menu shortcuts radial thumb zone bottom sheet","FAB Button | Speed Dial Menu | Action Items | Backdrop Overlay | Tooltip Labels",Primary action most prominent and accessible,"FAB: Brand primary with shadow. Actions: White bg or primary variants. Backdrop: rgba(0,0,0,0.5). Labels: Dark on light tooltip.","FAB rotation on expand, staggered action appearance, backdrop fade, action hover scale, ripple effect on tap","Place FAB in thumb-friendly zone (bottom-right). Limit to 3-6 actions. Most used action = primary FAB. Expand upward or radially. Include labels for clarity.",".fab-container { position: fixed; bottom: calc(24px + env(safe-area-inset-bottom)); right: 24px; z-index: 50; } .fab { width: 56px; height: 56px; border-radius: 16px; background: var(--primary, #3B82F6); color: white; border: none; box-shadow: 0 4px 12px rgba(59,130,246,0.4); } .fab.expanded { transform: rotate(45deg); border-radius: 50%; } .speed-dial { position: absolute; bottom: 72px; right: 0; display: flex; flex-direction: column-reverse; gap: 12px; opacity: 0; } .speed-dial.open { opacity: 1; } .dial-action-btn { width: 48px; height: 48px; border-radius: 12px; background: white; box-shadow: 0 2px 8px rgba(0,0,0,0.15); }","{""cols"":1,""gap"":""12px"",""container"":""fixed""}","[{""id"":""fab"",""colSpan"":1,""rowSpan"":1,""position"":""fixed""}]","Mobile: Bottom-right FAB. Tablet: Can use extended FAB with label. Desktop: Consider toolbar." 60,Mobile Pull-to-Refresh Pattern,"pull refresh PTR gesture loading spinner iOS Android spring overscroll custom indicator fetch update","Pull Zone | Progress Indicator | Loading Spinner | Content Container | Spring Animation",Refresh reveals updated content with feedback,"Indicator: Brand primary. Background pull zone: #F3F4F6. Spinner: Brand primary. Success: #10B981.","Rubber-band pull effect, spinner rotation, checkmark success animation, content fade refresh, haptic on trigger","Threshold ~80px before triggering. Show clear visual feedback during pull. Indicate loading state. Success feedback before hiding. Support custom indicators.",".ptr-container { position: relative; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; } .ptr-indicator { position: absolute; top: 0; left: 0; right: 0; height: 80px; display: flex; align-items: center; justify-content: center; transform: translateY(-100%); } .ptr-indicator.pulling { transform: translateY(0); } .ptr-spinner { width: 32px; height: 32px; border: 3px solid #E5E7EB; border-top-color: var(--primary, #3B82F6); border-radius: 50%; } .ptr-indicator.loading .ptr-spinner { animation: ptr-spin 0.8s linear infinite; } @keyframes ptr-spin { to { transform: rotate(360deg); } }","{""cols"":1,""gap"":""0"",""container"":""100%""}","[{""id"":""ptr"",""colSpan"":1,""rowSpan"":1,""sticky"":""top""}]","Mobile: Native-feel pull gesture. Tablet/Desktop: Can add manual refresh button as fallback." 61,Mobile Infinite Scroll Pattern,"infinite scroll endless pagination load more lazy loading virtualized list intersection observer windowing recycler","Scroll Container | Item List | Loading Trigger | Loading Indicator | End Message | Virtual Window",Load more CTA as fallback option,"Loading indicator: Brand primary spinner. End message: #9CA3AF muted text. Item bg: Standard content styling.","Loading spinner entrance, new items fade-in stagger, smooth scroll position maintenance, skeleton placeholders","Trigger load ~200px before end. Show loading indicator. Handle end-of-content gracefully. Consider virtualization for 1000+ items. Maintain scroll position on load.",".infinite-container { height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; } .infinite-list { display: flex; flex-direction: column; } .infinite-item { padding: 16px; border-bottom: 1px solid rgba(0,0,0,0.08); } .infinite-loader { display: flex; align-items: center; justify-content: center; padding: 24px; } .infinite-spinner { width: 24px; height: 24px; border: 2px solid #E5E7EB; border-top-color: var(--primary); border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .infinite-end { text-align: center; padding: 24px; color: #9CA3AF; }","{""cols"":1,""gap"":""0"",""container"":""100%""}","[{""id"":""list"",""colSpan"":1,""rowSpan"":""dynamic""}]","Mobile: Infinite scroll preferred. Desktop: Can offer pagination alternative. Handle slow networks."