PocketPapiHelp Center

Developer library · 63 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 recipeForms & feedback

Range slider output

Keep a range input and its visible formatted value synchronized for pricing and preference controls.

forminputoutput

[data-sc-effect="range-slider-output"] { display: grid; gap: .5rem; }
[data-sc-effect="range-slider-output"] input { accent-color: #155eef; }
[data-sc-effect="range-slider-output"] output { color: #155eef; font-weight: 800; font-variant-numeric: tabular-nums; }

const rangeRoot = document.querySelector('[data-sc-effect="range-slider-output"]'); const range = rangeRoot.querySelector('input[type="range"]'); const output = rangeRoot.querySelector('output'); const updateRange = () => { output.value = `${range.value}%`; output.textContent = `${range.value}%`; }; range.addEventListener('input', updateRange); updateRange();

The foundation

Native recipes

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

Interactive preview

Forms & feedbackCC0-style snippets

Floating label input

A compact form label that stays visible and does not rely on placeholder text as the only label.

Sign-up forms, checkout fields, and compact settings screens.

[data-sc-effect="floating-label-input"] { position: relative; display: block; }
[data-sc-effect="floating-label-input"] input { width: 100%; padding: 1rem .7rem .45rem; border: 1px solid #cbd5e1; border-radius: 7px; background: #fff; }
[data-sc-effect="floating-label-input"] label { position: absolute; left: .7rem; top: .72rem; color: #64748b; pointer-events: none; transition: transform 150ms ease, color 150ms ease, background 150ms ease; }
[data-sc-effect="floating-label-input"] input:focus + label,
[data-sc-effect="floating-label-input"] input:not(:placeholder-shown) + label { transform: translateY(-.72rem) scale(.78); padding-inline: .2rem; background: #fff; color: #155eef; }
@media (prefers-reduced-motion: reduce) { [data-sc-effect="floating-label-input"] label { transition: none; } }

Interactive preview

Forms & feedbackCC0-style snippets

Password strength meter

Give users immediate, plain-language password feedback without exposing or storing the password value.

Account creation, credential changes, and invitation flows.

[data-sc-effect="password-strength-meter"] [role="progressbar"] { height: .35rem; overflow: hidden; border-radius: 99px; background: #e2e8f0; }
[data-sc-effect="password-strength-meter"] [role="progressbar"] span { display: block; width: var(--sc-strength, 0%); height: 100%; background: #22c55e; transition: width 180ms ease, background 180ms ease; }
@media (prefers-reduced-motion: reduce) { [data-sc-effect="password-strength-meter"] [role="progressbar"] span { transition: none; } }

const strengthRoot = document.querySelector('[data-sc-effect="password-strength-meter"]'); const password = strengthRoot.querySelector('input'); const meter = strengthRoot.querySelector('[role="progressbar"]'); const label = strengthRoot.querySelector('[data-strength-label]'); password.addEventListener('input', () => { const value = password.value; const score = Math.min(4, Number(value.length >= 8) + Number(/[A-Z]/.test(value)) + Number(/[0-9]/.test(value)) + Number(/[^A-Za-z0-9]/.test(value))); meter.style.setProperty('--sc-strength', `${score * 25}%`); meter.setAttribute('aria-valuenow', score * 25); label.textContent = score < 2 ? 'Needs more variety' : score < 4 ? 'Getting stronger' : 'Good mix'; });

Interactive preview

Forms & feedbackCC0-style snippets

Dropzone feedback

Make a file drop area communicate drag state and keyboard activation without a file-upload dependency.

Media upload forms, asset managers, and import workflows.

[data-sc-effect="dropzone-feedback"] { display: grid; place-items: center; min-height: 6rem; padding: 1rem; border: 1px dashed #8fa4c7; border-radius: 10px; background: #f8fbff; text-align: center; transition: border-color 150ms ease, background 150ms ease; }
[data-sc-effect="dropzone-feedback"].is-dragging, [data-sc-effect="dropzone-feedback"]:focus-visible { border-color: #155eef; background: #edf4ff; outline: none; }
@media (prefers-reduced-motion: reduce) { [data-sc-effect="dropzone-feedback"] { transition: none; } }

const dropzone = document.querySelector('[data-sc-effect="dropzone-feedback"]'); ['dragenter', 'dragover'].forEach((type) => dropzone.addEventListener(type, (event) => { event.preventDefault(); dropzone.classList.add('is-dragging'); })); ['dragleave', 'drop'].forEach((type) => dropzone.addEventListener(type, (event) => { event.preventDefault(); dropzone.classList.remove('is-dragging'); })); dropzone.addEventListener('drop', (event) => { dropzone.querySelector('[data-dropzone-status]').textContent = `${event.dataTransfer.files.length} file(s) ready`; });

Interactive preview

Forms & feedbackCC0-style snippets

Skeleton to content

Transition a loading skeleton to real content while keeping the loading state short and honest.

Async cards, search results, and dashboard panels.

[data-sc-effect="skeleton-to-content"] { position: relative; }
[data-sc-effect="skeleton-to-content"] [data-skeleton] { min-height: 3rem; border-radius: 6px; background: linear-gradient(90deg, #e2e8f0, #fff, #e2e8f0); background-size: 200% 100%; animation: sc-skeleton 1.4s linear infinite; }
[data-sc-effect="skeleton-to-content"] [data-content] { display: none; }
[data-sc-effect="skeleton-to-content"].is-loaded [data-skeleton] { display: none; }
[data-sc-effect="skeleton-to-content"].is-loaded [data-content] { display: block; }
@keyframes sc-skeleton { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { [data-sc-effect="skeleton-to-content"] [data-skeleton] { animation: none; } }

Interactive preview

Forms & feedbackCC0-style snippets

Copy button feedback

Confirm a copy action with a live status message that does not shift the button layout.

API keys, invite links, code samples, and shareable identifiers.

[data-sc-effect="copy-button-feedback"] { display: inline-flex; align-items: center; gap: .6rem; }
[data-sc-effect="copy-button-feedback"] [role="status"] { min-width: 4.5rem; color: #16805d; font-size: .85rem; }

const copyRoot = document.querySelector('[data-sc-effect="copy-button-feedback"]'); copyRoot.querySelector('button').addEventListener('click', async () => { const value = copyRoot.querySelector('[data-copy-value]').textContent; try { await navigator.clipboard.writeText(value); copyRoot.querySelector('[role="status"]').textContent = 'Copied'; } catch { copyRoot.querySelector('[role="status"]').textContent = 'Select to copy'; } });

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. 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.

No command center required.The catalog is public and read-only. Use the REST endpoints from any site or connect the bearer-authenticated MCP endpoint to an agent.

GET /api/effects MCP setup