Track · motion

Motion track

Easing + duration tokens, UI motion primitives, and a tiny ESM runtime for stagger / onScroll / ready.

Endpoints

Route	Auth	Purpose
`GET /api/v1/motion?format=css&set=all`	public	Easing / duration tokens + UI primitives.
`GET /api/v1/motion/runtime.js`	public	~2 KB ESM module — stagger/onScroll/ready.
`GET /api/v1/motion`	`studio:v1:use`	JSON catalog.

CSS sets

`set`	Contents
`base`	Three general-purpose motions: fade-up, parallax-drift, breath.
`all`	`base` plus six UI primitives — `hover-lift`, `stagger-in`, `accordion-expand`, `modal-enter`, `toast-slide`, `menu-drop`.
`character`	Character-render motions (breath, blink). Not usually needed by hosts.

Or pick explicit names: ?format=css&names=hover-lift,modal-enter.

Drop-in setup

<link rel="stylesheet"
      href="https://urja.insightsbyomkar.com/api/v1/motion?format=css&set=all" />

After that, these CSS classes work anywhere:

.m-hover-lift — subtle raise on hover.
.m-stagger-in — children reveal in sequence.
.m-accordion-expand — max-height based accordion.
.m-modal-enter — dialog backdrop + scale-in.
.m-toast-slide — bottom-slide toast.
.m-menu-drop — dropdown with spring overshoot.

Every primitive carries an inline @media (prefers-reduced-motion: reduce) override that disables the keyframes — accessible by default.

Easing + duration tokens

/* Easings */
--m-ease-soft       : cubic-bezier(0.25, 0.8, 0.25, 1);
--m-ease-snap       : cubic-bezier(0.4, 1.4, 0.5, 1);
--m-ease-emphasized : cubic-bezier(0.2, 0.8, 0.2, 1);
--m-ease-standard   : cubic-bezier(0.3, 0, 0.2, 1);
--m-ease-settle     : cubic-bezier(0.33, 1, 0.68, 1);

The semantic --ds-ease-* + --ds-duration-* aliases in the Tokens track wrap these.

Runtime

<script type="module">
  import { stagger, onScroll, ready } from "https://urja.insightsbyomkar.com/api/v1/motion/runtime.js";

  ready(() => {
    stagger(".m-stagger-in > *", { step: 60 });
    onScroll(".reveal", { add: "m-fade-up" });
  });
</script>

Three exports, all browser-only:

stagger(selector, opts) — applies a delay cascade to matched elements' children.
onScroll(selector, opts) — IntersectionObserver-backed; adds a class when an element crosses the viewport threshold.
ready(cb) — runs cb on DOMContentLoaded or immediately if already past it.

Zero dependencies, graceful fallback when IntersectionObserver is absent.

Response contracts

CSS: text/css, 1-day browser / 7-day CDN cache.
Runtime: application/javascript, 1-day / 7-day, versioned via MOTION_RUNTIME_VERSION so CSS + runtime can evolve independently.