Landing page animation inspiration

Hero sections, scroll tours and pricing pages: motion for the web pages that sell a product.

That's 8 of the 358 pieces on the motion design inspiration board. Drag in any direction to see them all, and open any piece for the prompt behind it.

Browse by style

Turn inspiration into a prompt

Pick two or three pieces and name exactly what you like in each: a grid, a palette, how a word lands, how long a frame holds. Then write those parts into a prompt about your own subject. Our guide on using the board for motion design inspiration walks through an example, and the Motion Prompts directory lists every piece with its prompt.

Questions

What is motion design?: Motion design is graphic design that moves: type, shapes, interfaces, charts and 3D animated to tell a story or explain an idea. It covers title sequences, logo animations, explainer videos, product films and the small animations inside apps and websites.
Where can I find motion design inspiration?: This board puts every piece in our Motion Prompts directory in one place you can drag in any direction, and every style has its own page, such as kinetic typography or logo animation. Open a piece to see how it was made, then name the parts you like in your own prompt.
Were these animations made with AI?: Yes. Every piece started as a prompt to Claude, most often Opus 5.5 in Claude Code, which wrote the animation as HTML, CSS, SVG, canvas or three.js code that was then rendered to video. Each entry shows the prompt, or links to the creator's post when they didn't share it.
Can I use these animations and prompts?: The pieces marked Made by us are CC0: use the prompts and videos however you like. Community pieces belong to their creators, who are credited and linked on every entry, so use them for inspiration and credit them if you share their work.
How do I get my work on the board?: Email a link to your post to maxprehoda@gmail.com. Pieces made with Claude are added to the Motion Prompts directory, which puts them on the board. Creators can ask for a piece to be changed or removed at any time.

Motion design inspiration

Landing page animation inspiration

8 examples made with Claude, each with its prompt. Drag anywhere to explore.

Browse the directory

Gradient Mesh Brand Film

Made by us · CC0

Glass Cuboid Hero

by @viktoroddy

Pricing Page

Made by us · CC0

Second Brain Course Hero Video

by @TheViableEdge

Brutalist Web Type

Made by us · CC0

Five Scroll-Based Sections

by @ercankeskinx

Shop to Checkout

Made by us · CC0

Second Brain Course Hero Video

by @TheViableEdge

Brutalist Web Type

Made by us · CC0

Five Scroll-Based Sections

by @ercankeskinx

Shop to Checkout

Made by us · CC0

Glass Cuboid Hero

by @viktoroddy

Website Scroll Tour

Made by us · CC0

Second Brain Course Hero Video

by @TheViableEdge

Shop to Checkout

Made by us · CC0

Glass Cuboid Hero

by @viktoroddy

Website Scroll Tour

Made by us · CC0

Second Brain Course Hero Video

by @TheViableEdge

Gradient Mesh Brand Film

Made by us · CC0

Five Scroll-Based Sections

by @ercankeskinx

Pricing Page

Made by us · CC0

Second Brain Course Hero Video

by @TheViableEdge

Gradient Mesh Brand Film

Made by us · CC0

Five Scroll-Based Sections

by @ercankeskinx

Glass Cuboid Hero

by @viktoroddy

Brutalist Web Type

Made by us · CC0

Second Brain Course Hero Video

by @TheViableEdge

Pricing Page

Made by us · CC0

Glass Cuboid Hero

by @viktoroddy

Brutalist Web Type

Made by us · CC0

Second Brain Course Hero Video

by @TheViableEdge

Shop to Checkout

Made by us · CC0

Five Scroll-Based Sections

by @ercankeskinx

Website Scroll Tour

Made by us · CC0

Second Brain Course Hero Video

by @TheViableEdge

Shop to Checkout

Made by us · CC0

Five Scroll-Based Sections

by @ercankeskinx

Website Scroll Tour

Made by us · CC0

Glass Cuboid Hero

by @viktoroddy

Gradient Mesh Brand Film

Made by us · CC0

Second Brain Course Hero Video

by @TheViableEdge

Website Scroll Tour

Made by us · CC0

Glass Cuboid Hero

by @viktoroddy

Gradient Mesh Brand Film

Made by us · CC0

Second Brain Course Hero Video

by @TheViableEdge

Pricing Page

Made by us · CC0

Five Scroll-Based Sections

by @ercankeskinx

Brutalist Web Type

Made by us · CC0