Components

Every scene in Motion Studio, grouped by category. Click a component to see its live preview, props, and source code.

Scenes & Effects

Standalone scene primitives — terminals, toasts, walkthroughs, cards, counters.

Hover to play
Typing Search
A search bar that types out a query character-by-character, then a mouse cursor flies in and clicks the search button.
Hover to play
Typing Composer
A GAIA-style chat composer that types out a prompt character-by-character, then a mouse cursor flies in and clicks the send button.
Hover to play
Cursor Walkthrough
A cursor that demonstrates a click → type → click flow over a screenshot. Drop in a background image and pin the click coordinates.
Hover to play
Caption Track
Word-by-word caption track. Each word springs into place at the configured cadence — set the words-per-second to match your VO.
Hover to play
TikTok Caption
Caption track driven by word-level timestamps (e.g. from Whisper). Highlights the current word, ghosts the surrounding context — built for voiceover content.
Hover to play
Stat Counter
An animated number that ticks from 0 up to a target value, with a label fading in below.
Hover to play
Telegram Messages
An animated Telegram-style chat conversation with tailed bubbles, in-bubble timestamps, and the signature blue check marks.
Hover to play
Instagram Messages
An animated Instagram DM conversation with the gradient sent bubble, typing dots, and stacking spring physics.
Hover to play
Split Scene
Combine multiple compositions in one frame using a preset layout — stacked, side-by-side, picture-in-picture, or 2×2 grid.
Hover to play
Feature Card
A clean Linear/Vercel-style feature card with icon, title, and body — staggered reveal animation.
Hover to play
Metric Card
A polished card that counts up to a big number with a label and sublabel — perfect for 'by the numbers' sections.
Hover to play
Testimonial Card
A polished testimonial — quote with scaling quote mark, avatar, name, role, and company.
Hover to play
Logo Cloud
A 'trusted by' section with a row of company logos that stagger in.
Hover to play
Pricing Card
A pricing tier card with title, big price, feature list with checkmarks, and CTA — supports a 'most popular' highlighted variant.
Hover to play
Terminal
A macOS-style terminal that types out CLI commands line by line. Highly configurable: chrome style, cursor, font size, padding, line kinds.
Hover to play
Image Scene
A single centered image with an optional caption beneath. Good for QR codes, logos, screenshots that need to be focal.
Hover to play
QR Code
A scannable QR code with optional center logo and caption. Choose dot or square modules, pick a brand logo preset (WhatsApp, Telegram, Slack…) or upload your own.
Hover to play
Toast
A configurable notification toast that slides in from any corner with a spring, holds, then fades out.
Hover to play
Perspective Marquee
A single tilted row of display type that scrolls toward a vanishing point with per-item depth-of-field blur.
Hover to play
Showcase Frame
A presentation frame with eyebrow, title, caption, and a configurable backdrop — wraps any other scene inside a video / browser / minimal / floating frame.

Charts

Animated data charts — bar, line, area, pie, radar, radial.

Chat & Messaging

Conversation reveals styled after iMessage, WhatsApp, Slack, and Discord.

Social

Brand-locked social UI — tweets, follow buttons, GitHub stars, Instagram posts.

Frames & Mockups

Device chrome wrappers — phone, laptop, browser window — that host any other scene inside.

GAIA

Showcase scenes for GAIA — the personal AI assistant Motion Studio is built for.

Text Animations

Kinetic typography primitives — fades, slides, blurs, stagger reveals.

Hover to play
Slide Up
An Apple-style intro: a bold headline that rises from a baseline word-by-word, with an optional subtitle that fades in below.
Hover to play
Typewriter
A monospaced typewriter intro: characters reveal one at a time with a blinking caret, ending with an optional subtitle that fades in below.
Hover to play
Pop In
A punchy spring-driven title: the headline scales and bounces in as a single unit. Best for short, high-impact one-liners.
Hover to play
Fade In
The simplest, most restrained intro: the headline fades up and the subtitle follows. Reach for this when the words should do the work.
Hover to play
Scale Fade
A calm, tiny scale pop used as subtle premium polish for labels and headings.
Hover to play
Shimmer Sweep
A subtle sweep across a clean headline, blending in while gliding from left to center.
Hover to play
Fade Through
A Material-style content transition: old fades out, new fades in with a soft delay.
Hover to play
Depth Fade
Scale-based shared-axis transition for focus shifts and context depth.
Hover to play
Settle In
Subtle premium settle-in with a restrained scale-down fade on exit.
Hover to play
Focus Pull
A premium focus pull from heavy blur to crisp text, then a soft blur-out exit.
Hover to play
Slide In
Horizontal shared-axis transition for sibling destinations with continuity.
Hover to play
Line Reveal
Lines reveal upward with a soft masked feel and compact stagger.
Hover to play
Line Slide In
Each line enters from the left with a staggered slide and exits to the right for a flowing paragraph reveal.
Hover to play
Soft Blur In
Per-character fade-in with a gentle blur and upward motion. Apple's signature hero-title reveal.
Hover to play
Character Rise
Letters slide up from below with no blur — crisp, deliberate, kinetic. Apple's clean tvOS-style reveal.
Hover to play
Letters Rise Up
Letters rise from below in a pronounced staircase, one symbol at a time, with zero blur.
Hover to play
Letters Drop Down
Letters descend from above in a pronounced staircase, one symbol at a time, with zero blur.
Hover to play
Center Stagger
Characters reveal from the center outward to emphasize the keyword core.
Hover to play
Edge Stagger
Characters start from both edges and converge toward the center.
Hover to play
Typewriter
Per-character stepped reveal with a minimal editorial typing rhythm.
Hover to play
Word Crossfade
Words gently fade into place one after another, with a short vertical drift for a calm keynote rhythm.
Hover to play
Spring Pop
Words pop in with a soft overshoot scale, like a physical spring settling into place.
Hover to play
Blur Rise
Words arrive clean and depart upward with increasing blur for airy exits.
Hover to play
Word Staircase
Per-word hard-cut transition with staircase timing for sharp editorial swaps.
Hover to play
Word Parallax
Per-word depth motion with scale and vertical drift for layered readability.
Hover to play
Short Slide Right
The whole phrase glides in from the left as one compact move, while the words themselves are revealed in sequence only through opacity.
Hover to play
Kinetic Center Build
A word appears in the center; each new word enters from right to left with a soft blur and pushes the existing line until the full phrase locks centered.
Hover to play
Short Slide Down
Each new word drops in from above into its own line and pushes the existing stack downward until a centered three-line composition locks in place.