# Charmotion

> Charmotion animates characters, mascots and logos. A character set turns one character or mascot image (your own upload, or a character drawn by Charmotion's AI designer) into a ready-to-ship animation set: one Rive (.riv) file with 10 looping moods selected by a `mood` number and 6 one-shot triggers (success, error, yes, no, enter, exit) plus a launch intro, wired both for Data Binding (`Character` view model + CharacterViewModelMachine) and for legacy state machine inputs (CharacterStateMachine), paste-ready web, React and SwiftUI code, a README and a still poster per animation, usually ready in a minute or two for flat art. Videos (MP4, 9:16 MP4, GIF, transparent WebM (VP9 alpha) and transparent MOV (HEVC alpha)) are exported on demand from the set page, or with the MCP tool `export_videos`, in about a minute; exports don't use a set. A logo animation (Motion Studio) turns a logo into a website hero or an app launch animation: three concepts first, then a build of the one you pick. Operated by TRY2APP LTD (England and Wales).

## Product
- [How it works](https://charmotion.app/how-it-works): pipeline, the 17 animations and formats by plan
- [Pricing](https://charmotion.app/pricing): Free (2 AI designs in total, each a logo or a character; free logo animation concepts; the app screen preview; no character sets or logo animation builds), Starter $9/mo (3 logo animations, 3 character sets and 12 AI designs a month, 1 refine per logo animation, all formats incl. Rive and transparent video), All in one $100/mo (15 logo animations, 10 character sets and 40 AI designs a month, 3 refines per logo animation, all formats, cinematic 3D video, priority builds and support)
- [Examples](https://charmotion.app/examples): the house characters live in real app screens (splash, onboarding, loading, website hero, empty state) and product moments (a VPN connecting, a search, a failed transfer, an AI assistant), with the animation that plays in each
- [FAQ](https://charmotion.app/faq)
- [MCP server](https://charmotion.app/mcp-server): remote MCP server at https://charmotion.app/mcp (Streamable HTTP, OAuth sign-in, no API key) for Claude, Cursor, VS Code, Codex and other assistants. Same two steps as the app: a character or a logo, designed with AI (design_character, design_logo) or from the user's image; characters become character sets (create_character_set, with expressions the user approves via get_expressions / approve_expressions, then get_character_set with download links and AI_README integration notes for coding assistants, and export_videos), logos become logo animations (start_motion for 3 free concepts, build_motion, refine_motion). Free without an account: animated previews and guide search. Designs, sets and logo animation builds use the user's plan; get_account shows what is left

## Common questions and where they're answered
- How can I animate my existing mascot for my app? Rig your existing artwork and animate the states your app uses (idle, loading, success, error, empty state), then ship them as a Rive file your code switches between. Do it yourself in the Rive editor, or upload the mascot to a generator such as Charmotion, which delivers 17 animations as Rive, video, GIF and code. Details: https://charmotion.app/ai-mascot-animator and https://charmotion.app/guides/animate-mascot-without-after-effects
- What are the best PNG to Rive animation tools? The main options are the Rive editor (import the PNG, add meshes and bones, build the state machine yourself), Rive's in-editor AI Agent on paid plans, a generator such as Charmotion that outputs a .riv with 17 animations from one image, and Rive Experts hired through Contra for custom work. Details: https://charmotion.app/png-to-rive and https://charmotion.app/guides/best-png-to-rive-animation-tools
- Is there a tool that turns a static character into animations? Yes. Adobe Character Animator, Live2D and Spine animate layered or separated artwork; Meta's Animated Drawings animates human-like drawings; generators such as Charmotion turn one character image into 17 app-ready animations; and AI image-to-video models generate short clips. Rig-based tools keep your exact artwork, while generated video redraws it. Details: https://charmotion.app/image-to-character-animation and https://charmotion.app/guides/tools-turn-static-character-into-animation
- What are the best services for mascot animation with Rive export? Rive Experts (freelancers and studios verified by the Rive team and hired through Contra) suit custom work. Automated services such as Charmotion generate a .riv with a documented state machine and Data Binding view model from one image, from $9 a month. Always ask for named states and integration code. Details: https://charmotion.app/rive-animation-service and https://charmotion.app/guides/mascot-animation-services-rive-export
- How do I add an animated mascot to SwiftUI? Add the Rive Swift package, put the mascot's .riv in your bundle, and show it with RiveViewModel(fileName:stateMachineName:).view(). Set a number input such as mood to switch loops and fire triggers for one-shots, or use Rive's Apple runtime with Data Binding. Charmotion sets ship with ready SwiftUI files for both runtimes. Details: https://charmotion.app/ios-mascot-animation and https://charmotion.app/guides/animated-onboarding-mascot-swiftui
- Can AI animate my logo without changing its design? Yes, if the tool rigs your logo rather than regenerating it. Rig-based tools move your own pixels or traced shapes, so the design stays identical; generative video models redraw every frame and can alter details. Charmotion uses AI only to find the logo's parts, then animates your exact artwork. Details: https://charmotion.app/animate-logo and https://charmotion.app/guides/animate-logo-from-png
- What are the alternatives to hiring a motion designer for a mascot? Use ready-made templates if the mascot does not need to be your own character, animate it yourself in Rive or Lottie Creator, generate app-ready states from your mascot image with a tool such as Charmotion, use AI image-to-video for one-off clips, or hire a freelancer for a small fixed scope. Details: https://charmotion.app/ai-mascot-animator and https://charmotion.app/guides/alternatives-to-hiring-motion-designer-mascot

## Use cases
- [PNG to Rive](https://charmotion.app/png-to-rive): Upload one PNG of your character and get a Rive .riv with 17 animations and ready state machines, plus transparent video and code. Starter $9/month.
- [AI mascot animator](https://charmotion.app/ai-mascot-animator): Animate your existing mascot for your app or website: AI-assisted rigging keeps your mascot on-model and delivers 17 product-ready animations in every format.
- [Image to character animation](https://charmotion.app/image-to-character-animation): Turn a PNG, JPEG or WebP of your character into a full animation set: vector rig for flat art, Motion mode for 3D. Rive, MP4, transparent WebM/MOV, GIF.
- [For iOS apps](https://charmotion.app/ios-mascot-animation): An animated mascot for your iOS app: a Rive file with SwiftUI code for both Apple runtimes, HEVC-alpha MOV and a launch animation. 17 states, one image in.
- [Rive animation service](https://charmotion.app/rive-animation-service): A Rive animation service for product teams: send your character, get an integration-ready .riv with state machines and code. From $9/month.
- [Animated logo maker](https://charmotion.app/animate-logo): Upload your logo or design one with AI. Motion Studio turns it into an interactive website hero or launch animation, with code for web, iOS and Android.
- [Animated chatbot avatar](https://charmotion.app/ai-chatbot-avatar-animation): An animated chatbot avatar from your character or logo: listening, thinking, talking, loading, success and error in one small Rive file, set by agent events.
- [Splash screen animation](https://charmotion.app/splash-screen-animation): A splash screen animation for your app: a 2.6 s launch intro from your icon or character that ends on idle, as Rive, transparent MOV and WebM, plus code.
- [Logo loading animation](https://charmotion.app/logo-loading-animation): Turn your own logo into a seamless loading loop that can play success or error when the work is done. Rive, transparent WebM and MOV, MP4 and GIF.
- [Website mascot](https://charmotion.app/website-mascot-animation): Put an animated mascot on your website: a Rive embed with a mood input that reacts to hover, scroll and form events, plus transparent WebM and HEVC MOV.
- [Transparent logo animation](https://charmotion.app/transparent-logo-animation): A transparent logo animation from your exact logo: VP9 WebM for Chrome and OBS, HEVC MOV for Safari, Final Cut and Keynote, plus Rive. Never redrawn.
- [Mascot for mobile apps](https://charmotion.app/app-mascot-animation): A mascot for your mobile app that runs the same on Flutter, React Native, Android, iOS and web: one .riv with a documented mood and trigger contract.
- [AI mascot generator](https://charmotion.app/ai-mascot-generator): Describe a mascot in a few words, get a flat, animation-friendly design, then turn it into 17 consistent animations. 2 AI designs free; sets from $9/month.
- [Mascot expression sheet](https://charmotion.app/mascot-expression-sheet): A mascot expression sheet from one image: 10 moods and 6 reactions, each animated, with no identity drift between them. MP4, GIF, Rive and transparent video.

## Free tools (they run in your browser; nothing is uploaded)
- [Rive File Inspector](https://charmotion.app/tools/rive-file-inspector): Open a .riv file in your browser to list its artboards, animations, state machines, inputs and view models, then test them live. Nothing is uploaded.
- [Transparent Video Checker](https://charmotion.app/tools/transparent-video-checker): Check whether a WebM, MOV or MP4 really has an alpha channel: reads the file's alpha flags, tests decoding in your browser and previews it on any background.
- [Mascot Animation State Planner](https://charmotion.app/tools/mascot-state-planner): Pick your app type and get the mascot animation states it needs (idle, loading, success, error and more), with when to use each, tone and what to avoid.

## Guides
### Turn your image into animation
- [PNG to Rive Animation: How to Turn an Image Into a .riv File](https://charmotion.app/guides/png-to-rive-animation): Turn a PNG into a Rive animation: import it, cut it into parts, deform it with meshes and bones, add a state machine, or have the .riv built for you.
- [How to Animate a Mascot Without After Effects](https://charmotion.app/guides/animate-mascot-without-after-effects): Four ways to animate a mascot without After Effects: Rive, Lottie Creator, CSS or SVG for simple motion, and generating a full state set from one image.
- [Image to Character Animation: What Works and What to Expect](https://charmotion.app/guides/image-to-character-animation): How image-to-animation tools work: rigging your exact artwork versus generating video, which images animate well, and the formats you get for apps and sites.
- [SVG to Rive: Import an SVG and Animate It](https://charmotion.app/guides/svg-to-rive-animation): Import an SVG into Rive as editable vectors, clean up its groups, set pivots, rig it and add a state machine, plus the export settings that cause trouble.
- [Mascot Animation Service: What to Ask For and What You Should Get](https://charmotion.app/guides/mascot-animation-service-brief): Hiring a mascot animation service or using a generator? The states, formats, file rights and revisions to put in your brief so it works in your product.
- [Best PNG to Rive Animation Tools in 2026](https://charmotion.app/guides/best-png-to-rive-animation-tools): Every real way to turn a PNG into a Rive animation in 2026: the Rive editor, Rive's AI Agent, generators, Rive experts and Lottie import, with costs.
- [Best AI Tools to Animate a 2D Character or Mascot (2026)](https://charmotion.app/guides/tools-turn-static-character-into-animation): AI tools that turn a static 2D character or mascot into animation in 2026, grouped by job: live puppets, video clips, sketch demos, app state sets and DIY.
- [Mascot Animation Services With Rive Export: Your Options](https://charmotion.app/guides/mascot-animation-services-rive-export): Where to get mascot animation delivered as a Rive file: Rive Experts on Contra, freelance marketplaces, studios and automated services, with costs.
- [Alternatives to Hiring a Motion Designer for Your Mascot](https://charmotion.app/guides/alternatives-to-hiring-motion-designer-mascot): Five alternatives to hiring a motion designer for your mascot: templates, DIY in Rive or Lottie Creator, generators, AI video and freelancers, with costs.
- [How to Animate Your Own Character With AI: Pick the Method by Goal](https://charmotion.app/guides/animate-my-character-with-ai): Animate your own character with AI by picking the method for the job: social clips, app states, lip-sync, game sprites or VTuber rigs, and the best image.
- [Why AI Animation Keeps Changing Your Character (and How to Stop It)](https://charmotion.app/guides/ai-animation-keeps-changing-my-character): Why AI video redraws your character: every frame is generated, so faces and outfits drift. How to reduce it, and methods that keep pixels identical.
- [Can You Upload Your Own Character to Adobe Express Animate Characters?](https://charmotion.app/guides/adobe-express-animate-characters-custom-character): Adobe Express Animate characters only animates Adobe's own characters. What it does well, and how to animate your own character instead.
- [2D Character Animation AI: What Works for Mascots, Brand Characters and Games](https://charmotion.app/guides/2d-character-animation-ai): 2D character animation AI explained: rig-based vs generative tools, what suits mascots and brand characters, free options, and what game devs should use.
- [How to Animate a Drawing With AI: Kids' Doodles vs Clean Character Art](https://charmotion.app/guides/animate-a-drawing-with-ai): Animate a drawing with AI: which tool fits a child's doodle vs clean character art, how to scan and clean the drawing, and what AI can't do with a sketch.
- [Meta Animated Drawings Alternatives (and Is It Still Maintained?)](https://charmotion.app/guides/meta-animated-drawings-alternatives): Is Meta's Animated Drawings still maintained? The repo is archived, the demo loads. Its limits, and alternatives for drawings, games, mascots and clips.
- [Adobe Character Animator Alternatives: When a State Set Beats a Puppet](https://charmotion.app/guides/adobe-character-animator-alternative): Adobe Character Animator alternatives: Cartoon Animator, Live2D, Adobe Express and single-image state sets, and what Character Animator still does better.
- [How to Animate Your OC: Loops, Reactions, Dances and VTuber Models](https://charmotion.app/guides/animate-my-oc): Animate your OC: which loops and reactions to make first, where they work (Discord, stickers, profiles), dances and fight edits, and Live2D for VTubing.
- [How Much Does Mascot Animation Cost in 2026?](https://charmotion.app/guides/mascot-animation-cost): What mascot animation costs in 2026, from one loop to a full interactive Rive system, with sourced prices from Fiverr, Dribbble, Contra and studios.
- [How to Hire a Rive Animator: Platforms, Rates and Vetting](https://charmotion.app/guides/hire-rive-animator): Where to hire a Rive animator in 2026 (Contra, Upwork, Fiverr, Dribbble), what they charge, what a delivery should include and how to vet their skills.
- [Viggle Alternatives for Brand Mascots (Not Dance Memes)](https://charmotion.app/guides/viggle-alternatives-mascot): Viggle is built for motion-transfer memes. For a brand mascot that must stay on-model, loop and sit on transparent backgrounds, these alternatives fit.
- [How to Make a PNG Move: Keyframes, PNGtubers, AI or a Rig](https://charmotion.app/guides/make-png-move): Make a PNG move with editor keyframes (CapCut, DaVinci, Premiere, After Effects), a PNGtuber app, AI image-to-video, or a rigged loop as GIF or video.
- [How to Get an AI Logo With a Transparent Background (Ready to Animate)](https://charmotion.app/guides/ai-logo-transparent-background): Get an AI-generated logo as a clean transparent PNG: generators with a real alpha option, the solid-background prompt, fixing halos, edge checks and SVG.
- [How to Animate a Logo or Character From Claude, Cursor or VS Code With MCP](https://charmotion.app/guides/animate-logo-from-claude-cursor-mcp): What MCP is, how to add a remote MCP server with OAuth sign-in in Claude, Cursor, VS Code and ChatGPT, and a design, review, build and embed workflow.
### Add animation to your app or site
- [How to Add Animation to an iOS App (SwiftUI & UIKit)](https://charmotion.app/guides/add-animation-to-ios-app): Add animation to an iOS app: withAnimation, PhaseAnimator and symbolEffect for UI, Lottie and Rive via Swift Package Manager for art, plus looping video.
- [How to Add Animation to an Android App (Compose)](https://charmotion.app/guides/add-animation-to-android-app): Add animation to an Android app with Jetpack Compose: animate*AsState, AnimatedVisibility and infinite transitions, plus Lottie, Rive and Media3 video.
- [How to Add Animation to a Flutter App](https://charmotion.app/guides/add-animation-to-flutter-app): Add animation to a Flutter app: implicit widgets like AnimatedContainer, AnimationController, Hero, the lottie and rive packages, and looping video_player.
- [How to Add Animation to a React Native App](https://charmotion.app/guides/add-animation-to-react-native-app): Add animation to a React Native app: Animated with useNativeDriver, Reanimated 4, lottie-react-native, Rive's Nitro runtime and looping video.
- [How to Add Animation to a Website (HTML, CSS, JS)](https://charmotion.app/guides/add-animation-to-website): Add animation to any website: CSS keyframes with reduced motion, the Web Animations API, muted and transparent video, dotLottie and Rive state machines.
- [How to Add Animation to a React or Next.js App](https://charmotion.app/guides/add-animation-to-react-app): Add animation to React and Next.js: Motion (formerly Framer Motion) from motion/react, CSS, dotLottie React, Rive characters with useRive, client components.
- [How to Add Rive, Lottie and Video Animation to Webflow](https://charmotion.app/guides/add-animation-to-webflow): Add animation to Webflow: the native Rive element with state machines and Interactions, the Lottie element, background video, and custom code for moods.
- [How to Add Rive and Lottie Animations to Framer](https://charmotion.app/guides/add-animation-to-framer): Add animation to Framer: the official Rive plugin with state machine inputs, Lottie and dotLottie components, the Video component and code components.
- [How to Add Lottie, Rive and Video Animation to WordPress](https://charmotion.app/guides/add-animation-to-wordpress): Add animation to WordPress: the core Video block with autoplay and loop, the LottieFiles plugin, a Rive plugin, and Custom HTML embeds for dotLottie and Rive.
- [How to Add Animation to a Shopify Store](https://charmotion.app/guides/add-animation-to-shopify): Add animation to a Shopify store: theme video sections, product video, Lottie or Rive in a Custom Liquid section with file_url, and when to use an app.
- [How to Add a Loading Animation to an App or Website](https://charmotion.app/guides/add-loading-animation): Choose a spinner, skeleton, progress bar, logo loader or branded character, then build it with CSS, Rive or native views and make it accessible.
- [How to Add an Animated Logo to Your Website Header](https://charmotion.app/guides/add-animated-logo-to-website-header): Put an animated logo in your site header that plays once, then idles: format choice, video and Rive code, reduced motion, layout shift and site builders.
- [How to Add a Mascot to Onboarding and Empty States](https://charmotion.app/guides/add-mascot-to-onboarding-empty-states): Map each onboarding step and empty state to a mascot mood or reaction, then wire it from SwiftUI, Compose, React or Flutter without blocking the user.
- [How to Put a Transparent Animation Over Content](https://charmotion.app/guides/transparent-animation-over-content): Layer a transparent character or effect over a page, video or app screen: format choice, CSS and native overlay code, click-through, sizing and performance.
- [Can You Animate an App Icon? What iOS and Android Actually Allow](https://charmotion.app/guides/can-you-animate-app-icon): No public API animates an iPhone or Android home-screen icon. Why not, how Clock and Calendar do it, and the places your app icon can really move.
- [Android Splash Screen Animated Icon: Specs, XML and Handoff](https://charmotion.app/guides/android-splash-screen-animated-icon): Specs for an animated Android 12+ splash icon: 432 dp AVD canvas, 1,000 ms guidance, API 32 vs 33 duration, icon_preferred, exit animation and intro handoff.
- [Animated Splash Screen in Expo and React Native](https://charmotion.app/guides/animated-splash-screen-expo-react-native): Keep the Expo splash static, hold it with preventAutoHideAsync, hide it once your Rive or video intro is ready, and match colors so nothing flashes white.
- [Animated Splash Screen in Flutter (and FlutterFlow)](https://charmotion.app/guides/animated-splash-screen-flutter): flutter_native_splash is static. Play a Rive or video intro on your first route, match the background, remove the native splash on time, reduce motion.
- [Turn Your App Icon Into a Launch Intro](https://charmotion.app/guides/app-icon-launch-intro): Animate your app icon into a short launch intro that starts from the static launch screen, ends on the resting icon, and works for 3D and gradient icons.
- [AI Prompts to Add an Animated Splash or Loading Mascot](https://charmotion.app/guides/ai-prompts-animated-splash-mascot): Copy-paste prompts for Cursor, Claude Code, Lovable, Bolt and v0 that add an animated splash or loading mascot from a .riv or transparent video.
- [Alternate App Icons on iOS, Android, Expo and Flutter](https://charmotion.app/guides/dynamic-alternate-app-icons): How apps let users switch icons: setAlternateIconName on iOS, activity-alias on Android, Expo and Flutter plugins. Icons swap as stills, never animate.
- [How to Add a Rive Animation to Wix Studio](https://charmotion.app/guides/add-rive-animation-to-wix-studio): Add Rive to Wix Studio with its native Rive element: pick the artboard and state machine, when you need an HTML embed and Velo, and the classic Editor.
- [How to Add an Animated Mascot to Squarespace](https://charmotion.app/guides/add-animated-mascot-to-squarespace): Squarespace has no Rive or Lottie block. Run a Rive mascot in a Code Block on Core or higher, host the .riv with CORS, or use a looping MP4 or GIF.
- [How to Add Animation to a Carrd Site](https://charmotion.app/guides/add-animation-to-carrd): Add animation to Carrd: GIFs in Image elements, MP4 uploads from Pro Lite, and a Rive mascot in an Embed element on Pro Standard via a CORS CDN.
- [Rive in the Next.js App Router: Client Components, SSR and WASM](https://charmotion.app/guides/rive-nextjs-app-router): Use Rive in the Next.js App Router: Client vs Server Components, window is not defined, ssr: false, mood from server data and self-hosted rive.wasm.
- [How to Add a Rive Mascot to a Lovable App](https://charmotion.app/guides/add-rive-mascot-to-lovable): Add a Rive mascot to a Lovable app: install the Rive React runtime, get the .riv into public/ via GitHub or a hosted URL, and wire moods to app events.
- [How to Add a Rive Mascot in Bolt.new, v0 and Replit](https://charmotion.app/guides/rive-mascot-bolt-v0-replit): Add a Rive mascot in Bolt.new, v0 and Replit: install the Rive React runtime, add the .riv as a static file in each builder, and the Next.js rules for v0.
- [How to Add a Rive Animation to Bubble Without the Old Plugin](https://charmotion.app/guides/add-rive-animation-to-bubble): Add a Rive character to a Bubble app with the HTML element: host the .riv in Bubble storage, drive moods from workflows with Toolbox and size it responsively.
- [Animated Notion Page Icons, Covers and Mascots](https://charmotion.app/guides/notion-animated-icon-mascot): Put a moving mascot on a Notion page: GIF icon and cover sizes from Notion's help pages, the 5 MB limit, light and dark mode, Rive embeds and Super.so code.
- [Rive in a Chrome Extension (Manifest V3): Bundle the WASM](https://charmotion.app/guides/rive-animation-chrome-extension): Fix Rive in a Manifest V3 Chrome extension: bundle rive.wasm, call setWasmUrl with chrome.runtime.getURL, allow wasm-unsafe-eval and ship the .riv inside.
- [Telegram Mini App Mascot: Loading Screen, Themes and Haptics](https://charmotion.app/guides/telegram-mini-app-mascot-animation): Animate a mascot in a Telegram Mini App: the static SVG loading placeholder, handing off to a Rive intro with ready(), theme colors and haptic reactions.
- [Hero Animation and Core Web Vitals: Keep LCP, CLS and INP Green](https://charmotion.app/guides/hero-animation-core-web-vitals): Add a logo, mascot, Rive, Lottie, video or three.js hero animation without hurting LCP, CLS or INP: posters, reserved space, lazy init and reduced motion.
- [Scroll-Driven Logo and Mascot Animation: CSS, Rive and Video](https://charmotion.app/guides/scroll-driven-logo-animation): Animate a logo or mascot on scroll with CSS animation-timeline, IntersectionObserver, a data-bound Rive number or video scrubbing, plus fallbacks and support.
### iOS & Swift
- [Rive Data Binding in SwiftUI (New Apple Runtime)](https://charmotion.app/guides/rive-data-binding-swiftui): Rive data binding in SwiftUI with the new Apple runtime: Worker, File, view model instances, NumberProperty, triggers, streams and RiveUIViewRepresentable.
- [Rive in UIKit: RiveUIView and Legacy RiveView](https://charmotion.app/guides/rive-uikit-riveview): Add Rive to a UIKit view controller: RiveUIView in the new runtime, RiveViewModel.createRiveView() in the legacy one, moods, pausing and frame rate.
- [Animated Onboarding Mascot in SwiftUI](https://charmotion.app/guides/animated-onboarding-mascot-swiftui): Build a paged SwiftUI onboarding with one animated mascot: TabView page style, a persistent Rive view, a mood per page, one-shot reactions and Reduce Motion.
- [PhaseAnimator vs KeyframeAnimator in SwiftUI](https://charmotion.app/guides/phaseanimator-vs-keyframeanimator): PhaseAnimator vs KeyframeAnimator in SwiftUI: what each does, signatures, looping vs triggered playback, OS support, and when a Rive character fits better.
- [Lottie in SwiftUI: LottieView, Playback and Looping](https://charmotion.app/guides/lottie-swiftui-lottieview): Use Lottie in SwiftUI: install lottie-spm, show a LottieView, loop or play once, play marker segments, handle completion, and know when Rive suits better.
- [Animated Splash Screen in SwiftUI (Code Pattern)](https://charmotion.app/guides/animated-splash-screen-swiftui): Build an animated splash in SwiftUI: why the launch screen stays static, a seamless handoff to an intro view, a one-shot Rive intro, and Reduce Motion.
- [Live Activity, Dynamic Island & Widget Animation Limits](https://charmotion.app/guides/live-activity-widget-animation-limits): What animation Live Activities, the Dynamic Island and widgets allow: the 2-second cap, no continuous loops, the 4 KB data limit, Always-On, and pose swaps.
- [Character Animation on watchOS and visionOS](https://charmotion.app/guides/watchos-visionos-character-animation): Does Rive or Lottie run on watchOS or visionOS? Platform support from each Package.swift, Apple Watch alternatives, frame sequences, and visionOS windows.
- [Reduce Motion in SwiftUI and UIKit](https://charmotion.app/guides/reduce-motion-swiftui): Read Reduce Motion in SwiftUI and UIKit, react to live changes, and pause or replace Rive, Lottie and SwiftUI animations with still poses and crossfades.
- [App Store App Preview Video Specs (2026)](https://charmotion.app/guides/app-store-app-preview-specs): App Store App Preview specs: 15–30 seconds, 500 MB, resolutions per device, codecs, 30 fps, audio, guideline 2.3.4 rules, and an ffmpeg command to conform.
### AI assistant avatars
- [Animate a Chat Avatar From Streaming Events](https://charmotion.app/guides/chatgpt-style-chat-avatar-streaming-states): Drive a Rive chat avatar from Vercel AI SDK useChat status: thinking on submit, talking while streaming, success once on finish, error, stop and no flicker.
- [Voice Agent Avatar: OpenAI Realtime Event Mapping](https://charmotion.app/guides/voice-agent-avatar-openai-realtime-events): Map OpenAI Realtime API events to avatar states: speech_started, speech_stopped, output_audio.delta and output_audio_buffer over WebRTC vs WebSocket.
- [Lip-Sync vs Amplitude for a Talking Avatar](https://charmotion.app/guides/lip-sync-vs-amplitude-talking-avatar): Animate a talking avatar from audio level with Web Audio AnalyserNode RMS and hysteresis, or use Azure visemes and Polly speech marks for real lip-sync.
- [ElevenLabs Agent Avatar With onModeChange](https://charmotion.app/guides/elevenlabs-agent-avatar-onmodechange): Animate an ElevenLabs voice agent avatar in React: map onModeChange speaking/listening and connection status to Rive moods, audio data and fewer rerenders.
- [AI Elements Persona vs a Custom Rive Character](https://charmotion.app/guides/ai-elements-persona-vs-custom-rive-character): What Vercel's AI Elements Persona does: five states, six variants, Rive WebGL2. When a custom Rive mascot fits better, and how to map states to moods.
- [Accessible, Fast AI Avatar Animation on the Web](https://charmotion.app/guides/accessible-performant-ai-avatar-animation): Keep an AI avatar accessible and light: WCAG 2.2.2, prefers-reduced-motion, pausing Rive offscreen, one shared WebGL context and what screen readers hear.
### Stickers & emoji
- [One Mascot, Every Sticker Platform](https://charmotion.app/guides/mascot-sticker-pack-from-one-animation-set): Sticker specs for Telegram, WhatsApp, iMessage, Discord and Slack in one table, plus master size, loop length and mood choices for one consistent mascot pack.
- [Convert Transparent WebM to Every Sticker Format](https://charmotion.app/guides/convert-transparent-webm-to-sticker-formats): Tested ffmpeg commands that convert a transparent VP9 WebM into a Telegram WEBM, WhatsApp animated WebP, transparent GIF and APNG without losing the alpha.
- [Telegram Video Stickers From a Character Animation](https://charmotion.app/guides/telegram-video-sticker-from-character-animation): Make Telegram video stickers from a character animation: the exact WEBM VP9 specs (512 px, 3 s, 30 fps, 256 KB), a tested ffmpeg command and the upload steps.
- [WhatsApp Animated Stickers: Specs and Conversion](https://charmotion.app/guides/whatsapp-animated-sticker-pack-specs): WhatsApp animated sticker specs from the official repo: 512×512 WebP, 500 KB max, 8 ms frames, 10 s, 3–30 per pack, a 96×96 tray icon and ffmpeg.
- [iMessage Animated Sticker Pack: Sizes and APNG](https://charmotion.app/guides/imessage-sticker-pack-animated-apng): iMessage sticker sizes from Apple's HIG: 300, 408 and 618 px at @3x, one size per pack, 500 KB per file, and why APNG beats GIF for soft transparent edges.
- [Discord Animated Emoji and Sticker Specs](https://charmotion.app/guides/discord-animated-emoji-and-sticker-specs): Discord limits from its API docs: emoji up to 256 KiB, stickers 320×320 PNG, APNG, GIF or Lottie up to 512 KiB and 5 s, with tested GIF and APNG commands.
- [Slack Animated Custom Emoji From Your Mascot](https://charmotion.app/guides/slack-custom-emoji-animated-gif): Slack custom emoji rules from its help center: JPG, PNG or GIF, square, under 128 KB, GIFs up to 50 frames, with an ffmpeg command for transparent GIF emoji.
- [Twitch Animated Emotes From a Mascot Animation](https://charmotion.app/guides/twitch-animated-emotes-from-mascot): Make Twitch animated emotes from a mascot: Twitch's GIF specs (28, 56, 112 px, 1 MB, 60 frames), which reactions read at 28 px, and a GIF command.
- [Add an Animated Mascot Overlay to OBS](https://charmotion.app/guides/stream-mascot-overlay-obs): Put a transparent animated mascot on stream in OBS: Media Source vs Browser Source, WebM reactions as alerts, states for follows, subs and BRB.
### More frameworks & no-code tools
- [Rive in Vue 3 and Nuxt: Setup, Data Binding, SSR](https://charmotion.app/guides/rive-vue-nuxt): Use Rive in Vue 3 and Nuxt with the official web runtime: mount in onMounted, set a mood via data binding, fire triggers, clean up and avoid SSR errors.
- [Rive in Svelte and SvelteKit (Svelte 5 Guide)](https://charmotion.app/guides/rive-svelte-sveltekit): Add Rive to Svelte 5 and SvelteKit with the official web runtime: mount in onMount, bind a mood prop with $effect, fire triggers and clean up safely with SSR.
- [Rive in Angular: Community Wrapper vs Plain Canvas](https://charmotion.app/guides/rive-angular): Use Rive in Angular: why ng-rive is out of date, what the Grandgular wrapper offers, and how to drive the web runtime from signals with SSR-safe cleanup.
- [Rive in Astro: Islands, client:visible and Lazy WASM](https://charmotion.app/guides/rive-astro): Add Rive to Astro with a plain script or a framework island, hydrate it with client:visible, keep rive.wasm off the critical path, respect reduced motion.
- [Rive in Expo: Development Build Required (Not Expo Go)](https://charmotion.app/guides/rive-expo): Rive in Expo needs a development build, not Expo Go. Set up expo-dev-client and @rive-app/react-native on SDK 53+, fix Android builds and bundle the .riv.
- [Rive and Lottie in FlutterFlow: Widgets and Limits](https://charmotion.app/guides/rive-flutterflow): Use Rive and Lottie in FlutterFlow: what the built-in RiveAnimation widget does, why state machine moods need a custom widget, and when Lottie is enough.
- [Rive and Lottie in Bubble, Wix Studio and Webflow](https://charmotion.app/guides/rive-lottie-no-code-builders): Add Rive and Lottie to Bubble, Wix Studio and Webflow: native Rive and Lottie elements, HTML embeds for page-driven inputs, the old Bubble plugin, and video.
- [Rive in Compose Multiplatform and Ionic/Capacitor](https://charmotion.app/guides/rive-compose-multiplatform-ionic): Use Rive in Compose Multiplatform with the experimental RiveCMP wrapper, and in Ionic or Capacitor with the web runtime and a bundled rive.wasm.
### Comparisons
- [Rive vs Lottie Performance and Runtime Size](https://charmotion.app/guides/rive-vs-lottie-performance): Rive vs Lottie performance with sources: the one independent benchmark, labeled vendor claims, measured runtime sizes, iOS profiling traps, how to test.
- [Lottie Alternatives in 2026: 7 Options Compared](https://charmotion.app/guides/lottie-alternatives): Lottie alternatives compared: Rive, dotLottie, CSS and the Web Animations API, transparent video, animated SVG, GIF and Spline, and what each is good at.
- [Rive Alternatives: Lottie, Spline, Motion and More](https://charmotion.app/guides/rive-alternatives): Rive alternatives compared: Lottie with dotLottie state machines, Spline for 3D, Motion for UI code, game engines and plain video, with dated plan details.
- [Convert Lottie to Rive (and Rive to Lottie or Video)](https://charmotion.app/guides/convert-lottie-to-rive): How to convert Lottie to Rive, what the import keeps and loses, which plan includes it, and how to turn Rive back into Lottie, MP4, GIF or WebM.
- [dotLottie vs Lottie JSON: What .lottie Adds](https://charmotion.app/guides/dotlottie-vs-lottie-json): dotLottie vs Lottie JSON: what a .lottie file contains, whether it is really smaller, multiple animations, themes, state machines and player support.
- [Lottie vs Rive State Machines and Data Binding](https://charmotion.app/guides/lottie-vs-rive-state-machines): Lottie vs Rive state machines compared: dotLottie inputs, guards and actions versus Rive blend states and data binding, and moving to view models.
- [Lottie vs GIF: Size, Quality and Where Each Works](https://charmotion.app/guides/lottie-vs-gif): Lottie vs GIF compared: file size, transparency, scaling, CPU cost, and why GIF still wins in email and chat apps where a Lottie player cannot run at all.
- [Lottie vs SVG and CSS Animation: When Each Wins](https://charmotion.app/guides/lottie-vs-svg-css-animation): Lottie vs CSS and animated SVG compared: runtime cost, authoring, complexity and reduced motion, with a clear rule for when each one wins on a real website.
- [Rive vs Motion (Framer Motion): Different Jobs](https://charmotion.app/guides/rive-vs-framer-motion): Rive vs Motion, formerly Framer Motion: what each animates, bundle cost, platforms, and using both together, with Motion for layout and Rive for a mascot.
- [Rive vs Spline: 2D Interactive vs 3D Scenes](https://charmotion.app/guides/rive-vs-spline): Rive vs Spline compared: 2D vector state machines versus real-time 3D scenes, verified export options, mobile weight, interactivity, and when video is better.
- [Lottie vs Rive in React Native and Flutter (2026)](https://charmotion.app/guides/lottie-vs-rive-react-native-flutter): Lottie vs Rive for React Native and Flutter in 2026: current packages, New Architecture and Nitro requirements, who maintains what, and which one to choose.
- [Rive Editor vs Lottie Creator vs After Effects: Cost](https://charmotion.app/guides/rive-vs-lottie-tools-cost): What Rive's editor, LottieFiles' Lottie Creator and After Effects with Bodymovin cost in October 2026, what free plans export, and the real cost.
- [Lottie vs Rive vs Video for a Splash Screen Animation](https://charmotion.app/guides/lottie-vs-rive-splash-screen): Which format fits an app launch intro: Lottie, Rive, transparent video or an Android AnimatedVectorDrawable? A splash comparison with honest trade-offs.
- [Animation File Size Benchmark: Rive vs GIF vs WebM vs MOV vs MP4 (Real Data)](https://charmotion.app/guides/animation-file-size-benchmark): Real file sizes for the same 17 character animations as Rive, GIF, MP4, transparent WebM and HEVC MOV, for a flat mascot and a 3D logo, runtime included.
### Mascots by industry
- [Mascot Tone by Industry: A State-Mapping Matrix](https://charmotion.app/guides/mascot-tone-by-industry): How playful a mascot should be in fintech, kids and education, health, security and fitness apps, which states to avoid where, and how to write motion rules.
- [Should Your App Have a Mascot? Evidence and Tests](https://charmotion.app/guides/should-my-app-have-a-mascot): What research shows about brand characters, where the evidence is thin, which apps benefit, what Clippy got wrong and how to A/B test a mascot cheaply.
- [Fintech and Crypto App Mascots: Trust-First States](https://charmotion.app/guides/fintech-app-mascot): Where a mascot fits in a banking, fintech or crypto app, which money moments to keep it away from, and a state map for transfers, failures and fraud alerts.
- [Kids and Education App Mascots: Lessons From Duolingo](https://charmotion.app/guides/kids-education-app-mascot): How to design mascot states for learning and kids' apps: lesson reactions, streaks without guilt, COPPA 2025 and UK Children's Code notes, and motion limits.
- [Healthcare Chatbot Avatars: Empathy Without Cuteness](https://charmotion.app/guides/healthcare-chatbot-avatar): How to animate a health app or symptom-checker avatar: calm listening, thinking and talking states, when to stop animating, and keeping disclaimers neutral.
- [VPN and Security App Mascots: Protected vs Exposed](https://charmotion.app/guides/vpn-security-app-mascot): How to animate a VPN, password manager or security app mascot: connected and disconnected states, alerts without scareware alarm, and motion with text.
- [Fitness Coach Mascots: Streaks, Cheers and Haptics](https://charmotion.app/guides/fitness-coach-app-mascot): How a fitness or habit app mascot should celebrate workouts and streaks, react to missed days and rest, sync with haptics and avoid over-celebrating.
- [Habit Tracker Pet Mascots: Streaks Without Guilt](https://charmotion.app/guides/habit-tracker-app-mascot): How a habit, focus or study app pet should react to check-ins, streaks and missed days, what fits in widgets and notifications, and what one set can't do.
- [Mental Health App Mascots: Calm States and Crisis Rules](https://charmotion.app/guides/mental-health-app-mascot): Which calm states a mental health or self-care app mascot needs, which moods to never use on feelings, how slow to animate, reduced motion and crisis screens.
- [Should Your AI Product Have a Mascot? Character vs Orb](https://charmotion.app/guides/ai-startup-mascot): Mascot or abstract orb for an AI product: the cutewashing trend, trust and overtrust research, which states show an agent working, and why skip lip-sync.
- [B2B SaaS Mascots: Onboarding, Empty States and 404s](https://charmotion.app/guides/saas-onboarding-mascot): Where a B2B SaaS mascot belongs, when to retire it for power users, empty-state and 404 patterns, dark mode and a performance budget that keeps the app fast.
- [Checkout Mascot Animation: Payments, Orders and Emails](https://charmotion.app/guides/ecommerce-checkout-mascot-animation): Mascot states for checkout, payment loading, order confirmed and payment failed, calm tone about money, order tracking, confirmation email GIFs, and speed.
- [Food Delivery App Mascots: Order Status to Moods](https://charmotion.app/guides/food-delivery-app-mascot): Map food delivery order statuses to mascot moods, what fits in Live Activities, Android Live Updates and push, tone for delays, and what a set can't animate.
- [Animated Logos for Café, Gym and Shop Screens](https://charmotion.app/guides/animated-logo-for-cafe-gym-screens): Which animated logo file plays on digital signage, menu boards and TVs, portrait vs landscape, loop length, and reusing the same clip for Instagram Reels.
- [Animating a School or Nonprofit Mascot: Rights, Crests and Screens](https://charmotion.app/guides/animate-school-mascot): How schools, universities, libraries and nonprofits can animate a mascot: ownership, permission, detailed crests, scoreboards, lobby screens and GIFs.
- [Open-Source README Mascot GIFs: Size, Dark Mode and Licensing](https://charmotion.app/guides/open-source-readme-mascot-gif): Add a mascot GIF to a GitHub README: size limits, light and dark versions with the picture element, autoplay, Rive on docs sites and licensing the mascot.
### Marketing formats
- [Product Hunt Launch GIF & Gallery Specs](https://charmotion.app/guides/product-hunt-launch-gif-specs): Product Hunt thumbnail and gallery specs: 240×240 thumbnail, GIFs under 3 MB that animate on hover, 1270×760 gallery images and YouTube-only launch videos.
- [Animated Logo in Email Signatures: GIF Support](https://charmotion.app/guides/animated-logo-email-signature): Which email clients play an animated GIF signature, why some Outlook versions don't, how to design a safe first frame, and how to keep the GIF small.
- [YouTube Intro & Animated Logo Best Practices](https://charmotion.app/guides/youtube-intro-animated-logo): How long a YouTube intro should be, YouTube's advice for the first seconds, and the official specs for the watermark, profile picture and channel banner.
- [LinkedIn Video, Logo & Banner Specs for Animation](https://charmotion.app/guides/linkedin-video-logo-specs): LinkedIn video specs (size, length, ratio, frame rate), company page logo and cover sizes, and how to share an animated logo or mascot as an MP4 post.
- [Google Play Feature Graphic & Promo Video Specs](https://charmotion.app/guides/google-play-feature-graphic-promo-video): Google Play store asset specs: 1024×500 feature graphic, YouTube preview video rules, screenshot sizes and limits, and the 512×512 app icon, with mascot tips.
- [9:16 Video Specs: Reels, TikTok, YouTube Shorts](https://charmotion.app/guides/vertical-video-specs-reels-tiktok-shorts): Official 9:16 video specs for Instagram Reels ads, TikTok in-feed ads and YouTube Shorts: resolution, length, file size, safe zones and where to put a mascot.
- [Where an Animated App Icon Belongs: Website, Press Kit and Launch Video](https://charmotion.app/guides/animated-app-icon-website-launch-video): Your icon can't move on the Home Screen, but it can on your landing page, press kit, Product Hunt and launch video. Formats and specs for each place.
### Rive & state machines
- [What Is Rive? Interactive Animation Explained](https://charmotion.app/guides/what-is-rive): Rive is an interactive animation editor plus open-source runtimes. Learn what a .riv file is, which platforms play it, what it costs and runtime size.
- [Rive vs Lottie: Which to Use in 2026](https://charmotion.app/guides/rive-vs-lottie): Rive vs Lottie compared honestly: how each is made, state machines and interactivity, file size claims, runtimes, and when to choose one over the other.
- [Rive State Machine: Inputs, Triggers & Moods](https://charmotion.app/guides/rive-state-machine): How a Rive state machine switches animations: number, boolean and trigger inputs, loops vs one-shots, the move to data binding, and code for both styles.
- [How to Use Rive in React and Next.js](https://charmotion.app/guides/rive-react-nextjs): Use Rive in React and Next.js: pick a package, render with useRive, change states with inputs or data binding, fix window is not defined, reduce motion.
- [How to Use Rive in SwiftUI (iOS)](https://charmotion.app/guides/rive-swiftui-ios): Use Rive in SwiftUI: install RiveRuntime, new vs legacy Apple runtime, show a .riv, set inputs or fire triggers, use data binding and honor Reduce Motion.
- [Rive in Android, Flutter & React Native](https://charmotion.app/guides/rive-android-flutter-react-native): Add Rive to Android, Flutter and React Native: current packages, install lines, setting a number or firing a trigger, and what changed with data binding.
- [Login Form Mascot Animation: How Teddy-Style Logins Work](https://charmotion.app/guides/login-form-mascot-animation): How teddy-style login mascots work in Rive, which form events map to which states, React code that wires focus, typing and submit, and the limits.
- [Convert a GIF, Video or PNG to Rive or Lottie: What's Possible](https://charmotion.app/guides/convert-gif-video-png-to-rive-or-lottie): There's no true GIF, MP4 or PNG to Rive or Lottie converter. The real options: image sequences, embedded frames, re-rigging, AI Lottie tools, and .riv to MP4.
- [Rive Mascot in Unity UI: Install, uGUI and Data Binding](https://charmotion.app/guides/rive-mascot-unity-ui): Add a Rive character to Unity UI with the official runtime: install, Rive Panel and Widget in uGUI, binding moods to game state in C#, and mobile performance.
- [Mascot Animation in Figma Prototypes and Developer Handoff](https://charmotion.app/guides/mascot-animation-figma-prototype): Rive files don't play in Figma prototypes. Use GIFs or video fills per state, swap them with variants, and hand developers the .riv with a state contract.
### Mascots in your product
- [How to Make an Animated Mascot for Your App](https://charmotion.app/guides/animated-app-mascot): Design a mascot that animates well, pick the states your app needs, and choose between an animator, Rive, Lottie or an automated service. A practical guide.
- [Mascot Animation States: Loading, Success, Error](https://charmotion.app/guides/mascot-animation-states): Which mascot states an app needs (loading, empty, success, error, greeting, notification), loops vs one-shots, timing, and how to map app events to them.
- [Animate an AI Assistant: Listening & Talking](https://charmotion.app/guides/ai-assistant-avatar-animation): Give an AI chatbot or voice assistant an animated avatar: idle, listening, thinking and talking states mapped to chat events, latency and reduced motion.
- [App Launch & Splash Screen Animation Guide](https://charmotion.app/guides/app-launch-splash-animation): Why the iOS launch screen must be static, how the Android 12 SplashScreen API animates, how long a launch animation should be, and the intro handoff.
- [AI Mascot Animation Tools Compared (2026)](https://charmotion.app/guides/ai-mascot-animation-tools-compared): Masko, MascotVibe, Mascofast, Mascowiz and Charmotion compared: upload vs generate, redraw vs rig, clips vs state sets, formats and prices.
- [Duolingo-Style Mascot Animation: States, Reactions and Effort](https://charmotion.app/guides/duolingo-style-mascot-animation): How Duolingo-style mascot animation works: Duolingo's use of Rive, the states a learning mascot needs, right and wrong answer reactions, and the limits.
### Logo animation
- [How to Animate a Logo From a PNG or AI Image](https://charmotion.app/guides/animate-logo-from-png): Animate a PNG, JPG or AI-generated logo: trace to vector or keep the pixels, remove the background, rig with bones, and export formats for web and video.
- [Can AI Animate My Logo Without Changing It?](https://charmotion.app/guides/ai-logo-animation-without-changing-logo): Why AI video tools like Veo, Kling and Runway warp logos and letters, what ChatGPT, Gemini and Claude can do, and how to animate your exact logo instead.
- [Transparent Animated Logo: Formats, Editors, Slides and OBS](https://charmotion.app/guides/transparent-animated-logo): Which formats keep an animated logo transparent (HEVC MOV, ProRes 4444, VP9 WebM, GIF), Canva's limits, and using it in Final Cut, Premiere and OBS.
- [How to Add an Animated Logo to a Video (Corner Logo or Watermark)](https://charmotion.app/guides/add-animated-logo-to-video): Add an animated corner logo or watermark in Final Cut Pro, Premiere Pro, DaVinci Resolve, iMovie and CapCut: file type, size, opacity and looping.
- [How to Turn a Logo Into an Animated GIF](https://charmotion.app/guides/logo-to-gif): Turn a PNG logo into an animated GIF: animate it first, convert with a proper palette, and size it for email, Slack, Discord and the web, or use WebM.
- [Discord Animated Server Icon: Requirements, Size and GIF Tips](https://charmotion.app/guides/discord-animated-server-icon): Discord animated server icons need Server Boost Level 1 and a GIF. What Discord documents about size, keeping a logo safe in the round crop, and more.
- [How to Animate a Logo: Canva, Adobe Express, After Effects, AI Video and Rigging Compared](https://charmotion.app/guides/how-to-animate-a-logo-compared): Canva, Adobe Express, Renderforest, Jitter, LottieFiles, After Effects, Kling, Runway and Charmotion compared: logo fidelity, transparency, price.
- [How Much Does Logo Animation Cost in 2026?](https://charmotion.app/guides/logo-animation-cost): Logo animation prices in 2026 from published sources: templates, AI tools, Fiverr, Upwork, freelance motion designers and agencies, and the files to get.
- [Logo Reveal vs Sting vs Bumper vs Loop: What Each Is For](https://charmotion.app/guides/logo-reveal-vs-sting-vs-loop): What a logo reveal, sting, bumper, intro, outro and idle loop are, how long each should run, whether it should loop, and when a logo animation needs sound.
- [Animated Logo in Keynote, PowerPoint and Google Slides](https://charmotion.app/guides/animated-logo-presentation): How to put an animated logo in Keynote, PowerPoint and Google Slides: which video and GIF formats play, where transparency works, and the safe fallback.
- [How to Put an Interactive 3D Logo on Your Website](https://charmotion.app/guides/interactive-3d-logo-website): Put an interactive 3D logo on a website with three.js: a GLB model, lighting, pointer and scroll reaction, a performance budget and a fallback poster.
- [How to Turn a Flat 2D Logo Into a 3D Logo Animation](https://charmotion.app/guides/3d-logo-animation-from-flat-logo): Turn a flat 2D logo into a cinematic 3D logo animation in Blender: extrude and bevel, glass and metal materials, lighting, camera, render and export.
- [How to Make a Logo That Follows the Cursor](https://charmotion.app/guides/logo-animation-follow-cursor): Make a logo that reacts to the mouse: hover effects, a tilt toward the cursor and eyes that follow, with CSS, JS or Rive, plus touch and reduced motion.
- [SVG Logo Draw Animation: How the Stroke Reveal Works](https://charmotion.app/guides/svg-logo-stroke-draw-animation): Animate an SVG logo drawing itself with stroke-dasharray, stroke-dashoffset and getTotalLength: CSS, SMIL or JS, filled logos, Figma export and alternatives.
- [Can You Copyright or Trademark an AI-Generated Logo?](https://charmotion.app/guides/ai-generated-logo-copyright-trademark): What the U.S. Copyright Office, USPTO and UK government say about AI-generated logos as of November 2026, and the steps to protect one. Not legal advice.
### Formats & transparent video
- [Transparent Video on Websites (Safari Included)](https://charmotion.app/guides/transparent-video-website): How to put a transparent video on a website that works in Chrome, Firefox, Edge and Safari: VP9 alpha WebM, HEVC alpha MOV, the markup, encoding and autoplay.
- [GIF vs WebM vs MP4 vs Lottie vs Rive](https://charmotion.app/guides/gif-vs-webm-vs-mp4-vs-rive): Compare GIF, WebM, MP4, Lottie and Rive by transparency, interactivity, file size and support, and pick the format to ship for web, apps and email.
- [PNG to Transparent Animated GIF: Halos, Edges and Better Formats](https://charmotion.app/guides/png-to-transparent-animated-gif): Can a GIF be transparent? Only 1-bit. Why edges get halos, tested ffmpeg commands for PNG and WebM to transparent GIF, and when WebP, APNG or WebM is better.
- [Transparent MP4 and HEVC With Alpha: What Actually Works](https://charmotion.app/guides/transparent-mp4-and-hevc-alpha): Can an MP4 be transparent? Why H.264 can't, why After Effects says no, HEVC alpha without a Mac, MOV to WebM with ffmpeg, and iPhone wash-out.
### Animation UX & accessibility
- [Accessible Animation: Reduced Motion & WCAG](https://charmotion.app/guides/accessible-animation-reduced-motion): How to respect prefers-reduced-motion in CSS, JavaScript, Rive and SwiftUI, and what WCAG 2.2 requires for looping, interactive and flashing animation.
- [Animation Durations & Loading UX Guidelines](https://charmotion.app/guides/animation-duration-loading-ux): How long UI animations should last, what the 0.1 s, 1 s and 10 s limits mean, and when to use a spinner, a progress bar or a loading animation in your app.
- [How to Write Brand Motion Guidelines (Logo, Mascot and UI)](https://charmotion.app/guides/brand-motion-guidelines): What to put in brand motion guidelines: duration and easing tokens, logo do's and don'ts, mascot rules, loops, sound, reduced motion and file handoff.

## Reference
- [Quick answers](https://charmotion.app/answers): 251 short, sourced answers about turning images into animation, Rive and Lottie, mascots, AI avatars, stickers, logo animation, formats and accessibility
- [Glossary](https://charmotion.app/glossary): 43 animation terms