Media

Module 04 · by AMLLC

Slot-Machine App Reels

Make the promo that sells the app. A grid of your tiles — food, products, avatars, screenshots — spins like a casino slot machine behind your headline, then settles. One self-contained HTML file renders 9:16, 3:4, and OG from the same markup. Screen-record it for App Store, TikTok, Reels, and Shorts; screenshot it for your link preview.

Guide $12 one-time Build $500+ done for you Stack One HTML file · no deps

Instant access — the reader opens right after payment. Or read chapter one free as a member.

See it move

The reel, live.

This is the actual output running in your browser, in OG (link-preview) size — flip to 9:16 or 3:4, hit Spin, or just let it loop. Screen-record a card exactly like this.

The result

What you end up with

A promo that looks bought, not templatedOvershoot easing, per-reel stagger, and spin-time motion blur give the reels the mechanical settle of a real machine — the difference between "sliding boxes" and a slot machine.

One file, three ratios9:16 for Stories and Shorts, 3:4 for feed video, OG 1.91:1 for link previews — all from the same markup. Flip a switch, not a file.

Emoji or your own imagesShip it with emoji in minutes, or drop in product shots, avatars, or screenshots as data URLs that render even with no network mid-recording.

Records clean, loops seamlessEach spin rotates and resets to a clean baseline, so auto-loop is invisible and a 4–6 second capture loops without a seam.

How it works

The technique, in four moves

No timeline software, no export pipeline. A container-query stage, three tile strips, and a Web Animations spin — everything else is copy and color.

The stage is the canvasOne element with container-type:size and a data-ar flag. Size everything in cqw/cqh so 9:16, 3:4, and OG all come from one document.

Three tile stripsThree reels, each ~26 square tiles. A tile is emoji-plus-tint or an image — data URLs so it renders offline while you record.

The mechanical spinAnimate each strip's translateY with an overshoot cubic-bezier; stagger the reels so later ones travel farther and stop later. Blur while moving, crisp on the stop.

Fade-to-solid textThe headline sits on a solid ground with a matching fade ramp above it, so the reels stay lively up top and never ghost behind the copy.

The detail that sells it

Overshoot, stagger, blur.

The difference between a promo that looks bought and one that looks templated is three things, all in the spin: an easing curve that overshoots its stop by a hair (the reel's mechanical settle), a per-reel stagger so the columns land one after another like a real machine, and a touch of motion blur while a strip is moving that clears the instant it stops. Miss them and you have sliding boxes; get them and you have a slot machine.

The math

One file replaces the render pipeline.

Motion tool or freelancer

Animation app / subscription$23–56 /mo

A promo cut per ratio$150–600 ea

Re-export for every tweakhours

Per promo set$450+

The slot-reel file

Runs in any browser$0 /mo

All three ratiosone file

Change copy or tilesedit + record

Per promo setminutes

What doesn't change: you still art-direct the headline and pick the tiles. Everything above that — the software rent, a per-ratio export fee, and the re-render every time you change a word — goes away. Swap the copy, hit Spin, screen-record. The file is yours to reuse for every launch.

Before you start

What you need

A browser, a headline, and a handful of tiles. That's the whole kit — the module walks the rest.

Checklist

A browser — anything modern; the page is one self-contained HTML file. · Your copy — wordmark, one headline, one subline, a CTA label. · Tiles — a dozen emoji, or square images inlined as data URLs. · A screen recorder — the built-in OS one is plenty for the vertical clips.

Inside the module

The reel, chapter by chapter

One file, three ratios

Why the stage is a container-query context and everything is sized in cqw/cqh — so 9:16, 3:4, and OG all come from a single document you never fork.

Building the reels

Three columns, ~26 square tiles each, emoji-plus-tint or images. Why data URLs matter when you record with no network, and why square art wins.

The spin that feels mechanical

The overshoot cubic-bezier, the per-reel distance and duration stagger, and the spin-time blur — the three details that read as a real machine.

The seamless re-spin

Rotate the scrolled tiles to the end and zero the transform on every stop, so auto-loop is invisible and a short capture loops without a seam.

Fade-to-solid so text always wins

Content on a solid ground with a matching fade ramp above it — the one-color rule that keeps the reels lively and the headline readable.

OG landscape + exporting the asset

The text-left / reels-right OG split with height-based type, and how to screen-record the verticals and screenshot the OG frame.

Who it's for

Made for the launch that needs a promo

You should read this if you're shipping an app, a feature, or a store and want a scroll-stopping promo — for the App Store, TikTok, Reels, Shorts, or your link preview — without opening a motion-graphics tool.

Skip it if you already have a motion designer on call and a budget for a cut per aspect ratio every time your headline changes.

Or skip the reading entirely — apply to have your branded reel built for you, tiles, copy, and all three ratios delivered, from $500.

Two doors

Read it, or hand it to us.

Do it yourself

Get the guide

$12 one-time

The full 6-chapter reader — the container-query stage, the tile strips, the mechanical spin, the seamless loop, the fade-to-solid overlay, and the OG split. The complete reference file included. Yours to keep, updated as the pattern improves.

Done for you

Have it built

$500+ per build

We build your branded reel — your tiles, your headline, your palette — and deliver 9:16, 3:4, and OG ready to post, plus the source file. Apply, we scope it, you approve a fixed price first.

Apply to have it built