Onboarding Videos

The mkan host onboarding has 3 stages, each opening with a ~4-second animated video on Airbnb's CDN. We replace the house-building animation with a school-building animation, keeping the same progressive 3-stage narrative (outline → details → complete).

Original videos

All hosted on lumos.media.muscache.com, auto-play muted/inline, transparent or gradient background.

Static overview images: /airbnb/place.webp, /airbnb/stand-out.webp, /airbnb/publish.png.

mkan source locations

• Stage 1: src/app/[lang]/host/[id]/about-place/page.tsx
• Stage 2: src/app/[lang]/host/[id]/stand-out/page.tsx
• Stage 3: src/app/[lang]/host/[id]/finish-setup/page.tsx
• Step header: src/components/host/host-step-header.tsx
• Config: src/components/onboarding/configs.tsx

Goals

• Same progressive 3-stage narrative.
• Same flat / geometric animation style.
• ~4 seconds each.
• Transparent or gradient background preserved.

Free AI tools

Paid options for later: Runway Gen-3 Alpha ($12/mo, best video-to-video), Sora (ChatGPT Plus $20/mo, highest quality).

Workflow

1. Extract keyframes — screenshot the peak frame from each original video.
2. Edit keyframes — Canva or Figma free tier: swap house for school silhouette (flag, clock tower, grid windows). Keep the flat illustration style and color palette.
3. Animate — Kling AI image-to-video with prompt "smooth building animation, flat illustration style, minimal motion, 4 seconds".
4. Background — easiest is to bake in a gradient (mkan uses from-orange-50 to-pink-50; pick Hogwarts theme colors). Alternatives: CapCut (built-in BG removal), Unscreen (watermark on free), Remove.bg Video.
5. Polish — CapCut: trim to 4s, add seamless loop, export MP4 (H.264) for browsers, optionally WebM.

Alternatives

Lottie animations — pixel-perfect, true transparency, tiny file size.

Keep originals — Airbnb videos are abstract enough that most users won't connect them to Airbnb. Replace only static overview images with school-themed illustrations. Lowest effort, zero risk.

CSS / SVG animations — no external dependencies, perfect transparency, tiny size, fully customizable. Use Framer Motion (already in stack).

Integration

Hogwarts onboarding has 15 steps. School-adapted videos slot into stage intros following mkan's pattern:

Copyconst illustration = (
  <div className="mx-auto flex h-[300px] w-full max-w-xl items-center justify-center overflow-hidden rounded-xl sm:aspect-video sm:w-3/4 sm:rounded-2xl">
    <video
      ref={videoRef}
      className="h-full w-full object-cover"
      autoPlay
      muted
      playsInline
      preload="auto"
    >
      <source src="/videos/onboarding-stage-1.mp4" type="video/mp4" />
    </video>
  </div>
)

Store generated videos in public/videos/:

• onboarding-stage-1.mp4 — school outline appears
• onboarding-stage-2.mp4 — details added (windows, flag, playground)
• onboarding-stage-3.mp4 — school completes

Tool reference

See also

• Onboarding