How I Made 4 Cinematic Muslim App Ads in 3 Hours (AI Video + React)

Open the App Store and search "Quran". You'll see a wall of apps that look like they were designed in 2015. Green gradients. Comic Sans-adjacent fonts. Stock photos of mosques at sunset stretched out of proportion.

I shipped QuranWay — a Muslim prayer app — without ever marketing it publicly. With v1.3 sitting in Apple review and zero budget, I gave myself an afternoon to ship its first UGC campaign. Four cinematic ads, ready for TikTok, Reels and YouTube Shorts, generated with AI and edited with code.

Here's exactly how I did it — including the two failed creative directions before the one that worked.

The brief: zero budget, 5 AI credits, 9:16 vertical

Constraints first. I had:

• 5 credits on Google Flow / Veo Lite — that's about 5 generations of 8-second clips, no more
• No actors, no studio, no shooting day — pure AI generation
• No video editor app — I'd built a Remotion setup for Veil of Aeons Shorts earlier and wanted to reuse it
• One afternoon before another project demanded my attention

The angle I picked: position QuranWay as "the Muslim app that actually looks like 2026". Design-led, premium, aimed at Gen Z Muslims who've stopped expecting good UX from religious apps.

Pivot 1 — the "Apple ad with a phone" trap (rejected)

My first instinct was to mimic Apple ads. Phones floating in space, glowing screens, smooth dolly-ins. Cinematic, premium, safe.

I generated one clip with this prompt:

Ultra-premium cinematic product shot of a modern vertical smartphone
floating in space, slowly rotating 360 degrees. Background is a deep
teal-to-black gradient with subtle golden particle bokeh. Studio lighting
with gold rim light on the device edges. Apple-ad aesthetic. 100mm macro
lens. Ultra-slow rotation. Clean, minimal, iconic. 8 seconds.

The output was beautiful. Cinema-grade. I felt great about it for thirty seconds.

Then I asked myself: what does a TikTok scroller learn from this in the half-second their thumb hesitates? Nothing. A phone. Could be Apple. Could be Samsung. Could be a Squarespace ad. Zero connection to Islam, zero connection to QuranWay, zero hook.

Lesson 1: a beautiful product shot of a generic phone is not marketing — it's stock footage.

Pivot 2 — phone + Muslim props (still wrong)

Round two: keep the phone but add Muslim cultural markers around it. A closed Quran on a wooden table, a tasbih draped across, a prayer rug peeking from the corner. Plus some abstract glow on the phone screen to suggest the app.

I drafted prompts. Reread them. Then realized the same trap was waiting: the phone was still the visual hero. The viewer's eye would lock onto the screen, expect to see the app's UI, and find a vague glow instead. Anti-climax. I'd be paying Veo to render generic phones with weird non-UIs.

Lesson 2: don't put your product where your story should be.

Pivot 3 — phone-free, life-first (the one that worked)

The unlock came from flipping the question. Instead of "how do I make a beautiful ad for an app", I asked "what does using QuranWay actually feel like in someone's life?"

The answer wasn't a phone. It was the moments the app shows up in:

• Turning the pages of a Quran in the morning
• Doing wudu before prayer
• Unrolling a prayer rug at dusk
• Counting beads on a tasbih in the quiet of late afternoon

None of these need a phone in the frame. None of them need the app's UI. They're instantly identifiable as Muslim life. A scroller's brain processes them in well under a second — the cultural markers do the targeting work that hashtags can't.

I rewrote the four prompts around these moments. Phone-free. Hands and rituals only. No on-screen text (I'd add overlays in code later — Veo's typography is unreliable). Here are the final ones, copy-paste ready:

Prompt 1 — Mushaf

Cinematic macro close-up of two hands gently turning the pages of an
open leather-bound book with delicate gold Arabic calligraphy on
cream-colored pages, resting on a warm wooden table. Soft morning
sunlight streams through a nearby window, creating warm highlights and
shallow shadows across the pages. A thumb slowly traces down a line of
script. 85mm macro lens, very shallow depth of field, cinematic ARRI
Alexa look. Slow meditative pace. Natural warm color palette. No text
overlays, no graphics, no modern devices in frame. 8 seconds.

Prompt 2 — Wudu

Cinematic slow-motion macro close-up of two hands under gentle running
water in a modern white ceramic sink. Clear water droplets rise and
fall in extreme slow motion as the hands slowly wash one another,
fingertips to wrist. Natural soft daylight from a side window creates
clean highlights on the water and skin. Warm neutral tones. No faces
visible, only hands and water. 100mm macro lens, shallow depth of
field, cinematic ARRI Alexa look. Calm ritual atmosphere. No text,
no graphics. 8 seconds.

Prompt 3 — Prayer mat

Cinematic close-up of two hands slowly unrolling a richly woven prayer
rug with an intricate geometric Islamic pattern featuring eight-pointed
stars and arches in deep burgundy, teal and gold thread, across a warm
wooden parquet floor. Golden-hour sunlight streams through a tall
window, casting long warm shadows and illuminating the fabric's
texture. 35mm lens, low angle, shallow depth of field, ARRI Alexa
cinematic look. Slow deliberate movement, peaceful atmosphere. No text,
no graphics. 8 seconds.

Prompt 4 — Tasbih

Cinematic extreme macro close-up of a single hand slowly counting a
string of 99 dark polished wooden prayer beads with a small tassel at
the end, sliding one bead at a time between the thumb and fingers.
Warm late-afternoon sunlight filters through a window, creating a soft
golden bokeh in the background. Shallow depth of field, 100mm macro
lens, ARRI Alexa cinematic look. Slow contemplative pace, peaceful
atmosphere. No text, no graphics. 8 seconds.

A few details worth stealing for any AI video prompt:

• Describe ritual objects by physical features, not religious names. "Quran" sometimes triggers safety filters; "leather-bound book with gold Arabic calligraphy on cream-colored pages" never does — and Veo gets the look right.
• Lock the lens. "85mm macro", "ARRI Alexa look", "shallow depth of field" — these are language Veo's training data understands. Generic adjectives ("nice", "pretty") are wasted tokens.
• Forbid what you don't want. Negative prompts in plain English ("no text overlays, no graphics, no modern devices in frame") work surprisingly well.

Veo nailed all four on the first try. Here are the mid-frames:

Total spend so far: 4 credits. Total time at this point: about 45 minutes.

The Remotion edit (15 minutes per clip)

Veo Lite stamps a small "Veo" watermark in the bottom-right corner of every clip. That's the price of free generation. I wasn't going to pay extra to remove it — I was going to crop it out in code.

I bootstrapped a fresh Remotion project (React → MP4) reusing patterns from a previous shorts project. The composition does three things per clip:

1. Crop the watermark. A CSS transform with a biased origin pushes the bottom-right corner off the frame.
2. Overlay a 3-line hook in Plus Jakarta Sans with a staggered word-by-word entrance and a thin gold accent line.
3. End on a 1.5s logo outro with the QuranWay icon, wordmark, and tagline.

The watermark trick is the most useful piece. Plain objectFit: cover upscales 720×1280 to 1080×1920 perfectly (1.5× in both axes), but the watermark scales right along with the rest and stays in the bottom-right. Adding a second transform with a biased origin pushes that corner out of frame:

<AbsoluteFill
  style={{
    transform: `scale(${videoScale})`,           // 1.20 → 1.28 across 8s
    transformOrigin: "30% 30%",                  // bias toward top-left
    overflow: "hidden",
  }}
>
  <OffthreadVideo src={videoPath} style={{ width: "100%", height: "100%", objectFit: "cover" }} />
</AbsoluteFill>

transform-origin: 30% 30% is the magic. Scaling expands everything outward from that anchor, which pushes the bottom-right corner ~13% past the frame at 1.28× — far enough to clip the watermark without losing the subject (which lives in the centre of the frame anyway). The slight scale-up over 8 seconds also gives the otherwise static shots a subtle Ken Burns drift.

Hooks are rendered with @remotion/google-fonts/PlusJakartaSans — the same font I used for QuranWay's App Store screenshots, so the brand stays consistent from feed to product page.

const lines = [line1, line2, line3];
return lines.map((line, i) => {
  const delay = 6 + i * 10;     // stagger lines by 10 frames
  const opacity = interpolate(frame, [delay, delay + 12], [0, 1]);
  const y       = interpolate(frame, [delay, delay + 18], [30, 0]);
  const blur    = interpolate(frame, [delay, delay + 10], [6, 0]);
  return <div style={{ fontFamily, opacity, transform: `translateY(${y}px)`, filter: `blur(${blur}px)` }}>{line}</div>;
});

Each line drops in with a soft blur clearing — the kind of subtle motion that makes the difference between "ad" and "video that earned my watch time".

The four hooks were chosen to map directly onto the app's biggest features without ever saying the words "feature" or "download":

• Mushaf → "Read. Memorize. Reflect."
• Wudu → "Start your day right."
• Prayer mat → "Never miss another prayer."
• Tasbih → "Build the streak."

npm run render:all produces four MP4s in about 90 seconds. Total Remotion time, including writing the composition: under an hour.

Publishing across three platforms

The same 9:16 file works on TikTok, Instagram Reels and YouTube Shorts — no re-encoding. I uploaded all four to YouTube via a CLI I'd built earlier, scheduled the TikToks, and posted the first Reel manually (Instagram still doesn't let solo creators schedule Reels without a third-party tool).

One small but expensive trap on YouTube: my upload script auto-generates clickbait-style titles via OpenAI by default. The first clip went up as "😱 VIRAL Muslim Lifestyle App Moment #Shorts". That title would absolutely poison the brand for a spiritual app. I patched the script call for the remaining three to pass --title --description --tags directly, and renamed the first one in YouTube Studio after the fact.

Lesson 3: never let auto-generated metadata ship for a brand-sensitive product. Pre-write the title.

For captions, I split TikTok (short, 5–7 hashtags, focused on #muslimtok #islamictok) from Instagram (longer, 10–15 hashtags, more discovery surface). Both include the App Store URL as plain text — non-clickable but useful for SEO and credibility — plus a "link in bio" pointer.

What I'd do differently next time

Three things I'm noting for v2:

1. Localise the winner immediately. EN as a master makes sense for the algorithm, but if a clip breaks 10k views, I want the Arabic, Indonesian, Turkish and Urdu overlays ready within an hour. The Remotion setup makes this trivial — change three strings, re-render. I'll pre-translate the hooks before posting next time.
2. Bake the audio decision into the pipeline. I muted the Veo audio (it's awful) and let TikTok/Reels users add a trending sound at upload. Worth experimenting with a soft sub-mix of trending Nasheed instrumentals baked in for YouTube where users don't add their own.
3. Treat the framework as the asset. The Remotion project is reusable for every future QuranWay drop, every WallCraft AI campaign, every other app I ship. Open-sourcing a stripped version is on my list.

The bigger pattern

The interesting thing isn't that I made four ads with AI in an afternoon. It's that the entire pipeline — generation, editing, rendering, upload — runs from a terminal. No Premiere, no Final Cut, no After Effects, no asset manager, no Asana board. A handful of TypeScript files and a few hundred bytes of YAML.

This is the production stack that was inaccessible to solo founders five years ago. It's now eight Veo prompts, a transform-origin, and npm run render:all.

If you want to see the result, QuranWay is free on the App Store. The four ads are scheduled to go live this week on TikTok, Instagram and YouTube. I'll come back and update this post with the metrics in seven days.

— Andy