ARLing Motion · free, MIT licence

Motion components that also render as video.

Twelve UI components with calm, useful motion: a dialog that grows out of its button, tabs whose indicator stretches and catches up, toasts that start where you clicked. Each one follows the WAI-ARIA pattern for keyboard and screen readers (screen reader checks are in progress), and carries a short demo timeline you can render frame by frame.

Browse free components Pro, 49 €, coming soon

No dependencies
React or plain JavaScript
Installs with the shadcn CLI
Reduced motion respected

Built from the Dialog and Toast below. Point at it to use it.Reduced motion is on: nothing plays, every state shows at once.

Free, MIT licence

Twelve components, each with its own demo

Every stage below holds the real component: click it, tab into it, use the arrow keys. One stage at a time plays its 4 second demo while it is in view; point at it or press Stop to take over. With reduced motion turned on, nothing plays.

01

Dialog

Opens out of the button that opened it and folds back into it. Focus stays inside, Escape closes, focus returns to the button.

npx shadcn@latest add https://arling.sk/motion/r/dialog.json

Source Registry item Demo canvas

4 s demo
02

Tabs

The indicator stretches toward the new tab with its leading edge, and the trailing edge catches up. Arrow keys, Home and End.

npx shadcn@latest add https://arling.sk/motion/r/tabs.json

Source Registry item Demo canvas

4 s demo
03

Tooltip

One bubble for a toolbar: it slides and resizes from button to button. It shows on keyboard focus too, and Escape hides it.

npx shadcn@latest add https://arling.sk/motion/r/tooltip.json

Source Registry item Demo canvas

4 s demo
04

Dropdown menu and popover

Unfolds from its button, the items enter one after another and a single highlight slides between them. Menu keys as in the WAI-ARIA pattern.

npx shadcn@latest add https://arling.sk/motion/r/popover.json

Source Registry item Demo canvas

4 s demo
05

Toast

Grows out of the point you clicked and folds into a stack. Hover or focus unfolds the stack and pauses the timers; Alt+T jumps to the newest toast.

npx shadcn@latest add https://arling.sk/motion/r/toast.json

Source Registry item Demo canvas

4 s demo
06

Switch

The thumb travels on a spring and stretches while pressed. The new colour grows as a circle from where you pressed, never through grey.

npx shadcn@latest add https://arling.sk/motion/r/switch.json

Source Registry item Demo canvas

4 s demo
07

Accordion

The panel unfolds downward and each row enters as the growing edge reaches it. Closing lets the rows leave first, then folds the panel.

npx shadcn@latest add https://arling.sk/motion/r/accordion.json

Source Registry item Demo canvas

4 s demo
08

Command menu

Filters without a cut: rows that stop matching leave in place, the rest slide into the gaps, and one highlight moves between rows.

npx shadcn@latest add https://arling.sk/motion/r/command.json

Source Registry item Demo canvas

4 s demo
09

Drawer

Follows your pointer 1:1, then a spring takes over with your release speed. A flick or a pull past the middle closes it; Escape always works.

npx shadcn@latest add https://arling.sk/motion/r/drawer.json

Source Registry item Demo canvas

4 s demo
10

Carousel

Drag it and throw it: the spring starts from your release speed and lands on the slide the throw points to. No auto rotation.

npx shadcn@latest add https://arling.sk/motion/r/carousel.json

Source Registry item Demo canvas

4 s demo
11

One-time code input

One real text field under six slots, so paste and autofill work. Each digit enters its slot, and a valid code turns green as one growing circle.

npx shadcn@latest add https://arling.sk/motion/r/otp.json

Source Registry item Demo canvas

4 s demo
12

Dropzone

Unfolds into a file list row by row and folds back on Clear. It only lists the files and hands you the File objects; nothing is uploaded.

npx shadcn@latest add https://arling.sk/motion/r/dropzone.json

Source Registry item Demo canvas

4 s demo

One file, three outputs

The same motion in React, in CSS and as video

The springs are written once, in the core. The React wrapper, the CSS variables and the video frames all read the same numbers.

React

A thin wrapper over the plain JavaScript component, installed next to your shadcn components. It passes className through.

import { Tabs, TabsList, TabsTrigger, TabsPanels, TabsContent } from "@/components/ui/motion-tabs";

export function Report() {
  return (
    <Tabs defaultValue={0}>
      <TabsList aria-label="Report period">
        <TabsTrigger>Week</TabsTrigger>
        <TabsTrigger>Month</TabsTrigger>
      </TabsList>
      <TabsPanels>
        <TabsContent>This week</TabsContent>
        <TabsContent>This month</TabsContent>
      </TabsPanels>
    </Tabs>
  );
}

CSS variables

The same springs sampled into CSS linear() easings with their durations, for your own transitions. Each has 60 stops, and a test checks that it stays within 0.6 % of the spring. The core item adds all nine to your global stylesheet; they are also in springs.css.

:root {
  --arling-spring-snappy: linear(0 0%, 0.0204 1.7%, 0.072 3.4%, 0.1434 5.1%, 0.2256 6.8%, 0.3121 8.5%, 0.3983 10.2%, 0.481 11.9%, 0.5581 13.6%, 0.6284 15.3%, 0.6912 16.9%, 0.7465 18.6%, 0.7944 20.3%, 0.8354 22%, 0.8701 23.7%, 0.8991 25.4%, 0.923 27.1%, 0.9425 28.8%, 0.9581 30.5%, 0.9706 32.2%, 0.9803 33.9%, 0.9878 35.6%, 0.9934 37.3%, 0.9976 39%, 1.0005 40.7%, 1.0026 42.4%, 1.0039 44.1%, 1.0046 45.8%, 1.005 47.5%, 1.005 49.2%, 1.0048 50.8%, 1.0046 52.5%, 1.0042 54.2%, 1.0037 55.9%, 1.0033 57.6%, 1.0029 59.3%, 1.0025 61%, 1.0021 62.7%, 1.0018 64.4%, 1.0015 66.1%, 1.0012 67.8%, 1.001 69.5%, 1.0008 71.2%, 1.0006 72.9%, 1.0005 74.6%, 1.0004 76.3%, 1.0003 78%, 1.0002 79.7%, 1.0001 81.4%, 1.0001 83.1%, 1.0001 84.7%, 1 86.4%, 1 88.1%, 1 89.8%, 1 91.5%, 1 93.2%, 1 94.9%, 1 96.6%, 1 98.3%, 1 100%);
  --arling-spring-snappy-duration: 645ms;
  /* press, release, smooth, morph, gentle, enter, exit, camera: see springs.css */
}

.card {
  transition: transform var(--arling-spring-snappy-duration) var(--arling-spring-snappy);
}

Video

Every component carries a demo of 8 beats at 120 BPM. seek(t) paints any moment of it, so a headless browser can capture it frame by frame, and the frame at 4 s equals the frame at 0 s. These four moments of the Tabs demo were painted by seek(t) in your browser just now, just after the click on Month.

The MP4 files are not published yet. The render script is part of Pro.

Install

One command per component

The registry follows the shadcn schema, so the shadcn CLI, and the AI assistants that use it, can install any component by its address.

With the shadcn CLI
```
npx shadcn@latest add https://arling.sk/motion/r/tabs.json
```
This adds components/ui/motion-tabs.tsx, the logic in lib/arling-motion-tabs.js, the core in lib/arling-motion.js (each with a .d.ts, so TypeScript projects build without allowJs), and the CSS rules to your global stylesheet (Tailwind v4, under @layer components). All items are listed in r/registry.json.

Without React

<link rel="stylesheet" href="https://arling.sk/motion/components/tabs/tabs.css">

<div class="am-tabs">
  <div class="am-tabs-list" role="tablist" aria-label="Report period">
    <button role="tab">Week</button>
    <button role="tab">Month</button>
  </div>
  <div class="am-tabs-panels">
    <div role="tabpanel">This week</div>
    <div role="tabpanel">This month</div>
  </div>
</div>

<script type="module">
  import { createTabs } from "https://arling.sk/motion/components/tabs/tabs.js";
  createTabs({ root: document.querySelector(".am-tabs") });
</script>

The same works for every component: components/<name>/<name>.css and <name>.js. The markup each one expects is described at the top of its file.

Tailwind v3 or no build step

The CLI puts the CSS into @layer components. If your project does not use Tailwind v4, add the component's CSS file to your styles instead; it reads the shadcn variables (--background, --primary, --radius and others) and falls back to neutral colours without them.

Pro

ARLing Motion Pro

For turning the demos into videos of your own product. It is not on sale yet, and there is no buy button on purpose.

49 €

one-time

Coming soon

What it is planned to include

A video kit: a script that renders any component demo, with your own texts and colours, to MP4 in 9:16, 1:1 and 16:9, with checks for text size, reading time and framing, and a seamless loop. It runs on your computer and needs Node, Chrome and ffmpeg.
Three blocks, as website sections and as video templates: a hero where a button becomes a product card, a pricing section with a monthly and yearly switch, and a waitlist sign-up with a code input.
Music from code: a generator of 120 BPM loops built from formulas, with no samples to license.
Updates for 12 months.

Licence

Your own projects and client projects, any number of them. You may not resell the code or build a competing library from it. Pro is not MIT; the free components stay MIT.

What Pro is not

Not custom work, and not lifetime support. Support is by e-mail, without a promised response time. The contents above may still change before release.

Comparison

An honest comparison

The libraries below are good at what they do, and in several ways better than this one. The closest to our idea are remocn and snapcn: free kits of UI pieces made for product demo videos. They build pieces that look like UI for a video; we build the component your product ships, with its demo written into it. Facts are from their own pages, checked on 26 September 2026.

Topic	ARLing Motion	Magic UI	Aceternity UI	remocn and snapcn	Remotion
What it is	Animated UI components for your product, each with a demo timeline	Animated components and effects for React	Animated components, blocks and templates for React	UI pieces for product demo videos. snapcn: “Product demo videos, in React.”	A framework for making videos with React
Free part	12 components and the core, MIT	“150+ free and open-source animated components and effects”, MIT	Free components, with a paid Pro	remocn: 308 components, MIT. snapcn: 43 components, MIT	Free for individuals and companies of up to 3 people
Paid	Pro 49 € one-time, coming soon	Pro $199 one-time	Pro $169 a year or $199 one-time	remocn: no paid tier we found. snapcn Pro: $129 a year	Company licence for larger companies
Built on	No dependencies; React wrappers are optional	React, TypeScript, Tailwind CSS and Motion	React, Tailwind CSS and Motion	snapcn: Remotion	React
Video	Each component has a demo you can seek to any frame; the render script comes with Pro	Not a feature we found	Not a feature we found	Their whole purpose. remocn: “Describe your product to your AI agent. It builds the demo video from ready-made pieces”	Its whole purpose: renders React to MP4, with a player for the web
Where they are better	Our weak spots: 12 components, new, no community yet; tested in a simulated DOM, browser checks still in progress	Far more components and effects, a large community, proven in many projects	Many ready blocks and templates, striking landing page effects	Far more video pieces, templates and an MCP server (snapcn Pro); they make a finished video today, we do not ship a render script yet	A mature video framework: audio, sequences, captions, rendering at scale

Sources: magicui.design, pro.magicui.design, ui.aceternity.com, ui.aceternity.com/pricing, remocn.dev, snapcn.dev, Aceternity on Indie Hackers, remotion.dev/player, Remotion licence.

Questions

Is ARLing Motion free?

Yes. The twelve components and the core are MIT licensed, for personal and commercial projects. ARLing Motion Pro, a paid kit for turning the demos into videos, is planned at 49 € one-time and is not on sale yet.

How do I install a component?

With the shadcn CLI, for example npx shadcn@latest add https://arling.sk/motion/r/tabs.json. It adds the React file, the logic and the core, and puts the CSS into your global stylesheet. Without the CLI, load the CSS and JavaScript files straight from arling.sk/motion/components/.

Do I need Framer Motion, GSAP or another animation library?

No. The core is one file without dependencies. Springs are computed in closed form, so every animated value is a pure function of time.

Can I use the components without React?

Yes. Each component is plain JavaScript on your own markup (createTabs, createDialog and so on). The React files are thin wrappers over the same logic.

What does render as video mean?

Every component carries a demo timeline of 8 beats at 120 BPM, which is 4 seconds. The same code can paint any moment of it with seek(t), so a headless browser can capture it frame by frame, and the last frame equals the first, so the clip loops. You can open any demo at a given time with demo.html on this site. The render script itself is part of the planned Pro kit.

What happens with prefers-reduced-motion?

Nothing moves. The component shows each new state at once, and the demos on this page do not play.

Are the components accessible?

Each one follows the matching WAI-ARIA Authoring Practices pattern: roles, states, keyboard and focus. Tests check the keyboard, the ARIA attributes after every change and reduced motion. They run in Node against a simulated DOM, so they do not replace a check with a real screen reader.

Do I need Tailwind CSS?

No. The styles are plain CSS that read the shadcn variables (--background, --primary, --radius and others), so the components follow your theme and dark mode. With Tailwind v4 the CLI adds them under @layer components; with Tailwind v3 or no Tailwind, add the component CSS file yourself.

Which browsers are supported?

Current Chrome, Edge, Firefox and Safari are the target. Checks in real browsers are still in progress, so if something looks wrong, write to support@arling.sk.

Motion components that also render as video.

Dialog

Tabs

Tooltip

Dropdown menu and popover

Toast

Switch

Accordion

Command menu

Drawer

Carousel

One-time code input

Dropzone