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 effects Scroll reveals Micro-interactions Navigation Backgrounds Text motion Components Media & layout Scroll-driven Advanced interactions Forms & feedback 3D & perspective Library starters

Featured recipeMicro-interactions

Spotlight hover

A pointer-following radial highlight that adds depth without a heavy visual layer.

CSS variablespointerprogressive

[data-sc-effect="spotlight"] {
  --sc-x: 50%;
  --sc-y: 50%;
  background: radial-gradient(circle at var(--sc-x) var(--sc-y), rgba(116, 125, 255, .22), transparent 34%), #141822;
  transition: background 180ms ease, transform 180ms ease;
}
[data-sc-effect="spotlight"]:hover { transform: translateY(-2px); }

document.querySelectorAll('[data-sc-effect="spotlight"]').forEach((card) => {
  card.addEventListener('pointermove', (event) => {
    const box = card.getBoundingClientRect();
    card.style.setProperty('--sc-x', `${event.clientX - box.left}px`);
    card.style.setProperty('--sc-y', `${event.clientY - box.top}px`);
  }, { passive: true });
});

The foundation

Native recipes

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

Interactive preview

Micro-interactionsCC0-style snippets

Magnetic button

A restrained pointer response for a primary CTA that remains keyboard and touch friendly.

One primary call to action per viewport.

[data-sc-effect="magnetic"] {
  transition: transform 180ms cubic-bezier(.2, .8, .2, 1);
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  [data-sc-effect="magnetic"] { transition: none; }
}

document.querySelectorAll('[data-sc-effect="magnetic"]').forEach((button) => {
  button.addEventListener('pointermove', (event) => {
    const box = button.getBoundingClientRect();
    const x = (event.clientX - (box.left + box.width / 2)) * .12;
    const y = (event.clientY - (box.top + box.height / 2)) * .12;
    button.style.transform = `translate(${x}px, ${y}px)`;
  }, { passive: true });
  button.addEventListener('pointerleave', () => { button.style.transform = ''; });
});

Interactive preview

Micro-interactionsCC0-style snippets

Hover lift card

A subtle elevation cue for clickable cards that keeps the hit area stable and the focus state visible.

Feature cards, resource links, and product tiles.

[data-sc-effect="hover-lift"] {
  transition: transform 180ms ease, box-shadow 180ms ease;
}
[data-sc-effect="hover-lift"]:hover,
[data-sc-effect="hover-lift"]:focus-visible {
  transform: translateY(-5px);
  box-shadow: 0 16px 30px rgba(17, 19, 24, .14);
}
@media (prefers-reduced-motion: reduce) {
  [data-sc-effect="hover-lift"] { transition: none; }
}

Interactive preview

Micro-interactionsCC0-style snippets

Button ripple

A contained click ripple that confirms activation without replacing the button label or focus ring.

Primary actions, filters, and small in-page controls.

[data-sc-effect="ripple"] { position: relative; overflow: hidden; isolation: isolate; }
[data-sc-effect="ripple"] .sc-ripple {
  position: absolute; width: 12px; aspect-ratio: 1; border-radius: 50%;
  background: currentColor; opacity: .22; transform: scale(0);
  animation: sc-ripple 550ms ease-out forwards; pointer-events: none;
}
@keyframes sc-ripple { to { opacity: 0; transform: scale(18); } }
@media (prefers-reduced-motion: reduce) { [data-sc-effect="ripple"] .sc-ripple { display: none; } }

document.querySelectorAll('[data-sc-effect="ripple"]').forEach((button) => {
  button.addEventListener('click', (event) => {
    const box = button.getBoundingClientRect();
    const ripple = document.createElement('span');
    ripple.className = 'sc-ripple';
    ripple.style.left = `${event.clientX - box.left - 6}px`;
    ripple.style.top = `${event.clientY - box.top - 6}px`;
    button.append(ripple);
    ripple.addEventListener('animationend', () => ripple.remove(), { once: true });
  });
});

Interactive preview

Micro-interactionsCC0-style snippets

Card flip reveal

A click-to-reveal two-sided card that works with keyboard focus and keeps both sides in the DOM.

Flashcards, compact product facts, and playful portfolio details.

[data-sc-effect="card-flip"] { perspective: 800px; }
[data-sc-effect="card-flip"] .sc-flip-inner { transition: transform 500ms ease; transform-style: preserve-3d; }
[data-sc-effect="card-flip"] .sc-flip-inner > * { position: absolute; inset: 0; display: grid; place-items: center; backface-visibility: hidden; }
[data-sc-effect="card-flip"] .sc-flip-inner > strong { transform: rotateY(180deg); }
[data-sc-effect="card-flip"].is-flipped .sc-flip-inner { transform: rotateY(180deg); }
@media (prefers-reduced-motion: reduce) { [data-sc-effect="card-flip"] .sc-flip-inner { transition: none; } }

<button type="button" data-sc-effect="card-flip" aria-pressed="false"><span class="sc-flip-inner"><b>Front</b><strong>Back</strong></span></button>
<script>
  const flip = document.querySelector('[data-sc-effect="card-flip"]');
  flip.addEventListener('click', () => { const open = flip.classList.toggle('is-flipped'); flip.setAttribute('aria-pressed', String(open)); });
</script>

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.

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