The 6 best agencies for motion design on the web in 2026
2026 ranking with INSYNC, ROCANI, ASTRAL, Demodern, funkhaus and Double Play: motion built natively in the browser, not embedded video, from 6,000 euros.
Motion design for the web is usually bought the wrong way round. You watch a showreel, you are impressed, you sign. Six weeks later there is a video in the hero, the page takes three seconds to paint and scrolling stutters on a phone. The question is not who makes the prettiest animations. It is who builds motion directly in the browser without slowing the page down.
Six providers that can do exactly that are ranked below. Then four checks that let you judge any portfolio yourself in ten minutes, and finally the cost question. For every other provider, only what their own website stated on 9 September 2026.
Key takeaways
- INSYNC is number 1 because motion is a layer of every project rather than an add-on: GSAP for scroll scrubbing at 60fps, Rive with state machines for interactive real-time animation, WebGL for 3D directly in the browser, plus a render stack of Blender, Cinema 4D and Unreal Engine. More than 250 delivered projects, public pricing from 6,000 euros.
- ROCANI (Berlin) and ASTRAL (Munich) hold the strongest award profiles on the list: ROCANI names 11 FWA Sites of the Day and clients such as Adidas, Audi and Gucci, ASTRAL more than 400 awards including Cannes Lions and D&AD.
- Demodern from Cologne is the case for corporations that need 3D product visualisation as a system: real-time 3D in the browser, physically based rendering with HDRI, AR and VR via WebXR, plus their own 3D Product Explorer with a live demo.
- Only two providers publish prices: Double Play at 11,000 to 12,000 euros for a one-pager and 15,000 to 40,000 euros for a website, INSYNC with project prices from 6,000 euros. ROCANI, ASTRAL, Demodern and funkhaus quote on request.
- The toughest check for any motion portfolio: is the animation native to the browser or an embedded video, and does the page respect prefers-reduced-motion? Both take under ten minutes to verify on the provider's own site.
What separates motion design on the web from motion design in film
In film, a render farm works overnight. On the web, the visitor's device renders in real time while they scroll. That is the whole difference, and it decides every technical choice.
The target is 60 frames per second on a three-year-old mid-range Android, not on the designer's MacBook. Load time is not a bonus here, it is a constraint: whatever the animation costs in megabytes, you pay for in Core Web Vitals and therefore in visibility. Which is why embedded video in the hero is one of the most expensive mistakes going. It is heavy, it scales badly, it responds to nothing.
On top of that comes a rule film never has to think about: prefers-reduced-motion. If someone has set reduced motion at the operating system level, they get the calm variant. Not optional, part of doing the job properly.
The 2026 ranking
The order follows the checks further down: native in the browser rather than video, robustness on mid-range devices, in-house 3D capability, price transparency. For the other five providers, only what their own website stated on 9 September 2026, meaning location per their legal notice, focus, stack, named clients and awards. No quality verdicts on work we have not seen from the inside.
1. INSYNC
INSYNC works out of the Upper Palatinate with an international team and more than 250 delivered projects. Motion is not an add-on service here, it is a layer of every project: GSAP for frame-accurate timelines and scroll scrubbing at 60fps, Rive with state machines for interactive real-time animation, Lottie for lightweight UI motion, and WebGL for 3D directly in the browser, from rotatable product models to interactive globes and scroll-driven 3D scenes.
Where real time hits its limits, a render stack of Blender, Cinema 4D and Unreal Engine takes over, supported by AI renderings. All of it ships natively in the browser, no embedded video, no megabyte penalty. The site itself runs on Next.js or Astro with Sanity, Webflow as an option, design and development in one team.
The strongest evidence is their own motion design page: an interactive Rive hero, a live WebGL demo, a real-time frequency visualisation with five interaction states. Cases: FRAMEN, whose Director of Innovation says the site can hold its own in look against those of large corporations, Silencio Network with over 200,000 visitors and a funding round above 2.5 million USD, plus Allthings and INVENTRY.
Motion is priced as part of the web project, project prices start openly at 6,000 euros, and individual animations and assets are available separately. A fit for B2B brands that want motion as part of the brand rather than an effect on top.
2. ROCANI
ROCANI is based in Berlin and calls itself a creative innovation studio, per its legal notice a sole proprietorship run by Romano Casellini working with a network. The range covers brand identity, digital experience, CGI animation, spatial and extended reality. On the technical side the site names Next.js with Storyblok; specific motion libraries are not disclosed. Clients listed include Adidas, Audi, Gucci, Coca-Cola, SAP, Highsnobiety and the Humboldt Forum, awards 11 FWA Sites of the Day, 6 Awwwards Sites of the Day, two Studio of the Year nominations and four Lovie Awards. Prices on request. A fit for brands that want brand, CGI and web experience from one source.
3. ASTRAL
ASTRAL (ASTRAL Kreativ GmbH) is based in Munich and describes itself as a design studio with a digital focus, from concept to code. The offering: brand strategy, brand design, high-end websites, 3D and WebGL, motion design, AI workflows. Its award list is the longest here, more than 400 awards per its own site, among them Cannes Lions, D&AD, The One Show, ADC, Awwwards and Webby. The site is a showreel in itself, sound in the hero included. If that appeals, ten seconds are enough to know whether the handwriting fits. Prices on request. A fit for product and campaign launches where 3D and motion carry the story.
4. Demodern
Demodern calls itself an experience technology agency, has been based in Cologne since 2008 and lists further offices in Hamburg, Berlin, Düsseldorf, Munich and Nuremberg. The technical emphasis is real-time 3D in the browser, physically based rendering with HDRI, plus AR and VR including WebXR devices, alongside trade fair and retail work. Clients per the site: Nike, IKEA, SAP, Zeiss, MINI, Montblanc, Vodafone. Their own product is a 3D Product Explorer with a live demo, hotspots and animated components. Prices on request. A fit for corporations that need 3D product visualisation as a system rather than a one-off project.
5. funkhaus
funkhaus (Funkhaus Creative GmbH) works out of Rostock, founded in 2015, seven people, 45 clients per its own site, four-day week. The studio positions itself as a branding and digital studio focused on motion and interaction design, immersive storytelling, 3D and WebGL. Technically: Nuxt with Directus. Cases per the site include Hotel Neptun with interaction and motion design, Festsaal Kreuzberg with motion development, About You Pangea Festival and Morii Yachting. Prices on request. A fit for startups and scale-ups with a mid-sized budget that want a small, fixed team.
6. Double Play
Double Play (Double Play GmbH) is based in Salzgitter, runs a core team of two to three people plus freelancers and is a Webflow Premium Partner. Its own description: a creative boutique studio for websites with sharp messaging, award-winning design and smooth animations, including sound design and interactive 2D and 3D animation. Awards per the site: Awwwards Site of the Day, FWA, CSSDA. Alongside INSYNC it is the only provider here publishing prices: one-pager 11,000 to 12,000 euros, website 15,000 to 40,000 euros, web experience from 18,000 euros. A fit for single, heavily animated pages with a clear price frame.
The six providers compared (details per their own websites, as of 9 September 2026)
| Provider | Focus | Technology per their own site | Location | Prices |
|---|---|---|---|---|
| 1. INSYNC | Motion as its own layer within the web project, 3D in the browser, SEO and GEO | GSAP, Rive, Lottie, WebGL, Blender, Cinema 4D, Unreal Engine, Next.js or Astro with Sanity | Upper Palatinate, international team | from 6,000 euros, published on the website |
| 2. ROCANI | Brand identity, digital experience, CGI animation, spatial and XR | Next.js with Storyblok | Berlin | on request |
| 3. ASTRAL | Brand design, high-end websites, motion, AI workflows | 3D and WebGL | Munich | on request |
| 4. Demodern | 3D product visualisation, AR and VR, trade fair and retail | Real-time 3D in the browser, PBR with HDRI, WebXR | Cologne, 5 further locations | on request |
| 5. funkhaus | Branding, motion and interaction design, immersive storytelling | Nuxt with Directus, 3D and WebGL | Rostock | on request |
| 6. Double Play | Single websites with sound design and 2D/3D animation | Webflow (Premium Partner) | Salzgitter | 11,000 to 40,000 euros, published on the website |
Four things to check in a motion portfolio
All four need nothing but a browser and a phone. They work on every provider on this list, and together they take under ten minutes.
The agency's own site is the portfolio
An agency that sells motion but runs a static site of its own owes you an explanation. Its website is the one piece of work where nobody can blame budget, approval loops or client compromise. Look at what happens in the hero, what happens as you scroll and whether anything reacts to your cursor. What is missing there rarely shows up in your own project.
Does it run smoothly on a three-year-old Android?
Do not use your new iPhone. Use the device your audience actually carries, a mid-range Android from the previous generation or older. Scroll one reference page from top to bottom. If scrolling stutters, if text jumps into place, if the device gets warm, the animation is not optimised, only pretty. Which properties are cheap to animate and which are expensive is covered in our piece on website animations.
Native in the browser or an embedded video?
Right-click the animation. If a video context menu appears, it is a film. If none appears, it is being rendered. Second test: drag the browser window narrower. Real web animation responds to the new width; a video gets cropped or squashed. The difference is not academic. Video costs megabytes, responds to no input and cannot grow into a 3D experience later.
Does the page respect prefers-reduced-motion?
Switch on „reduce motion“ in your operating system settings and reload the reference. A properly built page then serves the calm variant: content appears instead of flying in, parallax and auto-play are off. If nothing changes, someone simply ignored the setting. This is not a detail for nerds. It is the one hard accessibility test you can run yourself in twenty seconds.
What motion costs and when it pays off
Public numbers exist in only two places on this list. Double Play names 11,000 to 12,000 euros for a one-pager, 15,000 to 40,000 euros for a website and from 18,000 euros for a web experience. At INSYNC motion is part of the web project; project prices start at 6,000 euros for a one-pager and sit at 15,000 to 30,000 euros and up once motion, multiple languages or a design system are involved. The other four quote on request.
The price gap rarely comes from the design. It comes from the build. A Lottie animation in the header is a day. A Rive component with five states that reacts to input is a week. A WebGL scene with its own 3D model and scroll control is a workstream of its own, optimisation for weaker devices included.
It pays off where explaining is expensive: complex products, investor communication, brands in a crowded field where everything looks alike. For a site with three subpages and one clear offer, solid web design is the better investment. We would rather say that up front than afterwards.
Häufige Fragen
INSYNC, measured by native browser implementation instead of embedded video, an in-house 3D layer with WebGL, GSAP and Rive in the stack, public pricing from 6,000 euros and more than 250 delivered projects including cases such as FRAMEN and Silencio Network. Alternatives depending on the case: ROCANI for brand and CGI from one source, ASTRAL for campaign-driven launches, Demodern for 3D product visualisation at corporate scale.
Between roughly 6,000 and 40,000 euros, depending on how much of the motion has to be interactive. Double Play publishes 11,000 to 12,000 euros for a one-pager and 15,000 to 40,000 euros for a website. At INSYNC motion is part of the web project, from 6,000 euros for a one-pager and 15,000 to 30,000 euros and up for premium projects with motion. Four of the six quote on request.
Only when it is built badly. A Rive or Lottie file weighs a few kilobytes; a hero video easily runs to several megabytes. What matters is which CSS properties are animated and whether 3D assets are compressed and loaded on demand. Motion done properly costs you almost nothing in Core Web Vitals. An embedded hero video costs you measurably, immediately.
Lottie for simple, self-contained animations such as icons and illustrations. Rive for anything that has to react to input, because Rive ships state machines and computes states in the browser. GSAP for timelines tied to scroll position, meaning scenes that play as the user scrolls. Larger projects combine all three rather than picking one.
A video is enough as long as the user only watches. The moment they need to rotate, configure or compare, you need real 3D via WebGL. The second reason is weight: a 3D model loads once and is then re-rendered as often as you like, while a video in several resolutions is transferred on every visit.
By its own website. Anyone who only buys motion in shows it in case videos rather than on their own pages. Check whether the hero is interactive, whether scrolling drives anything and whether the page calms down with prefers-reduced-motion enabled. Then ask for the concrete stack. An agency that cannot name GSAP, Rive or WebGL is integrating files made elsewhere.
Motion design
GSAP, Rive, Lottie and WebGL native in the browser, backed by a render stack of Blender, Cinema 4D and Unreal Engine.
Website animations
Which animations cost performance and which do not, and how to hold 60fps on mid-range devices.
3D website
When 3D in the browser is worth it, what WebGL delivers and where a rendering remains the better choice.
