Animated kazino visuals — without a magic "animated image" API
Every symbol below is a static .webp from gpt-image-1 — the exact art you already ship in Pērkons and Le Chat. Nothing here touches a backend or a network. All the life — squash & stretch, glow pulses, tumble cascades, coin bursts, big-win flash & shake — is a runtime layer. That's the whole trick behind Sweet Bonanza.
▶ Tier-C live mesh rig · ▶ Effects portfolio (20+ reusable effects)
TIER A The reels, alive no AI key
Idle "breathing" micro-loops, staggered per cell, on the symbols you already have. Toggle it off to feel the dead, static "before". Then hit Spin for the Sweet-Bonanza tumble: symbols drop with squash-and-stretch, a winning cluster glows and bursts into coins, those tiles fall away and fresh ones cascade in.
TIER B Reactive character — your poses ARE animation frames no new key
You already generate the mascot in multiple poses with gpt-image-1 (Aristide has 7, Pērkons 4). Sequencing those poses on game events is frame animation — the same principle as a sprite-sheet. Add a bounce tween on each swap and the character feels reactive. For smooth in-between motion in production, rig one pose in Rive (see Tier C).
Click an event — the mascot swaps pose and bounces:
aristide.webparistide-delightaristide-proud… → frames, not waste.
TIER C Vector / mesh rig — the Sweet-Bonanza secret → Rive for production
This is the big one. Sweet Bonanza candies aren't flat vector — they're richly-shaded raster textures mapped onto a deformable mesh (Spine/Rive) that squashes, wobbles and pops every frame. So the right move is not "redraw as SVG" — it's take your existing gpt-image-1 sprite and mesh-rig it. I built that live in WebGL on your real flacon, macaron, orbs & characters.
▶ Open the live mesh-rig demo → jelly-wobble, gloss sweep, rim-glow, elastic win-pop + state machine.
The two SVGs below are a separate, smaller point — proof that if you do go pure-vector it can still be colourful. But the rig above is the production answer.
TIER D The cinematic moment — where AI video earns its cost video API key
Don't animate symbols with AI video — it's the wrong, expensive tool for that. Reserve image-to-video for the few high-impact moments: the loading splash, a living background, and the big-win celebration cinematic. Below is your real bg.webp with a Ken-Burns push + drifting embers as a placeholder. In production this 4-8s slot is a looping clip generated from that same still by Kling / Veo / Runway (see recommendation).
🎯 The recommendation — pipeline & the one key to provision
Verified research (live mid-2026 model landscape + pricing) is generated by a background workflow and pasted in by your engineer. The static pipeline below holds regardless.
| Tier | Technique | Tool / model | New key? | When |
|---|---|---|---|---|
| A | In-engine motion + particles 90% of the felt polish | GSAP 3.13+ (CustomBounce squash, stagger-grid tumble, rough() shake) + Pixi.js v8 native Particle/ParticleContainer + pixi-filters GlowFilter/AdvancedBloom. This demo = the vanilla proof. | No · $0 | Every symbol, every win: drops, cascades, bursts, glow, big-win flash. |
| B | Multi-pose sprite frames | gpt-image-1 (have it) → optionally Nano Banana Pro $0.134/img / FLUX.2 ~$0.03/img for crisper poses | No (existing) | Mascots, reaction poses, 4–8 frame idle loops. |
| C | Vector / skeletal rig the Sweet-Bonanza secret | Rive (.riv + @rive-app/react-canvas) — bones, mesh warp, idle→win→bigwin state machine | No · $0 runtime | Hero symbols & characters that deform & react. Closes the gap to Pragmatic grade. |
| D | Image→video cinematic | Kling 2.5 Turbo Pro ~$0.07/s · Hailuo 02 $0.045/s · Luma Ray (only native loop) · Veo 3.1 Fast $0.15/s — all via fal.ai | Yes — one key | Splash, living bg, big-win clip. Sparingly — never per-symbol. |
| E | UI flourishes | Lottie (lottie-react / dotLottie) | No · $0 | Win banners, multiplier pops, balance tick, button shine. |
The one new API key to provision → fal.ai
One fal.ai key is the "OpenRouter of media": it reaches Kling, Hailuo, Luma/Ray, Veo 3.1, Runway, Wan and FLUX.2 / Nano Banana stills and chainable BiRefNet/rembg background-matting — Tiers B + D from one bill, billed per output (not per-GPU-second like Replicate, so failed/queued runs are free). Sign up at fal.ai → dashboard → API key (~$10 free credits); SDK @fal-ai/client, async via queue.fal.run + signed webhook. It replaces the brittle single-vendor OpenAI image key that's been hitting caps.
- Realistic indie envelope: ~$50–150/month pay-as-you-go (no subscription floor). ~50 still iters/day ≈ $75 + ~30 short clips ≈ $12 + a couple Veo hero cinematics ≈ $5.
- EU caveat — don't overstate: fal is US-HQ, USD billing, AWS-hosted. SOC2/GDPR/ISO are compliance targets it's building toward, not confirmed certs. These are non-personal art assets (low risk), but email fal sales for a written DPA + EU data-residency region before storing any player/personal data.
- Fallback: Replicate — same breadth, and the one thing fal lacks: host your own LoRA/fine-tune for a locked VigFi house style (trade-off: per-GPU-second billing, ~30–50% pricier). BFL-direct (German vendor, cleanest EU jurisdiction) for stills-only cost optimization.
- Alpha note: no model emits clean alpha video; generate sprites on chroma-green + matte with BiRefNet/rembg (same key).
LayerDiffuse(on Runware) does native RGBA stills if you want it. - Skip: Sora 2 (API sunsets Sep 2026, bans 3rd-party uploads) · Theatre.js (pre-1.0, stale, AGPL editor) · the old
@pixi/particle-emitter(pins pixi <8 — use Pixi v8's native Particle API instead).
✓ Verified by a 17-agent background research workflow (628K tokens) with adversarial price/EU/alpha fact-checking — stale figures corrected.
VigFi Kazino animated-visuals prototype · self-contained · open with any static server · placeholder data only, no backend.
Assets are production sprites from perkons-game and vigfi-kazino-lechat. Motion runtime: js/fx.js (~6 KB, vanilla).