Examples · updated 10 October 2026

Claude Motion-style examples, rendered for real

Most example pages show a cover image. These are the actual videos: each one is a 28-second example project rendered exactly as it ships, with sample data.

What you are looking at

Each example has six scenes: a title, a big number that counts up, a bar chart, a list of steps, a quote and a takeaway. The same six scenes appear in every style so you can compare looks rather than content.

Hover a card to play it. The numbers are sample data, written to be obviously fictional.

Paper Editorial

Essays, explainers, thought pieces

Warm paper, a serif headline and one rust accent. Unhurried, like a magazine feature.

Blueprint

Architecture, systems, technical walkthroughs

Deep navy grid with cyan linework. Everything is drawn as an outline and wipes on like a plotter.

Kinetic Poster

Launches, promos, social cuts

Black stage, condensed type at poster scale and one acid colour. Words land hard and fast.

Quiet Keynote

Product stories, investor updates

A pale stage, generous space and calm numbers on white cards. One figure owns each frame.

Chalk Lesson

Teaching, tutorials, course modules

A green board with handwritten headings and a yellow highlight. Steps are written out one by one.

Ledger

Reports, metrics reviews, finance

White page, mono figures and a single green for growth. Built so charts stay readable.

Terminal

Dev tools, changelogs, CLI demos

A charcoal terminal window in mono with a green prompt. Lines print in steps, like real output.

Sunrise

Brand reels, announcements, event openers

A coral-to-violet wash with rounded white type. Friendly and bright, with a springy entrance.

Glass

Product stories, premium launches

A pale stage with soft colour in the air and frosted white panels. Calm, expensive-looking, lots of room.

Midnight

Developer products, roadmaps, changelogs

Near-black canvas, hairline borders, tight type and a single lavender glow. Precise and quiet.

Pixel

Tech explainers, playful data stories

Warm cream with orange-to-yellow blocks and square corners. Everything arrives in steps, like pixels lighting up.

Aubergine

Team updates, internal comms, onboarding

Deep purple with warm yellow and chat-bubble panels. Friendly and conversational, like a message from a colleague.

Graph Paper

Technical docs, engineering updates, benchmarks

A light technical grid, mono type and one green for the result that matters. Reads like a careful lab notebook.

Pastel Shapes

Workshops, creative briefs, community posts

Cream paper, playful pastel geometry and mixed round and square shapes. Collaborative and slightly off-grid.

Signal

Announcements, incident reviews, bold statements

Deep black with a slashing red band and heavy white type. Urgent and impossible to skim past.

Harbor

Finance, pricing, business reviews

Deep navy type on pale surfaces with one confident indigo. Trustworthy and tidy, with a soft gradient across the top.

An example you can click through

The same content model also builds an interactive deck. This one is live in the page: change the chart, answer the quiz, drag the terms.

Questions

Are these made with Anthropic’s Claude Motion?

No. They were built with MotionKit on the open-source HyperFrames renderer, driven by a coding agent. They show the same kind of result: animation written as code.

Can I reuse these examples?

Subscribers get the source project for every example and can copy and rewrite it for their own content.

How long does one take to render?

About a minute for a 28-second 1080p clip on a recent laptop.

MotionKit is an independent product and is not affiliated with Anthropic, HeyGen, Runway, Canva, Remotion or Motion Canvas. Product names belong to their owners and are used only to describe and compare.

Make your first motion video tonight

One command, then hand your agent a document.

See plans Read the guide