Motion design et vidéo · Animations de logo et identité

Écran de démarrage Splash Screen avec ouverture en iris (Master Prompt)

Le prompt d'ingénierie complet pour concevoir un écran de lancement mobile immersif de 1,8s avec logo respirant et transition de dévoilement en diaphragme.

Débutant Essayé le 28 octobre 2026

Master Prompt d’ingénierie Motion Design

Prompt Master Motion Design (Architecture complète)

Prêt à copier dans Claude 3.7 Sonnet, Cursor ou votre environnement de code

<inputs>Paramètres d’entrée requis

Demande-moi d'abord : le logo ou symbole de mon application [symbole vectoriel SVG], le nom de l'application [nom de l'app], la couleur de fond du splash screen [couleur de fond, ex: Noir profond #0A0A0E ou Bleu signature #1747A0], et la nature de l'écran d'accueil à dévoiler dessous.

</inputs>

<direction>Direction artistique & Règles visuelles

Démarrage applicatif natif de niveau iOS / Android haut de gamme. Le splash screen ne doit jamais être un écran statique frustrant qui bloque l'utilisateur : c'est un seuil immersif de 1,8 seconde qui donne le sentiment d'entrer dans un univers fluide. Le logo centré respire avec une pulsation très douce, puis s'ouvre par une transition en diaphragme à iris circulaire (clip-path expansif) qui dissout le rideau de démarrage pour révéler instantanément l'interface interactive sans aucun accroc. Strictement banni : écrans de chargement de plus de 2 secondes, barres de progression lentes qui tournent dans le vide, et coupures sèches qui font sursauter les yeux.

</direction>

<structure>Chronologie & Grille rythmique (BPM)

1,8 seconde de transition fluide d'ouverture native : - 0ms - 400ms : Fondu d'apparition du logo centré (scale 0.85 -> 1.0, opacité 0 -> 1) sur fond uni chaleureux. - 400ms - 1300ms : La respiration de marque. Le logo effectue une pulsation subtile (scale 1.0 -> 1.04 -> 1.0) pendant qu'une fine ligne de pré-chargement discrète de 2px traverse le bas de l'écran. - 1300ms - 1700ms : L'ouverture en iris (Iris Reveal). Un masque circulaire centré sur le logo s'étend à toute vitesse de circle(0%) à circle(150%), effaçant le rideau de splash screen pour dévoiler la vue principale de l'application. - 1700ms - 1800ms : Retrait complet du calque splash du DOM pour libérer immédiatement les gestes tactiles.

</structure>

<build>Spécifications techniques & Pipeline de code

1. Un fichier HTML5/CSS3/JavaScript complet incluant la simulation du démarrage et l'écran d'accueil sous-jacent. 2. Transition de dévoilement par clip-path: circle() accélérée matériellement sur GPU. 3. Rendu 60fps Playwright pour démonstrations vidéo mobiles ou intégration PWA avec Service Worker.

</build>

<gotchas>Pièges techniques & Erreurs à éviter

Détachez ou appliquez impérativement 'pointer-events: none' sur le conteneur de splash screen dès le début de l'ouverture en iris pour que l'utilisateur puisse interagir avec les boutons de l'écran d'accueil dès la première fraction de seconde.

</gotchas>

<start>Consigne d’amorçage & Démarrage

Demande-moi d'abord mon logo et mes couleurs (<inputs>), puis valide le timing d'ouverture avant de livrer le code complet.

</start>

À remplacer avant de coller : [symbole vectoriel SVG] · [nom de l'app]

Pourquoi ça marche mieux

Demande vague

« fais un écran de chargement pour mon appli »

L’IA doit deviner : réponse générale, ou questions en retour.

Avec R.C.T.F.

Rôle, contexte, tâche et format sont précisés : la réponse est utilisable presque telle quelle.

Exemple de résultat

Réponse obtenue avec Claude, Cursor, le 28 octobre 2026. Votre résultat sera différent : l’IA ne répond jamais deux fois pareil.

Cinématique du Splash Screen (durée totale : 2000ms) : - 0ms - 400ms : Fondu d'apparition du logo centré (scale 0.8 -> 1.0, opacity 0 -> 1). - 400ms - 1400ms : Respiration douce du logo (pulsation scale 1.0 à 1.04) accompagnée d'une fine ligne de chargement discrète en bas de l'écran. - 1400ms - 1900ms : Transition 'Iris Reveal' : un masque circulaire grandit depuis le centre du logo pour effacer le rideau de splash screen et dévoiler la page d'accueil. - 1900ms - 2000ms : Disparition complète du calque de démarrage du DOM pour libérer les interactions tactiles.

Pour améliorer la réponse, relancez

Adapte ce splash screen pour une Progressive Web App (PWA) avec Service Worker.
Ajoute une version avec micro-son de démarrage (Jingle court style Netflix ou PlayStation).

Conseil. Un splash screen ne doit jamais durer plus de 1,5 à 2 secondes sur mobile : au-delà, les utilisateurs perçoivent l'application comme lente et le taux d'abandon monte en flèche.

Essayé avec

Apprendre à écrire vos propres prompts

La formation gratuite « L’IA pour entrepreneurs » vous apprend la méthode R.C.T.F. en vidéo, avec des exercices et un quiz.

Suivre la formation gratuite