Guides

Short studio notes on vector vs raster, frame-by-frame vs keyframes, how to keep Lottie and SVG fast, and how to embed Lottie in React, Next.js, HTML, Webflow, and WordPress.

• FundamentalsVector vs raster: what actually ships on a websiteThe difference between vector illustrations and raster images — and why Lottie and SVG stay sharp on the web while PNG, GIF, and video do not.
• FundamentalsFrame-by-frame vs keyframes: why a Tom & Jerry brief is not a LottieAI character stills often come with a cartoon brief. Here is the difference between classic frame-by-frame animation and the keyframe / rigged motion that actually ships on websites as Lottie or SVG.
• PerformanceKeep Lottie and SVG from slowing the pageHow to size, lazy-load, and trim Lottie JSON and animated SVG so hero loops stay smooth and the rest of the site keeps its first paint.
• ImplementationEmbed Lottie in HTML, React, Next.js, Webflow, and WordPressCopy-ready examples for lottie-web, React, Next.js, Webflow, and WordPress — plus when to use SVG renderer, canvas, or a native SVG instead.