ARLing Motion · free, MIT licence

Motion components that also render as video.

Twenty 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, a slider whose thumb springs back when you let go. 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 video kit, 49 € one-time

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

Twenty 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

Follows your finger 1:1 and resists past the ends like iOS. A throw keeps its speed and lands on a slide without a wobble; the edges fade instead of cutting a card in half. Arrows, dots and keys, 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
13

Number

Rolls to a new value digit by digit, from the right, and opens a new column when the number gains a digit. Separators follow the locale; screen readers hear the final value at once.

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

Source Registry item Demo canvas

4 s demo
14

Island

A status pill that reshapes between states, Dynamic Island style: paying, paid, ready to download. The spinner turns and the check draws itself as functions of time; screen readers get each state from a polite status region.

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

Source Registry item Demo canvas

4 s demo
15

Segmented control

One thumb under the chosen option moves in position and width on a single spring. Choose again while it is still moving and it turns around from its current speed. A radio group with arrow keys, Home, End and one tab stop.

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

Source Registry item Demo canvas

4 s demo
16

Slider

The thumb grows while you hold it and springs back when you let go, settling on the nearest step. A bubble shows the value in your own words, such as “1,200 conversations”, and stays inside the slider at the ends. Arrow keys, Page Up, Page Down, Home and End.

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

Source Registry item Demo canvas

4 s demo
17

Morph

A card that grows into a dialog and folds back into it. Position and size move on one spring, the text never stretches and the corners stay round. Close it while it is still growing and it turns back from its current speed. Focus stays inside and returns to the card.

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

Source Registry item Demo canvas

4 s demo
18

Marquee

An endless band whose edges fade softly, so items rise in and sink out instead of being cut. It coasts to a stop when you point at it or tab into it, and picks up speed again when you leave. Keyboard focus glides the focused item to the middle. A small Pause button in the row above pauses the band for good and never covers it. The content is copied just often enough to leave no gap, and one copy spans whole pixels, so the loop has no visible seam; the copies are hidden from screen readers and the Tab key.

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

Source Registry item Demo canvas

4 s demo
19

Sortable

A list you reorder by its handles, with a mouse, a pen or a finger. The item you hold follows the pointer and lifts a little, the others make room on a spring as it passes their middle, and it lands with the speed of your hand. With the keyboard, Space picks an item up, the arrow keys move it and Escape puts it back; a live region says each step.

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

Source Registry item Demo canvas

4 s demo
20

Steps

Steps with progress, for a setup or a sign-up. The line draws on to the current step, the step you are on lights up, and a finished step fills and gets a check that draws itself. Screen readers get the current step and a progress bar with the steps done; the steps never take focus from your own buttons.

npx shadcn@latest add https://arling.sk/motion/r/steps.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

Turn the demos on this page into videos of your own product: your texts and colours, MP4 in three formats, with music. One zip that runs on your own computer.

49 €

one-time, VAT included, no subscription

A download button appears here right after payment, and the link comes by e-mail too
One zip of 326 kB, version 1.0.0
No account to make

As a consumer you can withdraw within 14 days without giving a reason (our terms, section 5).

What you get, version 1.0.0

Video kit. One command renders a demo from this page, or one of the three blocks below, with your texts and colours, to MP4 in 9:16 (1080 x 1920), 1:1 (1080 x 1080) and 16:9 (1920 x 1080), at up to 60 fps, with music. Before it renders, it checks text size, reading time, framing in the safe area and that the loop has no jump, and tells you what to change. It also writes still frames, so you can look before you render.
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. Plain JavaScript on the free components, with your texts and your own action (checkout, sign-up, code check).
Music from code. Seamless loops at 120 BPM, or any tempo from 60 to 160, in 10 styles, written to WAV. Every sound is built from formulas, so there are no samples to license.
Updates for 12 months, three example configs, tests and a README with three commands.

Which demos pass the checks

With the texts they ship with, 17 of the 21 demos (the hero and the 20 components) and all three blocks pass in all three formats. Four have small text inside the demo that the checks block in some formats, and a shorter text of yours does not fix it:

Hero: passes in 9:16 only
Morph: passes in 9:16 only
Sortable: passes in 16:9 only
One-time code input: passes in 1:1 and 16:9

For those four, pick a format that passes, or look at the still frames and render with --force.

What it runs on

Your own computer, with Node.js 22.12 or newer, Google Chrome or Chromium, and ffmpeg. Nothing is uploaded. Tested on Windows 11; macOS and Linux not yet tested. If it does not run on yours, write to support@arling.sk with the error message.

Licence

Your own projects and client projects, any number of them. What you render or build with it is yours, with no credit needed. You may not resell or share the code, build a competing library from it, or offer the kit as a rendering service. Your employees and the contractors you hire may use Pro for your projects; a contractor who wants to use it for anyone else needs their own licence. Pro is not MIT; the free components stay MIT. Full text: LICENSE-PRO.txt in the download.

What Pro is not

Not custom work, not a hosted service and not lifetime support. Support is by e-mail at support@arling.sk, without a promised response time. Some demos move fast for reading; the kit warns you, and a slower tempo gives viewers more time.

Questions about Pro

What exactly do I download?

One zip of 326 kB: the video kit, the three blocks, the music generator, three example configs, tests, a README and the licence. It also contains the free ARLing Motion components (MIT) and the ARLing Sans font (SIL Open Font License), so it runs on its own. You do not need React. After you unzip it, npm install adds one dependency, puppeteer-core, which drives your own Chrome.

Can I change the texts and colours?

Yes. A block has named texts. In a component demo you replace a text exactly as the demo shows it, and the kit lists the texts it could not find and the texts the demo has. Keep your text about as long as the original, because the demo measures its layout once. Colours are checked for contrast.

What do the checks do?

Before rendering, they measure every text while it stands still (in 9:16 at least 36 px of a 1080 px wide frame, in 1:1 and 16:9 at least 30 px), how long each text is fully visible (words / 3 + 0.5 s), whether texts stay inside the safe area, and whether the last frame equals the first. A failed check stops that format with a message; --force renders anyway.

Can I use Pro and the videos for clients?

Yes. What you render is yours, for ads and any other use, with no credit. You may use Pro in any number of client projects and deliver the blocks inside a client's site. You may not resell the kit or share its code.

Is the music really free to use?

It is generated from formulas in code, with no recordings or samples, so there is nothing to license.

What are the updates?

New versions released within 12 months of your purchase are sent to the e-mail address you paid with. You keep every version you received.

What happens after I pay?

Stripe sends you back to this page, the page checks that the payment went through, and a download button for the zip appears in place of the buy button. The same link is sent by e-mail to the address you paid with. The link on the page works for 7 days and the one in the e-mail for 30 days.

Can I get my money back?

As a consumer you can withdraw within 14 days without giving a reason (our terms, section 5), and we refund you within 14 days. If the zip is broken or never arrived, write to support@arling.sk and we fix it or send the money back.

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	20 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	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; Pro renders them to MP4 in three formats	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: 20 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)	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 twenty components and the core are MIT licensed, for personal and commercial projects. ARLing Motion Pro, a paid kit that turns the demos into videos, costs 49 € one-time.

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 is part of Pro.

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

Number

Island

Segmented control

Slider

Morph

Marquee

Sortable

Steps