Developer library · 63 free recipes
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.
A touch-friendly horizontal rail with snap points and a visible cue that more content is available.
[data-sc-effect="horizontal-scroll"] {
display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-inline: contain;
scrollbar-width: thin;
}
[data-sc-effect="horizontal-scroll"] > * { flex: 0 0 min(78vw, 280px); scroll-snap-align: start; }
The foundation
Small, composable patterns you can paste into a plain HTML site, a CMS, or a generated staging build.
A restrained image scale on hover that keeps the crop contained and does not alter the layout.
[data-sc-effect="image-zoom"] { overflow: hidden; }
[data-sc-effect="image-zoom"] img { display: block; width: 100%; transition: transform 350ms ease; }
[data-sc-effect="image-zoom"]:hover img,
[data-sc-effect="image-zoom"]:focus-within img { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) { [data-sc-effect="image-zoom"] img { transition: none; } }
A small pointer-based depth shift for a decorative layer, with touch and reduced-motion fallbacks.
<div data-sc-effect="parallax"><div data-sc-parallax-layer>Focal visual</div></div>
<style>[data-sc-effect="parallax"] { overflow: hidden; } [data-sc-parallax-layer] { transition: transform 180ms ease; }</style>
<script>
const scene = document.querySelector('[data-sc-effect="parallax"]');
const layer = scene.querySelector('[data-sc-parallax-layer]');
scene.addEventListener('pointermove', (event) => {
const box = scene.getBoundingClientRect();
const x = (event.clientX - box.left) / box.width - .5;
const y = (event.clientY - box.top) / box.height - .5;
layer.style.transform = `translate3d(${x * 12}px, ${y * 12}px, 0)`;
}, { passive: true });
scene.addEventListener('pointerleave', () => { layer.style.transform = ''; });
A small gallery with native scroll snapping and button controls for users who prefer explicit navigation.
<div data-sc-effect="scroll-snap-gallery"><div class="sc-gallery-track"><article>01</article><article>02</article><article>03</article></div><button type="button" data-sc-gallery-prev>Previous</button><button type="button" data-sc-gallery-next>Next</button></div>
<style>[data-sc-effect="scroll-snap-gallery"] { overflow: hidden; } [data-sc-effect="scroll-snap-gallery"] .sc-gallery-track { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; } [data-sc-effect="scroll-snap-gallery"] article { flex: 0 0 78%; scroll-snap-align: start; }</style>
<script>
const rail = document.querySelector('[data-sc-effect="scroll-snap-gallery"]');
rail.querySelector('[data-sc-gallery-next]').addEventListener('click', () => rail.scrollBy({ left: rail.clientWidth * .8, behavior: 'smooth' }));
rail.querySelector('[data-sc-gallery-prev]').addEventListener('click', () => rail.scrollBy({ left: -rail.clientWidth * .8, behavior: 'smooth' }));
Reveal an image from a clipped color block with a simple CSS mask and no asset dependency in the demo.
[data-sc-effect="image-reveal-wipe"] { overflow: hidden; clip-path: inset(0 100% 0 0); animation: sc-image-reveal 850ms cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes sc-image-reveal { to { clip-path: inset(0); } }
@media (prefers-reduced-motion: reduce) { [data-sc-effect="image-reveal-wipe"] { clip-path: inset(0); animation: none; } }
Preview a muted video or motion frame only after an explicit interaction, with a still-image fallback.
[data-sc-effect="video-hover-preview"] { position: relative; overflow: hidden; }
[data-sc-effect="video-hover-preview"] video { display: block; width: 100%; }
[data-sc-effect="video-hover-preview"] [data-video-play] { position: absolute; inset: auto .75rem .75rem auto; }
@media (prefers-reduced-motion: reduce) { [data-sc-effect="video-hover-preview"] video { animation: none; } }
const videoRoot = document.querySelector('[data-sc-effect="video-hover-preview"]'); const video = videoRoot.querySelector('video'); videoRoot.addEventListener('pointerenter', () => { if (!matchMedia('(prefers-reduced-motion: reduce)').matches) video.play(); }); videoRoot.addEventListener('pointerleave', () => video.pause());
Bring a library when it earns its weight
Version-pinned starting points for open-source libraries. Review the license and performance tradeoff before adding another dependency.
For GPTs and other agents
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.
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. Compose the effect for the user’s real selector. Keep the selector scoped and do not rewrite unrelated styles. 5. Return the exact files or insertion points, explain the dependency (if any), and mention keyboard, touch, and prefers-reduced-motion behavior. 6. Never add a library from an untrusted CDN or use a versionless URL when a pinned URL is available. Use the PocketPapi tools `sitecommander_effects_search`, `sitecommander_effects_fetch`, and `sitecommander_effects_compose` for this workflow.