{"name":"web-development","url":"https://web-development.cornelcaba.com","generated":"2026-09-22T20:51:52Z","tabs":[{"id":"overview","label":"Overview"},{"id":"text","label":"Text"},{"id":"dashboards","label":"Dashboards"},{"id":"templates","label":"Site templates"},{"id":"wordpress","label":"WordPress"},{"id":"components","label":"Components"},{"id":"motion","label":"Motion & backgrounds"},{"id":"styles","label":"Styles"},{"id":"fonts","label":"Fonts"},{"id":"brief","label":"New site brief"}],"counts":{"overview":0,"text":32,"dashboards":6,"templates":44,"wordpress":6,"components":127,"motion":95,"styles":0,"fonts":0,"brief":0},"items":[{"id":"cx-0tp-animation-v5","tab":"components","group":"OTP / verification","title":"OTP animation v5","description":"Dark phone-style OTP sheet with 4-digit auto-verify input.","source":"Code XR","license":"Purchased (personal use)","tags":["dark","minimal","mobile","react","framer-motion"],"image":"img/cx/0tp-animation-v5.webp","demo":"vault/codexr/0tp-animation-v5.html","vault":false,"stack":"React + Vite","path":"~/Downloads/topmate/_html/0tp-animation-v5.html"},{"id":"cx-animated-ape-dock","tab":"components","group":"Navigation","title":"Animated Apple dock","description":"macOS-style dock with magnifying icons and notification badge.","source":"Code XR","license":"Purchased (personal use)","tags":["macos","dock","hover","react","framer-motion","tailwind","remixicon"],"image":"img/cx/animated-ape-dock.webp","demo":"vault/codexr/animated-ape-dock.html","vault":false,"stack":"React + Vite","path":"~/Downloads/topmate/_html/animated-ape-dock.html"},{"id":"cx-apple-style-navbar","tab":"components","group":"Navigation","title":"Apple-style navbar","description":"Floating dark navbar with menu, search and login, Apple look.","source":"Code XR","license":"Purchased (personal use)","tags":["dark","glass","header","react","framer-motion"],"image":"img/cx/apple-style-navbar.webp","demo":"vault/codexr/apple-style-navbar.html","vault":false,"stack":"React + Vite","path":"~/Downloads/topmate/_html/apple-style-navbar.html"},{"id":"cx-boy-login-form","tab":"components","group":"Login","title":"3D character login","description":"Login card with an animated 3D character (Three.js / FBX) that waves and walks.","source":"Code XR","license":"Purchased (personal use)","tags":["3d","three.js","playful","react","framer-motion","three","@react-three/fiber"],"image":"img/cx/boy-login-form.webp","demo":"vault/codexr/boy-login-form.html","vault":false,"stack":"React + Vite","path":"~/Downloads/topmate/_html/boy-login-form.html"},{"id":"cx-cards-desigs-ui","tab":"components","group":"Cards","title":"Profile cards","description":"Stacked profile cards with add-to-contacts actions and photo backgrounds.","source":"Code XR","license":"Purchased (personal use)","tags":["profile","stacked","light","react","framer-motion"],"image":"img/cx/cards-desigs-ui.webp","demo":"vault/codexr/cards-desigs-ui.html","vault":false,"stack":"React + Vite","path":"~/Downloads/topmate/_html/cards-desigs-ui.html"},{"id":"cx-contact-us-animation","tab":"components","group":"Forms","title":"Contact us animation","description":"Contact form with a paper-plane send animation and social buttons.","source":"Code XR","license":"Purchased (personal use)","tags":["contact","paper plane","light","react","framer-motion","lucide-react"],"image":"img/cx/contact-us-animation.webp","demo":"vault/codexr/contact-us-animation.html","vault":false,"stack":"React + Vite","path":"~/Downloads/topmate/_html/contact-us-animation.html"},{"id":"cx-file-upload-v2","tab":"components","group":"Upload","title":"File upload v2","description":"Drag & drop uploader for images, videos and files with progress.","source":"Code XR","license":"Purchased (personal use)","tags":["drag and drop","light","react","framer-motion","lucide-react"],"image":"img/cx/file-upload-v2.webp","demo":"vault/codexr/file-upload-v2.html","vault":false,"stack":"React + Vite","path":"~/Downloads/topmate/_html/file-upload-v2.html"},{"id":"cx-fly-to-cart","tab":"components","group":"E-commerce","title":"Fly to cart","description":"Product card where the item flies into the cart on add.","source":"Code XR","license":"Purchased (personal use)","tags":["product","cart","micro-interaction","react","framer-motion","tailwind"],"image":"img/cx/fly-to-cart.webp","demo":"vault/codexr/fly-to-cart.html","vault":false,"stack":"React + Vite","path":"~/Downloads/topmate/_html/fly-to-cart.html"},{"id":"cx-glassy-carousel-animation","tab":"components","group":"Carousel","title":"Glassy movie carousel","description":"3D glass carousel of movie posters with trailer playback and music bar.","source":"Code XR","license":"Purchased (personal use)","tags":["glass","3d","media player","react","framer-motion"],"image":"img/cx/glassy-carousel-animation.webp","demo":"vault/codexr/glassy-carousel-animation.html","vault":false,"stack":"React + Vite","path":"~/Downloads/topmate/_html/glassy-carousel-animation.html"},{"id":"cx-glassy-login-form","tab":"components","group":"Login","title":"Glassy login forms","description":"Two glassmorphism login forms over an illustrated landscape.","source":"Code XR","license":"Purchased (personal use)","tags":["glass","illustration","two variants","react","framer-motion"],"image":"img/cx/glassy-login-form.webp","demo":"vault/codexr/glassy-login-form.html","vault":false,"stack":"React + Vite","path":"~/Downloads/topmate/_html/glassy-login-form.html"},{"id":"cx-glassy-otp-animation","tab":"components","group":"OTP / verification","title":"Glassy OTP","description":"Dark liquid-glass OTP card with gold accents.","source":"Code XR","license":"Purchased (personal use)","tags":["glass","dark","gold","react","framer-motion","lucide-react"],"image":"img/cx/glassy-otp-animation.webp","demo":"vault/codexr/glassy-otp-animation.html","vault":false,"stack":"React + Vite","path":"~/Downloads/topmate/_html/glassy-otp-animation.html"},{"id":"cx-glassy-payment-checkout","tab":"components","group":"Checkout & payment","title":"Glassy payment checkout","description":"Three-step glass checkout (cart, shipping, payment) with animated card.","source":"Code XR","license":"Purchased (personal use)","tags":["glass","dark","card","react","framer-motion","lucide-react"],"image":"img/cx/glassy-payment-checkout.webp","demo":"vault/codexr/glassy-payment-checkout.html","vault":false,"stack":"React + Vite","path":"~/Downloads/topmate/_html/glassy-payment-checkout.html"},{"id":"cx-lamp-login-animation-v2","tab":"components","group":"Login","title":"Lamp login v2","description":"Pull the lamp string to reveal the login form.","source":"Code XR","license":"Purchased (personal use)","tags":["dark","pull string","playful","react","framer-motion","lucide-react"],"image":"img/cx/lamp-login-animation-v2.webp","demo":"vault/codexr/lamp-login-animation-v2.html","vault":false,"stack":"React + Vite","path":"~/Downloads/topmate/_html/lamp-login-animation-v2.html"},{"id":"cx-lamp-login","tab":"components","group":"Login","title":"Lamp login","description":"Desk lamp lights up a sign-in card; toggle by pulling the string.","source":"Code XR","license":"Purchased (personal use)","tags":["dark","lamp","glow","react","framer-motion","lucide-react"],"image":"img/cx/lamp-login.webp","demo":"vault/codexr/lamp-login.html","vault":false,"stack":"React + Vite","path":"~/Downloads/topmate/_html/lamp-login.html"},{"id":"cx-login-animation-v4","tab":"components","group":"Login","title":"Mascot sign-up v4","description":"Lime sign-up card with animated mascot and success state.","source":"Code XR","license":"Purchased (personal use)","tags":["mascot","playful","lime","react","framer-motion"],"image":"img/cx/login-animation-v4.webp","demo":"vault/codexr/login-animation-v4.html","vault":false,"stack":"React + Vite","path":"~/Downloads/topmate/_html/login-animation-v4.html"},{"id":"cx-login-animation-v8","tab":"components","group":"Login","title":"Characters login v8","description":"Split login with animated illustrated characters and social sign-in.","source":"Code XR","license":"Purchased (personal use)","tags":["illustration","characters","light","react","framer-motion"],"image":"img/cx/login-animation-v8.webp","demo":"vault/codexr/login-animation-v8.html","vault":false,"stack":"React + Vite","path":"~/Downloads/topmate/_html/login-animation-v8.html"},{"id":"cx-login-forms","tab":"components","group":"Login","title":"Login forms (mobile + desktop)","description":"Mobile and desktop login forms with soft gradient background.","source":"Code XR","license":"Purchased (personal use)","tags":["gradient","two variants","react","framer-motion","lucide-react"],"image":"img/cx/login-forms.webp","demo":"vault/codexr/login-forms.html","vault":false,"stack":"React + Vite","path":"~/Downloads/topmate/_html/login-forms.html"},{"id":"cx-login-page-animation-v2","tab":"components","group":"Login","title":"Login page v2","description":"Dark neon split login with sliding welcome panel.","source":"Code XR","license":"Purchased (personal use)","tags":["dark","neon","split","react","framer-motion"],"image":"img/cx/login-page-animation-v2.webp","demo":"vault/codexr/login-page-animation-v2.html","vault":false,"stack":"React + Vite","path":"~/Downloads/topmate/_html/login-page-animation-v2.html"},{"id":"cx-login-page-v5","tab":"components","group":"Login","title":"Login page v5","description":"Dark red circuit-board login with welcome panel.","source":"Code XR","license":"Purchased (personal use)","tags":["dark","red","circuit","react","framer-motion","lucide-react"],"image":"img/cx/login-page-v5.webp","demo":"vault/codexr/login-page-v5.html","vault":false,"stack":"React + Vite","path":"~/Downloads/topmate/_html/login-page-v5.html"},{"id":"cx-login-ui-cloud","tab":"components","group":"Login","title":"Cloud login","description":"Playful cloud login with panda mascot and purple sky.","source":"Code XR","license":"Purchased (personal use)","tags":["light","clouds","panda","react","framer-motion","lucide-react"],"image":"img/cx/login-ui-cloud.webp","demo":"vault/codexr/login-ui-cloud.html","vault":false,"stack":"React + Vite","path":"~/Downloads/topmate/_html/login-ui-cloud.html"},{"id":"cx-login-v7","tab":"components","group":"Login","title":"Login v7 (gold glass)","description":"Dark liquid-glass login with gold CTA and social sign-in.","source":"Code XR","license":"Purchased (personal use)","tags":["glass","dark","gold","react","framer-motion","lucide-react"],"image":"img/cx/login-v7.webp","demo":"vault/codexr/login-v7.html","vault":false,"stack":"React + Vite","path":"~/Downloads/topmate/_html/login-v7.html"},{"id":"cx-macbook-scroll-animation","tab":"components","group":"Hero / landing","title":"MacBook scroll hero","description":"Apple-style product hero: MacBook opens as you scroll.","source":"Code XR","license":"Purchased (personal use)","tags":["apple","scroll","landing","react","framer-motion","tailwind"],"image":"img/cx/macbook-scroll-animation.webp","demo":"vault/codexr/macbook-scroll-animation.html","vault":false,"stack":"React + Vite","path":"~/Downloads/topmate/_html/macbook-scroll-animation.html"},{"id":"cx-mascot-otp-animation","tab":"components","group":"OTP / verification","title":"Mascot OTP","description":"OTP card with an owl mascot reacting to input.","source":"Code XR","license":"Purchased (personal use)","tags":["mascot","lime","playful","react","framer-motion","lucide-react"],"image":"img/cx/mascot-otp-animation.webp","demo":"vault/codexr/mascot-otp-animation.html","vault":false,"stack":"React + Vite","path":"~/Downloads/topmate/_html/mascot-otp-animation.html"},{"id":"cx-mobile-payment-checkout","tab":"components","group":"Checkout & payment","title":"Mobile payment checkout","description":"Mobile add-card screen with live card preview.","source":"Code XR","license":"Purchased (personal use)","tags":["mobile","card","light","react","framer-motion"],"image":"img/cx/mobile-payment-checkout.webp","demo":"vault/codexr/mobile-payment-checkout.html","vault":false,"stack":"React + Vite","path":"~/Downloads/topmate/_html/mobile-payment-checkout.html"},{"id":"cx-navigation-tabs-v3","tab":"components","group":"Navigation","title":"Navigation tabs v3","description":"Three tab bar styles with animated active indicator.","source":"Code XR","license":"Purchased (personal use)","tags":["tab bar","indicator","react","framer-motion"],"image":"img/cx/navigation-tabs-v3.webp","demo":"vault/codexr/navigation-tabs-v3.html","vault":false,"stack":"React + Vite","path":"~/Downloads/topmate/_html/navigation-tabs-v3.html"},{"id":"cx-navigation-tabs-v4","tab":"components","group":"Navigation","title":"Navigation tabs v4","description":"Pill tab bars and a dock-style mini bar.","source":"Code XR","license":"Purchased (personal use)","tags":["tab bar","dock","react","framer-motion","lucide-react","clsx"],"image":"img/cx/navigation-tabs-v4.webp","demo":"vault/codexr/navigation-tabs-v4.html","vault":false,"stack":"React + Vite","path":"~/Downloads/topmate/_html/navigation-tabs-v4.html"},{"id":"cx-navigation-tabs","tab":"components","group":"Navigation","title":"Navigation tabs","description":"Bottom navigation bars with bubble active state.","source":"Code XR","license":"Purchased (personal use)","tags":["tab bar","red","bottom nav","react","framer-motion","lucide-react"],"image":"img/cx/navigation-tabs.webp","demo":"vault/codexr/navigation-tabs.html","vault":false,"stack":"React + Vite","path":"~/Downloads/topmate/_html/navigation-tabs.html"},{"id":"cx-navigation-v2","tab":"components","group":"Navigation","title":"Navigation bars v2","description":"Bottom nav bars with background colour switcher.","source":"Code XR","license":"Purchased (personal use)","tags":["tab bar","theme switcher","react","framer-motion","lucide-react"],"image":"img/cx/navigation-v2.webp","demo":"vault/codexr/navigation-v2.html","vault":false,"stack":"React + Vite","path":"~/Downloads/topmate/_html/navigation-v2.html"},{"id":"cx-new-cart-animation-2","tab":"components","group":"E-commerce","title":"Cart animation (shoes)","description":"Product grid with add-to-cart animation (shoes).","source":"Code XR","license":"Purchased (personal use)","tags":["product grid","cart","react","framer-motion","lucide-react"],"image":"img/cx/new-cart-animation-2.webp","demo":"vault/codexr/new-cart-animation-2.html","vault":false,"stack":"React + Vite","path":"~/Downloads/topmate/_html/new-cart-animation-2.html"},{"id":"cx-new-cart-animation","tab":"components","group":"E-commerce","title":"Cart animation (drinks)","description":"Product grid with add-to-cart animation (drinks).","source":"Code XR","license":"Purchased (personal use)","tags":["product grid","cart","react","framer-motion","lucide-react"],"image":"img/cx/new-cart-animation.webp","demo":"vault/codexr/new-cart-animation.html","vault":false,"stack":"React + Vite","path":"~/Downloads/topmate/_html/new-cart-animation.html"},{"id":"cx-new-search-feature","tab":"components","group":"Search","title":"Expanding search","description":"Search icon that expands into a full search bar with suggestions.","source":"Code XR","license":"Purchased (personal use)","tags":["micro-interaction","search bar","react","framer-motion","lucide-react"],"image":"img/cx/new-search-feature.webp","demo":"vault/codexr/new-search-feature.html","vault":false,"stack":"React + Vite","path":"~/Downloads/topmate/_html/new-search-feature.html"},{"id":"cx-otp-animation-v10","tab":"components","group":"OTP / verification","title":"OTP animation v10","description":"Dark OTP sheet with animated digit slots.","source":"Code XR","license":"Purchased (personal use)","tags":["dark","minimal","react","framer-motion"],"image":"img/cx/otp-animation-v10.webp","demo":"vault/codexr/otp-animation-v10.html","vault":false,"stack":"React + Vite","path":"~/Downloads/topmate/_html/otp-animation-v10.html"},{"id":"cx-otp-liquid-animation","tab":"components","group":"OTP / verification","title":"Liquid OTP","description":"Light OTP card with liquid-fill digit boxes.","source":"Code XR","license":"Purchased (personal use)","tags":["liquid","light","react","framer-motion"],"image":"img/cx/otp-liquid-animation.webp","demo":"vault/codexr/otp-liquid-animation.html","vault":false,"stack":"React + Vite","path":"~/Downloads/topmate/_html/otp-liquid-animation.html"},{"id":"cx-otp-liquid-v2","tab":"components","group":"OTP / verification","title":"Liquid OTP v2","description":"Liquid OTP with a Lottie padlock animation.","source":"Code XR","license":"Purchased (personal use)","tags":["liquid","lottie","light","react","framer-motion","@lottiefiles/react-lottie-player"],"image":"img/cx/otp-liquid-v2.webp","demo":"vault/codexr/otp-liquid-v2.html","vault":false,"stack":"React + Vite","path":"~/Downloads/topmate/_html/otp-liquid-v2.html"},{"id":"cx-otp-v3","tab":"components","group":"OTP / verification","title":"OTP v3","description":"Minimal light OTP verification card.","source":"Code XR","license":"Purchased (personal use)","tags":["light","minimal","react","framer-motion","lucide-react"],"image":"img/cx/otp-v3.webp","demo":"vault/codexr/otp-v3.html","vault":false,"stack":"React + Vite","path":"~/Downloads/topmate/_html/otp-v3.html"},{"id":"cx-otp-v4","tab":"components","group":"OTP / verification","title":"OTP v4 (phone)","description":"OTP inside a phone mockup with SMS animation.","source":"Code XR","license":"Purchased (personal use)","tags":["dark","phone mockup","react","framer-motion"],"image":"img/cx/otp-v4.webp","demo":"vault/codexr/otp-v4.html","vault":false,"stack":"React + Vite","path":"~/Downloads/topmate/_html/otp-v4.html"},{"id":"cx-otp-v6-animation","tab":"components","group":"OTP / verification","title":"OTP v6","description":"Verify-identity OTP with success/error states.","source":"Code XR","license":"Purchased (personal use)","tags":["light","shake","states","react","framer-motion","lucide-react"],"image":"img/cx/otp-v6-animation.webp","demo":"vault/codexr/otp-v6-animation.html","vault":false,"stack":"React + Vite","path":"~/Downloads/topmate/_html/otp-v6-animation.html"},{"id":"cx-otp-v7","tab":"components","group":"OTP / verification","title":"OTP v7","description":"Dark OTP sheet, variant 7.","source":"Code XR","license":"Purchased (personal use)","tags":["dark","minimal","react","framer-motion","lucide-react"],"image":"img/cx/otp-v7.webp","demo":"vault/codexr/otp-v7.html","vault":false,"stack":"React + Vite","path":"~/Downloads/topmate/_html/otp-v7.html"},{"id":"cx-otp-v8-pacman","tab":"components","group":"OTP / verification","title":"OTP v8 (Pac-Man)","description":"OTP where Pac-Man eats the digits.","source":"Code XR","license":"Purchased (personal use)","tags":["dark","game","playful","react","framer-motion","lucide-react"],"image":"img/cx/otp-v8-pacman.webp","demo":"vault/codexr/otp-v8-pacman.html","vault":false,"stack":"React + Vite","path":"~/Downloads/topmate/_html/otp-v8-pacman.html"},{"id":"cx-otp-v9","tab":"components","group":"OTP / verification","title":"OTP v9","description":"Dark OTP with glowing digit cells.","source":"Code XR","license":"Purchased (personal use)","tags":["dark","blue","glow","react","framer-motion","tailwind","clsx"],"image":"img/cx/otp-v9.webp","demo":"vault/codexr/otp-v9.html","vault":false,"stack":"React + Vite","path":"~/Downloads/topmate/_html/otp-v9.html"},{"id":"cx-payment-checkout-v2","tab":"components","group":"Checkout & payment","title":"Payment checkout v2","description":"Payment method picker with order summary and card preview.","source":"Code XR","license":"Purchased (personal use)","tags":["light","summary","blue","react","framer-motion","lucide-react"],"image":"img/cx/payment-checkout-v2.webp","demo":"vault/codexr/payment-checkout-v2.html","vault":false,"stack":"React + Vite","path":"~/Downloads/topmate/_html/payment-checkout-v2.html"},{"id":"cx-payment-checkout-v3","tab":"components","group":"Checkout & payment","title":"Payment checkout v3","description":"Compact dark pay-now card with order summary.","source":"Code XR","license":"Purchased (personal use)","tags":["dark","compact","react","framer-motion","lucide-react"],"image":"img/cx/payment-checkout-v3.webp","demo":"vault/codexr/payment-checkout-v3.html","vault":false,"stack":"React + Vite","path":"~/Downloads/topmate/_html/payment-checkout-v3.html"},{"id":"cx-payment-checkout-v4","tab":"components","group":"Checkout & payment","title":"Payment checkout v4","description":"Illustrated checkout with accepted cards and invoice email.","source":"Code XR","license":"Purchased (personal use)","tags":["light","illustration","react","framer-motion"],"image":"img/cx/payment-checkout-v4.webp","demo":"vault/codexr/payment-checkout-v4.html","vault":false,"stack":"React + Vite","path":"~/Downloads/topmate/_html/payment-checkout-v4.html"},{"id":"cx-payment-checkout","tab":"components","group":"Checkout & payment","title":"Payment checkout","description":"Three-step checkout with platinum card and secure-payment badges.","source":"Code XR","license":"Purchased (personal use)","tags":["light","steps","card","react","framer-motion","lucide-react"],"image":"img/cx/payment-checkout.webp","demo":"vault/codexr/payment-checkout.html","vault":false,"stack":"React + Vite","path":"~/Downloads/topmate/_html/payment-checkout.html"},{"id":"cx-secure-login","tab":"components","group":"Login","title":"Secure login","description":"Dark login with security-check steps side panel.","source":"Code XR","license":"Purchased (personal use)","tags":["dark","steps","security","react","framer-motion","lucide-react"],"image":"img/cx/secure-login.webp","demo":"vault/codexr/secure-login.html","vault":false,"stack":"React + Vite","path":"~/Downloads/topmate/_html/secure-login.html"},{"id":"cx-svg-icons-animation","tab":"components","group":"Icons","title":"SVG icon animations","description":"Animated SVG nav icons (home, folder, heart, bell, user).","source":"Code XR","license":"Purchased (personal use)","tags":["svg","micro-interaction","react","framer-motion"],"image":"img/cx/svg-icons-animation.webp","demo":"vault/codexr/svg-icons-animation.html","vault":false,"stack":"React + Vite","path":"~/Downloads/topmate/_html/svg-icons-animation.html"},{"id":"cx-upload-button-animation","tab":"components","group":"Upload","title":"Upload button","description":"File picker with animated upload button.","source":"Code XR","license":"Purchased (personal use)","tags":["button","micro-interaction","react","framer-motion"],"image":"img/cx/upload-button-animation.webp","demo":"vault/codexr/upload-button-animation.html","vault":false,"stack":"React + Vite","path":"~/Downloads/topmate/_html/upload-button-animation.html"},{"id":"cx-v2-otp-animation","tab":"components","group":"OTP / verification","title":"OTP animation v2","description":"Dark OTP sheet, variant 2.","source":"Code XR","license":"Purchased (personal use)","tags":["dark","minimal","react","framer-motion"],"image":"img/cx/v2-otp-animation.webp","demo":"vault/codexr/v2-otp-animation.html","vault":false,"stack":"React + Vite","path":"~/Downloads/topmate/_html/v2-otp-animation.html"},{"id":"cx-dash-d123-1","tab":"dashboards","group":"Code XR","title":"Task manager dashboard","description":"Purple productivity dashboard: notifications, assignments, calendar, today's tasks, premium card.","source":"Code XR","license":"Purchased (personal use)","tags":["light","productivity","purple","react"],"image":"img/cx/d123-1.webp","demo":"vault/codexr/dashbords.html","vault":false,"stack":"React + Vite"},{"id":"cx-dash-d123-2","tab":"dashboards","group":"Code XR","title":"Creativilo sales dashboard","description":"Green sales dashboard: KPIs, revenue chart, customers donut, transactions, profile & earnings panel.","source":"Code XR","license":"Purchased (personal use)","tags":["light","sales","green","react"],"image":"img/cx/d123-2.webp","demo":"vault/codexr/dashbords.html","vault":false,"stack":"React + Vite"},{"id":"cx-dash-d123-3","tab":"dashboards","group":"Code XR","title":"FinSet finance dashboard","description":"Personal finance: balances, money-flow bars, budget donut, transactions, saving goals.","source":"Code XR","license":"Purchased (personal use)","tags":["light","finance","blue","react"],"image":"img/cx/d123-3.webp","demo":"vault/codexr/dashbords.html","vault":false,"stack":"React + Vite"},{"id":"cx-dash-glassy","tab":"dashboards","group":"Code XR","title":"Glassy task dashboard","description":"Dark liquid-glass version of the task dashboard with light/dark toggle.","source":"Code XR","license":"Purchased (personal use)","tags":["dark","glass","productivity","react"],"image":"img/cx/glassy.webp","demo":"vault/codexr/glassy-dashbord.html","vault":false,"stack":"React + Vite"},{"id":"cx-dash-v2-1","tab":"dashboards","group":"Code XR","title":"Time & tasks dashboard","description":"Lime/orange time tracker: hours, tasks, track-time curve, notes; includes settings view.","source":"Code XR","license":"Purchased (personal use)","tags":["light","productivity","lime","lottie","react"],"image":"img/cx/v2-1.webp","demo":"vault/codexr/dashboards-v2.html","vault":false,"stack":"React + Vite"},{"id":"cx-dash-v2-2","tab":"dashboards","group":"Code XR","title":"Investment portfolio dashboard","description":"Portfolio overview: price, active users chart, strategy cards, balance card, transactions.","source":"Code XR","license":"Purchased (personal use)","tags":["light","finance","portfolio","react"],"image":"img/cx/v2-2.webp","demo":"vault/codexr/dashboards-v2.html","vault":false,"stack":"React + Vite"},{"id":"rb-animatedcontent","tab":"motion","group":"Animation","title":"Animated Content","description":"Wrapper that animates any children on scroll or mount with configurable direction, distance, duration, easing and disappear options.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/animatedcontent.webp","video":"vault/reactbits/assets/video/animatedcontent.webm","demo":"vault/reactbits/animations/animated-content","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-blobcursor","tab":"motion","group":"Animation","title":"Blob Cursor","description":"Organic blob cursor that smoothly follows the pointer with inertia and elastic morphing.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/blobcursor.webp","video":"vault/reactbits/assets/video/blobcursor.webm","demo":"vault/reactbits/animations/blob-cursor","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-clickspark","tab":"motion","group":"Animation","title":"Click Spark","description":"Creates particle spark bursts at click position.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/clickspark.webp","video":"vault/reactbits/assets/video/clickspark.webm","demo":"vault/reactbits/animations/click-spark","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-crosshair","tab":"motion","group":"Animation","title":"Crosshair","description":"Custom crosshair cursor with tracking, and link hover effects.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/crosshair.webp","video":"vault/reactbits/assets/video/crosshair.webm","demo":"vault/reactbits/animations/crosshair","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-cubes","tab":"motion","group":"Animation","title":"Cubes","description":"3D rotating cube cluster. Supports auto-rotation or hover interaction.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/cubes.webp","video":"vault/reactbits/assets/video/cubes.webm","demo":"vault/reactbits/animations/cubes","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-electricborder","tab":"motion","group":"Animation","title":"Electric Border","description":"Jittery electric energy border with animated arcs, glow and adjustable intensity.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/electricborder.webp","video":"vault/reactbits/assets/video/electricborder.webm","demo":"vault/reactbits/animations/electric-border","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-fadecontent","tab":"motion","group":"Animation","title":"Fade Content","description":"Simple directional fade / slide entrance / exit wrapper with threshold-based activation.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/fadecontent.webp","video":"vault/reactbits/assets/video/fadecontent.webm","demo":"vault/reactbits/animations/fade-content","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-glarehover","tab":"motion","group":"Animation","title":"Glare Hover","description":"Adds a realistic moving glare highlight on hover over any element.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/glarehover.webp","video":"vault/reactbits/assets/video/glarehover.webm","demo":"vault/reactbits/animations/glare-hover","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-gradualblur","tab":"motion","group":"Animation","title":"Gradual Blur","description":"Progressively un-blurs content based on scroll or trigger creating a cinematic reveal.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/gradualblur.webp","video":"vault/reactbits/assets/video/gradualblur.webm","demo":"vault/reactbits/animations/gradual-blur","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-glowcursor","tab":"motion","group":"Animation","title":"Glow Cursor","description":"Shader-powered light trail that smoothly follows the pointer with customizable glow, color, taper and pulse.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/glowcursor.webp","video":"vault/reactbits/assets/video/glowcursor.webm","demo":"vault/reactbits/animations/glow-cursor","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-ghostcursor","tab":"motion","group":"Animation","title":"Ghost Cursor","description":"Semi-transparent ghost cursor that smoothly follows the real cursor with a trailing effect.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/ghostcursor.webp","video":"vault/reactbits/assets/video/ghostcursor.webm","demo":"vault/reactbits/animations/ghost-cursor","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-imagetrail","tab":"motion","group":"Animation","title":"Image Trail","description":"Cursor-based image trail with several built-in variants.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/imagetrail.webp","video":"vault/reactbits/assets/video/imagetrail.webm","demo":"vault/reactbits/animations/image-trail","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-logoloop","tab":"motion","group":"Animation","title":"Logo Loop","description":"Continuously looping marquee of brand or tech logos with seamless repeat and hover pause.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/logoloop.webp","video":"vault/reactbits/assets/video/logoloop.webm","demo":"vault/reactbits/animations/logo-loop","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-magnet","tab":"motion","group":"Animation","title":"Magnet","description":"Elements magnetically ease toward the cursor then settle back with spring physics.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/magnet.webp","video":"vault/reactbits/assets/video/magnet.webm","demo":"vault/reactbits/animations/magnet","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-magnetlines","tab":"motion","group":"Animation","title":"Magnet Lines","description":"Animated field lines bend toward the cursor.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/magnetlines.webp","video":"vault/reactbits/assets/video/magnetlines.webm","demo":"vault/reactbits/animations/magnet-lines","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-metaballs","tab":"motion","group":"Animation","title":"Meta Balls","description":"Liquid metaball blobs that merge and separate with smooth implicit surface animation.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/metaballs.webp","video":"vault/reactbits/assets/video/metaballs.webm","demo":"vault/reactbits/animations/meta-balls","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-strands","tab":"motion","group":"Animation","title":"Strands","description":"Glowing ribbon-like strands that ripple and weave across a transparent canvas.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/strands.webp","video":"vault/reactbits/assets/video/strands.webm","demo":"vault/reactbits/animations/strands","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-metallicpaint","tab":"motion","group":"Animation","title":"Metallic Paint","description":"Liquid metallic paint shader which can be applied to SVG elements.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/metallicpaint.webp","video":"vault/reactbits/assets/video/metallicpaint.webm","demo":"vault/reactbits/animations/metallic-paint","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-noise","tab":"motion","group":"Animation","title":"Noise","description":"Animated film grain / noise overlay adding subtle texture and motion.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/noise.webp","video":"vault/reactbits/assets/video/noise.webm","demo":"vault/reactbits/animations/noise","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-pixeltrail","tab":"motion","group":"Animation","title":"Pixel Trail","description":"Pixelated cursor trail emitting fading squares with retro digital feel.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/pixeltrail.webp","video":"vault/reactbits/assets/video/pixeltrail.webm","demo":"vault/reactbits/animations/pixel-trail","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-pixeltransition","tab":"motion","group":"Animation","title":"Pixel Transition","description":"Pixel dissolve transition for content reveal on hover.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/pixeltransition.webp","video":"vault/reactbits/assets/video/pixeltransition.webm","demo":"vault/reactbits/animations/pixel-transition","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-pixelswap","tab":"motion","group":"Animation","title":"Pixel Swap","description":"Pixel fragments assemble into a full cover, swap arbitrary content, then dissolve away with reversible colors and triggers.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/pixelswap.webp","video":"vault/reactbits/assets/video/pixelswap.webm","demo":"vault/reactbits/animations/pixel-swap","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-ribbons","tab":"motion","group":"Animation","title":"Ribbons","description":"Flowing responsive ribbons/cursor trail driven by physics and pointer motion.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/ribbons.webp","video":"vault/reactbits/assets/video/ribbons.webm","demo":"vault/reactbits/animations/ribbons","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-shapeblur","tab":"motion","group":"Animation","title":"Shape Blur","description":"Morphing blurred geometric shape. The effect occurs on hover.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/shapeblur.webp","video":"vault/reactbits/assets/video/shapeblur.webm","demo":"vault/reactbits/animations/shape-blur","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-splashcursor","tab":"motion","group":"Animation","title":"Splash Cursor","description":"Liquid splash burst at cursor with curling ripples and waves.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/splashcursor.webp","video":"vault/reactbits/assets/video/splashcursor.webm","demo":"vault/reactbits/animations/splash-cursor","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-starborder","tab":"motion","group":"Animation","title":"Star Border","description":"Animated star / sparkle border orbiting content with twinkle pulses.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/starborder.webp","video":"vault/reactbits/assets/video/starborder.webm","demo":"vault/reactbits/animations/star-border","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-stickerpeel","tab":"motion","group":"Animation","title":"Sticker Peel","description":"Sticker corner lift + peel interaction using 3D transform and shadow depth.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/stickerpeel.webp","video":"vault/reactbits/assets/video/stickerpeel.webm","demo":"vault/reactbits/animations/sticker-peel","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-targetcursor","tab":"motion","group":"Animation","title":"Target Cursor","description":"A cursor follow animation with 4 corners that lock onto targets.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/targetcursor.webp","video":"vault/reactbits/assets/video/targetcursor.webm","demo":"vault/reactbits/animations/target-cursor","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-laserflow","tab":"motion","group":"Animation","title":"Laser Flow","description":"Dynamic laser light that flows onto a surface, customizable effect.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/laserflow.webp","video":"vault/reactbits/assets/video/laserflow.webm","demo":"vault/reactbits/animations/laser-flow","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-antigravity","tab":"motion","group":"Animation","title":"Antigravity","description":"3D antigravity particle field that repels from the cursor with smooth motion.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/antigravity.webp","video":"vault/reactbits/assets/video/antigravity.webm","demo":"vault/reactbits/animations/antigravity","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-orbitimages","tab":"motion","group":"Animation","title":"Orbit Images","description":"SVG Path customizable orbiting images effect","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/orbitimages.webp","video":"vault/reactbits/assets/video/orbitimages.webm","demo":"vault/reactbits/animations/orbit-images","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-magicrings","tab":"motion","group":"Animation","title":"Magic Rings","description":"Interactive magic rings effect with customizable parameters.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/magicrings.webp","video":"vault/reactbits/assets/video/magicrings.webm","demo":"vault/reactbits/animations/magic-rings","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-asciitext","tab":"text","group":"Text animation","title":"ASCIIText","description":"Renders text with an animated ASCII background for a retro feel.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/asciitext.webp","video":"vault/reactbits/assets/video/asciitext.webm","demo":"vault/reactbits/text-animations/ascii-text","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-blurtext","tab":"text","group":"Text animation","title":"Blur Text","description":"Text starts blurred then crisply resolves for a soft-focus reveal effect.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/blurtext.webp","video":"vault/reactbits/assets/video/blurtext.webm","demo":"vault/reactbits/text-animations/blur-text","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-circulartext","tab":"text","group":"Text animation","title":"Circular Text","description":"Layouts characters around a circle with optional rotation animation.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/circulartext.webp","video":"vault/reactbits/assets/video/circulartext.webm","demo":"vault/reactbits/text-animations/circular-text","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-countup","tab":"text","group":"Text animation","title":"Count Up","description":"Animated number counter supporting formatting and decimals.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/countup.webp","video":"vault/reactbits/assets/video/countup.webm","demo":"vault/reactbits/text-animations/count-up","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-curvedloop","tab":"text","group":"Text animation","title":"Curved Loop","description":"Flowing looping text path along a customizable curve with drag interaction.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/curvedloop.webp","video":"vault/reactbits/assets/video/curvedloop.webm","demo":"vault/reactbits/text-animations/curved-loop","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-decryptedtext","tab":"text","group":"Text animation","title":"Decrypted Text","description":"Hacker-style decryption cycling random glyphs until resolving to real text.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/decryptedtext.webp","video":"vault/reactbits/assets/video/decryptedtext.webm","demo":"vault/reactbits/text-animations/decrypted-text","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-fallingtext","tab":"text","group":"Text animation","title":"Falling Text","description":"Characters fall with gravity + bounce creating a playful entrance.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/fallingtext.webp","video":"vault/reactbits/assets/video/fallingtext.webm","demo":"vault/reactbits/text-animations/falling-text","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-fuzzytext","tab":"text","group":"Text animation","title":"Fuzzy Text","description":"Vibrating fuzzy text with controllable hover intensity.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/fuzzytext.webp","video":"vault/reactbits/assets/video/fuzzytext.webm","demo":"vault/reactbits/text-animations/fuzzy-text","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-glitchtext","tab":"text","group":"Text animation","title":"Glitch Text","description":"RGB split and distortion glitch effect with jitter effects.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/glitchtext.webp","video":"vault/reactbits/assets/video/glitchtext.webm","demo":"vault/reactbits/text-animations/glitch-text","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-gradienttext","tab":"text","group":"Text animation","title":"Gradient Text","description":"Animated gradient sweep across live text with speed and color control.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/gradienttext.webp","video":"vault/reactbits/assets/video/gradienttext.webm","demo":"vault/reactbits/text-animations/gradient-text","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-rotatingtext","tab":"text","group":"Text animation","title":"Rotating Text","description":"Cycles through multiple phrases with 3D rotate / flip transitions.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/rotatingtext.webp","video":"vault/reactbits/assets/video/rotatingtext.webm","demo":"vault/reactbits/text-animations/rotating-text","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-scrambledtext","tab":"text","group":"Text animation","title":"Scrambled Text","description":"Detects cursor position and applies a distortion effect to text.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/scrambledtext.webp","video":"vault/reactbits/assets/video/scrambledtext.webm","demo":"vault/reactbits/text-animations/scrambled-text","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-scrollfloat","tab":"text","group":"Text animation","title":"Scroll Float","description":"Text gently floats / parallax shifts on scroll.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/scrollfloat.webp","video":"vault/reactbits/assets/video/scrollfloat.webm","demo":"vault/reactbits/text-animations/scroll-float","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-scrollreveal","tab":"text","group":"Text animation","title":"Scroll Reveal","description":"Text gently unblurs and reveals on scroll.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/scrollreveal.webp","video":"vault/reactbits/assets/video/scrollreveal.webm","demo":"vault/reactbits/text-animations/scroll-reveal","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-scrollvelocity","tab":"text","group":"Text animation","title":"Scroll Velocity","description":"Text marquee animatio - speed and distortion scale with user's scroll velocity.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/scrollvelocity.webp","video":"vault/reactbits/assets/video/scrollvelocity.webm","demo":"vault/reactbits/text-animations/scroll-velocity","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-shinytext","tab":"text","group":"Text animation","title":"Shiny Text","description":"Metallic sheen sweeps across text producing a reflective highlight.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/shinytext.webp","video":"vault/reactbits/assets/video/shinytext.webm","demo":"vault/reactbits/text-animations/shiny-text","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-splittext","tab":"text","group":"Text animation","title":"Split Text","description":"Splits text into characters / words for staggered entrance animation.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/splittext.webp","video":"vault/reactbits/assets/video/splittext.webm","demo":"vault/reactbits/text-animations/split-text","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-textcursor","tab":"text","group":"Text animation","title":"Text Cursor","description":"Make any text element follow your cursor, leaving a trail of copies behind it.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/textcursor.webp","video":"vault/reactbits/assets/video/textcursor.webm","demo":"vault/reactbits/text-animations/text-cursor","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-textpressure","tab":"text","group":"Text animation","title":"Text Pressure","description":"Characters scale / warp interactively based on pointer pressure zone.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/textpressure.webp","video":"vault/reactbits/assets/video/textpressure.webm","demo":"vault/reactbits/text-animations/text-pressure","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-texttype","tab":"text","group":"Text animation","title":"Text Type","description":"Typewriter effect with blinking cursor and adjustable typing cadence.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/texttype.webp","video":"vault/reactbits/assets/video/texttype.webm","demo":"vault/reactbits/text-animations/text-type","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-truefocus","tab":"text","group":"Text animation","title":"True Focus","description":"Applies dynamic blur / clarity based over a series of words in order.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/truefocus.webp","video":"vault/reactbits/assets/video/truefocus.webm","demo":"vault/reactbits/text-animations/true-focus","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-variableproximity","tab":"text","group":"Text animation","title":"Variable Proximity","description":"Letter styling changes continuously with pointer distance mapping.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/variableproximity.webp","video":"vault/reactbits/assets/video/variableproximity.webm","demo":"vault/reactbits/text-animations/variable-proximity","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-shuffle","tab":"text","group":"Text animation","title":"Shuffle","description":"Animated text reveal where characters shuffle before settling.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/shuffle.webp","video":"vault/reactbits/assets/video/shuffle.webm","demo":"vault/reactbits/text-animations/shuffle","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-particletext","tab":"text","group":"Text animation","title":"Particle Text","description":"Text assembles from drifting particles that scatter and reform on demand.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/particletext.webp","video":"vault/reactbits/assets/video/particletext.webm","demo":"vault/reactbits/text-animations/particle-text","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-splitflaptext","tab":"text","group":"Text animation","title":"Split Flap Text","description":"Mechanical split-flap departure board that clacks through to each new phrase.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/splitflaptext.webp","video":"vault/reactbits/assets/video/splitflaptext.webm","demo":"vault/reactbits/text-animations/split-flap-text","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-warptext","tab":"text","group":"Text animation","title":"Warp Text","description":"WebGL warp that bends and refracts the text around the pointer.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/warptext.webp","video":"vault/reactbits/assets/video/warptext.webm","demo":"vault/reactbits/text-animations/warp-text","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-stroketext","tab":"text","group":"Text animation","title":"Stroke Text","description":"Outlined letterforms draw themselves on, then flood with fill.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/stroketext.webp","video":"vault/reactbits/assets/video/stroketext.webm","demo":"vault/reactbits/text-animations/stroke-text","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-depthtext","tab":"text","group":"Text animation","title":"Depth Text","description":"Layered extruded type with parallax that shifts against the pointer.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/depthtext.webp","video":"vault/reactbits/assets/video/depthtext.webm","demo":"vault/reactbits/text-animations/depth-text","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-foldtext","tab":"text","group":"Text animation","title":"Fold Text","description":"Lines unfold into place like creased paper opening flat.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/foldtext.webp","video":"vault/reactbits/assets/video/foldtext.webm","demo":"vault/reactbits/text-animations/fold-text","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-echotext","tab":"text","group":"Text animation","title":"Echo Text","description":"Ghosted copies trail behind the text and settle into a single word.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/echotext.webp","video":"vault/reactbits/assets/video/echotext.webm","demo":"vault/reactbits/text-animations/echo-text","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-maskedheading","tab":"text","group":"Text animation","title":"Masked Heading","description":"A large headline with a drifting colour mesh or image showing through the glyphs, revealed word by word.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/maskedheading.webp","video":"vault/reactbits/assets/video/maskedheading.webm","demo":"vault/reactbits/text-animations/masked-heading","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-textloop","tab":"text","group":"Text animation","title":"Text Loop","description":"A seamless text marquee that flows along curved SVG paths.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/textloop.webp","video":"vault/reactbits/assets/video/textloop.webm","demo":"vault/reactbits/text-animations/text-loop","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-animatedlist","tab":"components","group":"React Bits component","title":"Animated List","description":"List items enter with staggered motion variants for polished reveals.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/animatedlist.webp","video":"vault/reactbits/assets/video/animatedlist.webm","demo":"vault/reactbits/components/animated-list","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-bouncecards","tab":"components","group":"React Bits component","title":"Bounce Cards","description":"Cards bounce that bounce in on mount.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/bouncecards.webp","video":"vault/reactbits/assets/video/bouncecards.webm","demo":"vault/reactbits/components/bounce-cards","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-bubblemenu","tab":"components","group":"React Bits component","title":"Bubble Menu","description":"Floating circular expanding menu with staggered item reveal.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/bubblemenu.webp","video":"vault/reactbits/assets/video/bubblemenu.webm","demo":"vault/reactbits/components/bubble-menu","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-cardnav","tab":"components","group":"React Bits component","title":"Card Nav","description":"Expandable navigation bar with card panels revealing nested links.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/cardnav.webp","video":"vault/reactbits/assets/video/cardnav.webm","demo":"vault/reactbits/components/card-nav","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-cardswap","tab":"components","group":"React Bits component","title":"Card Swap","description":"Cards animate position swapping with smooth layout transitions.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/cardswap.webp","video":"vault/reactbits/assets/video/cardswap.webm","demo":"vault/reactbits/components/card-swap","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-carousel","tab":"components","group":"React Bits component","title":"Carousel","description":"Responsive carousel with touch gestures, looping and transitions.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/carousel.webp","video":"vault/reactbits/assets/video/carousel.webm","demo":"vault/reactbits/components/carousel","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-chromagrid","tab":"components","group":"React Bits component","title":"Chroma Grid","description":"A responsive grid of grayscale tiles. Hovering the grid reaveals their colors.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/chromagrid.webp","video":"vault/reactbits/assets/video/chromagrid.webm","demo":"vault/reactbits/components/chroma-grid","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-depthcarousel","tab":"components","group":"React Bits component","title":"Depth Carousel","description":"Cards recede into depth on a 3D rail, with drag, keyboard and auto-advance.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/depthcarousel.webp","video":"vault/reactbits/assets/video/depthcarousel.webm","demo":"vault/reactbits/components/depth-carousel","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-accordiongallery","tab":"components","group":"React Bits component","title":"Accordion Gallery","description":"Panels expand on hover or focus, revealing parallax imagery and captions.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/accordiongallery.webp","video":"vault/reactbits/assets/video/accordiongallery.webm","demo":"vault/reactbits/components/accordion-gallery","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-morphslider","tab":"components","group":"React Bits component","title":"Morph Slider","description":"WebGL slider that melts between images with a displacement transition.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/morphslider.webp","video":"vault/reactbits/assets/video/morphslider.webm","demo":"vault/reactbits/components/morph-slider","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-driftwall","tab":"components","group":"React Bits component","title":"Drift Wall","description":"An endless perspective wall of tiles drifting past, lifting on hover.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/driftwall.webp","video":"vault/reactbits/assets/video/driftwall.webm","demo":"vault/reactbits/components/drift-wall","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-circulargallery","tab":"components","group":"React Bits component","title":"Circular Gallery","description":"Circular orbit gallery rotating images.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/circulargallery.webp","video":"vault/reactbits/assets/video/circulargallery.webm","demo":"vault/reactbits/components/circular-gallery","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-counter","tab":"components","group":"React Bits component","title":"Counter","description":"Flexible animated counter supporting increments + easing.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/counter.webp","video":"vault/reactbits/assets/video/counter.webm","demo":"vault/reactbits/components/counter","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-decaycard","tab":"components","group":"React Bits component","title":"Decay Card","description":"Hover parallax effect that disintegrates the content of a card.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/decaycard.webp","video":"vault/reactbits/assets/video/decaycard.webm","demo":"vault/reactbits/components/decay-card","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-dock","tab":"components","group":"React Bits component","title":"Dock","description":"macOS style magnifying dock with proximity scaling of icons.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/dock.webp","video":"vault/reactbits/assets/video/dock.webm","demo":"vault/reactbits/components/dock","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-domegallery","tab":"components","group":"React Bits component","title":"Dome Gallery","description":"Immersive 3D dome gallery projecting images on a hemispheric surface.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/domegallery.webp","video":"vault/reactbits/assets/video/domegallery.webm","demo":"vault/reactbits/components/dome-gallery","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-elasticslider","tab":"components","group":"React Bits component","title":"Elastic Slider","description":"Slider handle stretches elastically then snaps with spring physics.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/elasticslider.webp","video":"vault/reactbits/assets/video/elasticslider.webm","demo":"vault/reactbits/components/elastic-slider","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-flowingmenu","tab":"components","group":"React Bits component","title":"Flowing Menu","description":"Liquid flowing active indicator glides between menu items.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/flowingmenu.webp","video":"vault/reactbits/assets/video/flowingmenu.webm","demo":"vault/reactbits/components/flowing-menu","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-fluidglass","tab":"components","group":"React Bits component","title":"Fluid Glass","description":"Glassmorphism container with animated liquid distortion refraction.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/fluidglass.webp","video":"vault/reactbits/assets/video/fluidglass.webm","demo":"vault/reactbits/components/fluid-glass","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-flyingposters","tab":"components","group":"React Bits component","title":"Flying Posters","description":"3D posters rotate on scroll infinitely.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/flyingposters.webp","video":"vault/reactbits/assets/video/flyingposters.webm","demo":"vault/reactbits/components/flying-posters","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-folder","tab":"components","group":"React Bits component","title":"Folder","description":"Interactive folder opens to reveal nested content smooth motion.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/folder.webp","video":"vault/reactbits/assets/video/folder.webm","demo":"vault/reactbits/components/folder","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-glassicons","tab":"components","group":"React Bits component","title":"Glass Icons","description":"Icon set styled with frosted glass blur.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/glassicons.webp","video":"vault/reactbits/assets/video/glassicons.webm","demo":"vault/reactbits/components/glass-icons","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-glasssurface","tab":"components","group":"React Bits component","title":"Glass Surface","description":"Advanced Apple-style glass surface with real-time distortion + lighting.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/glasssurface.webp","video":"vault/reactbits/assets/video/glasssurface.webm","demo":"vault/reactbits/components/glass-surface","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-gooeynav","tab":"components","group":"React Bits component","title":"Gooey Nav","description":"Navigation indicator morphs with gooey blob transitions between items.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/gooeynav.webp","video":"vault/reactbits/assets/video/gooeynav.webm","demo":"vault/reactbits/components/gooey-nav","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-infinitespiral","tab":"components","group":"React Bits component","title":"Infinite Spiral","description":"An endlessly looping 3D helix of images with customizable motion, depth, spacing and interaction.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/infinitespiral.webp","video":"vault/reactbits/assets/video/infinitespiral.webm","demo":"vault/reactbits/components/infinite-spiral","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-infinitemenu","tab":"components","group":"React Bits component","title":"Infinite Menu","description":"Horizontally looping menu effect that scrolls endlessly with seamless wrap.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/infinitemenu.webp","video":"vault/reactbits/assets/video/infinitemenu.webm","demo":"vault/reactbits/components/infinite-menu","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-lanyard","tab":"components","group":"React Bits component","title":"Lanyard","description":"Swinging 3D lanyard / badge card with realistic inertial motion.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/lanyard.webp","video":"vault/reactbits/assets/video/lanyard.webm","demo":"vault/reactbits/components/lanyard","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-magicbento","tab":"components","group":"React Bits component","title":"Magic Bento","description":"Interactive bento grid tiles expand + animate with various options.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/magicbento.webp","video":"vault/reactbits/assets/video/magicbento.webm","demo":"vault/reactbits/components/magic-bento","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-masonry","tab":"components","group":"React Bits component","title":"Masonry","description":"Responsive masonry layout with animated reflow + gaps optimization.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/masonry.webp","video":"vault/reactbits/assets/video/masonry.webm","demo":"vault/reactbits/components/masonry","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-modelviewer","tab":"components","group":"React Bits component","title":"Model Viewer","description":"Three.js model viewer with orbit controls and lighting presets.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/modelviewer.webp","video":"vault/reactbits/assets/video/modelviewer.webm","demo":"vault/reactbits/components/model-viewer","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-pillnav","tab":"components","group":"React Bits component","title":"Pill Nav","description":"Minimal pill nav with sliding active highlight + smooth easing.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/pillnav.webp","video":"vault/reactbits/assets/video/pillnav.webm","demo":"vault/reactbits/components/pill-nav","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-pixelcard","tab":"components","group":"React Bits component","title":"Pixel Card","description":"Card content revealed through pixel expansion transition.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/pixelcard.webp","video":"vault/reactbits/assets/video/pixelcard.webm","demo":"vault/reactbits/components/pixel-card","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-profilecard","tab":"components","group":"React Bits component","title":"Profile Card","description":"Animated profile card glare with 3D hover effect.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/profilecard.webp","video":"vault/reactbits/assets/video/profilecard.webm","demo":"vault/reactbits/components/profile-card","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-scrollstack","tab":"components","group":"React Bits component","title":"Scroll Stack","description":"Overlapping card stack reveals on scroll with depth layering.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/scrollstack.webp","video":"vault/reactbits/assets/video/scrollstack.webm","demo":"vault/reactbits/components/scroll-stack","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-spotlightcard","tab":"components","group":"React Bits component","title":"Spotlight Card","description":"Dynamic spotlight follows cursor casting gradient illumination.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/spotlightcard.webp","video":"vault/reactbits/assets/video/spotlightcard.webm","demo":"vault/reactbits/components/spotlight-card","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-borderglow","tab":"components","group":"React Bits component","title":"Border Glow","description":"Glowing mesh-gradient border that follows cursor direction and intensifies near edges.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/borderglow.webp","video":"vault/reactbits/assets/video/borderglow.webm","demo":"vault/reactbits/components/border-glow","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-linesidebar","tab":"components","group":"React Bits component","title":"Line Sidebar","description":"Static list navigation with a cursor-proximity effect that shifts and highlights nearby items.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/linesidebar.webp","video":"vault/reactbits/assets/video/linesidebar.webm","demo":"vault/reactbits/components/line-sidebar","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-optionwheel","tab":"components","group":"React Bits component","title":"Option Wheel","description":"Curved option picker that spins via scroll, drag, or arrow keys, fading and tilting items away from the selection.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/optionwheel.webp","video":"vault/reactbits/assets/video/optionwheel.webm","demo":"vault/reactbits/components/option-wheel","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-specularbutton","tab":"components","group":"React Bits component","title":"Specular Button","description":"Glass button with a shader-driven specular rim light that sweeps around the edge and follows the cursor.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/specularbutton.webp","video":"vault/reactbits/assets/video/specularbutton.webm","demo":"vault/reactbits/components/specular-button","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-elasticmesh","tab":"motion","group":"Animation","title":"Elastic Mesh","description":"Spring-mesh surface that stretches under the pointer and settles back with damped physics.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/elasticmesh.webp","video":"vault/reactbits/assets/video/elasticmesh.webm","demo":"vault/reactbits/animations/elastic-mesh","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-rippledistortion","tab":"motion","group":"Animation","title":"Ripple Distortion","description":"Pointer-driven water displacement that warps content and leaves a decaying wake.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/rippledistortion.webp","video":"vault/reactbits/assets/video/rippledistortion.webm","demo":"vault/reactbits/animations/ripple-distortion","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-swarmcursor","tab":"motion","group":"Animation","title":"Swarm Cursor","description":"Flocking particle swarm that chases the pointer, jostles for space and drifts apart at rest.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/swarmcursor.webp","video":"vault/reactbits/assets/video/swarmcursor.webm","demo":"vault/reactbits/animations/swarm-cursor","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-halftonereveal","tab":"motion","group":"Animation","title":"Halftone Reveal","description":"Print-style halftone dot matrix that resolves into sharp content around the cursor.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/halftonereveal.webp","video":"vault/reactbits/assets/video/halftonereveal.webm","demo":"vault/reactbits/animations/halftone-reveal","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-scrollexpand","tab":"motion","group":"Animation","title":"Scroll Expand","description":"A rounded media frame that grows to full bleed as it scrolls through the viewport.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/scrollexpand.webp","video":"vault/reactbits/assets/video/scrollexpand.webm","demo":"vault/reactbits/animations/scroll-expand","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-cursorgrid","tab":"motion","group":"Animation","title":"Cursor Grid","description":"Canvas grid whose cells light up around the cursor with configurable radius, falloff and click pulses.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/cursorgrid.webp","video":"vault/reactbits/assets/video/cursorgrid.webm","demo":"vault/reactbits/animations/cursor-grid","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-curvedinput","tab":"components","group":"React Bits component","title":"Curved Input","description":"Arc-bent input bar with text, caret and submit button all following the curve.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/curvedinput.webp","video":"vault/reactbits/assets/video/curvedinput.webm","demo":"vault/reactbits/components/curved-input","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-stack","tab":"components","group":"React Bits component","title":"Stack","description":"Layered stack with swipe animations, autoplay and smooth transitions.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/stack.webp","video":"vault/reactbits/assets/video/stack.webm","demo":"vault/reactbits/components/stack","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-stepper","tab":"components","group":"React Bits component","title":"Stepper","description":"Animated multi-step progress indicator with active state transitions.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/stepper.webp","video":"vault/reactbits/assets/video/stepper.webm","demo":"vault/reactbits/components/stepper","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-tiltedcard","tab":"components","group":"React Bits component","title":"Tilted Card","description":"3D perspective tilt card reacting to pointer.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/tiltedcard.webp","video":"vault/reactbits/assets/video/tiltedcard.webm","demo":"vault/reactbits/components/tilted-card","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-staggeredmenu","tab":"components","group":"React Bits component","title":"Staggered Menu","description":"Menu with staggered item animations and smooth transitions on open/close.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/staggeredmenu.webp","video":"vault/reactbits/assets/video/staggeredmenu.webm","demo":"vault/reactbits/components/staggered-menu","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-reflectivecard","tab":"components","group":"React Bits component","title":"Reflective Card","description":"Card with dynamic webcam reflection and glare effects that respond to cursor movement.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/reflectivecard.webp","video":"vault/reactbits/assets/video/reflectivecard.webm","demo":"vault/reactbits/components/reflective-card","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-shapewaves","tab":"motion","group":"Background","title":"Shape Waves","description":"A WebGPU field of triangles, circles and squares that brighten and grow along rolling waves, with an optional text cutout the waves flow around.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":["webgpu","vgpu","grid","shapes","text","procedural"],"image":"img/rb/shapewaves.webp","video":"vault/reactbits/assets/video/shapewaves.webm","demo":"vault/reactbits/backgrounds/shape-waves","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-aeroshards","tab":"motion","group":"Background","title":"Aero Shards","description":"A GPU-driven wind sculpture of folded foil shards with crisp detail, content-safe placements, and responsive pointer interactions.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":["webgpu","vgpu","particles","procedural","post-processing","interactive"],"image":"img/rb/aeroshards.webp","video":"vault/reactbits/assets/video/aeroshards.webm","demo":"vault/reactbits/backgrounds/aero-shards","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-ghostfibers","tab":"motion","group":"Background","title":"Ghost Fibers","description":"A deep-blue recursive fiber field with luminous bands, radial twisting and soft atmospheric glow.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/ghostfibers.webp","video":"vault/reactbits/assets/video/ghostfibers.webm","demo":"vault/reactbits/backgrounds/ghost-fibers","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-aurora","tab":"motion","group":"Background","title":"Aurora","description":"Flowing aurora gradient background.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/aurora.webp","video":"vault/reactbits/assets/video/aurora.webm","demo":"vault/reactbits/backgrounds/aurora","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-balatro","tab":"motion","group":"Background","title":"Balatro","description":"The balatro shader, fully customizalbe and interactive.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/balatro.webp","video":"vault/reactbits/assets/video/balatro.webm","demo":"vault/reactbits/backgrounds/balatro","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-ballpit","tab":"motion","group":"Background","title":"Ballpit","description":"Physics ball pit simulation with bouncing colorful spheres.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/ballpit.webp","video":"vault/reactbits/assets/video/ballpit.webm","demo":"vault/reactbits/backgrounds/ballpit","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-beams","tab":"motion","group":"Background","title":"Beams","description":"Crossing animated ribbons with customizable properties.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/beams.webp","video":"vault/reactbits/assets/video/beams.webm","demo":"vault/reactbits/backgrounds/beams","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-colorbends","tab":"motion","group":"Background","title":"Color Bends","description":"Vibrant color bends with smooth flowing animation.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/colorbends.webp","video":"vault/reactbits/assets/video/colorbends.webm","demo":"vault/reactbits/backgrounds/color-bends","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-crtwarp","tab":"motion","group":"Background","title":"CRTWarp","description":"Full-canvas CRT plasma with curved distortion, scanlines, bloom and pointer interaction.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/crtwarp.webp","video":"vault/reactbits/assets/video/crtwarp.webm","demo":"vault/reactbits/backgrounds/crt-warp","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-darkveil","tab":"motion","group":"Background","title":"Dark Veil","description":"Subtle dark background with a smooth animation and postprocessing.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/darkveil.webp","video":"vault/reactbits/assets/video/darkveil.webm","demo":"vault/reactbits/backgrounds/dark-veil","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-dither","tab":"motion","group":"Background","title":"Dither","description":"Retro dithered noise shader background.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/dither.webp","video":"vault/reactbits/assets/video/dither.webm","demo":"vault/reactbits/backgrounds/dither","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-dotfield","tab":"motion","group":"Background","title":"Dot Field","description":"Interactive dot grid with cursor bulge, glow, sparkle, and wave effects.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/dotfield.webp","video":"vault/reactbits/assets/video/dotfield.webm","demo":"vault/reactbits/backgrounds/dot-field","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-dotgrid","tab":"motion","group":"Background","title":"Dot Grid","description":"Animated dot grid with cursor interactions.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/dotgrid.webp","video":"vault/reactbits/assets/video/dotgrid.webm","demo":"vault/reactbits/backgrounds/dot-grid","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-faultyterminal","tab":"motion","group":"Background","title":"Faulty Terminal","description":"Terminal CRT scanline squares effect with flicker + noise.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/faultyterminal.webp","video":"vault/reactbits/assets/video/faultyterminal.webm","demo":"vault/reactbits/backgrounds/faulty-terminal","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-galaxy","tab":"motion","group":"Background","title":"Galaxy","description":"Parallax realistic starfield with pointer interactions.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/galaxy.webp","video":"vault/reactbits/assets/video/galaxy.webm","demo":"vault/reactbits/backgrounds/galaxy","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-gradientblinds","tab":"motion","group":"Background","title":"Gradient Blinds","description":"Layered gradient blinds with spotlight and noise distortion.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/gradientblinds.webp","video":"vault/reactbits/assets/video/gradientblinds.webm","demo":"vault/reactbits/backgrounds/gradient-blinds","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-lightfall","tab":"motion","group":"Background","title":"Lightfall","description":"Colorful light streaks raining down a glowing tunnel with a cursor light.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/lightfall.webp","video":"vault/reactbits/assets/video/lightfall.webm","demo":"vault/reactbits/backgrounds/lightfall","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-ferrofluid","tab":"motion","group":"Background","title":"Ferrofluid","description":"A churning magnetic fluid traced by glowing contour lines, with a cursor magnet.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":null,"video":"vault/reactbits/assets/video/ferrofluid.webm","demo":"vault/reactbits/backgrounds/ferrofluid","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-moltenmetal","tab":"motion","group":"Background","title":"Molten Metal","description":"Swirling caustic plasma filaments with molten, white-hot cores.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/moltenmetal.webp","video":"vault/reactbits/assets/video/moltenmetal.webm","demo":"vault/reactbits/backgrounds/molten-metal","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-gradientwaves","tab":"motion","group":"Background","title":"Gradient Waves","description":"Raymarched sine waves rolling toward a soft, hazy horizon.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/gradientwaves.webp","video":"vault/reactbits/assets/video/gradientwaves.webm","demo":"vault/reactbits/backgrounds/gradient-waves","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-webthreads","tab":"motion","group":"Background","title":"Web Threads","description":"Glowing sine threads woven through a luminous convergence point.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/webthreads.webp","video":"vault/reactbits/assets/video/webthreads.webm","demo":"vault/reactbits/backgrounds/web-threads","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-topography","tab":"motion","group":"Background","title":"Topography","description":"A living contour map with glowing, elevation-tinted lines.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/topography.webp","video":"vault/reactbits/assets/video/topography.webm","demo":"vault/reactbits/backgrounds/topography","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-lighttunnel","tab":"motion","group":"Background","title":"Light Tunnel","description":"A radial fibre-optic tunnel with light pulses racing into depth.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/lighttunnel.webp","video":"vault/reactbits/assets/video/lighttunnel.webm","demo":"vault/reactbits/backgrounds/light-tunnel","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-slicedwaves","tab":"motion","group":"Background","title":"Sliced Waves","description":"A grid of soft glowing bars rippling like a slatted equalizer.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/slicedwaves.webp","video":"vault/reactbits/assets/video/slicedwaves.webm","demo":"vault/reactbits/backgrounds/sliced-waves","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-acidsquares","tab":"motion","group":"Background","title":"Acid Squares","description":"A crystalline corridor of stacked squares receding into depth.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/acidsquares.webp","video":"vault/reactbits/assets/video/acidsquares.webm","demo":"vault/reactbits/backgrounds/acid-squares","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-scanner","tab":"motion","group":"Background","title":"Scanner","description":"Calm interference bands sweeping across the screen like an oscilloscope.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/scanner.webp","video":"vault/reactbits/assets/video/scanner.webm","demo":"vault/reactbits/backgrounds/scanner","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-grainient","tab":"motion","group":"Background","title":"Grainient","description":"Grainy gradient swirls with soft wave distortion.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/grainient.webp","video":"vault/reactbits/assets/video/grainient.webm","demo":"vault/reactbits/backgrounds/grainient","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-gridscan","tab":"motion","group":"Background","title":"Grid Scan","description":"Animated grid room 3D scan effect and cool interactions.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/gridscan.webp","video":"vault/reactbits/assets/video/gridscan.webm","demo":"vault/reactbits/backgrounds/grid-scan","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-griddistortion","tab":"motion","group":"Background","title":"Grid Distortion","description":"Warped grid mesh distorts smoothly reacting to cursor.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/griddistortion.webp","video":"vault/reactbits/assets/video/griddistortion.webm","demo":"vault/reactbits/backgrounds/grid-distortion","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-gridmotion","tab":"motion","group":"Background","title":"Grid Motion","description":"Perspective moving grid lines based on cusror position.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/gridmotion.webp","video":"vault/reactbits/assets/video/gridmotion.webm","demo":"vault/reactbits/backgrounds/grid-motion","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-hyperspeed","tab":"motion","group":"Background","title":"Hyperspeed","description":"Animated lines continuously moving to simulate hyperspace travel on click hold.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/hyperspeed.webp","video":"vault/reactbits/assets/video/hyperspeed.webm","demo":"vault/reactbits/backgrounds/hyperspeed","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-iridescence","tab":"motion","group":"Background","title":"Iridescence","description":"Slick iridescent shader with shifting waves.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/iridescence.webp","video":"vault/reactbits/assets/video/iridescence.webm","demo":"vault/reactbits/backgrounds/iridescence","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-letterglitch","tab":"motion","group":"Background","title":"Letter Glitch","description":"Matrix style letter animation.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/letterglitch.webp","video":"vault/reactbits/assets/video/letterglitch.webm","demo":"vault/reactbits/backgrounds/letter-glitch","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-lightrays","tab":"motion","group":"Background","title":"Light Rays","description":"Volumetric light rays/beams with customizable direction.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/lightrays.webp","video":"vault/reactbits/assets/video/lightrays.webm","demo":"vault/reactbits/backgrounds/light-rays","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-lightning","tab":"motion","group":"Background","title":"Lightning","description":"Procedural lightning bolts with branching and glow flicker.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/lightning.webp","video":"vault/reactbits/assets/video/lightning.webm","demo":"vault/reactbits/backgrounds/lightning","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-linewaves","tab":"motion","group":"Background","title":"Line Waves","description":"Animated line wave pattern with colorful warped distortion.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/linewaves.webp","video":"vault/reactbits/assets/video/linewaves.webm","demo":"vault/reactbits/backgrounds/line-waves","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-evileye","tab":"motion","group":"Background","title":"Evil Eye","description":"Procedural evil eye shader with animated iris, slit pupil, and fiery outer glow.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/evileye.webp","video":"vault/reactbits/assets/video/evileye.webm","demo":"vault/reactbits/backgrounds/evil-eye","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-radar","tab":"motion","group":"Background","title":"Radar","description":"Radar sweep effect with concentric rings, radial spokes, and a rotating beam.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/radar.webp","video":"vault/reactbits/assets/video/radar.webm","demo":"vault/reactbits/backgrounds/radar","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-softaurora","tab":"motion","group":"Background","title":"Soft Aurora","description":"Soft aurora borealis shader with 3D Perlin noise and cosine gradient palettes.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/softaurora.webp","video":"vault/reactbits/assets/video/softaurora.webm","demo":"vault/reactbits/backgrounds/soft-aurora","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-liquidchrome","tab":"motion","group":"Background","title":"Liquid Chrome","description":"Liquid metallic chrome shader with flowing reflective surface.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/liquidchrome.webp","video":"vault/reactbits/assets/video/liquidchrome.webm","demo":"vault/reactbits/backgrounds/liquid-chrome","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-orb","tab":"motion","group":"Background","title":"Orb","description":"Floating energy orb with customizable hover effect.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/orb.webp","video":"vault/reactbits/assets/video/orb.webm","demo":"vault/reactbits/backgrounds/orb","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-particles","tab":"motion","group":"Background","title":"Particles","description":"Configurable particle system.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/particles.webp","video":"vault/reactbits/assets/video/particles.webm","demo":"vault/reactbits/backgrounds/particles","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-pixelblast","tab":"motion","group":"Background","title":"Pixel Blast","description":"Exploding pixel particle bursts with optional liquid postprocessing.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/pixelblast.webp","video":"vault/reactbits/assets/video/pixelblast.webm","demo":"vault/reactbits/backgrounds/pixel-blast","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-plasma","tab":"motion","group":"Background","title":"Plasma","description":"Organic plasma gradients swirl + morph with smooth turbulence.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/plasma.webp","video":"vault/reactbits/assets/video/plasma.webm","demo":"vault/reactbits/backgrounds/plasma","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-plasmawave","tab":"motion","group":"Background","title":"Plasma Wave","description":"Raymarched plasma waves with dual-wave interference and OGL.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/plasmawave.webp","video":"vault/reactbits/assets/video/plasmawave.webm","demo":"vault/reactbits/backgrounds/plasma-wave","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-prism","tab":"motion","group":"Background","title":"Prism","description":"Rotating prism with configurable intensity, size, and colors.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/prism.webp","video":"vault/reactbits/assets/video/prism.webm","demo":"vault/reactbits/backgrounds/prism","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-prismaticburst","tab":"motion","group":"Background","title":"Prismatic Burst","description":"Burst of light rays with controllable color, distortion, amount.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/prismaticburst.webp","video":"vault/reactbits/assets/video/prismaticburst.webm","demo":"vault/reactbits/backgrounds/prismatic-burst","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-ripplegrid","tab":"motion","group":"Background","title":"Ripple Grid","description":"A grid that continuously animates with a ripple effect.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/ripplegrid.webp","video":"vault/reactbits/assets/video/ripplegrid.webm","demo":"vault/reactbits/backgrounds/ripple-grid","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-silk","tab":"motion","group":"Background","title":"Silk","description":"Smooth waves background with soft lighting.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/silk.webp","video":"vault/reactbits/assets/video/silk.webm","demo":"vault/reactbits/backgrounds/silk","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-siderays","tab":"motion","group":"Background","title":"Side Rays","description":"Animated light rays emanating from the side with customizable colors and speed.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/siderays.webp","video":"vault/reactbits/assets/video/siderays.webm","demo":"vault/reactbits/backgrounds/side-rays","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-shapegrid","tab":"motion","group":"Background","title":"Shape Grid","description":"Animated grid with shape variants (square, hexagon, circle, triangle) + direction customization.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/squares.webp","video":"vault/reactbits/assets/video/squares.webm","demo":"vault/reactbits/backgrounds/shape-grid","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-threads","tab":"motion","group":"Background","title":"Threads","description":"Animated pattern of lines forming a fabric-like motion.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/threads.webp","video":"vault/reactbits/assets/video/threads.webm","demo":"vault/reactbits/backgrounds/threads","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-waves","tab":"motion","group":"Background","title":"Waves","description":"Layered lines that form smooth wave patterns with animation.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/waves.webp","video":"vault/reactbits/assets/video/waves.webm","demo":"vault/reactbits/backgrounds/waves","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-liquidether","tab":"motion","group":"Background","title":"Liquid Ether","description":"Interactive liquid shader with flowing distortion and customizable colors.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/liquidether.webp","video":"vault/reactbits/assets/video/liquidether.webm","demo":"vault/reactbits/backgrounds/liquid-ether","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-floatinglines","tab":"motion","group":"Background","title":"Floating Lines","description":"3D floating lines that react to cursor movement.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/floatinglines.webp","video":"vault/reactbits/assets/video/floatinglines.webm","demo":"vault/reactbits/backgrounds/floating-lines","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-lightpillar","tab":"motion","group":"Background","title":"Light Pillar","description":"Vertical pillar of light with glow effects.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/lightpillar.webp","video":"vault/reactbits/assets/video/lightpillar.webm","demo":"vault/reactbits/backgrounds/light-pillar","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-pixelsnow","tab":"motion","group":"Background","title":"Pixel Snow","description":"Falling pixelated snow effect with customizable density and speed.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":[],"image":"img/rb/pixelsnow.webp","video":"vault/reactbits/assets/video/pixelsnow.webm","demo":"vault/reactbits/backgrounds/pixel-snow","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-squishswitch","tab":"components","group":"Micro-interaction","title":"Squish Switch","description":"Drag-scrubbable switch whose thumb stretches by how fast it moves, flips at the midpoint and squashes against the track end on a flick.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":["switch","toggle","spring","drag","gesture","form"],"image":"img/rb/squishswitch.webp","video":"vault/reactbits/assets/video/squishswitch.webm","demo":"vault/reactbits/micro/squish-switch","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-holdbutton","tab":"components","group":"Micro-interaction","title":"Hold Button","description":"Hold-to-confirm button whose liquid fill rises while pressed, snaps back on an early release and swaps its label through a blur when the hold completes.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":["button","confirm","hold","press","destructive"],"image":"img/rb/holdbutton.webp","video":"vault/reactbits/assets/video/holdbutton.webm","demo":"vault/reactbits/micro/hold-button","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-peekrating","tab":"components","group":"Micro-interaction","title":"Peek Rating","description":"Star rating you can try before you commit: sweeping the row lifts a trailing wave of stars up to the pointer while a tip hops along with the label; a click commits with a pop.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":["rating","stars","hover","preview","feedback","form"],"image":"img/rb/peekrating.webp","video":"vault/reactbits/assets/video/peekrating.webm","demo":"vault/reactbits/micro/peek-rating","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-springcheck","tab":"components","group":"Micro-interaction","title":"Spring Check","description":"Checkbox row where a single spring fills the box, draws the tick, strikes the label and dims the words in one press.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":["checkbox","toggle","form","spring","press","strikethrough"],"image":"img/rb/springcheck.webp","video":"vault/reactbits/assets/video/springcheck.webm","demo":"vault/reactbits/micro/spring-check","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-pulseheart","tab":"components","group":"Micro-interaction","title":"Pulse Heart","description":"Like button that contracts to a dot, flips colour at its smallest frame and pulses back while the count swaps one glyph.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":["like","heart","button","reaction","counter","press"],"image":"img/rb/pulseheart.webp","video":"vault/reactbits/assets/video/pulseheart.webm","demo":"vault/reactbits/micro/pulse-heart","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-rubbersegment","tab":"components","group":"Micro-interaction","title":"Rubber Segment","description":"Segmented control with a rubber thumb: taps stretch it across the gap and squash it onto the target, and you can grab, drag and flick it between slots.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":["segmented","tabs","drag","spring","clip-path","radio"],"image":"img/rb/rubbersegment.webp","video":"vault/reactbits/assets/video/rubbersegment.webm","demo":"vault/reactbits/micro/rubber-segment","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-slidecommit","tab":"components","group":"Micro-interaction","title":"Slide Commit","description":"Slide-to-confirm handle that plants with a spinner while your action runs, unfurls into a done pill on success and springs home with a squash and shake on failure.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":["slide","confirm","async","gesture","drag","button"],"image":"img/rb/slidecommit.webp","video":"vault/reactbits/assets/video/slidecommit.webm","demo":"vault/reactbits/micro/slide-commit","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-warmtooltip","tab":"components","group":"Micro-interaction","title":"Warm Tooltip","description":"Tooltip group with one shared delay: the first label waits and pops from its trigger, then siblings open instantly while the group is warm, with an optional velocity lean.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":["tooltip","hover","toolbar","delay","group","label"],"image":"img/rb/warmtooltip.webp","video":"vault/reactbits/assets/video/warmtooltip.webm","demo":"vault/reactbits/micro/warm-tooltip","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-fusebutton","tab":"components","group":"Micro-interaction","title":"Fuse Button","description":"Action button whose done state carries its own undo on a burning fuse: press, the label crossfades to Undo, a hairline burns for the undo window, and Undo or Escape runs it back.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":["button","undo","confirm","timer","press","fuse"],"image":"img/rb/fusebutton.webp","video":"vault/reactbits/assets/video/fusebutton.webm","demo":"vault/reactbits/micro/fuse-button","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-scrubfield","tab":"components","group":"Micro-interaction","title":"Scrub Field","description":"Number chip you drag to scrub: the value follows the hand, pushes past the range on a rubber band, and a click without moving opens it for typing.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":["input","number","drag","scrub","form","inspector"],"image":"img/rb/scrubfield.webp","video":"vault/reactbits/assets/video/scrubfield.webm","demo":"vault/reactbits/micro/scrub-field","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-latticeloader","tab":"components","group":"Micro-interaction","title":"Lattice Loader","description":"Inline agent-status row: a 3x3 or 4x4 lattice whose cells brighten in a phase-offset wave beside a verb and a live stopwatch, resolving into a check or a cross when the task ends.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":["loader","status","ai","agent","timer","grid"],"image":"img/rb/latticeloader.webp","video":"vault/reactbits/assets/video/latticeloader.webm","demo":"vault/reactbits/micro/lattice-loader","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-dodgefield","tab":"components","group":"Micro-interaction","title":"Dodge Field","description":"Wrapper that makes any child flee the pointer inside a bounded field, dodges once per approach, then relents after a few tries and glides home.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":["hover","pointer","playful","wrapper","button","magnet"],"image":"img/rb/dodgefield.webp","video":"vault/reactbits/assets/video/dodgefield.webm","demo":"vault/reactbits/micro/dodge-field","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-codeslots","tab":"components","group":"Micro-interaction","title":"Code Slots","description":"One-time-code input where a hidden overlay input owns focus, paste and SMS autofill while each slot lands its digit on one spring: the fill swells from the centre, the digit rises and the caret glides; a wrong code drains the slots in a cascade, a right one merges them into a single accent wash.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":["input","otp","form","spring","code"],"image":"img/rb/codeslots.webp","video":"vault/reactbits/assets/video/codeslots.webm","demo":"vault/reactbits/micro/code-slots","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-wakeslider","tab":"components","group":"Micro-interaction","title":"Wake Slider","description":"Range slider drawn as thin bars with no thumb: drag speed raises a wake that trails behind the handle and flattens again at rest.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":["slider","range","input","drag","bars","velocity"],"image":"img/rb/wakeslider.webp","video":"vault/reactbits/assets/video/wakeslider.webm","demo":"vault/reactbits/micro/wake-slider","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-cometdial","tab":"components","group":"Micro-interaction","title":"Comet Dial","description":"Tick-ring dial you flick by angle: the reading launches on a spring and a velocity-driven comet streaks behind the lit head, trailing the direction of travel and vanishing at rest.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":["dial","knob","gauge","drag","spring","input"],"image":"img/rb/cometdial.webp","video":"vault/reactbits/assets/video/cometdial.webm","demo":"vault/reactbits/micro/comet-dial","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-jellyradio","tab":"components","group":"Micro-interaction","title":"Jelly Radio","description":"Radio group of labelled chips where the chosen one swells wide-then-tall on two springs and barges its neighbours outward with a travelling stagger, so a selection reads as a force moving through the row.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":["radio","select","chips","spring","form","segmented"],"image":"img/rb/jellyradio.webp","video":"vault/reactbits/assets/video/jellyradio.webm","demo":"vault/reactbits/micro/jelly-radio","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-swiperow","tab":"components","group":"Micro-interaction","title":"Swipe Row","description":"List row that swipes open to reveal actions, snaps by flick velocity, and deletes on a full swipe that stretches the action colour across the row.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":["swipe","list","gesture","delete","drag"],"image":"img/rb/swiperow.webp","video":"vault/reactbits/assets/video/swiperow.webm","demo":"vault/reactbits/micro/swipe-row","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-glideselect","tab":"components","group":"Micro-interaction","title":"Glide Select","description":"Select chip whose menu pops out of its own corner and whose single hover highlight glides between rows, remembering where you left it so re-entry slides from there instead of blinking in.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":["select","dropdown","menu","popover","hover","form","keyboard"],"image":"img/rb/glideselect.webp","video":"vault/reactbits/assets/video/glideselect.webm","demo":"vault/reactbits/micro/glide-select","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-statusmark","tab":"components","group":"Micro-interaction","title":"Status Mark","description":"A 20px status glyph for agent task lists that morphs in place from a dashed idle ring to a spinning or real-progress arc, then draws a check or a cross, with an optional label strike.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":["status","progress","spinner","check","ai","agent","task","svg"],"image":"img/rb/statusmark.webp","video":"vault/reactbits/assets/video/statusmark.webm","demo":"vault/reactbits/micro/status-mark","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-callchip","tab":"components","group":"Micro-interaction","title":"Call Chip","description":"Inline tool-call chip whose fill wipes across while a live ms counter ticks, completing with a green wash on success or stopping short and shaking red with a retry glyph on error.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":["chip","status","ai","agent","tool-call","progress","timer"],"image":"img/rb/callchip.webp","video":"vault/reactbits/assets/video/callchip.webm","demo":"vault/reactbits/micro/call-chip","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-belltoggle","tab":"components","group":"Micro-interaction","title":"Bell Toggle","description":"Pill toggle that answers a press at three tempos: the bell rings on damped keyframes, the label blur-crossfades, and the pill unfurls to the longer label through a clip-path on a critically damped spring. The pressed state is the receipt.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":["toggle","button","bell","notify","press","spring"],"image":"img/rb/belltoggle.webp","video":"vault/reactbits/assets/video/belltoggle.webm","demo":"vault/reactbits/micro/bell-toggle","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-slingbutton","tab":"components","group":"Micro-interaction","title":"Sling Button","description":"Send button you pull back like a slingshot: the band stretches, a power arc arms it, and releasing fires the action with the flick's velocity.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":["button","send","slingshot","drag","gesture","spring"],"image":"img/rb/slingbutton.webp","video":"vault/reactbits/assets/video/slingbutton.webm","demo":"vault/reactbits/micro/sling-button","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-swipetoast","tab":"components","group":"Micro-interaction","title":"Swipe Toast","description":"Single toast that rises through its bottom edge, swipes down to dismiss on a flick or a distance, and burns a thin fuse for exactly its remaining time; hover pauses it and an inline mode keeps it inside any container.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":["toast","notification","swipe","drag","timer","undo"],"image":"img/rb/swipetoast.webp","video":"vault/reactbits/assets/video/swipetoast.webm","demo":"vault/reactbits/micro/swipe-toast","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-promptbar","tab":"components","group":"Micro-interaction","title":"Prompt Bar","description":"Chat composer with an @ sources menu, a / commands menu, a model picker, dictation and attachments, whose send tile charges to ink the moment there is something to send and morphs its arrow into a stop square while busy.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":["composer","prompt","chat","ai","input","send","stop","menu","mention","command"],"image":"img/rb/promptbar.webp","video":"vault/reactbits/assets/video/promptbar.webm","demo":"vault/reactbits/micro/prompt-bar","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-sloshgauge","tab":"components","group":"Micro-interaction","title":"Slosh Gauge","description":"Tank gauge whose liquid chases the value with mass, tilts with its own speed and splashes against the top when it slams full; optionally a vertical slider.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":["gauge","meter","progress","liquid","spring","physics","slider"],"image":"img/rb/sloshgauge.webp","video":"vault/reactbits/assets/video/sloshgauge.webm","demo":"vault/reactbits/micro/slosh-gauge","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-voicepill","tab":"components","group":"Micro-interaction","title":"Voice Pill","description":"Mic button that swells into a tinted capsule of level-driven equalizer bars and an elapsed clock while held or toggled, then relaxes back into the mic on release; simulated voice by default, real microphone as an opt-in.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":["mic","voice","dictation","equalizer","press","ai"],"image":"img/rb/voicepill.webp","video":"vault/reactbits/assets/video/voicepill.webm","demo":"vault/reactbits/micro/voice-pill","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-thoughtline","tab":"components","group":"Micro-interaction","title":"Thought Line","description":"Reasoning-trace header: a glyph and a label breathe beside a live clock while steps appear beneath, then the line settles on one beat into \"Thought for 4.2s\" through a blur crossfade and the trace folds into it.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":["ai","agent","status","reasoning","timer","text","trace"],"image":"img/rb/thoughtline.webp","video":"vault/reactbits/assets/video/thoughtline.webm","demo":"vault/reactbits/micro/thought-line","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-refineframe","tab":"components","group":"Micro-interaction","title":"Refine Frame","description":"Reserved-aspect frame that walks any media through queued, generating, refining and complete without layout shift: each stage is one blur, saturate, scale and opacity tween, a soft band sweeps while it works, a chip reports the stage, and an error dims the picture behind a retry pill.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":["ai","image","generation","loading","progressive","media","status"],"image":"img/rb/refineframe.webp","video":"vault/reactbits/assets/video/refineframe.webm","demo":"vault/reactbits/micro/refine-frame","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-folderfloat","tab":"components","group":"Micro-interaction","title":"Folder Float","description":"Folder that opens on hover or press: the flap tilts toward you, a paper edge rises, and its notes spring out from behind the flap into a floating cloud to pick from, then sink back when the folder closes.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":["folder","menu","hover","select","float","spring","files"],"image":"img/rb/folderfloat.webp","video":"vault/reactbits/assets/video/folderfloat.webm","demo":"vault/reactbits/micro/folder-float","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-branchedmenu","tab":"components","group":"Micro-interaction","title":"Branched Menu","description":"Collapsible menu whose sections unfold into a trunk with a curved branch to each child, and an accent line that travels down the trunk and around the curve to whatever you pick, while a marker glides to the open section.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":["menu","navigation","sidebar","tree","collapsible","line","active"],"image":"img/rb/branchedmenu.webp","video":"vault/reactbits/assets/video/branchedmenu.webm","demo":"vault/reactbits/micro/branched-menu","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-flipcard","tab":"components","group":"Micro-interaction","title":"Flip Card","description":"Two-faced card that flips in 3D on a click, a drag or a flick, settling on a spring that carries your release velocity, with an optional cursor tilt, a sheen that follows the pointer and a shadow that narrows as it turns edge on.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":["card","flip","3d","tilt","drag","spring","hover","two-sided"],"image":"img/rb/flipcard.webp","video":"vault/reactbits/assets/video/flipcard.webm","demo":"vault/reactbits/micro/flip-card","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-tearticket","tab":"components","group":"Micro-interaction","title":"Tear Ticket","description":"Ticket whose perforated stub tears off by hand: paper bridges stretch into fibres and snap one by one from the far end, the torn edges are jagged and fit each other, the freed stub dangles and drops, and the body is stamped as used. The artwork tilts in 3D with parallax on hover.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":["ticket","tear","perforation","stub","coupon","pass","drag","parallax","tilt"],"image":"img/rb/tearticket.webp","video":"vault/reactbits/assets/video/tearticket.webm","demo":"vault/reactbits/micro/tear-ticket","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-papercrumple","tab":"components","group":"Micro-interaction","title":"Paper Crumple","description":"An image that crumples into a textured 3D sheet while held and follows the grabbed point as you drag. Release it as a crumpled ball, unfold it flat, or leave the paper creased, with customizable folds, paper grain, lighting and shadows.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":["paper","crumple","3d","three","image","drag","hold","fold","crease"],"image":"img/rb/papercrumple.webp","video":"vault/reactbits/assets/video/papercrumple.webm","demo":"vault/reactbits/micro/paper-crumple","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"rb-shredder","tab":"components","group":"Micro-interaction","title":"Shredder","description":"A list with a paper shredder at the bottom. Drag a row into the slit and the rollers tug it in, pull it through and cut it into strips that curl out underneath, tumble away and fade out. The rest of the list settles down on a spring and the shredded item is handed to you to delete.","source":"React Bits","license":"MIT + Commons Clause (private copy)","tags":["shredder","delete","drag","list","strips","paper","physics","remove"],"image":"img/rb/shredder.webp","video":"vault/reactbits/assets/video/shredder.webm","demo":"vault/reactbits/micro/shredder","vault":false,"stack":"React (JS/TS, CSS/Tailwind)"},{"id":"h5-paradigm-shift","tab":"templates","group":"HTML5 UP","title":"Paradigm Shift","description":"Responsive HTML5/CSS template, hosted here. 584,463 downloads on HTML5 UP.","source":"HTML5 UP","license":"CC BY 3.0 (keep the footer credit)","tags":["html","css","free"],"image":"img/h5/paradigm-shift.jpg","demo":"templates/html5up/paradigm-shift/","stack":"HTML + CSS + jQuery","popularity":584463,"path":"/opt/web-development/site/templates/html5up/paradigm-shift/","vault":false},{"id":"h5-massively","tab":"templates","group":"HTML5 UP","title":"Massively","description":"Responsive HTML5/CSS template, hosted here. 750,804 downloads on HTML5 UP.","source":"HTML5 UP","license":"CC BY 3.0 (keep the footer credit)","tags":["html","css","free"],"image":"img/h5/massively.jpg","demo":"templates/html5up/massively/","stack":"HTML + CSS + jQuery","popularity":750804,"path":"/opt/web-development/site/templates/html5up/massively/","vault":false},{"id":"h5-ethereal","tab":"templates","group":"HTML5 UP","title":"Ethereal","description":"Responsive HTML5/CSS template, hosted here. 490,919 downloads on HTML5 UP.","source":"HTML5 UP","license":"CC BY 3.0 (keep the footer credit)","tags":["html","css","free"],"image":"img/h5/ethereal.jpg","demo":"templates/html5up/ethereal/","stack":"HTML + CSS + jQuery","popularity":490919,"path":"/opt/web-development/site/templates/html5up/ethereal/","vault":false},{"id":"h5-story","tab":"templates","group":"HTML5 UP","title":"Story","description":"Responsive HTML5/CSS template, hosted here. 479,269 downloads on HTML5 UP.","source":"HTML5 UP","license":"CC BY 3.0 (keep the footer credit)","tags":["html","css","free"],"image":"img/h5/story.jpg","demo":"templates/html5up/story/","stack":"HTML + CSS + jQuery","popularity":479269,"path":"/opt/web-development/site/templates/html5up/story/","vault":false},{"id":"h5-dimension","tab":"templates","group":"HTML5 UP","title":"Dimension","description":"Responsive HTML5/CSS template, hosted here. 708,039 downloads on HTML5 UP.","source":"HTML5 UP","license":"CC BY 3.0 (keep the footer credit)","tags":["html","css","free"],"image":"img/h5/dimension.jpg","demo":"templates/html5up/dimension/","stack":"HTML + CSS + jQuery","popularity":708039,"path":"/opt/web-development/site/templates/html5up/dimension/","vault":false},{"id":"h5-editorial","tab":"templates","group":"HTML5 UP","title":"Editorial","description":"Responsive HTML5/CSS template, hosted here. 585,640 downloads on HTML5 UP.","source":"HTML5 UP","license":"CC BY 3.0 (keep the footer credit)","tags":["html","css","free"],"image":"img/h5/editorial.jpg","demo":"templates/html5up/editorial/","stack":"HTML + CSS + jQuery","popularity":585640,"path":"/opt/web-development/site/templates/html5up/editorial/","vault":false},{"id":"h5-forty","tab":"templates","group":"HTML5 UP","title":"Forty","description":"Responsive HTML5/CSS template, hosted here. 497,492 downloads on HTML5 UP.","source":"HTML5 UP","license":"CC BY 3.0 (keep the footer credit)","tags":["html","css","free"],"image":"img/h5/forty.jpg","demo":"templates/html5up/forty/","stack":"HTML + CSS + jQuery","popularity":497492,"path":"/opt/web-development/site/templates/html5up/forty/","vault":false},{"id":"h5-stellar","tab":"templates","group":"HTML5 UP","title":"Stellar","description":"Responsive HTML5/CSS template, hosted here. 454,170 downloads on HTML5 UP.","source":"HTML5 UP","license":"CC BY 3.0 (keep the footer credit)","tags":["html","css","free"],"image":"img/h5/stellar.jpg","demo":"templates/html5up/stellar/","stack":"HTML + CSS + jQuery","popularity":454170,"path":"/opt/web-development/site/templates/html5up/stellar/","vault":false},{"id":"h5-multiverse","tab":"templates","group":"HTML5 UP","title":"Multiverse","description":"Responsive HTML5/CSS template, hosted here. 436,432 downloads on HTML5 UP.","source":"HTML5 UP","license":"CC BY 3.0 (keep the footer credit)","tags":["html","css","free"],"image":"img/h5/multiverse.jpg","demo":"templates/html5up/multiverse/","stack":"HTML + CSS + jQuery","popularity":436432,"path":"/opt/web-development/site/templates/html5up/multiverse/","vault":false},{"id":"h5-phantom","tab":"templates","group":"HTML5 UP","title":"Phantom","description":"Responsive HTML5/CSS template, hosted here. 498,503 downloads on HTML5 UP.","source":"HTML5 UP","license":"CC BY 3.0 (keep the footer credit)","tags":["html","css","free"],"image":"img/h5/phantom.jpg","demo":"templates/html5up/phantom/","stack":"HTML + CSS + jQuery","popularity":498503,"path":"/opt/web-development/site/templates/html5up/phantom/","vault":false},{"id":"h5-hyperspace","tab":"templates","group":"HTML5 UP","title":"Hyperspace","description":"Responsive HTML5/CSS template, hosted here. 572,256 downloads on HTML5 UP.","source":"HTML5 UP","license":"CC BY 3.0 (keep the footer credit)","tags":["html","css","free"],"image":"img/h5/hyperspace.jpg","demo":"templates/html5up/hyperspace/","stack":"HTML + CSS + jQuery","popularity":572256,"path":"/opt/web-development/site/templates/html5up/hyperspace/","vault":false},{"id":"h5-future-imperfect","tab":"templates","group":"HTML5 UP","title":"Future Imperfect","description":"Responsive HTML5/CSS template, hosted here. 462,739 downloads on HTML5 UP.","source":"HTML5 UP","license":"CC BY 3.0 (keep the footer credit)","tags":["html","css","free"],"image":"img/h5/future-imperfect.jpg","demo":"templates/html5up/future-imperfect/","stack":"HTML + CSS + jQuery","popularity":462739,"path":"/opt/web-development/site/templates/html5up/future-imperfect/","vault":false},{"id":"h5-solid-state","tab":"templates","group":"HTML5 UP","title":"Solid State","description":"Responsive HTML5/CSS template, hosted here. 514,940 downloads on HTML5 UP.","source":"HTML5 UP","license":"CC BY 3.0 (keep the footer credit)","tags":["html","css","free"],"image":"img/h5/solid-state.jpg","demo":"templates/html5up/solid-state/","stack":"HTML + CSS + jQuery","popularity":514940,"path":"/opt/web-development/site/templates/html5up/solid-state/","vault":false},{"id":"h5-lens","tab":"templates","group":"HTML5 UP","title":"Lens","description":"Responsive HTML5/CSS template, hosted here. 435,675 downloads on HTML5 UP.","source":"HTML5 UP","license":"CC BY 3.0 (keep the footer credit)","tags":["html","css","free"],"image":"img/h5/lens.jpg","demo":"templates/html5up/lens/","stack":"HTML + CSS + jQuery","popularity":435675,"path":"/opt/web-development/site/templates/html5up/lens/","vault":false},{"id":"h5-fractal","tab":"templates","group":"HTML5 UP","title":"Fractal","description":"Responsive HTML5/CSS template, hosted here. 340,724 downloads on HTML5 UP.","source":"HTML5 UP","license":"CC BY 3.0 (keep the footer credit)","tags":["html","css","free"],"image":"img/h5/fractal.jpg","demo":"templates/html5up/fractal/","stack":"HTML + CSS + jQuery","popularity":340724,"path":"/opt/web-development/site/templates/html5up/fractal/","vault":false},{"id":"h5-eventually","tab":"templates","group":"HTML5 UP","title":"Eventually","description":"Responsive HTML5/CSS template, hosted here. 401,918 downloads on HTML5 UP.","source":"HTML5 UP","license":"CC BY 3.0 (keep the footer credit)","tags":["html","css","free"],"image":"img/h5/eventually.jpg","demo":"templates/html5up/eventually/","stack":"HTML + CSS + jQuery","popularity":401918,"path":"/opt/web-development/site/templates/html5up/eventually/","vault":false},{"id":"h5-spectral","tab":"templates","group":"HTML5 UP","title":"Spectral","description":"Responsive HTML5/CSS template, hosted here. 555,537 downloads on HTML5 UP.","source":"HTML5 UP","license":"CC BY 3.0 (keep the footer credit)","tags":["html","css","free"],"image":"img/h5/spectral.jpg","demo":"templates/html5up/spectral/","stack":"HTML + CSS + jQuery","popularity":555537,"path":"/opt/web-development/site/templates/html5up/spectral/","vault":false},{"id":"h5-photon","tab":"templates","group":"HTML5 UP","title":"Photon","description":"Responsive HTML5/CSS template, hosted here. 341,003 downloads on HTML5 UP.","source":"HTML5 UP","license":"CC BY 3.0 (keep the footer credit)","tags":["html","css","free"],"image":"img/h5/photon.jpg","demo":"templates/html5up/photon/","stack":"HTML + CSS + jQuery","popularity":341003,"path":"/opt/web-development/site/templates/html5up/photon/","vault":false},{"id":"h5-highlights","tab":"templates","group":"HTML5 UP","title":"Highlights","description":"Responsive HTML5/CSS template, hosted here. 288,221 downloads on HTML5 UP.","source":"HTML5 UP","license":"CC BY 3.0 (keep the footer credit)","tags":["html","css","free"],"image":"img/h5/highlights.jpg","demo":"templates/html5up/highlights/","stack":"HTML + CSS + jQuery","popularity":288221,"path":"/opt/web-development/site/templates/html5up/highlights/","vault":false},{"id":"h5-landed","tab":"templates","group":"HTML5 UP","title":"Landed","description":"Responsive HTML5/CSS template, hosted here. 499,455 downloads on HTML5 UP.","source":"HTML5 UP","license":"CC BY 3.0 (keep the footer credit)","tags":["html","css","free"],"image":"img/h5/landed.jpg","demo":"templates/html5up/landed/","stack":"HTML + CSS + jQuery","popularity":499455,"path":"/opt/web-development/site/templates/html5up/landed/","vault":false},{"id":"h5-strata","tab":"templates","group":"HTML5 UP","title":"Strata","description":"Responsive HTML5/CSS template, hosted here. 416,107 downloads on HTML5 UP.","source":"HTML5 UP","license":"CC BY 3.0 (keep the footer credit)","tags":["html","css","free"],"image":"img/h5/strata.jpg","demo":"templates/html5up/strata/","stack":"HTML + CSS + jQuery","popularity":416107,"path":"/opt/web-development/site/templates/html5up/strata/","vault":false},{"id":"h5-read-only","tab":"templates","group":"HTML5 UP","title":"Read Only","description":"Responsive HTML5/CSS template, hosted here. 300,025 downloads on HTML5 UP.","source":"HTML5 UP","license":"CC BY 3.0 (keep the footer credit)","tags":["html","css","free"],"image":"img/h5/read-only.jpg","demo":"templates/html5up/read-only/","stack":"HTML + CSS + jQuery","popularity":300025,"path":"/opt/web-development/site/templates/html5up/read-only/","vault":false},{"id":"h5-alpha","tab":"templates","group":"HTML5 UP","title":"Alpha","description":"Responsive HTML5/CSS template, hosted here. 411,265 downloads on HTML5 UP.","source":"HTML5 UP","license":"CC BY 3.0 (keep the footer credit)","tags":["html","css","free"],"image":"img/h5/alpha.jpg","demo":"templates/html5up/alpha/","stack":"HTML + CSS + jQuery","popularity":411265,"path":"/opt/web-development/site/templates/html5up/alpha/","vault":false},{"id":"h5-directive","tab":"templates","group":"HTML5 UP","title":"Directive","description":"Responsive HTML5/CSS template, hosted here. 310,576 downloads on HTML5 UP.","source":"HTML5 UP","license":"CC BY 3.0 (keep the footer credit)","tags":["html","css","free"],"image":"img/h5/directive.jpg","demo":"templates/html5up/directive/","stack":"HTML + CSS + jQuery","popularity":310576,"path":"/opt/web-development/site/templates/html5up/directive/","vault":false},{"id":"h5-aerial","tab":"templates","group":"HTML5 UP","title":"Aerial","description":"Responsive HTML5/CSS template, hosted here. 545,540 downloads on HTML5 UP.","source":"HTML5 UP","license":"CC BY 3.0 (keep the footer credit)","tags":["html","css","free"],"image":"img/h5/aerial.jpg","demo":"templates/html5up/aerial/","stack":"HTML + CSS + jQuery","popularity":545540,"path":"/opt/web-development/site/templates/html5up/aerial/","vault":false},{"id":"h5-twenty","tab":"templates","group":"HTML5 UP","title":"Twenty","description":"Responsive HTML5/CSS template, hosted here. 460,628 downloads on HTML5 UP.","source":"HTML5 UP","license":"CC BY 3.0 (keep the footer credit)","tags":["html","css","free"],"image":"img/h5/twenty.jpg","demo":"templates/html5up/twenty/","stack":"HTML + CSS + jQuery","popularity":460628,"path":"/opt/web-development/site/templates/html5up/twenty/","vault":false},{"id":"h5-big-picture","tab":"templates","group":"HTML5 UP","title":"Big Picture","description":"Responsive HTML5/CSS template, hosted here. 632,667 downloads on HTML5 UP.","source":"HTML5 UP","license":"CC BY 3.0 (keep the footer credit)","tags":["html","css","free"],"image":"img/h5/big-picture.jpg","demo":"templates/html5up/big-picture/","stack":"HTML + CSS + jQuery","popularity":632667,"path":"/opt/web-development/site/templates/html5up/big-picture/","vault":false},{"id":"h5-tessellate","tab":"templates","group":"HTML5 UP","title":"Tessellate","description":"Responsive HTML5/CSS template, hosted here. 406,189 downloads on HTML5 UP.","source":"HTML5 UP","license":"CC BY 3.0 (keep the footer credit)","tags":["html","css","free"],"image":"img/h5/tessellate.jpg","demo":"templates/html5up/tessellate/","stack":"HTML + CSS + jQuery","popularity":406189,"path":"/opt/web-development/site/templates/html5up/tessellate/","vault":false},{"id":"h5-prologue","tab":"templates","group":"HTML5 UP","title":"Prologue","description":"Responsive HTML5/CSS template, hosted here. 700,075 downloads on HTML5 UP.","source":"HTML5 UP","license":"CC BY 3.0 (keep the footer credit)","tags":["html","css","free"],"image":"img/h5/prologue.jpg","demo":"templates/html5up/prologue/","stack":"HTML + CSS + jQuery","popularity":700075,"path":"/opt/web-development/site/templates/html5up/prologue/","vault":false},{"id":"h5-helios","tab":"templates","group":"HTML5 UP","title":"Helios","description":"Responsive HTML5/CSS template, hosted here. 587,511 downloads on HTML5 UP.","source":"HTML5 UP","license":"CC BY 3.0 (keep the footer credit)","tags":["html","css","free"],"image":"img/h5/helios.jpg","demo":"templates/html5up/helios/","stack":"HTML + CSS + jQuery","popularity":587511,"path":"/opt/web-development/site/templates/html5up/helios/","vault":false},{"id":"h5-telephasic","tab":"templates","group":"HTML5 UP","title":"Telephasic","description":"Responsive HTML5/CSS template, hosted here. 376,346 downloads on HTML5 UP.","source":"HTML5 UP","license":"CC BY 3.0 (keep the footer credit)","tags":["html","css","free"],"image":"img/h5/telephasic.jpg","demo":"templates/html5up/telephasic/","stack":"HTML + CSS + jQuery","popularity":376346,"path":"/opt/web-development/site/templates/html5up/telephasic/","vault":false},{"id":"h5-strongly-typed","tab":"templates","group":"HTML5 UP","title":"Strongly Typed","description":"Responsive HTML5/CSS template, hosted here. 520,732 downloads on HTML5 UP.","source":"HTML5 UP","license":"CC BY 3.0 (keep the footer credit)","tags":["html","css","free"],"image":"img/h5/strongly-typed.jpg","demo":"templates/html5up/strongly-typed/","stack":"HTML + CSS + jQuery","popularity":520732,"path":"/opt/web-development/site/templates/html5up/strongly-typed/","vault":false},{"id":"h5-parallelism","tab":"templates","group":"HTML5 UP","title":"Parallelism","description":"Responsive HTML5/CSS template, hosted here. 623,344 downloads on HTML5 UP.","source":"HTML5 UP","license":"CC BY 3.0 (keep the footer credit)","tags":["html","css","free"],"image":"img/h5/parallelism.jpg","demo":"templates/html5up/parallelism/","stack":"HTML + CSS + jQuery","popularity":623344,"path":"/opt/web-development/site/templates/html5up/parallelism/","vault":false},{"id":"h5-escape-velocity","tab":"templates","group":"HTML5 UP","title":"Escape Velocity","description":"Responsive HTML5/CSS template, hosted here. 499,784 downloads on HTML5 UP.","source":"HTML5 UP","license":"CC BY 3.0 (keep the footer credit)","tags":["html","css","free"],"image":"img/h5/escape-velocity.jpg","demo":"templates/html5up/escape-velocity/","stack":"HTML + CSS + jQuery","popularity":499784,"path":"/opt/web-development/site/templates/html5up/escape-velocity/","vault":false},{"id":"h5-astral","tab":"templates","group":"HTML5 UP","title":"Astral","description":"Responsive HTML5/CSS template, hosted here. 450,668 downloads on HTML5 UP.","source":"HTML5 UP","license":"CC BY 3.0 (keep the footer credit)","tags":["html","css","free"],"image":"img/h5/astral.jpg","demo":"templates/html5up/astral/","stack":"HTML + CSS + jQuery","popularity":450668,"path":"/opt/web-development/site/templates/html5up/astral/","vault":false},{"id":"h5-striped","tab":"templates","group":"HTML5 UP","title":"Striped","description":"Responsive HTML5/CSS template, hosted here. 409,254 downloads on HTML5 UP.","source":"HTML5 UP","license":"CC BY 3.0 (keep the footer credit)","tags":["html","css","free"],"image":"img/h5/striped.jpg","demo":"templates/html5up/striped/","stack":"HTML + CSS + jQuery","popularity":409254,"path":"/opt/web-development/site/templates/html5up/striped/","vault":false},{"id":"h5-dopetrope","tab":"templates","group":"HTML5 UP","title":"Dopetrope","description":"Responsive HTML5/CSS template, hosted here. 447,449 downloads on HTML5 UP.","source":"HTML5 UP","license":"CC BY 3.0 (keep the footer credit)","tags":["html","css","free"],"image":"img/h5/dopetrope.jpg","demo":"templates/html5up/dopetrope/","stack":"HTML + CSS + jQuery","popularity":447449,"path":"/opt/web-development/site/templates/html5up/dopetrope/","vault":false},{"id":"h5-miniport","tab":"templates","group":"HTML5 UP","title":"Miniport","description":"Responsive HTML5/CSS template, hosted here. 449,062 downloads on HTML5 UP.","source":"HTML5 UP","license":"CC BY 3.0 (keep the footer credit)","tags":["html","css","free"],"image":"img/h5/miniport.jpg","demo":"templates/html5up/miniport/","stack":"HTML + CSS + jQuery","popularity":449062,"path":"/opt/web-development/site/templates/html5up/miniport/","vault":false},{"id":"h5-txt","tab":"templates","group":"HTML5 UP","title":"TXT","description":"Responsive HTML5/CSS template, hosted here. 379,037 downloads on HTML5 UP.","source":"HTML5 UP","license":"CC BY 3.0 (keep the footer credit)","tags":["html","css","free"],"image":"img/h5/txt.jpg","demo":"templates/html5up/txt/","stack":"HTML + CSS + jQuery","popularity":379037,"path":"/opt/web-development/site/templates/html5up/txt/","vault":false},{"id":"h5-verti","tab":"templates","group":"HTML5 UP","title":"Verti","description":"Responsive HTML5/CSS template, hosted here. 429,775 downloads on HTML5 UP.","source":"HTML5 UP","license":"CC BY 3.0 (keep the footer credit)","tags":["html","css","free"],"image":"img/h5/verti.jpg","demo":"templates/html5up/verti/","stack":"HTML + CSS + jQuery","popularity":429775,"path":"/opt/web-development/site/templates/html5up/verti/","vault":false},{"id":"h5-zerofour","tab":"templates","group":"HTML5 UP","title":"Zerofour","description":"Responsive HTML5/CSS template, hosted here. 539,899 downloads on HTML5 UP.","source":"HTML5 UP","license":"CC BY 3.0 (keep the footer credit)","tags":["html","css","free"],"image":"img/h5/zerofour.jpg","demo":"templates/html5up/zerofour/","stack":"HTML + CSS + jQuery","popularity":539899,"path":"/opt/web-development/site/templates/html5up/zerofour/","vault":false},{"id":"h5-arcana","tab":"templates","group":"HTML5 UP","title":"Arcana","description":"Responsive HTML5/CSS template, hosted here. 506,804 downloads on HTML5 UP.","source":"HTML5 UP","license":"CC BY 3.0 (keep the footer credit)","tags":["html","css","free"],"image":"img/h5/arcana.jpg","demo":"templates/html5up/arcana/","stack":"HTML + CSS + jQuery","popularity":506804,"path":"/opt/web-development/site/templates/html5up/arcana/","vault":false},{"id":"h5-halcyonic","tab":"templates","group":"HTML5 UP","title":"Halcyonic","description":"Responsive HTML5/CSS template, hosted here. 406,863 downloads on HTML5 UP.","source":"HTML5 UP","license":"CC BY 3.0 (keep the footer credit)","tags":["html","css","free"],"image":"img/h5/halcyonic.jpg","demo":"templates/html5up/halcyonic/","stack":"HTML + CSS + jQuery","popularity":406863,"path":"/opt/web-development/site/templates/html5up/halcyonic/","vault":false},{"id":"h5-minimaxing","tab":"templates","group":"HTML5 UP","title":"Minimaxing","description":"Responsive HTML5/CSS template, hosted here. 382,221 downloads on HTML5 UP.","source":"HTML5 UP","license":"CC BY 3.0 (keep the footer credit)","tags":["html","css","free"],"image":"img/h5/minimaxing.jpg","demo":"templates/html5up/minimaxing/","stack":"HTML + CSS + jQuery","popularity":382221,"path":"/opt/web-development/site/templates/html5up/minimaxing/","vault":false},{"id":"wp-cornelcaba-support","tab":"wordpress","group":"My plugins","title":"cornel's support","description":"Remote WordPress management: full site clone, serialized-safe search-replace, granular REST API and switchable modules (Ads, WhatsApp, Cache, Stats, Branding...).","source":"cornelcaba","license":"Own","tags":["wordpress","plugin","featured"],"link":"https://wordpress-support.cornelcaba.com/?plugin=cornelcaba-support","version":"1.54.0","releases":104,"requires":"WP 5.8+ · PHP 7.4+ · tested 7.0","modules":[{"name":"Ads Manager","description":"Adverts, rotating groups, scheduling and statistics."},{"name":"Antispam","description":"Spam protection for comments, forms and registration, with a shared hub."},{"name":"Branding","description":"White label: logo, colours and messages for the login page and the wp-admin dashboard."},{"name":"Cache","description":"Disk page cache with universal purge and preload."},{"name":"Classic Editor","description":"Restores the classic editor (TinyMCE) for posts, pages and CPTs, switchable per item."},{"name":"Database","description":"Cleans revisions, transients, orphan meta and runs OPTIMIZE TABLE."},{"name":"Duplicate Page","description":"Duplicates pages, posts and CPTs in one click: content, meta, taxonomies and attributes."},{"name":"GDPR & Cookie","description":"Category-based cookie banner, prior blocking of third-party trackers, consent log and generator for privacy policy, cookie policy and terms of sale."},{"name":"Google Reviews","description":"Google badge and reviews for your business, refreshed automatically."},{"name":"Images WebP","description":"Converts images to WebP and serves them automatically."},{"name":"Instagram","description":"Instagram account connection and token management."},{"name":"Notifications","description":"Catches and hides noisy wp-admin notices."},{"name":"REST API","description":"Gestione remota completa: /eval /query /shell /file /files /option /media, con permessi granulari."},{"name":"Security","description":"Security headers, hardening, login protection, 2FA and passkeys."},{"name":"Site Migration","description":"Full file + database clone to a new domain."},{"name":"SMTP","description":"Sends site email through an external SMTP server, with tests, fallback and log."},{"name":"Statistics","description":"Jetpack-style visit counter: admin-bar sparkline and daily reports."},{"name":"Username Changer","description":"Safely change a user's username (user_login) from the dashboard."},{"name":"WhatsApp","description":"Floating WhatsApp button: chat box with agent, prefilled message and visibility hours."}],"featured":true,"vault":false},{"id":"wp-vie-ferrate","tab":"wordpress","group":"My plugins","title":"RGF Vie Ferrate","description":"Via ferrata catalogue in the Ravenna Gravity Fighters style: filterable archive, full pages with gallery, GPS tracks, video and weather. Data synced from ravennagravityfighters.com.","source":"cornelcaba","license":"Own","tags":["wordpress","plugin"],"link":"https://wordpress-support.cornelcaba.com/?plugin=vie-ferrate","version":"2.0.0","releases":1,"requires":"WP 5.8+ · PHP 7.4+ · tested 7.0","modules":[],"featured":false,"vault":false},{"id":"wp-championships","tab":"wordpress","group":"My plugins","title":"Championships","description":"Multi-room tournament manager: teams sign up and get a unique dashboard link, brackets are generated automatically, the admin runs match timers and enters results.","source":"cornelcaba","license":"Own","tags":["wordpress","plugin"],"link":"https://wordpress-support.cornelcaba.com/?plugin=championships","version":"1.0.10","releases":3,"requires":"WP 5.8+ · PHP 7.4+ · tested 7.0","modules":[],"featured":false,"vault":false},{"id":"wp-caccia-al-tesoro","tab":"wordpress","group":"My plugins","title":"Caccia al Tesoro (Treasure Hunt)","description":"Interactive game with 7 tasks, teams, secret code, trivia quiz and a video-editing task (upload + approval). Shortcode [caccia_al_tesoro].","source":"cornelcaba","license":"Own","tags":["wordpress","plugin"],"link":"https://wordpress-support.cornelcaba.com/?plugin=caccia-al-tesoro","version":"2.7.9","releases":3,"requires":"WP 5.8+ · PHP 7.4+ · tested 7.0","modules":[],"featured":false,"vault":false},{"id":"wp-mafia-game","tab":"wordpress","group":"My plugins","title":"Mafia Game","description":"Run Mafia (Lupus in Tabula) parties: a narrator creates a room, players join from their phones, roles are distributed and night/day phases tracked.","source":"cornelcaba","license":"Own","tags":["wordpress","plugin"],"link":"https://wordpress-support.cornelcaba.com/?plugin=mafia-game","version":"1.1.7","releases":3,"requires":"WP 5.8+ · PHP 7.4+ · tested 7.0","modules":[],"featured":false,"vault":false},{"id":"wp-ingerasul-secret","tab":"wordpress","group":"My plugins","title":"Îngerașul Secret (Secret Santa)","description":"Secret Santa inside WordPress: create rooms, register participants (photo, bio), shuffle with a slot-machine animation and reveal pairs to the group.","source":"cornelcaba","license":"Own","tags":["wordpress","plugin"],"link":"https://wordpress-support.cornelcaba.com/?plugin=ingerasul-secret","version":"1.0.16","releases":3,"requires":"WP 5.8+ · PHP 7.4+ · tested 7.0","modules":[],"featured":false,"vault":false}],"styles":{"styles":[{"name":"Minimalism & Swiss Style","type":"General","keywords":"Clean, simple, spacious, functional, white space, high contrast, geometric, sans-serif, grid-based, essential","primary":"Monochromatic, Black #000000, White #FFFFFF","effects":"Subtle hover (200-250ms), smooth transitions, sharp shadows if any, clear type hierarchy, fast loading","bestFor":"Enterprise apps, dashboards, documentation sites, SaaS platforms, professional tools","avoid":"Creative portfolios, entertainment, playful brands, artistic experiments","complexity":"Low"},{"name":"Neumorphism","type":"General","keywords":"Soft UI, embossed, debossed, convex, concave, light source, subtle depth, rounded (12-16px), monochromatic","primary":"Light pastels: Soft Blue #C8E0F4, Soft Pink #F5E0E8, Soft Grey #E8E8E8","effects":"Soft box-shadow (multiple: -5px -5px 15px, 5px 5px 15px), smooth press (150ms), inner subtle shadow","bestFor":"Health/wellness apps, meditation platforms, fitness trackers, minimal interaction UIs","avoid":"Complex apps, critical accessibility, data-heavy dashboards, high-contrast required","complexity":"Medium"},{"name":"Glassmorphism","type":"General","keywords":"Frosted glass, transparent, blurred background, layered, vibrant background, light source, depth, multi-layer","primary":"Translucent white: rgba(255,255,255,0.1-0.3)","effects":"Backdrop blur (10-20px), subtle border (1px solid rgba white 0.2), light reflection, Z-depth","bestFor":"Modern SaaS, financial dashboards, high-end corporate, lifestyle apps, modal overlays, navigation","avoid":"Low-contrast backgrounds, critical accessibility, performance-limited, dark text on dark","complexity":"Medium"},{"name":"Brutalism","type":"General","keywords":"Raw, unpolished, stark, high contrast, plain text, default fonts, visible borders, asymmetric, anti-design","primary":"Primary: Red #FF0000, Blue #0000FF, Yellow #FFFF00, Black #000000, White #FFFFFF","effects":"No smooth transitions (instant), sharp corners (0px), bold typography (700+), visible grid, large blocks","bestFor":"Design portfolios, artistic projects, counter-culture brands, editorial/media sites, tech blogs","avoid":"Corporate environments, conservative industries, critical accessibility, customer-facing professional","complexity":"Low"},{"name":"3D & Hyperrealism","type":"General","keywords":"Depth, realistic textures, 3D models, spatial navigation, tactile, skeuomorphic elements, rich detail, immersive","primary":"Deep Navy #001F3F, Forest Green #228B22, Burgundy #800020, Gold #FFD700, Silver #C0C0C0","effects":"WebGL/Three.js 3D, realistic shadows (layers), physics lighting, parallax (3-5 layers), smooth 3D (300-400ms)","bestFor":"Gaming, product showcase, immersive experiences, high-end e-commerce, architectural viz, VR/AR","avoid":"Low-end mobile, performance-limited, critical accessibility, data tables/forms","complexity":"High"},{"name":"Vibrant & Block-based","type":"General","keywords":"Bold, energetic, playful, block layout, geometric shapes, high color contrast, duotone, modern, energetic","primary":"Neon Green #39FF14, Electric Purple #BF00FF, Vivid Pink #FF1493, Bright Cyan #00FFFF, Sunburst #FFAA00","effects":"Large sections (48px+ gaps), animated patterns, bold hover (color shift), scroll-snap, large type (32px+), 200-300ms","bestFor":"Startups, creative agencies, gaming, social media, youth-focused, entertainment, consumer","avoid":"Financial institutions, healthcare, formal business, government, conservative, elderly","complexity":"Medium"},{"name":"Dark Mode (OLED)","type":"General","keywords":"Dark theme, low light, high contrast, deep black, midnight blue, eye-friendly, OLED, night mode, power efficient","primary":"Deep Black #000000, Dark Grey #121212, Midnight Blue #0A0E27","effects":"Minimal glow (text-shadow: 0 0 10px), dark-to-light transitions, low white emission, high readability, visible focus","bestFor":"Night-mode apps, coding platforms, entertainment, eye-strain prevention, OLED devices, low-light","avoid":"Print-first content, high-brightness outdoor, color-accuracy-critical","complexity":"Low"},{"name":"Accessible & Ethical","type":"General","keywords":"High contrast, large text (16px+), keyboard navigation, screen reader friendly, WCAG compliant, focus state, semantic","primary":"WCAG AA/AAA (4.5:1 min), simple primary, clear secondary, high luminosity (7:1+)","effects":"Clear focus rings (3-4px), ARIA labels, skip links, responsive design, reduced motion, 44x44px touch targets","bestFor":"Government, healthcare, education, inclusive products, large audience, legal compliance, public","avoid":"None - accessibility universal","complexity":"Low"},{"name":"Claymorphism","type":"General","keywords":"Soft 3D, chunky, playful, toy-like, bubbly, thick borders (3-4px), double shadows, rounded (16-24px)","primary":"Pastel: Soft Peach #FDBCB4, Baby Blue #ADD8E6, Mint #98FF98, Lilac #E6E6FA, light BG","effects":"Inner+outer shadows (subtle, no hard lines), soft press (200ms ease-out), fluffy elements, smooth transitions","bestFor":"Educational apps, children's apps, SaaS platforms, creative tools, fun-focused, onboarding, casual games","avoid":"Formal corporate, professional services, data-critical, serious/medical, legal apps, finance","complexity":"Medium"},{"name":"Aurora UI","type":"General","keywords":"Vibrant gradients, smooth blend, Northern Lights effect, mesh gradient, luminous, atmospheric, abstract","primary":"Complementary: Blue-Orange, Purple-Yellow, Electric Blue #0080FF, Magenta #FF1493, Cyan #00FFFF","effects":"Large flowing CSS/SVG gradients, subtle 8-12s animations, depth via color layering, smooth morph","bestFor":"Modern SaaS, creative agencies, branding, music platforms, lifestyle, premium products, hero sections","avoid":"Data-heavy dashboards, critical accessibility, content-heavy where distraction issues","complexity":"Medium"},{"name":"Retro-Futurism","type":"General","keywords":"Vintage sci-fi, 80s aesthetic, neon glow, geometric patterns, CRT scanlines, pixel art, cyberpunk, synthwave","primary":"Neon Blue #0080FF, Hot Pink #FF006E, Cyan #00FFFF, Deep Black #1A1A2E, Purple #5D34D0","effects":"CRT scanlines (::before overlay), neon glow (text-shadow+box-shadow), glitch effects (skew/offset keyframes)","bestFor":"Gaming, entertainment, music platforms, tech brands, artistic projects, nostalgic, cyberpunk","avoid":"Conservative industries, critical accessibility, professional/corporate, elderly, legal/finance","complexity":"Medium"},{"name":"Flat Design","type":"General","keywords":"2D, minimalist, bold colors, no shadows, clean lines, simple shapes, typography-focused, modern, icon-heavy","primary":"Solid bright: Red, Orange, Blue, Green, limited palette (4-6 max)","effects":"No gradients/shadows, simple hover (color/opacity shift), fast loading, clean transitions (150-200ms ease), minimal icons","bestFor":"Web apps, mobile apps, cross-platform, startup MVPs, user-friendly, SaaS, dashboards, corporate","avoid":"Complex 3D, premium/luxury, artistic portfolios, immersive experiences, high-detail","complexity":"Low"},{"name":"Skeuomorphism","type":"General","keywords":"Realistic, texture, depth, 3D appearance, real-world metaphors, shadows, gradients, tactile, detailed, material","primary":"Rich realistic: wood, leather, metal colors, detailed gradients (8-12 stops), metallic effects","effects":"Realistic shadows (layers), depth (perspective), texture details (noise, grain), realistic animations (300-500ms)","bestFor":"Legacy apps, gaming, immersive storytelling, premium products, luxury, realistic simulations, education","avoid":"Modern enterprise, critical accessibility, low-performance, web (use Flat/Modern)","complexity":"High"},{"name":"Liquid Glass","type":"General","keywords":"Flowing glass, morphing, smooth transitions, fluid effects, translucent, animated blur, iridescent, chromatic aberration","primary":"Vibrant iridescent (rainbow spectrum), translucent base with opacity shifts, gradient fluidity","effects":"Morphing elements (SVG/CSS), fluid animations (400-600ms curves), dynamic blur (backdrop-filter), color transitions","bestFor":"Premium SaaS, high-end e-commerce, creative platforms, branding experiences, luxury portfolios","avoid":"Performance-limited, critical accessibility, complex data, budget projects","complexity":"High"},{"name":"Motion-Driven","type":"General","keywords":"Animation-heavy, microinteractions, smooth transitions, scroll effects, parallax, entrance anim, page transitions","primary":"Bold colors emphasize movement, high contrast animated, dynamic gradients, accent action colors","effects":"Scroll anim (Intersection Observer), hover (300-400ms), entrance, parallax (3-5 layers), page transitions","bestFor":"Portfolio sites, storytelling platforms, interactive experiences, entertainment apps, creative, SaaS","avoid":"Data dashboards, critical accessibility, low-power devices, content-heavy, motion-sensitive","complexity":"High"},{"name":"Micro-interactions","type":"General","keywords":"Small animations, gesture-based, tactile feedback, subtle animations, contextual interactions, responsive","primary":"Subtle color shifts (10-20%), feedback: Green #22C55E, Red #EF4444, Amber #F59E0B","effects":"Small hover (50-100ms), loading spinners, success/error state anim, gesture-triggered (swipe/pinch), haptic","bestFor":"Mobile apps, touchscreen UIs, productivity tools, user-friendly, consumer apps, interactive components","avoid":"Desktop-only, critical performance, accessibility-first (alternatives needed)","complexity":"Medium"},{"name":"Inclusive Design","type":"General","keywords":"Accessible, color-blind friendly, high contrast, haptic feedback, voice interaction, screen reader, WCAG AAA, universal","primary":"WCAG AAA (7:1+ contrast), avoid red-green only, symbol-based indicators, high contrast primary","effects":"Haptic feedback (vibration), voice guidance, focus indicators (4px+ ring), motion options, alt content, semantic","bestFor":"Public services, education, healthcare, finance, government, accessible consumer, inclusive","avoid":"None - accessibility universal","complexity":"Low"},{"name":"Zero Interface","type":"General","keywords":"Minimal visible UI, voice-first, gesture-based, AI-driven, invisible controls, predictive, context-aware, ambient","primary":"Neutral backgrounds: Soft white #FAFAFA, light grey #F0F0F0, warm off-white #F5F1E8","effects":"Voice recognition UI, gesture detection, AI predictions (smooth reveal), progressive disclosure, smart suggestions","bestFor":"Voice assistants, AI platforms, future-forward UX, smart home, contextual computing, ambient experiences","avoid":"Complex workflows, data-entry heavy, traditional systems, legacy support, explicit control","complexity":"Low"},{"name":"Soft UI Evolution","type":"General","keywords":"Evolved soft UI, better contrast, modern aesthetics, subtle depth, accessibility-focused, improved shadows, hybrid","primary":"Improved contrast pastels: Soft Blue #87CEEB, Soft Pink #FFB6C1, Soft Green #90EE90, better hierarchy","effects":"Improved shadows (softer than flat, clearer than neumorphism), modern (200-300ms), focus visible, WCAG AA/AAA","bestFor":"Modern enterprise apps, SaaS platforms, health/wellness, modern business tools, professional, hybrid","avoid":"Extreme minimalism, critical performance, systems without modern OS","complexity":"Medium"},{"name":"Hero-Centric Design","type":"Landing Page","keywords":"Large hero section, compelling headline, high-contrast CTA, product showcase, value proposition, hero image/video, dramatic visual","primary":"Brand primary color, white/light backgrounds for contrast, accent color for CTA","effects":"Smooth scroll reveal, fade-in animations on hero, subtle background parallax, CTA glow/pulse effect","bestFor":"SaaS landing pages, product launches, service landing pages, B2B platforms, tech companies","avoid":"Complex navigation, multi-page experiences, data-heavy applications","complexity":"Medium"},{"name":"Conversion-Optimized","type":"Landing Page","keywords":"Form-focused, minimalist design, single CTA focus, high contrast, urgency elements, trust signals, social proof, clear value","primary":"Primary brand color, high-contrast white/light backgrounds, warning/urgency colors for time-limited offers","effects":"Hover states on CTA (color shift, slight scale), form field focus animations, loading spinner, success feedback","bestFor":"E-commerce product pages, free trial signups, lead generation, SaaS pricing pages, limited-time offers","avoid":"Complex feature explanations, multi-product showcases, technical documentation","complexity":"Medium"},{"name":"Feature-Rich Showcase","type":"Landing Page","keywords":"Multiple feature sections, grid layout, benefit cards, visual feature demonstrations, interactive elements, problem-solution pairs","primary":"Primary brand, bright secondary colors for feature cards, contrasting accent for CTAs","effects":"Card hover effects (lift/scale), icon animations on scroll, feature toggle animations, smooth section transitions","bestFor":"Enterprise SaaS, software tools landing pages, platform services, complex product explanations, B2B products","avoid":"Simple product pages, early-stage startups with few features, entertainment landing pages","complexity":"Medium"},{"name":"Minimal & Direct","type":"Landing Page","keywords":"Minimal text, white space heavy, single column layout, direct messaging, clean typography, visual-centric, fast-loading","primary":"Monochromatic primary, white background, single accent color for CTA, black/dark grey text","effects":"Very subtle hover effects, minimal animations, fast page load (no heavy animations), smooth scroll","bestFor":"Simple service landing pages, indie products, consulting services, micro SaaS, freelancer portfolios","avoid":"Feature-heavy products, complex explanations, multi-product showcases","complexity":"Medium"},{"name":"Social Proof-Focused","type":"Landing Page","keywords":"Testimonials prominent, client logos displayed, case studies sections, reviews/ratings, user avatars, success metrics, credibility markers","primary":"Primary brand, trust colors (blue), success/growth colors (green), neutral backgrounds","effects":"Testimonial carousel animations, logo grid fade-in, stat counter animations (number count-up), review star ratings","bestFor":"B2B SaaS, professional services, premium products, e-commerce conversion pages, established brands","avoid":"Startup MVPs, products without users, niche/experimental products","complexity":"Medium"},{"name":"Interactive Product Demo","type":"Landing Page","keywords":"Embedded product mockup/video, interactive elements, product walkthrough, step-by-step guides, hover-to-reveal features, embedded demos","primary":"Primary brand, interface colors matching product, demo highlight colors for interactive elements","effects":"Product animation playback, step progression animations, hover reveal effects, smooth zoom on interaction","bestFor":"SaaS platforms, tool/software products, productivity apps landing pages, developer tools, productivity software","avoid":"Simple services, consulting, non-digital products, complexity-averse audiences","complexity":"Medium"},{"name":"Trust & Authority","type":"Landing Page","keywords":"Certificates/badges displayed, expert credentials, case studies with metrics, before/after comparisons, industry recognition, security badges","primary":"Professional colors (blue/grey), trust colors, certification badge colors (gold/silver accents)","effects":"Badge hover effects, metric pulse animations, certificate carousel, smooth stat reveal","bestFor":"Healthcare/medical landing pages, financial services, enterprise software, premium/luxury products, legal services","avoid":"Casual products, entertainment, viral/social-first products","complexity":"Medium"},{"name":"Storytelling-Driven","type":"Landing Page","keywords":"Narrative flow, visual story progression, section transitions, consistent character/brand voice, emotional messaging, journey visualization","primary":"Brand primary, warm/emotional colors, varied accent colors per story section, high visual variety","effects":"Section-to-section animations, scroll-triggered reveals, character/icon animations, morphing transitions, parallax narrative","bestFor":"Brand/startup stories, mission-driven products, premium/lifestyle brands, documentary-style products, educational","avoid":"Technical/complex products (unless narrative-driven), traditional enterprise software","complexity":"Medium"},{"name":"Data-Dense Dashboard","type":"BI/Analytics","keywords":"Multiple charts/widgets, data tables, KPI cards, minimal padding, grid layout, space-efficient, maximum data visibility","primary":"Neutral primary (light grey/white #F5F5F5), data colors (blue/green/red), dark text #333333","effects":"Hover tooltips, chart zoom on click, row highlighting on hover, smooth filter animations, data loading spinners","bestFor":"Business intelligence dashboards, financial analytics, enterprise reporting, operational dashboards, data warehousing","avoid":"Marketing dashboards, consumer-facing analytics, simple reporting","complexity":"Medium"},{"name":"Heat Map & Heatmap Style","type":"BI/Analytics","keywords":"Color-coded grid/matrix, data intensity visualization, geographical heat maps, correlation matrices, cell-based representation, gradient coloring","primary":"Gradient scale: Cool (blue #0080FF) to hot (red #FF0000), neutral middle (white/yellow)","effects":"Color gradient transitions on data change, cell highlighting on hover, tooltip reveal on click, smooth color animation","bestFor":"Geographical analysis, performance matrices, correlation analysis, user behavior heatmaps, temperature/intensity data","avoid":"Linear data representation, categorical comparisons (use bar charts), small datasets","complexity":"Medium"},{"name":"Executive Dashboard","type":"BI/Analytics","keywords":"High-level KPIs, large key metrics, minimal detail, summary view, trend indicators, at-a-glance insights, executive summary","primary":"Brand colors, professional palette (blue/grey/white), accent for KPIs, red for alerts/concerns","effects":"KPI value animations (count-up), trend arrow direction animations, metric card hover lift, alert pulse effect","bestFor":"C-suite dashboards, business summary reports, decision-maker dashboards, strategic planning views","avoid":"Detailed analyst dashboards, technical deep-dives, operational monitoring","complexity":"Medium"},{"name":"Real-Time Monitoring","type":"BI/Analytics","keywords":"Live data updates, status indicators, alert notifications, streaming data visualization, active monitoring, streaming charts","primary":"Alert colors: critical (red #FF0000), warning (orange #FFA500), normal (green #22C55E), updating (blue animation)","effects":"Real-time chart animations, alert pulse/glow, status indicator blink animation, smooth data stream updates, loading effect","bestFor":"System monitoring dashboards, DevOps dashboards, real-time analytics, stock market dashboards, live event tracking","avoid":"Historical analysis, long-term trend reports, archived data dashboards","complexity":"Medium"},{"name":"Drill-Down Analytics","type":"BI/Analytics","keywords":"Hierarchical data exploration, expandable sections, interactive drill-down paths, summary-to-detail flow, context preservation","primary":"Primary brand, breadcrumb colors, drill-level indicator colors, hierarchy depth colors","effects":"Drill-down expand animations, breadcrumb click transitions, smooth detail reveal, level change smooth, data reload animation","bestFor":"Sales analytics, product analytics, funnel analysis, multi-dimensional data exploration, business intelligence","avoid":"Simple linear data, single-metric dashboards, streaming real-time dashboards","complexity":"Medium"},{"name":"Comparative Analysis Dashboard","type":"BI/Analytics","keywords":"Side-by-side comparisons, period-over-period metrics, A/B test results, regional comparisons, performance benchmarks","primary":"Comparison colors: primary (blue), comparison (orange/purple), delta indicator (green/red)","effects":"Comparison bar animations (grow to value), delta indicator animations (direction arrows), highlight on compare","bestFor":"Period-over-period reporting, A/B test dashboards, market comparison, competitive analysis, regional performance","avoid":"Single metric dashboards, future projections (use forecasting), real-time only (no historical)","complexity":"Medium"},{"name":"Predictive Analytics","type":"BI/Analytics","keywords":"Forecast lines, confidence intervals, trend projections, scenario modeling, AI-driven insights, anomaly detection visualization","primary":"Forecast line color (distinct from actual), confidence interval shading, anomaly highlight (red alert), trend colors","effects":"Forecast line animation on draw, confidence band fade-in, anomaly pulse alert, smoothing function animations","bestFor":"Forecasting dashboards, anomaly detection systems, trend prediction dashboards, AI-powered analytics, budget planning","avoid":"Historical-only dashboards, simple reporting, real-time operational dashboards","complexity":"Medium"},{"name":"User Behavior Analytics","type":"BI/Analytics","keywords":"Funnel visualization, user flow diagrams, conversion tracking, engagement metrics, user journey mapping, cohort analysis","primary":"Funnel stage colors: high engagement (green), drop-off (red), conversion (blue), user flow arrows (grey)","effects":"Funnel animation (fill-down), flow diagram animations (connection draw), conversion pulse, engagement bar fill","bestFor":"Conversion funnel analysis, user journey tracking, engagement analytics, cohort analysis, retention tracking","avoid":"Real-time operational metrics, technical system monitoring, financial transactions","complexity":"Medium"},{"name":"Financial Dashboard","type":"BI/Analytics","keywords":"Revenue metrics, profit/loss visualization, budget tracking, financial ratios, portfolio performance, cash flow, audit trail","primary":"Financial colors: profit (green #22C55E), loss (red #EF4444), neutral (grey), trust (dark blue #003366)","effects":"Number animations (count-up), trend direction indicators, percentage change animations, profit/loss color transitions","bestFor":"Financial reporting, accounting dashboards, portfolio tracking, budget monitoring, banking analytics","avoid":"Simple business dashboards, entertainment/social metrics, non-financial data","complexity":"Medium"},{"name":"Sales Intelligence Dashboard","type":"BI/Analytics","keywords":"Deal pipeline, sales metrics, territory performance, sales rep leaderboard, win-loss analysis, quota tracking, forecast accuracy","primary":"Sales colors: won (green), lost (red), in-progress (blue), blocked (orange), quota met (gold), quota missed (grey)","effects":"Deal movement animations, metric updates, leaderboard ranking changes, gauge needle movements, status change highlights","bestFor":"CRM dashboards, sales management, opportunity tracking, performance management, quota planning","avoid":"Marketing analytics, customer support metrics, HR dashboards","complexity":"Medium"},{"name":"Neubrutalism","type":"General","keywords":"Bold borders, black outlines, primary colors, thick shadows, no gradients, flat colors, 45° shadows, playful, Gen Z","primary":"#FFEB3B (Yellow), #FF5252 (Red), #2196F3 (Blue), #000000 (Black borders)","effects":"box-shadow: 4px 4px 0 #000, border: 3px solid #000, no gradients, sharp corners (0px), bold typography","bestFor":"Gen Z brands, startups, creative agencies, Figma-style apps, Notion-style interfaces, tech blogs","avoid":"Luxury brands, finance, healthcare, conservative industries (too playful)","complexity":"Low"},{"name":"Bento Box Grid","type":"General","keywords":"Modular cards, asymmetric grid, varied sizes, Apple-style, dashboard tiles, negative space, clean hierarchy, cards","primary":"Neutral base + brand accent, #FFFFFF, #F5F5F5, brand primary","effects":"grid-template with varied spans, rounded-xl (16px), subtle shadows, hover scale (1.02), smooth transitions","bestFor":"Dashboards, product pages, portfolios, Apple-style marketing, feature showcases, SaaS","avoid":"Dense data tables, text-heavy content, real-time monitoring","complexity":"Low"},{"name":"Y2K Aesthetic","type":"General","keywords":"Neon pink, chrome, metallic, bubblegum, iridescent, glossy, retro-futurism, 2000s, futuristic nostalgia","primary":"#FF69B4 (Hot Pink), #00FFFF (Cyan), #C0C0C0 (Silver), #9400D3 (Purple)","effects":"linear-gradient metallic, glossy buttons, 3D chrome effects, glow animations, bubble shapes","bestFor":"Fashion brands, music platforms, Gen Z brands, nostalgia marketing, entertainment, youth-focused","avoid":"B2B enterprise, healthcare, finance, conservative industries, elderly users","complexity":"Medium"},{"name":"Cyberpunk UI","type":"General","keywords":"Neon, dark mode, terminal, HUD, sci-fi, glitch, dystopian, futuristic, matrix, tech noir","primary":"#00FF00 (Matrix Green), #FF00FF (Magenta), #00FFFF (Cyan), #0D0D0D (Dark)","effects":"Neon glow (text-shadow), glitch animations (skew/offset), scanlines (::before overlay), terminal fonts","bestFor":"Gaming platforms, tech products, crypto apps, sci-fi applications, developer tools, entertainment","avoid":"Corporate enterprise, healthcare, family apps, conservative brands, elderly users","complexity":"Medium"},{"name":"Organic Biophilic","type":"General","keywords":"Nature, organic shapes, green, sustainable, rounded, flowing, wellness, earthy, natural textures","primary":"#228B22 (Forest Green), #8B4513 (Earth Brown), #87CEEB (Sky Blue), #F5F5DC (Beige)","effects":"Rounded corners (16-24px), organic curves (border-radius variations), natural shadows, flowing SVG shapes","bestFor":"Wellness apps, sustainability brands, eco products, health apps, meditation, organic food brands","avoid":"Tech-focused products, gaming, industrial, urban brands","complexity":"Low"},{"name":"AI-Native UI","type":"General","keywords":"Chatbot, conversational, voice, assistant, agentic, ambient, minimal chrome, streaming text, AI interactions","primary":"Neutral + single accent, #6366F1 (AI Purple), #10B981 (Success), #F5F5F5 (Background)","effects":"Typing indicators (3-dot pulse), streaming text animations, pulse animations, context cards, smooth reveals","bestFor":"AI products, chatbots, voice assistants, copilots, AI-powered tools, conversational interfaces","avoid":"Traditional forms, data-heavy dashboards, print-first content","complexity":"Low"},{"name":"Memphis Design","type":"General","keywords":"80s, geometric, playful, postmodern, shapes, patterns, squiggles, triangles, neon, abstract, bold","primary":"#FF71CE (Hot Pink), #FFCE5C (Yellow), #86CCCA (Teal), #6A7BB4 (Blue Purple)","effects":"transform: rotate(), clip-path: polygon(), mix-blend-mode, repeating patterns, bold shapes","bestFor":"Creative agencies, music sites, youth brands, event promotion, artistic portfolios, entertainment","avoid":"Corporate finance, healthcare, legal, elderly users, conservative brands","complexity":"Medium"},{"name":"Vaporwave","type":"General","keywords":"Synthwave, retro-futuristic, 80s-90s, neon, glitch, nostalgic, sunset gradient, dreamy, aesthetic","primary":"#FF71CE (Pink), #01CDFE (Cyan), #05FFA1 (Mint), #B967FF (Purple)","effects":"text-shadow glow, linear-gradient, filter: hue-rotate(), glitch animations, retro scan lines","bestFor":"Music platforms, gaming, creative portfolios, tech startups, entertainment, artistic projects","avoid":"Business apps, e-commerce, education, healthcare, enterprise software","complexity":"Medium"},{"name":"Dimensional Layering","type":"General","keywords":"Depth, overlapping, z-index, layers, 3D, shadows, elevation, floating, cards, spatial hierarchy","primary":"Neutral base (#FFFFFF, #F5F5F5, #E0E0E0) + brand accent for elevated elements","effects":"z-index stacking, box-shadow elevation (4 levels), transform: translateZ(), backdrop-filter, parallax","bestFor":"Dashboards, card layouts, modals, navigation, product showcases, SaaS interfaces","avoid":"Print-style layouts, simple blogs, low-end devices, flat design requirements","complexity":"Medium"},{"name":"Exaggerated Minimalism","type":"General","keywords":"Bold minimalism, oversized typography, high contrast, negative space, loud minimal, statement design","primary":"#000000 (Black), #FFFFFF (White), single vibrant accent only","effects":"font-size: clamp(3rem 10vw 12rem), font-weight: 900, letter-spacing: -0.05em, massive whitespace","bestFor":"Fashion, architecture, portfolios, agency landing pages, luxury brands, editorial","avoid":"E-commerce catalogs, dashboards, forms, data-heavy, elderly users, complex apps","complexity":"Low"},{"name":"Kinetic Typography","type":"General","keywords":"Motion text, animated type, moving letters, dynamic, typing effect, morphing, scroll-triggered text","primary":"Flexible - high contrast recommended, bold colors for emphasis, animation-friendly palette","effects":"@keyframes text animation, typing effect, background-clip: text, GSAP ScrollTrigger, split text","bestFor":"Hero sections, marketing sites, video platforms, storytelling, creative portfolios, landing pages","avoid":"Long-form content, accessibility-critical, data interfaces, forms, elderly users","complexity":"High"},{"name":"Parallax Storytelling","type":"General","keywords":"Scroll-driven, narrative, layered scrolling, immersive, progressive disclosure, cinematic, scroll-triggered","primary":"Story-dependent, often gradients and natural colors, section-specific palettes","effects":"transform: translateY(scroll), position: fixed/sticky, perspective: 1px, scroll-triggered animations","bestFor":"Brand storytelling, product launches, case studies, portfolios, annual reports, marketing campaigns","avoid":"E-commerce, dashboards, mobile-first, SEO-critical, accessibility-required","complexity":"High"},{"name":"Swiss Modernism 2.0","type":"General","keywords":"Grid system, Helvetica, modular, asymmetric, international style, rational, clean, mathematical spacing","primary":"#000000, #FFFFFF, #F5F5F5, single vibrant accent only","effects":"display: grid, grid-template-columns: repeat(12 1fr), gap: 1rem, mathematical ratios, clear hierarchy","bestFor":"Corporate sites, architecture, editorial, SaaS, museums, professional services, documentation","avoid":"Playful brands, children's sites, entertainment, gaming, emotional storytelling","complexity":"Low"},{"name":"HUD / Sci-Fi FUI","type":"General","keywords":"Futuristic, technical, wireframe, neon, data, transparency, iron man, sci-fi, interface","primary":"Neon Cyan #00FFFF, Holographic Blue #0080FF, Alert Red #FF0000","effects":"Glow effects, scanning animations, ticker text, blinking markers, fine line drawing","bestFor":"Sci-fi games, space tech, cybersecurity, movie props, immersive dashboards","avoid":"Standard corporate, reading heavy content, accessible public services","complexity":"High"},{"name":"Pixel Art","type":"General","keywords":"Retro, 8-bit, 16-bit, gaming, blocky, nostalgic, pixelated, arcade","primary":"Primary colors (NES Palette), brights, limited palette","effects":"Frame-by-frame sprite animation, blinking cursor, instant transitions, marquee text","bestFor":"Indie games, retro tools, creative portfolios, nostalgia marketing, Web3/NFT","avoid":"Professional corporate, modern SaaS, high-res photography sites","complexity":"Medium"},{"name":"Bento Grids","type":"General","keywords":"Apple-style, modular, cards, organized, clean, hierarchy, grid, rounded, soft","primary":"Off-white #F5F5F7, Clean White #FFFFFF, Text #1D1D1F","effects":"Hover scale (1.02), soft shadow expansion, smooth layout shifts, content reveal","bestFor":"Product features, dashboards, personal sites, marketing summaries, galleries","avoid":"Long-form reading, data tables, complex forms","complexity":"Low"},{"name":"Spatial UI (VisionOS)","type":"General","keywords":"Glass, depth, immersion, spatial, translucent, gaze, gesture, apple, vision-pro","primary":"Frosted Glass #FFFFFF (15-30% opacity), System White","effects":"Parallax depth, dynamic lighting response, gaze-hover effects, smooth scale on focus","bestFor":"Spatial computing apps, VR/AR interfaces, immersive media, futuristic dashboards","avoid":"Text-heavy documents, high-contrast requirements, non-3D capable devices","complexity":"High"},{"name":"E-Ink / Paper","type":"General","keywords":"Paper-like, matte, high contrast, texture, reading, calm, slow tech, monochrome","primary":"Off-White #FDFBF7, Paper White #F5F5F5, Ink Black #1A1A1A","effects":"No motion blur, distinct page turns, grain/noise texture, sharp transitions (no fade)","bestFor":"Reading apps, digital newspapers, minimal journals, distraction-free writing, slow-living brands","avoid":"Gaming, video platforms, high-energy marketing, dark mode dependent apps","complexity":"Low"},{"name":"Gen Z Chaos / Maximalism","type":"General","keywords":"Chaos, clutter, stickers, raw, collage, mixed media, loud, internet culture, ironic","primary":"Clashing Brights: #FF00FF, #00FF00, #FFFF00, #0000FF","effects":"Marquee scrolls, jitter, sticker layering, GIF overload, random placement, drag-and-drop","bestFor":"Gen Z lifestyle brands, music artists, creative portfolios, viral marketing, fashion","avoid":"Corporate, government, healthcare, banking, serious tools","complexity":"High"},{"name":"Biomimetic / Organic 2.0","type":"General","keywords":"Nature-inspired, cellular, fluid, breathing, generative, algorithms, life-like","primary":"Cellular Pink #FF9999, Chlorophyll Green #00FF41, Bioluminescent Blue","effects":"Breathing animations, fluid morphing, generative growth, physics-based movement","bestFor":"Sustainability tech, biotech, advanced health, meditation, generative art platforms","avoid":"Standard SaaS, data grids, strict corporate, accounting","complexity":"High"},{"name":"Anti-Polish / Raw Aesthetic","type":"General","keywords":"Hand-drawn, collage, scanned textures, unfinished, imperfect, authentic, human, sketch, raw marks, creative process","primary":"Paper White #FAFAF8, Pencil Grey #4A4A4A, Marker Black #1A1A1A, Kraft Brown #C4A77D","effects":"No smooth transitions, hand-drawn animations, paper texture overlays, jitter effects, sketch reveal","bestFor":"Creative portfolios, artist sites, indie brands, handmade products, authentic storytelling, editorial","avoid":"Corporate enterprise, fintech, healthcare, government, polished SaaS","complexity":"Low"},{"name":"Tactile Digital / Deformable UI","type":"General","keywords":"Jelly buttons, chrome, clay, squishy, deformable, bouncy, physical, tactile feedback, press response","primary":"Gradient metallics, Chrome Silver #C0C0C0, Jelly Pink #FF9ECD, Soft Blue #87CEEB","effects":"Press deformation (scale + squish), bounce-back (cubic-bezier), material response, haptic-like feedback, spring physics","bestFor":"Modern mobile apps, playful brands, entertainment, gaming UI, consumer products, interactive demos","avoid":"Enterprise software, data dashboards, accessibility-critical, professional tools","complexity":"Medium"},{"name":"Nature Distilled","type":"General","keywords":"Muted earthy, skin tones, wood, soil, sand, terracotta, warmth, organic materials, handmade warmth","primary":"Terracotta #C67B5C, Sand Beige #D4C4A8, Warm Clay #B5651D, Soft Cream #F5F0E1","effects":"Subtle parallax, natural easing (ease-out), texture overlays, grain effects, soft shadows","bestFor":"Wellness brands, sustainable products, artisan goods, organic food, spa/beauty, home decor","avoid":"Tech startups, gaming, nightlife, corporate finance, high-energy brands","complexity":"Low"},{"name":"Interactive Cursor Design","type":"General","keywords":"Custom cursor, cursor as tool, hover effects, cursor feedback, pointer transformation, cursor trail, magnetic cursor","primary":"Brand-dependent, cursor accent color, high contrast for visibility","effects":"Cursor scale on hover, magnetic pull to elements, cursor morphing, trail effects, blend mode cursors, click feedback","bestFor":"Creative portfolios, interactive experiences, agency sites, product showcases, gaming, entertainment","avoid":"Mobile-first (no cursor), accessibility-critical, data-heavy dashboards, forms","complexity":"Medium"},{"name":"Voice-First Multimodal","type":"General","keywords":"Voice UI, multimodal, audio feedback, conversational, hands-free, ambient, contextual, speech recognition","primary":"Calm neutrals: Soft White #FAFAFA, Muted Blue #6B8FAF, Gentle Purple #9B8FBB","effects":"Voice waveform visualization, listening pulse, processing spinner, speak animation, smooth transitions","bestFor":"Voice assistants, accessibility apps, hands-free tools, smart home, automotive UI, cooking apps","avoid":"Visual-heavy content, data entry, complex forms, noisy environments","complexity":"Medium"},{"name":"3D Product Preview","type":"General","keywords":"360 product view, rotatable, zoomable, touch-to-spin, AR preview, product configurator, interactive 3D model","primary":"Product-dependent, neutral backgrounds: Soft Grey #E8E8E8, Pure White #FFFFFF","effects":"Drag-to-rotate, pinch-to-zoom, spin animation, AR placement, material switching, smooth orbit controls","bestFor":"E-commerce, furniture, fashion, automotive, electronics, jewelry, product configurators","avoid":"Content-heavy sites, blogs, dashboards, low-bandwidth, accessibility-critical","complexity":"High"},{"name":"Gradient Mesh / Aurora Evolved","type":"General","keywords":"Complex gradients, mesh gradients, multi-color blend, aurora effect, flowing colors, iridescent, holographic, prismatic","primary":"Multi-stop gradients: Cyan #00FFFF, Magenta #FF00FF, Yellow #FFFF00, Blue #0066FF, Green #00FF66","effects":"CSS mesh-gradient (experimental), SVG gradients, canvas gradients, smooth color morphing, flowing animation","bestFor":"Hero sections, backgrounds, creative brands, music platforms, fashion, lifestyle, premium products","avoid":"Data interfaces, text-heavy content, accessibility-critical, conservative brands","complexity":"Medium"},{"name":"Editorial Grid / Magazine","type":"General","keywords":"Magazine layout, asymmetric grid, editorial typography, pull quotes, drop caps, column layout, print-inspired","primary":"High contrast: Black #000000, White #FFFFFF, accent brand color","effects":"Smooth scroll, reveal on scroll, parallax images, text animations, page-flip transitions","bestFor":"News sites, blogs, magazines, editorial content, long-form articles, journalism, publishing","avoid":"Dashboards, apps, e-commerce catalogs, real-time data, short-form content","complexity":"Low"},{"name":"Chromatic Aberration / RGB Split","type":"General","keywords":"RGB split, color fringing, glitch, retro tech, VHS, analog error, distortion, lens effect","primary":"Offset RGB: Red #FF0000, Green #00FF00, Blue #0000FF, Black #000000","effects":"RGB offset animation, glitch timing, scan line movement, noise flicker, distortion on hover","bestFor":"Music platforms, gaming, tech brands, creative portfolios, nightlife, entertainment, video platforms","avoid":"Corporate, healthcare, finance, accessibility-critical, elderly users","complexity":"Medium"},{"name":"Vintage Analog / Retro Film","type":"General","keywords":"Film grain, VHS, cassette tape, polaroid, analog warmth, faded colors, light leaks, vintage photography","primary":"Faded Cream #F5E6C8, Warm Sepia #D4A574, Muted Teal #4A7B7C, Soft Pink #E8B4B8","effects":"Film grain overlay, VHS tracking effect, polaroid shake, fade-in transitions, light leak animations","bestFor":"Photography portfolios, music/vinyl brands, vintage fashion, nostalgia marketing, film industry, cafes","avoid":"Modern tech, SaaS, healthcare, children's apps, corporate enterprise","complexity":"Medium"},{"name":"Bauhaus (包豪斯)","type":"Mobile","keywords":"bauhaus, geometric, constructivist, primary colors, hard shadow, bold, tactile, functional, poster, mechanical, architectural","primary":"Primary Red #D02020, Primary Blue #1040C0, Primary Yellow #F0C020","effects":"Hard offset shadows (4px 4px 0px black), mechanical press active:translate, no smooth hover — instant 0ms transitions, dot grid pattern on sections, slide-over transitions","bestFor":"Mobile-first apps needing high personality, onboarding flows, branding-forward product screens, artisan/design brands, editorial mobile experiences","avoid":"Enterprise dashboards, accessibility-critical contexts (requires extra a11y work), data-heavy screens, conservative industries","complexity":"Medium"},{"name":"Minimalist Monochrome","type":"Mobile","keywords":"monochrome, black white, editorial, austere, typographic, sharp, zero radius, high contrast, brutalist, pocket editorial, serif, mechanical","primary":"Pure Black #000000, Pure White #FFFFFF","effects":"Instant inversion active state (tap → bg-black text-white, zero transition-none), no shadows (strictly 2D), full-bleed horizontal rules (4px black section dividers), subtle paper noise texture (opacity: 0.03), slide-in page transitions with hard edge","bestFor":"Luxury fashion e-commerce mobile, editorial publications, high-end portfolio apps, experimental/avant-garde brands, digital exhibitions","avoid":"Entertainment, colorful brands, friendly consumer apps, anything requiring visual warmth or gradient","complexity":"Medium"},{"name":"Modern Dark (Cinema Mobile)","type":"Mobile","keywords":"dark mode, cinematic, ambient light, glassmorphism, deep black, indigo, glow, blur, atmospheric, reanimated, haptic, premium, layered, frosted glass, linear gradient","primary":"Deep #020203, Base #050506, Elevated #0a0a0c, Accent #5E6AD2","effects":"Expo.out Bezier(0.16,1,0.3,1) easing; spring modals (damping:20 stiffness:90); haptic-linked press (Impact Light/Medium); animated ambient light blobs (Reanimated translateX/Y slow oscillation); BlurView glassmorphism headers/nav (intensity 20); scale press 0.97 → 1.0; avoid pure #000000 (OLED smear)","bestFor":"Developer tools, pro productivity apps, fintech/trading dashboards, media/streaming platforms, AI tool interfaces, high-end gaming companion apps","avoid":"Consumer apps needing warmth, children's apps, health/medical contexts where dark feels harsh, high-accessibility contexts needing maximum contrast","complexity":"High"},{"name":"SaaS Mobile (High-Tech Boutique)","type":"Mobile","keywords":"saas, electric blue, gradient, fintech, spring animation, dual font, glassmorphism, boutique, premium, calistoga, inter, mono, tactile, haptic, bento","primary":"Electric Blue #0052FF, Gradient End #4D7CFF","effects":"Spring animations (mass:1 damping:15 stiffness:120); gradient buttons (0052FF→4D7CFF); scale press 0.96→1.0 with haptics; floating FAB with gentle bobbing (Reanimated); glassmorphism BlurView navigation bars; staggered fade-in entrance (Y:20→0 + opacity:0→1); pulsing status dot on section badges; layout transitions (LayoutAnimation or Reanimated entering)","bestFor":"B2B SaaS mobile dashboards, fintech apps, developer tool mobile companions, marketing analytics apps, HR/operations apps, modern business productivity","avoid":"Pure consumer entertainment, children's apps, highly decorative lifestyle apps, contexts where Electric Blue feels too corporate","complexity":"Medium"},{"name":"Terminal CLI (Mobile)","type":"Mobile","keywords":"terminal, cli, matrix green, monospace, hacker, ascii, command line, developer, web3, crypto, sci-fi, OLED, retro-future, field operative","primary":"Matrix Green #33FF00, OLED Black #050505","effects":"Blinking cursor (500ms opacity loop), typewriter text reveal hook, scanline overlay (repeating lines 0.05 opacity), ASCII art headers, instant color inversion on press (bg-green text-black), haptic on every keystroke, boot sequence splash on launch","bestFor":"Developer tools, Web3/blockchain apps, geek-culture apps, ARG games, sci-fi/noir gaming companions, hacker/security tools, creative studio portfolios","avoid":"Consumer products, health apps, anything requiring approachability or warmth, children's apps, standard enterprise contexts","complexity":"Medium"},{"name":"Kinetic Brutalism (Mobile)","type":"Mobile","keywords":"kinetic, brutalism, motion, marquee, acid yellow, uppercase, oversized, aggressive typography, street, zine, high contrast, scroll-driven, haptic, reanimated","primary":"Acid Yellow #DFE104, Rich Black #09090B","effects":"Infinite marquee (Reanimated, Linear easing, 5s loop, hard clip), hero parallax (scale 1.0→1.3 + fade), sticky section header push, card flood inversion on press (bg→#DFE104, text→#000000), haptic Medium on every press, scroll-triggered interpolate transforms, 0px radius, 2px borders, 100ms color transitions","bestFor":"Immersive storytelling apps, brand flagship mobile, music/culture platforms, sports apps, underground zines, limited-edition product drops, performance dashboards","avoid":"Calm informational apps, healthcare, finance contexts needing trust, children's, any context where aggressive typography feels inappropriate","complexity":"High"},{"name":"Flat Design Mobile (Touch-First)","type":"Mobile","keywords":"flat, 2D, no shadow, color blocking, geometric, bold, poster, icon, touch-first, minimal, clean, tailored, cross-platform","primary":"Blue #3B82F6, Emerald #10B981","effects":"Immediate press feedback (scale 0.97, no delay), color section blocking (full-width contrasting View), zero elevation/shadow, solid icon containers (colored squares/circles), geometric low-opacity shape overlays, bottom tabs solid fill (no floating)","bestFor":"Cross-platform apps (iOS+Android parity), information-dense dashboards, system UI, brand illustration, onboarding flows, marketing pages, icon design","avoid":"Ultra-premium contexts needing depth/shadow, dark-mode-first products, contexts where flat design reads as unfinished or sterile","complexity":"Low"},{"name":"Material You (MD3 Mobile)","type":"Mobile","keywords":"material design 3, md3, tonal surfaces, pills, soft curves, android, md3 easing, state layers, haptic, fab, google","primary":"Primary Violet #6750A4, Secondary Container #E8DEF8, Tertiary #7D5260","effects":"Tonal elevation (overlay colors instead of strong shadows), pill-shaped buttons and chips (borderRadius 999), emphasized easing Easing.bezier(0.2,0,0,1), state layers (pressed overlays 10–15% opacity), Reanimated-filled label float for inputs, HapticFeedback on FAB/toggles","bestFor":"Android ecosystem apps, cross-platform productivity tools, MD3-based admin panels, data-heavy back-office UI with Material UI","avoid":"Ultra-minimal brutalist brands, terminal/hacker aesthetics, monochrome editorial apps","complexity":"Medium"},{"name":"Neo Brutalism (Mobile)","type":"Mobile","keywords":"neo brutalism, pop art, stickers, thick borders, cream background, hot red, vivid yellow, soft violet, hard offset shadow, mechanical press, collage","primary":"Cream #FFFDF5, Hot Red #FF6B6B, Vivid Yellow #FFD93D","effects":"Thick 4px black borders on all major elements, hard offset shadows (4–8px, no blur), mechanical press: translateX/Y equal to shadow offset, slightly rotated cards/badges (-2deg/2deg), high-saturation color blocking, spring/linear animations only","bestFor":"Creative tools, collab platforms, Gen Z marketing & e-commerce, portfolio sites, sticker-book style content apps","avoid":"Serious enterprise apps, conservative industries, sober fintech, accessibility-first contexts (must tune contrast)","complexity":"High"},{"name":"Bold Typography (Mobile Poster)","type":"Mobile","keywords":"bold typography, editorial, poster, broadsheet, vermillion, negative space, edge-to-edge type, underline CTA, near-black, warm white","primary":"Near Black #0A0A0A, Warm White #FAFAFA","effects":"Hero headlines 48–72px (5:1 vs body size), tight tracking (-1.5px), edge-to-edge type, massive vertical spacing (60px+), underline CTAs (2–3px accent line), instant 200ms transitions (no bounce), strictly 0px radius containers, color shifts for active state instead of elevation","bestFor":"Creative brand heroes, reading-focused apps, event/exhibition pages, editorial mobile experiences, landing hero sections","avoid":"Utility dashboards, kids apps, playful consumer products, contexts needing many icons or heavy imagery","complexity":"Medium"},{"name":"Academia (Scholarly Mobile)","type":"Mobile","keywords":"academia, library, mahogany, parchment, brass, crimson, serif, drop cap, arch-top, vignette, leather, scholarly, tactile","primary":"Mahogany #1C1714, Oak #251E19","effects":"Deep mahogany backgrounds, oak surface cards, brass accented CTAs, arch-top hero/imagery, heavy vignette overlays, sepia-tinted images, drop caps with brass Cinzel, Roman numeral volume headings, slow timing-based animations (Easing.out poly(4)), zero neon or modern tech cues","bestFor":"Knowledge management apps, deep reading tools, ritual-heavy personal brands, lore-heavy RPG/roleplay apps, culture-specific community platforms","avoid":"Hyper-modern tech dashboards, neon/glassmorphism, playful Gen Z branding","complexity":"High"},{"name":"Cyberpunk Mobile HUD","type":"Mobile","keywords":"cyberpunk, neon, glitch, chamfered, orbitron, jetbrains, scanlines, crt, hud, matrix, military, decker","primary":"Void #0A0A0F, Card #12121A","effects":"Deep void background with neon radiance, chamfered 45° corners via SVG/Skia, scanline overlay, CRT flicker opacity oscillation, glitch animations (translateX ±2), neon pulses around buttons, HUD corner brackets, terminal prompt text inputs, heavy use of blurView holographic panels","bestFor":"Gaming dashboards, crypto/cyberpunk apps, sci-fi companion tools, hacker OS skins, data-heavy monitoring HUDs","avoid":"Serious enterprise, health/finance requiring calm trust, minimal editorial apps","complexity":"High"},{"name":"Bitcoin DeFi (Mobile)","type":"Mobile","keywords":"web3, bitcoin, defi, digital gold, fintech, wallet, orange, glassmorphism, gradient, blur, holographic, trust, precision","primary":"Bitcoin Orange #F7931A, Burnt Orange #EA580C, Digital Gold #FFD600","effects":"Deep void + dark matter surfaces, Bitcoin orange/gold gradients for CTAs, pill buttons with glowing shadows, glassmorphic BlurView nav, monospace data rows, gradient text balances + masked orange-gold, pulsing status indicators and vertical ledger timelines, ultra-thin borders, high-precision typography","bestFor":"DeFi dashboards, wallets, NFT marketplaces, Web3 social, metaverse utilities, high-tech fintech brands","avoid":"Playful casual apps, low-tech brands, ultra-minimal editorial apps","complexity":"High"},{"name":"Claymorphism (Mobile)","type":"Mobile","keywords":"claymorphism, clay, 3d, soft, bubbly, candy, playful, rounded, squish, tactile, inflate, silicone, haptic, spring","primary":"Vivid Violet #7C3AED, Hot Pink #DB2777","effects":"Multi-layer shadow stacks (nested View) to simulate clay depth, LinearGradient #A78BFA→#7C3AED buttons, borderRadius 40–50 outer / 32 cards / 20 buttons, Reanimated spring squish (scale 0.92 on press), BlurView glass-clay hybrid cards, floating blobs with slow ±20px drift, Haptics Light on every press","bestFor":"Children education apps, teen social products, crypto gamification, creative tools, brand mascot-led apps","avoid":"Serious enterprise, high-density data, editorial reading apps, fintech trust signals","complexity":"High"},{"name":"Enterprise SaaS (Mobile)","type":"Mobile","keywords":"enterprise, saas, b2b, professional, indigo, violet, gradient, polished, trustworthy, clean, approachable, spring, haptic","primary":"Indigo #4F46E5, Violet #7C3AED","effects":"Indigo→Violet gradient primary CTAs + active tab highlights, colored card shadows rgba(79,70,229,0.08), pill buttons or 12pt radius, full-width CTA at screen bottom, spring press scale 0.97, floating label inputs with animated focus border, skeletal loading pulses (Indigo/Slate tint), Bottom Sheets with drag dismiss, swipe-to-action list cards, scroll-linked title collapse","bestFor":"B2B backend management, productivity tools, government and finance mobile apps, SaaS companion apps, enterprise dashboards","avoid":"Pure consumer entertainment, Gen-Z youth apps, gaming UI, ultra-minimal editorial","complexity":"High"},{"name":"Sketch Hand-Drawn (Mobile)","type":"Mobile","keywords":"sketch, hand-drawn, handwriting, wobbly, imperfect, paper, kalam, organic, collage, post-it, tape, offset shadow, scribble","primary":"Red Marker #FF4D4D, Pencil Black #2D2D2D","effects":"Wobbly borderRadius (unique per corner: 15/25/20/10), borderWidth 2–3 solid/dashed, hard offset shadow via rear View (4px,4px) #2D2D2D, Kalam Bold headings, PatrickHand Regular body, slight rotation (-1deg/1deg) on cards, absolute SVG scribble overlays (arrows/tape/tacks), jiggle -2deg↔2deg on error, LayoutAnimation spring on layout changes, Haptics on press, paper texture repeating background","bestFor":"Low-fidelity prototyping, creative brands, children/picturebook apps, education tools, journaling apps, gamified puzzles","avoid":"Enterprise dashboards, high-density data tables, fintech precision tools, medical or legal apps","complexity":"Medium"},{"name":"Neumorphism (Mobile)","type":"Mobile","keywords":"neumorphism, soft ui, dual shadow, extruded, inset, clay surface, monochromatic, cool grey, haptic, ceramic, physical, depth","primary":"Accent Violet #6C63FF, Clay Base #E0E5EC","effects":"Full-screen #E0E5EC base, dual-layer shadow via nested View (light top-left + dark bottom-right), extruded convex resting state, inset concave pressed/input state, Reanimated scale 0.97 on press, shadow opacity interpolates 1→0.4 on press, Haptics Light on every interaction, 8pt grid, no blur shadows (no shadowRadius blend), nested depth (extruded card contains inset icon slot)","bestFor":"Minimal hardware controls, smart home apps, aesthetic utility tools, health monitors, brand showcase pages","avoid":"High-density data, bright multi-color apps, apps needing strong visual hierarchy via color, dark-mode-only products","complexity":"Medium"}],"fonts":[{"name":"Classic Elegant","category":"Serif + Sans","heading":"Playfair Display","body":"Inter","mood":"elegant, luxury, sophisticated, timeless, premium, editorial","bestFor":"Luxury brands, fashion, spa, beauty, editorial, magazines, high-end e-commerce"},{"name":"Modern Professional","category":"Sans + Sans","heading":"Poppins","body":"Open Sans","mood":"modern, professional, clean, corporate, friendly, approachable","bestFor":"SaaS, corporate sites, business apps, startups, professional services"},{"name":"Tech Startup","category":"Sans + Sans","heading":"Space Grotesk","body":"DM Sans","mood":"tech, startup, modern, innovative, bold, futuristic","bestFor":"Tech companies, startups, SaaS, developer tools, AI products"},{"name":"Editorial Classic","category":"Serif + Serif","heading":"Cormorant Garamond","body":"Libre Baskerville","mood":"editorial, classic, literary, traditional, refined, bookish","bestFor":"Publishing, blogs, news sites, literary magazines, book covers"},{"name":"Minimal Swiss","category":"Sans + Sans","heading":"Inter","body":"Inter","mood":"minimal, clean, swiss, functional, neutral, professional","bestFor":"Dashboards, admin panels, documentation, enterprise apps, design systems"},{"name":"Playful Creative","category":"Display + Sans","heading":"Fredoka","body":"Nunito","mood":"playful, friendly, fun, creative, warm, approachable","bestFor":"Children's apps, educational, gaming, creative tools, entertainment"},{"name":"Bold Statement","category":"Display + Sans","heading":"Bebas Neue","body":"Source Sans 3","mood":"bold, impactful, strong, dramatic, modern, headlines","bestFor":"Marketing sites, portfolios, agencies, event pages, sports"},{"name":"Wellness Calm","category":"Serif + Sans","heading":"Lora","body":"Raleway","mood":"calm, wellness, health, relaxing, natural, organic","bestFor":"Health apps, wellness, spa, meditation, yoga, organic brands"},{"name":"Developer Mono","category":"Mono + Sans","heading":"JetBrains Mono","body":"IBM Plex Sans","mood":"code, developer, technical, precise, functional, hacker","bestFor":"Developer tools, documentation, code editors, tech blogs, CLI apps"},{"name":"Retro Vintage","category":"Display + Serif","heading":"Abril Fatface","body":"Merriweather","mood":"retro, vintage, nostalgic, dramatic, decorative, bold","bestFor":"Vintage brands, breweries, restaurants, creative portfolios, posters"},{"name":"Geometric Modern","category":"Sans + Sans","heading":"Outfit","body":"Work Sans","mood":"geometric, modern, clean, balanced, contemporary, versatile","bestFor":"General purpose, portfolios, agencies, modern brands, landing pages"},{"name":"Luxury Serif","category":"Serif + Sans","heading":"Cormorant","body":"Montserrat","mood":"luxury, high-end, fashion, elegant, refined, premium","bestFor":"Fashion brands, luxury e-commerce, jewelry, high-end services"},{"name":"Friendly SaaS","category":"Sans + Sans","heading":"Plus Jakarta Sans","body":"Plus Jakarta Sans","mood":"friendly, modern, saas, clean, approachable, professional","bestFor":"SaaS products, web apps, dashboards, B2B, productivity tools"},{"name":"News Editorial","category":"Serif + Sans","heading":"Newsreader","body":"Roboto","mood":"news, editorial, journalism, trustworthy, readable, informative","bestFor":"News sites, blogs, magazines, journalism, content-heavy sites"},{"name":"Handwritten Charm","category":"Script + Sans","heading":"Caveat","body":"Quicksand","mood":"handwritten, personal, friendly, casual, warm, charming","bestFor":"Personal blogs, invitations, creative portfolios, lifestyle brands"},{"name":"Corporate Trust","category":"Sans + Sans","heading":"Lexend","body":"Source Sans 3","mood":"corporate, trustworthy, accessible, readable, professional, clean","bestFor":"Enterprise, government, healthcare, finance, accessibility-focused"},{"name":"Brutalist Raw","category":"Mono + Mono","heading":"Space Mono","body":"Space Mono","mood":"brutalist, raw, technical, monospace, minimal, stark","bestFor":"Brutalist designs, developer portfolios, experimental, tech art"},{"name":"Fashion Forward","category":"Sans + Sans","heading":"Syne","body":"Manrope","mood":"fashion, avant-garde, creative, bold, artistic, edgy","bestFor":"Fashion brands, creative agencies, art galleries, design studios"},{"name":"Soft Rounded","category":"Sans + Sans","heading":"Varela Round","body":"Nunito Sans","mood":"soft, rounded, friendly, approachable, warm, gentle","bestFor":"Children's products, pet apps, friendly brands, wellness, soft UI"},{"name":"Premium Sans","category":"Sans + Sans","heading":"Satoshi","body":"General Sans","mood":"premium, modern, clean, sophisticated, versatile, balanced","bestFor":"Premium brands, modern agencies, SaaS, portfolios, startups"},{"name":"Vietnamese Friendly","category":"Sans + Sans","heading":"Be Vietnam Pro","body":"Noto Sans","mood":"vietnamese, international, readable, clean, multilingual, accessible","bestFor":"Vietnamese sites, multilingual apps, international products"},{"name":"Japanese Elegant","category":"Serif + Sans","heading":"Noto Serif JP","body":"Noto Sans JP","mood":"japanese, elegant, traditional, modern, multilingual, readable","bestFor":"Japanese sites, Japanese restaurants, cultural sites, anime/manga"},{"name":"Korean Modern","category":"Sans + Sans","heading":"Noto Sans KR","body":"Noto Sans KR","mood":"korean, modern, clean, professional, multilingual, readable","bestFor":"Korean sites, K-beauty, K-pop, Korean businesses, multilingual"},{"name":"Chinese Traditional","category":"Serif + Sans","heading":"Noto Serif TC","body":"Noto Sans TC","mood":"chinese, traditional, elegant, cultural, multilingual, readable","bestFor":"Traditional Chinese sites, cultural content, Taiwan/Hong Kong markets"},{"name":"Chinese Simplified","category":"Sans + Sans","heading":"Noto Sans SC","body":"Noto Sans SC","mood":"chinese, simplified, modern, professional, multilingual, readable","bestFor":"Simplified Chinese sites, mainland China market, business apps"},{"name":"Arabic Elegant","category":"Serif + Sans","heading":"Noto Naskh Arabic","body":"Noto Sans Arabic","mood":"arabic, elegant, traditional, cultural, RTL, readable","bestFor":"Arabic sites, Middle East market, Islamic content, bilingual sites"},{"name":"Thai Modern","category":"Sans + Sans","heading":"Noto Sans Thai","body":"Noto Sans Thai","mood":"thai, modern, readable, clean, multilingual, accessible","bestFor":"Thai sites, Southeast Asia, tourism, Thai restaurants"},{"name":"Hebrew Modern","category":"Sans + Sans","heading":"Noto Sans Hebrew","body":"Noto Sans Hebrew","mood":"hebrew, modern, RTL, clean, professional, readable","bestFor":"Hebrew sites, Israeli market, Jewish content, bilingual sites"},{"name":"Legal Professional","category":"Serif + Sans","heading":"EB Garamond","body":"Lato","mood":"legal, professional, traditional, trustworthy, formal, authoritative","bestFor":"Law firms, legal services, contracts, formal documents, government"},{"name":"Medical Clean","category":"Sans + Sans","heading":"Figtree","body":"Noto Sans","mood":"medical, clean, accessible, professional, healthcare, trustworthy","bestFor":"Healthcare, medical clinics, pharma, health apps, accessibility"},{"name":"Financial Trust","category":"Sans + Sans","heading":"IBM Plex Sans","body":"IBM Plex Sans","mood":"financial, trustworthy, professional, corporate, banking, serious","bestFor":"Banks, finance, insurance, investment, fintech, enterprise"},{"name":"Real Estate Luxury","category":"Serif + Sans","heading":"Cinzel","body":"Josefin Sans","mood":"real estate, luxury, elegant, sophisticated, property, premium","bestFor":"Real estate, luxury properties, architecture, interior design"},{"name":"Restaurant Menu","category":"Serif + Sans","heading":"Playfair Display SC","body":"Karla","mood":"restaurant, menu, culinary, elegant, foodie, hospitality","bestFor":"Restaurants, cafes, food blogs, culinary, hospitality"},{"name":"Art Deco","category":"Display + Sans","heading":"Poiret One","body":"Didact Gothic","mood":"art deco, vintage, 1920s, elegant, decorative, gatsby","bestFor":"Vintage events, art deco themes, luxury hotels, classic cocktails"},{"name":"Magazine Style","category":"Serif + Sans","heading":"Libre Bodoni","body":"Public Sans","mood":"magazine, editorial, publishing, refined, journalism, print","bestFor":"Magazines, online publications, editorial content, journalism"},{"name":"Crypto/Web3","category":"Sans + Sans","heading":"Orbitron","body":"Exo 2","mood":"crypto, web3, futuristic, tech, blockchain, digital","bestFor":"Crypto platforms, NFT, blockchain, web3, futuristic tech"},{"name":"Gaming Bold","category":"Display + Sans","heading":"Russo One","body":"Chakra Petch","mood":"gaming, bold, action, esports, competitive, energetic","bestFor":"Gaming, esports, action games, competitive sports, entertainment"},{"name":"Indie/Craft","category":"Display + Sans","heading":"Amatic SC","body":"Cabin","mood":"indie, craft, handmade, artisan, organic, creative","bestFor":"Craft brands, indie products, artisan, handmade, organic products"},{"name":"Startup Bold","category":"Sans + Sans","heading":"Clash Display","body":"Satoshi","mood":"startup, bold, modern, innovative, confident, dynamic","bestFor":"Startups, pitch decks, product launches, bold brands"},{"name":"E-commerce Clean","category":"Sans + Sans","heading":"Rubik","body":"Nunito Sans","mood":"ecommerce, clean, shopping, product, retail, conversion","bestFor":"E-commerce, online stores, product pages, retail, shopping"},{"name":"Academic/Research","category":"Serif + Sans","heading":"Crimson Pro","body":"Atkinson Hyperlegible","mood":"academic, research, scholarly, accessible, readable, educational","bestFor":"Universities, research papers, academic journals, educational"},{"name":"Dashboard Data","category":"Mono + Sans","heading":"Fira Code","body":"Fira Sans","mood":"dashboard, data, analytics, code, technical, precise","bestFor":"Dashboards, analytics, data visualization, admin panels"},{"name":"Music/Entertainment","category":"Display + Sans","heading":"Righteous","body":"Poppins","mood":"music, entertainment, fun, energetic, bold, performance","bestFor":"Music platforms, entertainment, events, festivals, performers"},{"name":"Minimalist Portfolio","category":"Sans + Sans","heading":"Archivo","body":"Space Grotesk","mood":"minimal, portfolio, designer, creative, clean, artistic","bestFor":"Design portfolios, creative professionals, minimalist brands"},{"name":"Kids/Education","category":"Display + Sans","heading":"Baloo 2","body":"Comic Neue","mood":"kids, education, playful, friendly, colorful, learning","bestFor":"Children's apps, educational games, kid-friendly content"},{"name":"Wedding/Romance","category":"Script + Serif","heading":"Great Vibes","body":"Cormorant Infant","mood":"wedding, romance, elegant, script, invitation, feminine","bestFor":"Wedding sites, invitations, romantic brands, bridal"},{"name":"Science/Tech","category":"Sans + Sans","heading":"Exo","body":"Roboto Mono","mood":"science, technology, research, data, futuristic, precise","bestFor":"Science, research, tech documentation, data-heavy sites"},{"name":"Accessibility First","category":"Sans + Sans","heading":"Atkinson Hyperlegible","body":"Atkinson Hyperlegible","mood":"accessible, readable, inclusive, WCAG, dyslexia-friendly, clear","bestFor":"Accessibility-critical sites, government, healthcare, inclusive design"},{"name":"Sports/Fitness","category":"Sans + Sans","heading":"Barlow Condensed","body":"Barlow","mood":"sports, fitness, athletic, energetic, condensed, action","bestFor":"Sports, fitness, gyms, athletic brands, competition"},{"name":"Luxury Minimalist","category":"Serif + Sans","heading":"Bodoni Moda","body":"Jost","mood":"luxury, minimalist, high-end, sophisticated, refined, premium","bestFor":"Luxury minimalist brands, high-end fashion, premium products"},{"name":"Tech/HUD Mono","category":"Mono + Mono","heading":"Share Tech Mono","body":"Fira Code","mood":"tech, futuristic, hud, sci-fi, data, monospaced, precise","bestFor":"Sci-fi interfaces, developer tools, cybersecurity, dashboards"},{"name":"Pixel Retro","category":"Display + Sans","heading":"Press Start 2P","body":"VT323","mood":"pixel, retro, gaming, 8-bit, nostalgic, arcade","bestFor":"Pixel art games, retro websites, creative portfolios"},{"name":"Neubrutalist Bold","category":"Display + Sans","heading":"Lexend Mega","body":"Public Sans","mood":"bold, neubrutalist, loud, strong, geometric, quirky","bestFor":"Neubrutalist designs, Gen Z brands, bold marketing"},{"name":"Academic/Archival","category":"Serif + Serif","heading":"EB Garamond","body":"Crimson Text","mood":"academic, old-school, university, research, serious, traditional","bestFor":"University sites, archives, research papers, history"},{"name":"Spatial Clear","category":"Sans + Sans","heading":"Inter","body":"Inter","mood":"spatial, legible, glass, system, clean, neutral","bestFor":"Spatial computing, AR/VR, glassmorphism interfaces"},{"name":"Kinetic Motion","category":"Display + Mono","heading":"Syncopate","body":"Space Mono","mood":"kinetic, motion, futuristic, speed, wide, tech","bestFor":"Music festivals, automotive, high-energy brands"},{"name":"Gen Z Brutal","category":"Display + Sans","heading":"Anton","body":"Epilogue","mood":"brutal, loud, shouty, meme, internet, bold","bestFor":"Gen Z marketing, streetwear, viral campaigns"},{"name":"Minimalist Monochrome Editorial","category":"Serif + Serif + Mono (Triple Stack)","heading":"Playfair Display","body":"Source Serif 4","mood":"monochrome, editorial, austere, typographic, pocket manifesto, luxury, high contrast, brutalist mobile","bestFor":"Luxury fashion mobile apps, editorial publications, digital exhibitions, portfolio apps, high-contrast e-reader aesthetics"},{"name":"Modern Dark Cinema (Inter System)","category":"Sans + Mono","heading":"Inter","body":"Inter","mood":"dark, cinematic, technical, precision, clean, premium, developer, professional, high-end utility","bestFor":"Developer tools, fintech/trading, AI dashboards, streaming platforms, high-end productivity apps"},{"name":"SaaS Mobile Boutique (Calistoga + Inter)","category":"Display Serif + Sans + Mono","heading":"Calistoga","body":"Inter","mood":"saas, boutique, electric, warm, editorial, bold, premium, fintech, business, dual font, human warmth","bestFor":"B2B SaaS mobile, fintech apps, analytics dashboards, marketing tools, operations platforms"},{"name":"Terminal CLI Monospace","category":"Mono + Mono (Single Family)","heading":"JetBrains Mono","body":"JetBrains Mono","mood":"terminal, cli, hacker, monospace, matrix, developer, retro-future, command line, precision, OLED","bestFor":"Developer tools, Web3/blockchain apps, hacker aesthetic, sci-fi games, ARG, security tools, geek-culture portfolios"},{"name":"Kinetic Brutalism (Space Grotesk)","category":"Geometric Sans (Single Dominant)","heading":"Space Grotesk","body":"Space Grotesk","mood":"kinetic, brutalist, aggressive, uppercase, oversized, display, motion, street, bold, high-energy, zine","bestFor":"Music/culture apps, sports platforms, brand flagship mobile, performance dashboards, underground product drops"},{"name":"Flat Design Mobile (System Bold)","category":"Sans + Sans","heading":"Inter","body":"Inter","mood":"flat, clean, system, bold, geometric, cross-platform, icon, poster, minimal, functional, responsive","bestFor":"Cross-platform apps, dashboards, system UI, onboarding, marketing pages, informational apps, icon-heavy interfaces"},{"name":"Material You MD3 (Roboto System)","category":"Sans (System Default)","heading":"Roboto","body":"Roboto","mood":"material design 3, md3, android, google, tonal, friendly, rounded, accessible, adaptive","bestFor":"Android apps, cross-platform tools, productivity software, data-heavy B2B dashboards, enterprise mobile"},{"name":"Neo Brutalism Mobile (Space Grotesk Heavy)","category":"Geometric Sans (Bold-Only)","heading":"Space Grotesk","body":"Space Grotesk","mood":"neo brutalism, pop art, loud, bold, heavy, stickers, mechanical, high contrast, cream, gen-z","bestFor":"Creative tools, Gen-Z marketing, e-commerce for youth culture, content portfolios, collage-style apps"},{"name":"Bold Typography Mobile (Inter-Tight Poster)","category":"Sans + Serif (Display) + Mono","heading":"Inter","body":"Playfair Display","mood":"bold typography, editorial, poster, near-black, vermillion, luxury, type-as-hero, manifesto, high-contrast","bestFor":"Creative brand flagships, reading platforms, event apps, flash pages, luxury mobile experiences"},{"name":"Academia Mobile (Cormorant + Crimson + Cinzel)","category":"Serif + Book Serif + Engraved (Triple Stack)","heading":"Cormorant Garamond","body":"Crimson Pro","mood":"academia, library, mahogany, parchment, brass, scholarly, prestige, antique, victorian, leather","bestFor":"Knowledge management apps, scholarly reading tools, personal brand portfolios, RPG games, cultural community platforms"},{"name":"Cyberpunk Mobile (Orbitron + JetBrains Mono)","category":"Tech Display + Mono","heading":"Orbitron","body":"JetBrains Mono","mood":"cyberpunk, neon, glitch, hud, sci-fi, dark, matrix green, magenta, chamfered, tactical","bestFor":"Gaming companion apps, fintech/crypto, data visualization, dark brand apps, cyberpunk narrative games"},{"name":"Web3 Bitcoin DeFi (Space Grotesk + Inter + Mono)","category":"Geometric Sans + Sans + Mono (Triple)","heading":"Space Grotesk","body":"Inter","mood":"web3, bitcoin, defi, digital gold, fintech, crypto, trustless, luminescent, precision, dark","bestFor":"DeFi protocols and wallets, NFT platforms, metaverse social apps, high-tech brand landing pages"},{"name":"Claymorphism Mobile (Nunito + DM Sans)","category":"Display Rounded + Geometric Sans","heading":"Nunito","body":"DM Sans","mood":"claymorphism, clay, rounded, playful, candy, bubbly, soft, 3d, children, education, tactile, spring, nunito, dm sans","bestFor":"Children education apps, teen social, brand mascot apps, creative tools, fintech gamification"},{"name":"Enterprise SaaS Mobile (Plus Jakarta Sans)","category":"Geometric Sans (Single Family)","heading":"Plus Jakarta Sans","body":"Plus Jakarta Sans","mood":"enterprise, saas, b2b, professional, indigo, modern, approachable, legible, ios dynamic type, android scaling","bestFor":"B2B SaaS apps, productivity tools, government and finance mobile apps, admin dashboards, enterprise onboarding"},{"name":"Sketch Hand-Drawn Mobile (Kalam + Patrick Hand)","category":"Handwritten + Handwritten (Dual)","heading":"Kalam","body":"Patrick Hand","mood":"sketch, hand-drawn, handwriting, human, imperfect, organic, paper, kalam, patrick hand, education, journal, creative","bestFor":"Journaling apps, prototype tools, children's picturebook apps, creative platforms, gamified puzzle apps"},{"name":"Neumorphism Mobile (Plus Jakarta Sans + System)","category":"Geometric Sans (System Fallback)","heading":"Plus Jakarta Sans","body":"Plus Jakarta Sans","mood":"neumorphism, soft ui, monochromatic, cool grey, minimal, physical, depth, ceramic, system font, utility","bestFor":"Smart home controls, minimal tools, aesthetic dashboards, health monitors, brand showcase pages"}],"palettes":[{"name":"SaaS (General)","primary":"#2563EB","secondary":"#3B82F6","accent":"#EA580C","background":"#F8FAFC","foreground":"#1E293B","muted":"#E9EFF8","border":"#E2E8F0","notes":"Trust blue + orange CTA contrast [Accent adjusted from #F97316 for WCAG 3:1]"},{"name":"Micro SaaS","primary":"#6366F1","secondary":"#818CF8","accent":"#059669","background":"#F5F3FF","foreground":"#1E1B4B","muted":"#EBEFF9","border":"#E0E7FF","notes":"Indigo primary + emerald CTA [Accent adjusted from #10B981 for WCAG 3:1]"},{"name":"E-commerce","primary":"#059669","secondary":"#10B981","accent":"#EA580C","background":"#ECFDF5","foreground":"#064E3B","muted":"#E8F1F3","border":"#A7F3D0","notes":"Success green + urgency orange [Accent adjusted from #F97316 for WCAG 3:1]"},{"name":"E-commerce Luxury","primary":"#1C1917","secondary":"#44403C","accent":"#A16207","background":"#FAFAF9","foreground":"#0C0A09","muted":"#E8ECF0","border":"#D6D3D1","notes":"Premium dark + gold accent [Accent adjusted from #CA8A04 for WCAG 3:1]"},{"name":"B2B Service","primary":"#0F172A","secondary":"#334155","accent":"#0369A1","background":"#F8FAFC","foreground":"#020617","muted":"#E8ECF1","border":"#E2E8F0","notes":"Professional navy + blue CTA"},{"name":"Financial Dashboard","primary":"#0F172A","secondary":"#1E293B","accent":"#22C55E","background":"#020617","foreground":"#F8FAFC","muted":"#1A1E2F","border":"#334155","notes":"Dark bg + green positive indicators"},{"name":"Analytics Dashboard","primary":"#1E40AF","secondary":"#3B82F6","accent":"#D97706","background":"#F8FAFC","foreground":"#1E3A8A","muted":"#E9EEF6","border":"#DBEAFE","notes":"Blue data + amber highlights [Accent adjusted from #F59E0B for WCAG 3:1]"},{"name":"Healthcare App","primary":"#0891B2","secondary":"#22D3EE","accent":"#059669","background":"#ECFEFF","foreground":"#164E63","muted":"#E8F1F6","border":"#A5F3FC","notes":"Calm cyan + health green"},{"name":"Educational App","primary":"#4F46E5","secondary":"#818CF8","accent":"#EA580C","background":"#EEF2FF","foreground":"#1E1B4B","muted":"#EBEEF8","border":"#C7D2FE","notes":"Playful indigo + energetic orange [Accent adjusted from #F97316 for WCAG 3:1]"},{"name":"Creative Agency","primary":"#EC4899","secondary":"#F472B6","accent":"#0891B2","background":"#FDF2F8","foreground":"#831843","muted":"#F1EEF5","border":"#FBCFE8","notes":"Bold pink + cyan accent [Accent adjusted from #06B6D4 for WCAG 3:1]"},{"name":"Portfolio/Personal","primary":"#18181B","secondary":"#3F3F46","accent":"#2563EB","background":"#FAFAFA","foreground":"#09090B","muted":"#E8ECF0","border":"#E4E4E7","notes":"Monochrome + blue accent"},{"name":"Gaming","primary":"#7C3AED","secondary":"#A78BFA","accent":"#F43F5E","background":"#0F0F23","foreground":"#E2E8F0","muted":"#27273B","border":"#4C1D95","notes":"Neon purple + rose action"},{"name":"Government/Public Service","primary":"#0F172A","secondary":"#334155","accent":"#0369A1","background":"#F8FAFC","foreground":"#020617","muted":"#E8ECF1","border":"#E2E8F0","notes":"High contrast navy + blue"},{"name":"Fintech/Crypto","primary":"#F59E0B","secondary":"#FBBF24","accent":"#8B5CF6","background":"#0F172A","foreground":"#F8FAFC","muted":"#272F42","border":"#334155","notes":"Gold trust + purple tech"},{"name":"Social Media App","primary":"#E11D48","secondary":"#FB7185","accent":"#2563EB","background":"#FFF1F2","foreground":"#881337","muted":"#F0ECF2","border":"#FECDD3","notes":"Vibrant rose + engagement blue"},{"name":"Productivity Tool","primary":"#0D9488","secondary":"#14B8A6","accent":"#EA580C","background":"#F0FDFA","foreground":"#134E4A","muted":"#E8F1F4","border":"#99F6E4","notes":"Teal focus + action orange [Accent adjusted from #F97316 for WCAG 3:1]"},{"name":"Design System/Component Library","primary":"#4F46E5","secondary":"#6366F1","accent":"#EA580C","background":"#EEF2FF","foreground":"#312E81","muted":"#EBEEF8","border":"#C7D2FE","notes":"Indigo brand + doc hierarchy [Accent adjusted from #F97316 for WCAG 3:1]"},{"name":"AI/Chatbot Platform","primary":"#7C3AED","secondary":"#A78BFA","accent":"#0891B2","background":"#FAF5FF","foreground":"#1E1B4B","muted":"#ECEEF9","border":"#DDD6FE","notes":"AI purple + cyan interactions [Accent adjusted from #06B6D4 for WCAG 3:1]"},{"name":"NFT/Web3 Platform","primary":"#8B5CF6","secondary":"#A78BFA","accent":"#FBBF24","background":"#0F0F23","foreground":"#F8FAFC","muted":"#27273B","border":"#4C1D95","notes":"Purple tech + gold value"},{"name":"Creator Economy Platform","primary":"#EC4899","secondary":"#F472B6","accent":"#EA580C","background":"#FDF2F8","foreground":"#831843","muted":"#F1EEF5","border":"#FBCFE8","notes":"Creator pink + engagement orange [Accent adjusted from #F97316 for WCAG 3:1]"},{"name":"Remote Work/Collaboration Tool","primary":"#6366F1","secondary":"#818CF8","accent":"#059669","background":"#F5F3FF","foreground":"#312E81","muted":"#EBEFF9","border":"#E0E7FF","notes":"Calm indigo + success green [Accent adjusted from #10B981 for WCAG 3:1]"},{"name":"Mental Health App","primary":"#8B5CF6","secondary":"#C4B5FD","accent":"#059669","background":"#FAF5FF","foreground":"#4C1D95","muted":"#EDEFF9","border":"#EDE9FE","notes":"Calming lavender + wellness green [Accent adjusted from #10B981 for WCAG 3:1]"},{"name":"Pet Tech App","primary":"#F97316","secondary":"#FB923C","accent":"#2563EB","background":"#FFF7ED","foreground":"#9A3412","muted":"#F1F0F0","border":"#FED7AA","notes":"Playful orange + trust blue"},{"name":"Smart Home/IoT Dashboard","primary":"#1E293B","secondary":"#334155","accent":"#22C55E","background":"#0F172A","foreground":"#F8FAFC","muted":"#272F42","border":"#475569","notes":"Dark tech + status green"},{"name":"EV/Charging Ecosystem","primary":"#0891B2","secondary":"#22D3EE","accent":"#16A34A","background":"#ECFEFF","foreground":"#164E63","muted":"#E8F1F6","border":"#A5F3FC","notes":"Electric cyan + eco green [Accent adjusted from #22C55E for WCAG 3:1]"},{"name":"Subscription Box Service","primary":"#D946EF","secondary":"#E879F9","accent":"#EA580C","background":"#FDF4FF","foreground":"#86198F","muted":"#F0EEF9","border":"#F5D0FE","notes":"Excitement purple + urgency orange [Accent adjusted from #F97316 for WCAG 3:1]"},{"name":"Podcast Platform","primary":"#1E1B4B","secondary":"#312E81","accent":"#F97316","background":"#0F0F23","foreground":"#F8FAFC","muted":"#27273B","border":"#4338CA","notes":"Dark audio + warm accent"},{"name":"Dating App","primary":"#E11D48","secondary":"#FB7185","accent":"#EA580C","background":"#FFF1F2","foreground":"#881337","muted":"#F0ECF2","border":"#FECDD3","notes":"Romantic rose + warm orange [Accent adjusted from #F97316 for WCAG 3:1]"},{"name":"Micro-Credentials/Badges Platform","primary":"#0369A1","secondary":"#0EA5E9","accent":"#A16207","background":"#F0F9FF","foreground":"#0C4A6E","muted":"#E7EFF5","border":"#BAE6FD","notes":"Trust blue + achievement gold [Accent adjusted from #CA8A04 for WCAG 3:1]"},{"name":"Knowledge Base/Documentation","primary":"#475569","secondary":"#64748B","accent":"#2563EB","background":"#F8FAFC","foreground":"#1E293B","muted":"#EAEFF3","border":"#E2E8F0","notes":"Neutral grey + link blue"},{"name":"Hyperlocal Services","primary":"#059669","secondary":"#10B981","accent":"#EA580C","background":"#ECFDF5","foreground":"#064E3B","muted":"#E8F1F3","border":"#A7F3D0","notes":"Location green + action orange [Accent adjusted from #F97316 for WCAG 3:1]"},{"name":"Beauty/Spa/Wellness Service","primary":"#EC4899","secondary":"#F9A8D4","accent":"#8B5CF6","background":"#FDF2F8","foreground":"#831843","muted":"#F1EEF5","border":"#FBCFE8","notes":"Soft pink + lavender luxury"},{"name":"Luxury/Premium Brand","primary":"#1C1917","secondary":"#44403C","accent":"#A16207","background":"#FAFAF9","foreground":"#0C0A09","muted":"#E8ECF0","border":"#D6D3D1","notes":"Premium black + gold accent [Accent adjusted from #CA8A04 for WCAG 3:1]"},{"name":"Restaurant/Food Service","primary":"#DC2626","secondary":"#F87171","accent":"#A16207","background":"#FEF2F2","foreground":"#450A0A","muted":"#F0EDF1","border":"#FECACA","notes":"Appetizing red + warm gold [Accent adjusted from #CA8A04 for WCAG 3:1]"},{"name":"Fitness/Gym App","primary":"#F97316","secondary":"#FB923C","accent":"#22C55E","background":"#1F2937","foreground":"#F8FAFC","muted":"#37414F","border":"#374151","notes":"Energy orange + success green"},{"name":"Real Estate/Property","primary":"#0F766E","secondary":"#14B8A6","accent":"#0369A1","background":"#F0FDFA","foreground":"#134E4A","muted":"#E8F0F3","border":"#99F6E4","notes":"Trust teal + professional blue"},{"name":"Travel/Tourism Agency","primary":"#0EA5E9","secondary":"#38BDF8","accent":"#EA580C","background":"#F0F9FF","foreground":"#0C4A6E","muted":"#E8F2F8","border":"#BAE6FD","notes":"Sky blue + adventure orange [Accent adjusted from #F97316 for WCAG 3:1]"},{"name":"Hotel/Hospitality","primary":"#1E3A8A","secondary":"#3B82F6","accent":"#A16207","background":"#F8FAFC","foreground":"#1E40AF","muted":"#E9EEF5","border":"#BFDBFE","notes":"Luxury navy + gold service [Accent adjusted from #CA8A04 for WCAG 3:1]"},{"name":"Wedding/Event Planning","primary":"#DB2777","secondary":"#F472B6","accent":"#A16207","background":"#FDF2F8","foreground":"#831843","muted":"#F0EDF4","border":"#FBCFE8","notes":"Romantic pink + elegant gold [Accent adjusted from #CA8A04 for WCAG 3:1]"},{"name":"Legal Services","primary":"#1E3A8A","secondary":"#1E40AF","accent":"#B45309","background":"#F8FAFC","foreground":"#0F172A","muted":"#E9EEF5","border":"#CBD5E1","notes":"Authority navy + trust gold"},{"name":"Insurance Platform","primary":"#0369A1","secondary":"#0EA5E9","accent":"#16A34A","background":"#F0F9FF","foreground":"#0C4A6E","muted":"#E7EFF5","border":"#BAE6FD","notes":"Security blue + protected green [Accent adjusted from #22C55E for WCAG 3:1]"},{"name":"Banking/Traditional Finance","primary":"#0F172A","secondary":"#1E3A8A","accent":"#A16207","background":"#F8FAFC","foreground":"#020617","muted":"#E8ECF1","border":"#E2E8F0","notes":"Trust navy + premium gold [Accent adjusted from #CA8A04 for WCAG 3:1]"},{"name":"Online Course/E-learning","primary":"#0D9488","secondary":"#2DD4BF","accent":"#EA580C","background":"#F0FDFA","foreground":"#134E4A","muted":"#E8F1F4","border":"#5EEAD4","notes":"Progress teal + achievement orange [Accent adjusted from #F97316 for WCAG 3:1]"},{"name":"Non-profit/Charity","primary":"#0891B2","secondary":"#22D3EE","accent":"#EA580C","background":"#ECFEFF","foreground":"#164E63","muted":"#E8F1F6","border":"#A5F3FC","notes":"Compassion blue + action orange [Accent adjusted from #F97316 for WCAG 3:1]"},{"name":"Music Streaming","primary":"#1E1B4B","secondary":"#4338CA","accent":"#22C55E","background":"#0F0F23","foreground":"#F8FAFC","muted":"#27273B","border":"#312E81","notes":"Dark audio + play green"},{"name":"Video Streaming/OTT","primary":"#0F0F23","secondary":"#1E1B4B","accent":"#E11D48","background":"#000000","foreground":"#F8FAFC","muted":"#181818","border":"#312E81","notes":"Cinema dark + play red"},{"name":"Job Board/Recruitment","primary":"#0369A1","secondary":"#0EA5E9","accent":"#16A34A","background":"#F0F9FF","foreground":"#0C4A6E","muted":"#E7EFF5","border":"#BAE6FD","notes":"Professional blue + success green [Accent adjusted from #22C55E for WCAG 3:1]"},{"name":"Marketplace (P2P)","primary":"#7C3AED","secondary":"#A78BFA","accent":"#16A34A","background":"#FAF5FF","foreground":"#4C1D95","muted":"#ECEEF9","border":"#DDD6FE","notes":"Trust purple + transaction green [Accent adjusted from #22C55E for WCAG 3:1]"},{"name":"Logistics/Delivery","primary":"#2563EB","secondary":"#3B82F6","accent":"#EA580C","background":"#EFF6FF","foreground":"#1E40AF","muted":"#E9EFF8","border":"#BFDBFE","notes":"Tracking blue + delivery orange [Accent adjusted from #F97316 for WCAG 3:1]"},{"name":"Agriculture/Farm Tech","primary":"#15803D","secondary":"#22C55E","accent":"#A16207","background":"#F0FDF4","foreground":"#14532D","muted":"#E8F0F1","border":"#BBF7D0","notes":"Earth green + harvest gold [Accent adjusted from #CA8A04 for WCAG 3:1]"},{"name":"Construction/Architecture","primary":"#64748B","secondary":"#94A3B8","accent":"#EA580C","background":"#F8FAFC","foreground":"#334155","muted":"#EBF0F5","border":"#E2E8F0","notes":"Industrial grey + safety orange [Accent adjusted from #F97316 for WCAG 3:1]"},{"name":"Automotive/Car Dealership","primary":"#1E293B","secondary":"#334155","accent":"#DC2626","background":"#F8FAFC","foreground":"#0F172A","muted":"#E9EDF1","border":"#E2E8F0","notes":"Premium dark + action red"},{"name":"Photography Studio","primary":"#18181B","secondary":"#27272A","accent":"#F8FAFC","background":"#000000","foreground":"#FAFAFA","muted":"#181818","border":"#3F3F46","notes":"Pure black + white contrast"},{"name":"Coworking Space","primary":"#F59E0B","secondary":"#FBBF24","accent":"#2563EB","background":"#FFFBEB","foreground":"#78350F","muted":"#F1F2EF","border":"#FDE68A","notes":"Energetic amber + booking blue"},{"name":"Home Services (Plumber/Electrician)","primary":"#1E40AF","secondary":"#3B82F6","accent":"#EA580C","background":"#EFF6FF","foreground":"#1E3A8A","muted":"#E9EEF6","border":"#BFDBFE","notes":"Professional blue + urgent orange [Accent adjusted from #F97316 for WCAG 3:1]"},{"name":"Childcare/Daycare","primary":"#F472B6","secondary":"#FBCFE8","accent":"#16A34A","background":"#FDF2F8","foreground":"#9D174D","muted":"#F1F0F6","border":"#FCE7F3","notes":"Soft pink + safe green [Accent adjusted from #22C55E for WCAG 3:1]"},{"name":"Senior Care/Elderly","primary":"#0369A1","secondary":"#38BDF8","accent":"#16A34A","background":"#F0F9FF","foreground":"#0C4A6E","muted":"#E7EFF5","border":"#E0F2FE","notes":"Calm blue + reassuring green [Accent adjusted from #22C55E for WCAG 3:1]"},{"name":"Medical Clinic","primary":"#0891B2","secondary":"#22D3EE","accent":"#16A34A","background":"#F0FDFA","foreground":"#134E4A","muted":"#E8F1F6","border":"#CCFBF1","notes":"Medical teal + health green [Accent adjusted from #22C55E for WCAG 3:1]"},{"name":"Pharmacy/Drug Store","primary":"#15803D","secondary":"#22C55E","accent":"#0369A1","background":"#F0FDF4","foreground":"#14532D","muted":"#E8F0F1","border":"#BBF7D0","notes":"Pharmacy green + trust blue"},{"name":"Dental Practice","primary":"#0EA5E9","secondary":"#38BDF8","accent":"#0EA5E9","background":"#F0F9FF","foreground":"#0C4A6E","muted":"#E8F2F8","border":"#BAE6FD","notes":"Fresh blue + smile yellow [Accent adjusted from #FBBF24 for WCAG 3:1]"},{"name":"Veterinary Clinic","primary":"#0D9488","secondary":"#14B8A6","accent":"#EA580C","background":"#F0FDFA","foreground":"#134E4A","muted":"#E8F1F4","border":"#99F6E4","notes":"Caring teal + warm orange [Accent adjusted from #F97316 for WCAG 3:1]"},{"name":"Florist/Plant Shop","primary":"#15803D","secondary":"#22C55E","accent":"#EC4899","background":"#F0FDF4","foreground":"#14532D","muted":"#E8F0F1","border":"#BBF7D0","notes":"Natural green + floral pink"},{"name":"Bakery/Cafe","primary":"#92400E","secondary":"#B45309","accent":"#92400E","background":"#FEF3C7","foreground":"#78350F","muted":"#EDEEF0","border":"#FDE68A","notes":"Warm brown + cream white [Accent adjusted from #F8FAFC for WCAG 3:1]"},{"name":"Brewery/Winery","primary":"#7C2D12","secondary":"#B91C1C","accent":"#A16207","background":"#FEF2F2","foreground":"#450A0A","muted":"#ECEDF0","border":"#FECACA","notes":"Deep burgundy + craft gold [Accent adjusted from #CA8A04 for WCAG 3:1]"},{"name":"Airline","primary":"#1E3A8A","secondary":"#3B82F6","accent":"#EA580C","background":"#EFF6FF","foreground":"#1E40AF","muted":"#E9EEF5","border":"#BFDBFE","notes":"Sky blue + booking orange [Accent adjusted from #F97316 for WCAG 3:1]"},{"name":"News/Media Platform","primary":"#DC2626","secondary":"#EF4444","accent":"#1E40AF","background":"#FEF2F2","foreground":"#450A0A","muted":"#F0EDF1","border":"#FECACA","notes":"Breaking red + link blue"},{"name":"Magazine/Blog","primary":"#18181B","secondary":"#3F3F46","accent":"#EC4899","background":"#FAFAFA","foreground":"#09090B","muted":"#E8ECF0","border":"#E4E4E7","notes":"Editorial black + accent pink"},{"name":"Freelancer Platform","primary":"#6366F1","secondary":"#818CF8","accent":"#16A34A","background":"#EEF2FF","foreground":"#312E81","muted":"#EBEFF9","border":"#C7D2FE","notes":"Creative indigo + hire green [Accent adjusted from #22C55E for WCAG 3:1]"},{"name":"Marketing Agency","primary":"#EC4899","secondary":"#F472B6","accent":"#0891B2","background":"#FDF2F8","foreground":"#831843","muted":"#F1EEF5","border":"#FBCFE8","notes":"Bold pink + creative cyan [Accent adjusted from #06B6D4 for WCAG 3:1]"},{"name":"Event Management","primary":"#7C3AED","secondary":"#A78BFA","accent":"#EA580C","background":"#FAF5FF","foreground":"#4C1D95","muted":"#ECEEF9","border":"#DDD6FE","notes":"Excitement purple + action orange [Accent adjusted from #F97316 for WCAG 3:1]"},{"name":"Membership/Community","primary":"#7C3AED","secondary":"#A78BFA","accent":"#16A34A","background":"#FAF5FF","foreground":"#4C1D95","muted":"#ECEEF9","border":"#DDD6FE","notes":"Community purple + join green [Accent adjusted from #22C55E for WCAG 3:1]"},{"name":"Newsletter Platform","primary":"#0369A1","secondary":"#0EA5E9","accent":"#EA580C","background":"#F0F9FF","foreground":"#0C4A6E","muted":"#E7EFF5","border":"#BAE6FD","notes":"Trust blue + subscribe orange [Accent adjusted from #F97316 for WCAG 3:1]"},{"name":"Digital Products/Downloads","primary":"#6366F1","secondary":"#818CF8","accent":"#16A34A","background":"#EEF2FF","foreground":"#312E81","muted":"#EBEFF9","border":"#C7D2FE","notes":"Digital indigo + buy green [Accent adjusted from #22C55E for WCAG 3:1]"},{"name":"Church/Religious Organization","primary":"#7C3AED","secondary":"#A78BFA","accent":"#A16207","background":"#FAF5FF","foreground":"#4C1D95","muted":"#ECEEF9","border":"#DDD6FE","notes":"Spiritual purple + warm gold [Accent adjusted from #CA8A04 for WCAG 3:1]"},{"name":"Sports Team/Club","primary":"#DC2626","secondary":"#EF4444","accent":"#DC2626","background":"#FEF2F2","foreground":"#7F1D1D","muted":"#F0EDF1","border":"#FECACA","notes":"Team red + championship gold [Accent adjusted from #FBBF24 for WCAG 3:1]"},{"name":"Museum/Gallery","primary":"#18181B","secondary":"#27272A","accent":"#18181B","background":"#FAFAFA","foreground":"#09090B","muted":"#E8ECF0","border":"#E4E4E7","notes":"Gallery black + white space [Accent adjusted from #F8FAFC for WCAG 3:1]"},{"name":"Theater/Cinema","primary":"#1E1B4B","secondary":"#312E81","accent":"#CA8A04","background":"#0F0F23","foreground":"#F8FAFC","muted":"#27273B","border":"#4338CA","notes":"Dramatic dark + spotlight gold"},{"name":"Language Learning App","primary":"#4F46E5","secondary":"#818CF8","accent":"#16A34A","background":"#EEF2FF","foreground":"#312E81","muted":"#EBEEF8","border":"#C7D2FE","notes":"Learning indigo + progress green [Accent adjusted from #22C55E for WCAG 3:1]"},{"name":"Coding Bootcamp","primary":"#0F172A","secondary":"#1E293B","accent":"#22C55E","background":"#020617","foreground":"#F8FAFC","muted":"#1A1E2F","border":"#334155","notes":"Terminal dark + success green"},{"name":"Cybersecurity Platform","primary":"#00FF41","secondary":"#0D0D0D","accent":"#FF3333","background":"#000000","foreground":"#E0E0E0","muted":"#181818","border":"#1F1F1F","notes":"Matrix green + alert red"},{"name":"Developer Tool / IDE","primary":"#1E293B","secondary":"#334155","accent":"#22C55E","background":"#0F172A","foreground":"#F8FAFC","muted":"#272F42","border":"#475569","notes":"Code dark + run green"},{"name":"Biotech / Life Sciences","primary":"#0EA5E9","secondary":"#0284C7","accent":"#059669","background":"#F0F9FF","foreground":"#0C4A6E","muted":"#E8F2F8","border":"#BAE6FD","notes":"DNA blue + life green [Accent adjusted from #10B981 for WCAG 3:1]"},{"name":"Space Tech / Aerospace","primary":"#F8FAFC","secondary":"#94A3B8","accent":"#3B82F6","background":"#0B0B10","foreground":"#F8FAFC","muted":"#232328","border":"#1E293B","notes":"Star white + launch blue"},{"name":"Architecture / Interior","primary":"#171717","secondary":"#404040","accent":"#A16207","background":"#FFFFFF","foreground":"#171717","muted":"#E8ECF0","border":"#E5E5E5","notes":"Minimal black + accent gold [Accent adjusted from #D4AF37 for WCAG 3:1]"},{"name":"Quantum Computing Interface","primary":"#00FFFF","secondary":"#7B61FF","accent":"#FF00FF","background":"#050510","foreground":"#E0E0FF","muted":"#1D1D28","border":"#333344","notes":"Quantum cyan + interference purple"},{"name":"Biohacking / Longevity App","primary":"#FF4D4D","secondary":"#4D94FF","accent":"#059669","background":"#F5F5F7","foreground":"#1C1C1E","muted":"#F2EEF2","border":"#E5E5EA","notes":"Bio red/blue + vitality green [Accent adjusted from #00E676 for WCAG 3:1]"},{"name":"Autonomous Drone Fleet Manager","primary":"#00FF41","secondary":"#008F11","accent":"#FF3333","background":"#0D1117","foreground":"#E6EDF3","muted":"#25292F","border":"#30363D","notes":"Terminal green + alert red"},{"name":"Generative Art Platform","primary":"#18181B","secondary":"#3F3F46","accent":"#EC4899","background":"#FAFAFA","foreground":"#09090B","muted":"#E8ECF0","border":"#E4E4E7","notes":"Canvas neutral + creative pink"},{"name":"Spatial Computing OS / App","primary":"#FFFFFF","secondary":"#E5E5E5","accent":"#FFFFFF","background":"#888888","foreground":"#000000","muted":"#777777","border":"#CCCCCC","notes":"Glass white + system blue [Accent adjusted from #007AFF for WCAG 3:1]"},{"name":"Sustainable Energy / Climate Tech","primary":"#059669","secondary":"#10B981","accent":"#059669","background":"#ECFDF5","foreground":"#064E3B","muted":"#E8F1F3","border":"#A7F3D0","notes":"Nature green + solar gold [Accent adjusted from #FBBF24 for WCAG 3:1]"},{"name":"Personal Finance Tracker","primary":"#1E40AF","secondary":"#3B82F6","accent":"#059669","background":"#0F172A","foreground":"#FFFFFF","muted":"#101A34","border":"rgba(255,255,255,0.08)","notes":"Trust blue + profit green on dark"},{"name":"Chat & Messaging App","primary":"#2563EB","secondary":"#6366F1","accent":"#059669","background":"#FFFFFF","foreground":"#0F172A","muted":"#F1F5FD","border":"#E4ECFC","notes":"Messenger blue + online green"},{"name":"Notes & Writing App","primary":"#78716C","secondary":"#A8A29E","accent":"#D97706","background":"#FFFBEB","foreground":"#0F172A","muted":"#F6F6F6","border":"#EEEDED","notes":"Warm ink + amber accent on cream"},{"name":"Habit Tracker","primary":"#D97706","secondary":"#F59E0B","accent":"#059669","background":"#FFFBEB","foreground":"#0F172A","muted":"#FCF6F0","border":"#FAEEE1","notes":"Streak amber + habit green"},{"name":"Food Delivery / On-Demand","primary":"#EA580C","secondary":"#F97316","accent":"#2563EB","background":"#FFF7ED","foreground":"#0F172A","muted":"#FDF4F0","border":"#FCEAE1","notes":"Appetizing orange + trust blue"},{"name":"Ride Hailing / Transportation","primary":"#1E293B","secondary":"#334155","accent":"#2563EB","background":"#0F172A","foreground":"#FFFFFF","muted":"#10182B","border":"rgba(255,255,255,0.08)","notes":"Map dark + route blue"},{"name":"Recipe & Cooking App","primary":"#9A3412","secondary":"#C2410C","accent":"#059669","background":"#FFFBEB","foreground":"#0F172A","muted":"#F8F2F0","border":"#F2E6E2","notes":"Warm terracotta + fresh green"},{"name":"Meditation & Mindfulness","primary":"#7C3AED","secondary":"#8B5CF6","accent":"#059669","background":"#FAF5FF","foreground":"#0F172A","muted":"#F7F3FD","border":"#EFE7FC","notes":"Calm lavender + mindful green"},{"name":"Weather App","primary":"#0284C7","secondary":"#0EA5E9","accent":"#F59E0B","background":"#F0F9FF","foreground":"#0F172A","muted":"#EFF7FB","border":"#E0F0F8","notes":"Sky blue + sun amber"},{"name":"Diary & Journal App","primary":"#92400E","secondary":"#A16207","accent":"#6366F1","background":"#FFFBEB","foreground":"#0F172A","muted":"#F8F3F0","border":"#F1E8E2","notes":"Warm journal brown + ink violet"},{"name":"CRM & Client Management","primary":"#2563EB","secondary":"#3B82F6","accent":"#059669","background":"#F8FAFC","foreground":"#0F172A","muted":"#F1F5FD","border":"#E4ECFC","notes":"Professional blue + deal green"},{"name":"Inventory & Stock Management","primary":"#334155","secondary":"#475569","accent":"#059669","background":"#F8FAFC","foreground":"#0F172A","muted":"#F2F3F4","border":"#E6E8EA","notes":"Industrial slate + stock green"},{"name":"Flashcard & Study Tool","primary":"#7C3AED","secondary":"#8B5CF6","accent":"#059669","background":"#FAF5FF","foreground":"#0F172A","muted":"#F7F3FD","border":"#EFE7FC","notes":"Study purple + correct green"},{"name":"Booking & Appointment App","primary":"#0284C7","secondary":"#0EA5E9","accent":"#059669","background":"#F0F9FF","foreground":"#0F172A","muted":"#EFF7FB","border":"#E0F0F8","notes":"Calendar blue + available green"},{"name":"Invoice & Billing Tool","primary":"#1E3A5F","secondary":"#2563EB","accent":"#059669","background":"#F8FAFC","foreground":"#0F172A","muted":"#F1F3F5","border":"#E4E7EB","notes":"Navy professional + paid green"},{"name":"Grocery & Shopping List","primary":"#059669","secondary":"#10B981","accent":"#D97706","background":"#ECFDF5","foreground":"#0F172A","muted":"#F0F8F6","border":"#E1F2ED","notes":"Fresh green + food amber"},{"name":"Timer & Pomodoro","primary":"#DC2626","secondary":"#EF4444","accent":"#059669","background":"#0F172A","foreground":"#FFFFFF","muted":"#1F1829","border":"rgba(255,255,255,0.08)","notes":"Focus red on dark + break green"},{"name":"Parenting & Baby Tracker","primary":"#EC4899","secondary":"#F472B6","accent":"#0284C7","background":"#FDF2F8","foreground":"#0F172A","muted":"#FDF4F8","border":"#FCE9F2","notes":"Soft pink + trust blue"},{"name":"Scanner & Document Manager","primary":"#1E293B","secondary":"#334155","accent":"#2563EB","background":"#F8FAFC","foreground":"#0F172A","muted":"#F1F2F3","border":"#E4E5E7","notes":"Document grey + scan blue"},{"name":"Calendar & Scheduling App","primary":"#2563EB","secondary":"#3B82F6","accent":"#059669","background":"#F8FAFC","foreground":"#0F172A","muted":"#F1F5FD","border":"#E4ECFC","notes":"Calendar blue + event green"},{"name":"Password Manager","primary":"#1E3A5F","secondary":"#334155","accent":"#059669","background":"#0F172A","foreground":"#FFFFFF","muted":"#10192E","border":"rgba(255,255,255,0.08)","notes":"Vault dark blue + secure green"},{"name":"Expense Splitter / Bill Split","primary":"#059669","secondary":"#10B981","accent":"#DC2626","background":"#F8FAFC","foreground":"#0F172A","muted":"#F0F8F6","border":"#E1F2ED","notes":"Balance green + owe red"},{"name":"Voice Recorder & Memo","primary":"#DC2626","secondary":"#EF4444","accent":"#2563EB","background":"#FFFFFF","foreground":"#0F172A","muted":"#FCF1F1","border":"#FAE4E4","notes":"Recording red + waveform blue"},{"name":"Bookmark & Read-Later","primary":"#D97706","secondary":"#F59E0B","accent":"#2563EB","background":"#FFFBEB","foreground":"#0F172A","muted":"#FCF6F0","border":"#FAEEE1","notes":"Warm amber + link blue"},{"name":"Translator App","primary":"#2563EB","secondary":"#0891B2","accent":"#EA580C","background":"#F8FAFC","foreground":"#0F172A","muted":"#F1F5FD","border":"#E4ECFC","notes":"Global blue + teal + accent orange"},{"name":"Calculator & Unit Converter","primary":"#EA580C","secondary":"#F97316","accent":"#2563EB","background":"#1C1917","foreground":"#FFFFFF","muted":"#2C1E16","border":"rgba(255,255,255,0.08)","notes":"Operation orange on dark"},{"name":"Alarm & World Clock","primary":"#D97706","secondary":"#F59E0B","accent":"#6366F1","background":"#0F172A","foreground":"#FFFFFF","muted":"#1F1E27","border":"rgba(255,255,255,0.08)","notes":"Time amber + night indigo on dark"},{"name":"File Manager & Transfer","primary":"#2563EB","secondary":"#3B82F6","accent":"#D97706","background":"#F8FAFC","foreground":"#0F172A","muted":"#F1F5FD","border":"#E4ECFC","notes":"Folder blue + file amber"},{"name":"Email Client","primary":"#2563EB","secondary":"#3B82F6","accent":"#DC2626","background":"#FFFFFF","foreground":"#0F172A","muted":"#F1F5FD","border":"#E4ECFC","notes":"Inbox blue + priority red"},{"name":"Casual Puzzle Game","primary":"#EC4899","secondary":"#8B5CF6","accent":"#F59E0B","background":"#FDF2F8","foreground":"#0F172A","muted":"#FDF4F8","border":"#FCE9F2","notes":"Cheerful pink + reward gold"},{"name":"Trivia & Quiz Game","primary":"#2563EB","secondary":"#7C3AED","accent":"#F59E0B","background":"#EFF6FF","foreground":"#0F172A","muted":"#F1F5FD","border":"#E4ECFC","notes":"Quiz blue + gold leaderboard"},{"name":"Card & Board Game","primary":"#15803D","secondary":"#166534","accent":"#D97706","background":"#0F172A","foreground":"#FFFFFF","muted":"#0F1F2B","border":"rgba(255,255,255,0.08)","notes":"Felt green + gold on dark"},{"name":"Idle & Clicker Game","primary":"#D97706","secondary":"#F59E0B","accent":"#7C3AED","background":"#FFFBEB","foreground":"#0F172A","muted":"#FCF6F0","border":"#FAEEE1","notes":"Coin gold + prestige purple"},{"name":"Word & Crossword Game","primary":"#15803D","secondary":"#059669","accent":"#D97706","background":"#FFFFFF","foreground":"#0F172A","muted":"#F0F7F3","border":"#E2EFE7","notes":"Word green + letter amber"},{"name":"Arcade & Retro Game","primary":"#DC2626","secondary":"#2563EB","accent":"#22C55E","background":"#0F172A","foreground":"#FFFFFF","muted":"#1F1829","border":"rgba(255,255,255,0.08)","notes":"Neon red+blue on dark + score green"},{"name":"Photo Editor & Filters","primary":"#7C3AED","secondary":"#6366F1","accent":"#0891B2","background":"#0F172A","foreground":"#FFFFFF","muted":"#171939","border":"rgba(255,255,255,0.08)","notes":"Editor violet + filter cyan on dark"},{"name":"Short Video Editor","primary":"#EC4899","secondary":"#DB2777","accent":"#2563EB","background":"#0F172A","foreground":"#FFFFFF","muted":"#201A32","border":"rgba(255,255,255,0.08)","notes":"Video pink on dark + timeline blue"},{"name":"Drawing & Sketching Canvas","primary":"#7C3AED","secondary":"#8B5CF6","accent":"#0891B2","background":"#1C1917","foreground":"#FFFFFF","muted":"#231B28","border":"rgba(255,255,255,0.08)","notes":"Canvas purple + tool teal on dark"},{"name":"Music Creation & Beat Maker","primary":"#7C3AED","secondary":"#6366F1","accent":"#22C55E","background":"#0F172A","foreground":"#FFFFFF","muted":"#171939","border":"rgba(255,255,255,0.08)","notes":"Studio purple + waveform green on dark"},{"name":"Meme & Sticker Maker","primary":"#EC4899","secondary":"#F59E0B","accent":"#2563EB","background":"#FFFFFF","foreground":"#0F172A","muted":"#FDF4F8","border":"#FCE9F2","notes":"Viral pink + comedy yellow + share blue"},{"name":"AI Photo & Avatar Generator","primary":"#7C3AED","secondary":"#6366F1","accent":"#EC4899","background":"#FAF5FF","foreground":"#0F172A","muted":"#F7F3FD","border":"#EFE7FC","notes":"AI purple + generation pink"},{"name":"Link-in-Bio Page Builder","primary":"#2563EB","secondary":"#7C3AED","accent":"#EC4899","background":"#FFFFFF","foreground":"#0F172A","muted":"#F1F5FD","border":"#E4ECFC","notes":"Brand blue + creator purple"},{"name":"Wardrobe & Outfit Planner","primary":"#BE185D","secondary":"#EC4899","accent":"#D97706","background":"#FDF2F8","foreground":"#0F172A","muted":"#FBF1F5","border":"#F7E3EB","notes":"Fashion rose + gold accent"},{"name":"Plant Care Tracker","primary":"#15803D","secondary":"#059669","accent":"#D97706","background":"#F0FDF4","foreground":"#0F172A","muted":"#F0F7F3","border":"#E2EFE7","notes":"Nature green + sun yellow"},{"name":"Book & Reading Tracker","primary":"#78716C","secondary":"#92400E","accent":"#D97706","background":"#FFFBEB","foreground":"#0F172A","muted":"#F6F6F6","border":"#EEEDED","notes":"Book brown + page amber"},{"name":"Couple & Relationship App","primary":"#BE185D","secondary":"#EC4899","accent":"#DC2626","background":"#FDF2F8","foreground":"#0F172A","muted":"#FBF1F5","border":"#F7E3EB","notes":"Romance rose + love red"},{"name":"Family Calendar & Chores","primary":"#2563EB","secondary":"#059669","accent":"#D97706","background":"#F8FAFC","foreground":"#0F172A","muted":"#F1F5FD","border":"#E4ECFC","notes":"Family blue + chore green"},{"name":"Mood Tracker","primary":"#7C3AED","secondary":"#6366F1","accent":"#D97706","background":"#FAF5FF","foreground":"#0F172A","muted":"#F7F3FD","border":"#EFE7FC","notes":"Mood purple + insight amber"},{"name":"Gift & Wishlist","primary":"#DC2626","secondary":"#D97706","accent":"#EC4899","background":"#FFF1F2","foreground":"#0F172A","muted":"#FCF1F1","border":"#FAE4E4","notes":"Gift red + gold + surprise pink"},{"name":"Running & Cycling GPS","primary":"#EA580C","secondary":"#F97316","accent":"#059669","background":"#0F172A","foreground":"#FFFFFF","muted":"#201C27","border":"rgba(255,255,255,0.08)","notes":"Energetic orange + pace green on dark"},{"name":"Yoga & Stretching Guide","primary":"#6B7280","secondary":"#78716C","accent":"#0891B2","background":"#F5F5F0","foreground":"#0F172A","muted":"#F6F6F7","border":"#EDEEEF","notes":"Sage neutral + calm teal"},{"name":"Sleep Tracker","primary":"#4338CA","secondary":"#6366F1","accent":"#7C3AED","background":"#0F172A","foreground":"#FFFFFF","muted":"#131936","border":"rgba(255,255,255,0.08)","notes":"Night indigo + dream violet on dark"},{"name":"Calorie & Nutrition Counter","primary":"#059669","secondary":"#10B981","accent":"#EA580C","background":"#ECFDF5","foreground":"#0F172A","muted":"#F0F8F6","border":"#E1F2ED","notes":"Healthy green + macro orange"},{"name":"Period & Cycle Tracker","primary":"#BE185D","secondary":"#EC4899","accent":"#7C3AED","background":"#FDF2F8","foreground":"#0F172A","muted":"#FBF1F5","border":"#F7E3EB","notes":"Blush rose + fertility lavender"},{"name":"Medication & Pill Reminder","primary":"#0284C7","secondary":"#0891B2","accent":"#DC2626","background":"#F0F9FF","foreground":"#0F172A","muted":"#EFF7FB","border":"#E0F0F8","notes":"Medical blue + alert red"},{"name":"Water & Hydration Reminder","primary":"#0284C7","secondary":"#06B6D4","accent":"#0891B2","background":"#F0F9FF","foreground":"#0F172A","muted":"#EFF7FB","border":"#E0F0F8","notes":"Refreshing blue + water cyan"},{"name":"Fasting & Intermittent Timer","primary":"#6366F1","secondary":"#4338CA","accent":"#059669","background":"#0F172A","foreground":"#FFFFFF","muted":"#151D39","border":"rgba(255,255,255,0.08)","notes":"Fasting indigo on dark + eating green"},{"name":"Anonymous Community / Confession","primary":"#475569","secondary":"#334155","accent":"#0891B2","background":"#0F172A","foreground":"#FFFFFF","muted":"#131B2F","border":"rgba(255,255,255,0.08)","notes":"Protective grey + subtle teal on dark"},{"name":"Local Events & Discovery","primary":"#EA580C","secondary":"#F97316","accent":"#2563EB","background":"#FFF7ED","foreground":"#0F172A","muted":"#FDF4F0","border":"#FCEAE1","notes":"Event orange + map blue"},{"name":"Study Together / Virtual Coworking","primary":"#2563EB","secondary":"#3B82F6","accent":"#059669","background":"#F8FAFC","foreground":"#0F172A","muted":"#F1F5FD","border":"#E4ECFC","notes":"Focus blue + session green"},{"name":"Coding Challenge & Practice","primary":"#22C55E","secondary":"#059669","accent":"#D97706","background":"#0F172A","foreground":"#FFFFFF","muted":"#10242E","border":"rgba(255,255,255,0.08)","notes":"Code green + difficulty amber on dark"},{"name":"Kids Learning (ABC & Math)","primary":"#2563EB","secondary":"#F59E0B","accent":"#EC4899","background":"#EFF6FF","foreground":"#0F172A","muted":"#F1F5FD","border":"#E4ECFC","notes":"Learning blue + play yellow + fun pink"},{"name":"Music Instrument Learning","primary":"#DC2626","secondary":"#9A3412","accent":"#D97706","background":"#FFFBEB","foreground":"#0F172A","muted":"#FCF1F1","border":"#FAE4E4","notes":"Musical red + warm amber"},{"name":"Parking Finder","primary":"#2563EB","secondary":"#059669","accent":"#DC2626","background":"#F0F9FF","foreground":"#0F172A","muted":"#F1F5FD","border":"#E4ECFC","notes":"Available blue/green + occupied red"},{"name":"Public Transit Guide","primary":"#2563EB","secondary":"#0891B2","accent":"#EA580C","background":"#F8FAFC","foreground":"#0F172A","muted":"#F1F5FD","border":"#E4ECFC","notes":"Transit blue + line colors"},{"name":"Road Trip Planner","primary":"#EA580C","secondary":"#0891B2","accent":"#D97706","background":"#FFF7ED","foreground":"#0F172A","muted":"#FDF4F0","border":"#FCEAE1","notes":"Adventure orange + map teal"},{"name":"VPN & Privacy Tool","primary":"#1E3A5F","secondary":"#334155","accent":"#22C55E","background":"#0F172A","foreground":"#FFFFFF","muted":"#10192E","border":"rgba(255,255,255,0.08)","notes":"Shield dark + connected green"},{"name":"Emergency SOS & Safety","primary":"#DC2626","secondary":"#EF4444","accent":"#2563EB","background":"#FFF1F2","foreground":"#0F172A","muted":"#FCF1F1","border":"#FAE4E4","notes":"Alert red + safety blue"},{"name":"Wallpaper & Theme App","primary":"#7C3AED","secondary":"#EC4899","accent":"#2563EB","background":"#FAF5FF","foreground":"#0F172A","muted":"#F7F3FD","border":"#EFE7FC","notes":"Aesthetic purple + trending pink"},{"name":"White Noise & Ambient Sound","primary":"#475569","secondary":"#334155","accent":"#4338CA","background":"#0F172A","foreground":"#FFFFFF","muted":"#131B2F","border":"rgba(255,255,255,0.08)","notes":"Ambient grey + deep indigo on dark"},{"name":"Home Decoration & Interior Design","primary":"#78716C","secondary":"#A8A29E","accent":"#D97706","background":"#FAF5F2","foreground":"#0F172A","muted":"#F6F6F6","border":"#EEEDED","notes":"Interior warm grey + gold accent"}],"patterns":[{"No":"1","Pattern Name":"Hero + Features + CTA","Keywords":"hero, hero-centric, hero-centric design, features, feature-rich, feature-rich showcase, cta, call-to-action","Section Order":"1. Hero with headline/image, 2. Value prop, 3. Key features (3-5), 4. CTA section, 5. Footer","Primary CTA Placement":"Hero (sticky) + Bottom","Color Strategy":"Hero: Brand primary or vibrant. Features: Card bg #FAFAFA. CTA: Contrasting accent color","Recommended Effects":"Hero parallax, feature card hover lift, CTA glow on hover","Conversion Optimization":"Deep CTA placement. Use contrasting color (at least 7:1 contrast ratio). Sticky navbar CTA."},{"No":"2","Pattern Name":"Hero + Testimonials + CTA","Keywords":"hero, testimonials, social-proof, social-proof-focused, social proof focused, trust, reviews, cta","Section Order":"1. Hero, 2. Problem statement, 3. Solution overview, 4. Testimonials carousel, 5. CTA","Primary CTA Placement":"Hero (sticky) + Post-testimonials","Color Strategy":"Hero: Brand color. Testimonials: Light bg #F5F5F5. Quotes: Italic, muted color #666. CTA: Vibrant","Recommended Effects":"Testimonial carousel slide animations, quote marks animations, avatar fade-in","Conversion Optimization":"Social proof before CTA. Use 3-5 testimonials. Include photo + name + role. CTA after social proof."},{"No":"3","Pattern Name":"Product Demo + Features","Keywords":"demo, product-demo, features, showcase, interactive, interactive-product-demo, interactive product demo","Section Order":"1. Hero, 2. Product video/mockup (center), 3. Feature breakdown per section, 4. Comparison (optional), 5. CTA","Primary CTA Placement":"Video center + CTA right/bottom","Color Strategy":"Video surround: Brand color overlay. Features: Icon color #0080FF. Text: Dark #222","Recommended Effects":"Video play button pulse, feature scroll reveals, demo interaction highlights","Conversion Optimization":"Embedded product demo increases engagement. Use interactive mockup if possible. Auto-play video muted."},{"No":"4","Pattern Name":"Minimal Single Column","Keywords":"minimal, simple, direct, minimal & direct, minimal-direct, single-column, clean","Section Order":"1. Hero headline, 2. Short description, 3. Benefit bullets (3 max), 4. CTA, 5. Footer","Primary CTA Placement":"Center, large CTA button","Color Strategy":"Minimalist: Brand + white #FFFFFF + accent. Buttons: High contrast 7:1+. Text: Black/Dark grey","Recommended Effects":"Minimal hover effects. Smooth scroll. CTA scale on hover (subtle)","Conversion Optimization":"Single CTA focus. Large typography. Lots of whitespace. No nav clutter. Mobile-first."},{"No":"5","Pattern Name":"Funnel (3-Step Conversion)","Keywords":"funnel, conversion, conversion-optimized, conversion optimized, steps, wizard, onboarding","Section Order":"1. Hero, 2. Step 1 (problem), 3. Step 2 (solution), 4. Step 3 (action), 5. CTA progression","Primary CTA Placement":"Each step: mini-CTA. Final: main CTA","Color Strategy":"Step colors: 1 (Red/Problem), 2 (Orange/Process), 3 (Green/Solution). CTA: Brand color","Recommended Effects":"Step number animations, progress bar fill, step transitions smooth scroll","Conversion Optimization":"Progressive disclosure. Show only essential info per step. Use progress indicators. Multiple CTAs."},{"No":"6","Pattern Name":"Comparison Table + CTA","Keywords":"comparison, table, compare, versus, cta","Section Order":"1. Hero, 2. Problem intro, 3. Comparison table (product vs competitors), 4. Pricing (optional), 5. CTA","Primary CTA Placement":"Table: Right column. CTA: Below table","Color Strategy":"Table: Alternating rows (white/light grey). Your product: Highlight #FFFACD (light yellow) or green. Text: Dark","Recommended Effects":"Table row hover highlight, price toggle animations, feature checkmark animations","Conversion Optimization":"Use comparison to show unique value. Highlight your product row. Include 'free trial' in pricing row."},{"No":"7","Pattern Name":"Lead Magnet + Form","Keywords":"lead, form, signup, capture, email, magnet","Section Order":"1. Hero (benefit headline), 2. Lead magnet preview (ebook cover, checklist, etc), 3. Form (minimal fields), 4. CTA submit","Primary CTA Placement":"Form CTA: Submit button","Color Strategy":"Lead magnet: Professional design. Form: Clean white bg. Inputs: Light border #CCCCCC. CTA: Brand color","Recommended Effects":"Form focus state animations, input validation animations, success confirmation animation","Conversion Optimization":"Form fields ≤ 3 for best conversion. Offer valuable lead magnet preview. Show form submission progress."},{"No":"8","Pattern Name":"Pricing Page + CTA","Keywords":"pricing, plans, tiers, comparison, cta","Section Order":"1. Hero (pricing headline), 2. Price comparison cards, 3. Feature comparison table, 4. FAQ section, 5. Final CTA","Primary CTA Placement":"Each card: CTA button. Sticky CTA in nav","Color Strategy":"Free: Grey, Starter: Blue, Pro: Green/Gold, Enterprise: Dark. Cards: 1px border, shadow","Recommended Effects":"Price toggle animation (monthly/yearly), card comparison highlight, FAQ accordion open/close","Conversion Optimization":"Recommend starter plan (pre-select/highlight). Show annual discount (20-30%). Use FAQs to address concerns."},{"No":"9","Pattern Name":"Video-First Hero","Keywords":"video, hero, media, visual, engaging","Section Order":"1. Hero with video background, 2. Key features overlay, 3. Benefits section, 4. CTA","Primary CTA Placement":"Overlay on video (center/bottom) + Bottom section","Color Strategy":"Dark overlay 60% on video. Brand accent for CTA. White text on dark.","Recommended Effects":"Video autoplay muted, parallax scroll, text fade-in on scroll","Conversion Optimization":"86% higher engagement with video. Add captions for accessibility. Compress video for performance."},{"No":"10","Pattern Name":"Scroll-Triggered Storytelling","Keywords":"storytelling, scroll, narrative, story, immersive","Section Order":"1. Intro hook, 2. Chapter 1 (problem), 3. Chapter 2 (journey), 4. Chapter 3 (solution), 5. Climax CTA","Primary CTA Placement":"End of each chapter (mini) + Final climax CTA","Color Strategy":"Progressive reveal. Each chapter has distinct color. Building intensity.","Recommended Effects":"ScrollTrigger animations, parallax layers, progressive disclosure, chapter transitions","Conversion Optimization":"Narrative increases time-on-page 3x. Use progress indicator. Mobile: simplify animations."},{"No":"11","Pattern Name":"AI Personalization Landing","Keywords":"ai, personalization, smart, recommendation, dynamic","Section Order":"1. Dynamic hero (personalized), 2. Relevant features, 3. Tailored testimonials, 4. Smart CTA","Primary CTA Placement":"Context-aware placement based on user segment","Color Strategy":"Adaptive based on user data. A/B test color variations per segment.","Recommended Effects":"Dynamic content swap, fade transitions, personalized product recommendations","Conversion Optimization":"20%+ conversion with personalization. Requires analytics integration. Fallback for new users."},{"No":"12","Pattern Name":"Waitlist/Coming Soon","Keywords":"waitlist, coming-soon, launch, early-access, notify","Section Order":"1. Hero with countdown, 2. Product teaser/preview, 3. Email capture form, 4. Social proof (waitlist count)","Primary CTA Placement":"Email form prominent (above fold) + Sticky form on scroll","Color Strategy":"Anticipation: Dark + accent highlights. Countdown in brand color. Urgency indicators.","Recommended Effects":"Countdown timer animation, email validation feedback, success confetti, social share buttons","Conversion Optimization":"Scarcity + exclusivity. Show waitlist count. Early access benefits. Referral program."},{"No":"13","Pattern Name":"Comparison Table Focus","Keywords":"comparison, table, versus, compare, features","Section Order":"1. Hero (problem statement), 2. Comparison matrix (you vs competitors), 3. Feature deep-dive, 4. Winner CTA","Primary CTA Placement":"After comparison table (highlighted row) + Bottom","Color Strategy":"Your product column highlighted (accent bg or green). Competitors neutral. Checkmarks green.","Recommended Effects":"Table row hover highlight, feature checkmark animations, sticky comparison header","Conversion Optimization":"Show value vs competitors. 35% higher conversion. Be factual. Include pricing if favorable."},{"No":"14","Pattern Name":"Pricing-Focused Landing","Keywords":"pricing, price, cost, plans, subscription","Section Order":"1. Hero (value proposition), 2. Pricing cards (3 tiers), 3. Feature comparison, 4. FAQ, 5. Final CTA","Primary CTA Placement":"Each pricing card + Sticky CTA in nav + Bottom","Color Strategy":"Popular plan highlighted (brand color border/bg). Free: grey. Enterprise: dark/premium.","Recommended Effects":"Price toggle monthly/annual animation, card hover lift, FAQ accordion smooth open","Conversion Optimization":"Annual discount 20-30%. Recommend mid-tier (most popular badge). Address objections in FAQ."},{"No":"15","Pattern Name":"App Store Style Landing","Keywords":"app, mobile, download, store, install","Section Order":"1. Hero with device mockup, 2. Screenshots carousel, 3. Features with icons, 4. Reviews/ratings, 5. Download CTAs","Primary CTA Placement":"Download buttons prominent (App Store + Play Store) throughout","Color Strategy":"Dark/light matching app store feel. Star ratings in gold. Screenshots with device frames.","Recommended Effects":"Device mockup rotations, screenshot slider, star rating animations, download button pulse","Conversion Optimization":"Show real screenshots. Include ratings (4.5+ stars). QR code for mobile. Platform-specific CTAs."},{"No":"16","Pattern Name":"FAQ/Documentation Landing","Keywords":"faq, documentation, help, support, questions, faq/documentation, knowledge base","Section Order":"1. Hero with search bar, 2. Popular categories, 3. FAQ accordion, 4. Contact/support CTA","Primary CTA Placement":"Search bar prominent + Contact CTA for unresolved questions","Color Strategy":"Clean, high readability. Minimal color. Category icons in brand color. Success green for resolved.","Recommended Effects":"Search autocomplete, smooth accordion open/close, category hover, helpful feedback buttons","Conversion Optimization":"Reduce support tickets. Track search analytics. Show related articles. Contact escalation path."},{"No":"17","Pattern Name":"Immersive/Interactive Experience","Keywords":"immersive, interactive, experience, 3d, animation, immersive/interactive experience","Section Order":"1. Full-screen interactive element, 2. Guided product tour, 3. Key benefits revealed, 4. CTA after completion","Primary CTA Placement":"After interaction complete + Skip option for impatient users","Color Strategy":"Immersive experience colors. Dark background for focus. Highlight interactive elements.","Recommended Effects":"WebGL, 3D interactions, gamification elements, progress indicators, reward animations","Conversion Optimization":"40% higher engagement. Performance trade-off. Provide skip option. Mobile fallback essential."},{"No":"18","Pattern Name":"Event/Conference Landing","Keywords":"event, conference, meetup, registration, schedule, hero-centric design, hero-centric","Section Order":"1. Hero (date/location/countdown), 2. Speakers grid, 3. Agenda/schedule, 4. Sponsors, 5. Register CTA","Primary CTA Placement":"Register CTA sticky + After speakers + Bottom","Color Strategy":"Urgency colors (countdown). Event branding. Speaker cards professional. Sponsor logos neutral.","Recommended Effects":"Countdown timer, speaker hover cards with bio, agenda tabs, early bird countdown","Conversion Optimization":"Early bird pricing with deadline. Social proof (past attendees). Speaker credibility. Multi-ticket discounts."},{"No":"19","Pattern Name":"Product Review/Ratings Focused","Keywords":"reviews, ratings, testimonials, social-proof, social-proof-focused, stars","Section Order":"1. Hero (product + aggregate rating), 2. Rating breakdown, 3. Individual reviews, 4. Buy/CTA","Primary CTA Placement":"After reviews summary + Buy button alongside reviews","Color Strategy":"Trust colors. Star ratings gold. Verified badge green. Review sentiment colors.","Recommended Effects":"Star fill animations, review filtering, helpful vote interactions, photo lightbox","Conversion Optimization":"User-generated content builds trust. Show verified purchases. Filter by rating. Respond to negative reviews."},{"No":"20","Pattern Name":"Community/Forum Landing","Keywords":"community, forum, social, members, discussion","Section Order":"1. Hero (community value prop), 2. Popular topics/categories, 3. Active members showcase, 4. Join CTA","Primary CTA Placement":"Join button prominent + After member showcase","Color Strategy":"Warm, welcoming. Member photos add humanity. Topic badges in brand colors. Activity indicators green.","Recommended Effects":"Member avatars animation, activity feed live updates, topic hover previews, join success celebration","Conversion Optimization":"Show active community (member count, posts today). Highlight benefits. Preview content. Easy onboarding."},{"No":"21","Pattern Name":"Before-After Transformation","Keywords":"before-after, transformation, results, comparison","Section Order":"1. Hero (problem state), 2. Transformation slider/comparison, 3. How it works, 4. Results CTA","Primary CTA Placement":"After transformation reveal + Bottom","Color Strategy":"Contrast: muted/grey (before) vs vibrant/colorful (after). Success green for results.","Recommended Effects":"Slider comparison interaction, before/after reveal animations, result counters, testimonial videos","Conversion Optimization":"Visual proof of value. 45% higher conversion. Real results. Specific metrics. Guarantee offer."},{"No":"22","Pattern Name":"Marketplace / Directory","Keywords":"marketplace, directory, search, listing","Section Order":"1. Hero (Search focused), 2. Categories, 3. Featured Listings, 4. Trust/Safety, 5. CTA (Become a host/seller)","Primary CTA Placement":"Hero Search Bar + Navbar 'List your item'","Color Strategy":"Search: High contrast. Categories: Visual icons. Trust: Blue/Green.","Recommended Effects":"Search autocomplete animation, map hover pins, card carousel","Conversion Optimization":"Search bar is the CTA. Reduce friction to search. Popular searches suggestions."},{"No":"23","Pattern Name":"Newsletter / Content First","Keywords":"newsletter, content, writer, blog, subscribe, minimal & direct, minimal-direct","Section Order":"1. Hero (Value Prop + Form), 2. Recent Issues/Archives, 3. Social Proof (Subscriber count), 4. About Author","Primary CTA Placement":"Hero inline form + Sticky header form","Color Strategy":"Minimalist. Paper-like background. Text focus. Accent color for Subscribe.","Recommended Effects":"Text highlight animations, typewriter effect, subtle fade-in","Conversion Optimization":"Single field form (Email only). Show 'Join X, 000 readers'. Read sample link."},{"No":"24","Pattern Name":"Webinar Registration","Keywords":"webinar, registration, event, training, live","Section Order":"1. Hero (Topic + Timer + Form), 2. What you'll learn, 3. Speaker Bio, 4. Urgency/Bonuses, 5. Form (again)","Primary CTA Placement":"Hero (Right side form) + Bottom anchor","Color Strategy":"Urgency: Red/Orange. Professional: Blue/Navy. Form: High contrast white.","Recommended Effects":"Countdown timer, speaker avatar float, urgent ticker","Conversion Optimization":"Limited seats logic. 'Live' indicator. Auto-fill timezone."},{"No":"25","Pattern Name":"Enterprise Gateway","Keywords":"enterprise, corporate, gateway, solutions, portal, trust, authority, trust & authority","Section Order":"1. Hero (Video/Mission), 2. Solutions by Industry, 3. Solutions by Role, 4. Client Logos, 5. Contact Sales","Primary CTA Placement":"Contact Sales (Primary) + Login (Secondary)","Color Strategy":"Corporate: Navy/Grey. High integrity. Conservative accents.","Recommended Effects":"Slow video background, logo carousel, tab switching for industries","Conversion Optimization":"Path selection (I am a...). Mega menu navigation. Trust signals prominent."},{"No":"26","Pattern Name":"Portfolio Grid","Keywords":"portfolio, grid, showcase, gallery, masonry, portfolio grid + visuals","Section Order":"1. Hero (Name/Role), 2. Project Grid (Masonry), 3. About/Philosophy, 4. Contact","Primary CTA Placement":"Project Card Hover + Footer Contact","Color Strategy":"Neutral background (let work shine). Text: Black/White. Accent: Minimal.","Recommended Effects":"Image lazy load reveal, hover overlay info, lightbox view","Conversion Optimization":"Visuals first. Filter by category. Fast loading essential."},{"No":"27","Pattern Name":"Horizontal Scroll Journey","Keywords":"horizontal, scroll, journey, gallery, storytelling, panoramic, storytelling-driven","Section Order":"1. Intro (Vertical), 2. The Journey (Horizontal Track), 3. Detail Reveal, 4. Vertical Footer","Primary CTA Placement":"Floating Sticky CTA or End of Horizontal Track","Color Strategy":"Continuous palette transition. Chapter colors. Progress bar #000000.","Recommended Effects":"Scroll-jacking (careful), parallax layers, horizontal slide, progress indicator","Conversion Optimization":"Immersive product discovery. High engagement. Keep navigation visible."},{"No":"28","Pattern Name":"Bento Grid Showcase","Keywords":"bento, grid, features, modular, apple-style, showcase, feature-rich showcase","Section Order":"1. Hero, 2. Bento Grid (Key Features), 3. Detail Cards, 4. Tech Specs, 5. CTA","Primary CTA Placement":"Floating Action Button or Bottom of Grid","Color Strategy":"Card backgrounds: #F5F5F7 or Glass. Icons: Vibrant brand colors. Text: Dark.","Recommended Effects":"Hover card scale (1.02), video inside cards, tilt effect, staggered reveal","Conversion Optimization":"Scannable value props. High information density without clutter. Mobile stack."},{"No":"29","Pattern Name":"Interactive 3D Configurator","Keywords":"3d, configurator, customizer, interactive, product, interactive product demo","Section Order":"1. Hero (Configurator), 2. Feature Highlight (synced), 3. Price/Specs, 4. Purchase","Primary CTA Placement":"Inside Configurator UI + Sticky Bottom Bar","Color Strategy":"Neutral studio background. Product: Realistic materials. UI: Minimal overlay.","Recommended Effects":"Real-time rendering, material swap animation, camera rotate/zoom, light reflection","Conversion Optimization":"Increases ownership feeling. 360 view reduces return rates. Direct add-to-cart."},{"No":"30","Pattern Name":"AI-Driven Dynamic Landing","Keywords":"ai, dynamic, personalized, adaptive, generative","Section Order":"1. Prompt/Input Hero, 2. Generated Result Preview, 3. How it Works, 4. Value Prop","Primary CTA Placement":"Input Field (Hero) + 'Try it' Buttons","Color Strategy":"Adaptive to user input. Dark mode for compute feel. Neon accents.","Recommended Effects":"Typing text effects, shimmering generation loaders, morphing layouts","Conversion Optimization":"Immediate value demonstration. 'Show, don't tell'. Low friction start."},{"No":"31","Pattern Name":"Feature-Rich Showcase","Keywords":"feature-rich, feature-rich showcase, features, showcase, product showcase","Section Order":"1. Hero (value prop), 2. Feature grid/cards (4-6), 3. Use cases or benefits, 4. Social proof or logos, 5. CTA","Primary CTA Placement":"Hero (sticky) + After features + Bottom","Color Strategy":"Brand primary + card bg #FAFAFA. Feature icons accent. CTA contrasting.","Recommended Effects":"Feature card hover lift, scroll reveal, icon micro-interactions","Conversion Optimization":"Clear feature hierarchy. One key message per card. Strong CTA repetition."},{"No":"32","Pattern Name":"Hero-Centric Design","Keywords":"hero-centric, hero-centric design, hero-first, hero above fold","Section Order":"1. Full-bleed Hero (headline + visual), 2. Single value prop strip, 3. Key benefit or proof, 4. Primary CTA","Primary CTA Placement":"Hero dominant (center/bottom) + Sticky nav CTA","Color Strategy":"Hero: High-impact visual. Minimal text. CTA 7:1 contrast.","Recommended Effects":"Hero parallax or video, CTA pulse on scroll, minimal chrome","Conversion Optimization":"One primary CTA. Hero is 60-80% above fold. Mobile: same hierarchy."},{"No":"33","Pattern Name":"Trust & Authority + Conversion","Keywords":"trust & authority, trust, authority, conversion, credibility, enterprise","Section Order":"1. Hero (mission/credibility), 2. Proof (logos, certs, stats), 3. Solution overview, 4. Clear CTA path","Primary CTA Placement":"Contact Sales / Get Quote (primary) + Nav","Color Strategy":"Navy/Grey corporate. Trust blue. Accent for CTA only.","Recommended Effects":"Logo carousel, stat counters, testimonial strip","Conversion Optimization":"Security badges. Case studies. Transparent pricing. Low-friction form."},{"No":"34","Pattern Name":"Real-Time / Operations Landing","Keywords":"real-time, real-time monitor, operations, dashboard, telemetry, live data","Section Order":"1. Hero (product + live preview or status), 2. Key metrics/indicators, 3. How it works, 4. CTA (Start trial / Contact)","Primary CTA Placement":"Primary CTA in nav + After metrics","Color Strategy":"Dark or neutral. Status colors (green/amber/red). Data-dense but scannable.","Recommended Effects":"Live data ticker, status pulse, minimal decoration","Conversion Optimization":"For ops/security/iot products. Demo or sandbox link. Trust signals."}]}}