MotionCraft
AWWWARDS
95+ Components

Build

Websites

That Win

Awards

The animation toolkit for developers who refuse to build boring.Rules are suggestions.

Animation components for developers who refuse to build boring websites.

0+
Components
0
Design Directions
0
Animation Libraries
0%
TypeScript

New in v2.0

Interactive
Components

0+

Components

0

Design Systems

0K+

Lines of Code

$0

Cost (MIT)

Dock

macOS-style magnification dock. Hover to see the magic.

Spotlight Cards

Cursor-tracking radial spotlight. Move your mouse around.

12+

Backgrounds

Particles, aurora, gradient mesh, shaders

10+

Cards

Tilt, glow, bento, stack, living system

15+

Scroll FX

Parallax, video scrub, stagger, reveal

Interactive Buttons

Magnetic, ripple, and confetti effects. Click them.

Liquid Glass

iOS 26-style liquid glass with 3D tilt refraction. Hover to see the depth.

Glowing Border

Animated pulsing glow border. Uses the direction accent color.

Shimmer Border

Rotating gradient shimmer around the border. Pure CSS magic.

Frosted Panel

Heavy frosted glass with noise texture overlay. Premium feel.

Animated Tabs

Smooth layout animations with spring physics.

110+ components across backgrounds, cards, scroll animations, text effects, 3D, buttons, layout, navigation, transitions, and interactive elements.

Marquee

Infinite scroll marquee. Pauses on hover.

GSAP
Framer Motion
Three.js
Lenis
Tailwind
TypeScript
Next.js 14
React 18
GSAP
Framer Motion
Three.js
Lenis
Tailwind
TypeScript
Next.js 14
React 18
GSAP
Framer Motion
Three.js
Lenis
Tailwind
TypeScript
Next.js 14
React 18
GSAP
Framer Motion
Three.js
Lenis
Tailwind
TypeScript
Next.js 14
React 18
Particles
Aurora
Tilt Cards
Spotlight
Magnetic
Confetti
Dock
Orbit
Particles
Aurora
Tilt Cards
Spotlight
Magnetic
Confetti
Dock
Orbit
Particles
Aurora
Tilt Cards
Spotlight
Magnetic
Confetti
Dock
Orbit
Particles
Aurora
Tilt Cards
Spotlight
Magnetic
Confetti
Dock
Orbit
Everycomponentisdirection-aware,fullytyped,andreadytocopy-pasteintoyourproject.

BTNS

TAP 'EM
Component Library

Every Component. Production Ready.

Copy, paste, ship. Each component adapts to your chosen direction automatically.

Cards

TiltCard

3D perspective tilt on hover

Hello World
Text

TextGenerate

Word-by-word text reveal

Hover me
Effects

MagneticButton

Cursor-following magnetic pull

Scroll

ParallaxScroll

Multi-layer scroll parallax

Cards

GlowCard

Radial gradient glow on hover

3D

Globe

Interactive wireframe globe

Design System

Four Directions. One Library.

The same components, completely different feelings. Pick your aesthetic or let users choose.

Developer Experience

Three Lines. Award-Worthy.

Import, compose, ship. Every component is copy-paste ready with full TypeScript support.

hero.tsx
1
FREE & OSS