102.3K+Scarica
Vai alla guida all’uso
Remotion Markupdi remotion-dev

Remotion Markup Skill.

Scrivi markup React che si comporta come una timeline video, non come una pagina web con animazione CSS.

  • Video
  • React
  • Movimento
Scarica OpenDesignVedi la guida all'uso
Revisione della fonte · Remotion MarkupSKILL.md
Attività Video Produce • Markup di composizione React guidato dai frame • Livelli multimediali con tempi espliciti e riferimenti agli asset • Una scena visualizzabile in anteprima con strutture di effetti e modifica supportate Prima di iniziare Remotion e pacchetti specifici per le funzioni, corrispondenti alla versione del progetto; i riferimenti collegati indicano gli ulteriori requisiti per media, effetti, font o esportazione.
Sintesi editoriale · fonte esaminata 2026-10-07 · non è un esempio generato

01 Funzionalità

Remotion Markup: scene video guidate dai frame

Un contratto di authoring basato sui frame e un hub di riferimenti per tempi, media, scene modificabili ed effetti visivi in Remotion.

Flusso di lavoro basato sulla fonteNon è un benchmark di esecuzione

L'approccio di lavoro

Remotion Markup si concentra sulla creazione di composizioni: tempi derivati dal frame rate della composizione, animazione guidata dal frame corrente ed elementi multimediali che partecipano a una timeline video. La fonte avverte esplicitamente che le normali transizioni CSS e le classi di animazione non sostituiscono un rendering guidato dai frame.

È anche un hub di riferimenti per lavori più specifici, da sottotitoli e mappe a misurazione del testo, effetti e audio. Il suo valore concreto è il contratto di base: tenere i tempi vicino all'elemento creato, preservare target di modifica indipendenti e usare il componente multimediale o di effetto appropriato invece di trattare ogni elemento visivo come un generico wrapper DOM.

Risultati attesi

  • Markup di composizione React guidato dai frame
  • Livelli multimediali con tempi espliciti e riferimenti agli asset
  • Una scena visualizzabile in anteprima con strutture di effetti e modifica supportate
Vedi il brief di esempio

Dal brief alla revisione

  1. 01
    Leggi le impostazioni della composizione

    Usa il frame rate esistente per convertire i secondi in frame e preserva durata e dimensioni previste.

  2. 02
    Crea livelli temporizzati

    Tieni media e scene modificabili in modo indipendente su nodi JSX separati, con i tempi direttamente sui componenti che li supportano. La fonte esaminata richiede anche un secondo di premontaggio tramite premountFor={fps} sui componenti temporizzati supportati, inclusi gli elementi annidati; verifica l'API installata prima di applicarlo.

  3. 03
    Aggiungi movimento ed effetti

    Guida il movimento con l'interpolazione basata sul frame corrente. Indirizza gli effetti specializzati al riferimento corrispondente e a un componente compatibile.

  4. 04
    Controlla i frame del video

    Esamina la riproduzione in Studio e frame renderizzati rappresentativi per verificare overflow del testo, disponibilità dei media e tempi.

02 Quando usarlo

Quando usarla

Remotion e pacchetti specifici per le funzioni, corrispondenti alla versione del progetto; i riferimenti collegati indicano gli ulteriori requisiti per media, effetti, font o esportazione.

Adatta a

  • Video di prodottoCombina filmati, immagini, lower third e audio in una timeline ripetibile.
  • Movimento modificabile nel codiceUtile quando i livelli visivi devono restare comprensibili e modificabili sia nel sorgente sia in Studio.

Limiti da verificare

  • Non è animazione per browserLe transizioni CSS e le classi di animazione Tailwind sono indicate come non adatte al modello di rendering documentato.
  • Dipendenze da riferimenti e versioneLa voce rimanda a molti documenti specifici per funzione. I componenti e gli effetti disponibili vanno verificati rispetto alla versione installata di Remotion.

Cosa portare

  • Brief della composizioneIndica sequenza delle scene, durata, dimensioni e ritmo previsto.
  • Asset multimedialiFornisci file reali di immagini, audio, video e font oppure URL di origine approvati.
  • Esigenze di modificaIndica i livelli che devono poter essere modificati in modo indipendente dopo la creazione iniziale.

03 Decisioni importanti

Decisioni importanti

  1. Tempi basati sul frame rate

    Usare gli fps della composizione mantiene le espressioni temporali collegate alle impostazioni reali del video.

  2. Gli effetti hanno dei target

    La fonte distingue i componenti che accettano direttamente gli effetti dai contenuti DOM che richiedono un wrapper canvas adatto.

04 Esempio di brief

Prova un brief mirato

Il brief di esempio qui sotto non è stato testato. Controlla la configurazione della skill prima di usarlo.

Controlla la configurazione

Carica l'intero insieme di riferimenti del markup. I comandi di aggiunta dei pacchetti nella fonte installano moduli runtime, non questa skill.

File sorgente originale
https://github.com/remotion-dev/skills/blob/32b241b97f4e0e4ab61fe9a41b05e6e64503f8c5/skills/remotion-markup/SKILL.md

Remotion e pacchetti specifici per le funzioni, corrispondenti alla versione del progetto; i riferimenti collegati indicano gli ulteriori requisiti per media, effetti, font o esportazione.

Parti da un solo risultato

Adatta ambito, materiale di partenza e vincoli di questo brief prima di eseguire la skill.

Brief di esempio
Usa Remotion Markup per aggiungere a questo filmato un overlay temporizzato con il titolo del prodotto. Mantieni il frame rate attuale e la durata della scena. Usa opacità e traslazione guidate dai frame, mantieni il titolo modificabile in modo indipendente e carica le indicazioni sulla misurazione del testo prima di adattare il sottotitolo lungo. Controlla in anteprima i frame di apertura, di stabilizzazione e di uscita.

Controlla il risultato

Confronta l'output effettivo con questi criteri osservabili.

  • Nessun movimento richiesto dipende da animazioni o transizioni CSS.
  • I livelli temporizzati mantengono i propri nodi sorgente modificabili.
  • Testo e media sono corretti nei frame renderizzati rappresentativi.

OpenDesign offre uno spazio di lavoro di design locale per agenti di programmazione. Questa scheda non significa che la skill sia inclusa né che i suoi strumenti esterni, le credenziali e le dipendenze software siano compresi.

Scarica OpenDesignLeggi la guida rapida

05 Fonte e licenza

Fonte e licenza

Questa pagina descrive la revisione della fonte fissata e collegata qui sotto. Comportamento e requisiti upstream possono cambiare.

Autore della fonte
remotion-dev
Repository
remotion-dev/skills
File della skill
skills/remotion-markup/SKILL.md
Licenza
Non confermata: controlla i termini upstream prima del riutilizzo.
Snapshot esaminato
2026-10-07 · 32b241b97f4e
Sintesi editoriale della fonte
Un contratto di authoring basato sui frame e un hub di riferimenti per tempi, media, scene modificabili ed effetti visivi in Remotion.

Sintesi originale di OpenDesign, basata sulla fonte collegata. Le stelle del repository sono un segnale di popolarità datato, non un indicatore di uso della skill né un punteggio di qualità.

06 Domande prima di iniziare

Domande prima di iniziare

Posso riutilizzare un'animazione CSS?

La fonte dice di rifattorizzarla in un'animazione Remotion guidata dai frame, così il rendering segue la timeline.

Devo avvolgere ogni componente in Sequence?

No. Preferisce le prop di temporizzazione dirette dove supportate e riserva i wrapper ai casi di temporizzazione condivisa significativa o ad altri comportamenti.

Posso applicare gli effetti a qualsiasi div?

Non direttamente tramite la prop effects documentata. La voce indica i componenti supportati e un percorso HtmlInCanvas per contenuti DOM raggruppati.

OpenDesign

Lascia spazio alla prossima iterazione di design.

Tieni brief, materiale di partenza e lavoro di design insieme in uno spazio di lavoro locale. Controlla la configurazione della skill prima di aggiungerla al tuo flusso di lavoro.

Scarica OpenDesignSfoglia le skill di design
File sorgente originale
https://github.com/remotion-dev/skills/blob/32b241b97f4e0e4ab61fe9a41b05e6e64503f8c5/skills/remotion-markup/SKILL.md