makevideowith.ai
← Retour aux vidéosExplication / 2103483957266268381

<inputs> Ask me for: • my product + URL • 8–12 UI states that tell its story

@verbove ↗
LES INSTRUCTIONS PARTAGÉES PAR LE CRÉATEUR

Le prompt du créateur

Un prompt, c’est le texte qui décrit à l’IA ce que vous voulez obtenir. Copiez celui-ci, puis collez-le dans votre projet Claude Code en précisant ce que vous souhaitez changer : le sujet, les textes, les couleurs ou la durée.

Le texte original est conservé pour respecter le travail du créateur. Vous pouvez ajouter vos propres consignes en français, même si le prompt est en anglais.

<inputs> 
Ask me for: 
• my product + URL 
• 8–12 UI states that tell its story 
• the real data shown in each state 
• brand colors + fonts + accent color 
• required formats (1:1, 16:9, 9:16) 
</inputs>

<rules> 
One HTML file. One canvas
One draw(t) function

No CSS transitions
No timers
No state carried between frames

One shape, never cut

Every state is the same element changing size, radius and color while the content swaps

A cursor drives the sequence with real clicks, typing and one drag

Real UI. Real data. No placeholders.

</rules>
<structure> 
120 BPM grid

Something happens on every bea

logo → button → handle field → “is this you?” → loader → pin → globe filling with users → matches → tabs → RSVP → search → logo

</structure>

<motion> 
Closed-form springs everywhere with only a tiny overshoot.

If a value changes target multiple times, sum one spring per change

Content enters after its container starts morphing and leaves before the next morph so text never overlaps

Use a short blur on transitions

Never fade black directly into the accent color. Move an accent element between states instead

Make tab indicators stretch by putting each edge on a different spring

Zoom the camera so every state fills the frame

Make the last frame equal the first so the whole thing loops
</motion>

<export> 
First render one frame per beat as a contact sheet

Fix anything cramped or broken

Then render every frame in headless Chrome at 60fps, averaging 6 subframes for motion blur

Pipe into ffmpeg:
H.264 + yuv420p

Export all aspect ratios in parallel
</export>

motion design is becoming a prompt
Une fois le prompt copié, que faire ?
  1. Ouvrez votre projet dans Claude Code et collez le prompt avec vos propres consignes.
  2. Décrivez ce qui vous plaît dans cette vidéo : les mouvements, les couleurs, le rythme. Une URL seule ne garantit pas que Claude Code puisse la regarder.
  3. Ajoutez vos textes et vos images, puis demandez un premier aperçu. Précisez ensuite ce qu’il faut modifier.

Exemple de consigne à ajouter — à adapter à votre projet

Utilise le prompt ci-dessus comme point de départ pour une vidéo de 15 secondes présentant mon application. Remplace les textes par les miens et utilise mes couleurs. Avant de commencer, indique-moi les fichiers et les outils nécessaires, puis propose-moi un premier aperçu.
Voir le guide pas à pas ↗

D’autres vidéos pour vous inspirer

Du même créateur ↗