Interactive Animation

Lottie & Rive Animation for Web, Apps & Product UI

We build animation that lives inside your website or app, not a video you embed. You get a Lottie, dotLottie, or Rive file your developers drop in like any other asset — light on mobile, sharp on any screen, and able to react when someone taps or scrolls.

See our work

Get a quote

Tell us about your project

We respond within 4 business hours · No spam, ever

+ The Problem

Your product moves. Your marketing shows it standing still.

Most teams solve interface motion the wrong way twice. First they screen-record the product and embed an MP4 — which is heavy, can't be themed, goes stale the moment the UI changes, and forces the user to watch instead of act. Then a developer tries to rebuild the animation in CSS from a Dribbble reference, spends three days on it, and ships something that stutters on mid-range Android. Neither route gives you motion that belongs in the product.

Interactive animation is a different deliverable. Instead of a video file, you get a vector animation — a Lottie JSON, a dotLottie bundle, or a Rive file — that renders at runtime. It stays crisp at any resolution, respects your brand colours, can be paused, scrubbed, looped, or triggered by scroll position, hover, or app state. It sits inside your codebase like any other asset, and your engineers control when it plays.

That distinction matters most in the four places teams ask us for it: landing page hero sections that need to explain a product in three seconds, SaaS interfaces where an empty state or a loading moment is doing real UX work, mobile apps where every megabyte is scrutinised, and event or kiosk screens that loop for eight hours straight without a video player choking on them.

+ Use cases

Where interactive animation earns its place.

Tell us where it runs — browser, app, or a screen on a booth floor — and we'll tell you which format fits.

Logo Animation

Your mark animated for site headers, video stings, and app launch. Ships in kilobytes as a Lottie — no video embed needed.

Splash Screen Animation

The first two seconds of your app. Covers the cold-start gap with brand motion instead of a frozen static logo.

Landing Page Hero Section

The animation above the fold. Explains the product in three seconds and stays sharp on retina without a 20MB MP4.

Animated Data Flow Explainers

How data, money, or requests move through your system — the diagram your sales deck needs, animated for the landing page.

Animated Charts & Dashboards

Graphs that build, counters that count, metrics that update. For product pages and live dashboard displays.

Animated Icons

Icon sets that respond to hover, tap, and state change. Delivered as a consistent library, not one-off files.

Animated UI Elements

Toggles, switches, checkboxes, accordions, and cards. Small motions that make an interface feel responsive rather than laggy.

Animated Bottom Navigation

Tab bar transitions and active-state morphs for mobile apps. Built as a Rive state machine so one file covers every tab.

Loaders & Progress Bars

Loading states, skeleton screens, and progress indicators. Makes a three-second wait feel intentional instead of broken.

Empty States & Error Screens

The blank dashboard, the zero-results page, the 404. Animation turns the weakest screens in your product into brand moments.

Success and Reward Moments

Confetti, streaks, badges, checkmarks, and level-ups. The micro-celebration that makes users repeat the action.

App Onboarding Sequences

Animated first-run screens that show new users what to do and why, without a wall of instructional text.

AI Assistant & Voice States

Listening, thinking, and speaking indicators for chat and voice interfaces. The states that tell users the system is alive.

Animated Characters

Rigged characters for onboarding, mascots, and product storytelling. Reusable across screens once the rig is built.

Lip-Synced Characters

Characters animated to your voice track, frame-accurate. For explainer moments and in-product guidance where a person should speak.

Animated Emojis & Sticker Packs

Reaction sets for chat, community, and social products. Delivered in the sizes and formats each platform requires.

Interactive Booth Displays

Touch-responsive animation for trade show stands. Built for the screen dimensions and playback software you'll actually have on site.

Kiosk & Digital Signage Loops

Retail kiosks, reception walls, and wayfinding screens. Runs offline for eight hours straight without a video player choking.

+ Live animations

Real files, playing right here.

Every animation below is a Lottie or dotLottie asset rendering live in your browser at this moment — the same file format we hand to your engineering team. Nothing on this row is a video.

Website UI Sequence

Landing page interface animation built for a scroll-triggered hero section.

Horizontal Scroll Story

Scroll-linked sequence where the animation advances with the reader's position.

Dashboard Interaction

SaaS interface motion — panel transitions and state changes for a product UI.

Interface Micro-Interaction

A single UI moment animated for feedback. Under 5KB as a Lottie file.

Animated Logo Mark

Brand mark as a dotLottie for site headers and app splash screens.

Logo Reveal

Loading-state logo animation that ships in about 2KB.

Every animation above ships as a JSON or dotLottie file — dropped straight into React, Vue, Swift, Kotlin, or Webflow with a few lines of code.

Companies we've worked with

Client Logo
Client Logo
Client Logo
Client Logo
Client Logo
Client Logo
Client Logo
Client Logo
Client Logo
Client Logo
Client Logo
Client Logo
Client Logo
Client Logo
Client Logo
Client Logo
+Case studies

Three problems, three shipped solutions.

What the client came with, what we built, and what their developers received.

01HyperVergeFinTech · SDK

Micro Animation for KYC SDK

The problem

HyperVerge makes KYC software that banks, telecom companies and NBFCs add to their own apps to verify a customer's identity. When someone submits a selfie or a document, the checks run in the background and take a few seconds. With nothing on screen during that wait, people assume the app has frozen and close it. HyperVerge wanted animations that fill the wait and show which stage the check has reached. The difficulty was branding. HyperVerge's own colour is purple, but the SDK runs inside someone else's app — SBI's screens are blue, Axis is magenta. A purple animation would look wrong in all of them, and building a separate set of animations for every client was not practical.

What we shipped

We built the animations as .lottie files with the colours kept as variables instead of baked into the artwork. The developer passes a single hex code when the SDK starts up, and the animation renders in that bank's brand colour at runtime — no new file, no rebuild, no request back to us. We made a full set covering the stages users actually wait through, including Selfie Verification, Cancelled Cheque Verification and DigiLocker progress bars. Each file was compressed to 30–50 KB, so it adds almost nothing to the size of the SDK, which matters when your product is something other companies have to embed. The same files run on the Android SDK, the iOS SDK and the web.

.lottie30–50 KB eachAndroidiOSWeb
02KTTMManufacturing · Kiosk

Kiosk App for ITME + CITME 2025

The problem

KTTM brought their RX 300 machine to the ITME and CITME 2025 shows. The machine is very large, and on the show floor it could only be run for about ten minutes at a time. For the rest of the day visitors stood in front of a stationary machine with no way to see what it does, and no way to tell what was new in this model. Toyota Textile Machinery wanted the newest features explained at the stand itself, on two 55-inch touch displays mounted in front of the machine, so a visitor could work through them at their own pace whether or not the machine happened to be running at that moment.

What we shipped

We built a web-based kiosk app with Rive driving the interactions, so every screen answered a touch immediately and the whole thing ran offline with no venue wifi to depend on. It shipped on two Raspberry Pi 4 units, one behind each display. We photographed the machine at their factory for reference and produced three 3D animations of the features that are hard to see in person — the parts sitting inside the housing or moving too fast to follow. Visitors could pick any section of the machine and play the sequence for it, so the stand kept explaining the product for the full show day instead of only during the ten-minute run.

Rive3 × 3D animations2 × Raspberry Pi 42 × 55″ touchscreens
03Client nameIndustry · Platform

Project name

The problem

One or two sentences on what was broken — where users dropped off, what the static screens failed to explain, what the old asset cost to maintain.

What we shipped

What we actually built and how it shipped. Name the format, the trigger, and where the file ended up in their stack.

dotLottie12 KBSwift
+ Formats compared

Video vs Lottie vs Rive vs Spline.

All four add motion to a product, but they work differently. The one you pick decides how heavy the file is, whether it can react to the user, and how easy it is to change later.

Compare Video (MP4) The familiar default Lottie The default for UI motion Rive When the animation must react Spline For 3D moments on the web
Best for Explainers, ads, footage, anything photoreal Icons, logos, loaders, onboarding, empty states Interactive buttons, nav, characters, toggles, games-lite 3D hero scenes, product objects, spatial storytelling
Output file .mp4 or .webm .json or .lottie .riv (binary) Hosted scene or exported bundle
Typical weight 2MB–50MB+ 2KB–500KB for vector work 1KB–200KB, usually smaller than Lottie 1MB–10MB+, GPU-dependent
Interactivity None — play, pause, scrub Playback control only — play, pause, seek, segments Native — state machines respond to input and app state Pointer, scroll, and camera events
3D Yes, pre-rendered No No (2.5D effects only) Yes — true 3D
Transparency Not in MP4 — needs an HEVC MOV plus a WebM to cover all browsers Native — transparent background by default Native — transparent background by default Native — transparent canvas background
Runtime needed A native video player or an embed lottie-web, lottie-ios, lottie-android, dotLottie Rive runtime Spline runtime (WebGL)
Built in After Effects, Premiere, Blender After Effects (Bodymovin export) Rive editor Spline editor
Platforms Everywhere, including email and ad platforms Web, iOS, Android, Flutter, React Native Web, iOS, Android, Flutter, React Native Web primarily
Cost to produce Moderate — scales with runtime Lowest per asset — fastest to build and revise Moderate — designing the states adds build time Higher — 3D modelling, lighting, and materials take time
Tool & running cost Free to make; streaming bandwidth is ongoing Free — open-source players, no licence, no hosting Free to use; paid plans only matter for large teams Free to use; hosting and bandwidth add up on big scenes
Who edits it later Any video editor Any After Effects animator Someone trained in Rive Someone trained in Spline

Video (MP4)

The familiar default

Video is what everyone reaches for first, and for a large class of work it is still the right answer: anything with live footage, photoreal 3D, heavy effects, or a voiceover-led story is a video and nothing here changes that. It plays on every device with no special runtime, and any editor can update it. The problem starts when you put it inside a product. An MP4 cannot be restyled to match a theme, cannot react to a tap, cannot scale to a 4K kiosk without shipping a bigger file, and goes stale the moment the UI it shows changes — and at 2 to 50MB it is comfortably the heaviest thing on the page. Use video to explain your product. Use one of the other three to build motion into it.

Strengths

  • Plays everywhere with no library or runtime
  • The only option for live footage and photoreal effects
  • Any video editor can update it
  • Well-understood production process, predictable to budget
  • Works in email, ads, and platforms you do not control

Trade-offs

  • Heaviest format by a wide margin — megabytes, not kilobytes
  • No interactivity beyond play, pause, and scrub
  • Cannot be themed or restyled after export
  • Fixed resolution — scaling up means a bigger file
  • Transparency needs an HEVC MOV and a WebM, delivered as a pair
  • Goes stale whenever the interface it shows changes
  • Streaming bandwidth is an ongoing cost

Lottie

The default for UI motion

Lottie is the safe default and the reason is boring: it is a JSON description of vector shapes over a timeline, so it stays sharp at any resolution, weighs a fraction of the equivalent video, and plays identically on web, iOS, and Android from one file. It came out of After Effects, which means the talent pool is enormous — you are not locked to one studio or one tool. Your code decides when it plays and which frame range runs, so a single file can serve a loading state, a success state, and an idle loop. For roughly 80% of what teams call "interactive animation", Lottie is the correct answer and the argument stops there.

Strengths

  • Renders identically across web, iOS, Android, and Flutter
  • Tiny files for vector work — often under 50KB
  • Huge talent pool; any AE animator can maintain it
  • Colours and speed can be overridden at runtime
  • Plays fully offline once loaded
  • No licence fees, no runtime cost, no hosting

Trade-offs

  • Timeline only — it cannot react to input on its own
  • Embedded raster images inflate file size fast
  • Heavy masks, mattes, and effects cost CPU on low-end phones
  • No 3D, no real depth
  • Complex AE effects silently do not survive the export

Rive

When the animation must react

Rive is what you use when the animation needs logic rather than a timeline. Its state machine lets one file hold idle, hover, pressed, loading, and success states and move between them based on inputs your code passes in — so a bottom navigation bar or an animated toggle becomes a single asset instead of six exported clips and a pile of conditional playback code. Files are binary and typically smaller than the Lottie equivalent, and it supports bone rigging and mesh deformation, which makes it the better tool for characters. The cost is ecosystem: it is one company's editor and runtime, and the pool of people who can pick up your file later is far smaller than After Effects.

Strengths

  • Real interactivity built into the file, not bolted on in code
  • One asset covers every state — less integration code
  • Smaller binaries than equivalent Lottie files
  • Bone rigging and mesh deformation for characters
  • Designers can adjust behaviour without a developer

Trade-offs

  • Proprietary editor and runtime — a real lock-in decision
  • Much smaller talent pool than After Effects
  • Runtime overhead is not worth it for a static loop
  • Source lives in Rive, so it sits outside your AE library
  • Fewer battle-tested integrations on older stacks

Spline

For 3D moments on the web

Spline is a browser-based 3D tool that makes real-time 3D scenes achievable without a Blender-and-Three.js pipeline. When your product is a physical object, or the landing page needs depth and a camera that follows the cursor, it produces something Lottie and Rive structurally cannot. The trade-off is weight and battery: you are shipping WebGL, and a Spline hero can cost several megabytes plus continuous GPU work, which shows up directly in your Core Web Vitals and drains phones. We use it deliberately for one hero moment on a desktop-leaning page, never for in-product UI, and always with a static fallback for mobile and low-end devices.

Strengths

  • Genuine 3D — depth, lighting, materials, camera moves
  • Far faster to produce than a hand-built WebGL scene
  • Strong for physical products and spatial concepts
  • Interactive by default — responds to pointer and scroll

Trade-offs

  • Heavy payloads that hurt LCP and INP on mobile
  • Continuous GPU cost — noticeable battery drain
  • Scene hosting and bandwidth are an ongoing bill
  • Wrong tool for micro-interactions and app UI
  • Effectively web-only; not a mobile app asset format
  • Needs a static fallback for low-end devices

How we choose

First, if the piece has footage, a voiceover, or photoreal 3D, it is a video and the rest of this table does not apply. For everything that lives inside the product, start with Lottie and only move off it for a reason. If the asset needs to respond to input or hold multiple states, that reason is Rive. If the subject is a three-dimensional object and the page can afford the weight, that reason is Spline — for one hero moment, with a fallback. If the motion depends on data that only exists at runtime, it belongs in code and no file format will help. Most projects we ship end up as Lottie for the bulk of the assets, Rive for the two or three that need to react, and a short list of code-level transitions the developers own. We will tell you which bucket each item falls into before quoting, not after.

+Works with your stack

Ships into the stack you already use.

Lottie and Rive have runtimes for the browser, both mobile platforms, and the major site builders. Your developers add the file the same way they would add an image.

Web
React
Next.js
Vue
Angular
Svelte
iOS / Swift
Android / Kotlin
React Native
Flutter
Webflow
Framer
WordPress
Shopify
Wix
Unity

Not on the list? Ask us — there is a runtime for almost everything, and where there genuinely isn't one we will tell you before you commit.

How we work

From brief to final render in 4–6 weeks

A clear, structured process so you always know where your project stands. No surprises, no scope creep.

Scope & Technical Fit

We start with where the animation runs — React, SwiftUI, Jetpack Compose, Webflow, or a kiosk player — because the platform decides whether Lottie, dotLottie, or Rive is the right format. We also agree the file weight budget before design begins.

Design & Storyboard

Static frames first, in your design system. You approve the look and the key states before anything moves, so revisions happen at the cheap stage.

Animation Build

Built in After Effects with Bodymovin, or natively in Rive when the asset needs state machine logic. We animate only transform and opacity properties where possible — the difference between smooth and janky on mid-range devices.

Optimisation Pass

Expressions baked, unused layers stripped, paths simplified, images embedded or externalised depending on your loader. You get the smallest file that still looks right.

Handoff & Integration Support

Files delivered as JSON, dotLottie, or .riv with a short integration note covering the player library, trigger points, and fallback behaviour. We stay available while your developers wire it up.

+ Frequently asked questions

Questions about Interactive Animation

What is the difference between Lottie and Rive?

Lottie is a timeline animation exported from After Effects — it plays start to finish, and your code controls when it starts, stops, or which segment it plays. Rive uses a state machine, so a single file can hold idle, hover, pressed, and success states and switch between them based on input. Use Lottie for anything that plays. Use Rive when the animation needs to react. We build both and will tell you which one your use case actually needs.

How small are the files?

It depends entirely on what's in them. A logo animation or a micro-interaction built from vector shapes lands between 2KB and 50KB. A complex full-screen interface sequence with detailed illustration can reach several megabytes, at which point we usually recommend simplifying the artwork or splitting it. We agree a file weight budget with you before we start designing, and we hit it.

Do our developers need a special library to use these?

Yes, one lightweight one. Lottie files need lottie-web, lottie-react, lottie-ios, or lottie-android depending on your platform. dotLottie files use the dotLottie player. Rive files use the Rive runtime. All are open source, well maintained, and install in a single package command. Our handoff note names the exact library and includes the few lines of code needed to mount the animation.

Can you animate our existing design system components?

That's the preferred way to work. Send us your Figma file and we animate your real components with your real tokens, so the output drops into the interface without a visual mismatch. If your design system is still forming, we can design the assets and hand back the static source files too.

Will the animation work offline, on a kiosk, or on a big screen?

Yes. Because the animation is vector, it scales to any resolution without softening — the same file works on a phone and on a 4K booth display. Lottie players run fully offline once loaded, which matters at trade shows where the venue wi-fi fails. Tell us the screen dimensions, orientation, and playback software and we build to that spec.

We already have a brand video. Can you convert it to Lottie?

Not directly, and be cautious of anyone who says otherwise. Lottie is a vector format — it cannot contain live footage or complex raster effects. What we can do is rebuild the key moments of an existing video as vector animation, matching the style. That's a new build using your video as the reference, not a file conversion.

Can the animation respond to user input?

With Lottie, your developers control playback — play on scroll, play on hover, play a specific frame range on click. With Rive, the responsiveness is built into the file itself through a state machine, so the animation handles its own logic and your code just passes it inputs. For anything genuinely interactive rather than triggered, Rive is the better answer.

How is this priced?

Per asset and per complexity, not per minute — a set of eight micro-interactions and one full-screen hero sequence are very different pieces of work even though both might run three seconds. Send us the screens or the brief and we'll come back with a fixed quote within 4 working hours.

get in touch

Tell us where the animation runs.

Share the flow, the platform, and your deadline. We respond within 4 working hours with a format recommendation and a fixed quote.

Optional — useful if you prefer a quick call

+ Explore other services
Product Demo AnimationMotion Graphics
+

We serve Interactive Animation clients across India

Mumbai Bangalore Delhi NCR Hyderabad Pune

Ready to ship animation inside your product?

Tell us about your project. We'll get back within 4 working hours with a plan and a ballpark estimate.

Start a project Chat on WhatsApp