designlang Files

motionlang — motion becomes a first-class extractable + shippable artefact.

The motion extractor already captured durations, easings and keyframes — but they only landed as a flat motion-tokens.json nobody opened. This release turns extracted motion into something you can see, ship, and hand to a framework.

Motion Lab — <host>-motion.html

A self-contained, dependency-free interactive page:

• Easing curves — each drawn as a real cubic-Bezier SVG path with a dot riding a track at that exact animation-timing-function, plus the raw cubic-bezier() and on-page usage count
• Durations — each as a pulsing bar timed to its real ms
• Keyframes — every @keyframes block replayed
• Honours prefers-reduced-motion

Open it in any browser. Like the brand book, but for motion.

Framer Motion presets — <host>-motion.framer.js

Framer Motion is the dominant React animation library, so this is the highest-leverage motion emitter:

• easings — cubic-bezier arrays, ranked by on-page frequency
• durations — seconds
• transitions — base / fast / slow / spring, ready to spread

• variants — fade / slideUp / scaleIn / stagger, wired to the extracted timing

  :::js import { transitions, variants } from './stripe-com-motion.framer'; <motion.div variants="{variants.slideUp}" initial="hidden" animate="show" transition="{transitions.base}">

Website Motion Lab

Every /gallery/[slug] brand page now renders an interactive Motion Lab section — easing curves drawn in the extracted brand colour, dots riding tracks, a play/pause toggle, and a link to the full standalone page.

Also

• Mobile navbar fix — the hamburger and Install CTA no longer squish together below 640px.
• Both emitters exposed via the public designlang/api (motion-lab, framer-motion, agent-prompt renderer ids).

Install

:::bash
npx designlang@latest stripe.com

Links

• Live site: https://designlang.app
• Gallery (with Motion Lab): https://designlang.app/gallery
• CHANGELOG: [CHANGELOG.md](https://github.com/Manavarya09/design-extract/blob/main/CHANGELOG.md#12150

🤖 Built with Claude Code.