motion-graphics-promo
Animació de qualitat After Effects, creada com a composicions HTML/GSAP i renderitzada de forma determinista amb HyperFrames. Obtindreu un codi font editable, una fidelitat exacta a la pantalla nativa i un render reproducible, quelcom que un projecte d'After Effects amb animació manual no pot proporcionar a un agent.
Estudi font: Higgsfield AI, "AI Created Every Motion Graphic in This Video" (YouTube W3-RIZ-Ps64, 11:33, Sep 2026), inspeccionat a 720p amb fulls de contacte, més la progressió d'una visió general oficial d'un producte SaaS de 4 minuts. Utilitzeu-los només per a la gramàtica i el ritme. No reutilitzeu mai els seus píxels, música, veu, logotips ni interfície.
1. Brief abans del moviment (fixeu primer la història)
El tutorial dedica els seus primers minuts a transformar un brief en decisions d'actius i un storyboard abans que res es mogui. Feu el mateix, en cinc línies:
- Públic i moment: qui mira, a quina plataforma, amb so o sense.
- Un producte, dues feines, un següent pas: l'espectador hauria de recordar exactament això.
- Inventari de proves: captures de pantalla i enregistraments de pantalla reals que tingueu, amb la data/font de creació. Tot allò que no estigui en aquesta llista no pot aparèixer a la pantalla.
- Paleta i tipografia: la identitat pròpia de la marca. Agafeu de referència el seu nivell de contrast (tipografia condensada en negreta sobre camps saturats), no els seus colors exactes.
- Aspecte: dissenyeu vertical (1080x1920) com la seva pròpia composició; no retalleu un horitzontal.
2. Gramàtica del moviment
| Temps | Regla | Per què |
|---|---|---|
| Entrada (0-3 s) | Enèrgica: una etiqueta cau, gira, rebota i s'assenta un cop; o un dispositiu cau amb pes. | Enllaça l'aturada del desplaçament sense amagar el producte. |
| Transició | Una transició principal per tasca. Un telèfon es desplaça o s'inclina entre camps de color, o la navegació passa a la següent pantalla real. | El moviment ha d'explicar l'agrupació o el moviment entre estats reals del producte. |
| Assentament | Moll curt (GSAP back.out(1.4) o elastic.out(1, 0.6), 0.4-0.7 s). El dispositiu s'assenta abans que la pantalla necessiti ser llegida. | El pes físic es percep com a premium; el balanceig durant la lectura es percep com a soroll. |
| Pausa de prova | Almenys 2-3 s de pantalla estable i llegible després de cada transició. | Les pantalles necessiten més temps de lectura que les etiquetes decoratives. |
| Accents | Tipografia amb emmascarament/revelació per retall, accents de color rectangulars, collage o transicions de camp de color. Utilitzeu amb moderació. | Aquest és l'"aspecte After Effects"; l'ús excessiu es converteix en una plantilla. |
Valors per defecte de temporització: 60 fps; entrades 0.5-0.9 s; desfasaments d'etiquetes 60-90 ms; no animeu mai el text que l'espectador ha de llegir mentre el llegeix.
3. La línia de temps de la promo de 32 segons
| Temps | Propòsit | Regla d'evidència |
|---|---|---|
| 0-4.4 s | Problema d'usuari reconeixible, una línia concisa sobre un recurs gràfic B-roll amb llicència o un camp de color sòlid. | Sense testimoni inventat ni identitat de client. |
| 4.4-13.3 s | Seqüència de pantalla real per a la primera feina, amb continuïtat de navegació. | Camí real suportat; sense clics falsos ni interfície sintètica. |
| 13.3-22.2 s | Una segona feina complementària amb un resultat visible que l'enregistrament demostra. | Seleccioneu entre el material verificat; no importeu afirmacions dels competidors. |
| 22.2-26.7 s | Retorn al benefici final i identitat del producte. | Formuleu-ho com a propòsit o invitació, no com a temps no mesurat o estalvi d'ingressos. |
| 26.7-32 s | CTA únic amb URL i disponibilitat verídica; final musical. | Coincidiu amb el destí real i l'estat de disponibilitat exacte. Mantingueu el crèdit de la música. |
Per a vídeos de consideració més llarga, seguiu l'estructura de visió general oficial: primer el context humà, després un flux de treball per capítol, retorn a les persones entre les eines, tancament de marca.
4. Construïu-ho (HyperFrames + GSAP)
- Bastiu una composició HyperFrames (vegeu el skill
hyperframes-best-practicesper a problemes de CLI, lint i render). Fixeu la versió de HyperFrames i una compilació local de GSAP 3 al projecte; no carregueu runtimes d'animació des d'una CDN en el moment del render. - Marc de dispositiu: una carcassa de grafit dimensional (llum suau superior, ressalt de bisell d'1-2 px, ombra de contacte) que contingui una captura de pantalla real o un
<video>silenciat d'un enregistrament de pantalla. Animeu la carcassa ambtranslate3d/rotate, manteniu el contingut de la pantalla dret i sense escalar un cop assentat. - Tipografia cinètica: dividiu el titular en paraules;
gsap.from(words, {yPercent: 110, rotate: 4, stagger: 0.07, ease: "back.out(1.6)"})dins d'una màscaraoverflow: hidden. Un titular per temps. - Transició de camp de color: rectangles a sang netegen (
clip-path: inset()tween) entre temps; el camp entrant porta la següent posició del dispositiu. - Línia de temps: una línia de temps mestra
gsap.timeline({paused: true})amb etiquetes per temps ("problem","job1","job2","payoff","cta"), perquè HyperFrames pugui buscar qualsevol fotograma de forma determinista. - Música: només pistes amb llicència (p. ex. CC BY amb crèdit). Enregistreu la font URL, llicència, línia de crèdit i hash del fitxer a
audio-provenance.json; editeu per a un final compost en el temps del CTA. - Renderitzeu a la resolució/fps objectiu; H.264 + estèreo AAC per a xarxes socials.
5. Kit de disseny per a explicacions i anuncis (provat en producció)
Aquest kit va llançar una sèrie d'explicacions de producte i anuncis verticals de 15 segons. La primera versió utilitzava fons foscos i va ser rebutjada per "massa negre". El que va funcionar:
- Material real darrere de cada escena: material amb llicència del context real del producte (p. ex. material esportiu per a una app d'esports), graduat amb un gradient de color de marca (
linear-gradient(180deg, brand 74% → transparent → ink 50%)), méssaturate(1.3) brightness(1.12)sobre el fons. - Paleta: un color de marca saturat més un accent d'alta energia (p. ex. violeta
#6c4cff+ llima#d7ff3c), amb cel/coral com a adhesius només i tinta#16132eper al text sobre l'accent. - Tipografia: majúscules condensades (Archivo,
font-stretch75-80%, pes 900, 74-96 px en ample 1080). La paraula clau de cada titular es col·loca en un caixa de marcador d'accent rotada -2°. Comproveu la cobertura de glifs per idioma: Archivo no té ciríl·lic, per tant, canvieu a Inter per a ru/uk/bg. - Marcs de dispositiu: marcs de telèfon/navegador blanc/plata amb un escenari de perspectiva 3D (
perspective: 1800px) que mostren captures de pantalla reals o enregistraments de pantalla reals. Cada pantalla ha de mostrar contingut real (persones, logotips i dades), no estats buits. - Adhesius que cauen: 2-3 etiquetes curtes en majúscula que cauen, giren i s'assenten al costat del dispositiu (una per temps).
- Transicions: una neteja angular amb color d'accent o un flaix blanc de 2 fotogrames entre temps.
- Veu en off (TTS o enregistrada) amb música atenuada a sota, després la mescla final normalitzada a -14 LUFS (
ffmpeg -af loudnorm=I=-14:TP=-1.5:LRA=11). - Captura de dispositiu real (macOS): Mirroring d'iPhone més
screencapture -v -V <secs> -R<x,y,w,h>enregistra una app real. Activeu la finestra de Mirroring abans d'enviar tocs. El telèfon ha d'estar bloquejat perquè Mirroring es connecti. - Variants localitzades: mantingueu una plantilla amb
{{placeholders}}i genereu una còpia per idioma amb un petit script (vegeureferences/vertical-ad-15s.template.html). - UTM a cada enllaç als subtítols i biografies:
?utm_source=<platform>&utm_medium=organic&utm_campaign=<video-slug>.
Trampes del render (cada una quasi va enviar un vídeo trencat)
- HyperFrames pot eliminar silenciosament cada superposició a mig render quan una composició té molts clips
<video>(6+ fons, o fons més clips de telèfon). Les previsualitzacions encara es veuen bé. Pre-concateneu els fons en un vídeo, manteniu baix el nombre de clips, i inspeccioneu sempre un full de contacte del MP4 renderitzat abans de programar. - GSAP
fromToambautoAlpha: 1a les variables from mostra elements en temps d'autoria. Utilitzeutl.set(el, {autoAlpha: 1})i desprésfromTosense. - Les pujades a programadors socials de vegades retornen un cos buit. Torneu-ho a provar i confirmeu que la mida en bytes del fitxer allotjat coincideixi abans de programar.
- Les cares i noms de persones reals a la pantalla (jugadors, clients) necessiten el seu consentiment abans de l'ús públic o de pagament. Assenyaleu-ho si falta.
6. Verifiqueu el fitxer codificat, no la previsualització
- Extreu fotogrames del MP4 lliurat (p. ex.
ffmpeg -i out.mp4 -vf fps=2 frames/%03d.png) i llegiu-los: cada pantalla és llegible durant la seva pausa, algun subtítol superposa les zones segures de la plataforma, apareix text a mig animació quan s'ha de llegir? - Comproveu que la descodificació es completi, la durada, els fps, el nombre de fotogrames, la sonoritat i el pic; enregistreu el SHA-256 del fitxer final.
- Executeu les comprovacions de lint/layout de HyperFrames i una mostra de contrast als fotogrames de subtítols.
- Mantingueu un manifest que vinculi cada actiu font (pantalles amb creació/data, llicència de B-roll, llicència de música) amb el hash final.
7. Límits
- Només interfície real. Si un flux no es pot enregistrar (inici de sessió estàtica, funció no llançada), suprimiu-lo; no el simuleu mai.
- Els vídeos de referència descarregats, els fulls de contacte i les transcripcions són material d'anàlisi privat; no els pugeu mai amb el contingut creatiu.
- Sense afirmacions de popularitat, ROI o estalvi de temps tret que es mesurin i es citin.
- L'aprovació creativa no és publicació: la programació i la publicació són passos separats i confirmats.