นักออกแบบโมชันด้วย AI ของคุณ

TH

เปิดแอป beta

Simple Motion

โชว์รีลคีเนติกไทป์สองภาคตามจังหวะเพลง

โชว์รีลแบบวาดยาว 32 วินาที: ลูกบอลเด้ง คำเคลื่อนไหว กริดรูปทรง แท่ง 3D และอนุภาค ตามด้วยสไลด์ตัดตามจังหวะพร้อมวัตถุ 3D หมุน

เผยแพร่เมื่อ 10 พฤศจิกายน 2569ใช้แล้ว 1 ครั้ง

ใช้พรอมต์นี้

พรอมต์จะเปิดในแอป: เพิ่มไฟล์ของคุณเอง แล้วเอเจนต์จะสร้างวิดีโอให้

รายงานพรอมต์นี้

แนวคิด

สร้างโชว์รีลโมชันกราฟิกแนวนอนยาว 32 วินาที (1920x1080, 60 fps) สำหรับ [your brand] แบ่งเป็นสองครึ่งที่มีลุคต่างกัน ตัดต่อแนบชิดกับดนตรี ทุกอย่างเป็นภาพวาด: ไม่มีฟุตเทจ ไม่มีคลิปสต็อก ภาคแรก (0–15.9 วิ, 128 BPM) เป็นชุดภาพมืด มีเกรน พลังสูง ของตัวอักษรเคลื่อนไหว รูปทรง 3D และอนุภาค ภายในกรอบ HUD บาง ๆ ภาคสอง (15.9–31.8 วิ, 144 BPM) เป็นชุดสไลด์สไตล์บรรณาธิการที่สะอาดตา แต่ละสไลด์มีวัตถุ 3D หมุนช้า ๆ ไม่มีเสียงบรรยาย หลีกเลี่ยงฟุตเทจ ครอสเฟดช้า ๆ นุ่ม ๆ ระหว่างฉาก การตัดที่ไม่ตรงจังหวะ และฟอนต์อื่นนอกจากสองตระกูลที่ระบุไว้ด้านล่าง

โครงสร้าง

ภาคแรก (0–15.9 วิ, 128 BPM) ภายในกรอบ HUD:

0–0.9 วิ: การ์ดชื่อเรื่อง "[Your brand]" พร้อม "01 / 02" ด้านล่าง ค่อย ๆ ปรากฏใน 0.17 วิ และเลือนหายใน 0.18 วิ
0.9–2.7 วิ: ลูกบอลสีชมพูตกลงบนเส้นพื้นที่มีเส้นบรรทัด และเด้งสามครั้งตามจังหวะ (1.40, 1.88, 2.36 วิ) การลงแต่ละครั้งมีเส้นทางบินแบบเส้นประ วงแหวนที่ขยายออก และคำบรรยายตัวอักษรโมโนขนาดเล็ก ("BIGGER", "SLOWER", "ANOTHER COLOUR") จากนั้นลูกบอลบินกลับมากลางจอและขยายใหญ่จนเต็มเฟรมเป็นสีชมพู
2.7–3.25 วิ: บนพื้นสีชมพู "YOUR" สีดำน้ำหนักแบบขยายกว้างผุดขึ้นทีละตัวอักษรจากหลังเส้นฐาน มีเส้นขีดล่างวาดใต้คำ และมีแท็กเล็ก ๆ "(01)" อยู่ด้านบน
3.25–3.7 วิ: "IDEA" สีชมพูไล่น้ำหนักจากบางเฉียบเป็นหนาสีดำใน 0.11 วิ ภายในกรอบเลือกสีม่วงแบบเครื่องมือออกแบบที่มีแฮนด์เดิลแปดจุดและป้ายขนาดที่นับเพิ่มขึ้น
3.7–4.1 วิ: "is" ตัวเอียงบางสีม่วงบนฉากหลังสีลาเวนเดอร์ขยายขึ้นพร้อมเบลอ จุดของมันกลายเป็นก้อนที่ท่วมเฟรมเป็นสีม่วง
4.1–4.65 วิ: "READY" สีขาวแบบแคบถอดรหัสออกมาจากอักขระสุ่ม พร้อมการแยกสีแมเจนต้า/ไซแอนและการเลื่อนเป็นแถบ ซ้อนบนบรรทัดโมโนจาง ๆ ของคำสั่งแชต (เช่น 'chat.say("Bigger")', 'export("mp4")') และบล็อกเคอร์เซอร์สีชมพูกะพริบ จากนั้นเฟรมยุบเป็นเส้นเรืองแสงเหมือนจอ CRT ปิด ตามด้วยแฟลชสีเทา
4.65–6.5 วิ: กริดจุด 19 x 11 เติบโตจากกลางจอ วงแหวนสีม่วงทำให้จุดกระเพื่อมเป็นเครื่องหมายบวก การกวาดจากซ้ายไปขวาเปลี่ยนเครื่องหมายบวกเป็นกากบาท วงกลม และสี่เหลี่ยมขนมเปียกปูน พร้อมเซลล์สีชมพูและม่วงแบบสุ่ม การกวาดครั้งที่สองที่เร็วทำให้ทุกอันกลายเป็นสี่เหลี่ยมจัตุรัส
6.5–8.4 วิ: กริดสี่เหลี่ยมเอนไปด้านหลังกลายเป็นสนาม 3D ของแท่งขอบมนที่ชูขึ้นเป็นคลื่น ลูกบอลสีชมพูมันวาวกระโดดข้ามยอดแท่งตามจังหวะ ด้วยระยะชัดตื้น และจบด้วยซูมเบลอ
8.4–10.25 วิ: กำแพงตัวอักษรเจ็ดแถบแนวนอนพุ่งเข้ามาจากขวาพร้อมโมชันเบลอ เริ่มจากแถบกลาง แถบสีม่วงและสีอ่อนซ้ำ "[YOUR BRAND]" ในฟอนต์แปรผันสี่แบบ (เอียงหนากว้าง เอียงบางแคบ ตรงหนา ตรงบาง) มีจุดสีชมพูคั่น เลื่อนสลับทิศทางกัน แถบกลางเป็นสีชมพู ชื่ออยู่นิ่งและใหญ่ แถบเลื่อนออกด้านข้าง เหลือคำเดียวสีขาวอยู่ลำพัง
10.25–12.1 วิ: คำละลายจากซ้ายไปขวาเป็นอนุภาคราว 3,000 ชิ้น พวกมันก่อเป็นทรงกลมที่หมุน จากนั้นเป็นวงแหวนสองวงไขว้กันพร้อมแกนกลางสีชมพู จากนั้นเป็นกาแล็กซีสองแขน (แขนหนึ่งสีชมพู) แล้วพุ่งออกในแนวรัศมี
12.1–14.2 วิ: สรุปทบทวนฉากก่อนหน้าด้วยจอแยก (สองช่อง แล้วสี่ แล้วเก้า) พร้อมแฟลชกลิตช์เฟรมเดียวและแฟลชสีเทาตอนท้าย
14.2–15.9 วิ: การ์ดปิดท้าย "[YOUR BRAND]" ผุดขึ้นทีละตัวอักษรและมีเส้นวาดใต้คำ "YOUR AI MOTION DESIGNER" และ "[YOURSITE.COM]" ถอดรหัสออกมาเป็นตัวอักษรโมโนเว้นระยะ ลูกบอลสีชมพูตกลงมาและลงเป็นจุดปิดประโยค จากนั้น "● TRY IT FREE" และข้อความเอียง "describe the video. the agent animates it." เลื่อนเข้ามา
ภาคสอง (15.9–31.8 วิ, 144 BPM) สไลด์สไตล์บรรณาธิการ:

15.9 วิ: การ์ดชื่อเรื่อง "Your AI motion designer" พร้อม "02 / 02"
16.8 วิ พื้นเกือบดำ: "EDIT" / "IN WORDS." (บรรทัดที่สองสีส้ม) ข้อความ "TELL THE CHAT WHAT TO SHOW. / THE AGENT BUILDS THE ANIMATION." ป้าย "LIVE PREVIEW / MP4 EXPORT" ปมทอรัสโครเมียมที่มีการสะท้อนสีส้ม และโลโก้ของฉันที่มุมขวาบน
19.2 วิ พื้นสีส้ม: "IDEAS" / "IN MOTION." สีเกือบดำ ป้ายแคปซูล "NO KEYFRAMES" "FONTS FOR EVERY SCRIPT." "BIGGER / SLOWER / ANOTHER COLOUR" และวงแหวนริบบิ้นบิดสีเข้มที่พิมพ์ข้อความ "IDEAS IN MOTION •"
21.7 วิ พื้นเกือบดำ: "IDEA." / "TO VIDEO." / "ONE CHAT." "SHAPES / 3D EFFECTS / SOUND" ท่อโครเมียมคดเคี้ยว วงเล็บมุม และตัวนับเปอร์เซ็นต์พร้อมแถบความคืบหน้า
24.2 วิ หน้าสีอ่อน: "MUSIC" / "TO RHYTHM." "MUSIC AND / SOUND EFFECTS." ดาวพองสีส้มมันวาว และลูกบอลสีดำที่เด้งตามจังหวะเหนือคลื่นเสียงแบบเคลื่อนไหว
26.7 วิ, 27.6 วิ, 28.5 วิ: หนึ่งคำกลางจอต่อหนึ่งสไลด์ "BIGGER." บนพื้นเกือบดำ "SLOWER." บนหน้าสีอ่อนพร้อมเส้นขยุกขยิกโครเมียมเล็ก ๆ ที่มุม "COLOUR." บนพื้นสีส้ม คำบรรยาย: "SAY WHAT SHOULD CHANGE." "NO KEYFRAMES TO HUNT FOR." "THE PREVIEW UPDATES AS YOU TALK."
29.2 วิ พื้นเกือบดำ: "OPEN" / "[YOUR BRAND]." "[YOURSITE.COM]" "IDEA → CHAT → VIDEO" ปุ่มสีส้ม "TRY IT FREE" และดาวพองโครเมียมสี่แฉก วิดีโอจบที่จังหวะดนตรีสุดท้ายที่ 31.5 วิ รวมทั้งหมด 31.8 วิ
ข้อความในเครื่องหมายคำพูดทั้งหมดเป็นตัวอย่าง ให้แทนที่ด้วยคำของคุณเองที่ความยาวใกล้เคียงกัน เพื่อให้เลย์เอาต์ยังลงตัว

องค์ประกอบภาพ

โทนสีภาคแรก: เกือบดำ #0D0B1E พร้อมเกรนฟิล์มและวินเยตต์นุ่ม ๆ หน้าสีอ่อน #FAF9FF สำหรับตัวอักษร สีชมพู #FB2D89 เป็นสีเน้นหลัก สีม่วง #7C6CF2 เป็นสีที่สอง สีลาเวนเดอร์ #F0EDFF ใช้เป็นฉากหลังของช็อต "is" เท่านั้น โทนสีภาคสอง: สไลด์แบบเรียบสีเกือบดำ สีส้ม #FE9117 และหน้าสีอ่อน #FAF9FF พร้อมกริด 96 px จาง ๆ ตัวอักษรเป็นสีเกือบดำบนสไลด์สีส้มและสีอ่อน และเป็นสีอ่อนบนสไลด์สีเกือบดำ
ฟอนต์: ตระกูลดิสเพลย์นีโอกรอเทสก์แบบแปรผันที่มีแกนความกว้างและน้ำหนักสำหรับพาดหัวทุกอัน (Mona Sans) และฟอนต์โมโนสเปซสำหรับป้ายเล็ก บรรทัด HUD คำบรรยาย และตัวนับทุกอัน (JetBrains Mono)
HUD ภาคแรก: วงเล็บมุมบาง ๆ ซ้ายบน "[YOUR BRAND] [YOURSITE.COM]" ขวาบน "LIVE PREVIEW MP4 EXPORT NO KEYFRAMES" ซ้ายล่างเป็นไทม์โค้ดที่วิ่งอยู่ สี่เหลี่ยมเล็กสี่อัน และเส้นความคืบหน้า ขวาล่างเป็นชื่อส่วนปัจจุบัน เปลี่ยนไปตามฉาก: "IDEAS IN MOTION", "KINETIC TYPE", "SHAPES", "3D EFFECTS", "EDIT IN WORDS", "LIVE PREVIEW", "MP4 EXPORT", "TRY IT FREE"
สไลด์ภาคสองใช้ส่วนหัวและส่วนท้ายร่วมกัน ส่วนหัว: "● [YOUR BRAND] / IDEAS IN MOTION" ทางซ้าย "MP4 [YOURSITE.COM]" ทางขวา มีเส้นบางใต้ลงมา ส่วนท้าย: "[YOUR BRAND]" ขีดสั้นหกขีดที่แสดงสไลด์ปัจจุบัน ไทม์โค้ดที่วิ่งอยู่ และเส้นความคืบหน้าสีส้มที่ยาวขึ้นตลอดทั้งครึ่ง พาดหัวขนาดใหญ่อยู่ทางซ้าย ทุกสไลด์มีวัตถุ 3D ทางขวา หมุนช้า ๆ ภายในวงรีวงโคจรบาง ๆ โลโก้ของฉันปรากฏเป็นป้ายเล็ก ๆ บนสไลด์

เทคนิค

ลูกบอล: บีบเป็น 1.9 x 0.45 เป็นเวลา 60 ms ทุกครั้งที่กระแทก และยืดตามทิศความเร็วขณะบิน
ตัวอักษรผุดขึ้น: แต่ละตัวใช้เวลา 0.2 วิ แบบ cubic out ห่างกัน 35 ms ผุดขึ้นจากหลังเส้นฐาน เส้นขีดล่างและเส้นกฎวาดแบบ expo out
การตัดคำในภาคแรกเด็ดขาดและตรงจังหวะ แต่ละคำมีวิธีของตัวเอง: ผุดขึ้น ไล่น้ำหนัก ท่วมด้วยก้อน ถอดรหัสกลิตช์
ถอดรหัสกลิตช์: อักขระสุ่มค่อย ๆ ชัดขึ้นพร้อมการแยก RGB และการเลื่อนเป็นแถบ จบด้วยจอ CRT ดับ
ป้ายโมโนถอดรหัสออกมาจากอักขระสุ่ม
กำแพงตัวอักษร: แถบพุ่งเข้ามาพร้อมโมชันเบลอ เลื่อนด้วยความเร็ว 260 px/s และเลื่อนออกด้านข้าง
พาดหัวภาคสองเลื่อนเข้าจาก 90 px ทางซ้าย ความโปร่งใสจาก 0.35 เป็น 1 ใน 0.3 วิ แบบ cubic out บรรทัดที่สองตามมาช้ากว่า 30 ms
ทรานซิชันภาคสอง: แผงสีเดียวกับสไลด์ถัดไปกวาดเข้ามาจากซ้ายใน 83 ms เริ่มก่อนห้องเพลงเล็กน้อย เพื่อให้สไลด์ใหม่ลงตรงจังหวะแรกพอดี
สไลด์คำเดียว: ตัดเด็ดขาดระหว่างกัน แต่ละคำอยู่ระหว่างสำเนาเส้นขอบจาง ๆ ของตัวเองสองชุดที่ลอยห่างออกจากกัน
วัตถุ 3D: วัสดุโครเมียมและมันวาวพร้อมการหมุนช้า ๆ ต่อเนื่อง
คลื่นเสียง: แท่งของมันสว่างเป็นสีส้มเมื่อเพลย์เฮดผ่าน
เกรนและวินเยตต์เฉพาะภาคแรก ภาคสองคงความเรียบ

ดนตรี

แทร็กดนตรีบรรเลงต้นฉบับ ยาวเท่าวิดีโอพอดีและวางตามกริดจังหวะของมัน ภาคแรกเปิดด้วยไรเซอร์ตึงเครียดเหนือไฮแฮตที่ติ๊กต๊อก ดรอปอิเล็กทรอนิกหนักหน่วงกระแทกราว 2.8 วิ (เบสดิสทอร์ต เสียงซัปกลิตช์ 128 BPM) และขับเคลื่อนทุกอย่างไปถึงการ์ดปิดท้าย ช่วงหายใจหนึ่งวินาทีตามมาที่ 15.6 วิ ภาคสองเป็นกรูฟอิเล็กโทรป็อปที่สดใสและเด้งดึ๋งกว่าที่ 144 BPM ตั้งแต่ 16.8 วิ ไปจนถึงเสียงกระแทกสุดท้ายที่ 31.5 วิ การเด้งของลูกบอล การตัดคำ การกวาด และการลงของสไลด์ล้วนตกบนจังหวะหรือจังหวะแรกของห้อง

เสียง

ไม่มีเสียงบรรยาย เสียงเอฟเฟกต์ซ้อนบนดนตรี:

เสียงคลิกทุกครั้งที่ลูกบอลเด้ง
ไรเซอร์ก่อนดรอปและเสียงบูมที่คำแรก
เสียงวู้ชสั้น ๆ ตอนตัดคำ
เสียงดาวเนอร์ตอนหน้าจอปิด
เสียงวู้ชเข้าสู่การดำดิ่ง 3D และเข้าสู่กำแพงตัวอักษร
ซับดรอปเข้าสู่การทบทวน
เสียงบูมตอนชื่อลงบนการ์ดปิดท้าย
ไรเซอร์และเสียงบูมเข้าสู่ภาคสอง
เสียงวู้ชทุกครั้งที่สไลด์กวาด และเสียงคลิกทุกครั้งที่ตัดเด็ดขาด
มาสเตอร์ที่ประมาณ -14 LUFS โดยมีทรูพีกต่ำกว่า -1 dBTP

ข้อมูลอ้างอิง

รีลของสตูดิโอโมชันดีไซน์หรือซิซเซิลเปิดตัวแอป ครึ่งแรกเป็นไทโปกราฟีเคลื่อนไหวแนวบรูทัลลิสต์พร้อมโอเวอร์เลย์เครื่องมือออกแบบและ HUD ครึ่งหลังเป็นสไลด์สไตล์บรรณาธิการแบบสวิสพร้อมวัตถุ 3D โครเมียม

สิ่งที่ต้องเตรียม

โลโก้หรือไอคอนแอปของคุณ เป็นรูปสี่เหลี่ยมจัตุรัสพื้นหลังโปร่งใส แสดงเป็นป้ายเล็ก ๆ บนสไลด์ของภาคสอง

เทคนิคโมชันดีไซน์ที่ใช้สร้างวิดีโอนี้ แต่ละเทคนิคมีโค้ดที่ทำงานได้ด้วยตัวเอง เปิดในเบราว์เซอร์หรือส่งให้เอเจนต์ของคุณได้

ตัวอย่างเทคนิค “ตัวอักษรลอยขึ้นจากหลังเส้นฐาน แล้วเส้นขีดใต้ถูกวาดออกมา” — ที่ 0:02 ในวิดีโอ

ตัวอักษร

ตัวอักษรลอยขึ้นจากหลังเส้นฐาน แล้วเส้นขีดใต้ถูกวาดออกมา

คำตัวหนาแบบขยายบนพื้นสีเน้นแบบเรียบ: ตัวอักษรแต่ละตัวลอยขึ้น 360 px จากใต้เส้นคลิปที่มองไม่เห็นตรงเส้นฐาน (0.2 วินาที, cubic out, เหลื่อมกัน 35 ms) จากนั้นเส้นขีดใต้ขนาด 8 px ถูกวาดจากซ้ายไปขวาด้วย expo out ตั้งแต่ 0.12 วินาที มีแท็กฟอนต์โมโนขนาดเล็กในวงเล็บอยู่เหนือตัวอักษรแรก

ใช้เมื่อไร เน้นด้วยคำเดียวบนจังหวะหนัก เป็นคำใหญ่คำแรกหลังช่วงไต่ระดับ

แสดงโค้ด

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ตัวอักษรลอยขึ้นจากหลังเส้นฐาน แล้วเส้นขีดใต้ถูกวาดออกมา</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
@import url("https://fonts.googleapis.com/css2?family=Mona+Sans:ital,wdth,wght@0,75..125,200..900;1,75..125,200..900&family=JetBrains+Mono:wght@400;500&display=swap");
* { margin: 0; padding: 0; box-sizing: border-box; }
#root { position: relative; width: 1920px; height: 1080px; overflow: hidden; background: #0D0B1E; }
#field { position: absolute; inset: 0; background: #FB2D89; }
.word { position: absolute; left: 0; right: 0; top: 330px; height: 390px; overflow: hidden; display: flex; justify-content: center; clip-path: inset(0 0 0 0); }
.word span { display: inline-block; font: 900 440px/0.88 'Mona Sans'; font-stretch: 125%; color: #0D0B1E; }
.rule { position: absolute; left: 190px; top: 731px; width: 1540px; height: 8px; background: #0D0B1E; transform-origin: 0 50%; }
.tag { position: absolute; left: 196px; top: 330px; font: 500 19px 'JetBrains Mono'; color: rgba(13,11,30,.7); }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1920" data-height="1080"><div id="field" class="clip" data-start="0" data-duration="3"><div class="tag">(01)</div><div class="word"><div class="mask"></div></div><div class="rule"></div></div></div>
<script>
const word = "YOUR"; // the word
const box = document.querySelector('.word');
box.innerHTML = '';
for (const ch of word) { const s = document.createElement('span'); s.textContent = ch; box.appendChild(s); }
const tl = gsap.timeline({ paused: true });
tl.fromTo('.word span', { y: 360 }, { y: 0, duration: 0.2, ease: 'power3.out', stagger: 0.035 }, 0.1); // rise from below the clip
tl.fromTo('.rule', { scaleX: 0 }, { scaleX: 1, duration: 0.3, ease: 'expo.out' }, 0.22);            // underline
tl.fromTo('.tag', { opacity: 0 }, { opacity: 1, duration: 0.1 }, 0.15);
window.__timelines = window.__timelines || {};
window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

ตัวอย่างเทคนิค “น้ำหนักฟอนต์ไต่ระดับภายในกรอบการเลือกแบบเครื่องมือดีไซน์” — ที่ 0:03 ในวิดีโอ

ตัวอักษร

น้ำหนักฟอนต์ไต่ระดับภายในกรอบการเลือกแบบเครื่องมือดีไซน์

คำหนึ่งเข้ามาด้วยน้ำหนัก hairline แล้วไต่ขึ้นเป็นน้ำหนัก black ภายใน 0.11 วินาที (cubic out) บนฟอนต์แบบ variable กรอบการเลือกหนา 3 px พร้อมที่จับสี่เหลี่ยมแปดจุดพุ่งเข้ามาล้อมแบบเลยเป้าแล้วเด้งกลับ (back out, 0.14 วินาที) และแคปซูลด้านล่างนับขนาดขึ้นไปจนถึงขนาดพิกเซลสุดท้าย

ใช้เมื่อไร เพื่อแสดงว่ากำลังออกแบบตัวอักษรสด ๆ เหมือนในโปรแกรมแก้ไข

แสดงโค้ด

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>น้ำหนักฟอนต์ไต่ระดับภายในกรอบการเลือกแบบเครื่องมือดีไซน์</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
@import url("https://fonts.googleapis.com/css2?family=Mona+Sans:ital,wdth,wght@0,75..125,200..900;1,75..125,200..900&family=JetBrains+Mono:wght@400;500&display=swap");
* { margin: 0; padding: 0; box-sizing: border-box; }
#root { position: relative; width: 1920px; height: 1080px; overflow: hidden; background: #0D0B1E; }
#s { position: absolute; inset: 0; }
.w { position: absolute; left: 0; right: 0; top: 345px; text-align: center; font: 150 360px/1 'Mona Sans'; color: #FB2D89; font-variation-settings: 'wght' 150; }
.sel { position: absolute; left: 520px; top: 368px; width: 880px; height: 343px; border: 3px solid #7C6CF2; }
.sel i { position: absolute; width: 12px; height: 12px; background: #fff; border: 2px solid #7C6CF2; }
.sel i:nth-child(1){left:-8px;top:-8px}.sel i:nth-child(2){left:calc(50% - 6px);top:-8px}.sel i:nth-child(3){right:-8px;top:-8px}.sel i:nth-child(4){left:-8px;top:calc(50% - 6px)}.sel i:nth-child(5){right:-8px;top:calc(50% - 6px)}.sel i:nth-child(6){left:-8px;bottom:-8px}.sel i:nth-child(7){left:calc(50% - 6px);bottom:-8px}.sel i:nth-child(8){right:-8px;bottom:-8px}
.pill { position: absolute; left: 898px; top: 731px; width: 124px; height: 30px; border-radius: 4px; background: #7C6CF2; color: #fff; font: 500 16px/30px 'JetBrains Mono'; text-align: center; }
.tag { position: absolute; left: 528px; top: 330px; font: 500 19px 'JetBrains Mono'; color: #FAF9FF; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1920" data-height="1080"><div id="s" class="clip" data-start="0" data-duration="3"><div class="w">IDEA</div><div class="sel"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div><div class="pill">0 × 0</div><div class="tag">(02)</div></div></div>
<script>
const tl = gsap.timeline({ paused: true });
const wv = { w: 150 }, size = { n: 0 };
tl.to(wv, { w: 900, duration: 0.11, ease: 'power3.out', onUpdate: () => (document.querySelector('.w').style.fontVariationSettings = `'wght' ${wv.w}`) }, 0.2); // hairline to black
tl.fromTo('.sel', { scale: 0.92, opacity: 0 }, { scale: 1, opacity: 1, duration: 0.14, ease: 'back.out(2)' }, 0.26);
tl.to(size, { n: 1, duration: 0.24, ease: 'power3.out', onUpdate: () => (document.querySelector('.pill').textContent = `${Math.round(880 * size.n)} × ${Math.round(343 * size.n)}`) }, 0.26);
window.__timelines = window.__timelines || {};
window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

ตัวอย่างเทคนิค “กริดเปลี่ยนรูปทรง: คลื่นและการกวาด” — ที่ 0:05 ในวิดีโอ

รูปทรง

กริดเปลี่ยนรูปทรง: คลื่นและการกวาด

กริด 19 x 11 เซลล์ ระยะห่าง 100 px แต่ละเซลล์วาดจากสี่เหลี่ยมมุมโค้งสองอันไขว้กัน การประมาณค่าความยาวแขน ความกว้างแขน และรัศมีมุม ทำให้รูปหนึ่งเปลี่ยนเป็นอีกรูป (วงกลม, บวก, สี่เหลี่ยม) และการหมุน 45 องศาให้เป็นรูป x และข้าวหลามตัด วงแหวนขยายจากกึ่งกลางด้วยความเร็ว 15 เซลล์ต่อวินาที เปลี่ยนวงกลมเป็นเครื่องหมายบวกพร้อมแนวหน้าสี จากนั้นการกวาดจากซ้ายไปขวาด้วยความเร็ว 26 เซลล์ต่อวินาทีผ่านบวก x วงกลม และข้าวหลามตัด ขณะที่เซลล์ได้สีเน้นแบบสุ่ม แล้วการกวาดครั้งที่สองที่เร็วกว่าทำให้เป็นสี่เหลี่ยม

ใช้เมื่อไร ช่วงคั่นแบบเจเนอเรทีฟระหว่างฉากตัวอักษร หรือพื้นหลังที่ขับด้วยจังหวะเพลง

แสดงโค้ด

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>กริดเปลี่ยนรูปทรง: คลื่นและการกวาด</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
@import url("https://fonts.googleapis.com/css2?family=Mona+Sans:ital,wdth,wght@0,75..125,200..900;1,75..125,200..900&family=JetBrains+Mono:wght@400;500&display=swap");
* { margin: 0; padding: 0; box-sizing: border-box; }
#root { position: relative; width: 1920px; height: 1080px; overflow: hidden; background: #0D0B1E; }
#c { position: absolute; inset: 0; width: 1920px; height: 1080px; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1920" data-height="1080"><canvas id="c" class="clip" data-start="0" data-duration="3" width="1920" height="1080"></canvas></div>
<script>
const c = document.getElementById('c'), x = c.getContext('2d');
const COLS = 19, ROWS = 11, PITCH = 100;                       // the grid
const INK = '#FAF9FF', A = '#FB2D89', B = '#7C6CF2';          // colours
// a shape is two crossed rounded rects: [arm length, arm width, corner radius] in cell units
const SH = { circle: [1, 1, .5], plus: [1.25, .36, .18], diamond: [.84, .84, .16], square: [1.08, 1.08, .15] };
const mix = (a, b, k) => a.map((v, i) => v + (b[i] - v) * k);
const cl = (v) => Math.max(0, Math.min(1, v));
const hash = (i, j) => { const s = Math.sin(i * 127.1 + j * 311.7) * 43758.5453; return s - Math.floor(s); };
function cell(cx, cy, D, s, rot) {
  const L = s[0] * D, W = s[1] * D, r = Math.min(s[2] * D, W / 2);
  x.save(); x.translate(cx, cy); x.rotate(rot); x.beginPath(); x.roundRect(-L / 2, -W / 2, L, W, r); x.roundRect(-W / 2, -L / 2, W, L, r); x.fill(); x.restore();
}
function draw(t) {
  x.fillStyle = '#0D0B1E'; x.fillRect(0, 0, 1920, 1080);
  for (let j = 0; j < ROWS; j++) for (let i = 0; i < COLS; i++) {
    const d = Math.hypot(i - 9, (j - 5) * 1.1);
    let s = SH.circle, rot = 0, col = INK, D = 52 * cl((t - d * 0.03) / 0.25);
    const R = (t - 0.6) * 15;                                  // ripple: circles become pluses
    if (R > 0) { const k = cl((R - d) / 2); s = mix(SH.circle, SH.plus, k); D = 52 + 4 * k; if (R - d > -0.5 && R - d < 3) col = B; }
    if (t > 1.2) {                                             // sweep: plus -> x -> circle -> diamond
      const p = cl((4 + (t - 1.2) * 26 - i) / 5);
      s = p < .33 ? SH.plus : p < .66 ? mix(SH.plus, SH.circle, (p - .33) / .33) : mix(SH.circle, SH.diamond, (p - .66) / .34);
      rot = p < .33 ? p / .33 * Math.PI / 4 : Math.PI / 4; D = 58;
      const h = hash(i, j); col = p > .4 ? (h < .2 ? A : h < .3 ? B : INK) : INK;
    }
    if (t > 1.7) { const q = cl(((t - 1.7) * 90 - i) / 5); s = mix(SH.diamond, SH.square, q); rot = Math.PI / 4 * (1 - q); }
    if (D < 1) continue; x.fillStyle = col; cell(60 + i * PITCH, 40 + j * PITCH, D, s, rot);
  }
}
const tl = gsap.timeline({ paused: true });
tl.to({}, { duration: 3 });
tl.eventCallback('onUpdate', () => draw(tl.time()));
draw(0);
window.__timelines = window.__timelines || {};
window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

ตัวอย่างเทคนิค “ถอดรหัสกลิตช์พร้อมแยก RGB แล้วปิดจอแบบ CRT” — ที่ 0:04 ในวิดีโอ

ทรานซิชัน

ถอดรหัสกลิตช์พร้อมแยก RGB แล้วปิดจอแบบ CRT

คำตัวแคบน้ำหนัก black ค่อย ๆ ปรากฏทีละตัวอักษรจากกลิฟสุ่มที่เปลี่ยนทุกเฟรมที่ 30 fps ตลอด 0.34 วินาที วาดสามครั้ง (สำเนาสีแมเจนตาและสีฟ้าเยื้อง 12 px ในโหมด screen ใต้สีขาว) พร้อมแถบแนวนอนสุ่มสามแถบที่เลื่อนได้ถึง 60 px จากนั้นฉากยุบลงเป็นเส้นขาวเรืองแสงหนา 3 px ด้วย expo out ใน 0.08 วินาที

ใช้เมื่อไร จังหวะแนวเทคโนโลยีหรือโค้ด และการออกฉากอย่างฉับพลันสู่ฉากถัดไป

แสดงโค้ด

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ถอดรหัสกลิตช์พร้อมแยก RGB แล้วปิดจอแบบ CRT</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
@import url("https://fonts.googleapis.com/css2?family=Mona+Sans:ital,wdth,wght@0,75..125,200..900;1,75..125,200..900&family=JetBrains+Mono:wght@400;500&display=swap");
* { margin: 0; padding: 0; box-sizing: border-box; }
#root { position: relative; width: 1920px; height: 1080px; overflow: hidden; background: #0D0B1E; }
#c { position: absolute; inset: 0; width: 1920px; height: 1080px; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="1.6" data-width="1920" data-height="1080"><canvas id="c" class="clip" data-start="0" data-duration="1.6" width="1920" height="1080"></canvas></div>
<script>
const c = document.getElementById('c'), x = c.getContext('2d');
const WORD = "READY";                       // the word that decodes
const GLY = "}#!/$1<>%&@";                  // scramble glyphs
const hash = (a, b) => { const s = Math.sin(a * 91.7 + b * 47.3) * 43758.5; return s - Math.floor(s); };
function word(s, dx, col) { x.font = "900 420px 'Mona Sans'"; x.fontStretch = 'condensed'; x.textAlign = 'center'; x.fillStyle = col; x.fillText(s, 945 + dx, 691); }
function draw(t) {
  x.fillStyle = '#7C6CF2'; x.fillRect(0, 0, 1920, 1080);
  const k = Math.min(1, t / 0.34), f = Math.floor(t * 30);
  let s = ''; for (let i = 0; i < WORD.length; i++) s += k > (i + 1) / (WORD.length + 1) ? WORD[i] : GLY[Math.floor(hash(i, f) * GLY.length)];
  const g = t < 0.36 ? 1 - k * 0.7 : 0;
  if (g > 0) { x.globalCompositeOperation = 'screen'; word(s, -12 * g, '#ff2a6a'); word(s, 12 * g, '#2affe0'); x.globalCompositeOperation = 'source-over'; }
  word(s, 0, '#FAF9FF');
  if (g > 0) for (let n = 0; n < 3; n++) { const y = 389 + hash(n, f) * 300, h = 10 + hash(f, n) * 30; x.drawImage(c, 400, y, 1100, h, 400 + (hash(n + 3, f) - .5) * 120 * g, y, 1100, h); }
  if (t > 1.2) {                                     // CRT switch-off
    const e = Math.min(1, (t - 1.2) / 0.08), ex = 1 - Math.pow(2, -10 * e), h = 1080 + (3 - 1080) * ex;
    x.fillStyle = '#000'; x.fillRect(0, 0, 1920, 1080);
    x.shadowColor = '#fff'; x.shadowBlur = 30; x.fillStyle = e > 0.9 ? '#FAF9FF' : '#7C6CF2';
    x.fillRect(290 * ex, 540 - h / 2, 1920 - 580 * ex, h); x.shadowBlur = 0;
  }
}
const tl = gsap.timeline({ paused: true });
tl.to({}, { duration: 1.6 });
tl.eventCallback('onUpdate', () => draw(tl.time()));
draw(0);
window.__timelines = window.__timelines || {};
window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

ตัวอย่างเทคนิค “กำแพงตัวอักษรเคลื่อนไหวจากแถบ” — ที่ 0:09 ในวิดีโอ

ตัวอักษร

กำแพงตัวอักษรเคลื่อนไหวจากแถบ

แถบเต็มความกว้างเจ็ดแถบสลับสองสี แต่ละแถบวนซ้ำคำเดียวใน 4 รูปแบบของฟอนต์ variable (เอียงหนักขยาย, เอียงบางแคบ, ตรงหนัก, ตรงบาง) คั่นด้วยจุดสีเน้น และเลื่อนด้วยความเร็ว 260 px/s แถวคี่วิ่งทิศตรงข้าม รูปแบบเปลี่ยนทุกจังหวะ แถบกลางเป็นสีเน้น คำใหญ่และนิ่ง แถบพุ่งเข้าจากขวาโดยเริ่มจากกลาง (เหลื่อม 25 ms, expo out, motion blur) และออกด้านข้างพร้อมเบลอ

ใช้เมื่อไร ช่วงตัวอักษรที่ดังและแรง เพื่อโชว์ฟอนต์ variable

แสดงโค้ด

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>กำแพงตัวอักษรเคลื่อนไหวจากแถบ</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
@import url("https://fonts.googleapis.com/css2?family=Mona+Sans:ital,wdth,wght@0,75..125,200..900;1,75..125,200..900&family=JetBrains+Mono:wght@400;500&display=swap");
* { margin: 0; padding: 0; box-sizing: border-box; }
#root { position: relative; width: 1920px; height: 1080px; overflow: hidden; background: #0D0B1E; }
#c { position: absolute; inset: 0; width: 1920px; height: 1080px; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1920" data-height="1080"><canvas id="c" class="clip" data-start="0" data-duration="3" width="1920" height="1080"></canvas></div>
<script>
const c = document.getElementById('c'), x = c.getContext('2d');
const WORD = "MOTION FAB";                                   // the repeated word
const ROWS = 7, H = 1080 / ROWS;
const STYLES = [[900, 'expanded', 'italic '], [300, 'condensed', 'italic '], [800, 'expanded', ''], [400, 'condensed', '']];
function row(r, t, x0) {
  const y = r * H, blue = r % 2 === 0;
  if (r === 3) { x.fillStyle = '#FB2D89'; x.fillRect(x0, y, 1920, H); x.font = "800 140px 'Mona Sans'"; x.fontStretch = 'expanded'; x.textAlign = 'center'; x.fillStyle = '#0D0B1E'; x.fillText(WORD, 960 + x0, y + H / 2 + 50); x.textAlign = 'left'; return; }
  x.fillStyle = blue ? '#7C6CF2' : '#FAF9FF'; x.fillRect(x0, y, 1920, H);
  const dir = r % 2 ? -1 : 1; let px = -((t * 260 * dir + r * 333) % 900 + 900) % 900 - 900 + x0, k = r;
  while (px < 1920 + x0) {
    const [w, st, it] = STYLES[(k + Math.floor(t / 0.47)) % 4];
    x.font = `${it}${w} 140px 'Mona Sans'`; x.fontStretch = st; x.fillStyle = blue ? '#FAF9FF' : '#7C6CF2';
    x.fillText(WORD, px, y + H / 2 + 50); px += x.measureText(WORD).width + 28;
    x.fillStyle = '#FB2D89'; x.beginPath(); x.arc(px + 4, y + H / 2, 9, 0, 7); x.fill(); px += 36; k++;
  }
}
function draw(t) {
  x.fillStyle = '#0D0B1E'; x.fillRect(0, 0, 1920, 1080);
  for (let r = 0; r < ROWS; r++) {
    const o = Math.abs(r - 3), a = Math.min(1, Math.max(0, (t - o * 0.025) / 0.16)), inK = 1 - Math.pow(2, -10 * a);
    const b = Math.min(1, Math.max(0, (t - 2.6 - o * 0.02) / 0.12)), outK = b * b * b;
    x.save(); x.filter = `blur(${(1 - inK) * 18 + outK * 26}px)`; row(r, t, (1 - inK) * 1920 + outK * (r % 2 ? -2100 : 2100)); x.restore();
  }
}
const tl = gsap.timeline({ paused: true });
tl.to({}, { duration: 3 });
tl.eventCallback('onUpdate', () => draw(tl.time()));
draw(0);
window.__timelines = window.__timelines || {};
window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

ตัวอย่างเทคนิค “จากคำเป็นอนุภาค: ทรงกลม กาแล็กซี วาร์ป” — ที่ 0:10 ในวิดีโอ

อนุภาค

จากคำเป็นอนุภาค: ทรงกลม กาแล็กซี วาร์ป

จุดประมาณ 3000 จุดที่สุ่มจากพิกเซลของคำสลายจากซ้ายไปขวา (แนวหน้ากวาดใน 0.2 วินาที ขณะที่ส่วนที่เหลือของคำยังคงแข็ง) กระจายเป็นกลุ่มเมฆ (cubic out) แล้วค่อย ๆ รวมเป็นทรงกลม Fibonacci ที่หมุน จากนั้นเป็นกาแล็กซีก้นหอยสองแขนที่เอียง ทั้งหมดด้วยเพอร์สเปคทีฟง่าย ๆ 1400 px แต่ละจุดถูกวาดเป็นเส้นสั้นจากตำแหน่งเมื่อ 30 ms ก่อน การเคลื่อนที่เร็วจึงเกิดเป็นริ้วเส้น จบด้วยวาร์ป: ทุกจุดพุ่งออกตามแนวรัศมีอย่างเร่งความเร็ว

ใช้เมื่อไร เพื่อเปลี่ยนชื่อเรื่องเป็นช่วงคั่นนามธรรม และส่งต่อฉากด้วยวาร์ป

แสดงโค้ด

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>จากคำเป็นอนุภาค: ทรงกลม กาแล็กซี วาร์ป</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
@import url("https://fonts.googleapis.com/css2?family=Mona+Sans:ital,wdth,wght@0,75..125,200..900;1,75..125,200..900&family=JetBrains+Mono:wght@400;500&display=swap");
* { margin: 0; padding: 0; box-sizing: border-box; }
#root { position: relative; width: 1920px; height: 1080px; overflow: hidden; background: #0D0B1E; }
#c { position: absolute; inset: 0; width: 1920px; height: 1080px; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="2.2" data-width="1920" data-height="1080"><canvas id="c" class="clip" data-start="0" data-duration="2.2" width="1920" height="1080"></canvas></div>
<script>
const c = document.getElementById('c'), x = c.getContext('2d');
const N = 3000, WORD = "MOTION FAB";                       // particle count, the word
let P = null;
const rnd = (() => { let s = 7; return () => (s = (s * 16807) % 2147483647) / 2147483647; })();
function build() {
  const o = document.createElement('canvas'); o.width = 1920; o.height = 1080; const g = o.getContext('2d');
  g.font = "900 170px 'Mona Sans'"; g.textAlign = 'center'; g.fillStyle = '#fff'; g.fillText(WORD, 960, 600);
  const d = g.getImageData(0, 0, 1920, 1080).data, pts = [];
  for (let y = 430; y < 640; y += 2) for (let X = 0; X < 1920; X += 2) if (d[(y * 1920 + X) * 4 + 3] > 128) pts.push([X - 960, y - 540]);
  P = []; for (let i = 0; i < N; i++) {
    const p = pts[Math.floor(rnd() * pts.length)], ph = Math.acos(1 - 2 * (i + .5) / N), th = Math.PI * (1 + Math.sqrt(5)) * i;
    const arm = i % 2, rad = 30 + rnd() * 430, an = rad * .0085 + arm * Math.PI + (rnd() - .5) * .7;
    P.push({ t: p, s: (p[0] + 500) / 1000, sph: [Math.sin(ph) * Math.cos(th) * 300, Math.cos(ph) * 300, Math.sin(ph) * Math.sin(th) * 300],
      cl: [(rnd() - .5) * 760, (rnd() - .5) * 640, (rnd() - .5) * 500], gal: [Math.cos(an) * rad, (rnd() - .5) * 40, Math.sin(an) * rad], col: arm === 0 && rad > 180 ? '#FB2D89' : '#FAF9FF' });
  }
}
const cl = (v) => Math.max(0, Math.min(1, v)), io = (k) => (k < .5 ? 4 * k * k * k : 1 - Math.pow(-2 * k + 2, 3) / 2);
const ry = (v, a) => [v[0] * Math.cos(a) + v[2] * Math.sin(a), v[1], -v[0] * Math.sin(a) + v[2] * Math.cos(a)];
const rx = (v, a) => [v[0], v[1] * Math.cos(a) - v[2] * Math.sin(a), v[1] * Math.sin(a) + v[2] * Math.cos(a)];
const lerp3 = (a, b, k) => a.map((v, i) => v + (b[i] - v) * k);
function pos(p, t) {
  const ds = .2 + p.s * .2; if (t < ds) return null;                 // the word dissolves left to right
  let v = lerp3([p.t[0], p.t[1], 0], p.cl, 1 - Math.pow(1 - cl((t - ds) / .3), 3));
  v = lerp3(v, ry(p.sph, (t - .4) * 1.3), io(cl((t - .4) / .2)));     // -> sphere
  v = lerp3(v, rx(ry(p.gal, -(t - 1.2) * 1.6), -1.2), io(cl((t - 1.2) / .2))); // -> galaxy
  return v;
}
function draw(t) {
  if (!P) build();
  x.fillStyle = '#0D0B1E'; x.fillRect(0, 0, 1920, 1080);
  if (t < .45) { x.save(); x.beginPath(); x.rect(460 + 1000 * cl((t - .2) / .2), 0, 1920, 1080); x.clip(); x.font = "900 170px 'Mona Sans'"; x.textAlign = 'center'; x.fillStyle = '#FAF9FF'; x.fillText(WORD, 960, 600); x.restore(); }
  const warp = cl((t - 1.8) / .2);
  for (const p of P) {
    const v = pos(p, t); if (!v) continue; const v0 = pos(p, t - .03) || v;
    const f = 1400 / (1400 + v[2]), f0 = 1400 / (1400 + v0[2]);
    let a = [960 + v[0] * f, 540 + v[1] * f], b = [960 + v0[0] * f0, 540 + v0[1] * f0];
    if (warp > 0) { const s = 1 + warp * warp * 3; b = [960 + (a[0] - 960) * (1 + warp * .2), 540 + (a[1] - 540) * (1 + warp * .2)]; a = [960 + (a[0] - 960) * s * 1.4, 540 + (a[1] - 540) * s * 1.4]; }
    x.strokeStyle = t > 1.2 ? p.col : '#FAF9FF'; x.lineWidth = 2.2 * f; x.globalAlpha = .85;
    x.beginPath(); x.moveTo(b[0], b[1]); x.lineTo(a[0] + .5, a[1] + .5); x.stroke();
  }
  x.globalAlpha = 1;
}
const tl = gsap.timeline({ paused: true });
tl.to({}, { duration: 2.2 });
tl.eventCallback('onUpdate', () => draw(tl.time()));
document.fonts.load("900 170px 'Mona Sans'").then(() => draw(tl.time()));
window.__timelines = window.__timelines || {};
window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

ตัวอย่างเทคนิค “ไวป์แผงสีเข้าสู่สไลด์สไตล์บรรณาธิการ” — ที่ 0:19 ในวิดีโอ

ทรานซิชัน

ไวป์แผงสีเข้าสู่สไลด์สไตล์บรรณาธิการ

แผงสีเดียวกับพื้นหลังของสไลด์ถัดไปปิดเฟรมจากซ้ายใน 83 ms (sine out) สไลด์ใหม่ตัดเข้าอยู่ใต้แผง และพาดหัวสองบรรทัดเลื่อนเข้าจากซ้าย 90 px พร้อมความทึบจาก 0.35 ถึง 1 ใน 0.3 วินาที (cubic out) บรรทัดที่สองตามหลัง 30 ms ส่วนหัว เส้นบรรทัด ตัวนับ และวัตถุ 3D อยู่ในตำแหน่งแล้ว

ใช้เมื่อไร การตัดต่อระหว่างสไลด์ของพอร์ตโฟลิโอหรือเด็คผลิตภัณฑ์ให้เร็วและสะอาด

แสดงโค้ด

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ไวป์แผงสีเข้าสู่สไลด์สไตล์บรรณาธิการ</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
@import url("https://fonts.googleapis.com/css2?family=Mona+Sans:ital,wdth,wght@0,75..125,200..900;1,75..125,200..900&family=JetBrains+Mono:wght@400;500&display=swap");
* { margin: 0; padding: 0; box-sizing: border-box; }
#root { position: relative; width: 1920px; height: 1080px; overflow: hidden; background: #0D0B1E; }
#a, #b, #w { position: absolute; inset: 0; }
#a { background: #0D0B1E; } #b { background: #FE9117; }
h1 { position: absolute; left: 78px; font: 900 205px/0.95 'Mona Sans'; color: #FAF9FF; }
#a h1 { top: 240px; } #a b { color: #FE9117; }
#b h1 { color: #0D0B1E; } .l1 { top: 220px; font-size: 300px !important; } .l2 { top: 500px; font-size: 145px !important; }
.p { position: absolute; inset: 0; background: #FE9117; transform-origin: 0 50%; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="2" data-width="1920" data-height="1080"><div id="a" class="clip" data-start="0" data-duration="0.583"><h1>EDIT<br><b>IN WORDS.</b></h1></div><div id="b" class="clip" data-start="0.583" data-duration="1.417"><h1 class="l1">IDEAS</h1><h1 class="l2">IN MOTION.</h1></div><div id="w" class="clip" data-start="0.5" data-duration="0.083"><div class="p"></div></div></div>
<script>
const tl = gsap.timeline({ paused: true });
tl.fromTo('.p', { scaleX: 0 }, { scaleX: 1, duration: 0.083, ease: 'sine.out' }, 0.5);   // the panel
tl.fromTo('.l1', { x: -90, opacity: 0.35 }, { x: 0, opacity: 1, duration: 0.3, ease: 'power3.out' }, 0.583);
tl.fromTo('.l2', { x: -90, opacity: 0.35 }, { x: 0, opacity: 1, duration: 0.3, ease: 'power3.out' }, 0.613);
tl.to({}, { duration: 0.1 }, 1.9);
window.__timelines = window.__timelines || {};
window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

ตัวอย่างเทคนิค “การเด้งแบบ squash and stretch บนไม้บรรทัด” — ที่ 0:01 ในวิดีโอ

ตัวละคร

การเด้งแบบ squash and stretch บนไม้บรรทัด

ลูกบอลตกลงบนเส้นพื้นที่มีขีดบรรทัดและเด้งตามจังหวะ (กระทบห่างกัน 0.48 วินาที โค้งสูงสุด 310 px) ตามเส้นทางบินที่เป็นเส้นประ ภายใน 60 ms หลังการกระทบแต่ละครั้งมันจะแบนเป็น 1.9 x 0.45 โดยตรึงด้านล่างไว้กับพื้น ขณะลอยอยู่จะยืดตามทิศความเร็ว (สูงสุด +32%) และทุกการกระทบทิ้งวงแหวนรูปวงรีที่ขยายออกไว้บนพื้น

ใช้เมื่อไร ฉากเปิดที่พิสูจน์หลักการแอนิเมชันได้ใน 2 วินาที

แสดงโค้ด

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>การเด้งแบบ squash and stretch บนไม้บรรทัด</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
@import url("https://fonts.googleapis.com/css2?family=Mona+Sans:ital,wdth,wght@0,75..125,200..900;1,75..125,200..900&family=JetBrains+Mono:wght@400;500&display=swap");
* { margin: 0; padding: 0; box-sizing: border-box; }
#root { position: relative; width: 1920px; height: 1080px; overflow: hidden; background: #0D0B1E; }
#c { position: absolute; inset: 0; width: 1920px; height: 1080px; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="2.2" data-width="1920" data-height="1080"><canvas id="c" class="clip" data-start="0" data-duration="2.2" width="1920" height="1080"></canvas></div>
<script>
const c = document.getElementById('c'), x = c.getContext('2d');
const IMP = [0.5, 0.98, 1.46], R = 45;          // impact times, ball radius
function state(t) {
  if (t < IMP[0]) { const u = Math.max(0, (t - 0.05) / 0.45); return [608 + 92 * u, -80 + (655 - R + 80) * u * u, 92, 1500 * u]; }
  for (let k = 0; k < 2; k++) if (t < IMP[k + 1]) { const u = (t - IMP[k]) / 0.48; return [[700, 965][k] + 265 * u, 655 - R - 1240 * u * (1 - u), 550, -2600 * (1 - 2 * u)]; }
  const u = Math.min(1, (t - IMP[2]) / 0.5); return [1220 + 200 * u, 655 - R - 1240 * u * (1 - u) * 0.5, 400, -1300 * (1 - 2 * u)];
}
function draw(t) {
  x.fillStyle = '#0D0B1E'; x.fillRect(0, 0, 1920, 1080);
  x.strokeStyle = '#FAF9FF'; x.lineWidth = 3; x.beginPath(); x.moveTo(360, 700); x.lineTo(1560, 700); x.stroke();
  x.lineWidth = 1.5; for (let X = 360; X <= 1560; X += 40) { x.beginPath(); x.moveTo(X, 707); x.lineTo(X, X % 200 === 160 ? 721 : 714); x.stroke(); }
  x.save(); x.setLineDash([3, 7]); x.globalAlpha = .5; x.beginPath(); for (let tt = .05; tt < 1.9; tt += .01) { const s = state(tt); tt === .05 ? x.moveTo(s[0], s[1] + R) : x.lineTo(s[0], s[1] + R); } x.stroke(); x.restore();
  IMP.forEach((ti) => { if (t < ti) return; const k = Math.min(1, (t - ti) / .3), e = 1 - Math.pow(1 - k, 3), X = state(ti)[0];
    x.save(); x.globalAlpha = (1 - k) * .8; x.beginPath(); x.ellipse(X, 700, 40 + 40 * e, 10 + 10 * e, 0, 0, 7); x.stroke(); x.restore(); });
  const [bx, by, vx, vy] = state(t); let sx = 1, sy = 1, rot = 0, y = by;
  for (const ti of IMP) { const d = Math.abs(t - ti); if (d < .06) { const k = 1 - d / .06; sx = 1 + .9 * k; sy = 1 - .55 * k; } }
  if (sx === 1) { const st = Math.min(.32, Math.hypot(vx, vy) / 6000); rot = Math.atan2(vy, vx); sx = 1 + st; sy = 1 - st * .55; } else y = 655 - R * sy;
  x.save(); x.translate(bx, y); x.rotate(rot); x.fillStyle = '#FB2D89'; x.beginPath(); x.ellipse(0, 0, R * sx, R * sy, 0, 0, 7); x.fill(); x.restore();
}
const tl = gsap.timeline({ paused: true });
tl.to({}, { duration: 2.2 });
tl.eventCallback('onUpdate', () => draw(tl.time()));
draw(0);
window.__timelines = window.__timelines || {};
window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

พรอมต์อื่นๆ

พรีวิวของพรอมต์ “โชว์รีลแอปต่อเนื่อง 15 วินาทีด้วยโมชันกราฟิกล้วน”

โชว์รีลแอปต่อเนื่อง 15 วินาทีด้วยโมชันกราฟิกล้วน

<direction> สร้างโชว์รีลโมชันกราฟิกแนวนอนความยาว 15 วินาทีสำหรับแอปของฉัน ขนาด 1920x1080 ที่ 60 fps ทุกอย่างเป็นกราฟิกที่วาดขึ้น ไม่มีฟุตเทจ สิ่งเดียวที่ฉันให้คือโลโก้ของแอป (ไอคอนแอปรูปสี่เหลี่ยมมุมมน) ไอเดียคือการเคลื่อนไหวต่อเนื่องครั้งเดียวที่แต่ละช่วงส่งวัตถุสุดท้ายของตัวเองให้ช่วงถัดไป จุดกลายเป็นโลโก้ โลโก้กลายเป็นชื่อ ตัวอักษรกลายเป็นจุด จุดกลายเป็นลูกบอลแข่ง ลูกบอลลูกหนึ่งท่วมเฟรม รูปทรงแตกเป็นไทล์ ไทล์กลายเป็นกลุ่มจุด 3D แล้วตามด้วยคำแบบ kinetic และการ์ดปิดท้าย แต่ละช่วงโชว์ทักษะโมชันหนึ่งอย่าง ใช้สีแบบแฟลต รูปทรงเวกเตอร์คมชัด และ HUD ช่องมองภาพกล้องทับทุกอย่าง โดยให้การตัดต่อล็อกกับแทร็ก 128 BPM หลีกเลี่ยงฟุตเทจ สีไล่เฉด พื้นผิว เสียงพากย์ และช่วงใดก็ตามที่เริ่มจากความว่างเปล่าแทนที่จะเติบโตจากช่วงก่อนหน้า </direction> <structure> 1. 0–1.9 วิ สีเกือบดำ: จุดสีชมพูอยู่ในวงแหวนสีเทาบาง และวงแหวนเปิดออกด้วย expo.out วงแหวนที่สองคลี่ออกเป็นวงกลมใหญ่จาง ๆ (0.45 วิ, expo.out) ที่ 0.5 วิ โลโก้ของฉันโตออกจากจุด เลเยอร์ของมันเด้งขึ้นทีละชั้นด้วย back.out มันลงตัวใหญ่ขึ้นที่ 0.92 วิพร้อมหมุนเบา ๆ วงแหวนสีชมพูบางของข้อความ mono ที่วนรอบ ("APP NAME · IDEAS IN MOTION · APPNAME.APP ·" แทนที่ด้วยของคุณ) ปรากฏรอบมันและหมุนช้า ๆ ที่ 1.7 วิ เครื่องหมายหดลงพร้อมเบลอเล็กน้อยกลับเป็นจุดสีอ่อนเล็ก ๆ 2. 1.9–3.5 วิ: ที่ดรอปตอน 1.93 วิ จานสองใบระเบิดออกจากจุด สีอ่อนก่อนและสีชมพูตามหลัง 30 มิลลิวินาที (expo.out, 0.3 วิ) ทำให้วงแหวนสีอ่อนบางขี่อยู่บนขอบสีชมพู ชื่อแอปของฉันด้วยฟอนต์ grotesque กว้างผุดขึ้นทีละตัวอักษรจากเส้นฐาน: แต่ละตัวถูกตัดอยู่ในกล่องของตัวเอง เว้น 30 มิลลิวินาที และ 0.26 วิ expo.out ชื่อจะเต็มความกว้าง 1640 px เท่าเดิมเสมอ เส้นสีเข้มบางถูกวาดออกจากกึ่งกลางเหนือชื่อ โดยมี "01" พิมพ์เข้ามาทางซ้ายและที่อยู่เว็บของฉันทางขวา ตั้งแต่ 2.55 วิ คลื่นความกว้างวิ่งผ่านตัวอักษร: แต่ละตัวบีบจากความกว้าง 150% เหลือประมาณ 55% แล้วกลับภายใน 0.6 วิ ตามหลังตัวก่อนหน้า 0.1 วิ คำถูกปรับให้เต็ม 1640 px ทุกเฟรม ตัวอักษรแคบจึงสูงขึ้น ที่ 2.84 วิ สโลแกนตัวเอียง serif สีอ่อน ("ideas in motion") ผุดขึ้นทีละคำใต้ชื่อ ที่ 3.3 วิ ตัวอักษรยุบเป็นจุดสีเข้มและสโลแกนหล่นหายไป 3. 3.5–5.6 วิ: การกวาดสีอ่อนแนวทแยงมาจากด้านล่างขวา (0.16 วิ) จุดสีเข้มหกจุดพุ่งเป็นเส้นโค้งไปยังจุดเริ่มของหกแถว (power2.inOut, เหลื่อมเวลา) และรับสีของแถว ชื่อเรื่องตัวเอียง serif พิมพ์เข้ามาจากซ้าย ("Chat instead of a timeline.") พร้อมโน้ต mono ทางขวา ("NO KEYFRAMES · LIVE PREVIEW") และป้ายแทร็ก "IDEA" กับ "MP4" ที่ปลายทั้งสองด้าน - แต่ละแถวมีเลขสีชมพู ชื่อ mono ("animated type", "shapes", "transitions", "3D effects", "sound", "live preview") ไอคอนเส้นโค้งจิ๋วที่วาดตัวเอง และเส้นแทร็กที่วาดจากซ้ายไปขวา - ที่ 4.215 วิ ลูกบอลหกลูก (สีเข้ม ม่วง ชมพู วนซ้ำ) แข่งกันวิ่ง 1040 px ในเวลา 0.94 วินาทีพอดี แต่ละลูกมี ease ของตัวเอง: linear, power2.inOut, expo.out, back.out(1.7), elastic.out(1, 0.3) และ bounce.out - ขีดเหนือแต่ละแทร็กบอกว่าลูกบอลอยู่ตรงไหนทุก 1/16 ของการวิ่ง วงแหวนผีที่จางลงสามวงตามหลังแต่ละลูก ลูกบอลยืดตามความเร็ว จุดหนึ่งวิ่งไปบนไอคอนเส้นโค้งแต่ละอันอย่างพร้อมกัน และแต่ละลูกได้ฮาโลเส้นขอบเมื่อมาถึง - ที่ 5.3 วิ แถวต่าง ๆ จางหาย ลูกบอลบินเข้าสู่กลางภาพและรวมกัน แล้วลูกสีม่วงพองจนเต็มเฟรม 4. 5.6–7.5 วิ สีม่วง: วงกลมสีอ่อนเด้งขึ้นจากจุด (elastic.out, 0.45 วิ) จุดดาวเทียมสิบสองจุดพุ่งออกไปยังวงโคจร (expo.out, ห่างกัน 12 มิลลิวินาที) - ด้านหลังมีเส้นไกด์กากบาทบาง วงโคจรประจุดพร้อมขีดบอกระยะ และป้าย "270°" กับ "90°" - ค่าอ่าน mono อยู่ด้านข้าง: "SHAPES NO KEYFRAMES" ทางซ้าย และคำขอแก้ไขในเครื่องหมายคำพูดทางขวา ("“BIGGER” “SLOWER”", "“ANOTHER COLOUR”") - วงแหวนระลอกสีชมพูเต้นรอบวงกลม - จากนั้นรูปทรงเปลี่ยนรูป: วงกลม → สามเหลี่ยม → ดาว → สี่เหลี่ยมจัตุรัส แต่ละการเปลี่ยนใช้ 0.26–0.3 วิ ด้วย back.out(2.2) พร้อมหมุน 120° และเส้นขอบเอคโคสีชมพูตามรูปทรงเฉพาะตอนที่มันหมุน - ดาวเทียมเปลี่ยนรูปช้ากว่าหนึ่งจังหวะ ทีละจุดต่อเนื่องกัน และหายไปที่ 7.22 วิ มันลงตัวเป็นสี่เหลี่ยมจัตุรัสตั้งตรงขนาด 360 px 5. 7.5–9.75 วิ สีเกือบดำ: สี่เหลี่ยมแยกเป็นไทล์ขนาด 120 px เก้าชิ้น เขาวงกต truchet โตทีละวงจนเต็มเฟรม (back.out, ประมาณ 30 มิลลิวินาทีต่อวง) แต่ละไทล์มีส่วนโค้งหนึ่งในสี่วงกลมสองอันที่มุมตรงข้ามกัน วาดเป็นเส้นสีอ่อนหนา 20 px คลื่นสีชมพูวิ่งผ่าน: ก่อนอื่นสองแถบกวาดจากซ้ายไปขวา แล้วเป็นวงแหวนที่หุบเข้าหากลางภาพ ไทล์ภายในคลื่นหมุน 90 หรือ 180 องศา หดเหลือ 80% และกลายเป็นสีชมพู ทำให้เส้นแตกเป็นขีดสั้น แล้วกลับมาเมื่อแถบผ่านไป ป้าย mono เล็ก ๆ พิมพ์เข้ามาที่ด้านล่าง ("SHAPES · TRANSITIONS · NO KEYFRAMES") ตั้งแต่ 9.45 วิ ไทล์ยุบจากกลางออกสู่ด้านนอก 6. 9.5–11.25 วิ: ตารางจุด 24 x 24 ปรากฏตรงที่ไทล์เคยอยู่ มองจากด้านบน มันเอียงเป็นระนาบมุมมองและพับเป็นทรงกลม แจกัน ก้อนบี้ และทอรัส ขณะหมุนรอบแกนตั้ง ระหว่างรูปทรงมันเคลื่อนด้วย power2.inOut มีเส้นจาง ๆ ระหว่างจุดข้างเคียง ประมาณหนึ่งในเก้าจุดเป็นสีชมพู และจุดจะหม่นลงตามความลึก ป้าย mono อยู่ด้านล่าง ("3D EFFECTS · LIVE PREVIEW · MP4 EXPORT") มันซูมทะลุกล้องและจางหายที่ 11 วิ 7. 11.25–13.0 วิ คำแบบ kinetic: หนึ่งคำทุก 0.23 วิ แต่ละคำบนพื้นหลังแฟลตของตัวเอง และแต่ละคำเต็มความกว้างด้วยความกว้างที่ต่างกันของฟอนต์เดียวกัน แทนที่หกคำด้วยวลีของคุณเอง - "IDEA": สีเข้มบนชมพู เลื่อนเข้าจากซ้าย สเกล 1.3 ถึง 1 เบลอชัดขึ้นใน 0.14 วิ - "IN.": สีอ่อนบนสีเกือบดำพร้อมจุดปิดสีชมพู เข้าจากขวาพร้อมเบลอ และมีโน้ต mono เล็ก ๆ ที่บนซ้าย ("EDIT IN WORDS ↗") - "VIDEO": แคบมากสีม่วงบนหน้าสีอ่อน ตัวอักษรผุดขึ้นจากด้านล่างห่างกัน 25 มิลลิวินาที - "OUT.": สีอ่อนบนม่วง เข้าจากซ้ายพร้อมเบลอ พร้อมโน้ตที่บนขวา ("↘ MP4 EXPORT") - "NO": สีเข้มบนเหลือง ตัวอักษรหล่นลงมาเป็นมุมด้วย back.out จากนั้นสำเนาตัวอักษรแบบเส้นขอบของคำเติมเต็มแถวด้านบนและด้านล่างและเลื่อนสลับทิศทางกัน ขณะที่แถวหลักลอยไปทางซ้าย - "KEYFRAMES.": สีอ่อนบนสีเกือบดำ เลื่อนไปทางซ้ายด้วยความเร็วคงที่พร้อมเส้นทแยงบาง ๆ แล้วออกไปเร็วพร้อมเบลอ 8. 13.0–15 วิ การ์ดปิดท้าย: สีชมพูท่วมเข้ามาจากขวาและวงแหวนสีอ่อนคลี่ออกจากกลางภาพ (0.42 วิ) โลโก้ของฉันหมุนเข้ามาที่กลางภาพ (back.out) พร้อมคอนเฟตติเล็ก ๆ เป็นจุด วงแหวน และสามเหลี่ยมสีเข้ม สีอ่อน และม่วง แล้วเลื่อนไปทางซ้ายของล็อกอัป ชื่อแอปของฉันหล่นลงมาทีละตัวอักษรข้าง ๆ จากเบลอเป็นคมชัด ตัวละ 0.22 วิ สโลแกนตัวเอียง serif ผุดขึ้นใต้ชื่อ ("your AI motion designer") เส้นถูกวาดออก และบรรทัด mono พิมพ์เข้ามาใต้เส้น: "PICK A TEMPLATE · DESCRIBE YOUR IDEA · MP4 EXPORT" จุดบันทึกเล็ก ๆ แล้วที่อยู่เว็บของฉันทางขวา ค้างภาพไว้ในวินาทีสุดท้าย </structure> <composition> จานสี ทั้งหมดเป็นสีแฟลต: - สีเกือบดำเข้มลึก #0d0b1e - ชมพูสด #fb2d89 (สีเน้นหลัก) - หน้าสีอ่อน #faf9ff - ม่วงนุ่ม #7c6cf2 - เหลืองอุ่น #ffd23f ใช้เฉพาะการตัดแบบ kinetic หนึ่งครั้ง ฟอนต์: - ฟอนต์ grotesque กว้างแบบ variable ที่มีแกนความกว้าง (Anybody, น้ำหนัก 900, ความกว้าง 50–150%) สำหรับชื่อและคำแบบ kinetic - ฟอนต์ serif ตัวเอียงแนวบรรณาธิการแบบแคบ (Instrument Serif Italic) สำหรับชื่อเรื่องและสโลแกน - ฟอนต์ mono (JetBrains Mono) สำหรับป้ายอินเทอร์เฟซ 14 px ระยะห่างตัวอักษร 0.16em HUD ช่องมองภาพกล้องทับตลอดทั้งวิดีโอ: - วงเล็บมุมบางหนา 2 px ห่างจากแต่ละมุม 44 px - บนซ้าย: ชื่อแอปของฉันด้วยตัวพิมพ์ใหญ่ mono ตัวหนา ตามด้วยสโลแกนที่หม่นกว่า ("APP NAME IDEAS IN MOTION") - บนขวา: ป้ายของช่วงปัจจุบัน ("01 — APP NAME", "02 — NO KEYFRAMES", "03 — SHAPES", "04 — EDIT IN WORDS", "05 — 3D EFFECTS", "06 — KINETIC TYPE", "07 — TRY IT FREE") - ล่างซ้าย: ไทม์โค้ดที่วิ่งพร้อมเฟรม ("00:00:03:09") และสโลแกนสั้น ๆ ("LIVE PREVIEW") - ล่างขวา: สโลแกนอีกอัน ("NO KEYFRAMES") สี่เหลี่ยมเล็กสี่อันที่สว่างขึ้นทีละอันตามจังหวะ และ "MP4" - ตามขอบล่าง: เส้นความคืบหน้าหนา 2 px ที่ยาวขึ้นตามเวลา HUD สลับระหว่างหมึกสีเข้มและสีอ่อนทุกครั้งที่ตัดต่อ เพื่อให้อ่านได้บนพื้นหลังทุกแบบ ข้อความทั้งหมดบนหน้าจอเป็นตัวอย่างให้แทนที่ด้วยของคุณเอง </composition> <techniques> - ทุกช่วงจบด้วยวัตถุที่ช่วงถัดไปเติบโตจากมัน: จุดเป็นโลโก้ โลโก้กลับเป็นจุด จานเป็นชื่อ ตัวอักษรเป็นจุด จุดเป็นลูกบอล ลูกบอลเป็นการท่วมสีม่วง สี่เหลี่ยมเป็นไทล์ ไทล์เป็นตารางจุด กลุ่มจุดซูมทะลุกล้องเข้าสู่คำแบบ kinetic - ป้ายช่วงใหม่ของ HUD แต่ละอันพิมพ์เข้ามาในเวลา 0.3 วิ โดยมีอักขระสุ่มวิ่งนำหน้าเคอร์เซอร์ บรรทัด mono อื่น ๆ ก็พิมพ์เข้ามาเช่นกัน - ตัวอักษรความกว้างแปรผัน: ทำแอนิเมชันแกนความกว้างของแต่ละตัวอักษร และปรับทั้งคำให้เต็มความกว้างคงที่ทุกเฟรม - การเผยตัวอักษรถูกตัดในกล่องของแต่ละตัวอักษร - ใช้โมชันเบลอเบา ๆ เฉพาะการเคลื่อนไหวเร็ว และขอบสีม่วงจาง ๆ บนการกวาดแบบไอริสใหญ่ - เส้นขอบเอคโค วงแหวนผี และฮาโลเป็นเส้นบางสีชมพูหรือสีเดียวกับวัตถุที่จางเร็ว </techniques> <music> ซินธ์ป็อปอิเล็กทรอนิกส์มีพลังที่ 128 BPM จังหวะแรกที่ 0.06 วิ ยาว 15 วินาทีพอดี: - คอร์ดแพดนุ่ม ๆ คล้ายระฆังในห้องแรก - หลังดรอปที่ 1.93 วิ มีกลองเตะแบบ four-on-the-floor พร้อมเสียงตบมือที่จังหวะ 2 และ 4 ไฮแฮตนอกจังหวะ เบสซินธ์หนักแน่น และคอร์ดสั้น ๆ รองรับแต่ละช่วง - เบรกตั้งแต่ประมาณ 10 วิ ที่ไต่ระดับเข้าสู่ช่วง kinetic - คอร์ดแพดปิดท้ายที่ก้องกังวานบนการ์ดปิดท้าย แต่ละช่วงเปลี่ยนตรงเส้นห้อง ชื่อลงที่ดรอปตอน 1.93 วิ และการตัดคำแบบ kinetic ตรงกับโน้ตเขบ็จหนึ่งชั้น </music> <sound> ไม่มีเสียงพูด เสียงเน้นทับบนเพลง: - เสียง riser ตลอดห้องแรก - เสียง boom ที่ดรอปตอน 1.93 วิ - เสียง riser จากประมาณ 10 วิ ไปจนถึงเสียง punch ที่ 11.25 วิ - เสียงกลองเตะและเสียง whoosh สั้น ๆ ทุกครั้งที่ตัดคำแบบ kinetic - เสียงฉาบ crash ที่ 12.71 วิ - เสียง boom พร้อมคอร์ดแพดก้องกังวานตอนการ์ดปิดท้ายลงมา - เสียง blip เล็ก ๆ ที่ 14.1 วิ เพลงเป็นตัวนำแทร็ก และเสียงเน้นดังชัดเจนอยู่เหนือเพลง </sound> <references> โชว์รีลของนักออกแบบโมชันผสมกับวิดีโอเปิดตัวผลิตภัณฑ์เทค รวมโอเวอร์เลย์ช่องมองภาพกล้อง ตัวอักษร kinetic แนวสวิสที่โดดเด่น การสาธิตเส้นโค้ง easing ลวดลายไทล์ truchet เชิงสร้างสรรค์ และกลุ่มจุด 3D ที่หมุนอยู่ </references>

พรีวิวของพรอมต์ “โปรโมตแลนดิ้งเพจด้วยทรานซิชันที่เปลี่ยนผ่านวัตถุ”

โปรโมตแลนดิ้งเพจด้วยทรานซิชันที่เปลี่ยนผ่านวัตถุ

<direction> ทำวิดีโอโปรโมตมอชันกราฟิกแนวนอน 15 วินาที ขนาด 1920x1080 สำหรับ [your brand] โดยสร้างให้เหมือนแลนดิ้งเพจที่มีชีวิตขึ้นมา ตัดตามแทร็กอิเล็กทรอนิกส์ 128 BPM โดยไม่มีเสียงบรรยาย แนวคิดคือไม่มีการตัดต่อธรรมดาเลย: ทุกฉากส่งต่อไปยังฉากถัดไปผ่านวัตถุ (จุด ตัวเลือกจากรีล โทรศัพท์ หรือไทล์ผู้ชนะ) รักษาลุคยูไอผลิตภัณฑ์ที่สะอาดสว่าง: พื้นหลังสีอ่อน ปุ่มแคปซูลมุมโค้ง การ์ด โทรศัพท์ แดชบอร์ด และกำแพงวิดีโอ โดยป้ายทั้งหมดเป็นข้อความสีเข้มบนแผ่นสีขาว และใช้สีแบรนด์ของฉันตามบทบาท หลีกเลี่ยงการตัดแบบแข็ง ครอสเฟด เสียงพูด ข้อความสีขาวบนพื้นหลังสว่างหรือลายทาง และป้ายที่ทับวงแหวนหรือรูปทรงข้างเคียง </direction> <structure> ห้าจังหวะที่ยาวใกล้เคียงกัน ประมาณ 3 วินาทีต่อจังหวะ และทุกการส่งต่อตกบนจังหวะบีต 1. เปิดเรื่อง: จุดเดียวปรากฏตรงกลางและขยายเป็นแคปซูลแนวนอนที่มีแถววงกลม: ภาพบุคคลเล็กๆ และไอคอนอย่าง "Aa" รูปทรงง่ายๆ และลูกบาศก์ ไอคอนแต่ละอันมองเห็นครบ ไม่ถูกวงกลมข้างเคียงบัง กล้องถอยออกเผยพาดหัวสองบรรทัด จัดกึ่งกลางทั้งสองบรรทัด บรรทัดแรกประมาณ "No … keyframes." (เปลี่ยนเป็นของคุณ) คำสุดท้ายของพาดหัวหมุนผ่านตัวเลือกต่างๆ ต่อเนื่องเหมือนรีลสล็อต 2. ซูมดำดิ่งเข้าไปในรีลหมุนของภาพครีเอเตอร์และการ์ด รีลช้าลงและหยุดที่ตัวเลือกหนึ่ง ซึ่งถูกไฮไลต์ 3. ตัวเลือกกลายเป็นโทรศัพท์ และการ์ดฟีเจอร์คลี่ออกเป็นพัดรอบๆ การ์ดหนึ่งใบเขียนว่า "Edit in words" พร้อมตัวเลข "03" ขนาดใหญ่ และแท็กเล็ก "Live preview" วางไว้ข้างตัวเลขทันที (เปลี่ยนเป็นฟีเจอร์ของคุณ) คำบรรยายบนการ์ดอยู่บนแผ่นสีขาว 4. วิปแพนนำไปสู่แดชบอร์ดของไทล์วิดีโอที่มีคำบรรยายบนแผ่นสีขาว ระบบให้คะแนนและเลือกวิดีโอผู้ชนะ ซึ่งถูกไฮไลต์ 5. ไทล์ผู้ชนะเปิดออกเป็นกำแพงวิดีโอเอียงที่มีคำบรรยายบนแผ่นสีขาว จากนั้นกำแพงพับเป็นโลโก้ของฉันสำหรับการ์ดปิดท้าย โดยมี "[your website]" อยู่ข้างโลโก้บนแผ่นสีขาว </structure> <composition> การจัดเฟรมกึ่งกลางและสมมาตรสำหรับพาดหัวและการ์ดปิดท้ายโลโก้ องค์ประกอบยูไอจัดวางเหมือนแลนดิ้งเพจจริง: แถวแคปซูล การ์ดที่มีตัวเลขใหญ่และแท็กเล็ก โมเดลโทรศัพท์ ตารางแดชบอร์ด และกำแพงเอียงแบบเพอร์สเปกทีฟ ใช้สีแบรนด์ของฉันตามบทบาท: โทนพื้นหลัง (สีอ่อน มีบางส่วนเป็นลายทาง) สีเน้นหนึ่งสีสำหรับไฮไลต์ การเลือก และวงแหวน และสีข้อความเข้ม คำบรรยายทุกอันบนการ์ด ไทล์ และกำแพงเป็นข้อความสีเข้มบนแผ่นสีขาวมุมโค้ง เพื่อให้อ่านได้บนทุกพื้นหลัง ใช้ฟอนต์ซานส์เซอริฟที่สะอาดตระกูลเดียว: พาดหัวตัวหนา ป้ายน้ำหนักปกติ และป้ายปุ่มตัวหนา เว้นระยะขอบให้กว้างขวางเพื่อไม่ให้ข้อความแตะวงแหวนหรือขอบ </composition> <techniques> ทุกทรานซิชันคือวัตถุที่เปลี่ยนเป็นฉากถัดไป ไม่ใช่การตัด จุดขยายเป็นแคปซูลด้วย ease-out นุ่มนวล และวงกลมเด้งเข้ามาแบบเหลื่อมเวลาเล็กน้อย การถอยกล้องคือการย่อสเกลอย่างลื่นไหลเพื่อเผยพาดหัว คำที่หมุนคือสล็อตโรลแนวตั้งที่วนผ่านคำต่างๆ ซูมผ่านแคปซูลเข้าไปในรีล รีลหมุนเร็วแล้วชะลอด้วย ease-out ยาวเพื่อหยุดตรงตัวเลือกอย่างแม่นยำ ตัวเลือกปรับสเกลและเปลี่ยนรูปเป็นโทรศัพท์ และการ์ดคลี่ออกรอบๆ ด้วยการหมุนและเลื่อนแบบเหลื่อมเวลา วิปแพนคือการเคลื่อนที่แนวนอนเร็วพร้อมโมชันเบลอและ ease แบบ in-out คมชัด การเลือกในแดชบอร์ดคือวงแหวนไฮไลต์และขยายสเกลที่ผู้ชนะ ผู้ชนะขยายเป็นกำแพง 3D เอียง ซึ่งพับและยุบเป็นโลโก้พร้อมการนิ่งสุดท้าย การเคลื่อนไหวและจุดลงสำคัญทั้งหมดตรงกับกริดบีต </techniques> <music> สร้างแทร็กอิเล็กทรอนิกส์สดใสต้นฉบับที่ 128 BPM ยาว 15 วินาทีพอดี โดยมีโครงเรื่องชัดเจน: เริ่มเบาๆ ไต่ระดับผ่านฉากรีลและโทรศัพท์ ดรอปรอบๆ วิปแพน และจบอย่างสะอาดที่โลโก้ วางบนกริดบีตของการตัดต่อ พร้อมเสียงฮิตที่แต่งซ้อนสำหรับทุกการส่งต่อ ไรเซอร์เข้าสู่ดรอป และฮิตสุดท้ายตอนกำแพงพับเป็นโลโก้ มาสเตอร์ที่ประมาณ -14 LUFS โดยมีทรูพีคต่ำกว่า -1 dBTP </music> <sound> ไม่มีเสียงบรรยาย เพิ่มเสียงวูชตอนซูมทะลุและวิปแพน เสียงติ๊กแล้วหยุดสั้นๆ ตอนรีลหยุด และเสียงกระแทกนุ่มๆ ที่โลโก้ ให้ทั้งหมดเบากว่าเพลงและตรงจังหวะ </sound> <references> แลนดิ้งเพจ SaaS ที่ทำแอนิเมชันเป็นวิดีโอโปรโมตผลิตภัณฑ์: การ์ดยูไอ โมเดลโทรศัพท์ แดชบอร์ดวิเคราะห์ข้อมูล และกำแพงวิดีโอ ในสไตล์วิดีโอเปิดตัวแอปสมัยใหม่ที่มีทรานซิชันจากวัตถุสู่วัตถุอย่างลื่นไหล </references>

พรีวิวของพรอมต์ “วิดีโอเปิดตัวแอปแบบ Kinetic พร้อมม็อกอัปอินเทอร์เฟซเคลื่อนไหว”

วิดีโอเปิดตัวแอปแบบ Kinetic พร้อมม็อกอัปอินเทอร์เฟซเคลื่อนไหว

<direction> สร้างวิดีโอเปิดตัวผลิตภัณฑ์แบบ Kinetic แนวนอน 1920x1080 ความยาว 42 วินาทีสำหรับ [your app] แสดงให้เห็นว่าผู้ก่อตั้งสร้างวิดีโอเปิดตัวสตาร์ทอัปของตัวเองได้ด้วยการแชตในแอปเท่านั้น สร้างอินเทอร์เฟซของแอปฉันขึ้นใหม่จากภาพหน้าจอของฉันเป็นม็อกอัปเคลื่อนไหวที่สะอาดตา ทำจากรูปทรงและข้อความ ให้ใกล้เคียงของจริง ในวิดีโอนี้เป็นแอปสีกรมท่าม่วงเข้มที่มี Live preview ทางซ้าย แท็บ Chat / Files / Panels ทางขวา และปุ่มเน้นสีชมพู ห้ามแสดงภาพหน้าจอเป็นภาพนิ่งเด็ดขาด: ทุกองค์ประกอบต้องเคลื่อนไหว คงอินเทอร์เฟซต่อเนื่องเดียวโดยไม่มีการตัดฉับ กล้องดันเข้า แพน และถอยออกระหว่างแผงต่าง ๆ ขณะที่เคอร์เซอร์เคลื่อนที่และคลิก ยึดตามตารางจังหวะ 120 BPM (หนึ่งบีต = 0.5 วินาที) และทำให้มีบางอย่างเกิดขึ้นในทุกบีต คำ Kinetic ขนาดยักษ์กระแทกทับ UI ระหว่างขั้นตอน สตาร์ทอัปของผู้ก่อตั้งเป็นแอปสมมติ เช่น "Pulse — standups your team actually reads" (เปลี่ยนเป็นของคุณ) หลีกเลี่ยงการตัดฉับ ภาพหน้าจอนิ่ง สิ่งใดที่ถูกตัดที่ขอบเฟรม และข้อความหรือแถบไฮไลต์ที่ล้ำเข้าไปในคอลัมน์ข้างเคียง </direction> <structure> 1) ฮุค 0–3 วิ: "YOUR LAUNCH VIDEO." แล้วต่อด้วย "IN ONE CHAT." ด้วยตัวอักษรขนาดยักษ์ ตัดทีละคำตามบีต "CHAT." แปลงร่างเป็นแท็บ Chat และกล้องถอยออกเห็นหน้าต่างแอปทั้งหมด 2) แหล่งอ้างอิง 3–8 วิ: ลิงก์ "pulse-demo.app" ถูกวางลงในแชต พิตช์เด็ค PDF และโลโก้บินเข้ามาเป็นการ์ดไฟล์แนบและล็อกเข้าที่ คำใหญ่ "DROP" 3) พรอมต์ 8–13 วิ: ผู้ก่อตั้งพิมพ์ "Make a 30-second launch video for Pulse, kinetic style, our colours" ทีละตัวอักษร จากนั้นเคอร์เซอร์แตะส่ง คำใหญ่ "ASK" 4) แผน 13–18 วิ: เอเจนต์ตอบด้วยแผนห้าขั้นตอนเป็นเช็กลิสต์ ขั้นตอนปรากฏและถูกติ๊กทีละข้อ และกล้องถอยออกเล็กน้อยทุกครั้งที่มีบรรทัดใหม่เพื่อให้เฟรมไม่รู้สึกว่าง คำใหญ่ "PLAN" 5) สเก็ตช์และ Go ประมาณ 18–21 วิ: สเก็ตช์โครงลวดสีเทาของโปรโมเติมเต็ม Live preview อย่างรวดเร็ว โดยเห็นป้าย "Live preview" และแถบเล่นอยู่ในเฟรม ผู้ก่อตั้งคลิก Go และพื้นหลังสีชมพูขยายออกจากปุ่มที่ถูกกดและท่วมหน้าจอหลัง "GO!" ขนาดยักษ์ 6) Live ประมาณ 21–31 วิ: บรรทัดสถานะปรากฏในแชต ("Picking fonts", "Animating the title", "Writing a soundtrack") ขณะที่สเก็ตช์เปลี่ยนเป็นโปรโมที่เสร็จสมบูรณ์ กล้องดันเข้าจนโปรโมเต็มเฟรม ราววินาทีที่ 27 พาดหัวโปรโม "Standups your team actually reads." เลื่อนเข้ามา และแถบไฮไลต์สีเขียวมะนาววาดใต้ "actually reads." ข้าง ๆ มีคอลัมน์สถิติพร้อม "92%" และ "updates read" คำใหญ่ "LIVE" 7) ส่งออก ประมาณ 31–37 วิ: กล้องถอยกลับมาที่แอป ปุ่ม Export และแท็บมองเห็นครบถ้วนขณะที่การส่งออกทำงานและเสร็จสิ้น คำใหญ่ "DONE" 8) เอนด์การ์ด ประมาณ 37–42 วิ: โลโก้ของ [your app] และ "Live on [launch site] today" (เปลี่ยนเป็นของคุณ) ลงตัวที่บีตสุดท้ายและค้างไว้จนจบ </structure> <composition> โทนสี: UI สีกรมท่าม่วงเข้ม ปุ่มเน้นสีชมพูมาเจนตาและพื้นสีชมพูที่ท่วมจอ ไล่สีชมพูเป็นส้มบนโลโก้ และสีเขียวมะนาวเป็นสีไฮไลต์ภายในโปรโมตัวอย่าง คำ Kinetic ขนาดยักษ์ ตัวหนา ตัวพิมพ์ใหญ่ ไม่มีเชิง ใช้ฟอนต์ของแบรนด์ และกว้างเกือบเต็มความกว้างเฟรม ย่อคำที่ยาวลงเล็กน้อยดีกว่าปล่อยให้ถูกตัด เว้นขอบปลอดภัยทุกที่ ในช็อตกว้างหน้าต่างแอปทั้งหมดอยู่ในเฟรม ในแชตช่องป้อนข้อความมองเห็นครบ ในฉากส่งออกปุ่ม Export และแท็บอยู่ในเฟรม ในโปรโมพาดหัวและแถบมะนาวอยู่ในคอลัมน์ของตัวเองโดยมีพื้นที่เหลือ แถบกว้างเท่าคำของมันพอดีและไม่ทับคอลัมน์ "92%" เด็ดขาด </composition> <techniques> กล้องเสมือนต่อเนื่องที่ดันเข้า แพน และถอยออกอย่างนุ่มนวลแบบ ease-in-out ระหว่างแผง โดยไม่มีการตัด เคอร์เซอร์ไหลไปยังเป้าหมายและคลิกพร้อมการย่อขนาดเล็กน้อยตอนกด คำฮุคตัดเข้าทีละคำต่อบีต การ์ดไฟล์แนบบินเข้ามาและล็อกเข้าที่พร้อมการเลยเล็กน้อย ข้อความแชตพิมพ์ทีละตัวอักษร รายการเช็กลิสต์ปรากฏและถูกติ๊กในบีตต่อเนื่องกัน สเก็ตช์สีเทาเติมเต็มอย่างรวดเร็วแล้วแปลงทีละองค์ประกอบเป็นโปรโมที่เสร็จสมบูรณ์ พื้นสีชมพูใต้ "GO!" ขยายออกเป็นวงกลมจากปุ่มที่ถูกคลิก คำใหญ่กระแทกเข้าด้วยแรงกระแทกแบบย่อขนาดอย่างเร็วทับ UI และออกไปอย่างรวดเร็วในบีตถัดไป ทุกบีตมีเหตุการณ์ที่มองเห็นได้: คำ คลิก การ์ด เครื่องหมายติ๊ก บรรทัดสถานะ หรือการเคลื่อนกล้อง </techniques> <music> เพลงอิเล็กทรอนิกส์สุดมันที่ 120 BPM โดยทุกการตัด การกระแทกของคำ และเหตุการณ์ใน UI ล็อกกับจังหวะ ไต่ระดับตลอดขั้นตอนการเตรียม พุ่งขึ้นสู่ "GO!" ขับเคลื่อนผ่านการสร้างสด และจบด้วยเสียงกระแทกสุดท้ายบนเอนด์การ์ด </music> <sound> เสียงคีย์บอร์ดที่ตรงกับทุกตัวอักษรที่พิมพ์พอดี เสียงคลิกเมาส์ทุกครั้งที่เคอร์เซอร์แตะ เสียง whoosh ตอนกล้องเคลื่อนและตอนการ์ดไฟล์แนบบินเข้ามา และเสียงสแนปเมื่อการ์ดลงที่ เสียงติ๊กเบา ๆ สำหรับขั้นตอนเช็กลิสต์และบรรทัดสถานะ เสียงกระแทกหนักแน่นใต้ทุกคำใหญ่ เสียง riser ขึ้นสู่ "GO!" และเสียงกระแทกสุดท้ายบนเอนด์การ์ด ให้เสียงเพลงอยู่ต่ำกว่าเอฟเฟกต์เพื่อให้เสียงคลิกและเสียงกระแทกได้ยินชัด </sound> <references> เทรลเลอร์เปิดตัวแอปแบบ Kinetic Typography ที่สร้างอินเทอร์เฟซ SaaS ขึ้นใหม่เป็นม็อกอัปเคลื่อนไหวคมชัดด้วยการเคลื่อนกล้องต่อเนื่องเดียว ในสไตล์โปรโมวันเปิดตัวผลิตภัณฑ์ </references>

ใช้แล้ว 2 ครั้ง

คุกกี้ที่จำเป็นจะจดจำการตั้งค่าเว็บไซต์ของคุณ หากคุณอนุญาต Google Analytics จะช่วยให้เราเข้าใจว่าผู้คนใช้ Motion Fab อย่างไร คุณเปลี่ยนตัวเลือกได้ที่ส่วนท้ายของหน้า

ตัวเลือกด้านความเป็นส่วนตัวของคุณตามกฎหมายความเป็นส่วนตัวของรัฐในสหรัฐอเมริกาที่เกี่ยวข้อง นโยบายความเป็นส่วนตัว