spinSVGWeb animation studio

Website & product motion

Custom Lottie animation for websites & apps

Custom Lottie animation built for the web — hero loops, UI moments, icons, loaders, and flat product scenes in the same craft as the gallery. You get production-ready JSON (or dotLottie) sized for your page, with handoff notes for React, Next.js, Webflow, or a plain embed.

From $150 per piece

Icons and small UI from ~$150. Hero and multi-scene work quoted after the brief — one number for the scope you name.

Send inquiryBrowse Lottie examples

What is Lottie?

Lottie is vector animation exported as JSON — usually from After Effects via Bodymovin — and played back in the browser or app with a small player. You get smooth motion at any size, without video weight, and it stays sharp on retina screens.

Where teams use it

  • Marketing sites and SaaS landing pages — hero loops, feature scenes, scroll moments
  • Product UI — tabs, cards, onboarding steps, empty states, success screens
  • Mobile apps and React / Next.js front ends — icons, loaders, splash screens
  • Design systems and Webflow builds — drop-in JSON the dev or no-code stack can wire fast

What I deliver

Icon animationAnimated nav icons, feature marks, and state changes that stay crisp at 16–48 px.See examples →UI animationMicro-interactions for product pages — cards, toggles, dashboards, and builder UIs.See examples →Hero & product loopsAbove-the-fold motion that explains the product without a video embed.See examples →Loaders & preloadersBranded waits and empty states that match the site instead of a generic spinner.See examples →Logo revealsShort logo intros and loops for launch pages, apps, and social cuts.See examples →Illustrations & explainersFlat vector scenes for features, onboarding, and product stories — Lottie or MP4.See examples →

Lottie from the archive

800+ live examples in the archive — most ship as Lottie JSON. Browse by category, open any demo full-screen, then order similar for your product.

Browse the full Lottie & SVG animation gallery (800+ animations) →

Who it is for

  • Teams shipping a marketing site, SaaS landing, or app that needs custom motion — not a stock loop
  • Developers and no-code builders who want Lottie JSON they can drop into React, Next, or Webflow
  • Product and marketing leads who found a gallery demo and want the same quality for their brand

What you get

  • Custom Lottie JSON / dotLottie export optimized for your stack
  • Icon, loader, logo, hero, UI, and illustration scopes — one piece or a set
  • Integration notes for lottie-web, React players, or Webflow embed
  • Revisions agreed in the proposal

Formats & handoff

  • Lottie JSON (.json)Standard Bodymovin export. Works with lottie-web, @lottiefiles/react-lottie-player, dotLottie React, Webflow Lottie embed, and most no-code stacks.
  • dotLottie (.lottie)Compressed bundle when the JSON is large or has many assets. Same motion — smaller transfer when your stack supports it.
  • SVG fallbackFor simpler loops I can deliver native SVG when you need DOM control, CSS hooks, or a lighter file — scoped in the quote.
  • Source & handoffAE project or clean layer structure on request. Integration notes for React, Next.js, Webflow, or a plain script tag.

Performance on the web

  • Vector playback scales cleanly - no blurry video on retina displays.
  • One JSON can replace several GIF or MP4 loops with less weight when the scene is vector-first.
  • Player choice matters — I note whether to use canvas, SVG renderer, or dotLottie for your stack.
  • Mobile: shorter loops, fewer simultaneous players, and lazy load below the fold keep pages fast.
  • Every piece in the gallery is a real export — you can inspect file size and behavior before you order.

How it runs

  1. 1

    Send the moment (hero, icon, loader…), where it lives, and any gallery reference.

  2. 2

    I confirm format, file-size target, and quote. Work starts after the deposit.

  3. 3

    You get Lottie files ready to embed — plus notes if your dev needs wiring help.

Price & timeline

From $150 per piece — Icons and small UI from ~$150. Hero and multi-scene work quoted after the brief — one number for the scope you name. Single pieces start from the gallery tiers; hero and multi-scene work is quoted after the brief.

  • Single icon or loader — often a few days after deposit when the asset is ready.
  • Hero or UI set — typically one to two weeks depending on scene count and revision rounds.
  • Multi-scene product motion — timeline follows the agreed storyboard; quoted in the proposal.

FAQ

What is Lottie — and why not GIF or MP4?

Lottie is vector animation as JSON. It stays sharp at any size, weighs less than video for many loops, and is easy to embed in React, Next.js, Webflow, and apps. GIF is heavier and soft; MP4 is right for long explainers with voice — Lottie is right for web UI and hero motion.

Lottie or SVG — which will I get?

Lottie when the motion is richer or multi-layer. Native SVG when you need DOM control or a very light loop. I say which fits in the quote — see also SVG animation for SVG-first scopes.

Can I point at a gallery demo?

Yes. Open any live example, use Order similar, or name it in the brief. The delivered file is custom for your product — not a copy of client work.

What file size should I expect?

Simple icons and loaders are often under 100 KB. Hero scenes vary — I trim layers and assets so first paint stays reasonable. Very heavy scenes may split or move to dotLottie.

Do you implement it in my React / Next / Webflow site?

The default deliverable is the animation file plus embed notes. Full front-end wiring can be scoped separately if you need it.

How fast can you turn one piece around?

A single icon or loader is often a few days after deposit when assets are ready. Hero or multi-scene work follows the timeline in the proposal.

Send inquiry

Usually reply within one business day.

Other services

‹ Home