How I Made 4 Cinematic Ads for My Muslim App in 3 Hours (AI Video + React)
Open the App Store and search "Quran". You'll hit a wall of apps that look like they were designed back in 2015. Green gradients. Fonts that flirt with Comic Sans. Stock photos of sunset mosques stretched out of proportion.
I shipped QuranWay — a Muslim prayer app — without ever promoting it publicly. With v1.3 in review at Apple and zero budget, I gave myself one afternoon to launch 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 creative directions that flopped before the one that worked.
The brief: zero budget, 5 AI credits, vertical 9:16 format
Constraints first:
- 5 credits on Google Flow / Veo Lite — roughly 5 generations of 8-second clips, no more
- No actor, no studio, no shoot day — pure AI generation
- No video editing app — I already had a Remotion setup for the Veil of Aeons Shorts that I wanted to reuse
- One afternoon before another project pulled my attention away
The angle I picked: position QuranWay as "the Muslim app that actually looks like it's 2026". Design-first, premium, aimed at Gen Z Muslims who stopped expecting good UX from religious apps.
Pivot 1 — the "Apple ad with a phone" trap (rejected)
My first instinct was to copy Apple ads. Phones floating in space, glowing screens, smooth dolly-ins. Cinematic, premium, safe.
I generated a 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 render was gorgeous. Movie-grade. I was happy with it for about thirty seconds.
Then I asked myself the real question: what does a TikTok scroller actually learn from this in the half-second their thumb hesitates? Nothing. A phone. It could be Apple. It could be Samsung. It 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 isn't marketing — it's stock footage.
Pivot 2 — phone + Muslim objects (still wrong)
Round two: keep the phone but add Muslim cultural markers around it. A closed Quran on a wooden table, a tasbih draped beside it, a corner of prayer rug peeking in. Plus an abstract glow on the screen to suggest the app.
I wrote the prompts. Reread them. And I realized the same trap was waiting for me: the phone was still the visual hero. The viewer's eye would lock onto the screen, expect a UI, and find a vague glow instead. Anticlimax. I'd be paying Veo to generate generic phones with weird non-UIs.
Lesson 2: don't put your product where your story should be.
Pivot 3 — no phone, life first (the one that worked)
The click came from flipping the question around. Instead of "how do I make a beautiful ad for an app", I asked myself "what does using QuranWay actually look like in someone's life?"
The answer wasn't a phone. It was the moments where the app shows up:
- Turning the pages of a Quran in the morning
- Doing ablutions before prayer
- Unrolling a prayer rug at dusk
- Counting a tasbih in the quiet of late afternoon
None of these moments need a phone in frame. None of them need the app UI. They're instantly identifiable as Muslim life. The scroller's brain processes them in well under a second — the cultural markers do the targeting that hashtags can't.
I rewrote all four prompts around these moments. No phone. Hands and rituals only. No native text (I'd add the overlays later in code — Veo's typography isn't reliable). Here are the final versions, ready to paste:
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 rug
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 their physical traits, not their religious name. "Quran" can trip safety filters; "leather-bound book with gold Arabic calligraphy on cream-colored pages" never does — and Veo nails the look perfectly.
- Lock the lens. "85mm macro", "ARRI Alexa look", "shallow depth of field" — that's 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-clip frames:
Total spent at this point: 4 credits. Total time: about 45 minutes.
The Remotion edit (15 minutes per clip)
Veo Lite stamps a little "Veo" watermark in the bottom-right corner of each clip. That's the price of free generation. I wasn't going to pay to remove it — I was going to crop it out in code.
I bootstrapped a fresh Remotion project (React → MP4) by reusing patterns from a previous Shorts project. The composition does three things per clip:
- Crops the watermark. A CSS transform with a biased origin pushes the bottom-right corner out of frame.
- Overlays a 3-line hook in Plus Jakarta Sans with a staggered word-by-word entrance and a thin gold accent line.
- Ends on a 1.5s logo outro with the QuranWay icon, wordmark and tagline.
The watermark trick is the most useful piece. An objectFit: cover upscales 720×1280 to 1080×1920 perfectly (1.5× on both axes), but the watermark scales along with everything else 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 over 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. The scale expands everything outward from that anchor, which pushes the bottom-right corner ~13% beyond the frame at 1.28× — far enough to clip the watermark without losing the subject (which lives in the center of the frame anyway). The slight scale-up over 8 seconds also gives the static shots a subtle Ken Burns drift.
The hooks are rendered with @remotion/google-fonts/PlusJakartaSans — the same typeface as QuranWay's App Store screenshots, so the brand stays consistent from the feed to the product page.
const lines = [line1, line2, line3];
return lines.map((line, i) => {
const delay = 6 + i * 10; // stagger lines every 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 arrives with a soft blur that resolves into focus — the kind of subtle motion that makes the difference between "ad" and "video worth my watch time".
The four hooks map directly onto the app's biggest features without ever saying "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 spits out four MP4s in about 90 seconds. Total Remotion time, including writing the composition: under an hour.
Publishing to 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 already built, scheduled the TikToks, and posted the first Reel by hand (Instagram still won't let solo creators schedule Reels without a third-party tool).
One small trap that can cost you on YouTube: my upload script defaults to auto-generating clickbait-style titles via OpenAI. The first clip went out as "😱 VIRAL Muslim Lifestyle App Moment #Shorts". That title would absolutely poison the brand for a spiritual app. I patched the call for the next three by passing --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 in 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:
- Localize the winner immediately. EN as the master makes sense for the algorithm, but if a clip clears 10k views, I want the Arabic, Indonesian, Turkish and Urdu overlays ready in an hour. The Remotion setup makes that trivial — change three strings, re-render. I'll pre-translate the hooks before posting next time.
- Bake the audio decision into the pipeline. I muted the Veo audio (it's bad) and left TikTok/Reels users to add a trending sound on upload. Worth experimenting with a soft sub-mix of trending Nasheed instrumentals baked in for YouTube, where users don't add their own sound.
- 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 AI ads in an afternoon. It's that the whole 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 out of reach for solo founders five years ago. Now it's eight Veo prompts, one 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 metrics in seven days.
— Andy