← Open-source collection
MOTION PRIMITIVES / MIT / ATTRIBUTED SOURCE

A little movement.
A lasting impression.

Six animated components, with room to play.
Find the detail that makes your next interface feel different.

Download all 6 components ↓Original project ↗
MOTION PRIMITIVES / MIT
A LITTLE LESS ORDINARYMake it thoughtful, playful, and memorable.

Some details are worth repeating.

Text loop

A changing word. A different feeling.

MOTION PRIMITIVES / MIT

Find your point of view.

Animated background

One shared surface, moving with your choice.

MOTION PRIMITIVES / MIT

Start with a feeling.

A small idea, with room to become something good.

Transition panel

A focused view with a gentle change of pace.

MOTION PRIMITIVES / MIT
A LITTLE EXTRA ATTENTION

Good details
go a long way.

Made to be noticed.

Border trail

A quiet highlight that takes the long way around.

MOTION PRIMITIVES / MIT

Hover to feel it. Tab and Enter work too.

Magnetic interaction

A button that leans into the conversation.

MOTION PRIMITIVES / MIT
01Find a spark.
02Make it work.
03Give it feeling.
04Share it.

Staggered group

A small sequence that arrives as a whole.

Animations pause when their preview is offscreen or the page is hidden. Reduced-motion preferences show static content. These examples are local interactions, not backend integrations.

THE WHOLE THING, READY TO REMIX

Real source. Clear origins.

The ZIP includes the six primitives, shared motion policy, all of these reusable examples, scoped styles, class helper, dependency versions, checksums, and original MIT notices. Use a React + TypeScript project with Tailwind CSS v4. The example entry has no Next.js dependency.

import "./styles/globals.css";
import MotionExamples from "./example";

<MotionExamples />

Preserve the original license and provenance files. BorderTrail needs CSS motion-path support. Preview and source-build checks do not establish complete browser or accessibility coverage.