Developer library · 36 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 Site Commander 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 Library starters

Featured recipeText motion

Split text reveal

A small line-by-line headline reveal that avoids a runtime text-splitting dependency.

CSStextmanual markup

[data-sc-effect="split-text"] [data-sc-line] {
  display: block; clip-path: inset(0 0 100% 0); transform: translateY(1em);
  transition: clip-path 700ms cubic-bezier(.2, .8, .2, 1), transform 700ms cubic-bezier(.2, .8, .2, 1);
  transition-delay: calc(var(--sc-index, 0) * 90ms);
}
[data-sc-effect="split-text"].is-visible [data-sc-line] { clip-path: inset(0); transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-sc-effect="split-text"] [data-sc-line] { clip-path: inset(0); transform: none; transition: none; }
}

document.querySelectorAll('[data-sc-effect="split-text"]').forEach((heading) => {
  heading.querySelectorAll('[data-sc-line]').forEach((line, index) => line.style.setProperty('--sc-index', index));
  requestAnimationFrame(() => heading.classList.add('is-visible'));
});

The foundation

Native recipes

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

Interactive preview

Text motionCC0-style snippets

Count-up number

A short numeric transition that gives a metric a sense of arrival without hiding the final value.

Stats, milestones, and dashboard highlights.

<span data-sc-effect="count-up" data-value="240">240</span>

const count = document.querySelector('[data-sc-effect="count-up"]');
const end = Number(count.dataset.value || 240);
const start = performance.now();
function tick(now) {
  const progress = Math.min((now - start) / 900, 1);
  count.textContent = Math.round(end * (1 - Math.pow(1 - progress, 3))).toLocaleString();
  if (progress < 1) requestAnimationFrame(tick);
}
requestAnimationFrame(tick);

Interactive preview

Text motionCC0-style snippets

Typewriter text

A short, decorative typewriter cue for a headline or status line, with the full copy preserved for assistive technology.

Hero labels, product status, and short rotating messages.

<span data-sc-effect="typewriter" data-text="Build with clarity">Build with clarity</span>

const node = document.querySelector('[data-sc-effect="typewriter"]');
const text = node.dataset.text || node.textContent;
node.setAttribute('aria-label', text);
node.textContent = '';
let index = 0;
const type = () => { node.textContent = text.slice(0, ++index); if (index < text.length) setTimeout(type, 55); };
type();

Interactive preview

Text motionCC0-style snippets

Pauseable marquee

A low-priority looping strip with a pause control, suitable for decorative keywords or partner labels.

Brand language, keywords, and non-essential decorative content.

[data-sc-effect="marquee"] { overflow: hidden; }
[data-sc-effect="marquee"] .sc-marquee-track { display: flex; width: max-content; animation: sc-marquee 18s linear infinite; }
[data-sc-effect="marquee"]:has(button:focus-visible) .sc-marquee-track,
[data-sc-effect="marquee"].is-paused .sc-marquee-track { animation-play-state: paused; }
@keyframes sc-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { [data-sc-effect="marquee"] .sc-marquee-track { animation: none; } }

<div data-sc-effect="marquee"><div class="sc-marquee-track"><span>Clarity · Motion · Speed · </span><span aria-hidden="true">Clarity · Motion · Speed · </span></div><button type="button" data-sc-marquee-toggle>Pause</button></div>
<script>
  const marquee = document.querySelector('[data-sc-effect="marquee"]');
  marquee.querySelector('[data-sc-marquee-toggle]').addEventListener('click', (event) => {
    marquee.classList.toggle('is-paused');
    event.currentTarget.textContent = marquee.classList.contains('is-paused') ? 'Play' : 'Pause';
  });
</script>

Interactive preview

Text motionCC0-style snippets

Underline sweep

A bright underline that draws attention to a link while leaving the text and focus state intact.

Editorial links, calls to action, and important inline references.

[data-sc-effect="underline-sweep"] { background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size 220ms ease; }
[data-sc-effect="underline-sweep"]:hover,
[data-sc-effect="underline-sweep"]:focus-visible { background-size: 100% 2px; }
@media (prefers-reduced-motion: reduce) { [data-sc-effect="underline-sweep"] { transition: 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 Site Commander’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 Site Commander 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