AI CSS Animations

Guides · · Maxwell Prehoda

Motion Design Trends 2026: 12 Real Shifts, Each Backed by a Launch or a Piece of Work (Plus 2 Ways to Try Them)

The motion design trends that matter for 2026 come from two directions at once. Platforms changed how interfaces move: Apple's Liquid Glass and Google's Material 3 Expressive made motion more physical and springy, and browsers finally shipped scroll-driven animation and view transitions across engines. And the way motion gets made changed: AI video models gained sound, and coding agents now write, render and check motion films from a prompt.

Each of the twelve trends below is tied to a specific, dated source from 2025 or 2026, an announcement, a release note or a piece of work a named creator posted, and paired with an example you can watch. We left out anything we could not tie to a real launch or real work, so there are no predictions here, only things that already shipped.

1. Liquid Glass: materials that react to motion: Best for app and product UI on Apple platforms

Platform: Apple iOS 26, iPadOS 26, macOS Tahoe 26 (June 2025)

Liquid Glass Interface. See the prompt →

On June 9, 2025 Apple introduced Liquid Glass, a translucent material across iOS 26, iPadOS 26, macOS Tahoe 26, watchOS 26 and tvOS 26. Apple says it dynamically reacts to movement with specular highlights and transforms depending on content or context; in iOS 26, tab bars shrink as you scroll and fluidly expand when you scroll back up. Alan Dye called it Apple's broadest software design update ever.

The trend is not glass as decoration, it is surfaces whose motion explains state. Controls that grow, shrink and refract as you interact replace a lot of explicit transitions. By September 2026 creators were already recreating it in code, like vlad's Liquid Glass UI Motion, one glass element morphing through 32 beat-mapped states with WebGL2 refraction.

Our Liquid Glass Interface studio prompt below is our own take: glass panels with real refraction over vivid stripes, two buttons fusing like liquid.

Watch out for: Translucent, moving surfaces can hurt text contrast. Apple's own settings include options to reduce transparency; on the web, check contrast over the busiest background your glass can sit on.

2. Springy, physical UI motion: Best for Android apps and any UI that should feel tactile

Platform: Google Material 3 Expressive (May 2025)

Fluid Spring Interface. See the prompt →

Google announced Material 3 Expressive on May 13, 2025, and said it introduces a system of more natural, springy animations. Its examples are physical: nearby notifications react as you drag one, snapping one off the stack gives a haptic rumble, and on Wear OS scrolling follows the curve of the display while shape-morphing elements handle transitions.

Google Design's research write-up behind the update cites 46 studies and more than 18,000 participants, with people spotting key UI elements up to four times faster in expressive designs. It also notes that a strong minority preferred calmer designs, which is worth remembering.

Our Fluid Spring Interface studio prompt below is our take on the idea: one black pill morphs into a notification, a live card and a music player on springs that carry momentum.

Watch out for: Springs everywhere make an interface feel bouncy rather than precise. Use them on things people touch and drag, and keep data, text and destructive actions on calm curves.

Google Design: expressive design research ↗

3. One shape that morphs through every state: Best for product films and UI that tell a story with one element

Platform: Seen in Material's Wear OS transitions and in creator work (2025 to 2026)

Morphing UI States Loop
Morphing UI States Loop. See the prompt →

Shape morphing is the visible signature of the springy trend. Google called out shape-morphing elements for transitions on Wear OS in May 2025, and by September 2026 it had become a showcase format: zero's Morphing UI States Loop has one shape morph through a button, loader, music player, slider, toggle, tabs, chart and command palette on a 120 BPM grid, built as one HTML file with closed-form springs and rendered via Playwright.

It works because continuity is easy to follow. Instead of cutting between screens, the eye stays on one object as it becomes the next thing, which makes even a dense feature tour feel calm.

Use it for launch films and onboarding, where you want people to see that several features belong to one product.

Watch out for: Morphing only reads when start and end shapes share structure. Forcing a circle into a table looks like a glitch; add an intermediate shape or crossfade.

Our listing →

4. Scroll-driven animation without JavaScript: Best for landing pages, scrollytelling and reading progress

Platform: CSS animation-timeline, in Safari 26 (September 2025)

Slide
Live from our directory: Slide In On Scroll. Copy the HTML and CSS →

WebKit's post on Safari 26.0, dated September 15, 2025, lists scroll-driven animations: CSS animations tied to how far the user has scrolled, using `animation-timeline: view()`. Chromium browsers already had them, so 2026 is the first year a pure-CSS scroll reveal reaches most visitors without a JavaScript scroll listener.

Expect more pages where motion is tied to the scroll position itself: sections that assemble as you reach them, progress bars that are just CSS, images that reveal as they cross the viewport. It is cheaper than scroll-event code and easier to keep smooth.

Our Slide In On Scroll below uses a view timeline to slide in as it scrolls into view and back out if you scroll away, with a one-time animation on load for browsers without support.

Watch out for: Scroll-linked parallax is a known motion-sickness trigger. Give scroll-driven effects a `prefers-reduced-motion` branch that turns them off.

5. View transitions in every major engine: Best for web apps that want app-like page and state changes

Platform: View Transition API, in Firefox 144 (October 2025)

Firefox 144, released October 14, 2025, added the View Transition API for single-page apps, along with `view-transition-name`, `view-transition-class` and the `::view-transition` pseudo-elements. With Chrome, Edge and Safari already supporting same-document transitions, animated state changes between views now work across all major engines.

That moves a whole class of motion from libraries into the platform: shared-element transitions where a thumbnail grows into a detail page, list items that animate to new positions, theme switches that reveal from where you clicked. In 2026 the default expectation for a polished web app is that views change with motion, not with a jump.

The craft shifts accordingly, from building transitions to choosing what should persist across a change and keeping the transition short.

Watch out for: Cross-document (multi-page) view transitions are still not in Firefox, according to Chrome's documentation. Treat them as an enhancement that degrades to an instant change.

Chrome: View Transitions ↗

6. Kinetic type on ordinary websites: Best for marketing sites and editorial pages

Platform: GSAP 3.13, all plugins free (April 2025)

Welcome!
Live from our directory: Letters Rise. Copy the HTML and CSS →

GSAP 3.13, published April 29, 2025, made every bonus plugin free, including commercial use, with SplitText and MorphSVG moving into the main package. SplitText was also rewritten: GSAP says it is 50 percent smaller with 14 new features, including screen reader accessibility, responsive re-splitting and masking.

SplitText is a widely used tool for line-by-line and letter-by-letter text reveals, and it used to sit behind a paid membership. With it free and accessible by default, expect split-text headline reveals well beyond agency portfolios in 2026.

If you only need a simple reveal, CSS can do it. Our Letters Rise below is a pure-CSS take on the per-letter reveal.

Watch out for: Split text breaks words into many elements. Use a tool that keeps the text readable to screen readers, as the rewritten SplitText says it does, rather than hand-rolling spans.

7. AI video with native sound: Best for B-roll, mood pieces and concept tests

Platform: Google Veo 3 and Flow (May 2025)

On May 20, 2025 Google announced Veo 3, which it said can generate video with audio for the first time, from city traffic and birdsong to dialogue between characters, alongside Flow, an AI filmmaking tool that combines Veo, Imagen and Gemini and keeps characters, locations and styles in one place.

For motion designers the trend is less "AI replaces the edit" and more AI-generated footage as raw material: clips with sound that get cut, graded and combined with designed type and graphics. Several community pieces in our directory mix generated clips with code-built motion in exactly that way.

Use generated video where real footage would be expensive or impossible, and keep the type, logo and product UI designed, because that is where accuracy matters.

Watch out for: Generated footage can contain artefacts and inconsistencies between shots, and usage terms vary by plan. Review every clip frame by frame before it carries your brand.

8. Motion films written and rendered by coding agents: Best for teams that want repeatable video from code

Platform: Remotion, HyperFrames and GSAP agent skills (2026)

The biggest change in how motion gets made in 2026 is that coding agents now produce finished video. Remotion published official agent skills for making videos in React, HeyGen open-sourced HyperFrames ("Write HTML. Render video. Built for agents.") and GreenSock released official GSAP skills; our directory dates all three between January and March 2026.

The approach is code all the way down: the agent writes HTML, CSS, Canvas or React that draws every frame, renders it deterministically, and checks the frames. Workflow skills build on top, like Every's launch-video skill with its storyboard-first rule and four critic agents.

Our guide to motion design with Claude Code covers the skills and fourteen real pieces made with them.

Watch out for: Code-rendered video is precise but can look sterile. The best pieces in this style add texture, sound and timing variation deliberately.

Remotion Agent Skills ↗GSAP agent skills ↗

9. The one-line showreel: Best for testing a model's taste and finding a starting style

Platform: Prompt by kirill sh (September 2026)

Motion Designer Showreel
Motion Designer Showreel. See the prompt →

On September 24, 2026 kirill sh posted the prompt that defined the month: ask the model for a dynamic 15-second motion graphics video that shows what an incredible motion designer it is, like a showreel for a résumé. Our directory counted 41 creators who posted runs of it; this is the earliest we found.

The trend is the open brief. Instead of specifying everything, people give a short, ambitious prompt and treat the result as a creative partner's first draft. Variations followed fast: structured résumé reels, product showreels, and a deliberately terrible one.

It is a useful exercise even for professionals: run it once to see what a model reaches for by default, then write a real brief that steers away from those defaults.

Watch out for: Forty-one showreels from one prompt start to look alike. The open brief finds a starting point; your own constraints make it yours.

Our listing →

10. Handmade print and craft textures, made in code: Best for brands that want warmth instead of gloss

Platform: Risograph, cyanotype and claymation skills (September 2026)

Risograph Print. See the prompt →

A counter-trend to glassy UI: motion that looks printed, drawn or sculpted, made entirely in code. In September 2026 sevenevesai shared procedural risograph films where every frame is drawn in Canvas 2D as halftone ink plates on cream paper with registration offsets, scored with Web Audio. The same month, Alex Greenshpun published a cyanotype blueprint drafting skill and AP published a Blender claymation skill animated on twos at 12 fps.

What these share is rules taken from a physical process: misregistration, ruling-pen strokes that only draw and never fade, puppets that boil frame to frame. The imperfection is specified, which is why it reads as craft rather than as a filter.

Our Risograph Print studio prompt below is our take: a two-ink zine poster whose grainy halftones overprint and slide slightly off registration.

Watch out for: Texture costs readability. Halftones and misregistration can make small text illegible, so keep key words large and clean.

11. Isometric hairline illustration in motion: Best for SaaS explainers and feature illustrations

Platform: Claude Code skill by Chase (October 2026)

Live from our directory: Laptop Lid Opening. Copy the HTML and CSS →

Precise isometric line art, constant-width hairlines, white faces that hide what is behind them, rounded slabs and one dark accent, has become a house style for product explainers. In October 2026 Chase published it as a Claude Code skill that draws short animated videos on a single canvas and renders them to MP4, with you approving the story, look and storyboard before it animates.

It suits technical products because it is calm and exact: objects can be complex without the frame feeling busy, and motion reads clearly when everything else is grey.

Our Hairline Animations directory has copy-paste CSS versions of the style; the Laptop Lid below swings open on a spring.

Watch out for: Hairlines vanish at small sizes and on low-density screens. Check the illustration at the size it will actually appear, including mobile.

Our listing →

12. Product films made from the real product: Best for SaaS launch and feature videos

Platform: Every's launch-video skill (2026) and creator work

UI Flythrough Launch Film. See the prompt →

Launch videos in 2026 increasingly use the product's actual interface rather than mockups. Every's open-source skill makes it a rule: real UI copy only and the product on screen within three seconds. In September 2026 creators went further, running agents inside the repo so the film reuses the real frontend components, or having the model read the site's CSS for palette and type.

The style that results is honest and fast: real screens, a camera that moves across them, kinetic type that names each feature. Damir's Apple-Style Kinetic Recap skill, which measured six Apple recap films down to shot length and spring timing, shows how far the polish can go.

Our UI Flythrough Launch Film studio prompt below is our take: a 3D camera gliding across a wall of twelve app screens, racking focus from one live screen to the next.

Watch out for: Real UI means real data. Seed every screen with demo content before filming, and check for names, emails and keys.

Apple-Style Kinetic Recap ↗

14. Our Animation Studio: try a trend on your own scene: Best for testing a 2026 style without a motion team

Platform: Motions Animation Studio (paid) Ours

Most of these trends are about how motion behaves: springs, morphs, glass, texture, camera moves across real UI. Our Animation Studio is built for exactly that. Describe an animated scene and Claude draws the art, choreographs the motion and checks every frame.

Then scrub the timeline, tune eases and springs, and box any part of the frame to change it. Export to HTML, React, MP4 or GIF depending on where it will live.

Start from one of the studio prompts linked on this page, swap in your subject and palette, and you will know in an afternoon whether a trend fits your brand.

Watch out for: Trends age. Put the trend in the details, the easing, texture or transition, and keep the structure of your piece simple enough to outlast it.

How to choose which 2026 trends to use

You do not need all twelve. Pick by what you are making.

Match it to the medium

App UI: Liquid Glass materials on Apple platforms, Material 3 Expressive springs on Android. Websites: scroll-driven CSS, view transitions and kinetic type with GSAP or CSS. Video: product films from the real UI, code-rendered pieces from agent skills, and generated footage as raw material.

Match it to the brand

Precise, technical brands: isometric hairline and calm springs. Warm, human brands: risograph, cyanotype and claymation textures. Playful consumer brands: expressive springs and shape morphs. Premium hardware or software: glass, light and slow camera moves. One trend applied well beats three stacked.

Match it to the audience

Every trend here adds motion, and some people need less of it. Springs, morphs, parallax and scroll-linked effects all need a prefers-reduced-motion version, and translucent glass needs a contrast check. Google's own research found a strong minority preferred calmer designs, so keep a quiet path.

Try one trend this week

Pick the one trend that matches what you ship next: a scroll-driven reveal on your landing page, a springier toggle in your app, a launch film made from your real UI. Build a small version, test it on a phone with reduced motion on and off, and decide from that, not from a trend list.

For live examples, browse the inspiration board and our Motion Prompts directory. To build a scene in a 2026 style, describe it in our Studio.

A prompt to start from 
Make a 12-second product film in a 2026 style for [product].
One rounded pill morphs on springs into three real UI states: a notification, a live card and the main screen.
Use a soft glass material with gentle specular highlights over a vivid background, and keep all text high-contrast.
Ease every move on a spring with no overshoot on text. Provide a reduced-motion version that crossfades between the three states.

Build a scene in the Studio →

Common questions

What are the biggest motion design trends in 2026?

Physical, springy UI motion (Material 3 Expressive) and reactive glass materials (Apple's Liquid Glass), scroll-driven animation and view transitions working across browsers, AI video with native sound, and motion films written and rendered by coding agents, including handmade-looking textures and product films made from real UI.

What is Liquid Glass?

Liquid Glass is the translucent material Apple introduced on June 9, 2025 across iOS 26, iPadOS 26, macOS Tahoe 26, watchOS 26 and tvOS 26. Apple says it reacts to movement with specular highlights and transforms with content or context, such as tab bars that shrink and expand as you scroll.

Is AI changing motion design in 2026?

Yes, in two ways. Video models like Google's Veo 3 now generate footage with sound, which designers use as raw material. And coding agents with skills from Remotion, HyperFrames and GSAP write and render motion films as code, which our directory documents with credited examples from 2026.

Can I use scroll-driven animations in 2026?

Yes. Chromium browsers support CSS scroll-driven animations, and Safari added them in Safari 26 in September 2025. Add a fallback, such as a one-time animation on load, for browsers without support, and turn the effect off under prefers-reduced-motion.

Sources