{
    "ok": true,
    "count": 36,
    "categories": [
        "Scroll reveals",
        "Micro-interactions",
        "Navigation",
        "Backgrounds",
        "Text motion",
        "Components",
        "Media & layout",
        "Library starters"
    ],
    "libraries": [
        {
            "name": "Site Commander recipes",
            "license": "CC0-style snippets",
            "url": "/effects#native-recipes"
        },
        {
            "name": "AOS",
            "license": "MIT",
            "url": "https://github.com/michalsnik/aos"
        },
        {
            "name": "Motion",
            "license": "MIT",
            "url": "https://motion.dev"
        },
        {
            "name": "Lenis",
            "license": "MIT",
            "url": "https://github.com/darkroomengineering/lenis"
        },
        {
            "name": "VanillaTilt",
            "license": "MIT",
            "url": "https://github.com/micku7zu/vanilla-tilt.js"
        },
        {
            "name": "Embla Carousel",
            "license": "MIT",
            "url": "https://www.embla-carousel.com/"
        },
        {
            "name": "Splitting.js",
            "license": "MIT",
            "url": "https://splitting.js.org/"
        },
        {
            "name": "TypewriterJS",
            "license": "MIT",
            "url": "https://github.com/tameemsafi/typewriterjs"
        },
        {
            "name": "CountUp.js",
            "license": "MIT",
            "url": "https://inorganik.github.io/countUp.js/"
        }
    ],
    "effects": [
        {
            "id": "fade-up-reveal",
            "name": "Fade-up reveal",
            "category": "Scroll reveals",
            "library": "Site Commander recipes",
            "license": "CC0-style snippets",
            "description": "A lightweight reveal that respects reduced motion and needs no JavaScript library.",
            "best_for": "Landing page sections, feature lists, and editorial content.",
            "tags": [
                "CSS",
                "IntersectionObserver",
                "accessible"
            ],
            "preview": "reveal",
            "install": "Paste the CSS and the small observer script. Add data-sc-effect=\"fade-up\" to elements you want to reveal."
        },
        {
            "id": "staggered-list",
            "name": "Staggered list",
            "category": "Scroll reveals",
            "library": "Site Commander recipes",
            "license": "CC0-style snippets",
            "description": "A calm sequence for cards or list items, with the delay controlled by a CSS custom property.",
            "best_for": "Service lists, pricing rows, FAQs, and compact card collections.",
            "tags": [
                "CSS",
                "no dependency",
                "reusable"
            ],
            "preview": "stagger",
            "install": "Add data-sc-effect=\"stagger\" to the parent and data-sc-stagger-item to each child."
        },
        {
            "id": "spotlight-hover",
            "name": "Spotlight hover",
            "category": "Micro-interactions",
            "library": "Site Commander recipes",
            "license": "CC0-style snippets",
            "description": "A pointer-following radial highlight that adds depth without a heavy visual layer.",
            "best_for": "Feature cards, callouts, and dark surfaces with strong focus states.",
            "tags": [
                "CSS variables",
                "pointer",
                "progressive"
            ],
            "preview": "spotlight",
            "install": "Add data-sc-effect=\"spotlight\" to the cards. The effect does nothing on touch-only devices."
        },
        {
            "id": "magnetic-button",
            "name": "Magnetic button",
            "category": "Micro-interactions",
            "library": "Site Commander recipes",
            "license": "CC0-style snippets",
            "description": "A restrained pointer response for a primary CTA that remains keyboard and touch friendly.",
            "best_for": "One primary call to action per viewport.",
            "tags": [
                "CSS transform",
                "pointer",
                "CTA"
            ],
            "preview": "magnetic",
            "install": "Add data-sc-effect=\"magnetic\" to one button or link. Keep the movement small so the control stays readable."
        },
        {
            "id": "scroll-progress",
            "name": "Scroll progress line",
            "category": "Navigation",
            "library": "Site Commander recipes",
            "license": "CC0-style snippets",
            "description": "A single fixed progress line that gives long-form pages a clear sense of place.",
            "best_for": "Guides, documentation, case studies, and long landing pages.",
            "tags": [
                "CSS",
                "scroll",
                "low overhead"
            ],
            "preview": "progress",
            "install": "Place the element near the top of the body. The script only updates one transform value per scroll frame."
        },
        {
            "id": "cursor-glow",
            "name": "Cursor glow",
            "category": "Backgrounds",
            "library": "Site Commander recipes",
            "license": "CC0-style snippets",
            "description": "A soft ambient glow for a hero or dark section that never blocks content or clicks.",
            "best_for": "Dark hero sections, product previews, and creative portfolios.",
            "tags": [
                "CSS variables",
                "pointer",
                "decorative"
            ],
            "preview": "glow",
            "install": "Add data-sc-effect=\"cursor-glow\" to a bounded section. Keep a solid fallback color underneath."
        },
        {
            "id": "gradient-mesh",
            "name": "Animated gradient mesh",
            "category": "Backgrounds",
            "library": "Site Commander recipes",
            "license": "CC0-style snippets",
            "description": "A low-frequency CSS background motion that gives a hero a little life without adding an image asset.",
            "best_for": "Hero backgrounds, signup panels, and product announcements.",
            "tags": [
                "CSS only",
                "background",
                "reduced motion"
            ],
            "preview": "mesh",
            "install": "Use on a pseudo-element behind content and keep the opacity low. Disable animation for reduced-motion users."
        },
        {
            "id": "split-text-reveal",
            "name": "Split text reveal",
            "category": "Text motion",
            "library": "Site Commander recipes",
            "license": "CC0-style snippets",
            "description": "A small line-by-line headline reveal that avoids a runtime text-splitting dependency.",
            "best_for": "One short hero heading or section title, not body copy.",
            "tags": [
                "CSS",
                "text",
                "manual markup"
            ],
            "preview": "text",
            "install": "Wrap each intended line in data-sc-line. Keep the original text accessible and avoid splitting long paragraphs."
        },
        {
            "id": "hover-lift-card",
            "name": "Hover lift card",
            "category": "Micro-interactions",
            "library": "Site Commander recipes",
            "license": "CC0-style snippets",
            "description": "A subtle elevation cue for clickable cards that keeps the hit area stable and the focus state visible.",
            "best_for": "Feature cards, resource links, and product tiles.",
            "tags": [
                "CSS",
                "hover",
                "focus-visible"
            ],
            "preview": "lift",
            "install": "Add data-sc-effect=\"hover-lift\" to the clickable card and keep the focus-visible outline intact."
        },
        {
            "id": "button-ripple",
            "name": "Button ripple",
            "category": "Micro-interactions",
            "library": "Site Commander recipes",
            "license": "CC0-style snippets",
            "description": "A contained click ripple that confirms activation without replacing the button label or focus ring.",
            "best_for": "Primary actions, filters, and small in-page controls.",
            "tags": [
                "CSS",
                "JavaScript",
                "click"
            ],
            "preview": "ripple",
            "install": "Add data-sc-effect=\"ripple\" to a button and keep overflow hidden on the control."
        },
        {
            "id": "accordion-disclosure",
            "name": "Accordion disclosure",
            "category": "Components",
            "library": "Site Commander recipes",
            "license": "CC0-style snippets",
            "description": "An accessible disclosure pattern with native button semantics and a restrained height transition.",
            "best_for": "FAQs, feature details, and compact settings panels.",
            "tags": [
                "HTML",
                "CSS",
                "ARIA"
            ],
            "preview": "accordion",
            "install": "Use a real button with aria-expanded and a related region; never make the whole card the only disclosure control."
        },
        {
            "id": "tooltip-label",
            "name": "Tooltip label",
            "category": "Components",
            "library": "Site Commander recipes",
            "license": "CC0-style snippets",
            "description": "A compact contextual label for icon-only controls, shown on hover and keyboard focus.",
            "best_for": "Toolbar icons and unfamiliar compact actions.",
            "tags": [
                "CSS",
                "focus",
                "tooltip"
            ],
            "preview": "tooltip",
            "install": "Use a visible text alternative whenever possible; add data-sc-tooltip only when the control is genuinely compact."
        },
        {
            "id": "nav-underline",
            "name": "Active nav underline",
            "category": "Navigation",
            "library": "Site Commander recipes",
            "license": "CC0-style snippets",
            "description": "A sliding active indicator that makes the current navigation context obvious.",
            "best_for": "Small tab bars, section navigation, and product navs.",
            "tags": [
                "CSS",
                "navigation",
                "active state"
            ],
            "preview": "underline",
            "install": "Keep aria-current on the active link and use the indicator as a visual enhancement, not the only state cue."
        },
        {
            "id": "tabs-switcher",
            "name": "Tabs switcher",
            "category": "Components",
            "library": "Site Commander recipes",
            "license": "CC0-style snippets",
            "description": "A keyboard-friendly tab switcher with real selected state and a small content transition.",
            "best_for": "Pricing views, product details, and compact comparisons.",
            "tags": [
                "HTML",
                "JavaScript",
                "ARIA"
            ],
            "preview": "tabs",
            "install": "Use a tablist, buttons, aria-selected, and tabpanels; add arrow-key navigation when the tab set is more than two items."
        },
        {
            "id": "horizontal-scroll",
            "name": "Horizontal scroll cue",
            "category": "Media & layout",
            "library": "Site Commander recipes",
            "license": "CC0-style snippets",
            "description": "A touch-friendly horizontal rail with snap points and a visible cue that more content is available.",
            "best_for": "Mobile card rails, logos, and compact comparison rows.",
            "tags": [
                "CSS",
                "touch",
                "scroll-snap"
            ],
            "preview": "carousel",
            "install": "Use overflow-x auto, scroll-snap-type, and a visible next-card cue; do not trap the page scroll."
        },
        {
            "id": "count-up-number",
            "name": "Count-up number",
            "category": "Text motion",
            "library": "Site Commander recipes",
            "license": "CC0-style snippets",
            "description": "A short numeric transition that gives a metric a sense of arrival without hiding the final value.",
            "best_for": "Stats, milestones, and dashboard highlights.",
            "tags": [
                "JavaScript",
                "metrics",
                "replayable"
            ],
            "preview": "count",
            "install": "Keep the final value in the HTML and animate only once when the metric enters the viewport."
        },
        {
            "id": "typewriter-text",
            "name": "Typewriter text",
            "category": "Text motion",
            "library": "Site Commander recipes",
            "license": "CC0-style snippets",
            "description": "A short, decorative typewriter cue for a headline or status line, with the full copy preserved for assistive technology.",
            "best_for": "Hero labels, product status, and short rotating messages.",
            "tags": [
                "JavaScript",
                "text",
                "decorative"
            ],
            "preview": "typewriter",
            "install": "Keep the complete sentence in an accessible node and use the animated span only as a visual layer."
        },
        {
            "id": "marquee-strip",
            "name": "Pauseable marquee",
            "category": "Text motion",
            "library": "Site Commander recipes",
            "license": "CC0-style snippets",
            "description": "A low-priority looping strip with a pause control, suitable for decorative keywords or partner labels.",
            "best_for": "Brand language, keywords, and non-essential decorative content.",
            "tags": [
                "CSS",
                "loop",
                "pause control"
            ],
            "preview": "marquee",
            "install": "Duplicate the content for a seamless loop and always provide a pause button for continuously moving content."
        },
        {
            "id": "shimmer-skeleton",
            "name": "Shimmer skeleton",
            "category": "Backgrounds",
            "library": "Site Commander recipes",
            "license": "CC0-style snippets",
            "description": "A restrained loading placeholder that communicates waiting without pretending content has arrived.",
            "best_for": "Async cards, search results, and initial content loading.",
            "tags": [
                "CSS",
                "loading",
                "reduced motion"
            ],
            "preview": "shimmer",
            "install": "Use only while content is loading, keep aria-busy on the region, and remove the skeleton when real content arrives."
        },
        {
            "id": "blob-morph",
            "name": "Blob morph background",
            "category": "Backgrounds",
            "library": "Site Commander recipes",
            "license": "CC0-style snippets",
            "description": "A soft organic background shape for a creative hero, kept behind content and disabled for reduced motion.",
            "best_for": "Creative portfolios, campaigns, and editorial hero panels.",
            "tags": [
                "CSS",
                "background",
                "decorative"
            ],
            "preview": "blob",
            "install": "Keep the blob decorative, place it behind content with isolation, and never use it as the only contrast surface."
        },
        {
            "id": "underline-sweep",
            "name": "Underline sweep",
            "category": "Text motion",
            "library": "Site Commander recipes",
            "license": "CC0-style snippets",
            "description": "A bright underline that draws attention to a link while leaving the text and focus state intact.",
            "best_for": "Editorial links, calls to action, and important inline references.",
            "tags": [
                "CSS",
                "links",
                "focus-visible"
            ],
            "preview": "sweep",
            "install": "Apply to a real anchor and preserve the default focus indicator; the sweep is an enhancement only."
        },
        {
            "id": "image-zoom",
            "name": "Image zoom frame",
            "category": "Media & layout",
            "library": "Site Commander recipes",
            "license": "CC0-style snippets",
            "description": "A restrained image scale on hover that keeps the crop contained and does not alter the layout.",
            "best_for": "Editorial cards, product galleries, and case-study thumbnails.",
            "tags": [
                "CSS",
                "image",
                "hover"
            ],
            "preview": "zoom",
            "install": "Put overflow hidden on the media frame, keep alt text on the image, and avoid zooming text or controls."
        },
        {
            "id": "parallax-layer",
            "name": "Pointer parallax layer",
            "category": "Media & layout",
            "library": "Site Commander recipes",
            "license": "CC0-style snippets",
            "description": "A small pointer-based depth shift for a decorative layer, with touch and reduced-motion fallbacks.",
            "best_for": "Hero illustrations, product mockups, and one focal visual.",
            "tags": [
                "JavaScript",
                "pointer",
                "progressive"
            ],
            "preview": "parallax",
            "install": "Apply the transform to a decorative child, gate it behind pointer capability, and keep the content readable without it."
        },
        {
            "id": "toast-notification",
            "name": "Toast notification",
            "category": "Components",
            "library": "Site Commander recipes",
            "license": "CC0-style snippets",
            "description": "A compact status message for a completed action, with live-region semantics and an explicit close affordance.",
            "best_for": "Save confirmations, undo actions, and short non-blocking status updates.",
            "tags": [
                "JavaScript",
                "ARIA",
                "status"
            ],
            "preview": "toast",
            "install": "Use role=status for non-urgent updates and do not use a toast for errors that require user action."
        },
        {
            "id": "toggle-switch",
            "name": "Toggle switch",
            "category": "Components",
            "library": "Site Commander recipes",
            "license": "CC0-style snippets",
            "description": "A clear on/off control with a native checkbox underneath the visual switch.",
            "best_for": "Preferences, filters, and optional product features.",
            "tags": [
                "HTML",
                "CSS",
                "form control"
            ],
            "preview": "toggle",
            "install": "Use a real checkbox and label; style the track and thumb without replacing the control semantics."
        },
        {
            "id": "timeline-draw",
            "name": "Timeline draw",
            "category": "Scroll reveals",
            "library": "Site Commander recipes",
            "license": "CC0-style snippets",
            "description": "A vertical progress line that draws as milestones enter the viewport.",
            "best_for": "Process pages, roadmaps, case studies, and onboarding steps.",
            "tags": [
                "IntersectionObserver",
                "CSS",
                "timeline"
            ],
            "preview": "timeline",
            "install": "Observe each milestone and update one CSS custom property for the line; keep each milestone readable without animation."
        },
        {
            "id": "card-flip",
            "name": "Card flip reveal",
            "category": "Micro-interactions",
            "library": "Site Commander recipes",
            "license": "CC0-style snippets",
            "description": "A click-to-reveal two-sided card that works with keyboard focus and keeps both sides in the DOM.",
            "best_for": "Flashcards, compact product facts, and playful portfolio details.",
            "tags": [
                "CSS",
                "click",
                "keyboard"
            ],
            "preview": "flip",
            "install": "Use a real button or button-like control to toggle the state; do not hide essential information behind a hover-only flip."
        },
        {
            "id": "scroll-snap-gallery",
            "name": "Scroll-snap gallery",
            "category": "Media & layout",
            "library": "Site Commander recipes",
            "license": "CC0-style snippets",
            "description": "A small gallery with native scroll snapping and button controls for users who prefer explicit navigation.",
            "best_for": "Screenshots, testimonials, and visual portfolios.",
            "tags": [
                "CSS",
                "scroll-snap",
                "gallery"
            ],
            "preview": "gallery",
            "install": "Keep native swipe scrolling enabled and make previous/next controls optional enhancements."
        },
        {
            "id": "aos-fade-up",
            "name": "AOS fade-up starter",
            "category": "Library starters",
            "library": "AOS",
            "license": "MIT",
            "description": "A minimal, version-pinned Animate On Scroll setup for teams that want a maintained preset library.",
            "best_for": "Sites with many reveal variants and a build or CDN workflow already in place.",
            "tags": [
                "AOS",
                "CDN",
                "scroll"
            ],
            "preview": "aos",
            "install": "Load AOS CSS and JS, then initialize it once after the document is ready."
        },
        {
            "id": "motion-spring",
            "name": "Motion spring entrance",
            "category": "Library starters",
            "library": "Motion",
            "license": "MIT",
            "description": "A small modern Motion starter for a springy entrance when CSS transitions need more control.",
            "best_for": "Interactive product surfaces and high-intent controls.",
            "tags": [
                "Motion",
                "ES module",
                "spring"
            ],
            "preview": "spring",
            "install": "Import Motion from the pinned jsDelivr module URL or install the motion package in a build step."
        },
        {
            "id": "lenis-smooth-scroll",
            "name": "Lenis smooth scroll",
            "category": "Library starters",
            "library": "Lenis",
            "license": "MIT",
            "description": "A smooth-scroll baseline for sites where scroll-linked motion is part of the interaction model.",
            "best_for": "Editorial pages, portfolios, and scroll-driven experiences; not every content site needs it.",
            "tags": [
                "Lenis",
                "scroll",
                "ES module"
            ],
            "preview": "scroll",
            "install": "Use a pinned version and verify native anchor links, keyboard scrolling, and reduced-motion behavior before shipping."
        },
        {
            "id": "embla-carousel",
            "name": "Embla carousel starter",
            "category": "Library starters",
            "library": "Embla Carousel",
            "license": "MIT",
            "description": "A small, accessible carousel baseline with touch gestures and explicit previous/next controls.",
            "best_for": "Product showcases, testimonials, and responsive visual rails.",
            "tags": [
                "Embla",
                "carousel",
                "touch"
            ],
            "preview": "embla",
            "install": "Install the pinned package in your build or use its official browser bundle, then keep buttons and focus behavior intact."
        },
        {
            "id": "splitting-text",
            "name": "Splitting.js text starter",
            "category": "Library starters",
            "library": "Splitting.js",
            "license": "MIT",
            "description": "A character or word splitting starter for expressive headings that need precise sequencing.",
            "best_for": "Short hero headlines and editorial section titles.",
            "tags": [
                "Splitting.js",
                "text",
                "CSS"
            ],
            "preview": "splitting",
            "install": "Split only short text, preserve the original accessible reading order, and keep reduced motion as the default fallback."
        },
        {
            "id": "typed-text",
            "name": "TypewriterJS starter",
            "category": "Library starters",
            "library": "TypewriterJS",
            "license": "MIT",
            "description": "A pinned typewriter starter for short rotating phrases, with an accessible static fallback.",
            "best_for": "Short hero labels and product positioning statements.",
            "tags": [
                "TypewriterJS",
                "text",
                "loop"
            ],
            "preview": "typed",
            "install": "Keep the full phrase in an aria-label or visually hidden fallback and avoid typing effects for essential instructions."
        },
        {
            "id": "countup-metric",
            "name": "CountUp.js metric starter",
            "category": "Library starters",
            "library": "CountUp.js",
            "license": "MIT",
            "description": "A lightweight number animation starter for metrics that enter the viewport.",
            "best_for": "Impact stats, dashboards, and campaign outcomes.",
            "tags": [
                "CountUp.js",
                "metrics",
                "scroll"
            ],
            "preview": "countup",
            "install": "Keep the final number available in the markup and disable the animation when reduced motion is requested."
        },
        {
            "id": "vanilla-tilt-card",
            "name": "VanillaTilt card",
            "category": "Library starters",
            "library": "VanillaTilt",
            "license": "MIT",
            "description": "A restrained 3D tilt starter for one featured card or product preview, with glare kept optional.",
            "best_for": "Product mockups and one featured visual; avoid applying it to every card.",
            "tags": [
                "VanillaTilt",
                "3D",
                "progressive"
            ],
            "preview": "tilt",
            "install": "Load the pinned browser build and initialize only the elements that benefit from depth."
        }
    ]
}