VISUAL BUILDER
Pick a thing. Make it move.
Click any element on your live page, choose a trigger, and drag the timing until it feels right. If you can use Figma, you already know how to use this.
The complete animation stack.
Point at your live site, animate it visually, and walk away with clean, zero-dependency code. Scroll, hover, text, cursors — it's all in here.
Motion.page
Works with every platform you already use
The whole bag of tricks
Scroll
Animations
Page
Transitions
Hover &
Gestures
Timeline
Sequencing
Custom
Cursors
Stagger
Effects
SVG &
DrawSVG
SplitText
Effects
Visual builder + SDKYou point and click.
You point and click.
It writes real code.
Grab any element on your live page, choose a trigger, and set the timing. Motion.page writes the same SDK code a senior dev would, then hands it over.
Explore plansVISUAL BUILDER
Point. Click. Animate.
Here's everything the builder does — point, click, animate, and ship.
SCROLL ANIMATIONS
Pin. Scrub. Parallax.
Pinned sections, scroll-scrubbed timelines, layered parallax — the stuff that usually eats a week of JavaScript. Here it's an afternoon.
ONE-CLICK DEPLOY
Go live with one line
Publish to the CDN and paste one script tag into any site. Or download the bundle, SDK plus your animations, and host it yourself. Yours either way.
THE BUILDER
Animate any site, visually
The point-and-click animation studio you just scrolled through. Runs as a desktop app or straight inside WordPress as a plugin.
THE CANVAS
Shaders, without the math
A WebGPU shader editor you drive like a design tool. Compose in 2D, mix in 3D objects, and export to code, image, or video, all inside the desktop app.
THE SDK
The engine under it all
Every animation in Builder and Canvas runs on the Motion.page SDK. It's free on npm, has zero dependencies, and comes fully typed. Pull it into any project.
Canvas · Agent-native productionMillion-dollar
Million-dollar
assets made
with Canvas.
Canvas is a complete WebGPU visual production editor—with a real video timeline, not a folder of shader presets. Direct it with AI, refine layers, effects, and keyframes, then publish a live website embed or export MP4, GIF, and stills for social, ads, video, and promo.
Content · Cosmic
Event Horizon
Content · Cosmic
Nebula Plasma
Effect · Color
Heatmap
Your stack, coveredPlays nice with
Plays nice with
everything
WordPress, React, Astro, Webflow, Shopify, plain HTML — Motion.page drops into whatever you've already built. Your stack stays exactly as it is.
WordPressReactVueAstroElementorHTML5ShopifyWebflowWixBricksClaudeOxygenNext.jsSvelteTailwindNuxtAngularFramerSquarespaceVisual timeline editorEvery from and to,
Every from and to,
laid out on a timeline
Drag, stretch, and stack animation entries like clips in a video editor. Every change previews live on your actual site. When it looks right, it is right.
Learn more.hero-title
.subtitle
.cta-button
.hero-image
Declarative SDKOne function. One object.
One function. One object.
That's the whole API.
from, to, duration, ease — pass a plain object and you're done. You'll have it memorized before your coffee cools.
Learn moreMotion('reveal', '.card', {
from: { opacity: 0, y: 40 },
to: { opacity: 1, y: 0 },
duration: 0.6,
ease: 'power2.out',
})
.onScroll({ scrub: true });
Stagger & orchestrationMove 500 elements
Move 500 elements
like they're one
Cascade from the center, ripple from the edges, or randomize across a grid. It stays smooth when the element count gets silly.
Learn moreComposable triggersEight trigger types —
Eight trigger types —
mix them however you like
Chain .onScroll(), .onHover(), .onClick(), .onGesture() and friends on a single animation. Scroll-driven parallax that also reacts to hover? That's two lines, and there's nothing extra to install.
Learn moreText animation engineSplit, flip, scramble, mask —
Split, flip, scramble, mask —
text that performs
Split by chars, words, or lines. Reveal through a cinematic mask. Flip like an airport departure board. Scramble through katakana. Every effect is one property, and they stack.
Learn moreAnimate Everything
split: 'chars'
Three ways inOne engine,
One engine,
three doors
One animation engine, three ways to drive it — a full desktop studio, a one-click WordPress plugin, or the raw SDK. Everything you build compiles down to the same zero-dependency code.
Desktop App
The complete Motion.page experience
AI AgentDescribe it — the agent builds it
BuilderAnimate any live site, visually
CanvasCreative videos & WebGPU shaders
PlusArtifacts, Community & clean SDK export
Download the app WordPress Plugin
The Builder, native to WordPress
IncludesThe visual Builder — focused, nothing to learn
InstallOne click from WP admin, no code
RuntimeSDK loads itself
Install plugin @motion.page/sdk
The engine under all of it
ReplacesGSAP + Framer Motion
TriggersAll 8, chainable on one animation
ShipsZero deps · full TypeScript
npm i @motion.page/sdk Kind words from
people who ship.
"Genial and perfect tool. Motion Page is the most incredible tool to create complex and amazing animations with less time. I'm very impressed with the fast learning corve. MP was my favorite investment."
Andre Beltrame
"Brilliant and innovative. The next big thing in online animation. Very well crafted and very thought through."
Rene Brokop
"Once you dig and understand how the animations work, you start to see opportunities to make your website so much more interactive and modern looking than ever before."
Jonathan JerniganPick your creative weapon.
Animations, shaders, or both — flat pricing, no per-seat math.
Visual animation builder
Builder
Unlimited projects
Unlimited WordPress sites
Unlimited desktop projects
CDN and local code
All Builder features
€149/ year
That's just €12.42/mo — save 50%
WebGPU shader editor
Canvas
WebGPU-based shader editor
Unlimited canvases
Publish with CDN
Export to code, image or video
All Canvas features
€149/ year
That's just €12.42/mo — save 50%
Builder + Canvas combined
Bundle
Everything in Builder
Everything in Canvas
Priority support
Best value