Animated CSS templates

11 whole scenes — a hero, a pricing table, a feature grid, a sign-in card — already laid out and choreographed. A motion preset animates one box; these are the finished screen, with every part entering in a deliberate order. Open one in the editor, change the copy and colours, export the CSS.

Hero

that feels right.

Design it, tune it, export the CSS.

Launch Hero

A product hero whose copy, buttons and panel arrive in sequence.

Marketing

Three-Plan Pricing

Three plans that pop in, with the featured column raised and hover lifts on every card.

Feature Tile Grid

Six tiles arriving as a wave across the grid, each lifting on hover.

Frontend engineer

It replaced three tools and a

folder of half-finished CSS.

Testimonial Card

A quote card that rises into place, avatar first.

Stat Row

Four figures dropping in with a small overshoot.

Scroll

Built for the scroll

Each block arrives as it reaches the viewport.

Scroll Reveal Section

A section whose blocks arrive as the reader scrolls to them — no JavaScript.

Commerce

Product Card

A shop card that rises into place and lifts under the cursor.

App UI

Sign-In Card

A sign-in card that assembles downward, with fields that answer to focus.

Onboarding Screen

A phone frame that pops in, then fills with list rows.

Feedback

Toast Stack

Three notifications sliding in from the right, one after another.

Preparing your scene

Loading Screen

A splash that fades in, then breathes and fills while it waits.

Want one animation instead of a whole scene?

The gallery has 73 single animations — spinners, hovers, entrances and reveals — each with its code and a link into the editor.

Browse the gallery