PocketPapi

Developer library · 68 free recipes

Effects, ready to ship.

Free motion recipes for real websites. Browse practical CSS and JavaScript patterns, copy a focused implementation, or let an LLM fetch the exact effect through the PocketPapi API or MCP.

Browse library How to advise an LLM
const effect = "fade-up-reveal";
await ship(effect);
All effectsScroll revealsMicro-interactionsNavigationBackgroundsText motionComponentsMedia & layoutScroll-drivenAdvanced interactionsForms & feedback3D & perspectiveLibrary starters
Featured recipeLibrary starters

AOS fade-up starter

A minimal, version-pinned Animate On Scroll setup for teams that want a maintained preset library.

AOSCDNscroll

The foundation

Native recipes

Small, composable patterns you can paste into a plain HTML site, a CMS, or a generated staging build.

Bring a library when it earns its weight

Free library starters

Version-pinned starting points for open-source libraries. Review the license and performance tradeoff before adding another dependency.

Interactive preview
AOSMIT

AOS fade-up starter

A minimal, version-pinned Animate On Scroll setup for teams that want a maintained preset library.

Docs 
<link rel="stylesheet" href="https://unpkg.com/aos@2.3.4/dist/aos.css">
<script src="https://unpkg.com/aos@2.3.4/dist/aos.js"></script>
<script>
  document.querySelectorAll('[data-sc-effect="aos-fade-up"]').forEach((node) => node.setAttribute('data-aos', 'fade-up'));
  AOS.init({ once: true, duration: 650, offset: 80, disable: window.matchMedia('(prefers-reduced-motion: reduce)').matches });
</script>

<article data-aos="fade-up">Your content</article>
Interactive preview
MotionMIT

Motion spring entrance

A small modern Motion starter for a springy entrance when CSS transitions need more control.

Docs 
<div data-sc-effect="motion-spring">Your content</div>
<script type="module">
  import { animate } from 'https://cdn.jsdelivr.net/npm/motion@12.23.24/+esm';
  const node = document.querySelector('[data-sc-effect="motion-spring"]');
  const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  animate(node, { opacity: [0, 1], y: [24, 0] }, reduceMotion ? { duration: 0 } : { type: 'spring', stiffness: 260, damping: 24 });
</script>
Interactive preview
LenisMIT

Lenis smooth scroll

A smooth-scroll baseline for sites where scroll-linked motion is part of the interaction model.

Docs 
<script type="module">
  import Lenis from 'https://cdn.jsdelivr.net/npm/lenis@1.3.25/+esm';
  const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  const wrapper = document.querySelector('[data-sc-effect="lenis-smooth-scroll"]') || window;
  const lenis = new Lenis({ wrapper, autoRaf: !reduceMotion, anchors: true });
  window.siteCommanderLenis = lenis;
  if (reduceMotion) lenis.stop();
  window.matchMedia('(prefers-reduced-motion: reduce)').addEventListener('change', ({matches}) => {
    if (matches) lenis.stop(); else lenis.start();
  });
</script>
Interactive preview
Embla CarouselMIT

Embla carousel starter

A small, accessible carousel baseline with touch gestures and explicit previous/next controls.

Docs
Interactive preview
Splitting.jsMIT

Splitting.js text starter

A character or word splitting starter for expressive headings that need precise sequencing.

Docs 
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/splitting@1.1.0/dist/splitting.css">
<script src="https://cdn.jsdelivr.net/npm/splitting@1.1.0/dist/splitting.min.js"></script>
<h2 data-sc-effect="splitting-text" data-splitting>Make it move</h2>
<style>[data-sc-effect="splitting-text"] .char { display: inline-block; opacity: 0; transform: translateY(.7em); animation: sc-split-in 650ms ease forwards; animation-delay: calc(var(--char-index, 0) * 60ms); } @keyframes sc-split-in { to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { [data-sc-effect="splitting-text"] .char { animation: none; opacity: 1; transform: none; } }</style>
<script>Splitting({ target: document.querySelector('[data-sc-effect="splitting-text"]'), by: 'chars' });</script>
Interactive preview
TypewriterJSMIT

TypewriterJS starter

A pinned typewriter starter for short rotating phrases, with an accessible static fallback.

Docs 
<span id="typed" data-sc-effect="typed-text" aria-label="Build with clarity">Build with clarity</span>
<script src="https://unpkg.com/typewriter-effect@2.22.0/dist/core.js"></script>
<script>
  const node = document.querySelector('[data-sc-effect="typed-text"]');
  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) node.textContent = 'Build with clarity';
  else {
    const typewriter = new Typewriter(node, { loop: true, delay: 48 });
    typewriter.typeString('Build with clarity').pauseFor(1200).deleteAll().typeString('Ship with confidence').start();
  }
</script>
Interactive preview
CountUp.jsMIT

CountUp.js metric starter

A lightweight number animation starter for metrics that enter the viewport.

Docs 
<span id="metric" data-sc-effect="countup-metric" data-value="240">240</span>
<script type="module">
  import { CountUp } from 'https://cdn.jsdelivr.net/npm/countup.js@2.8.0/+esm';
  const node = document.querySelector('[data-sc-effect="countup-metric"]');
  if (!matchMedia('(prefers-reduced-motion: reduce)').matches) new CountUp(node, Number(node.dataset.value)).start();
</script>
Interactive preview
VanillaTiltMIT

VanillaTilt card

A restrained 3D tilt starter for one featured card or product preview, with glare kept optional.

Docs 
<script src="https://cdn.jsdelivr.net/npm/vanilla-tilt@1.8.1/dist/vanilla-tilt.min.js"></script>
<div data-sc-effect="vanilla-tilt">Featured visual</div>
<script>
  if (!window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
    VanillaTilt.init(document.querySelectorAll('[data-sc-effect="vanilla-tilt"]'), {
      max: 7, speed: 500, scale: 1.015, glare: true, 'max-glare': .14
    });
  }
</script>

For GPTs and other agents

Tell the LLM how to use the library.

Give the model a clear selection loop. It should discover, fetch, compose, then explain where it placed the effect instead of inventing a new dependency.

Recommended instruction

Use this in a system or developer prompt when the model can access the REST API or MCP.

When a user asks for website motion or an interaction effect:
1. Search PocketPapi’s effects catalog before writing a new animation.
2. Prefer a native recipe when it meets the request; use a free MIT library only when it materially reduces complexity.
3. Fetch the chosen effect by effect_id and inspect its reduced-motion and accessibility notes.
4. Read `studio_compatibility` before choosing an effect. `available=true` means Site Studio can stage it on one unique existing element; `available=false` means it is copy-code/MCP composition only and needs markup or reviewed dependency setup.
5. For a connected site, use `sitecommander_site_studio_media` with `media_type=video` to find an approved MP4/WebM and `media_type=poster` for an optional still image, then call `sitecommander_site_studio_effect_apply` with the exact staged page, unique selector, and chosen animation settings. This returns a review preview and never publishes. Authorized REST clients can use `/api/control-plane/site-studio/media` and `/api/control-plane/site-studio/effects` with the same site scope.
6. For standalone code, compose the effect for the user’s real selector. Keep the selector scoped and do not rewrite unrelated styles.
7. Return the exact files or insertion points, explain the dependency (if any), and mention keyboard, touch, and prefers-reduced-motion behavior.
8. Never add a library from an untrusted CDN or use a versionless URL when a pinned URL is available.

Use `sitecommander_effects_search`, `sitecommander_effects_fetch`, and `sitecommander_effects_compose` for discovery and code. Use `sitecommander_site_studio_media` plus `sitecommander_site_studio_effect_apply` only for an authorized site's staging workflow.
Public catalog, connected-site staging.The REST endpoints are public and read-only. An authorized MCP site connection can stage compatible effects for review; publishing remains a separate approval.
GET /api/effects MCP setup