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 recipeBackgrounds

Cursor glow

A soft ambient glow for a hero or dark section that never blocks content or clicks.

CSS variablespointerdecorative

The foundation

Native recipes

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

Interactive preview
BackgroundsCC0-style snippets

Animated gradient mesh

A low-frequency CSS background motion that gives a hero a little life without adding an image asset.

Hero backgrounds, signup panels, and product announcements.
[data-sc-effect="gradient-mesh"] { position: relative; isolation: isolate; overflow: hidden; background: #111318; }
[data-sc-effect="gradient-mesh"]::before {
  content: ""; position: absolute; inset: -35%; z-index: -1;
  background: radial-gradient(circle at 20% 30%, #5b5ce2 0 12%, transparent 38%), radial-gradient(circle at 80% 70%, #9db7ff 0 8%, transparent 34%);
  filter: blur(30px); opacity: .38; animation: sc-mesh 16s ease-in-out infinite alternate;
}
@keyframes sc-mesh { to { transform: translate3d(4%, -3%, 0) scale(1.08); } }
@media (prefers-reduced-motion: reduce) { [data-sc-effect="gradient-mesh"]::before { animation: none; } }
Interactive preview
BackgroundsCC0-style snippets

Shimmer skeleton

A restrained loading placeholder that communicates waiting without pretending content has arrived.

Async cards, search results, and initial content loading.
[data-sc-effect="shimmer"] { position: relative; overflow: hidden; background: #e8ecf4; }
[data-sc-effect="shimmer"]::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
  animation: sc-shimmer 1.5s ease-in-out infinite;
}
@keyframes sc-shimmer { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { [data-sc-effect="shimmer"]::after { animation: none; } }
Interactive preview
BackgroundsCC0-style snippets

Blob morph background

A soft organic background shape for a creative hero, kept behind content and disabled for reduced motion.

Creative portfolios, campaigns, and editorial hero panels.
[data-sc-effect="blob-morph"] { position: relative; isolation: isolate; overflow: hidden; }
[data-sc-effect="blob-morph"]::before {
  content: ""; position: absolute; width: 58%; aspect-ratio: 1; inset: 12% auto auto 22%; z-index: -1;
  border-radius: 62% 38% 41% 59% / 53% 44% 56% 47%; background: #aab1ff; filter: blur(4px);
  animation: sc-blob 9s ease-in-out infinite alternate;
}
@keyframes sc-blob { to { border-radius: 36% 64% 57% 43% / 41% 52% 48% 59%; transform: rotate(18deg) scale(1.08); } }
@media (prefers-reduced-motion: reduce) { [data-sc-effect="blob-morph"]::before { animation: none; } }
Interactive preview
BackgroundsCC0-style snippets

Aurora scene

A cinematic, layered aurora background with slow color movement and a readable content layer.

Hero sections, product launches, and sign-up panels.
/* CSS */
[data-sc-effect="aurora-scene"] { position: relative; isolation: isolate; overflow: hidden; background: radial-gradient(ellipse at 15% 20%, #203b69, transparent 54%), radial-gradient(ellipse at 85% 75%, #452e69, transparent 50%), #10182d; }
[data-sc-effect="aurora-scene"]::before, [data-sc-effect="aurora-scene"]::after { content: ""; position: absolute; z-index: -1; inset: -35%; pointer-events: none; filter: blur(42px); opacity: calc(.55 * var(--sc-motion-intensity, 1)); background: conic-gradient(from 110deg at 50% 50%, transparent 0 18%, color-mix(in srgb,var(--sc-scene-primary,#38ddc4) 48%,transparent) 28%, color-mix(in srgb,var(--sc-scene-secondary,#7465ff) 50%,transparent) 42%, transparent 58% 100%); animation: sc-aurora-drift 24s ease-in-out infinite alternate; }
[data-sc-effect="aurora-scene"]::after { opacity: calc(.32 * var(--sc-motion-intensity, 1)); filter: blur(56px); animation-duration: 32s; animation-direction: alternate-reverse; }
@keyframes sc-aurora-drift { to { transform: translate3d(5%, -4%, 0) rotate(18deg) scale(1.08); } }
@media (prefers-reduced-motion: reduce) { [data-sc-effect="aurora-scene"]::before, [data-sc-effect="aurora-scene"]::after { animation: none; } }
Interactive preview
BackgroundsCC0-style snippets

Ambient particle field

A subtle star-like layered field made from gradients, with no images, canvas, or network requests.

Night-sky heroes, technology pages, and video-like ambient backdrops.
/* CSS */
[data-sc-effect="particle-drift"] { position: relative; isolation: isolate; overflow: hidden; background-color: #0c1425; background-image: radial-gradient(ellipse at 50% 110%,color-mix(in srgb,var(--sc-scene-secondary,#2863ec) 50%,transparent),transparent 60%); }
[data-sc-effect="particle-drift"]::before { content: ""; position: absolute; z-index: -1; inset: -28%; pointer-events: none; opacity: calc(.92 * var(--sc-motion-intensity, 1)); background-image: radial-gradient(1.5px 1.5px at 12% 28%,rgba(255,255,255,.75) 45%,transparent 60%),radial-gradient(1px 1px at 72% 22%,color-mix(in srgb,var(--sc-scene-primary,#36d4f0) 70%,white) 45%,transparent 60%),radial-gradient(2px 2px at 84% 68%,rgba(255,255,255,.65) 45%,transparent 60%),radial-gradient(1px 1px at 34% 78%,color-mix(in srgb,var(--sc-scene-secondary,#7465ff) 70%,white) 45%,transparent 60%); background-size: 180px 180px,230px 230px,280px 280px,210px 210px; animation: sc-particle-pan 44s ease-in-out infinite alternate; }
@keyframes sc-particle-pan { to { transform: translate3d(3%,-2%,0) rotate(2deg); } }
@media (prefers-reduced-motion: reduce) { [data-sc-effect="particle-drift"]::before { animation: none; } }

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