{
  "name": "Enrichr Library",
  "updated": "2026-11-05",
  "license": "Free to use in personal and client projects during the preview. Final licence terms will be published here before any paid tier starts; ask before reselling the code as a collection.",
  "techniques": {
    "text-animation": "Text animation",
    "pointer-interaction": "Pointer interaction",
    "scroll-driven": "Scroll-driven",
    "parallax": "Parallax and depth",
    "3d-css": "CSS 3D",
    "webgl": "WebGL",
    "carousel": "Carousel",
    "stagger": "Stagger",
    "reveal": "Reveal and intro"
  },
  "sections": {
    "hero": "Hero",
    "text": "Text",
    "nav": "Navigation and lists",
    "gallery": "Gallery",
    "background": "Background",
    "band": "Band",
    "page": "Full page"
  },
  "elements": [
    {
      "id": "marquee-ticker",
      "title": "Marquee ticker",
      "summary": "Endless horizontal text that pauses on hover, with speed, gap and direction controls.",
      "intents": [
        "scrolling text banner",
        "ticker",
        "logo strip",
        "kinetic band",
        "infinite marquee"
      ],
      "techniques": [
        "text-animation"
      ],
      "stack": [
        "Vanilla JS",
        "CSS"
      ],
      "spec": "https://enrichr.dev/elements/marquee-ticker.json"
    },
    {
      "id": "split-text-reveal",
      "title": "Split text reveal",
      "summary": "A headline whose words rise out of a mask one after another when it scrolls into view.",
      "intents": [
        "kinetic headline",
        "headline reveal",
        "text reveal on scroll",
        "kinetic serif headline",
        "staggered words"
      ],
      "techniques": [
        "text-animation",
        "stagger"
      ],
      "stack": [
        "Vanilla JS",
        "CSS"
      ],
      "spec": "https://enrichr.dev/elements/split-text-reveal.json"
    },
    {
      "id": "letter-pop-intro",
      "title": "Letter pop intro",
      "summary": "Each letter overshoots its size and settles, staggered left to right, for a bold page intro.",
      "intents": [
        "intro animation",
        "title pop",
        "loader title",
        "bouncy headline",
        "hero word entrance"
      ],
      "techniques": [
        "text-animation",
        "stagger"
      ],
      "stack": [
        "Vanilla JS",
        "CSS"
      ],
      "spec": "https://enrichr.dev/elements/letter-pop-intro.json"
    },
    {
      "id": "rule-sweep-list",
      "title": "Rule sweep list",
      "summary": "A line sweeps across a menu row on hover or focus and exits through the opposite side.",
      "intents": [
        "menu hover",
        "nav hover effect",
        "list hover line",
        "underline sweep",
        "index list"
      ],
      "techniques": [
        "pointer-interaction"
      ],
      "stack": [
        "Vanilla JS",
        "CSS"
      ],
      "spec": "https://enrichr.dev/elements/rule-sweep-list.json"
    },
    {
      "id": "word-read-highlight",
      "title": "Word read highlight",
      "summary": "Words in a paragraph light up one by one as it scrolls through the viewport.",
      "intents": [
        "scroll text highlight",
        "read progress text",
        "scroll-linked paragraph",
        "manifesto section",
        "word by word reveal"
      ],
      "techniques": [
        "text-animation",
        "scroll-driven"
      ],
      "stack": [
        "Vanilla JS",
        "CSS"
      ],
      "spec": "https://enrichr.dev/elements/word-read-highlight.json"
    },
    {
      "id": "depth-parallax-card",
      "title": "Depth parallax card",
      "summary": "Layered shapes shift by different amounts as the pointer moves, drifting on touch screens.",
      "intents": [
        "mouse parallax",
        "depth effect hero",
        "layered hero",
        "pointer follow card",
        "floating shapes"
      ],
      "techniques": [
        "pointer-interaction",
        "parallax"
      ],
      "stack": [
        "Vanilla JS",
        "CSS"
      ],
      "spec": "https://enrichr.dev/elements/depth-parallax-card.json"
    },
    {
      "id": "ring-carousel",
      "title": "3D ring carousel",
      "summary": "Cards on a CSS 3D ring that rotates one step at a time, with buttons, arrow keys and autoplay.",
      "intents": [
        "3d carousel",
        "rotating gallery",
        "cylinder carousel",
        "product ring",
        "cinematic automotive gallery"
      ],
      "techniques": [
        "pointer-interaction",
        "3d-css",
        "carousel"
      ],
      "stack": [
        "Vanilla JS",
        "CSS 3D"
      ],
      "spec": "https://enrichr.dev/elements/ring-carousel.json"
    },
    {
      "id": "shader-gradient-background",
      "title": "Shader gradient background",
      "summary": "A slow, flowing noise gradient drawn with one WebGL fragment shader, with a CSS fallback.",
      "intents": [
        "shader background",
        "liquid gradient hero",
        "webgl gradient",
        "animated mesh gradient",
        "fluid background"
      ],
      "techniques": [
        "webgl"
      ],
      "stack": [
        "Vanilla JS",
        "WebGL"
      ],
      "spec": "https://enrichr.dev/elements/shader-gradient-background.json"
    },
    {
      "id": "scroll-velocity-skew",
      "title": "Scroll velocity skew",
      "summary": "Text that leans and splits into two colour fringes in proportion to how fast the page scrolls.",
      "intents": [
        "scroll speed effect",
        "kinetic headline on scroll",
        "rgb split text",
        "velocity skew",
        "glitch scroll text"
      ],
      "techniques": [
        "scroll-driven",
        "text-animation"
      ],
      "stack": [
        "Vanilla JS",
        "CSS"
      ],
      "spec": "https://enrichr.dev/elements/scroll-velocity-skew.json"
    },
    {
      "id": "circle-reveal-intro",
      "title": "Circle reveal intro",
      "summary": "A gate button opens a circle from the click point that grows to reveal the page.",
      "intents": [
        "page intro",
        "enter button reveal",
        "circle transition",
        "clip path reveal",
        "loader reveal"
      ],
      "techniques": [
        "reveal"
      ],
      "stack": [
        "Vanilla JS",
        "CSS"
      ],
      "spec": "https://enrichr.dev/elements/circle-reveal-intro.json"
    },
    {
      "id": "scroll-spring-heading",
      "title": "Scroll spring heading",
      "summary": "An oversized heading slides sideways with scroll progress through a spring, lagging and settling.",
      "intents": [
        "oversized heading scroll",
        "horizontal text on scroll",
        "spring scroll text",
        "big type parallax",
        "kinetic heading"
      ],
      "techniques": [
        "scroll-driven",
        "text-animation"
      ],
      "stack": [
        "Vanilla JS",
        "CSS"
      ],
      "spec": "https://enrichr.dev/elements/scroll-spring-heading.json"
    },
    {
      "id": "blend-mode-cursor",
      "title": "Blend-mode cursor",
      "summary": "A custom cursor dot that inverts what is beneath it and grows over links, for fine pointers only.",
      "intents": [
        "custom cursor",
        "cursor follower",
        "mix blend mode cursor",
        "inverted cursor",
        "hover cursor grow"
      ],
      "techniques": [
        "pointer-interaction"
      ],
      "stack": [
        "Vanilla JS",
        "CSS"
      ],
      "spec": "https://enrichr.dev/elements/blend-mode-cursor.json"
    },
    {
      "id": "scrub-stats-band",
      "title": "Scrubbed stats band",
      "summary": "A framed band that grows to full width while its numbers count up, tied to scroll position and reversible.",
      "intents": [
        "count up numbers on scroll",
        "stats section",
        "animated statistics",
        "full bleed frame grow",
        "metrics band"
      ],
      "techniques": [
        "scroll-driven"
      ],
      "stack": [
        "Vanilla JS",
        "CSS"
      ],
      "spec": "https://enrichr.dev/elements/scrub-stats-band.json"
    },
    {
      "id": "mask-shape-sections",
      "title": "Mask shape sections",
      "summary": "The same image revealed through a circle, a diamond and a band as each section scrolls into view.",
      "intents": [
        "image mask reveal",
        "clip path scroll",
        "shaped image sections",
        "diamond circle mask",
        "scroll image reveal"
      ],
      "techniques": [
        "scroll-driven",
        "reveal"
      ],
      "stack": [
        "Vanilla JS",
        "CSS"
      ],
      "spec": "https://enrichr.dev/elements/mask-shape-sections.json"
    },
    {
      "id": "hover-font-variants",
      "title": "Hover font variants",
      "summary": "A text index whose rows flip through serif, mono, outline, wide and italic styles while hovered or focused.",
      "intents": [
        "menu hover font change",
        "project index hover",
        "text list hover effect",
        "font swap on hover",
        "typographic menu"
      ],
      "techniques": [
        "pointer-interaction",
        "text-animation"
      ],
      "stack": [
        "Vanilla JS",
        "CSS"
      ],
      "spec": "https://enrichr.dev/elements/hover-font-variants.json"
    },
    {
      "id": "grid-overlay-explainer",
      "title": "Grid overlay explainer",
      "summary": "Column and gutter bands fade in over a live layout as it scrolls into view, to show how the grid is built.",
      "intents": [
        "show the grid",
        "layout grid overlay",
        "column gutter visualisation",
        "design system grid explainer",
        "teaching layout"
      ],
      "techniques": [
        "scroll-driven"
      ],
      "stack": [
        "Vanilla JS",
        "CSS"
      ],
      "spec": "https://enrichr.dev/elements/grid-overlay-explainer.json"
    },
    {
      "id": "depth-map-shader",
      "title": "Depth map shader",
      "summary": "A WebGL shader that shifts an image by its own depth and the pointer, so near parts move more than far ones.",
      "intents": [
        "depth map parallax",
        "3d photo effect",
        "image depth hover",
        "2.5d image",
        "pointer parallax image shader"
      ],
      "techniques": [
        "webgl",
        "pointer-interaction",
        "parallax"
      ],
      "stack": [
        "Vanilla JS",
        "WebGL"
      ],
      "spec": "https://enrichr.dev/elements/depth-map-shader.json"
    },
    {
      "id": "scroll-camera-landscape",
      "title": "Scroll camera landscape",
      "summary": "A procedural low-poly mountain range that the camera flies through as you scroll, with a sun that moves from dawn to dusk.",
      "intents": [
        "scroll controlled 3d camera",
        "mountain landscape hero",
        "cinematic scroll 3d",
        "low poly terrain",
        "fly through scene on scroll"
      ],
      "techniques": [
        "webgl",
        "scroll-driven"
      ],
      "stack": [
        "Vanilla JS",
        "WebGL 2"
      ],
      "spec": "https://enrichr.dev/elements/scroll-camera-landscape.json"
    }
  ],
  "templates": [
    {
      "id": "studio-portfolio-hero",
      "title": "Studio portfolio hero",
      "summary": "A bold intro for a design studio or freelancer: popping title, running ticker and an indexed work list.",
      "intents": [
        "portfolio hero",
        "designer portfolio",
        "agency intro",
        "studio landing"
      ],
      "spec": "https://enrichr.dev/templates/studio-portfolio-hero.json"
    },
    {
      "id": "saas-motion-landing",
      "title": "SaaS motion landing",
      "summary": "A product landing opener with a flowing shader backdrop, a rising headline and a scroll-read manifesto.",
      "intents": [
        "saas landing",
        "product hero shader",
        "startup landing page",
        "ai product homepage"
      ],
      "spec": "https://enrichr.dev/templates/saas-motion-landing.json"
    },
    {
      "id": "automotive-showcase",
      "title": "Automotive showcase",
      "summary": "A dark, cinematic opener: a scroll-driven 3D mountain flyover, a rotating card ring, a headline band and a read-along statement.",
      "intents": [
        "automotive website",
        "car showcase",
        "dark cinematic landing",
        "vehicle gallery hero"
      ],
      "spec": "https://enrichr.dev/templates/automotive-showcase.json"
    },
    {
      "id": "editorial-agency-page",
      "title": "Editorial agency page",
      "summary": "Calm, text-led opener for an agency or publication: reading highlight, rising headline, hover-indexed services.",
      "intents": [
        "agency website",
        "editorial layout",
        "magazine landing",
        "text-led homepage"
      ],
      "spec": "https://enrichr.dev/templates/editorial-agency-page.json"
    },
    {
      "id": "product-3d-showcase",
      "title": "Product showcase",
      "summary": "A product opener with layered depth cards, a flowing backdrop and a rotating ring of variants.",
      "intents": [
        "product page hero",
        "hardware launch page",
        "product variants gallery",
        "launch landing"
      ],
      "spec": "https://enrichr.dev/templates/product-3d-showcase.json"
    },
    {
      "id": "creative-one-pager",
      "title": "Creative one-pager",
      "summary": "A playful single-screen intro: popping title, floating depth shapes and a fast ticker.",
      "intents": [
        "creative landing page",
        "event site",
        "one page portfolio",
        "launch teaser"
      ],
      "spec": "https://enrichr.dev/templates/creative-one-pager.json"
    }
  ]
}