Expert en Médias Promotionnels d'Application (Édition 2026)
English
Orchestration & Intégration
ai-media-generation-expert: Génère des visuels IA (Flux 1.1 Pro), des vidéos B-roll (Sora, Runway Gen-3), et une narration par voix de synthèse (ElevenLabs v3).svg-animation-motion-expert: Animations SVG haute performance, transitions Framer Motion, et typographie cinétique.file-upload-media-expert: Distribution d'actifs CDN, compression d'image avec ou sans perte (Sharp), et transcodage vidéo.seo: Open Graph dynamique (og:image), métadonnées Twitter Card, et aperçus pour les robots sociaux.ui-ux-pro-max: Tokens de design, hiérarchies typographiques, et mise en page des cartes promotionnelles.visual-ui-auditor: Audit visuel multimodal des captures d'écran marketing, contraste et cadres d'appareils.anti-slop: Graphismes marketing anti-slop, éliminant les maquettes génériques et les artefacts UI factices.senior-frontend/tailwind-expert: Cadres d'appareils CSS haute-fidélité, composition canvas, et mise en page responsive.zero-to-prod-orchestrator: Coordonne la Phase 5 (actifs visuels et branding UI) et la Phase 8 (lancement, déploiement, remise des actifs marketing).- Synergie Cross-Domaine & Intégration Swarm de Sous-Agents:
mobile-expo-expert,design-system-architect
Description
Guide d'ingénierie de qualité professionnelle pour créer des médias promotionnels d'application à fort taux de conversion, couvrant les graphismes statiques (captures d'écran App Store, cartes pour réseaux sociaux, bannières OG dynamiques) et les médias animés (vidéos teaser programmatiques Remotion, démonstrations cinétiques d'application, et démos de lancement avec narration IA).
Conditions de Déclenchement
- Génération de captures d'écran promotionnelles pour l'Apple App Store et le Google Play Store avec maquettes d'appareils.
- Création de graphismes de lancement pour Product Hunt, bannières Twitter/X, vitrines LinkedIn, et publicités carrousel Instagram/TikTok.
- Implémentation de cartes sociales dynamiques Open Graph (OG) via Satori /
@vercel/og. - Création programmatique de vidéos promotionnelles d'application, bandes-annonces teaser, ou vidéos de visite guidée du produit avec Remotion (vidéo basée sur React).
- Scénarisation et synthèse de storyboards teaser de 30 secondes à fort taux de conversion avec voix off IA.
- Automatisation des pipelines de capture d'écran multi-résolutions avec navigateur headless (Playwright/Puppeteer).
Architecture Centrale & Piliers de Production Média
┌──────────────────────────────────────────────┐
│ MOTEUR DE MÉDIAS PROMOTIONNELS │
└──────────────────────┬───────────────────────┘
│
┌────────────────────────────┴───────────────────────────┐
▼ ▼
IMAGES & GRAPHISMES STATIQUES CRÉATION VIDÉO & ANIMATION
├── Captures d'écran App Store & Google Play ├── Vidéos Programmatiques Remotion (React)
├── Cartes Sociales (X, LinkedIn, Product Hunt) ├── Formule Teaser 30s à fort taux de conversion
├── Bannières OpenGraph Dynamiques (@vercel/og) ├── Typographie Cinétique & Traînées de Curseur
└── Maquettes d'Appareils Pure CSS/SVG (iPhone/Pixel) └── Voix Off IA & Synchronisation B-Roll
1. Matrice de Captures d'Écran App Store & Google Play
A. Norme de Résolution & Spécification (2026)
| Plateforme Cible | Taille d'Affichage | Résolution Native | Ratio d'Affichage | Exigences de Format |
|---|---|---|---|---|
| Apple iOS (iPhone 16 Pro Max) | 6,9" Super Retina | 1320 × 2868 px | 19,5:9 | PNG 24-bit, RVB, sans alpha, max 10 Mo |
| Apple iOS (iPhone 16 / 15 Pro) | 6,7" Super Retina | 1290 × 2796 px | 19,5:9 | PNG 24-bit, RVB, sans alpha, max 10 Mo |
| Apple iPadOS (iPad Pro 13") | 13,0" Liquid Retina | 2064 × 2752 px | 4:3 | PNG 24-bit, RVB, sans alpha |
| Google Play Phone | Flagship Standard | 1080 × 2400 px (ou 1080 × 1920) | 20:9 / 16:9 | PNG/JPEG, min 1080 px sur le petit côté |
| Google Play Feature Graphic | Bannière Hero | 1024 × 500 px | ~2:1 | PNG/JPEG 24-bit, sans alpha, max 1 Mo |
| App Store Promo Video | Vidéo d'Aperçu | 1080 × 1920 px (Portrait) / 1920 × 1080 | 9:16 / 16:9 | MP4/ProRes, max 30s, pas de fausses superpositions OS |
B. Formule de Composition de Capture d'Écran à Fort Taux de Conversion
Chaque capture d'écran de la séquence doit suivre une hiérarchie visuelle en 4 parties :
- Titre (Bénéfice Percutant) : 4 à 6 mots max. Concentrez-vous sur la transformation, pas sur la fonctionnalité technique (ex : "Automatisez vos factures en 3 secondes" vs "Formulaire de génération de factures").
- Sous-titre (Ancre Contextuelle) : 1 phrase courte clarifiant le flux de travail.
- UI Flottante / Maquette Encadrée : Maquette d'appareil à fort contraste, pixel-perfect, inclinée de 5° à 12° ou de face, centrée dans les 65 % inférieurs du cadre.
- Toile de Fond / Dégradé Ambiant : Dégradé OKLCH subtil en arrière-plan, assorti au thème de la marque, avec de légers halos radiaux.
2. Spécifications Graphiques pour les Lancements Sociaux
- Kit de Lancement Product Hunt :
- Images de la Galerie :
1270 × 760 px(ratio 5:3). Présentez les 3 principales fonctionnalités avec une typographie nette et de véritables captures d'écran UI. - Aperçu Animé de la Galerie : GIF ou MP4
240 × 240 px(moins de 3 Mo) pour la vignette de la carte produit.
- Images de la Galerie :
- Cartes Twitter / X :
- Carte promotionnelle dans le fil d'actualité :
1200 × 675 px(16:9) ou1200 × 630 px(1.91:1). - Bannière de Profil :
1500 × 500 px(ratio 3:1).
- Carte promotionnelle dans le fil d'actualité :
- Publications Instagram & TikTok :
- Diapositives Carrousel :
1080 × 1350 px(ratio portrait 4:5). - Story & Teaser Vertical :
1080 × 1920 px(ratio 9:16).
- Diapositives Carrousel :
3. Générateur d'Images Open Graph (OG) Dynamique
La génération OG dynamique garantit que chaque partage de lien sur Twitter/X, Discord, Slack et WhatsApp affiche une carte personnalisée haute résolution.
// app/api/og/route.tsx (Next.js 15 + @vercel/og / Satori)
import { ImageResponse } from 'next/og';
import { NextRequest } from 'next/server';
export const runtime = 'edge';
export async function GET(req: NextRequest) {
const { searchParams } = new URL(req.url);
const title = searchParams.get('title') || 'Espace de Travail IA Next-Gen';
const subtitle = searchParams.get('subtitle') || 'Construit avec l\'Architecture Swarm VibesPlug';
const tag = searchParams.get('tag') || 'v3.0 Prêt pour la Production';
return new ImageResponse(
(
<div
style={{
height: '100%',
width: '100%',
display: 'flex',
flexDirection: 'column',
alignItems: 'flex-start',
justifyContent: 'space-between',
padding: '64px',
backgroundColor: '#090a0f',
backgroundImage: 'radial-gradient(circle at 80% 20%, rgba(99, 102, 241, 0.25) 0%, transparent 60%), radial-gradient(circle at 20% 80%, rgba(236, 72, 153, 0.2) 0%, transparent 60%)',
fontFamily: 'Inter, sans-serif',
color: '#ffffff',
}}
>
{/* Badges Supérieurs */}
<div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
<div
style={{
padding: '6px 16px',
borderRadius: '9999px',
backgroundColor: 'rgba(255, 255, 255, 0.1)',
border: '1px solid rgba(255, 255, 255, 0.2)',
fontSize: '20px',
fontWeight: 600,
color: '#818cf8',
}}
>
{tag}
</div>
</div>
{/* Titre & Sous-titre Principaux */}
<div style={{ display: 'flex', flexDirection: 'column', gap: '16px', maxWidth: '850px' }}>
<h1
style={{
fontSize: '60px',
fontWeight: 800,
lineHeight: 1.1,
letterSpacing: '-0.02em',
background: 'linear-gradient(135deg, #ffffff 40%, #94a3b8 100%)',
backgroundClip: 'text',
color: 'transparent',
margin: 0,
}}
>
{title}
</h1>
<p
style={{
fontSize: '26px',
color: '#94a3b8',
lineHeight: 1.4,
margin: 0,
}}
>
{subtitle}
</p>
</div>
{/* Pied de Page / Marque */}
<div
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
width: '100%',
borderTop: '1px solid rgba(255, 255, 255, 0.1)',
paddingTop: '24px',
}}
>
<div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
<div
style={{
width: '32px',
height: '32px',
borderRadius: '8px',
background: 'linear-gradient(135deg, #6366f1, #a855f7)',
}}
/>
<span style={{ fontSize: '22px', fontWeight: 700 }}>MyApp.io</span>
</div>
<span style={{ fontSize: '18px', color: '#64748b' }}>Essayez gratuitement aujourd'hui • Pas de carte de crédit</span>
</div>
</div>
),
{
width: 1200,
height: 630,
}
);
}
4. Création Vidéo Programmatique avec Remotion (React)
Remotion permet aux développeurs de générer des vidéos promotionnelles MP4 entièrement à partir de code, permettant des composants UI animés, une typographie cinétique, des ressorts physiques et des rotations d'appareils.
// src/remotion/AppPromoComposition.tsx
import { AbsoluteFill, interpolate, spring, useCurrentFrame, useVideoConfig } from 'remotion';
import React from 'react';
export function AppPromoComposition({
headline,
subheadline,
screenshotUrl
}: {
headline: string;
subheadline: string;
screenshotUrl: string;
}) {
const frame = useCurrentFrame();
const { fps } = useVideoConfig();
// Animation d'entrée avec ressort pour la maquette d'appareil
const deviceEntrance = spring({
frame,
fps,
config: { damping: 14, stiffness: 90 },
});
const translateY = interpolate(deviceEntrance, [0, 1], [400, 0]);
const scale = interpolate(deviceEntrance, [0, 1], [0.85, 1]);
// Effet de survol flottant continu après l'entrée
const hoverY = Math.sin(frame / 20) * 12;
// Animation de révélation du texte
const textOpacity = interpolate(frame, [0, 20], [0, 1], { extrapolateRight: 'clamp' });
const textTranslateY = interpolate(frame, [0, 20], [30, 0], { extrapolateRight: 'clamp' });
return (
<AbsoluteFill
style={{
backgroundColor: '#0a0d14',
backgroundImage: 'radial-gradient(ellipse at 50% 10%, rgba(99, 102, 241, 0.35) 0%, transparent 70%)',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
fontFamily: 'Inter, sans-serif',
overflow: 'hidden',
padding: '60px',
}}
>
{/* Titre Cinétique */}
<div
style={{
opacity: textOpacity,
transform: `translateY(${textTranslateY}px)`,
textAlign: 'center',
marginBottom: '40px',
zIndex: 10,
}}
>
<h1
style={{
fontSize: '56px',
fontWeight: 800,
color: '#ffffff',
margin: '0 0 16px 0',
letterSpacing: '-0.02em',
}}
>
{headline}
</h1>
<p style={{ fontSize: '26px', color: '#94a3b8', margin: 0 }}>
{subheadline}
</p>
</div>
{/* Conteneur d'Appareil Flottant */}
<div
style={{
transform: `translateY(${translateY + hoverY}px) scale(${scale})`,
width: '720px',
height: '1100px',
borderRadius: '48px',
padding: '16px',
backgroundColor: '#1f2937',
boxShadow: '0 30px 80px rgba(0, 0, 0, 0.7), 0 0 40px rgba(99, 102, 241, 0.25)',
border: '4px solid #374151',
overflow: 'hidden',
display: 'flex',
flexDirection: 'column',
}}
>
{/* Encoche / Îlot Dynamique */}
<div style={{ display: 'flex', justifyContent: 'center', marginBottom: '8px' }}>
<div style={{ width: '120px', height: '24px', backgroundColor: '#000', borderRadius: '12px' }} />
</div>
{/* Contenu de l'Écran */}
<img
src={screenshotUrl}
alt="Écran de l'application"
style={{
width: '100%',
height: '100%',
objectFit: 'cover',
borderRadius: '32px',
}}
/>
</div>
</AbsoluteFill>
);
};
Commande de Rendu Remotion CLI
# Générer un teaser promotionnel vertical 9:16 (Reels / TikTok / Shorts)
npx remotion render src/remotion/index.ts AppPromoTeaser out/promo-teaser.mp4 --props='{"headline":"Livrez des Apps en Minutes","subheadline":"Intelligence Swarm Autonome","screenshotUrl":"/assets/screen.png"}'
5. La Formule Vidéo Teaser de 30 Secondes à Fort Taux de Conversion
| Horodatage | Phase | Indice Visuel | Guide Audio / Narration |
|---|---|---|---|
| 00:00 - 00:04 | L'Accroche | Zoom rapide sur le problème (ex : feuilles de calcul manuelles désordonnées ou échecs de builds). Badges d'avertissement rouge/ambre. | "Vous perdez encore des heures à déployer manuellement des versions ?" (Voix off percutante et énergique). |
| 00:04 - 00:12 | La Révélation | Transition fluide avec rotation 3D de l'appareil. Le tableau de bord de l'application apparaît avec des accents interactifs lumineux. | "Découvrez [Nom de l'App] — votre moteur autonome du zéro à la production." |
| 00:12 - 00:20 | Les Super-Pouvoirs Clés | 3 coupes rapides présentant les fonctionnalités principales : 1. Configuration en un clic ; 2. Analyses en direct ; 3. Synchronisation instantanée. | "Un clic transforme votre flux de travail, synchronise les données en temps réel et élimine les erreurs humaines." |
| 00:20 - 00:26 | Preuve Sociale | Badges 5 étoiles, badges G2/Product Hunt, pastilles d'avatar de témoignage flottantes. | "Approuvé par plus de 10 000 développeurs dans le monde." |
| 00:26 - 00:30 | Appel à l'Action | Grand bouton CTA brillant, badges App Store et Google Play, URL bien visible. | "Téléchargez maintenant sur l'App Store ou visitez myapp.io pour commencer gratuitement aujourd'hui." |
6. Capture d'Écran Automatisée Multi-Appareils
...