Appearance
Animation System — Demo Video Script
Format: Screen recording of Cavai Cloud builder + creative preview Duration: ~1:30–2:00 Video player: Chapter-based (monthly release notes) HTML mockup: cavai-release-notes/releases/af-8.21.0/demo-creative.html
Concept
A conversational creative that IS an interactive ad AND showcases the animation system. Bubbles (the mascot) guides the user through three topics via choices. Each choice triggers different animation types on the visual blocks above the chat area.
The creative can be embedded/linked in the release notes article so readers can try it themselves.
Creative Setup (build in Cavai Cloud)
Block layout
Visual area (top half, ~260px):
- Graphic block: dark gradient background (full visual area)
- Text block: "Animation System" headline, centered
- Text block: "New in Cavai Cloud" subtitle
- Graphic block: Bubbles mascot (bottom-right, small)
Conversation area (bottom half):
- Statement: "Hey! 👋 I'm Bubbles. Want to see what our new animations can do?"
- Answer choices: "✨ Presets" / "🔄 Transitions" / "🎲 Surprise me"
Entrance animations (on load)
| Block | Preset | Trigger | Delay |
|---|---|---|---|
| Background graphic | fadeIn | appear | 0ms |
| Headline text | slideUp | appear | 200ms |
| Subtitle text | blurIn | appear | 400ms |
| Bubbles graphic | pop | appear | 600ms |
Flow: "✨ Presets" path
ShowHide: Hide intro blocks → Show 3 colored blocks (graphic blocks)
| New block | Preset | Delay | Notes |
|---|---|---|---|
| Pink box | bounce | 0ms | |
| Purple box | elastic | 150ms | Stagger |
| Gold box | dropIn | 300ms | Stagger |
Statement: "Each block gets its own preset and timing. These three use bounce, elastic, and dropIn — with staggered delays."
Remaining choices offered.
Flow: "🔄 Transitions" path
ShowHide: Hide current blocks → Show card with text
Change Text operator (runs 2x automatically via flow):
- "Summer Sale" → "New Arrivals" → "Free Shipping"
- Change preset: slideUp (two-phase: old slides out, new slides in)
Statement: "Content changes with two-phase animations. Watch the text swap — out, then in." Statement: "That's a Change operator with a slideUp transition."
Remaining choices offered.
Flow: "🎲 Surprise me" path
ShowHide: Hide current blocks → Show gradient splash block
Block animation: Custom composed animation
- Effects: fade (0→1) + slideY (30→0) + scale (0.5→1) + rotate (-15°→0°)
- Easing: bounce (cubic-bezier(0.68,-0.55,0.27,1.55))
Statement: "That's fade + slide + scale + rotate composed into a single animation — with a bounce easing curve."
Remaining choices offered.
Flow: "That's all!" / end
ShowHide: Show outro blocks (gradient background + "Now go build something amazing" + Cavai logo)
Statement: "That's the new Animation System. Presets, composed effects, flow triggers, change transitions — all in Cavai Cloud. 🚀"
Video Chapters
Chapter 1 — Intro & Presets (0:00–0:30)
Show in builder:
- Open the creative, select headline text block → Animation tab
- Show preset dropdown — hover a few presets for live preview
- Select "slideUp" → preview, switch to "elastic" → preview
- Show staggered delays across blocks (0, 200, 400, 600ms)
- Run preview: watch blocks stagger in
Subtitle: "Every block has an Animation tab. Pick from 20+ presets — each previews live. Set delays for a staggered entrance."
Chapter 2 — Compose & Customize (0:30–0:55)
Show in builder:
- Clear preset → add effects manually: fade + slideY + scale
- Show preview updating with each added effect
- Add intermediate keyframe (70%: scale 1.1) for overshoot
- Open easing → select "Bounce" → show bezier curve editor, drag a point
- Copy animation → paste onto another block
Subtitle: "Or compose your own. Combine effects, add keyframe stops, tune the bezier curve. Copy and paste between blocks."
Chapter 3 — Flow Animations (0:55–1:25)
Show in builder + preview:
- Show ShowHide operator → per-target animation presets (slideLeft, fadeIn)
- Note: hide targets get auto-reversed labels
- Show Change Text with animation — dark panel, two-phase preview (blue→orange dot)
- Run the full creative: chat with Bubbles, pick choices, watch blocks animate
Subtitle: "Animations work in the flow. ShowHide gets entrance and exit presets. Change operators animate content in two phases. Everything connects."
Chapter 4 — Outro (1:25–1:35)
Show: The creative's outro screen, or a published embed.
Subtitle: "Animation System — available now in Cavai Cloud."
Tips for Recording
- Zoom browser to ~90% so builder panels have room
- Slow mouse — let hover previews play out fully
- Pause 1–2 sec on each preset before switching
- In preview, wait for stagger to finish before clicking choices
- Record builder walkthrough and creative preview separately, stitch in edit
- Can embed the live creative in the monthly article alongside the video