Unda Video Tofauti za Matangazo ya SaaS kwa saas-motion-kit

saas-motion-kit ni nini?

saas-motion-kit ni mfumo wa ubunifu wa kutengeneza video za matangazo na mwendo kwa bidhaa za programu kwa kutumia HyperFrames na Claude Code. Unachanganya mwongozo wa kupanga, marejeo ya taswira, violezo vya storyboard, zana za otomatiki na hatua za ukaguzi katika hazina moja.

Mradi huu umejengwa kwa kuzingatia kanuni moja: hakuna filamu mbili zinazopaswa kuhisi kama filamu ileile. Badala ya kutumia mara kwa mara miingilio, mabadiliko na miundo inayojulikana, kwanza unaeleza ujumbe na mtindo, kisha unatengeneza lugha ya taswira inayofaa filamu hiyo mahususi.

Kit hiki kina mandhari 100 katika familia 10 za taswira, atlasi ya mabadiliko 24, mwongozo wa hatua saba, mkakati wa vipengele, mifano kamili na ukaguzi wa utofauti unaotambua marudio kabla ya uzalishaji kuanza.

Vipengele muhimu

• Mwongozo wa uzalishaji wa hatua saba: Pitia muhtasari, vipengele, mandhari, storyboard, ujenzi, sauti na uwasilishaji, ukiwa na hatua ya ukaguzi wa kibinadamu baada ya kila hatua.
• Mandhari 100 za taswira: Chunguza mielekeo inayotegemea kiolesura cha bidhaa, uchapaji, nyenzo za 3D, optiki, sitiari, usimulizi wa data, wahusika, mikondo ya sanaa na sarufi ya kamera.
• Atlasi ya mabadiliko: Kagua mabadiliko 24 ya kisimulizi, yakiwemo match cuts, carries, miondoko ya kamera, masks, mabadiliko ya nyenzo na mbinu zinazotegemea muda.
• Ukaguzi wa utofauti: Kagua storyboard ili kubaini mabadiliko yanayorudiwa, miingilio iliyorudiwa, mikondo ya easing, mielekeo ya mwendo, urefu unaofanana wa picha, matumizi kupita kiasi ya rangi za msisitizo, ukosefu wa mshangao, kutolingana kwa mtindo na ukosefu wa vipengele asilia.
• Kichagua mandhari: Chagua kwa awali mandhari kulingana na hadhira na mtindo huku ukiondoa mandhari yaliyotumika hivi karibuni.
• Historia ya mwendo: Hifadhi maamuzi ya ubunifu katika filamu mbalimbali na tengeneza ripoti zinazoonyesha mbinu zilizotumika kupita kiasi na ambazo hazijachunguzwa.
• Mbinu ya vipengele: Unda upya kiolesura safi cha bidhaa katika HTML au tengeneza vipengele vya kufikirika vilivyorahisishwa wakati kiolesura halisi hakifai.
• Ujuzi wa Claude Code: Tumia amri ya /saas-motion-video kupitia mchakato mzima kwa njia shirikishi.
• GitHub Action: Kagua kila faili ya STORYBOARD.md wakati wa push na pull request.
• Huduma za uzalishaji: Punguza ukubwa wa render za uwasilishaji, kagua mipasuko ya mizunguko, tengeneza athari za sauti za kiolesura zenye joto na unda maghala ya maudhui.

Elewa mtiririko wa kazi wa hatua saba

Mtiririko wa kazi unatenganisha kazi ya uzalishaji na idhini ya ubunifu:

1 Brief → 2 Components → 3 Theme → 4 Storyboard → 5 Build → 6 Sound → 7 Deliver
   gate       gate          gate         gate           gate      gate       gate

Wakala anaweza kufanya sehemu kubwa ya kazi ya uzalishaji, lakini kila hatua huisha kwa uamuzi wa kibinadamu. Hizi ndizo hatua unapothibitisha ujumbe, kutathmini kama mwelekeo wa taswira unafaa na kukataa chaguo za jumla au zinazorudiwa.

1. Muhtasari: Bainisha hadhira, ujumbe, jukwaa, muda, mtindo na mahitaji ya uwasilishaji.
2. Vipengele: Amua kama utaonyesha kiolesura safi cha bidhaa au utabuni vipengele vya kufikirika vyenye uhalisia.
3. Mandhari: Chagua lugha ya taswira inayounga mkono mtindo unaotakiwa.
4. Storyboard: Panga kila picha, kamilisha daftari la ubunifu na endesha ukaguzi wa utofauti.
5. Ujenzi: Tekeleza filamu kama uhuishaji unaoweza kuamuliwa kwa uthabiti na salama wakati wa kutafutwa.
6. Sauti: Ongeza muziki na usanifu wa sauti unaofaa inapohitajika.
7. Uwasilishaji: Fanya render kwa ubora wa juu, tengeneza ukubwa wa mwisho wa matokeo na thibitisha maelezo ya kiufundi kama vile mipasuko ya mizunguko.

Usakinishaji na usanidi

Mahitaji

Kabla ya kusakinisha kit, hakikisha mazingira yako yana:

• Node.js 22 au mpya zaidi
• ffmpeg
• Claude Code

HyperFrames hupakua Chrome yake ya headless, kwa hiyo huhitaji kusakinisha kivinjari hicho kando kwa ajili ya kufanya render.

Chaguo la 1: tumia kiolezo cha hazina

Fungua hazina ya saas-motion-kit na uchague Use this template. Hii huunda hazina ya filamu iliyo na kanuni za ubunifu, zana, violezo na GitHub Action ya ukaguzi wa utofauti iliyosanidiwa awali.

Chaguo la 2: kloni hazina

git clone https://github.com/tugrawork-creator/saas-motion-kit
cd saas-motion-kit

Sakinisha ujuzi wa HyperFrames kwa Claude Code. Haujajumuishwa ndani ya kit:

npx skills add heygen-com/hyperframes

Hakiki mfano uliojumuishwa

Hazina hii inajumuisha mradi kamili wa HyperFrames wa mzunguko wa 3D wa sekunde 40 wa kibanda, usio na sauti na usio na mshono. Fungua saraka yake na uanzishe mwonekano wa Studio:

cd examples/acme-suite-loop
npx hyperframes preview

เพื่อ kufanya render ya ubora wa 4K kwa uwasilishaji katika mlalo, endesha:

npx hyperframes render --quality delivery --resolution landscape-4k --output renders/loop-2160.mp4

Tengeneza tangazo lako la kwanza la programu

Hatua ya 1: andika muhtasari ulioelekezwa

Anza na kiolezo kilicho katika templates/BRIEF.md. Bainisha mtazamaji anachopaswa kuelewa, filamu inalenga nani, itaonekana wapi na inapaswa kuhisi vipi.

Sentensi muhimu ya ubunifu hufuata muundo huu:

Nataka kusema [ujumbe] kwa mtindo wa [mtindo].

Uamuzi huu unapaswa kufanywa kabla ya athari au mabadiliko. Matrix ya toni katika creative/tone-matrix.md inaunganisha toni na kasi, urahisishaji, tabia ya kamera, rangi, uchapaji, mabadiliko na sauti.

Hatua ya 2: chagua mkakati wa vipengele

Filamu za programu hutegemea UI inayoaminika. Tumia kanuni ya clean-or-imaginary ya zana:

1. Ikiwa bidhaa ina UI thabiti, isiyo na msongamano na ya sasa, inase kama rejeleo kisha ujenge upya kadi, majedwali, chati na arifa zinazohitajika katika HTML ukitumia tokeni za muundo wa bidhaa.
2. Ikiwa kiolesura kimepitwa na wakati, kina msongamano mwingi au bado hakijaundwa, unda vipengele vya kufikirika vilivyorahisishwa kwa lugha ya kuona ya chapa.
3. Weka kila kipengele kiwe cha kweli. Kinaweza kurahisisha uwezo halisi, lakini hakipaswi kubuni uwezo, wateja au nambari za utendaji.

Mradi pia unaomba kila filamu ibuni angalau kipengele kimoja cha asili. Kifaa cha kuunda vipengele katika creative/component-forge.md kinatoa mchakato wa kukitengeneza kwa haraka.

Hatua ya 3: chagua mandhari ya kuona

Vinjari ghala la mandhari 100 na uchague kwa awali chaguo mbili au tatu kwa muhtasari huo. Kila karatasi ya mandhari ina nyakati nne muhimu—Hook, Reveal, Proof na CTA—pamoja na vipengele vinavyopendekezwa, mbinu za mwendo zilizopangwa kwa muda, hatari, mwongozo wa urekebishaji na marejeleo.

Unaweza pia kuchagua mandhari kwa awali kutoka kwenye mstari wa amri. Kwa mfano, amri hii hutafuta mandhari za kucheza zinazolenga wasanidi programu na kuondoa mandhari zilizorekodiwa katika historia ya hivi karibuni:

python tools/pick_themes.py --tone playful --audience "developers" --history ~/.motion-ledger.json

Mandhari yamepangwa katika familia 10:

• UI ya bidhaa kama jukwaa
• Mifumo ya uchapaji na michoro
• Nyenzo na 3D
• Nuru, optiki na umbile
• Dhana za mafumbo
• Mielekeo bainifu
• Usimulizi wa data
• Wahusika na mascots
• Harakati na enzi za sanaa
• Sarufi ya kamera na uhariri

Hatua ya 4: jenga na kagua storyboard

Unda STORYBOARD.md kutoka kwenye kiolezo kilichotolewa. Anza na sentensi ya ujumbe na toni, kisha kamilisha daftari la ubunifu lenye safu moja kwa kila picha. Rekodi chaguo kama vile mabadiliko, kuingia, urahisishaji, mwelekeo wa mwendo, muda, lafudhi, mshangao na vipengele vya asili.

Fanya ukaguzi wa lazima wa ubunifu kabla ya kujenga:

python tools/variety_audit.py STORYBOARD.md

Rekebisha chaguo zinazorudiwa zilizoainishwa na ukaguzi. Ikiwa marudio yamekusudiwa na yana maana katika simulizi, yaainishe kama motif: iliyokusudiwa badala ya kuyaacha bila maelezo.

Ukaguzi unaweza pia kufanya kazi na historia ya mwendo, na kukusaidia kuepuka mbinu zilizotumika katika filamu za hivi karibuni. Unapoongeza matokeo, chaguo la --theme NNN hurekodi mandhari iliyochaguliwa kama sehemu ya historia hiyo.

Hatua ya 5: anza uzalishaji kwa Claude Code

Fungua Claude Code kwenye mzizi wa hazina na uitishe ujuzi uliojumuishwa kwa ombi mahususi. Kwa mfano:

/saas-motion-video  Make a 45 s LinkedIn promo for https://your-product.com — theme 055 (Bento Grid), music-driven, no voiceover.

Ujuzi huu hukuongoza kupitia hatua zote saba na husimama katika kila lango la ukaguzi. Usichukulie kusimama huku kama taratibu tu: zitumie kutathmini ikiwa kazi inawasilisha muhtasari na ikiwa chaguo zake za kuona ni mahususi badala ya za jumla.

Hatua ya 6: hakiki na render

Tumia HyperFrames Studio wakati wa kujenga:

npx hyperframes preview

Kwa uwasilishaji wa mwisho, render katika 4K hata kama lengo ni 1080p au 2K:

npx hyperframes render --quality delivery --resolution landscape-4k --output renders/final-2160.mp4

Kisha tumia tools/deliver.sh kupunguza ukubwa kwa Lanczos. Kulingana na mwongozo wa mradi, hii hutoa maandishi, kingo na picha za 3D zilizo safi zaidi kuliko kufanya render moja kwa moja katika 1080p.

Tumia mfumo wa utofauti katika filamu nyingi

Fuatilia historia yako ya ubunifu

Filamu inaweza kuepuka marudio ya ndani na bado ifanane na kazi zako za awali. Zana za historia hushughulikia mtindo huu mpana kwa kurekodi mandhari na maamuzi ya mwendo katika miradi mbalimbali.

Tengeneza ripoti ya ukurasa mmoja kwa kutumia tools/history_report.py. Inaonyesha mabadiliko, njia za kuingia na mitindo ya urahisishaji unayotumia mara kwa mara, pamoja na mabadiliko ya atlas na mandhari ambazo bado hujazichunguza.

Kagua storyboards katika ujumuishaji endelevu

Hazina hii inajumuisha .github/workflows/variety-audit.yml. Katika kila push na pull request, workflow hukagua kila STORYBOARD.md. Storyboard inayojirudia hushindwa ukaguzi, na hivyo kupeleka ukaguzi wa ubunifu mapema zaidi katika mchakato wa uzalishaji.

Kuanza na kiolezo cha GitHub ndiyo njia rahisi zaidi ya kurithi workflow hii. Ukiclone zana hiyo katika mradi uliopo, hifadhi workflow na uhakikishe storyboard yako inafuata muundo unaotarajiwa wa daftari.

Jifunze kutokana na ulinganisho wa filamu sita

Saraka ya examples/six-films inatumia hati moja ya sekunde 12 katika mandhari sita. Kila toleo huhifadhi hadithi ileile huku likibadilisha lugha yake ya kuona na kuanzisha kipengele cha kipekee. Saraka hiyo pia inajumuisha muhtasari wa pamoja, unaokuruhusu kumpa wakala vikwazo vilevile na kujaribu tafsiri ya saba.

Mradi wa examples/acme-suite-loop unatoa somo lingine muhimu. Storyboard yake ya kwanza ilirudia mgeuko, kuingia kwa kichwa, urahisishaji na muda wa picha vilevile. Toleo lililorekebishwa linabadilisha njia za kuingia, migeuko, mwendo wa kasi na tabia ya kamera, huku likiongeza mshangao wa kuona uliokusudiwa.

Vidokezo vya juu vya uzalishaji

Fanya kila fremu iwe salama kwa kutafutwa

HyperFrames lazima iweze kutoa fremu yoyote iliyoombwa kwa uthabiti. Chukulia kila fremu kama kazi safi ya muda. README inapendekeza kutumia ratiba moja ya GSAP iliyosimamishwa na kuendesha Three.js kutoka kwa hf-seek.

Epuka Date.now() na uzalishaji wa nambari nasibu usio na mbegu. Vyanzo hivi vinaweza kutoa matokeo tofauti wakati kitoa-fremu kinaporuka moja kwa moja hadi kwenye fremu fulani.

Unda mizunguko isiyo na mshono kwa hisabati

Kwa filamu inayojirudia, ipa kila mwendo wa mandharinyuma idadi nzima ya mizunguko ndani ya muda wa mzunguko. Mradi unaeleza kanuni hii kama:

sin(2π·n·t/LOOP)

Baada ya kutoa fremu, thibitisha mshono kwa kutumia tools/loop_check.py badala ya kutegemea ukaguzi wa kuona pekee.

Shughulikia taipografia ya lugha nyingi kwa uangalifu

Filamu inapojumuisha herufi zisizo za Kilatini, pakia vikundi vidogo vya fonti vya ndani vya latin-ext. Fonti za akiba zilizojengewa ndani zinaweza kuacha kwa siri glyph kama ş, ğ, na İ.

Usidhani kuwa ubadilishaji wa herufi kubwa wa CSS hufanya kazi kwa usawa katika lugha zote. Kwa Kituruki, kwa mfano, kubadilisha herufi ndogo i hutokeza İ. Weka maandishi ya kuonyeshwa katika umbo lake linalokusudiwa la herufi kubwa na weka thamani inayofaa ya lang kwa kila neno.

Weka sauti ikiwa ya joto na yenye kusudi

Sauti za kiolesura za mawimbi safi ya sine zinaweza kusikika nyembamba au za kutatiza. Kifurushi kinajumuisha tools/warm_sfx.py kwa timbre zilizopangwa zenye joto zaidi, kama marimba au kizuizi cha mbao katika kitufe kimoja chenye mwangwi mfupi wa chumba.

Ukitengeneza muziki kwa Meta’s MusicGen, kumbuka kuwa uzani wake umepewa leseni chini ya CC-BY-NC 4.0 na haujakusudiwa matumizi ya kibiashara. Chagua muziki wenye leseni inayofaa kwa filamu za kibiashara.

Punguza maandishi yanayoonekana kwenye skrini

Acha mwendo na muundo visimulie hadithi. Weka maandishi kwenye lebo na takriban mstari mmoja kwa kila mpigo. Ikiwa watazamaji lazima wasome aya ili kuielewa filamu, vielelezo havifanyi kazi ya kutosha ya usimulizi.

Epuka kuongeza upau wa maendeleo chini. Mradi unaonya kuwa muundo huu huifanya filamu ya chapa ifanane na rekodi ya skrini.

Tumia mabadiliko kwa ajili ya usimulizi

Rejelea atlasi ya mabadiliko badala ya kuchagua mabadiliko kama mapambo. Kila mojawapo ya maingizo yake 24 inaeleza hali inayoungwa mkono na michanganyiko ya kuepuka. Chagua mabadiliko yanayofafanua uhusiano kati ya mawazo, kubeba kitu kutoka picha moja hadi nyingine, au kuimarisha lugha ya nyenzo na kamera ya filamu.

Orodha ya ukaguzi inayopendekezwa kwa mradi wa kwanza

1. Sakinisha Node.js 22+, ffmpeg, Claude Code, na ujuzi wa HyperFrames.
2. Onyesha awali mfano wa Acme ili kuthibitisha mazingira ya uonyeshaji.
3. Andika muhtasari wenye sentensi moja iliyo wazi ya ujumbe na sauti.
4. Amua kama utaunda upya kiolesura halisi au utengeneze vipengele vya kubuni vinavyoaminika.
5. Teua kwa awali mandhari mawili au matatu ya ghala, kisha kubali moja kwenye lango la mandhari.
6. Andika ubao wa hadithi na ukamilishe daftari lake la ubunifu.
7. Endesha tools/variety_audit.py na rekebisha chaguo zilizorudiwa.
8. Jenga kwa uhuishaji wa kibainifu na salama kwa kuruka.
9. Ongeza sauti iliyodhibitiwa na yenye leseni inayofaa.
10. Toa katika 4K, punguza ukubwa kwa ajili ya uwasilishaji, na kagua mishono ya mizunguko inapohitajika.
11. Ongeza chaguo za filamu kwenye historia ya mwendo ili mradi unaofuata uanze kwa mawazo tofauti.

Hitimisho

saas-motion-kit si mkusanyiko wa madoido ya kutumia kimakanika. Ni mbinu iliyopangwa ya kutengeneza filamu za programu zinazowasiliana kwa uwazi huku zikiwa na upekee wa kuona. Kwa kufafanua sauti kabla ya mbinu, kubuni vipengele mahususi vya mradi, kukagua maamuzi katika kila lango, na kukagua marudio kabla ya uzalishaji, unaweza kujenga mtiririko wa kazi unaoweza kurudiwa bila kufanya kazi inayojirudia.