Engine decision after this research (2026-09-28): Gemini Omni is the only video model. Where this report routes shots to Veo 3.1, the engine uses Omni with the rules on the main page.
Styles 03 · Animation, illustration, motion-design and graphic ad styles
Research for Lead Up (September 2026). Scope: every animated, illustrated, motion-design or graphic look we could use
for 9:16, 30-60 s Derja ads on Facebook, Instagram and TikTok, and how to make each one at 10/10 quality with our
stack: Gemini TTS voice → timing spine → Nano Banana 2 (gemini-3.1-flash-image, Vertex) → Gemini Omni /
Veo 3.1 (image-to-video) → Remotion (text, UI, graphics, captions) → ffmpeg.
Research only. Nothing was generated and nothing was paid for. Tags: [official] vendor docs, [study]
peer-reviewed or panel research, [practitioner] studios, tutorials, trade press, [weak] marketing
"statistics" pages with no traceable method, [ours] our own lessons (ai-docs/03-lessons-learned.md) or
estimates, [bg] background knowledge not re-checked online in this session.
0. TL;DR
- The flatter and more graphic the style, the more of it must be Remotion code, not Omni/Veo. AI video is strong at lit, dimensional, material looks (clay, 3D characters, low-poly, product CGI, painterly camera moves, fluids). It is weak at flat vector, isometric, pixel art, line art and anything with text: it adds shading, perspective, line "boil" and morphing. For those, NB2 makes layered assets and Remotion animates them as cut-out puppets. Omni is kept for 1-3 "hero" moments per ad. [practitioner + ours]
- Stepped timing is the cheapest "handmade" signal. Holding each image for 2 frames ("on twos" = 15 fps look on
our 30 fps timeline) or 3 frames (10 fps) turns smooth AI motion into stop-motion, paper, anime or hand-drawn
motion. Prompt words like "12 fps stop-motion" help, but the real fix is to step the clip in Remotion with
<Freeze>. [practitioner + ours] - Our installed Remotion (4.0.498) already has most style "finishes" in
@remotion/effects: halftone, scanlines, tv-signal-off, chromatic-aberration, pixelate, paper, burlap, speckle, roughen-edges, duotone, noise, LUT, corner-pin, glow, outline, wave, liquid-contours and more (checked in the npm tarball for 4.0.498, 74 modules in 4.0.529). One install gives the comic, VHS, glitch, paper and pixel finishes.@remotion/gsaponly exists from 4.0.517, so it needs an upgrade. [official, checked] - Style drift is fixed by a "style bible", not by longer prompts. NB2 has no style-reference slot (only Nano Banana Pro takes 3 style refs; Veo 3.1 takes no style refs, only asset refs). So: one master style frame (make it with Pro if needed), a palette card rendered from code, a character sheet, then every NB2 call reuses the same verbatim style block plus 2-3 approved frames labelled "style reference only", then edit instead of re-rolling, and grade everything through one LUT and one grain layer in Remotion. [official + practitioner]
- For Tunisian identity, use Tunisian sources, not generic "Arabian" ones. Tunisian tiles (painted Qallaline and Nabeul tiles) are not Moroccan cut zellige. Kairouan carpets (Zerbia medallions, Mergoum diamonds, undyed Alloucha wool), Nabeul and Guellala pottery, studded Tunisian doors, Sidi Bou Said's lime-white and blue, Kufic lettering and Amazigh signs give an ad a real place. Keep them as a system (a border, a transition wipe, a palette, a pattern that assembles) and never as a costume. Never use sacred text as decoration. [practitioner + study + bg]
- Evidence on styles is thin; evidence on clarity is strong. No good study says "style X converts better". The solid findings are about hooks in the first 3 s, captions for sound-off viewers, simple text animation (letter-by-letter animation underperforms), brand early, and step-by-step drawing combined with a story (whiteboard research). Choose a style for fit and distinctiveness, then A/B test hooks, not styles. [study + practitioner]
1. How every style is built with our stack (the general method)
1.1 Who does what
| Layer | Job in every style | Never ask it to |
|---|---|---|
| Nano Banana 2 | Style bible, key frames, character sheets, layered cut-out assets on a flat chroma background, backgrounds and plates, textures (paper, grain, fabric), sprite sheets, 2K first frames for Omni | Render words, numbers, prices, maps or logos (it garbles Arabic, copies reference text and moves captions) [ours] |
Gemini Omni 1.1 Flash (720p, global) |
1-3 s hero moments: character acting, material/physics, camera moves through a lit scene, video-to-video restyle of a real clip (≤10 s input) | Hold a flat, isometric or pixel style across big moves; render text; long takes (it inserts cuts around 1-1.5 s) [official + ours] |
| Veo 3.1 | Fallback for the same jobs; up to 3 asset references (person, character, product) | Style references (not supported on 3.1, only on Veo 2 exp) [official] |
| Remotion | All text and captions, kinetic type, UI and phone screens, charts, diagrams, vector and puppet animation, paths, isometric builds, 3D via @remotion/three, Lottie/Rive, stepping, effects, grade, grain |
Nothing is off limits; it is only slower to author |
| ffmpeg | Normalise, datamosh passes, final encode, loudness | Style decisions |
1.2 The style bible (do this once per style, reuse forever)
- Master style frame: one 2K 9:16 frame that shows the style at its best (subject, palette, line, texture, light).
NB2 has no style-ref slot. For the first frame of a new style, Nano Banana Pro (
gemini-3-pro-image, 3 style reference slots, $0.134 per 2K) is worth the extra 3 cents. [official] - Palette card from code: render the 5-7 brand colours as a swatch PNG in Remotion (exact values). Pass it as a reference and describe colours by name in prompts ("chalk-white (pure white, never green or yellow)", "deep Sidi Bou Said blue"). Never put hex codes in Omni prompts: it writes them on screen. [ours]
- Character sheet (front, 3/4, side, 3 expressions) on a flat background. NB2 keeps up to 4 characters and 10 objects per call (API doc numbers). [official]
- Style block: a fixed paragraph pasted verbatim into every image prompt (templates per style below). Same words, same order. Put it last so the shot description comes first.
- Reference roles: label every reference in the prompt ("Image 1 = STYLE REFERENCE ONLY: copy the rendering, line and palette, not the content. Image 2 = CHARACTER: keep face, hair, clothes. Never copy any word from a reference."). [practitioner + ours]
- Edit, don't re-roll: when a frame is 80 % right, send it back with one change. Re-rolling re-rolls the style.
- Unify in post: one LUT (
@remotion/effectslut), one grain or paper texture, one frame-step rate and the same outline/shadow treatment on every shot. This hides small drifts between generations.
1.3 Universal style-block skeleton (NB2)
[SHOT] <what happens, who, where, framing: e.g. medium close-up, subject in lower third, room above for text>
[STYLE] <medium> . <line: weight, colour, quality> . <shading: flat / 2-tone cel / soft clay> . <palette by name,
max N colours> . <texture: paper grain / risograph dots / clay fingerprints> . <light: one key light from upper left,
soft> . <camera: lens or projection> .
[RULES] Vertical 9:16. No text, no letters, no numbers, no logos, no watermark. Never copy any word from a reference.
Clean flat <colour> background behind cut-out elements when asked. Match Image 1 rendering exactly.
1.4 Universal Omni rules for stylised shots (on top of our Omni rules)
- First frame = the approved NB2 frame; motion-only prompt; no hex, no captions, no dialogue. [ours]
- Name what must not change as positive statements: "the flat 2D look stays flat: same outlines, same flat colours, no new shading, locked-off camera, no new objects". Omni does not take negative prompts. [official]
- Small moves only. Big camera moves re-render the whole style and drift.
- Keep 1-3 s from 3 takes. Step it (on twos) and grade it in Remotion like every other shot.
- Omni can restyle a video ("make this video anime / watercolour / claymation"), and it keeps timing and layout. This is the best route for rotoscope and painterly looks from real footage (input ≤10 s; some regions restrict editing clips with recognisable people). [official]
1.5 Remotion building blocks used below
| Need | Tool (all at 4.0.498 unless noted) |
|---|---|
| Stepped motion (on twos/threes) | <Freeze frame={Math.floor(f/2)*2}> around a clip or layer |
| Hand-placed jitter | random('seed-'+Math.floor(f/2)) from remotion for ±2 px, ±0.6° per hold |
| Line drawing | @remotion/paths evolvePath(), getLength(), getPointAtLength() (pen or hand follows the tip) |
| Shape morph | @remotion/paths interpolatePath(); flubber for very different shapes |
| Shapes | @remotion/shapes (rect, circle, star, triangle, pie) |
| Organic wobble | @remotion/noise (noise2D/3D) |
| Finishes | @remotion/effects: halftone, scanlines, tv-signal-off, chromatic-aberration, pixelate, pixel-dissolve, paper, burlap, speckle, roughen-edges, duotone, noise, white-noise, lut, glow, outline, drop-shadow, corner-pin, wave, waves, liquid-contours, noise-displacement, light-trail, shine, zoom-blur, venetian-blinds, dot-grid, gridlines, emboss, thermal-vision |
| After Effects work | @remotion/lottie (Bodymovin JSON); @remotion/rive (.riv) |
| 3D | @remotion/three (<ThreeCanvas>, drive by useCurrentFrame(), not R3F useFrame; render with --gl=angle) |
| Skia / shaders | @remotion/skia |
| GSAP timelines | @remotion/gsap needs Remotion ≥4.0.517 (upgrade the whole set together) |
| Animated emoji | @remotion/animated-emoji |
| Word timings | @remotion/captions + our spine |
| Motion blur | @remotion/motion-blur (already installed) |
Rule from the Remotion charts guide: drive all animation from useCurrentFrame(). Third-party animation
libraries running on their own clock flicker in renders. [official]
2. What the evidence says (read before picking a style)
- Hook and sound-off. Meta's guidance: design for sound on and off, captions on everything, hook in the first 3 s. One report says ads with strong hooks in 3 s see "up to 89 % higher completion" (secondary source quoting a Meta report; treat the number as indicative). [practitioner]
- Text animation. A 2026 practitioner analysis of TikTok top ads: simple fade, pop or slide-in text performs; letter-by-letter, 3D and elaborate kinetic type underperform because they slow reading. 5-8 words per card, ~4 words/s reading speed, text 0.1-0.3 s before the voice, entrance 150-250 ms. [practitioner]
- ABCD (Google/Kantar, 17,000+ campaigns). Ads that follow Attention, Branding, Connection, Direction showed +30 % short-term sales likelihood and +17 % long-term brand contribution. The ABCD checklist includes brand in the first 5 s, voiceover, supers, tight framing, fast pacing. [study, vendor-run]
- Animation vs live action. Nielsen (TV, 2010): live action scored 22 % higher brand recall than animation only, but the gap was only 11 % for ages 13-35, and animation won by 28 % for food ingredients. Newer "animation wins" numbers online have no traceable method. Takeaway: animation is fine for a young social audience and for explaining something invisible (energy, savings, a process); real people and real work build trust. [study, old]
- Whiteboard and progressive drawing. Controlled studies: progressive drawing improves retention, and it works best combined with a story; the effect flips if you mismatch them (PMC 2023). The often-quoted "+15 % retention" study by R. Wiseman was sponsored by VideoScribe. [study; sponsor noted]
- Lo-fi beats polished on TikTok. TikTok Creative Center analyses keep finding native, phone-made creative ahead of studio polish (~75 % of top conversion ads are phone-native, per a secondary analysis). For us this means: polished animation should feel like it belongs in the feed (captions, speed, a face or voice), not like TV. [practitioner]
- 2026 taste. Every trend report (Envato, Videobolt, Genesis, GarageFarm, It's Nice That, School of Motion) says the same: feeds are saturated with smooth AI visuals, so visible human craft (texture, imperfect lines, paper, clay, collage, photocopy grain, hand lettering) stands out; taste is the differentiator. [practitioner]
- Meme stats are weak. Claims like "meme ads get 19 % CTR" come from statistics pages with no method. Ignore. [weak]
3. The styles
Each entry: Look · Best for / evidence · Build route (NB2 → Omni/Veo → Remotion) · NB2 style block · AI failure modes and fixes · Time (first build of the template / each later ad, for a 45 s ad, once VO and spine exist) [ours].
Cost reference [official + ours]: NB2 2K ≈ $0.10 per image; Omni 720p ≈ $1 per 10 s (≈ $0.40 per 4 s take).
3.1 Kinetic typography
Look. Words are the picture. Big type in 1-3 colours, bold grotesk or display faces, fast cuts on syllables and beats, masks, scale punches, word swaps, underline sweeps. Timing: 4-12 frames per entrance, holds of 0.8-1.5 s.
Best for. Offers, prices, objections ("ما عندكش فلوس؟"), lists of benefits, hooks, sound-off viewing, cheap A/B tests of hooks (the hook text drives 30-50 % swings vs 5-15 % for design tweaks, per RocketShip). Weak for emotion unless paired with a face or a sound.
Build route. 100 % Remotion. NB2 only for background textures (paper, concrete, fabric) or one photo cut-out.
No Omni.
- Drive every word from the spine's word times; entrance 0.1-0.3 s before the word is spoken.
- Arabic rules: animate by word or by line, never by letter (letters join; splitting breaks the shaping and
looks broken to any Arabic reader). For stretch effects use kashida (tatweel) growth between letters, not
letter-spacing. Measure RTL positions (our rule). Latin trade words stay Latin.
- Moves that read well: pop (scale 0.85→1 with spring, damping ~12), mask wipe from the reading side (right for
Arabic), highlight bar behind a keyword, number counters for prices (digits on screen), 2-word stacking.
- Fonts (Google Fonts, OFL): Arabic display: Lalezar, Rakkas, Marhey, Reem Kufi, Kufam (Morcos Key), Blaka,
Aref Ruqaa; Arabic text: Cairo, Tajawal, Readex Pro, Alexandria, El Messiri, Noto Kufi Arabic. Keep 2 faces max.
- Keep the owner's thick black-outline captions separate from display type.
NB2 block (texture plate). Macro photo of uncoated recycled paper, warm off-white, subtle fibres, even soft
light, no shadows, no text. Vertical 9:16.
Failure modes. Too much motion kills reading; letter-by-letter Arabic; text in the bottom 280 px (Meta UI) or top 150 px. Fix: one move per word group, safe zones, 5-8 words per card, 1.5 s minimum per line.
Time. Template 6-8 h; per ad 1.5-3 h. Cost ≈ $0.
3.2 Flat 2D vector explainer
Look. Flat fills, no or 2-tone shading, clean geometric shapes, consistent line (or no line), limited palette (4-6 colours), simple characters, pops and slides with overshoot, match cuts between shapes. 2026 version: flat plus grain/risograph texture and imperfect shapes. "Corporate Memphis" (bendy limbs, purple skin) is now read as soulless: avoid it.
Best for. Explaining a process (how net metering works, how a loan works, steps of an installation), SME services, B2B. Studios to study: Ordinary Folk (clear, minimal explainers for Google, Webflow, TED), Buck (style-agnostic; cel pass first to lock performance, then shape-layer clean-up), Giant Ant (narrative 2D), Oddfellows (design-led, strong typography).
Build route.
1. NB2: style frame, then each element as a separate asset (character body parts, props, backgrounds) on a
flat chroma background (pure magenta or pure green that the palette never uses). Key it out, or vectorise with
vtracer (colour) for crisp scaling.
2. Remotion: cut-out puppet animation (pivot points on shoulder, elbow, head), spring pops, @remotion/shapes,
interpolatePath morphs, wipes; icons from LottieFiles via @remotion/lottie (check each file's licence).
3. Omni only for a hero character moment, then restyle-check: step on twos and push through the same LUT.
NB2 block. Flat 2D vector illustration, clean geometric shapes, no outlines, flat fills with one darker shade for
shadows, palette of 5 colours only: chalk-white, deep blue, sun yellow, olive green, charcoal. Subtle risograph grain.
Friendly proportions (head 1/5 of body, normal skin tones). Orthographic front view, no perspective, no gradients,
no 3D shading. Plain magenta background behind the subject.
Failure modes. NB2 adds gradients and soft 3D shading ("flat" drifts to "soft 3D"). Omni adds perspective, shading and wobbling edges. Fix: say "no gradients, no 3D shading" as a positive rule ("flat fills only"), keep a master frame as reference, animate in code, not in Omni.
Time. Template 10-14 h (rigging kit); per ad 4-6 h. NB2 20-40 assets ≈ $2-4.
3.3 Isometric illustration (2.5D)
Look. Orthographic view at ~30° (true isometric) or 2:1 "game" dimetric; no vanishing point; miniature-world dioramas; clean faces with 3 tones (top light, left mid, right dark); build-up animations (tiles rise, objects pop in, flows travel along paths).
Best for. Systems and flows: a house cut-away with panels → inverter → battery → grid, energy flowing as dashed lines, a factory, a shop. Classic in SaaS/fintech (Dropbox, Slack onboarding). Very strong fit for installers.
Build route.
1. NB2 is good at isometric if you name the projection. Generate the base scene and each object separately (same
angle) on flat background.
2. Remotion does all motion: objects drop in with spring (translateY −80 → 0 + scale), tiles cascade by distance
from centre, energy lines with evolvePath + moving strokeDashoffset, counters, labels in code. Camera = 2D
pan/zoom only (keeps the projection honest).
3. Alternative: build the scene in @remotion/three with an OrthographicCamera rotated (45°, 35.264°) and simple
boxes: exact, infinitely editable, no drift.
4. Omni: avoid. Camera moves add perspective. If used, "locked-off orthographic camera, no camera movement" for small
loops (water, a fan) and crop.
NB2 block. Isometric 3D illustration, true isometric orthographic projection at 30 degrees, no perspective, no
vanishing point. Clean matte surfaces, 3 tones per face (lit top, mid left, dark right), soft ambient occlusion, no
outlines. Palette: chalk-white walls, terracotta roof, deep blue solar panels, olive trees, sand ground. Miniature
diorama on a plain light-grey background, generous empty space above for text.
Failure modes. Mixed angles between assets; objects in slight perspective; NB2 drawing panel grids wrong (count
of cells). Fix: generate from one scene and edit, re-use the same reference, draw panels and cables in code, check
angles by overlaying a 30° grid (@remotion/effects gridlines).
Time. Template 10-12 h; per ad 3-5 h. ≈ $2-3.
3.4 3D clay / claymation (current house look)
Look. Plasticine materials, rounded forms, fingerprints and tool marks, soft subsurface, single warm key light, miniature sets with felt/paper props, slight shallow depth of field, stepped motion (12 fps feel), small "boiling" between holds. Studios: Aardman, LAIKA (Wildwood: 230+ puppets), "stop-motion-inspired CGI" is a 2026 trend.
Best for. Warm brand films, mascots, humour, family products. Distinctive in the feed; reads as craft.
Build route. NB2 key frames and character sheet → Omni is strong here (material, light and soft physics) →
Remotion steps every clip on twos (<Freeze>), adds tiny jitter per hold, text in code with clay-coloured
plates, one LUT and grain.
NB2 block. Handmade claymation miniature, plasticine characters with visible thumbprints, soft creases and
slightly uneven hand-shaped features, matte clay (no gloss, no plastic sheen). Miniature set with felt, card and
painted wood props. One warm key light from upper left, soft shadows, gentle shallow depth of field, 50 mm lens at
eye level of the puppets. Palette: <named colours>. No text.
Omni motion line: stop-motion puppet movement, small deliberate steps, the clay stays the same shape, locked-off
camera (then step it in code).
Failure modes. Too smooth (reads CG), glossy plastic, faces melting, over-lit sets with glow and bokeh (our v1 tells). Fix: fingerprints, "matte clay", one key light; step on twos; cut before 2 s; re-mint frames from NB2 instead of chaining last frames.
Time. Template done; per ad 6-10 h. NB2 30 frames ≈ $3; Omni 30 shots × 3 takes ≈ $36.
3.5 Stop-motion / paper-craft / cut-out
Look. Layered cut paper with visible fibres, deckled or scissor edges, small drop shadows between layers, pop-up-book depth, objects moved by hand (tiny jitter), 8-12 fps. Variants: diorama (paper theatre), flat cut-out (Terry Gilliam / South Park lineage), craft materials (felt, cardboard, string).
Best for. Local, humble, trustworthy SMEs; seasonal campaigns (Ramadan, Aïd, rentrée); stories told step by step. Cheap to make feel "crafted".
Build route.
1. NB2: one master diorama frame, then each paper layer as a separate asset (sky, hills, house, sun, character
parts) on flat chroma. Paper texture plates.
2. Remotion: layers in depth (parallax), every move stepped at 10-15 fps, per-hold jitter, @remotion/effects
paper/burlap/roughen-edges, drop shadows, pop-up hinges (rotateX from 90° to 0° with spring).
3. Omni: one or two shots of a paper world with "stop-motion paper puppets, 12 fps", then step it anyway.
NB2 block. Handmade paper-craft diorama photographed in a studio: layered cut coloured cardstock with visible
fibres and slightly rough scissor edges, small real shadows between layers (2-5 mm depth), a few pencil guide marks
left visible. Soft daylight from a window at left. Palette: <names>. Macro 50 mm, shallow depth of field. No text.
Failure modes. NB2 makes plastic-looking "paper"; edges too perfect; Omni morphs paper into cloth. Fix: say "cardstock", "scissor edges", "pencil marks"; keep most motion in code.
Time. Template 8-10 h; per ad 4-6 h. ≈ $2-4.
3.6 Mixed-media collage (photo cut-outs + doodles)
Look. Real photo cut-outs with white sticker borders, halftone or photocopy textures, torn paper, tape, marker doodles (arrows, circles, underlines), mismatched "pick and mix" letters, scanner grain. It's Nice That 2026 trends: "make me a copy" (photocopier grain), "visual index" (numbered cut-outs like specimens), "pick and mix" type.
Best for. Energetic social ads, before/after, lists ("3 أسباب…"), youth brands, retail promos. Reads as human-made and native to Instagram.
Build route. NB2: photoreal cut-out subjects (installer, panel, fatoura, house) with a white sticker border on
flat background; torn-paper and tape assets. Remotion: stop-motion placement (on threes), doodles as SVG paths drawn
with evolvePath, @remotion/effects halftone + speckle + duotone, marker-scribble reveals, ransom-note headline
built in code from mixed fonts (never AI-lettered). Omni: short live shots inside a torn-paper window.
NB2 block. Photographic cut-out of <subject> for a paper collage: realistic photo, cut out with a clean 3 mm
white paper border like a sticker, slight paper curl and soft shadow, on a plain flat grey background. Neutral
daylight, true colours. No text.
Failure modes. AI "collages" melt pieces into one image; fake handwriting. Fix: generate pieces separately, write text in code, keep doodles as vector paths.
Time. Template 6-8 h; per ad 3-4 h. ≈ $1-3.
3.7 Hand-drawn / whiteboard / doodle
Look. Black line on white (or chalk on dark), a pen or hand drawing each element, light colour fills, arrows and labels, "line boil" (lines shimmer slightly between frames). Variants: sketchnote, chalkboard, marker on kraft paper.
Best for. Explaining with a story (evidence: progressive drawing + narrative improves retention). Tariffs, savings maths, "how it works". Also fits InfoLab-style teaching.
Build route.
1. NB2: line-art frames ("single-weight black ink line, no fills"). Convert to strokes: vtracer/potrace give
outlines, not centre-lines; for a true "pen drawing" reveal use autotrace --centerline, or draw key paths by
hand in Figma, or reveal the raster with a mask that follows the stroke order.
2. Remotion: evolvePath per stroke in drawing order, a hand/pen PNG placed at getPointAtLength of the stroke tip,
fills fade in after the line, labels typed in code. Line boil: SVG feTurbulence + feDisplacementMap
(scale 2-3) whose seed changes every 3 frames.
3. Omni/Veo: not needed. Veo can do "whiteboard" but draws gibberish text and redraws lines. [practitioner]
NB2 block. Clean whiteboard line drawing, single-weight black marker line (3 px at 1080 wide), no fills, no
shading, no text, simple friendly shapes, generous white space, pure white background.
Failure modes. Varying line weight inside one drawing; AI text in drawings; drawing order that makes no sense. Fix: ask for one weight, erase text by edit, author stroke order in code.
Time. Template 8-10 h (hand + path tools); per ad 3-5 h. ≈ $1-2.
3.8 Anime / manga style
Look. Cel-shaded characters (flat base + one hard shadow tone), thin clean line, big expressive eyes, painted backgrounds (soft watercolour or gouache skies), speed lines, impact frames, smears, held poses with camera pans, animation on twos/threes, dramatic sun flares used sparingly. Manga variant: black and white with screentone.
Best for. Youth (15-30), gaming, education, telecom, food delivery. Strong scroll-stopper in Tunisia's young audience [bg].
Build route. NB2 key frames and character sheet (describe the look, do not write studio names) → Omni for
short acting beats (1-2 s: hair and cloth in wind, a head turn, a smile) → Remotion: step on twos/threes, speed-line
overlays, impact frames (1-2 frames of inverted black/white with @remotion/effects invert), camera shake, text and
SFX lettering in code. Omni restyle "make this video anime" also works on a real clip.
NB2 block. Japanese TV anime key frame: clean thin dark-brown line art, cel shading with one hard shadow tone and
one highlight, flat colours, hand-painted watercolour background with soft clouds, warm late-afternoon light, 35 mm
anime camera framing, expressive face, natural Tunisian features and clothes. No text, no speech bubbles.
Failure modes. Face and line drift between shots; Omni adds soft 3D shading; a "generic AI anime" look (glossy skin, sparkles). Copyright: naming Ghibli or other studios invites the Disney/Universal v. Midjourney kind of risk and looks derivative. Fix: master frame + character sheet in every call, short shots, stepped timing, a paper-grain overlay, describe attributes only.
Time. Template 8-12 h; per ad 6-8 h. ≈ $3 NB2 + $15-30 Omni.
3.9 Comic book / graphic novel panels (motion comic)
Look. Ink outlines, halftone dots, flat or limited colour, panels and gutters, speech balloons, SFX lettering, camera moves across panels, 2.5D parallax inside a panel. Variants: Franco-Belgian "ligne claire", US superhero, European graphic novel, Tunisian satirical comic (Lab619 collective, Willis from Tunis) [bg].
Best for. Before/after stories ("Si Mohamed and his 300 dinar bill"), testimonials, humour, series of ads with a recurring character.
Build route.
1. NB2 does sequential art well ("Keep the character consistent across all panels" is in Google's own examples).
Generate each panel without balloons or text, plus the character and background of key panels as separate
layers for parallax.
2. Remotion: page layout and gutters in code, camera moving panel to panel, panels sliding in, 2.5D parallax (3-4
layers), @remotion/effects halftone on colour areas, balloons and Arabic lettering in code (hand-lettered
Arabic display fonts: Marhey, Lalezar, Aref Ruqaa).
3. Omni: 1-2 "panel comes alive" moments, then halftone + step.
NB2 block. Comic book panel, European clear-line style: uniform black ink outlines, flat colours with halftone
dot shading, no gradients, clean readable staging, <framing>. Characters: <from sheet>. Leave empty space at top for a
speech balloon. No text, no balloons, no letters.
Failure modes. NB2 inserts gibberish balloons; line weight changes panel to panel. Fix: "no balloons, no letters", reference the first approved panel, edit instead of re-roll.
Time. Template 8-10 h; per ad 4-6 h. ≈ $2-4.
3.10 Pixar-like 3D character animation (stylised feature-film 3D)
Look. Stylised proportions, soft subsurface skin, big readable expressions, physically based materials, cinematic lighting (key, fill, rim), shallow depth of field, strong acting and squash/stretch, 24 fps smooth.
Best for. Emotional stories with a character, mascots, family audience. Expensive-looking.
Build route. NB2 character sheet + key frames → Omni/Veo are strongest in this look (they were trained on lots of it) → Remotion: text, grade, cuts. Keep the narrator voice (no lip-sync in Derja; lip-sync to Derja audio is not reliable).
NB2 block. Stylised 3D animated feature-film look: appealing rounded proportions, soft subsurface skin, detailed
fabric, physically based materials, cinematic three-point lighting with a warm key from left, 35 mm lens, gentle depth
of field. Tunisian characters and setting: <details>. No text. Describe; never write "Pixar", "Disney" or a film
title (legal risk, and it pulls in known characters).
Failure modes. Uncanny mouths, identity drift, "AI glow" (rim light and bokeh everywhere), too glossy. Fix: character refs every call, restrained light (our one-key-light rule), cut short, grade flat-ish.
Time. Template 6-8 h; per ad 6-10 h. ≈ $3 NB2 + $30-40 Omni.
3.11 Low-poly / toy-like 3D
Look. Low-poly: visible flat facets, flat shading per triangle, gradient sky, simple geometry. Toy-like: glossy or soft-touch vinyl, rounded edges, tilt-shift miniature world, bright primaries, playful bounce.
Best for. Maps and journeys, games, kids and family, "mini-city" explainers (a whole neighbourhood going solar).
Build route. Two good routes:
- Code 3D in @remotion/three: meshStandardMaterial flatShading, low-poly primitives, orthographic or long lens,
everything animatable by frame, zero drift. Best for maps and systems.
- NB2 → Omni: faceted or toy frames; Omni handles camera moves over a miniature well (tilt-shift). Facets tend to
smooth out on big deformations: animate the camera, not the objects.
NB2 block. Low-poly 3D scene, clearly visible flat triangular facets, flat shading per facet, no textures, soft
gradient sky, palette of 6 colours: <names>, tilt-shift miniature photography, 85 mm long lens from high angle.
No text.
Failure modes. Facets melt into smooth shapes in video; toys get fake logos. Fix: code 3D for anything that moves a lot; "no logos, no printed marks".
Time. Code route: template 12-16 h, per ad 3-5 h. AI route: per ad 5-7 h.
3.12 Retro: VHS, 90s TV, Y2K, synthwave
Look. - VHS / 90s TV: 4:3 frame inside 9:16, soft chroma bleed, scanlines, tracking lines, head-switching noise at the bottom, date stamp, overscan, warm saturated video colours, 90s TV graphics (bevelled logos, "مباشر" bug). - Y2K: chrome and liquid metal type, bubble shapes, iridescent gradients, frosted glass, early web UI ("Frutiger Aero" is back), pixel icons. - Synthwave: neon magenta/cyan on dark purple, perspective grid floor, sunset with bars, chrome logo, VHS grain.
Best for. Nostalgia hooks for 25-45 year-olds ("remember 90s bills?"), youth brands, music, events. Nostalgia is a strong 2025-26 marketing theme (Y2K references in many Gen Z campaigns; analog texture as relief from over-optimised visuals). [practitioner]
Build route. NB2: 90s-looking scenes (a Tunisian living room in 1996, CRT TV), Y2K chrome objects (no text).
Omni: short shots. Remotion does the look: @remotion/effects scanlines, chromatic-aberration, noise,
tv-signal-off (for transitions), wave (tracking), a 4:3 matte; synthwave grid and sun in @remotion/three or CSS 3D;
chrome type with gradients + emboss/shine in code.
NB2 block (VHS scene). Photo from a 1990s Tunisian home video: CRT television, patterned sofa, warm tungsten
light, slightly soft focus, faded saturated colours, 4:3 framing composition. No text, no date stamp. (Add the date
stamp in code so the numbers are right.)
Failure modes. Fake date stamps and TV logos with garbled text; overdone effects that hurt readability. Fix: all overlays in code; keep captions clean on top of the effect (effects on the picture layer only).
Time. Template 6-8 h; per ad 3-4 h.
3.13 Pixel art / 8-bit game
Look. Low resolution (e.g. 180×320 for 9:16, scaled ×6), hard pixel edges, limited palette (16-32 colours), dithering, sprite animation at 6-12 fps, game UI (health bars, coins, "LEVEL UP"), chiptune SFX.
Best for. Gamification ("level up your bill"), youth, tech, telecom. Very distinctive in feeds.
Build route.
1. NB2: scenes and sprite sheets (4-8 frames in a row, same size). AI pixel art has fake pixels (mixed sizes,
blurry edges). Fix with proper-pixel-art (ppa input.png -c 16 -s 6): detects the grid, locks one palette.
For sheets, quantise the whole sheet with one palette before slicing, or frames flicker.
2. Remotion: CSS image-rendering: pixelated, sprite frame index = Math.floor(frame / 4) % n, movement snapped to
the pixel grid (round positions to multiples of the scale), UI and text in code. Pixel fonts: "Press Start 2P"
(Latin), Handjet (modular pixel font with Arabic support). @remotion/effects pixelate/pixel-dissolve for
transitions.
3. Omni: avoid (it cannot hold a pixel grid). If you must, run the clip through ppa video mode (fixed grid and
palette over sampled frames) and step it.
NB2 block. True pixel art, 16-colour limited palette, every pixel a clear square on a strict grid, 1-pixel dark
outlines, no anti-aliasing, no blur, no gradients except ordered dithering, side-view game scene, flat background.
No text, no UI.
Failure modes. Off-grid pixels, 200 colours, frame-to-frame palette flicker, text. Fix: ppa + shared palette +
code UI.
Time. Template 8-10 h (sprite pipeline); per ad 4-5 h. ≈ $1-2.
3.14 Glitch / datamosh / brutalist
Look. - Glitch: RGB split, block displacement, tearing, scanline jumps, pixel sorting, 2-6 frame bursts on beats. - Datamosh: one shot "melts" into the next because keyframes were removed and motion vectors smear the old image. - Brutalist: raw grids, huge condensed type, black/white + one acid colour, visible structure (rules, numbers, crop marks), hard cuts, no easing. 2026 relatives: "blotch" logos, "pick and mix" type, micrographics.
Best for. Tech, telecom, fashion, music, "breaking news"-style offers, transitions. Use as punctuation (a transition, a hook), rarely for a whole ad.
Build route. All code. @remotion/effects: chromatic-aberration, tear, tv-signal-off, pixelate, white-noise,
scanlines, duotone, venetian-blinds, zigzag. Datamosh: render the A→B transition, then run a datamosh script
(tiberiuiancu/datamoshing, FFglitch, or ffmpeg select of P-frames on an MPEG-4 AVI with a huge GOP) and bring the
result back as a clip. Brutalist layout = CSS grid + big type in code.
NB2 block. Not needed (use existing shots). For brutalist textures: Black and white photocopy texture, toner
specks, high contrast, no text.
Failure modes. Unreadable text; photosensitive risk (keep flashes under 3 per second, WCAG 2.3.1); glitch on captions. Fix: glitch the picture layer, keep captions stable; bursts ≤6 frames.
Time. Template 4-6 h; per ad 1-2 h (as transitions).
3.15 Infographic and data-viz animation
Look. Clean charts (bars, lines, donuts), counters, icons, labels, one highlight colour, grids, callouts; bars grow with staggered springs, numbers count, lines draw. 2026 "micrographics": tiny technical labels as decoration.
Best for. Savings and payback ("فاتورة 300 د → 40 د"), comparisons, proof. Numbers make a claim concrete.
Build route. 100 % Remotion (SVG + D3 layouts; Remotion's charts guide: bars with staggered spring, pies with
strokeDashoffset from 12 o'clock, bar races by interpolating snapshots). NB2 only for icons and illustrated
backgrounds; never let NB2 draw numbers or charts (wrong values, garbled digits). Maps of Tunisia from Natural
Earth in code (our rule).
NB2 block (icon set). Set of 6 flat icons on a 3x2 grid: solar panel, house, sun, battery, bill, wrench. Same
2.5 px rounded line, same corner radius, 2 colours: deep blue and sun yellow, plain white background, generous
spacing. No text. Then cut the grid in code.
Failure modes. Misleading scales (Meta and consumer-law risk), too many numbers per card. Fix: one number per beat, axis honest, source line in small text.
Time. Template 6-8 h; per ad 1.5-3 h. ≈ $0-1.
3.16 UI / app-screen motion (product walkthrough, phone mockups)
Look. A phone (flat or 3D) showing screens: taps (ripple), scrolls, notifications, chat bubbles, form fills, cursor paths; zoom-ins on a detail; screens sliding in 3D.
Best for. Direct response: "send us your bill on WhatsApp", booking flows, apps, quotes, dashboards (monitoring app of the solar system). Practitioner advice: open with the product, not a logo; plain transitions.
Build route.
- Screens are React components (exact Arabic text, RTL, prices), animated frame by frame. Never AI-generated UI.
- Phone in hand: NB2 photo of a hand holding a phone with a plain green screen, then place the React screen with
@remotion/effects corner-pin. For a moving hand, Omni clip + corner-pin keyed by hand-placed points every
few frames (short shots only).
- Chat UI: generic chat bubbles in your colours. Do not recreate WhatsApp's UI and logo pixel-for-pixel; use the
official "Send message" CTA of the ad format. Do not imitate a real STEG bill layout or logo: use a generic
"fatoura" design (impersonation risk).
NB2 block. Close-up photo of a Tunisian man's hand holding a black smartphone upright, screen is solid flat
green (chroma key), no reflections on the screen, soft daylight, blurred warm living-room background, 50 mm lens.
No text.
Failure modes. Screen glare breaks keying; fake UI text. Fix: "no reflections on the screen", all UI in code.
Time. Template 8-10 h (UI kit); per ad 2-3 h.
3.17 3D product render / CGI "Apple-style" hero
Look. Product alone on a dark or seamless gradient void, single soft key + rim, slow orbit or macro dolly, reflections on glass, exploded views, big clean type reveals in white.
Best for. Premium equipment (panels, inverters, batteries, heat pumps), launch ads, "hero" first 3 s.
Build route.
- AI route: NB2 product kit (same product from 3-4 angles, ideally from real product photos as references) →
Omni/Veo for orbit/dolly (they do camera moves around a single object well; "Always image-to-video, never
text-to-video" and "use only the best seconds" is the practitioner rule) → Remotion for type and specs.
- Code route: a real GLB model (manufacturer CAD or a simple model) in @remotion/three: exact, reusable, no logo
morphing. Worth it for products we show in many ads.
- Logos on products morph in AI video: keep them small, turned away, or composite the real logo in code.
NB2 block. Studio product render of <product> on a seamless charcoal-to-black gradient, one large soft key light
from upper left, thin cool rim light from behind right, crisp reflections on glass, true materials (anodised
aluminium frame, tempered glass), 100 mm lens, product occupies the middle third, empty space above. No text, no
logos.
Failure modes. Changing cell count on panels, logo gibberish, melting edges in orbits. Fix: code 3D or very short moves; re-mint frames per shot.
Time. AI route per ad 3-5 h; code route template 10-16 h, per ad 2-3 h.
3.18 Liquid / abstract shape motion
Look. Blobs that merge (metaballs), morphing shapes, flowing gradients, ink in water, marbling, "liquid glass" (Apple 2025), soft-body "oddly satisfying" simulations, shapes that squash and stretch on beats.
Best for. Transitions, brand identity moments, beauty and wellness, backgrounds behind type.
Build route. Mostly code: SVG goo filter (feGaussianBlur stdDeviation 10-14 + feColorMatrix alpha
0 0 0 20 -8) for metaballs; @remotion/noise for organic outlines; interpolatePath/flubber for morphs;
@remotion/effects liquid-contours, noise-displacement, wave, waves, glow. NB2: gradient and marbling textures.
Omni/Veo: good at real fluids (ink macro, water, oil and paint) as b-roll or transitions.
NB2 block. Macro photograph of blue and yellow ink blooming in clear water on a white background, soft
diffused light, high detail, no text.
Failure modes. Looks like a screensaver if it carries no message; banding in gradients (add noise). Fix: tie the shape to the idea (sun → drop → coin), add fine grain.
Time. Template 4-6 h; per ad 1-2 h.
3.19 Meme formats and templates
Look. Native internet formats: top-and-bottom captions, "POV:", "Nobody: / Me:", two-panel reactions, expectation vs reality, zoom-punch on a face, reaction cut-ins, Notes-app screenshots, green-screen "creator" frames, fake-tweet cards, trending audio.
Best for. TikTok and Reels reach, humour, objection handling ("me when the STEG bill arrives"), retargeting. Tunisian meme culture is strong and very local [bg]. Performance "statistics" online are weak; test it.
Build route. Build our own meme templates in Remotion (panel layouts, zoom-punch, shake, freeze-frame with record-scratch SFX, "POV" header). Faces: NB2 original characters (e.g. the recurring clay or comic character) or a real team member. Never use meme stills from films, TV or other people (copyright and personality rights). Keep Derja humour lint-checked.
NB2 block. Reaction shot, <original character> with an exaggerated shocked face, holding a paper bill, flat
bright background, frontal medium close-up, same character as Image 1. No text.
Failure modes. Stale formats; cringe; looking like an ad. Fix: speed (post within the trend's life), one joke per ad, product appears as the punchline.
Time. Template 4-6 h; per ad 1-2 h.
3.20 Rotoscope / painterly / watercolour
Look. Real motion traced as drawing (A Scanner Darkly, "Take On Me"), or live footage turned into painted frames (oil, gouache, watercolour with paper bleed), painterly 3D (The Wild Robot look), brush strokes that stay stable.
Best for. Emotional testimonials, premium brand films, disguising low-quality phone footage, "real people but illustrated" (privacy-friendly).
Build route.
- Omni video-to-video: film a real 5-10 s clip (installer on a roof, family at home, our own footage), then "make
this video a watercolour painting on textured paper, keep the same motion and framing". Keeps real timing and
acting. [official]
- EbSynth (non-generative, texture synthesis): paint 1-3 keyframes (NB2 edit of a video frame into watercolour),
EbSynth propagates to the whole clip with high temporal stability; add keyframes when the subject turns a lot.
[practitioner]
- Remotion: paper texture overlay (paper), stepped at 12-15 fps, soft vignette.
NB2 block (keyframe edit). Repaint this exact frame as a loose watercolour painting on cold-press paper: soft
wet-in-wet washes, visible paper texture, pencil under-drawing lines, keep every shape, pose and position exactly the
same, same framing. No text.
Failure modes. Brush strokes "swim" and flicker frame to frame; faces change. Fix: EbSynth for stability, step on twos (hides swim), a static paper texture layer on top (a fixed texture reads as "one painting").
Time. Per ad 5-8 h (includes shooting). ≈ $5-15 Omni.
3.21 North-African / Arabic-inspired graphic styles (Tunisian)
This is the style that can make Lead Up recognisably Tunisian. It is a layer system that combines with other styles (flat, paper, clay, isometric, kinetic type), not a style on its own.
A. Source material (use real Tunisian references)
| Source | What it gives us | Notes |
|---|---|---|
| Sidi Bou Said | Lime-white + one deep blue; arched doors, mashrabiya window grilles, bougainvillea pink as accent | White walls came from a 1930s public-health campaign; the blue was popularised by Baron Rodolphe d'Erlange (settled 1907); protected by decree since 1915. Blue doors in Djerba mean welcome and peace (Ibadi tradition). A palette with history, not a travel cliché if used with restraint. |
| Tunisian doors | Studded nail patterns (clous) forming arches, stars, fish, khomsa; blue, yellow, green doors | Studs = perfect dot-grid animations: dots appear one by one to draw a motif. |
| Tunisian tiles ("zliz") | Painted ceramic tiles: Qallaline (Tunis, 17th-19th c.; yellow, green, blue, manganese), later Nabeul tiles with floral and geometric repeats [bg] | Not Moroccan cut-mosaic zellige (8- and 16-point star mosaics). Don't label Moroccan patterns as Tunisian. |
| Kairouan carpets | Zerbia (knotted, central medallion, arabesque borders, parallel stripe frames); Mergoum (kilim with diamond/lozenge patterns); Alloucha (undyed natural wool: cream, brown, grey) | Borders and stripe frames are ideal "frame" graphics for 9:16. Alloucha palette = calm premium neutrals. |
| Pottery | Nabeul (blue/green/yellow on white, fish, floral, geometric); Guellala/Djerba (earth tones, Berber signs); Sejnane (handmade Amazigh pottery, UNESCO-listed, red-brown geometric painting) [bg for Sejnane] | Brush-stroke motifs → hand-drawn line animation. |
| Amazigh signs | Yaz ⵣ (free human), lozenges (protection, home), triangles, crosses, dotted "eye" patterns; used in tattoos, carpets, jewellery, pottery | Meaningful symbols: use for identity, not as random filler. Moroccan artist Hamza Khafif (TaSh36) shows a modern, political use of Amazigh motifs. |
| Arabic script | Kufic (square/geometric, strong in Kairouan's history), Maghrebi script, modern display Arabic | Modern bilingual typography: Morcos Key (Kufam typeface, bilingual identities), Studio Safar (Beirut), TYPE01 (Arabic-only branding platform), Khatt Foundation. Calligraffiti: eL Seed (French-Tunisian; Jara mosque minaret in Gabès 2012; Louis Vuitton foulard 2013; Cairo "Perception"). |
| Roman mosaics | Tunisia's Bardo holds one of the largest Roman mosaic collections [bg] | Tesserae = pixel-like grids; a mosaic "assembling" is a great transition. |
| Daily vernacular | Hand-painted shop signs, yellow taxis, louage stripes, fouta stripes, chechia red, jasmine, harissa red, olive green | The most modern and least clichéd source. Street typography is a strong local style. |
B. How to use it tastefully (rules)
- One motif family per ad. Blue/white + door studs, or Kairouan border + Alloucha neutrals, or Nabeul pottery brushwork. Mixing all reads as a souvenir shop.
- Structure, not decoration. A pattern should do a job: frame the 9:16 (carpet border), transition (tile grid flips, mosaic assembles), reveal (door opens onto the offer), count (studs light up as kWh saved).
- Modern type first. Contemporary Arabic display faces + clean Latin; calligraphy only as a hero word, drawn in code or by a calligrapher, never AI-lettered (AI Arabic is garbled).
- No sacred text as decoration. No Qur'anic verses, no "Allah" or "Bismillah" as ornament, no mosque imagery to sell products. Kairouan pottery's calligraphy is often religious: take the geometry, not the words.
- Avoid self-orientalism (research term for Arab designers reproducing the Western "exotic" gaze): no camels, deserts, lanterns, "1001 nights" fake-Arabic Latin fonts, belly dance, generic Gulf gold. Show today's Tunisia: rooftops, cafés, STEG meters, markets, families, young technicians.
- Regional accuracy. Tunisian ≠ Moroccan ≠ Gulf. Check motifs with a Tunisian eye before publishing.
- Build patterns in code. Geometric patterns are maths: generate them in SVG (open-source Islamic geometry
generators: TheBeachLab/islamic-geometry, Girih generators, INKJET 500 SVG patterns including zellige stars) and
animate them (draw the construction lines first with
evolvePath, then fill: the "compass and ruler" reveal is beautiful and truthful to how the patterns are made).
C. Build route
- NB2: textures and photographed materials (painted tile close-ups, carpet weave macro, whitewashed wall, studded door), scenes in real Tunisian places. Ask for "painted ceramic tile in the Nabeul tradition", not "Moroccan".
- Remotion: all patterns, borders, studs, calligraphic hero words (SVG paths drawn with
evolvePath), tile-flip and mosaic-assemble transitions (grid of divs with staggeredrotateYsprings), palette. - Omni: real-world shots (a blue door opening, sunlight moving on a white wall, a Sidi Bou Said rooftop with panels).
NB2 block. Close-up photo of a hand-painted Tunisian ceramic tile panel in the Nabeul tradition: cobalt blue,
olive green and saffron yellow brushwork on a white glaze, slightly irregular hand-painted lines, small glaze
crackles, soft daylight, straight-on, flat. No text, no Arabic letters.
Failure modes. Moroccan zellige appears when you say "zellige"; fake Arabic letters appear inside patterns; motifs from the Gulf or Turkey. Fix: name Tunisian sources and colours, "no letters", patterns in code.
Time. Pattern kit template 10-14 h (reusable forever); per ad +1-2 h on top of the base style.
Local market note. Tunisian motion agencies (Elly, Ikigai, Motion Adverts and others) mostly sell generic 2D explainers [practitioner]. A modern, well-researched Tunisian visual system is an open lane.
3.22 Other styles worth owning
| Style | Look | Best for | Route (NB2 → Omni/Veo → Remotion) | Time (tpl / ad) |
|---|---|---|---|---|
| Blueprint / technical drawing ("micrographics") | White or cyan line on blueprint blue, dimension lines, callouts, tiny technical labels, exploded views | Installers: show expertise (panel angles, cable runs, roof loads). 2026 trend: micrographics | NB2 line drawings of objects (no text) → no Omni → Remotion: lines drawn with evolvePath, dimension labels and numbers in code, gridlines effect |
6-8 h / 2-3 h |
| Lo-fi / Notes-app / UGC-graphic | Phone screenshots, Notes lists, tweet cards, marker on a photo, shaky zooms | TikTok native feel, testimonials, lists | Real photos or NB2 photos → Remotion UI cards and marker scribbles | 3-4 h / 1 h |
| Sticker / scrapbook | Die-cut stickers with white borders, washi tape, stamps, doodles | Retail, youth, promos, "3 reasons" | NB2 sticker assets on flat bg → Remotion stop-motion placement, drop shadows | 5-6 h / 2-3 h |
| Risograph / photocopy | 2-3 spot colours, misregistration, grain, halftone | Events, youth, culture, anti-AI look | NB2 plates → duotone + halftone + offset layers ±2 px in code |
3-4 h / +1 h |
| Linocut / woodblock print | Carved lines, bold black, paper texture, one colour | Artisans, food, heritage, olive oil | NB2 print frames → step on threes, paper |
4-6 h / 3-4 h |
| Vernacular Tunisian street graphics | Hand-painted shop-sign lettering, taxi yellow, louage stripes, bold outlines | Local SMEs, humour, "our neighbourhood" | NB2 street textures (no text) → Remotion lettering with display Arabic fonts, paint-stroke reveals | 6-8 h / 2-3 h |
| Liquid glass / glossy UI | Frosted translucent panels, refraction, soft gradients | Premium tech, app UIs | Code (CSS backdrop-filter, SVG displacement) over NB2 or Omni plates |
4-6 h / 1-2 h |
| 2D/3D hybrid | Flat 2D characters in simple 3D space, painterly textures on 3D | Brand films with depth | @remotion/three planes with NB2 textures (cards in 3D), camera moves in code |
10-12 h / 4-6 h |
| Chalkboard | Chalk strokes on dark green/black, dust | Education, InfoLab | Same as whiteboard with a chalk texture and rough line filter | +2 h over 3.7 |
| ASCII / coded motion | Characters as pixels, generative particle fields | Tech, telecom, events | Pure code (canvas/Skia) over footage luminance | 4-6 h / 1-2 h |
| Oddly satisfying simulation | Soft-body snaps, perfect loops, folding objects | Hooks, product "click into place" | Omni/Veo for real-material physics or baked physics in code | per ad 2-4 h |
4. Capability matrix (how much each engine should carry)
Scores 0-3: how well the engine holds the style. "Code share" = share of screen time built in Remotion. [ours, from practitioner reports + our Omni/NB2 lessons]
| # | Style | NB2 | Omni/Veo | Code share | Main risk |
|---|---|---|---|---|---|
| 1 | Kinetic type | 1 (textures) | 0 | 95-100 % | Over-animation |
| 2 | Flat 2D vector | 2 | 1 | 70-90 % | Shading drift |
| 3 | Isometric | 3 | 0-1 | 70-90 % | Perspective creep |
| 4 | Clay (current) | 3 | 3 | 20-30 % | Too smooth / glossy |
| 5 | Paper / cut-out | 2 | 2 | 60-80 % | Plastic paper |
| 6 | Collage | 3 (cut-outs) | 1 | 60-80 % | Melted pieces |
| 7 | Whiteboard | 2 | 0-1 | 90 % | Line weight, AI text |
| 8 | Anime | 3 | 2 | 30-40 % | Face/line drift |
| 9 | Comic | 3 | 1-2 | 60-70 % | Balloons, line drift |
| 10 | 3D character | 3 | 3 | 15-25 % | Uncanny, AI glow |
| 11 | Low-poly/toy | 2 | 2 | 30-100 % (code 3D) | Facets smoothing |
| 12 | Retro | 2 | 2 | 50-60 % (finish) | Fake overlays |
| 13 | Pixel art | 1 (needs ppa) | 0 | 90 % | Off-grid pixels |
| 14 | Glitch / brutalist | 0 | 0 | 100 % | Flashing, legibility |
| 15 | Data-viz | 1 (icons) | 0 | 100 % | Wrong numbers |
| 16 | UI / phone | 2 (hand plates) | 1 | 90 % | Glare, fake UI |
| 17 | Product CGI | 3 | 3 | 30 % (or 100 % code 3D) | Logo/geometry morph |
| 18 | Liquid / abstract | 2 (textures) | 2 (real fluids) | 70 % | Screensaver look |
| 19 | Memes | 2 (characters) | 1 | 80 % | Copyright, cringe |
| 20 | Rotoscope / painterly | 2 (keyframes) | 3 (v2v restyle) | 20 % | Stroke swim |
| 21 | Tunisian layer | 2 (materials) | 2 (places) | 70 % | Cliché, wrong region |
5. Recommendations for Lead Up (next styles to master, in order)
- Isometric house cut-away with energy flow (3.3 + 3.15): explains solar in one image, all code-driven, cheap, reusable across installers. Pairs with our clay characters as cut-outs.
- Kinetic type + phone/UI (3.1 + 3.16) as the direct-response workhorse: hooks, prices, "send your bill". Cheapest way to A/B test hooks (hooks move results far more than design).
- Paper-craft / collage with a Tunisian pattern layer (3.5/3.6 + 3.21): the strongest "made by humans, made here" signal, fits 2026 craft taste, mostly code.
- Motion comic with a recurring character (3.9): series potential, local comic tradition, NB2 is good at it.
- Blueprint / technical (3.22): signals expertise for installers; almost free once the path tools exist. Keep clay (3.4) as the brand-film look; add the stepped-timing and fingerprint fixes.
Build order for tools (each unlocks several styles): stepping wrapper + jitter → @remotion/effects → path
drawing kit (hand, boil) → cut-out puppet rig → phone/UI kit → pattern kit (Tunisian) → @remotion/three scene.
6. Snippets (reference, not yet in the repo)
// Stepped timing: hold each image `every` frames (2 = "on twos" = 15 fps look at 30 fps)
import {Freeze, useCurrentFrame, random} from 'remotion';
export const Stepped: React.FC<{every?: number; jitter?: number; children: React.ReactNode}> =
({every = 2, jitter = 0, children}) => {
const f = useCurrentFrame();
const hold = Math.floor(f / every);
const dx = jitter ? (random(`x${hold}`) - 0.5) * 2 * jitter : 0;
const dr = jitter ? (random(`r${hold}`) - 0.5) * 0.6 : 0;
return (
<div style={{position: 'absolute', inset: 0, transform: `translate(${dx}px,0) rotate(${dr}deg)`}}>
<Freeze frame={hold * every}>{children}</Freeze>
</div>
);
};
// Line boil for hand-drawn SVG: new noise seed every 3 frames
const seed = Math.floor(useCurrentFrame() / 3) % 4;
<filter id="boil"><feTurbulence type="fractalNoise" baseFrequency="0.03" numOctaves={2} seed={seed}/>
<feDisplacementMap in="SourceGraphic" scale={2.5}/></filter>
// Pen drawing: stroke reveal + pen at the tip (@remotion/paths)
const {strokeDasharray, strokeDashoffset} = evolvePath(p, d);
const tip = getPointAtLength(d, getLength(d) * p);
// Metaball "goo" filter for liquid shapes
<filter id="goo"><feGaussianBlur stdDeviation={12}/>
<feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -8"/></filter>
# Pixel art clean-up (grid + fixed 16-colour palette), also works on video
uvx --from proper-pixel-art ppa sprite.png -o sprite_clean.png -c 16 -s 6
7. Open questions (verify before relying on them)
@remotion/effectsapplies to Remotion canvas components (<Img>,<Video>,<Solid>, shapes). Check on 4.0.498 that it works on<OffthreadVideo>in our render path and how it affects render time.- Omni v2v restyle: regional restriction on editing clips with recognisable people; test with our own footage.
@remotion/gsapneeds ≥4.0.517: upgrading all@remotion/*together is a separate, tested change.- Whether Meta shows an "AI info" label on stylised (non-photoreal) AI animation: not checked in this session.
- Claims marked [bg] (Qallaline tiles, Sejnane, Bardo, Lab619, Willis from Tunis) were not re-checked online this session (search budget ran out); confirm before quoting them in client material.
Sources
Trends and industry - https://elements.envato.com/learn/motion-design-trends - https://blog.videobolt.net/post/top-motion-graphics-trends-2026 - https://genesismotiondesign.com/motion-design-trends-2026/ - https://garagefarm.net/blog/animation-trends-to-watch - https://www.itsnicethat.com/features/forward-thinking-graphic-trends-2026-graphic-design-120126 - https://schoolofmotion.com/blog/eoy2025 - https://www.stashmedia.tv/what-do-you-really-think-state-of-design-survey-2026/ - https://www.lambdafilms.co.uk/animation-styles/ - https://prolificstudio.co/blog/collage-animation/ - https://www.clapstickmedia.com/isometric-explainer-animation-video/ - https://en.wikipedia.org/wiki/Corporate_Memphis - https://webflow.com/blog/after-corporate-memphis - https://www.vfxapprentice.com/blog/what-is-2-5d-animation-games - https://en.wikipedia.org/wiki/Motion_comic - https://www.pulse-advertising.com/news/nostalgia-marketing-cultural-revival/
Studios - https://motionarray.com/learn/motion-design/industry-spotlight-buck/ - https://motionarray.com/learn/motion-design/beautiful-cel-animated-motion-graphics/ - https://www.ordinaryfolk.co/ - https://motionarray.com/learn/motion-design/studio-spotlight-oddfellows/ - https://vidico.com/news/animated-video-production-companies/
Ad performance and platform guidance - https://www.rocketshiphq.com/text-overlays-video-ads-mobile/ - https://adlibrary.com/posts/meta-ads-creative-best-practices - https://coinis.com/how-to/first-3-seconds-facebook-video-ad - https://www.stackmatix.com/blog/facebook-video-vs-image-ads-performance-2026 - https://www.stackmatix.com/blog/tiktok-creative-center-top-ads-analysis - https://searchengineland.com/ugly-ads-outperforming-polished-creative-475007 - https://www.kantar.com/industries/technology-and-telecoms/validating-googles-abcd-framework-with-the-power-of-artificial-intelligence - https://support.google.com/google-ads/answer/14783551 - https://www.nielsen.com/insights/2010/should-marketers-re-think-animated-tv-ads-during-the-holidays/ - https://www.adweek.com/brand-marketing/live-action-ads-beat-animation-brand-recall-108049/ - https://pmc.ncbi.nlm.nih.gov/articles/PMC9898452/ - https://www.sciencedirect.com/science/article/abs/pii/S0360131516300550 - https://blog.videoscribe.co/whiteboard-animation-beats-slides-for-retention-new-research - https://www.ncbi.nlm.nih.gov/pmc/articles/PMC11730234/ - https://khrisdigital.com/meme-marketing-statistics/ (example of a weak "statistics" source) - https://www.w3.org/WAI/WCAG21/Understanding/three-flashes-or-below-threshold.html
Google models - https://ai.google.dev/gemini-api/docs/image-generation - https://deepmind.google/models/gemini-image/flash/ - https://ai.google.dev/gemini-api/docs/omni - https://blog.google/innovation-and-ai/technology/developers-tools/build-with-gemini-omni-1-1-flash/ - https://blog.google/innovation-and-ai/models-and-research/gemini-models/gemini-omni-builders/ - https://runware.ai/docs/models/google-gemini-omni-flash/guides/editing-video - https://www.analyticsvidhya.com/blog/2026/06/gemini-omni-ai-video-generation/ - https://cloud.google.com/vertex-ai/generative-ai/docs/video/use-reference-images-to-guide-video-generation - https://discuss.ai.google.dev/t/veo-3-1-reference-images-docs-say-available-api-says-not-supported/111853 - https://ulazai.com/create-anime-videos-veo3/ - https://www.elser.ai/blog/best-ai-video-generator-for-anime-creators-in-2026-7-tools-tested-and-ranked - https://masonry.so/blog/nano-banana-2-guide - https://www.aifreeapi.com/en/posts/nano-banana-2-prompts - https://heymramit.medium.com/10-pro-nano-banana-tips-for-high-quality-asset-production-93c25b7385b2 - https://nanoprompts.org/use-cases/spatial-design/isometric-3d-model - ../06-nano-banana-2.md (our NB2 research: ids, prices, reference budgets)
AI style workflows - https://www.opus.pro/blog/claymation-ai - https://prompts.aiolaola.com/p/claymation - https://www.atlabs.ai/blog/create-full-cgi-ads-ai-complete-guide - https://github.com/KennethJAllen/proper-pixel-art - https://www.spritefusion.com/pixel-snapper - https://ebsynth.com/ - https://digitalproduction.com/2025/09/24/ebsynth-v2-real-time-preview-timeline-layers/ - https://github.com/tiberiuiancu/datamoshing - https://glitchology.com/datamoshing/ - https://huehd.com/stop-motion-animation-frame-rates-explained/ - https://community.adobe.com/t5/after-effects-discussions/after-effects-why-set-posterize-time-to-12-fps-in-24fps-comp/td-p/14382456 - https://www.washingtonpost.com/technology/2025/06/11/disney-universal-sue-midjourney-ai-copyright/ - https://www.law.georgetown.edu/tech-institute/research-insights/insights/disney-nbc-universal-and-dreamworks-file-major-ip-lawsuit-against-ai-image-generator-midjourney/
Remotion and animation libraries - https://www.remotion.dev/docs/third-party - https://www.remotion.dev/docs/three - https://www.remotion.dev/docs/paths/evolve-path - https://www.remotion.dev/docs/effects/api - https://www.npmjs.com/package/@remotion/effects (tarballs 4.0.498 and 4.0.529 inspected) - https://www.remotion.dev/docs/rive/ - https://www.remotion.dev/docs/animated-emoji/ - https://www.remotion.dev/docs/light-leaks/api - https://www.remotion.dev/elements/data - https://github.com/vercel-labs/json-render/blob/main/skills/remotion-best-practices/rules/charts.md - https://github.com/vshukla7/remotion-captions-themes - https://www.remotion.dev/templates/tiktok - https://unicornicons.com/learn/rive-vs-lottie - https://rive.app/blog/why-importing-lotties-isn-t-the-workflow-rive-was-built-for - https://www.bram.us/2017/06/21/smooth-svg-path-morphing-with-flubber/ - https://css-tricks.com/svg-line-animation-works/
Arabic, Maghreb and Tunisian design - https://type-01.com/the-typographic-studio-platform-specialising-solely-in-arabic-branding/ - https://morcoskey.com/projects/kufam - https://www.gqmiddleeast.com/article/the-designer-behind-mamdanis-arabic-campaign-has-a-bigger-vision - https://the-brandidentity.com/project/zainas-bilingual-identity-for-mira-unites-arabic-and-latin-scripts-through-shared-punctuation - https://vanschneider.com/blog/design-in/design-in-lebanon-featuring-studio-safar/ - https://www.milleworld.com/graphic-design-studios-arab-world/ - https://en.wikipedia.org/wiki/Kashida - https://design.tutsplus.com/tutorials/creative-arabic-calligraphy-kashida-tajim-and-tashkil--cms-23240 - https://blacksparrowagency.com/plugins/Kashida%20-%20Dynamic%20Arabic%20Stretching%20&%20Animation%20Tool/ - https://www.animatedcalligraphy.com/ - https://anasarab.com/motion/ - https://elseed-art.com/ - https://carthagemagazine.com/el-seed-tunisian-calligraffiti-artist/ - https://ajammc.com/2013/09/17/word-as-image-contextualizing-calligraffiti-1984-2013-with-french-tunisian-street-artist-el-seed/ - https://en.wikipedia.org/wiki/Hamza_Khafif - https://amazighworldnews.com/amazigh-tattoos-and-patterns-symbolism-and-cultural-significance/ - https://www.mosaicnorthafrica.com/why-are-doors-blue-in-tunisia/ - https://www.mychakchouka.com/sidi-bou-said-myths-and-truths-blue-and-white - https://tunartis.com/tunisian-pottery-styles/ - https://www.discovertunisia.com/en/tunisie-arts-and-crafts/weaving-and-carpets - https://qartaj.com/blog/The-different-models-of-handicrafts-rugs - https://www.behance.net/search/projects/zellige - https://en.wikipedia.org/wiki/Inkman - https://www.researchgate.net/publication/317957975_Identity_representation_self-Orientalism_and_hyper-nationalism_in_Arab_design - https://fmkjournals.fmk.edu.rs/index.php/AM/article/view/119 - https://artjournal.collegeart.org/?p=17030 - https://www.liverpoolmuseums.org.uk/stories/exploring-arabic-design - https://github.com/TheBeachLab/islamic-geometry - https://github.com/reyrove/Girih-1-Generative-Art - https://dragoon0x.github.io/inkjet/ - https://ikigai.tn/agence-creation-video-2d-motion-design-tunisie/ - https://elly-agency.com/agence-de-creation-video-en-tunisie/