Docs

Drop a character into your app.

AI-Mascot exports a transparent video clip. These guides show how to add it to your iOS app, your website, or a video edit — in minutes.

Native

iOS integration

SwiftUI's Image view can't animate GIFs on its own. The cleanest, dependency-free approach is to decode each frame with ImageIO and drive playback with a TimelineView.

We've published a working Xcode 26 / iOS 18+ sample you can clone: github.com/hemal08ce094/gif-sample.

1

Export the GIF from AI-Mascot

Open your character, click Export → GIF (transparent). Save it locally, e.g. mascot.gif.
2

Add the GIF to your Xcode project

Drag mascot.gif into your app's source folder in Xcode. Make sure Copy items if needed is checked and the file is added to your app target. The sample project uses synchronized folders, so any .gif dropped into HelloWorld/ is auto-bundled.
3

Drop in the GIFImage view

Copy GIFImage.swift from the sample repo into your project. It decodes frames with CGImageSourceCreateImageAtIndex, reads per-frame delays from kCGImagePropertyGIFDictionary, and caches decoded GIFs so paging doesn't re-decode.
4

Use it anywhere in SwiftUI

import SwiftUI

struct OnboardingView: View {
    var body: some View {
        VStack(spacing: 24) {
            GIFImage(name: "mascot")        // loads mascot.gif from the bundle
                .frame(width: 240, height: 240)

            Text("Welcome to the app")
                .font(.title2.bold())
        }
    }
}
5

Want video instead of GIF?

For smaller files and better quality, export MP4 from AI-Mascot and play it with AVPlayer over an AVPlayerLayer. Transparency on iOS requires HEVC with alpha (.mov) — use the GIF route above if you need a true transparent background today.

React / HTML

Web integration

On the web, use the WebM export. It preserves the alpha channel in every modern browser. Fall back to GIF for older browsers.

1

Export from AI-Mascot

Open your character, click Export, choose WebM (transparent). Optionally export a GIF as a fallback. Save the files to your public/ or CDN.
2

Drop in a video tag

Use a native <video> element. Mark it muted and playsInline so it autoplays on mobile.
<video
  src="/mascot.webm"
  autoPlay
  loop
  muted
  playsInline
  style={{ width: 240, background: "transparent" }}
/>
3

Fallback for older browsers

Provide both sources. Safari < 16 fall back to GIF automatically.
<picture>
  <source srcSet="/mascot.webm" type="video/webm" />
  <img src="/mascot.gif" alt="Mascot" width={240} />
</picture>
4

React component (drop-in)

export function Mascot({ src = "/mascot.webm", size = 240 }) {
  return (
    <video
      src={src}
      autoPlay
      loop
      muted
      playsInline
      width={size}
      height={size}
      style={{ background: "transparent" }}
    />
  );
}
5

Performance tips

Lazy-mount mascots that aren't above the fold. Use preload="none" for below-the-fold clips. Keep clip length ≤ 5s — anything longer hurts LCP on mobile.

Video editing

MP4 / video pipeline

MP4 doesn't carry an alpha channel by default. AI-Mascot's MP4 export ships the character on a solid green background (chroma key) so any video editor can remove it.

1

Export MP4 from AI-Mascot

Choose MP4 (chroma key) in the export menu. The clip comes out at 1080×1080 with a flat #00FF00 background.
2

Premiere / Final Cut

Drop the clip on a track above your footage. Apply Ultra Key (Premiere) or Keyer (Final Cut), eyedropper the green, raise Matte Generation until edges are clean. Add a small Choke to remove green spill.
3

DaVinci Resolve

Use 3D Keyer in the Color page, draw a stroke across the green, then refine with Matte Finesse (clean black ~5, clean white ~95, blur ~1).
4

CapCut / mobile editors

Add the clip, open Chroma Key, tap the green, push Intensity to ~50 and Shadow to ~20.
5

FFmpeg (scripted)

For batch pipelines, key out green and overlay on your base video:
ffmpeg -i base.mp4 -i mascot.mp4 -filter_complex \
  "[1:v]chromakey=0x00FF00:0.1:0.05[ck];\
   [0:v][ck]overlay=W-w-40:H-h-40" \
  -c:a copy out.mp4

Need a different format or stack?

Reach out from the contact page — we add guides based on what people actually ship with.