Rive vs Lottie with Claude Code: state-machine animation (with the Razorpay Sprint26 case)

Vector animation breaks at two opposite points. A pretty loop needs to answer the cursor and only knows play. An interaction with states receives a linear JSON and begs for improvised code logic to fake what the format never stored.

The way out is the inputs question. Is some value shifting mid-use, changing what the animation shows next. If yes, the job wants Rive with a state machine. If only start-to-finish playback exists, the job wants Lottie with dotLottie. For the full library map, return to the complete motion guide.

This tutorial compares both models with dated facts, a direct table per job, short runtime integration in React and on the web, prompts for generating the integration with Claude Code, and a reading of the Razorpay Sprint26 case.

Rive does animation that answers mid-use. The file stores states, transitions across states, and inputs firing each transition. The code redraws no frames. It only updates inputs and lets the runtime settle which state takes the scene.

The model reads clearest in buttons. A button holds idle, hover, pressed, and disabled. In Rive, each look is a state and gestures flip boolean or numeric inputs. Animation logic stays in the asset, which holds the React component short and readable. That states-with-transitions-and-inputs description, with a button example skipping animation logic in code, sits in youngju.dev from May 16, 2026, snigdha from Jun 18, 2026, and wikivibe from Jun 12, 2026.

The cited adoption backs the interactive cut. Spotify Wrapped and Duolingo run Rive on surfaces with continuous interaction, with a cited 2B-user base, per the same three sources. The number describes runtime reach, never a result guarantee for a new site.

The learning curve weighs on whoever needs only a decorative loop. An editor with states demands naming and transition discipline, at a higher starting cost than exporting a linear JSON.

Lottie does plain playback. The designer animates in After Effects, exports through Bodymovin as JSON, and the player runs it on the site. The format was born at Airbnb on that After Effects-to-product pipeline, which explains its strength in illustrations, onboarding, empty states, and animated icons.

The limit shows in control. Lottie exposes play, pause, speed, segment swaps, and frame jumps. No state machine with named inputs in the Rive sense exists. For loops, short entrances, and illustrations trailing scroll, that control suffices. For continuous gesture answers with many states, it turns into fragile adaptation. That JSON-with-Bodymovin characterization plus the play, pause, speed limit sits in cssauthor from Mar 2, 2026 and snigdha from Jun 18, 2026.

Weight settles the JSON-to-dotLottie swap. The .lottie format packs animation into a compact container, with cited cuts of 60 to 90 percent against JSON, per cssauthor from Mar 2, 2026, youngju.dev from May 16, 2026, snigdha from Jun 18, 2026, and wikivibe from Jun 12, 2026. The same cssauthor analysis flags native scroll-sync for scrubbing vectors against viewport position.

The library helps at the starting line, with 800K+ free and premium animations cited by LottieFiles, centralizing search, preview, and import without leaving the editor.

The honest comparison runs through models, not tool preference. Rive stores state logic. Lottie stores vector-frame sequences. That split changes who authors the asset, what the code controls, and when each format pays.

For plain gestures in a React component with no state swap, the answer may skip Rive entirely. Spring gestures, transform layout, and AnimatePresence exits cover hover, press, and shared elements with less ceremony, as the micro-interactions with Motion tutorial shows. Save Rive for when gestures must flip a named state inside the asset.

The inputs question settles this call in seconds. List the values shifting mid-use. Named list (hover, progress, level) means Rive. An empty list with only play means Lottie. Teams skipping that question pay later in fragile adaptation.

Razorpay Sprint26 shows Rive's interactive ceiling on a marketing page. The site compresses 100+ product launches into one continuous journey, with scroll and click triggers spread across the page instead of one isolated animated hero. The highlight landed Aug 31, 2026 at Awwwards, with a SOTD listing in the same awards.

The most quoted number runs direct: 100+ scroll and click triggers, all built in Rive. The case analysis describes the animations as state machines answering behavior, not decorative loops pinned to scroll position. Three.js and WebGL took the spatial layer, with a walking figure, a featured shoe, and dimensional transitions across sections. The 3D assets were built and iterated in Blender Studio before moving to the browser.

The replicable pattern sits in the restraint around motion. The case holds calm areas so each Rive animation earns attention on entry. Triggers without hierarchy turn into noise and sink reading. Triggers with motive turn scroll into a panel that answers, each section requesting one gesture and returning one visible state change.

Integration wants two files and two runtimes. The designer ships button.riv with a named state machine or hero.lottie with a closed loop. The code connects the player, exposes inputs or controls, and handles visibility. None of the blocks below creates art. They connect finished art to page behavior.

The Rive block uses the React package with a state-machine hook. The crux is the state-machine name plus the input name, which must repeat exactly what the designer set in the editor.

import { useRive, useStateMachineInput } from "@rive-app/react-canvas";

export function RiveButton() {
  const { rive, RiveComponent } = useRive({
    src: "/button.riv",
    stateMachines: "Button",
    autoplay: true,
  });
  const hover = useStateMachineInput(rive, "Button", "hover");
  return (
    <RiveComponent
      onMouseEnter={() => (hover.value = true)}
      onMouseLeave={() => (hover.value = false)}
    />
  );
}

The dotLottie block uses the modern web runtime with canvas. The crux is pausing outside the viewport and driving playback by API, never loading a legacy player for plain JSON.

import { DotLottie } from "@lottiefiles/dotlottie-web";

const player = new DotLottie({
  canvas: document.querySelector("#hero"),
  src: "/hero.lottie",
  loop: true,
  autoplay: true,
});

player.play();
player.pause();
player.setSpeed(1.5);

For scroll-sync, the rule pauses autoplay and maps progress to frames. The pattern sits in the lottie-animation skill of the iart-ai repo: autoplay off, totalFrames read after load, setFrame called with progress times the total. For hover-to-play, click toggles, and cursor direction, the declarative interactivity package skips manual per-event wiring.

Good generation splits asset, pattern, and verification. The asset comes from the designer or the library. The pattern comes from the skill. Verification comes from the runtime's current docs. Without that split, the model invents input names and paths missing from the file.

The start is the iart-ai web-animation-skills repo on GitHub. It holds the lottie-animation and svg-animation skills, plus micro-interaction, 60fps-animation, and accessible-animation. The lottie-animation skill teaches integration, controls, themes, and Lottie and dotLottie exports across web, iOS, Android, and React Native. The svg-animation skill teaches stroke draw-on, path morph, and motion along paths for logos and icons.

Prompts work better with explicit names. For SVG, the repo's direct example: "Animate this SVG logo to draw itself on." Then add path ids, per-stroke duration, easing, and reduced-motion behavior. For Lottie, describe the file, target canvas, loop, autoplay, segments, and where play, pause, and speed enter. For Rive, describe the .riv file, state-machine name, inputs with types, and which event updates each input.

The frontend toolkit for Claude Code organizes the rest of the flow, with design standards, in-browser audits through Playwright and Chrome DevTools, docs through Context7, handoff through Figma. The final call stays plain. Rive needs inputs mapped with names and types. Lottie needs the designer's file or a library item with a checked license. The honest limit prevents rework: AI wires runtimes well, and it never authors the vector asset with design intent.

Interactive vectors spend budget too. Every live Rive player holds a runtime plus listeners. Every dotLottie canvas adds decoding and repaint. On pages with dozens of animations, the math closes with pausing outside the viewport, per-section lazy loads, and caps on simultaneous triggers.

The working rule runs three checks. Does the vector sit above the fold on mobile. Does it answer gestures with state changes or only loop. Does it hold meaning under prefers-reduced-motion. A loop below the fold with no gesture showing means swapping autoplay for play-on-entry with IntersectionObserver. Rive racing across the whole page means trimming to motive-carrying triggers and freezing the rest on the initial state. Essential content trapped in animation means offering a legible static equivalent with no lost information.

performant 60fps motion and accessibility

Does Rive replace Lottie on every site?

No. Rive wins wherever inputs shift state mid-use, like buttons with hover, pressed, disabled plus panels with toggles, per youngju.dev from May 16, 2026, snigdha from Jun 18, 2026, and wikivibe from Jun 12, 2026. Lottie wins wherever plain After Effects vector playback fits, with dotLottie 60 to 90 percent lighter, per cssauthor from Mar 2, 2026. On many sites both coexist behind an inputs border.

Does Claude Code author the .riv or .lottie file from zero?

Never with design intent. The expected flow is the designer shipping the .riv with named states and inputs or the After Effects-exported .lottie, or the team picking an item in the LottieFiles library past 800K options. Claude Code wires the @rive-app/react-canvas and @lottiefiles/dotlottie-web runtimes, connects inputs and controls, handles visibility, following the iart-ai web-animation-skills skill patterns.

Which prompt do I send Claude Code for an SVG logo with draw-on?

Start with the repo example: "Animate this SVG logo to draw itself on." Then add structure: path ids, stroke order, per-stroke duration and easing, prefers-reduced-motion support, static fallback. The same repo's lottie-animation and svg-animation skills detail draw-on, morph, and motion along paths with no API improvising.

When does dotLottie earn the swap over JSON?

When weight binds the page or many vectors share one viewport. The cited 60-to-90-percent range over JSON sustains the production swap, per cssauthor from Mar 2, 2026, youngju.dev, snigdha, and wikivibe. Prefer .lottie for shipping, with named themes for color swaps with no per-brand re-export, and save readable .json for debugging layers and shapes.

Rive owns state-and-input vectors, with a cited 2B-user base and examples in Spotify Wrapped and Duolingo. Lottie owns loops with plain playback, with far lighter dotLottie and a broad library. Razorpay Sprint26 shows the possible scale past 100 Rive triggers beside Three.js and Blender, highlighted Aug 31, 2026. Claude Code pays best with the lottie-animation and svg-animation skills, prompts naming assets and inputs, and API checks before long orchestrations.

The next step follows the bottleneck. For plain React gestures with no state machine, go deep on Motion micro-interactions. For shipping without jank plus a static alternative, advance to 60fps performance and accessibility.

• YoungJu Dev on web animation (landscape with Rive, Lottie, dotLottie, May 16, 2026)
• Snigdha on animation libs (React and Next.js table with Rive and dotLottie, Jun 18, 2026)
• Wikivibe on Rive and Lottie (state machines and the 2B-user base, Jun 12, 2026)
• Cssauthor on scroll and scrollytelling (dotLottie at 60 to 90 percent plus scroll-sync, Mar 2, 2026)
• LottieFiles library docs (800K+ animations, 2026)
• Awwwards, Razorpay Sprint26 (100+ Rive triggers with Three.js and Blender, Aug 31, 2026)
• iart-ai web-animation-skills on GitHub (lottie-animation and svg-animation skills with example prompts, 2026)
• iart-ai web-animation-skills, lottie-animation skill (dotLottie-web runtime, segments, themes, 2026)
• Frontend toolkit for Claude Code (flow with audits and docs, 2026)