# Round 17 — Tower J27-J31 · Animation × 4 + Games

**Date**: 2026-04-30
**Status**: ✅ COMPLETE

---

## 🎯 הקומות

| # | Station | תפקיד |
|---|---|---|
| **J27** | Lottie Composer | Lottie animations מ-templates |
| **J28** | After Effects Bridge | מ-AE templates → MP4/Lottie |
| **J29** | Motion Graphics | scrolly-telling + parallax |
| **J30** | 3D Scene Generator | three.js / WebGL scenes |
| **J31** | Mini-Games Factory | quiz/poll/lottery (advergame) |

זאת הקומה ה**Premium**. רוב ה-flows לא משתמשים. אבל לpremium content (ביצוע ראשי, קמפיינים, special reports) — זאת הקומה שעושה הבדל **חוויית סופר-בינלאומית**.

---

## 🎬 J27 · Lottie Composer

### Provider: LottieFiles + ElevenLabs Music API combination

### Templates ב-R2 (`master-jason-lottie/`):
- `breaking-pulse.json` — אנימציית נקודה אדומה דופקת
- `5w-arrows.json` — חצים בין שדות 5W
- `verified-badge.json` — V-mark של factcheck verified
- `chart-grow.json` — bar chart אנימציה
- `text-reveal.json` — typewriter effect

### Composer
```python
async def compose_lottie(template: str, data: dict) -> dict:
    """Hydrate Lottie template with article data"""
    template_json = await fetch_r2_lottie(template)

    # Replace text placeholders
    for layer in template_json["layers"]:
        if layer.get("type") == "text" and layer.get("placeholder"):
            layer["text"]["d"]["k"][0]["s"]["t"] = data[layer["placeholder"]]

    # Adjust colors to tenant theme
    for layer in template_json["layers"]:
        if layer.get("color_role") == "brand":
            layer["color"] = data["theme"]["brand"]

    return template_json
```

### A2UI emission
```json
{"version":"v0.9","updateComponents":{"surfaceId":"article-output","components":[
  {"id":"hero-anim","component":"LottiePlayer","src":"https://assets.clastop.app/lottie/breaking-pulse-42.json","autoplay":true,"loop":true,"speed":1.0,"width":120,"height":120}
]}}
```

### Cost: $0 (template-based, no LLM)

---

## 🎞️ J28 · After Effects Bridge

### תפקיד
מאפשר למעצבים לעצב **AE templates** → flow מייצא MP4/Lottie.

### Workflow
1. Designer יוצר template ב-After Effects
2. Export Lottie via Bodymovin plugin
3. Upload to R2 `master-jason-ae-templates/`
4. ה-J28 מטעין template, מחליף text/colors, exports MP4 via Cloud Render

### Cost: ~$0.10 per minute MP4 (Cloud render)

---

## 📜 J29 · Motion Graphics (Scrolly-telling)

### תפקיד
- Parallax effects בקריאת מאמר ארוך
- Reveal animations בצמתי scroll
- Sticky elements (header / sidebar)

### Implementation
**CSS-only** with `@scroll-timeline` + `view-transition-name`:

```css
@scroll-timeline article-progress {
  source: selector(.article-content);
}

.parallax-hero {
  animation: parallax-zoom auto linear;
  animation-timeline: article-progress;
}
```

### A2UI catalog entry
```json
{
  "ScrollyHero": {
    "type": "object",
    "properties": {
      "src": { "$ref": "#/$defs/DynamicString" },
      "parallaxFactor": { "type": "number", "default": 0.5 },
      "stickyDuration": { "type": "string", "default": "300vh" }
    }
  }
}
```

### Cost: $0 (CSS-only)

---

## 🌐 J30 · 3D Scene Generator (Three.js)

### תפקיד
לעולם רחוק ופרימיום. דוגמאות:
- Live F1 racetrack mid-article (אם article spirits ב-F1 race)
- 3D model של iron dome battery (security articles)
- City flythrough (location-based articles)

### Implementation
**Catalog of pre-built scenes** ב-R2 (`master-jason-3d-scenes/`):
- `f1-spa.glb` — מסלול Spa-Francorchamps
- `iron-dome-battery.glb` — מודל טכני
- `tel-aviv-city.glb` — fly-through

ה-LLM בוחר scene ID. ה-Renderer טוען Three.js + scene.

### Cost: $0 (assets pre-built)

---

## 🎮 J31 · Mini-Games Factory

### תפקיד
**Advergame templates** — קמפיין פרסום של brand → game מיני שמופיע במאמר.

### Templates
- **Quiz**: 5 שאלות trivia (איזה דרגון בול אתה? — לpepsi משחק)
- **Poll**: simple vote (ל-engagement)
- **Lottery**: scratch-card (ל-coupon)
- **Match**: זיווג של תמונות

### Flow
1. Adv. agency מתקין plugin ב-marketplace
2. Plugin מכיל game template (HTML+CSS+JS)
3. ב-article relevant — ה-J31 מחבר game ל-article context
4. Game מופיע ב-A2UI catalog → user plays inline

### A2UI emission
```json
{"version":"v0.9","updateComponents":{"surfaceId":"article-output","components":[
  {"id":"game-quiz","component":"AdvergameQuiz","template":"pepsi-trivia-2026","brandLogo":"https://...","prizeUrl":"https://..."}
]}}
```

זה **Plugin Marketplace בפעולה**! ה-game template חי כ-plugin ב-clastop-mega.

### Cost: $0 base (revenue split with advertiser)

---

## ✅ Closure
✅ **Round 17 closed. 31/54 floors documented.**

**Animation אופציונלי. רוב ה-flows מדלגים. אבל פחות 5% של flows premium = ה-revenue stream הגדול.**