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

TH

เปิดแอป beta

Simple Motion

จุดเดียว: ลูปรูปทรงต่อเนื่องในช็อตเดียว

จุดจบประโยคที่พิมพ์ขึ้นกลายเป็นเส้น วงกลม ทรงกลม เลนส์แก้ว ลูกบอลเด้ง ฝูงอนุภาค และลูกโลก ก่อนกลับมาเป็นจุดจบประโยคปิด

เผยแพร่เมื่อ 10 พฤศจิกายน 2569

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

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

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

ใช้กับเอเจนต์ของคุณในเอเจนต์

แนวคิด

สร้างฟิล์มโมชันแบบเทคเดียวยาว 29 วินาที แนวนอน 1920x1080 ที่ 60 fps จุดจบประโยคที่พิมพ์ขึ้นเพียงจุดเดียวกลายเป็นชุดรูปทรง: เส้น วงกลม ทรงกลมมันวาว เลนส์แก้ว ลูกบอลที่เด้ง ฝูงอนุภาค และลูกโลก ฟิล์มจบลงเป็นจุดจบประโยคของประโยคปิด ภาพสุดท้ายจึงไหลต่อเข้าภาพแรกโดยตรงและฟิล์มวนเป็นลูป ไม่มีการตัดต่อเลย: ทุกรูปทรงงอกออกมาจากรูปก่อนหน้า และกล้องไม่เคยหยุดเคลื่อนที่ ทุกอย่างถูกวาดขึ้น: ตัวอักษร เส้น และรูปทรง 3D บนหน้ากระดาษสีอ่อน ไม่มีฟุตเทจ รูปถ่าย หรือสต็อก บรรยากาศสงบแบบบรรณาธิการ เหมือนรูปประกอบในตำรา: หน้ากระดาษสีซีด ภาพวาดและตัวอักษรสีหมึกเข้ม และสีชมพูเป็นสีเน้นสีเดียว หลีกเลี่ยงการตัดต่อ สีเพิ่มเติม และของตกแต่งรกรุงรัง ห้ามข้อความ รูปทรง หรือรอยใดวิ่งเลยขอบเฟรมหรือข้ามส่วนหัว

โครงสร้าง

0–2 วิ จุด เคอร์เซอร์สีชมพูหนา 5 px ยืนอยู่บนหน้ากระดาษว่าง ที่ 0.5 วิ มันพิมพ์จุดขนาด 14 px ตรงตำแหน่งที่จุดจบประโยคปิดจะอยู่พอดี (ขวาของกึ่งกลาง ต่ำลงเล็กน้อย) ก้าวไปทางขวาและจางหายใน 0.12 วิ กล้องดำดิ่งเข้าไปในจุด: สเกลของมันถูกอินเตอร์โพเลตในปริภูมิลอการิทึมจาก 14 px เป็นแผ่นดิสก์ 130 px ขณะที่จุดเลื่อนไปยังกึ่งกลางพอดี ทั้งสองอย่างบน sine.inOut เส้นเดียวตั้งแต่ 0.53 ถึง 1.98 วิ
2–4.5 วิ เส้น จุดเคลื่อนเป็นก้าว power2.inOut: ไปทางขวาประมาณ 390 px (2.0–2.5 วิ) ไปไกลทางซ้าย (2.5–3.5 วิ) กลับมากึ่งกลาง (3.5–4.0 วิ) ไปทางขวาอีกครั้ง (4.0–4.5 วิ) เส้นที่มันทิ้งไว้ก็คือช่วงที่มันเคยผ่านไป ในระหว่างนั้นกล้องค่อย ๆ ถอยจากสเกล 1 ไปที่ 0.655
4.5–6 วิ วงกลม การหมุน power2.inOut หนึ่งครั้งยาว 1 วิ พาจุดวนทวนเข็มนาฬิกาครบหนึ่งรอบ โดยวงกลมวาดตัวเองตามหลังมัน จากนั้นจุดกลับมากึ่งกลาง (5.5–6.0 วิ) ป้ายชื่อตัวเอียงสีชมพูขนาดเล็กสองป้ายพร้อมเส้นนำบางเฟดเข้า: «bigger» เหนือเส้นผ่านศูนย์กลาง (4.6 วิ) และ «slower» ที่ด้านซ้ายบนของวงกลม (5.6 วิ)
6–8.2 วิ ทรงกลม หน้ากระดาษเอียงลงเป็นพื้น: ใน 2.2 วิ ด้วยการเริ่มนุ่มนวลและการหยุดนิ่งยาว กล้องโคจรจากมุมมองตรงลงมาจนประมาณ 62° จากแนวดิ่ง หมุนราว 20° ในแนวราบ และดอลลี่เข้า ดิสก์แบนกลายเป็นทรงกลมหมึกเข้มมันวาวพร้อมเงานุ่มทอดไปทางขวา ป้ายชื่อยังตั้งตรง ปักอยู่กับที่บนพื้น และออกไปที่ 7.8 วิ
8.2–11.2 วิ เลนส์ เส้นผ่านศูนย์กลางถูกลบจากกึ่งกลางออกไปด้านนอกใน 0.15 วิ และวงกลมละลายเป็นหย่อมสัญญาณรบกวน บล็อกข้อความโมโนสเปซแปดบรรทัดถูกเปิดเผยแบบแผ่ออกจากศูนย์กลางบนพื้นหลังลูกบอล บรรทัดตัวอย่าง (แทนที่ด้วยของคุณ): «Describe your idea», «Tell the chat what to show.», «The agent builds the animation.», «No keyframes to hunt for.», «Say what should change.», «“Bigger”, “slower”, “another colour”:», «the preview updates as you talk.», «Refine in words, then export» ลูกบอลกลายเป็นแก้วใสใน 0.2 วิ และกลิ้งไปทางซ้ายข้ามตัวอักษรใน 2.4 วิ ด้วย sine.inOut ขณะที่กล้องตามไป คำบนพื้นเฟดออกอย่างนุ่มนวลก่อนถึงขอบซ้ายและขวาของเฟรม ป้ายสีชมพู «another colour» อยู่ข้างลูกบอล ที่ 11.0 วิ ตัวอักษรเฟดหาย และลูกบอลกลับเป็นสีหมึกเข้ม
11.2–16 วิ ลูกบอล กล้องถอยออก ลูกบอลย่อตัว 0.15 วิ แล้วเด้งไปทางขวาด้วยสัมประสิทธิ์การคืนตัว 0.75: การลอยตัว 0.98 วิ × 0.75ⁿ ดังนั้นมันจึงหยุดนิ่งตรงที่ 16 วิ พอดี มันทิ้งเส้นทางจุดไข่ปลาสีชมพู และยอดของโค้งแรกอยู่ต่ำกว่าส่วนหัว กล้องติดตามลูกบอลและดันเข้าขณะที่การเด้งเล็กลง ป้าย «sound effects» อยู่เหนือโค้งที่สองและหายไปก่อนถึงขอบเฟรม
16–20.6 วิ ฝูง ลูกบอลถูกลบจากบนลงล่างใน 0.6 วิ ขณะที่จุดหมึกเข้มเล็ก ๆ 8,192 จุดออกจากพื้นผิวตามลำดับนั้น ลอยขึ้นและรวมฝูง พวกมันก่อเป็นกลุ่มเมฆหนาแน่นที่ยืดออก หมุน และพับเป็นรูปจันทร์เสี้ยว พร้อมเงากว้างนุ่มบนพื้น ป้าย «shapes»
20.6–23.4 วิ โลก จุดลงจอดแบบเหลื่อมกันตลอด 0.3 วิ บนผืนแผ่นดินของลูกโลก ซึ่งจากนั้นเฟดเข้ามา แกนสีชมพูได้ป้าย «vertical» ลูกโลกหมุนจากตะวันตกไปตะวันออก โดยแอฟริกาหันหน้าเข้าหากล้องที่ 22 วิ
23.2–25.1 วิ กลับสู่หน้ากระดาษ ลูกโลกหดและเข้มขึ้นกลายเป็นดิสก์แบน ขณะที่วงโคจรแบนกลับสู่มุมมองตรงลงมา จากนั้นกล้องถอยออกด้วยการดำดิ่งย้อนกลับ (sine.inOut ประมาณ 1.1 วิ) จนดิสก์กลับเป็นจุดจบประโยคขนาด 14 px อีกครั้ง
25–29 วิ จุดจบประโยค ประโยคปิดถูกพิมพ์ทีละตัวอักษรต่อหนึ่งเฟรมด้วยเคอร์เซอร์สีชมพู ในสองบรรทัดที่ลงท้ายด้วยจุดนั้นเป็นจุดจบประโยค ตัวอย่าง: «Describe the video.» แล้ว «The agent animates it» (แทนที่ด้วยประโยคสองบรรทัดของคุณเอง) ที่ 26.08 วิ เคอร์เซอร์กระโดดข้ามจุดและกะพริบที่ 1 Hz จนจบ ขณะที่ทั้งประโยคขยับเข้าหาจุด 3% คำบรรยาย «MP4 export» ถูกพิมพ์ที่ 26 วิ ที่ 26.6 วิ ส่วนท้ายที่มีคำกระตุ้นการตัดสินใจและที่อยู่เว็บของคุณเฟดเข้า จัดกึ่งกลางที่ด้านล่าง เช่น «TRY IT FREE · [YOUR ADDRESS]» ภาพสุดท้ายตรงกับภาพแรกเพื่อให้ฟิล์มวนเป็นลูป
คำบรรยายเริ่มตามห้องดนตรี (แทนที่ด้วยคู่ป้ายชื่อและวลีสั้น ๆ ของคุณเอง):

«IDEAS in motion» ที่ 0.6 วิ
«CHAT instead of a timeline» ที่ 2 วิ
«EDIT in words» ที่ 4 วิ
«3D effects» ที่ 6 วิ
«LIVE preview» ที่ 8 วิ
«MUSIC to the rhythm» ที่ 12 วิ
«NO keyframes» ที่ 16 วิ
«FONTS for every script» ที่ 21 วิ หายที่ 24 วิ
«MP4 export» ที่ 26 วิ

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

จานสี:

หน้ากระดาษ #FAF9FF พร้อมวิกเน็ตสีลาเวนเดอร์นุ่มมากไปทางด้านข้าง (หมึกเข้มราว 5% ที่ขอบ)
หมึกเข้ม #1C0B5D สำหรับภาพวาดทั้งหมดและตัวอักษรสีเข้ม
ชมพู #FB2D89 เป็นสีเน้นเพียงสีเดียว สำหรับป้ายชื่อ เคอร์เซอร์ เส้นทางจุดไข่ปลา และแกนของลูกโลก
สีหม่น #6B6385 สำหรับส่วนหัวและส่วนท้ายขนาดเล็ก
ตัวอักษร:
Spectral regular สำหรับประโยคปิดขนาดใหญ่
Spectral italic สำหรับวลีคำบรรยายและป้ายชื่อรูปทรง
Spectral semibold small caps สำหรับป้ายชื่อคำบรรยาย ส่วนหัว และส่วนท้าย
JetBrains Mono สำหรับคำที่พิมพ์บนพื้น
องค์ประกอบคงที่ของเฟรมตลอดทั้งฟิล์ม: ซ้ายบน «[YOUR BRAND]» และขวาบนคำบรรยายสั้น ๆ เช่น «YOUR AI MOTION DESIGNER» (แทนที่ด้วยของคุณ) ทั้งสองเป็นตัวพิมพ์ใหญ่ semibold ขนาด 21 px ระยะห่างตัวอักษร 0.14em ในสีหม่น ห่างจากด้านข้าง 80 px ใต้ทุกรูปทรงมีคำบรรยายตรงกึ่งกลางขนาดคงที่: ป้ายชื่อ small caps สีชมพู ตามด้วยวลีตัวเอียง ป้ายชื่อรูปทรงเป็นตัวเอียงสีชมพูขนาดเล็กพร้อมเส้นนำบาง ประโยคปิดเป็น Spectral 129 px สองบรรทัดที่เริ่มที่ x เดียวกัน บล็อกอยู่กึ่งกลางในแนวนอน โดยจุดกึ่งกลางแนวตั้งสูงกว่ากลางเฟรมเล็กน้อย วัดสองบรรทัดก่อน แล้ววางจุดไว้ตรงที่บล็อกที่จัดกึ่งกลางสิ้นสุด เพื่อให้ช่วงเปิดพิมพ์จุดจบประโยคของมันตรงตำแหน่งนั้นพอดี รักษาคำบรรยาย ป้ายชื่อ คำบนพื้น และรอยทางทุกอย่างให้อยู่ในเฟรมและห่างจากส่วนหัว

เทคนิค

คำบรรยายถูกพิมพ์จากซ้ายด้วยความเร็ว 20 ตัวอักษรต่อวินาที พร้อมเคอร์เซอร์สีชมพูบางที่คงอยู่ 0.35 วิหลังตัวอักษรสุดท้าย แต่ละอันถูกลบทีละตัวอักษรต่อเฟรมก่อนคำบรรยายถัดไปสลับเข้ามาเล็กน้อย
เส้นหนาราว 12 px ขอบหมึกหยาบเล็กน้อย แต่ละเส้นเคลื่อนตามจังหวะ
ทรงกลมหมึกเข้มมีการสะท้อนแบบสตูดิโอ: ซอฟต์บ็อกซ์ใหญ่นุ่มที่ซ้ายบน แถบบางทางขวา และพื้นในครึ่งล่าง
ลูกบอลแก้วหักเหแสงเข้าและออกจากทรงกลมและสะท้อนพื้น ดังนั้นคำจึงปรากฏกลับหัวอยู่ข้างใน เงาของมันมีคอสติกสว่าง
ลูกบอลที่เด้งยุบและยืดเล็กน้อยทุกครั้งที่สัมผัสพื้น รอยทางของมันปล่อยจุดสีชมพูหนึ่งจุดทุก 1/30 วิ
ลูกโลกมีทวีปเป็นจุดฮาล์ฟโทนสีหมึกเข้มบนทรงกลมสีซีดที่ได้รับแสงจากซ้ายบน มีเส้นกริดสีชมพูจาง ๆ ทุก 30° เส้นขอบคมชัด และแกนสีชมพูเอียง 23.4° ที่ยื่นออกทั้งสองขั้ว
ป้ายชื่อยังตั้งตรงและปักอยู่กับที่บนพื้นขณะที่กล้องโคจร
เส้นโค้งความเร็ว: sine.inOut สำหรับการดำดิ่งและการกลิ้งของแก้ว power2.inOut สำหรับก้าวของเส้นและการหมุนของวงกลม และการเริ่มนุ่มนวลพร้อมการหยุดนิ่งยาวสำหรับการเอียง
สเกลของการดำดิ่งถูกอินเตอร์โพเลตในปริภูมิลอการิทึมเพื่อให้การซูมรู้สึกสม่ำเสมอ

ดนตรี

ใช้ 120 BPM หนึ่งบีตทุกครึ่งวินาที โดยคำบรรยายเริ่มบนห้องดนตรี และเส้นเริ่มบนบีต ทำแบ็กกราวด์ synthwave/chiptune สดใสมีชีวิตชีวายาว 29 วินาทีพอดี:

ระฆังนุ่มหนึ่งเสียงเมื่อพิมพ์จุดจบประโยค
อาร์เปจจิโอเร็วตั้งแต่ 2 วิ
แพดอบอุ่นและเสียงติ๊กเบา ๆ ตั้งแต่ 6 วิ
ช่วงตกสั้น ๆ ที่ 12 วิ
ไรเซอร์เข้าสู่ช่วงที่มีพลังที่สุดที่ 16 วิ พร้อมกลองและเบสที่ขับเคลื่อนใต้ฝูงและลูกโลก
บีตหายไปราว 23 วิ
เอาโทรเบา ๆ พร้อมแพดนุ่มใต้การพิมพ์ ค่อย ๆ เฟดออกในครึ่งวินาทีสุดท้าย
เป้าหมายประมาณ -14 LUFS โดยมี true peak ต่ำกว่า -1 dBTP

เสียง

เสียงเอฟเฟกต์เฉพาะสิ่งที่เกิดขึ้นในภาพ อยู่ใต้ดนตรี:

เสียงคลิกแป้นพิมพ์และเสียงระฆังเมื่อพิมพ์จุดจบประโยค
เสียงวูชโปร่งตอนดำดิ่ง
เสียงติ๊กเบา ๆ ทุกเส้น
เสียงวูชทุ้มตอนเอียง
เสียงติ้งของแก้วเมื่อลูกบอลกลายเป็นแก้ว
เสียงตุบนุ่ม ๆ ทุกครั้งที่ลงพื้น ค่อย ๆ เบาลง
ไรเซอร์และเสียงกระแทกนุ่มที่ 16 วิ
เสียงวูชเมื่อจุดลงจอดและเมื่อลูกโลกกลับสู่หน้ากระดาษ
เสียงคลิกแป้นพิมพ์เร็วสำหรับประโยคปิด
เสียงคลิกหนึ่งครั้งที่จุดจบประโยคสุดท้าย
ไม่มีเสียงบรรยาย

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

ลูปมอร์ฟแบบเทคเดียวที่ต่อเนื่อง ในแนวรูปประกอบตำราแบบเคลื่อนไหวหรือวิดีโออธิบายแบบบรรณาธิการอันประณีต: ตัวอักษรมีเชิงที่สงบ สีเน้นสีเดียว และรูปทรงที่แปรเปลี่ยนเป็นกันและกันแทนการตัดต่อ

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

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

ตัวอักษร

คำบรรยายภาพที่พิมพ์ทีละตัวพร้อมเคอร์เซอร์ที่ค้างไว้

ป้ายกำกับแบบ small caps สีเน้นและวลีตัวเอียง จัดกึ่งกลางทั้งคำบรรยาย พิมพ์จากซ้ายด้วยความเร็ว 20 ตัวอักษรต่อวินาที เคอร์เซอร์ค้างอยู่ 0.35 วินาทีหลังตัวอักษรสุดท้ายแล้วหายไป ก่อนคำบรรยายถัดไปจะลบทีละหนึ่งตัวอักษรต่อเฟรม และป้ายกำกับจะสลับในจังหวะที่ข้อความว่างพอดี

ใช้เมื่อไร คำบรรยายแบบทีละขั้นหรือป้ายกำกับรูปภาพที่เปลี่ยนไประหว่างที่แอนิเมชันต่อเนื่องหนึ่งชิ้นยังเล่นอยู่

แสดงโค้ด

<!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=Spectral:ital,wght@0,600;1,400&display=swap");
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #faf9ff; font-family: "Spectral", serif; }
#page { position: absolute; inset: 0; background: radial-gradient(ellipse 72% 105% at 50% 50%, rgba(28,11,93,0) 62%, rgba(28,11,93,0.05) 100%); }
#cap { position: absolute; left: 0; top: 500px; height: 70px; white-space: nowrap; }
#lab { position: absolute; top: 22px; font-size: 27px; line-height: 1; font-weight: 600; letter-spacing: 0.12em; color: #fb2d89; }
#txt { position: absolute; top: 5px; font-size: 48px; line-height: 1; font-style: italic; color: #1c0b5d; }
#car { position: absolute; top: 10px; width: 2.5px; height: 46px; background: #fb2d89; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="5" data-width="1920" data-height="1080">
  <div id="page" class="clip" data-start="0" data-duration="5"></div>
  <div id="cap" class="clip" data-start="0" data-duration="5"><span id="lab"></span><span id="txt"></span><span id="car"></span></div>
</div>
<script>
// A caption typed like a figure label: 20 characters a second, the caret stays 0.35 s after the last one,
// then the text is backspaced one character a frame so the next caption can type in its place.
const CAPS = [ // start (s), label, text; each caption ends where the next one starts
  { t: 0.3, l: "IDEAS", s: "in motion" },
  { t: 2.5, l: "CHAT", s: "instead of a timeline" },
  { t: 5.0 },
];
const RATE = 0.05;   // seconds per typed character
const HOLD = 0.35;   // the caret stays this long after the last character
const FPS = 60;      // the backspace removes one character per frame
const GAP = 32;      // px between the label and the text
const lab = document.getElementById("lab"), txt = document.getElementById("txt"), car = document.getElementById("car"), cap = document.getElementById("cap");
const probe = document.createElement("span"); probe.style.cssText = "position:absolute;visibility:hidden;white-space:nowrap"; document.getElementById("root").appendChild(probe);
function width(text, ref) { const cs = getComputedStyle(ref); probe.style.font = cs.font; probe.style.letterSpacing = cs.letterSpacing; probe.textContent = text; return probe.getBoundingClientRect().width; }
function draw(t) {
  let k = -1; for (let i = 0; i < CAPS.length - 1; i++) if (t >= CAPS[i].t) k = i;
  if (k < 0) { cap.style.opacity = 0; return; }
  const c = CAPS[k], next = CAPS[k + 1].t, n = c.s.length;
  let shown = Math.min(n, Math.floor((t - c.t) / RATE));
  let caret = t < c.t + n * RATE + HOLD;
  if (t >= next - (n + 1) / FPS) { shown = Math.max(0, Math.min(n, Math.round((next - t) * FPS) - 1)); caret = false; }
  const lw = width(c.l, lab), full = lw + GAP + width(c.s, txt);
  cap.style.opacity = 1;
  cap.style.transform = `translateX(${Math.round(960 - full / 2)}px)`; // centred on the whole caption, typed from the left
  lab.textContent = c.l; txt.textContent = c.s.slice(0, shown); txt.style.left = `${lw + GAP}px`;
  car.style.left = `${lw + GAP + width(c.s.slice(0, shown), txt) + 4}px`; car.style.opacity = caret ? 1 : 0;
}
const tl = gsap.timeline({ paused: true });
const clock = { t: 0 };
tl.to(clock, { t: 5, duration: 5, ease: "none", onUpdate: () => draw(clock.t) }, 0);
document.fonts.ready.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:01 ในวิดีโอ

กล้อง

ดำดิ่งเข้าไปในจุดจบประโยค

กล้องซูมเข้าไปในจุดท้ายประโยคที่พิมพ์ไว้ โดยสเกลถูกอินเทอร์โพเลตในปริภูมิลอการิทึมจากจุดขนาด 14 px เป็นดิสก์ 130 px ขณะที่ตำแหน่งของจุดบนหน้าจอเลื่อนเชิงเส้นไปยังศูนย์กลาง ทั้งสองใช้ sine.inOut เดียวยาวราว 1.45 วินาที การขยายจึงดูเหมือนการดำดิ่งอย่างสม่ำเสมอ เมื่อเล่นย้อนกลับจะถอยออกมาที่จุดเดิมตอนท้าย ซึ่งปิดลูปพอดี

ใช้เมื่อไร เปิดหรือปิดฟิล์มที่เครื่องหมายเดียว หรือทำลูปไร้รอยต่อจากเฟรมสุดท้ายกลับไปเฟรมแรก

แสดงโค้ด

<!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=Spectral:wght@400&display=swap");
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #faf9ff; font-family: "Spectral", serif; }
#cam { position: absolute; inset: 0; transform-origin: 0 0; }
#line { position: absolute; right: 559px; top: 528px; font-size: 129px; line-height: 1; color: #1c0b5d; white-space: nowrap; }
#stop { position: absolute; left: 1363.5px; top: 614.4px; width: 14px; height: 14px; border-radius: 50%; background: #1c0b5d; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="4" data-width="1920" data-height="1080">
  <div id="cam" class="clip" data-start="0" data-duration="4"><div id="line">“The agent animates it</div><div id="stop"></div></div>
</div>
<script>
// The camera dives into the full stop of a sentence: its scale is interpolated in log space and the dot's place on screen
// linearly, both on one sine.inOut, so the dot grows at a steady rate and arrives in the centre as a 130 px disc.
const STOP = { x: 1370.5, y: 621.4, d: 14 };  // the dot at rest, on screen
const END = { x: 960, y: 540, d: 130 };       // where the dive ends
const T0 = 1.0, T1 = 2.45;                    // the dive, seconds
const cam = document.getElementById("cam"), line = document.getElementById("line");
const sio = (u) => -(Math.cos(Math.PI * u) - 1) / 2;
function draw(t) {
  const u = sio(Math.min(1, Math.max(0, (t - T0) / (T1 - T0))));
  const s = Math.pow(END.d / STOP.d, u);                 // log-space zoom
  const x = STOP.x + (END.x - STOP.x) * u, y = STOP.y + (END.y - STOP.y) * u; // where the dot is now
  cam.style.transform = `translate(${x}px, ${y}px) scale(${s}) translate(${-STOP.x}px, ${-STOP.y}px)`;
  line.style.opacity = 1 - Math.min(1, Math.max(0, (t - T0) / 0.5)); // the words leave as the dot takes over
}
const tl = gsap.timeline({ paused: true });
const clock = { t: 0 };
tl.to(clock, { t: 4, duration: 4, ease: "none", onUpdate: () => draw(clock.t) }, 0);
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:04 ในวิดีโอ

รูปทรง

จุดที่วาดเส้นและวงกลมของตัวเอง

จุดเคลื่อนที่เป็นขั้นละครึ่งวินาทีด้วย power2.inOut (ไปขวา ไปซ้ายไกล ย้อนกลับ ไปขวา) และเส้นก็คือช่วงที่จุดเคลื่อนผ่านนั่นเอง จากนั้นการหมุนหนึ่งรอบยาว 1 วินาทีด้วย power2.inOut วาดวงกลมไว้ด้านหลัง และจุดกลับสู่ศูนย์กลางในอีกหนึ่งขั้น 0.5 วินาที การเคลื่อนตำแหน่งด้วยนอยส์แฟร็กทัลทำให้ทุกเส้นมีขอบหมึกหยาบ

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

แสดงโค้ด

<!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>
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #faf9ff; }
#ink { position: absolute; inset: 0; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="5" data-width="1920" data-height="1080">
  <svg id="ink" class="clip" data-start="0" data-duration="5" width="1920" height="1080" viewBox="0 0 1920 1080">
    <defs><filter id="rough" x="-5%" y="-5%" width="110%" height="110%"><feTurbulence type="fractalNoise" baseFrequency="0.09" numOctaves="2" seed="7" /><feDisplacementMap in="SourceGraphic" scale="3.5" /></filter></defs>
    <g filter="url(#rough)" stroke="#1c0b5d" stroke-width="8.5" stroke-linecap="round" fill="none">
      <line id="seg" x1="960" y1="540" x2="960" y2="540" />
      <circle id="arc" cx="960" cy="540" r="256" transform="rotate(0 960 540) scale(1 -1) translate(0 -1080)" />
    </g>
    <circle id="dot" cx="960" cy="540" r="42.5" fill="#1c0b5d" />
  </svg>
</div>
<script>
// A dot draws with its own path: power2.inOut moves on half-second steps (right, far left, centre, right), the line is
// the range the dot has visited, then one power2.inOut turn of 1 s draws the circle behind it and the dot returns to the centre.
const R = 256, C = { x: 960, y: 540 };                       // circle radius and centre, px
const seg = document.getElementById("seg"), arc = document.getElementById("arc"), dot = document.getElementById("dot");
const CIRC = 2 * Math.PI * R;
arc.setAttribute("stroke-dasharray", `0 ${CIRC}`);
const tl = gsap.timeline({ paused: true });
const p = { x: 0, a: 0, lo: 0, hi: 0 };                       // dot x offset, swept angle, visited range
const draw = () => {
  p.lo = Math.min(p.lo, p.x); p.hi = Math.max(p.hi, p.x);
  const onCircle = p.a > 0 && p.a < Math.PI * 2;
  const dx = onCircle ? R * Math.cos(p.a) : p.x, dy = onCircle ? -R * Math.sin(p.a) : 0;
  dot.setAttribute("cx", C.x + dx); dot.setAttribute("cy", C.y + dy);
  seg.setAttribute("x1", C.x + p.lo); seg.setAttribute("x2", C.x + p.hi);
  arc.setAttribute("stroke-dasharray", `${(p.a / (Math.PI * 2)) * CIRC} ${CIRC}`);
};
const step = (x, at, d) => tl.to(p, { x, duration: d, ease: "power2.inOut", onUpdate: draw }, at);
step(R, 0.0, 0.5); step(-R, 0.5, 1.0); step(0, 1.5, 0.5); step(R, 2.0, 0.5);
tl.to(p, { a: Math.PI * 2, duration: 1.0, ease: "power2.inOut", onUpdate: draw }, 2.5);
tl.to(p, { x: 0, duration: 0.5, ease: "power2.inOut", onUpdate: draw }, 3.5);
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 ในวิดีโอ

3 มิติ

ลูกแก้วหักเหข้อความบนพื้น

เชเดอร์ของทรงกลมติดตามรังสีสายตาเชิงวิเคราะห์ โดยหักเหเข้าด้วย n = 1.5 ข้ามคอร์ด 2R·dot(t1, −N) หักเหออก แล้วชนระนาบพื้นและอ่านเท็กซ์เจอร์ข้อความตรงนั้น ทำให้ตัวอักษรกลับหัวอยู่ในลูกแก้ว โดย Fresnel ผสมการสะท้อนเข้ามา ด้านล่างมีเงานุ่มเชิงวิเคราะห์ที่มีคอสติกสว่างตรงที่ลูกแก้วรวมแสง

ใช้เมื่อไร ภาพโคลสอัพของแก้วหรือเลนส์เหนือข้อความหรืออินเทอร์เฟซ เป็นช่วงเวลา “มองผ่าน” โดยไม่ต้องใช้ path tracer

ไลบรารีthree

แสดงโค้ด

<!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=JetBrains+Mono:wght@400&display=swap");
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #faf9ff; }
#gl { position: absolute; inset: 0; width: 1920px; height: 1080px; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="5" data-width="1920" data-height="1080">
  <canvas id="gl" class="clip" data-start="0" data-duration="5" width="1920" height="1080"></canvas>
</div>
<script type="module">
// A glass ball rolls over words printed on the floor. Its shader traces the view ray analytically: refract into the sphere,
// cross it along the chord, refract out, then hit the floor plane and read the text there, so the words show upside down
// inside the ball. A soft shadow with a bright caustic (the ball focusing the light) sits on the floor.
import * as THREE from "https://cdn.jsdelivr.net/npm/[email protected]/+esm";
THREE.ColorManagement.enabled = false;
const R = 64, IOR = 1.5;                                  // ball radius (world units) and index of refraction
const LIGHT = new THREE.Vector3(-0.95, 1.0, -0.42).normalize();
const PAPER = new THREE.Color(0xf3f1fc), INK = new THREE.Color(0x1c0b5d);
const LINES = ["“Tell the chat what to show.”", "  “The agent builds the animation.”", "  “No keyframes to hunt for.”", "  “Say what should change.”", "“Bigger”, “slower”, “another colour”"];
const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById("gl"), antialias: true, alpha: true, preserveDrawingBuffer: true });
renderer.setPixelRatio(1); renderer.setSize(1920, 1080, false); renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
const scene = new THREE.Scene(), camera = new THREE.PerspectiveCamera(27, 1920 / 1080, 1, 20000);
camera.position.set(-330, 540, 900); camera.lookAt(-30, 40, 0);
const textCanvas = document.createElement("canvas"); textCanvas.width = 2048; textCanvas.height = 512;
const textTex = new THREE.CanvasTexture(textCanvas);
const RECT = new THREE.Vector4(-620, -300, 1156, 288);    // where the text lies on the floor: x, z, width, depth
const floorGLSL = `uniform sampler2D uText; uniform vec4 uRect; uniform vec3 uC; uniform vec3 uL; uniform vec3 uPaper; uniform vec3 uInk;
  float textAt(vec2 p){ vec2 uv=(p-uRect.xy)/uRect.zw; if(uv.x<0.||uv.y<0.||uv.x>1.||uv.y>1.) return 0.; return texture2D(uText, vec2(uv.x,1.-uv.y)).a*.86; }
  float shadowAt(vec2 p){ vec3 cp=uC-vec3(p.x,0.,p.y); float s=dot(cp,uL); if(s<=0.) return 0.; float d=length(cp-uL*s); float w=max(2.,s*.09); return (1.-smoothstep(${R}.-w,${R}.+w,d))*.55; }
  float causticAt(vec2 p){ vec3 cp=uC-vec3(p.x,0.,p.y); float s=dot(cp,uL); if(s<=0.) return 0.; return exp(-pow(length(cp-uL*s)/(${R}.*.36),2.)); }
  vec3 floorAt(vec2 p){ vec3 c=uPaper*(1.-shadowAt(p)); c=mix(c,vec3(.165,.09,.4),textAt(p)); return c; }`;
const U = { uText: { value: textTex }, uRect: { value: RECT }, uC: { value: new THREE.Vector3(0, R, 0) }, uL: { value: LIGHT }, uPaper: { value: PAPER }, uInk: { value: INK }, uCam: { value: camera.position } };
const floor = new THREE.Mesh(new THREE.PlaneGeometry(6000, 6000).rotateX(-Math.PI / 2), new THREE.ShaderMaterial({ uniforms: U, transparent: true,
  vertexShader: `varying vec2 vP; void main(){ vec4 w=modelMatrix*vec4(position,1.); vP=w.xz; gl_Position=projectionMatrix*viewMatrix*w; }`,
  fragmentShader: `${floorGLSL} varying vec2 vP; void main(){ float t=textAt(vP), sh=shadowAt(vP), ca=causticAt(vP)*.85;
    float a=max(t,sh); vec3 col=mix(uInk*.6,vec3(.165,.09,.4),t/max(a,1e-4));
    gl_FragColor=vec4(mix(col,vec3(1.),ca), max(a,ca*.9)); }` }));
scene.add(floor);
const ball = new THREE.Mesh(new THREE.SphereGeometry(R, 128, 96), new THREE.ShaderMaterial({ uniforms: U,
  vertexShader: `varying vec3 vW; void main(){ vec4 w=modelMatrix*vec4(position,1.); vW=w.xyz; gl_Position=projectionMatrix*viewMatrix*w; }`,
  fragmentShader: `${floorGLSL} uniform vec3 uCam; varying vec3 vW;
    vec3 trace(vec3 p, vec3 d){ if(d.y<-.0005){ vec3 h=p+d*(-p.y/d.y); return floorAt(h.xz);} return vec3(.95,.945,.99); }
    void main(){ vec3 N=normalize(vW-uC), V=normalize(vW-uCam); float cosi=clamp(dot(-V,N),0.,1.);
      vec3 t1=refract(V,N,1./${IOR.toFixed(2)}); float chord=2.*${R}.*dot(t1,-N); vec3 P2=vW+t1*chord; vec3 N2=(P2-uC)/${R}.;
      vec3 t2=refract(t1,-N2,${IOR.toFixed(2)}); if(dot(t2,t2)<.001) t2=reflect(t1,-N2);
      float fr=.04+.96*pow(1.-cosi,5.); gl_FragColor=vec4(mix(trace(P2,t2), trace(vW+N*.5, reflect(V,N)), fr),1.); }` }));
scene.add(ball);
function draw(t) {
  const x = -60 - 480 * (-(Math.cos(Math.PI * Math.min(1, t / 5)) - 1) / 2); // rolls left across the words, sine.inOut
  ball.position.set(x, R, 0); U.uC.value.copy(ball.position);
  renderer.render(scene, camera);
}
const tl = gsap.timeline({ paused: true });
const clock = { t: 0 };
tl.to(clock, { t: 5, duration: 5, ease: "none", onUpdate: () => draw(clock.t) }, 0);
document.fonts.load('400 52px "JetBrains Mono"').then(() => {
  const g = textCanvas.getContext("2d"); g.font = '400 52px "JetBrains Mono"'; g.fillStyle = "#000";
  LINES.forEach((l, i) => g.fillText(l, 12, 70 + i * 92)); textTex.needsUpdate = true; 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>

พรอมต์อื่นๆ

พรีวิวของพรอมต์ “โชว์รีลคณิตศาสตร์มีชีวิต พร้อมคัตกลิตช์ตามจังหวะ”

โชว์รีลคณิตศาสตร์มีชีวิต พร้อมคัตกลิตช์ตามจังหวะ

<direction> สร้างโชว์รีลโมชันกราฟิกความยาว 20 วินาที ที่สร้างจากคณิตศาสตร์ทั้งหมด: ทุกเฟรมถูกสร้างจากเวลา t ที่เดินอยู่ ไม่มีภาพถ่าย ฟุตเทจ หรือรูปภาพใด ๆ แนวนอน 1920x1080 ที่ 60 fps ต้องให้ความรู้สึกเหมือนเครื่องมือในห้องแล็บที่แม่นยำซึ่งจู่ ๆ ก็งดงามขึ้นมา: มืด เรืองแสง แม่นยำ พร้อมคัตกลิตช์หนึ่งครั้งทุกสองวินาทีตามจังหวะ มีแปดฉากคณิตศาสตร์เล่นอยู่ในกรอบแบบเครื่องมือที่อยู่กับที่ (วงเล็บมุม ตัวอักษรแบรนด์ ตัวนับและป้ายฉาก จุดจังหวะ นาฬิกาที่เดินอยู่ เส้นความคืบหน้า สมการสด) จากนั้นเป็นการ์ดปิดท้ายพร้อมแบรนด์ หลีกเลี่ยงเกรน ภาพสต็อก และการตกแต่งใด ๆ ที่ไม่ได้มาจากคณิตศาสตร์ </direction> <structure> คัตที่ 2, 4, 8, 10, 12, 14, 16 และ 18 วินาที ทั้งหมดตรงจังหวะ 1) 0-2 วิ, จุดกำเนิด: วงแหวนสีเขียวมรกตจาง ๆ ขยายจากกลางจอถึง r 238 px (0-0.45 วิ, ease out); แกนที่มีขีดทุก 60 px ยื่นออกจากจุดศูนย์กลางที่เรืองแสง; วงแหวนคลื่นออกจากจุดในทุกจังหวะ บรรทัดที่เว้นระยะอักษรกว้างอย่าง "YOUR AI MOTION DESIGNER" ค่อย ๆ ปรากฏจากตัวอักษรสุ่ม (0.3-0.78 วิ); บรรทัดสั้นแบบเซอริฟอย่าง "Ideas in motion" พิมพ์ทีละตัวอักษรข้างจุดกำเนิด (0.5-1.12 วิ) ตั้งแต่ 1.35 ถึง 1.95 วิ ส่วนโค้งสีเขียวมรกตรัศมี 220 พันรอบจุดกำเนิดหนึ่งรอบโดยมีจุดขาวที่ปลาย และคำต่าง ๆ จางหาย 2) 2-4 วิ, วงกลมหนึ่งหน่วย: วงกลมสีเขียวมรกต (r 220) ทางซ้าย มุมเพิ่มด้วย 4.52 rad/s รัศมีสีขาว ขาโคไซน์สีเขียวมรกต ขาไซน์สีชมพู ส่วนโค้งมุมสีส้มป้าย θ เส้นประสีชมพูไปยังจุดสีชมพูที่ x 820 ซึ่งเขียนค่าไซน์ไว้; ประวัติของมุมลากไปทางขวาเป็นคลื่นไซน์สีชมพูเรืองแสง (104 px ต่อเรเดียน) โดยมีคลื่นโคไซน์สีเขียวมรกตจางอยู่ข้าง ๆ และเส้นนำจุด +1/-1 ค่าที่อ่านสด "θ = 4.524 rad" และ "sin θ = -0.982" สมการ: y = sin θ 3) 4-8 วิ, เอพิไซเคิลฟูริเยร์: โซ่วงกลมหมุน 180 วง (เรียงตามขนาด วงแหวนสีลาเวนเดอร์จาง รัศมีสีขาว) วาดเส้นขอบของ π ตัวใหญ่ด้วยสีส้มเรืองแสงในช่วง 4.3-7.2 วิ (ความคืบหน้า sine in-out) จากนั้นรูปทรงเติมด้วยไล่สีนุ่ม ๆ จากชมพูไปม่วงขณะที่โซ่จางหาย ทางซ้าย สเปกตรัมของ |cₙ| สำหรับ n = -24...24 (ความสูงแท่งตามรากที่สองของแอมพลิจูด) สว่างขึ้นจากกลางออกไปตามความคืบหน้าของการวาด; ค่าที่อ่าน "K = 180 terms" และ "t/2π = 0.527" สมการ: f(t) = Σ cₙ e^{int} 4) 8-10 วิ, ปมลิสซาจูส์ 3 มิติ (sin 3t, sin 2t, sin 5t) ถูกลากใน 0.6 วิ จากนั้นหมุนในมุมมองเปอร์สเปกทีฟ: ริบบิ้นที่สีไล่จากเขียวมรกตไปม่วงและชมพูตามเส้นโค้ง และความกว้างกับความสว่างตามความลึก ทางขวา ตาราง 3x3 ของรูปลิสซาจูส์ระนาบขนาดเล็กป้าย 1:1, 2:3, 4:5, 1:2, 3:4, 5:6, 1:3, 3:5, 3:2 วาดทีละรูปโดยเฟสเลื่อนไหล; รูปสุดท้ายกลายเป็นสีเขียวมรกตในกล่องบาง ๆ 5) 10-12 วิ, พื้นผิวคลื่นแบบเส้นลวด z = cos(kr - ωt)/(1 + r) บนตาราง 48x48 มองจากมุม 67° ด้านบน ปรากฏจากกลางออกไปใน 0.55 วิ และหมุนช้า ๆ เส้นถูกลงสีตามความสูงจากเขียวมรกตผ่านม่วงไปชมพู จุดโพรบสีส้มขี่บนพื้นผิวที่ r = 3.2 พร้อมเส้นนำและค่าที่อ่านสด "r = 3.200", "z = 0.276" 6) 12-14 วิ, เซตจูเลีย z² + c เต็มเฟรม เปิดด้วยพอร์ทัลวงกลมที่ขยายจากกลางจอพร้อมขอบสีขาว c = 0.7885·e^{iα} เลื่อนไปตามวงกลมของมัน (sine in-out) ทำให้เศษส่วนเปลี่ยนรูปจากเกลียวที่แยกกันเป็นรูปทรงที่เชื่อมต่อกันพร้อมด้านในสีดำ; ซูมช้า ๆ และหมุน สีตามเวลาที่หลุด: ครามอินดิโก ม่วง ชมพู ส้ม ครีมอ่อนไปถึงขาว กรอบเล็กแสดง c ที่เคลื่อนไปบนวงกลมของมันพร้อมค่าที่อ่าน "Re c" และ "Im c" 7) 14-16 วิ, ฟิลโลแทกซิส: เมล็ด 1500 เมล็ดที่ θₙ = n·137.508°, rₙ = c√n ปรากฏจากกลางออกไปและหมุน เริ่มเป็นสีขาว จากนั้นชมพู ม่วง และเขียวมรกต ทางซ้าย φ = 1.6180339887... เขียนตัวเองทีละหลัก แถวฟีโบนัชชีเพิ่มขึ้น (21 และ 34 สีเขียวมรกต) พร้อม "seeds n = 1500" และ "spirals 21 ⟲ 34 ⟳" 8) 16-18 วิ, เอกลักษณ์ของออยเลอร์: เมล็ดหมุนวนเป็นวงแหวนที่กลายเป็นวงกลมหนึ่งหน่วยสีเขียวมรกตทางซ้าย; จุดกวาดจาก 1 ไป -1 ทิ้งส่วนโค้งสีส้มไว้ด้านบน; e^{iπ} ปรากฏตัวใหญ่ จากนั้น "+", "1", "=" ทีละตัวตามจังหวะ วงแหวนเต้นที่ -1 และ "0" ลงที่ 18 วิในวงแหวนสีชมพู 9) 18-20 วิ, การ์ดปิดท้าย: เอกลักษณ์หดขึ้นไปด้านบน; ตัวอักษรแบรนด์ขนาดใหญ่ที่เว้นระยะกว้างอย่าง "YOUR BRAND" (แทนที่ด้วยของคุณ) ลอยขึ้นจากด้านล่างทีละตัวอักษรภายในมาสก์ (เหลื่อมกัน 0.06 วิ) เส้นใต้สีเขียวมรกต-ม่วง-ชมพูถูกวาดข้ามใต้ตัวอักษร บรรทัดที่เว้นระยะอย่าง "IDEAS IN MOTION × [your web address]" ปรากฏจากตัวอักษรสุ่ม และบรรทัดเซอริฟตัวเอียง "From idea to video in one chat" ค่อย ๆ ปรากฏ ทุกอย่างจางเป็นสีดำตั้งแต่ 19.35 ถึง 19.95 วิ </structure> <composition> พื้นหลัง: แสงเรืองรัศมีลึกสีครามอินดิโก-ดำ ตรงกลาง #10063A จางไปเป็น #03030A ที่ขอบ ไม่มีเกรน สีเน้น: ชมพู #FB2D89 (หลัก), ส้ม #FE9117, ม่วง #7C6CF2, เขียวมรกต #2DD4B0 และขาว เส้นและป้ายเป็นเทาลาเวนเดอร์: #9A98A4 สำหรับป้าย, #57516F สำหรับคำบรรยายจาง ๆ, #433E53 สำหรับแกน เส้นเรืองแสงนุ่ม ๆ ด้วยการเบลอ 12-16 px ในสีของตัวเอง ตัวอักษร: สมการใช้เซอริฟแบบ Computer Modern (Old Standard TT ตัวแปรเป็นตัวเอียง ฟังก์ชันเป็นตัวตรง); ทุกค่าที่อ่าน ตัวนับ และคำบรรยายใช้ monospace (Liberation Mono หรือคล้ายกัน) ขนาดเล็กและเว้นระยะกว้าง; ชื่อแบรนด์ใช้ตัวกรอเตสก์หนาที่เว้นระยะกว้างมาก กรอบที่อยู่กับที่คงอยู่ตลอดเวลา ค่อย ๆ ปรากฏใน 0.15-0.9 วิ: วงเล็บมุมบาง ๆ ยาว 27 px ห่างจากแต่ละมุม 47 px มุมบนซ้าย: ตัวอักษรแบรนด์อย่าง "YOUR BRAND" (ตัวหนา 22 px เว้นระยะประมาณ 0.35 em) พร้อมบรรทัดเล็กจิ๋วที่เว้นระยะอยู่ใต้ เช่น "IDEAS IN MOTION · [your web address]" มุมบนขวา: ตัวนับฉาก "01 / 08" และใต้ลงมาเป็นป้ายสั้น ๆ ของแต่ละฉาก เช่น "DESCRIBE YOUR IDEA", "EDIT IN WORDS", "NO KEYFRAMES", "3D EFFECTS", "LIVE PREVIEW", "SHAPES AND SOUND", "MUSIC TO THE RHYTHM", "MP4 EXPORT" (แทนที่ด้วยสโลแกนของคุณ) โดยมีจุดสีชมพูเล็ก ๆ อยู่ทางซ้าย มุมล่างขวา: นาฬิกาที่เดินอยู่ "t = 03.35 s" (ทศนิยมสองตำแหน่ง) และบรรทัดเล็กจิ๋วที่มีหมายเลขเฟรม ด้านล่าง: เส้นความคืบหน้าหนา 1 px จาก x 80 ถึง 1840 ที่เติมด้วยไล่สีเขียวมรกต-ม่วง-ชมพูเมื่อเวลาผ่านไป พร้อมขีดเล็ก ๆ ที่ทุกรอยต่อฉาก มุมล่างซ้าย: สมการของฉากปัจจุบัน </composition> <techniques> ทุกการคัตคือกลิตช์ 0.2 วิ: ภาพที่ออกไปถูกตัดเป็นแถบแนวนอนที่เลื่อนไปด้านข้าง เส้นบางเต็มความกว้าง 3-6 เส้นสีเขียวมรกต ชมพู ส้ม และขาวกะพริบ ทั้งเฟรมวาบเป็นสีขาวที่ประมาณ 14% และจางลงใน 0.25 วิ และป้ายของกรอบสลับผ่านตัวอักษรสุ่มอยู่ไม่กี่เฟรม จุดจังหวะสีชมพูวาบสว่างในทุกจังหวะและจางลงในครึ่งจังหวะ สมการของฉากค่อย ๆ ปรากฏ 0.1-0.35 วิหลังแต่ละคัต ค่าที่อ่าน นาฬิกา และตัวนับอัปเดตสดไปกับแอนิเมชัน บรรทัดที่เว้นระยะปรากฏจากตัวอักษรสุ่ม; บรรทัดเซอริฟพิมพ์ทีละตัวอักษร; ตัวอักษรแบรนด์ตอนท้ายลอยขึ้นจากด้านล่างภายในมาสก์โดยเหลื่อมกัน 0.06 วิ การวาดและการเปลี่ยนรูปใช้ ease-out หรือ sine in-out ตามที่ระบุในแต่ละฉาก </techniques> <music> เพลงอิเล็กทรอนิกส์สดใสที่ 120 BPM (คอร์ดเปียโน แพดอบอุ่น เบสซินธ์ บีต four-on-the-floor) ยาว 20 วินาทีพอดี โดยทุกคัตตกตรงจังหวะ นุ่มและกรองเสียงในสองวินาทีแรกพร้อมไรเซอร์ไปสู่บูมที่ 2 วิ เต็มพลังจนถึง 16 วิ เบรกดาวน์ที่กรองเสียงพร้อมไรเซอร์ไปสู่บูมสุดท้ายที่ 18 วิ แล้วค่อย ๆ จางหายภายใน 20 วิ มิกซ์ที่ประมาณ -14 LUFS โดยมี true peak ต่ำกว่า -1 dBTP </music> <sound> เสียงวูชนุ่ม ๆ และเสียงติ๊กกลิตช์สามครั้งในทุกคัต และเสียงวูชที่ลึกกว่ากับเสียงบูมเมื่อพอร์ทัลเศษส่วนเปิดที่ 12 วิ ทั้งหมดอยู่เหนือเพลงและตรงตามตารางจังหวะ ไม่มีเสียงบรรยาย </sound> <references> แอนิเมชันอธิบายคณิตศาสตร์ผสมกับงานศิลป์เจเนอเรทีฟแบบครีเอทีฟโค้ดดิ้ง และ HUD ของออสซิลโลสโคปหรือเครื่องมือห้องแล็บแนวไซไฟ: เส้นบางเรืองแสงบนพื้นเกือบดำ ค่าที่อ่านแบบ monospace สมการเซอริฟแบบตำราเรียน </references>

พรีวิวของพรอมต์ “ประกอบโลโก้ low-poly พร้อมพิมพ์ชื่อแบรนด์ในล็อกอัป”

ประกอบโลโก้ low-poly พร้อมพิมพ์ชื่อแบรนด์ในล็อกอัป

<direction> สร้างวิดีโอเปิดตัวโลโก้แนวนอนความยาว 21 วินาที ขนาด 1920x1080 ที่ 60 fps โดยค่อย ๆ ประกอบโลโก้ของฉันจากเหลี่ยม low-poly และจบด้วยล็อกอัปแนวนอนที่พิมพ์ชื่อแบรนด์ของฉันและมีแท็กไลน์อยู่ด้านล่าง แนวคิดคือการประกอบยาวเงียบสงบไม่มีการตัดต่อเป็นเวลาสิบสี่วินาที ปลดปล่อยตรงจังหวะดรอปของเพลงภายในสองวินาที แล้วจบอย่างสงบด้วยการพิมพ์ข้อความ ลุคคือพื้นหลังเกือบดำพร้อมวิกเน็ตวงกลมนุ่ม ๆ สีแบรนด์แบบเรียบ และตัวอักษรกรอเทสก์ที่สะอาด หลีกเลี่ยงการไล่สีบนโลโก้ รอยต่อที่มองเห็นระหว่างสามเหลี่ยม การตัดต่อระหว่างการประกอบ และสิ่งที่รกอยู่หลังโลโก้ </direction> <structure> 1. 0–2.6 วินาที โครงลวด: โครงลวด low-poly ของเส้นขอบโลโก้ของฉันวาดตัวเองจากด้านล่างของโลโก้ออกไปด้านนอก มีประมาณ 35–45 จุดยอดและเส้นบาง ๆ 90 เส้น 2. 1.9–13.3 วินาที การประกอบ: โลโก้ถูกตัดเป็นสามเหลี่ยมประมาณ 55 ชิ้นตามโครงลวดนั้น และบินเข้ามาทีละชิ้นจากนอกเฟรม การลงจอดเริ่มช้า ๆ ที่ด้านล่างของโลโก้และถี่ขึ้นเรื่อย ๆ ไปทางด้านบน ชิ้นสุดท้ายลงจอดที่ 13.3 วินาที แล้วโลโก้จะสมบูรณ์และแม่นยำ ค้างโลโก้ที่เสร็จแล้วประมาณหนึ่งวินาที 3. 14.38 วินาที แสงวาบ ตรงจังหวะดรอปของเพลงพอดี แสงระเบิด วงแหวนสีส้มที่ขยายออก และแสงวาบสว่างบนโลโก้เกิดขึ้นพร้อมกัน 0.1 วินาทีหลังจังหวะนั้น แผ่นสีหมึกเข้มจะโตขึ้นหลังโลโก้และกลายเป็นสี่เหลี่ยมมุมมนแบบไอคอนแอป ค้างไอคอนที่อยู่กึ่งกลางไว้หนึ่งวินาที 4. 15.74–16.15 วินาที การเลื่อน: ไอคอนหดเหลือประมาณ 42% และเลื่อนไปที่หนึ่งในสามด้านซ้าย เพื่อเว้นที่ให้ชื่อ 5. 16.1–21 วินาที ชื่อ: เคอร์เซอร์สีชมพูปรากฏทางขวาของไอคอน และชื่อถูกพิมพ์ออกมา เช่น "Brand Name" (เปลี่ยนเป็นแบรนด์ของคุณ) ที่ 18.15 วินาที แท็กไลน์กวาดเข้ามาใต้ชื่อ เช่น "Your tagline here" (เปลี่ยนเป็นของคุณ) เคอร์เซอร์กะพริบสามครั้งตามจังหวะและหายไปที่ 19.9 วินาที ค้างล็อกอัปไว้จนจบ </structure> <composition> พื้นหลัง: วิกเน็ตแบบรัศมีเกือบดำ #0D0B1E ตรงกลางและเข้มลงเป็น #040308 ที่มุมภาพ พาเลตต์สี: - สีหมึกเข้ม #1C0B5D สำหรับแผ่นไอคอน - สีชมพู #FB2D89 เป็นสีเน้นหลัก - สีส้ม #FE9117 - สีขาว #FFFFFF - ลาเวนเดอร์อ่อน #E9E4F2 และ #F0EDFF สำหรับเส้นและข้อความนุ่ม ๆ - สีม่วง #7C6CF2 เฉพาะแสงเรืองในพื้นหลัง โลโก้คงเป็นสีเรียบไม่มีการไล่สี โครงลวด: เส้นสีลาเวนเดอร์ #E9E4F2 ความทึบ 60% หนา 1.3 px; จุดยอดสี #F0EDFF รัศมี 2.6 px แผ่นไอคอน: วงกลม 676 px ที่กลายเป็นสี่เหลี่ยมมุมมนรัศมีมุม 24% พร้อมเงาตกกระทบนุ่ม ๆ ตัวอักษร: ชื่อใช้ตัวกรอเทสก์หนา (Golos Text 700 ประมาณ 155 px สีขาว) แท็กไลน์อยู่ด้านล่างด้วยตัวกรอเทสก์บาง (Onest 400 ประมาณ 49 px สีลาเวนเดอร์ความทึบ 74%) เคอร์เซอร์: แท่งสีชมพู #FB2D89 ขนาด 10 x 128 px พร้อมแสงเรืองสีชมพูนุ่ม ๆ ล็อกอัปสุดท้าย (ไอคอนทางซ้าย ชื่อและแท็กไลน์ทางขวา) จัดให้อยู่กึ่งกลางเฟรมทั้งชุด </composition> <techniques> Push-in: ช่วงเปิดอยู่บน push-in ที่ช้ามากเข้าหากึ่งกลางเฟรม จากสเกล 0.886 ที่ 0 วินาที ถึง 0.998 ที่ 11 วินาที แล้วหยุดนิ่ง การวาดโครงลวด: แต่ละเส้นขยายแบบเชิงเส้นจากจุดยอดแรกไปยังจุดยอดหลังใน 0.08–0.45 วินาที จุดเล็ก ๆ ค่อย ๆ ปรากฏที่แต่ละจุดยอดเมื่อเส้นไปถึง การบินเข้า: แต่ละชิ้นประกอบด้วยสามเหลี่ยมหนึ่งถึงสามอัน บินเข้ามาเร็วตามเส้นทางโค้งและชะลอเข้าที่ภายในประมาณ 0.5 วินาที พร้อมตีลังกาแบบ 3D การหมุน พลิก และเอียงค่อย ๆ ลดลงเป็นศูนย์เมื่อมาถึง ระหว่างบินจะหรี่ลงเหลือประมาณ 60% และเบลอเล็กน้อย; เมื่อลงจอดจะคมชัดและสว่างเต็มที่ สามเหลี่ยมแต่ละอันแสดงส่วนของตัวเองจากโลโก้สีเรียบพอดี ดังนั้นชุดที่ประกอบเสร็จจึงไร้รอยต่อ แสงเรือง: แสงเรืองสีชมพู #FB2D89 จาง ๆ ความทึบต่ำกว่า 10% และค่อย ๆ กลายเป็นสีม่วง #7C6CF2 โตขึ้นหลังโลโก้ขณะที่โลโก้เต็ม แสงวาบที่ 14.38 วินาที: - แสงระเบิดสีชมพู-ม่วงอ่อนแบบ screen วาบรอบโลโก้และจางลงใน 0.8 วินาที - วงแหวนบาง ๆ สีส้มอุ่น หนา 7 px เริ่มที่รัศมี 300 px และพุ่งออกนอกเฟรมด้วยความเร็วคงที่ใน 0.38 วินาที - โลโก้วาบสว่างและนิ่งลงใน 0.3 วินาที แผ่น: 0.1 วินาทีหลังจังหวะ แผ่น #1C0B5D โตจากจุดเป็นวงกลม 676 px ใน 0.21 วินาที (sine ease-out) ตอนแรกมีแสงสว่าง จากนั้นมุมของมันจะเป็นเหลี่ยมที่รัศมี 24% การเลื่อน: ไอคอนย่อเหลือประมาณ 42% และเลื่อนไปที่หนึ่งในสามด้านซ้ายใน 0.415 วินาที (power3 ease-in-out) เบลอได้ถึง 7 px ตอนเร็วที่สุดและลงจอดอย่างคมชัด หลังจากนั้นยังโตต่อช้า ๆ ประมาณ 3% ใน 5 วินาที การพิมพ์: หนึ่งตัวอักษรต่อโน้ตเซมิควาเวอร์ของเพลง (0.156 วินาทีที่ 96 BPM) แต่ละตัวอักษรค่อย ๆ ปรากฏใน 0.05 วินาที ขณะที่เคอร์เซอร์กระโดดตามไป แท็กไลน์: กวาดเข้ามาจากซ้ายไปขวาในประมาณ 0.2 วินาที ทีละตัวอักษร </techniques> <music> เพลงบรรเลง 96 BPM เต็มไปด้วยความหวังและทันสมัย ยาว 21 วินาทีพอดี - ช่วงเริ่ม: กล็อกเกนสปีลแบบกล่องดนตรีนุ่ม ๆ เหนือแพดอบอุ่น - ราว 4.4 วินาที: เรียบเรียงเต็มแบบสดใสเข้ามา (กลอง เบส เครื่องสาย ไลน์กล็อกเกนสปีลสดใส) ฟิลเตอร์ค่อย ๆ เปิดตลอดสองห้องและไต่ระดับไปสู่แสงวาบ - 14.38 วินาที: เสียงฉาบกระแทกและคอร์ดใหญ่ลงตรงแสงวาบพอดี - หลังดรอป: กล่องดนตรีกลับมาเหนือแพดที่ลากยาวใต้ล็อกอัปและจางเป็นความเงียบที่ 21 วินาที รักษาทุกอย่างให้อยู่บนกริดจังหวะ เพื่อให้การพิมพ์และการกะพริบของเคอร์เซอร์ตกบนโน้ตเซมิควาเวอร์และจังหวะ </music> <sound> เสียงเอฟเฟกต์เหนือเพลง: - เสียง riser นุ่ม ๆ ก่อนการลงจอดของสามเหลี่ยมชิ้นแรก - riser ก่อนแสงวาบ แล้วเสียงบูมลึกและเสียงกระแทกแก้วเบา ๆ บนแสงวาบ - เสียง whoosh สั้น ๆ ตอนวงแหวนพุ่งออก และอีกครั้งตอนไอคอนเลื่อน - เสียงคลิกแป้นนุ่ม ๆ สำหรับทุกตัวอักษรที่พิมพ์ และเสียงจาง ๆ ตอนแท็กไลน์ปรากฏ ไม่มีเสียงบรรยาย ความดังรวมประมาณ -14 LUFS, true peak ต่ำกว่า -1 dBTP </sound> <references> สติงโลโก้ระดับพรีเมียมแนวเทคโนโลยีหรือการเปิดตัวแอป: การประกอบจากโครงลวด low-poly เป็นรูปทึบในสไตล์การสร้างเหลี่ยม 3D ปลดปล่อยตรงจังหวะดรอปเป็นการเผยไอคอนแอป พร้อมล็อกอัปชื่อที่พิมพ์แบบเทอร์มินัล </references>

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

พรีวิวของพรอมต์ “โชว์รีลโมชันดีไซน์ซิงก์กับจังหวะบีต”

โชว์รีลโมชันดีไซน์ซิงก์กับจังหวะบีต

<direction> ทำโชว์รีลโมชันดีไซน์ความยาว 15 วินาทีสำหรับ [your brand] ขนาด 1920x1080 แนวนอน 60 fps วาดขึ้นทั้งหมด: ตัวอักษรเคลื่อนไหว รูปทรง อนุภาค กลุ่มจุด 3D และแดชบอร์ด ไม่มีฟุตเทจ แนวคิด: รีลสินค้าจังหวะเร็ว ที่ทุกการเปลี่ยนฉากตกบนบีตเฮาส์ 128.57 BPM หนึ่งบีตเท่ากับ 28 เฟรมพอดี (0.4667 วินาที) ทุกการตัดอยู่บนกริดนี้ และฮิตใหญ่ครั้งแรกตกที่ 1.867 วินาที (บีต 4) ลุคสลับระหว่างฉากสีเกือบดำและฉากสีขาวลาเวนเดอร์อ่อน โดยมีสีชมพูสดเป็นสีเน้นหลัก ร่วมกับสีม่วงและสีส้ม ชื่อเรื่องใช้กรอเทสก์หนา คำบรรยายใช้โมโน และข้อความหลักใช้เซอริฟตัวเอียง กรอบสไตล์บรอดแคสต์วางทับทั้งรีลจนถึงกลิตช์ตอนท้าย ใช้สัญลักษณ์โลโก้ของฉันที่การ์ดปิดท้าย และแทนที่ข้อความในเครื่องหมายคำพูดทุกชิ้นด้วยคำของฉันเอง โดยให้แต่ละชิ้นยาวใกล้เคียงกันเพื่อให้เลย์เอาต์คงอยู่ หลีกเลี่ยงรูปถ่าย ฟุตเทจสต็อก ครอสเฟดนุ่มๆ แบบทั่วไป และสิ่งใดก็ตามที่หลุดจากกริดบีต </direction> <structure> 1. 0–1.85 วินาที อินโทรบนสีเกือบดำ เส้นไม้บรรทัดบาง (กว้าง 1440 px สีอ่อน ความทึบ 22 %) ขยายออกจากกึ่งกลางที่ 0.34 วินาที (expo.out, 0.65 วินาที) จากนั้นขีด 13 ขีดปรากฏจากซ้ายไปขวา ห่างกันหนึ่งเฟรม ลูกบอลสีชมพูขนาด 80 px ตกลงมาจากซ้ายบนและลอยไปที่กึ่งกลาง (power2.out, 1.25 วินาที) มันเด้งสามครั้งบนไม้บรรทัด บีบตัวทุกครั้งที่กระแทกและยืดตัวทุกครั้งที่ตก พร้อมโมชันเบลอเล็กน้อยเมื่อเร็ว บรรทัดโมโนถูกพิมพ์ใต้ไม้บรรทัด ทีละหนึ่งตัวอักษรทุก 1.56 เฟรม ตามด้วยเคอร์เซอร์บล็อกที่กะพริบ (ตัวอย่าง "no keyframes." ให้แทนที่ด้วยของคุณ) ที่ 1.28 วินาที ลูกบอลบีบเหลือ 0.8x จากนั้นพองขึ้นตามเส้นโค้ง expo-in จนเต็มเฟรมด้วยสีชมพูที่ 1.82 วินาที 2. 1.82–3.70 วินาที สี่คำ หนึ่งคำต่อบีต แต่ละคำหนาขนาด 300 px อยู่บนพื้นหลังของตัวเอง พร้อมบรรทัดคอมเมนต์โมโนใต้คำ (ตัวอย่าง "// describe your idea", "// live preview", "// refine in words", "// mp4 export") ด้านหลัง สำเนาตัวอักษรเส้นขอบขนาด 205 px ของสี่คำเรียงเป็นสองแถวเลื่อนที่ด้านบนและด้านล่างด้วยความเร็ว 760 px/วินาที ในทิศทางตรงข้ามกัน เส้นขอบลากด้วยสีตัวอักษรของฉากที่ความทึบ 7–14 % - คำที่ 1 (ตัวอย่าง "DESCRIBE") สีม่วงอินดิโกเข้มบนสีชมพู: คำลงมาจากสเกล 1.39x ด้วย expo.out (0.33 วินาที) ขณะที่ตัวอักษรปรากฏห่างกัน 0.03 วินาที พร้อมการคลายเบลอเร็วๆ - คำที่ 2 (ตัวอย่าง "PREVIEW") สีอ่อนบนสีเกือบดำที่ 2.333 วินาที: ระยะห่างตัวอักษรหดจาก 150 px จนแน่นด้วย expo.out (0.45 วินาที) เฟดเข้าใน 3 เฟรม - คำที่ 3 (ตัวอย่าง "REFINE") สีม่วงบนหน้าสีอ่อนที่ 2.8 วินาที: ตัวอักษรผุดขึ้น 340 px จากด้านหลังเส้นมาสก์ที่อยู่ใต้เส้นฐาน 40 px ด้วย back.out(2.2) ตัวละ 0.3 วินาที ห่างกัน 0.035 วินาที - คำที่ 4 (ตัวอย่าง "EXPORT") สีอ่อนบนสีม่วงที่ 3.267 วินาที: ตัวอักษรเด้งเข้าบนโน้ต 1/32 (ห่างกัน 3.5 เฟรม) แต่ละตัวจาก 0.6x ขึ้นเป็นการกระโดด 1.13x สูง 50 px แล้วค่อยนิ่ง 3. 3.46–4.02 วินาที ไวป์แถบ แถบแนวตั้งแปดแถบกว้าง 240 px สลับสีชมพูกับสีหน้าอ่อน ลอยขึ้นจากด้านล่าง (power2.inOut, 0.18 วินาที ห่างกัน 0.7 เฟรม เริ่มจากซ้าย) ค้างไว้ แล้วเลื่อนขึ้นต่อไปจนพ้นเฟรม เผยฉากถัดไปจากด้านล่าง 4. 3.70–5.60 วินาที รูปทรงบนสีเกือบดำ กริดขนาด 120 px ของสี่เหลี่ยมมุมมนเล็กๆ สีหม่น (หนึ่งในห้าเป็นเส้นขอบ) พร้อมกากบาทจิ๋วคั่นระหว่างกัน คลื่นออกจากกึ่งกลางทุกบีต (3.73, 4.2, 4.67 และ 5.13 วินาที) ด้วยความเร็ว 2000 px/วินาที เมื่อหน้าคลื่นผ่าน แต่ละเซลล์ขยายจาก 42 เป็น 74 px โค้งมนเข้าหาวงกลม หมุน 38 องศา และเปลี่ยนเป็นสีชมพู คลื่นแรกเผยกริด และกริดหมุนทวนเข็มนาฬิกาช้าๆ เร็วขึ้นเรื่อยๆ หลังคลื่นสุดท้าย เซลล์ว่างลงและเฟดหายไปที่ 5.47 วินาที 5. 5.55–7.42 วินาที อนุภาค จุดแฟลชสีขาวพร้อมวงช็อกบางๆ ปรากฏที่ 5.62 วินาที จากนั้นสี่เหลี่ยมจิ๋ว 7000 ชิ้นระเบิดจากกึ่งกลาง พวกมันรวมตัวเป็นคำยักษ์ขนาด 590 px หนึ่งคำ (ตัวอย่าง "IDEA") ไล่สีตามความกว้างจากสีส้มไปลาเวนเดอร์ไปม่วง พร่าประกายหนึ่งพิกเซล ตั้งแต่ 7.0 วินาที พวกมันไหลออกไปทางขวาพร้อมเส้นลากยาว เริ่มจากด้านซ้ายของคำก่อน ด้านหลังมีแสงเรืองรัศมีสีชมพูนุ่มๆ 6. 7.42–9.45 วินาที 3D บนพื้นหลังแบบรัศมีสีอินดิโกเข้ม ทรงกลมฟีโบนัชชีจาก 1700 จุด (รัศมี 362 px) หมุนช้าๆ เหนือพื้นเพอร์สเปกทีฟของเส้นสีม่วงบางๆ ซึ่งแถวของมันคืบเข้าหาผู้ชม จุดเป็นสีชมพูหรือม่วง ด้านหน้าใหญ่กว่าและสว่างกว่า ตั้งแต่ 8.12 วินาที ทุกจุดเคลื่อนไปยังตำแหน่งของมันบนปมทอรัส (2,3) (cubic in-out, หน่วงแบบสุ่มได้ถึง 0.16 วินาที) และปมนั้นหมุนต่อไป 7. 9.08–9.65 วินาที ไวป์แถบครั้งที่สองเหมือนฉาก 3 ด้วยสีม่วง สีชมพู และสีหน้าอ่อน 8. 9.27–11.1 วินาที แดชบอร์ดบนหน้าสีอ่อนพร้อมเส้นไกด์แนวตั้งจางๆ - ขั้นตอน: ตัวเลขขั้นตอนหนาขนาด 180 px สามแถวนับขึ้นด้วย expo.out ("01", "02", "03" ตัวที่สามเป็นสีชมพู) พร้อมคำบรรยายโมโน (ตัวอย่าง "PICK A TEMPLATE") แต่ละแถวผุดขึ้นในกล่องที่ถูกตัดของตัวเอง ห่างกัน 0.08 วินาที - การ์ด: การ์ดสีขาว (880x740 มุมโค้ง 26 px เงาอินดิโกนุ่ม) ยกขึ้น 90 px (power3.out, 0.45 วินาที) ในการ์ดมีชื่อตัวหนาตัวพิมพ์เล็ก ป้าย "LIVE" เล็กๆ และวงแหวนที่เติมเต็มด้วย power3.out พร้อมป้ายสั้นๆ ภายใน - แผนภูมิ: แท่งสีส้มสิบสี่แท่งเติบโตจากฐาน ห่างกัน 0.031 วินาที แท่งสุดท้ายเป็นสีชมพูทึบ เส้นสีม่วงวาดตัวเองทับแท่งด้วย sine.inOut (0.72 วินาที) พร้อมจุด รัศมีเรือง และแท็กสีเข้มที่ขี่อยู่บนหัวเส้น (ตัวอย่าง "No keyframes") 9. 10.96–11.45 วินาที ไวป์แถบแนวนอน แถบแนวนอนแปดแถบ สลับสีเกือบดำกับสีชมพู กวาดเข้าจากซ้าย (power3.inOut, 0.2 วินาที ห่างกันหนึ่งเฟรม เริ่มจากบน) และเลื่อนต่อไปออกทางขวา 10. 11.07–13.07 วินาที ข้อความหลักบนสีเกือบดำ เส้นบางเท่าเส้นผม 28 เส้นสี่มัดไหลผ่านเฟรมเป็นริบบิ้น ผสมแบบแอดดิทีฟ: ชมพูไปส้มด้านบน จากนั้นชมพูไปม่วง ม่วง และม่วงไปชมพูด้านล่าง ข้อความสองบรรทัดด้วยเซอริฟตัวเอียงขนาด 290 px เข้ามาทีละตัวอักษร แต่ละตัวอักษรเลื่อนขึ้น 36 px และคลายเบลอใน 0.16 วินาที ห่างกัน 0.02 วินาทีในบรรทัดแรก และ 0.035 วินาทีในบรรทัดที่สอง บรรทัดแรกเป็นสีอ่อนและเริ่มที่ x 334 (ตัวอย่าง "Ideas in") บรรทัดที่สองเป็นสีชมพูและจบที่ x 1438 (ตัวอย่าง "motion.") 11. 12.73–13.07 วินาที กลิตช์ ชิ้นส่วนของตัวอักษรกระโดดไปด้านข้าง เฟรมกลับสีสองครั้ง บล็อกเล็กๆ สีม่วง เหลือง และชมพูกะพริบ และตัวอักษรแยกเป็นสีชมพูกับสีเขียวน้ำทะเล กรอบบรอดแคสต์และตัวนับของมันหายไป 12. 13.07–15.0 วินาที การ์ดปิดท้ายบนสีเกือบดำ - แฟลชสีซีดค่อยๆ จางหาย (0.26 วินาที) - ตัวโลโก้คำหนาขนาด 260 px ("[your brand]") ผุดขึ้นทีละตัวอักษรจากด้านหลังเส้นฐาน (back.out(1.6), 0.32 วินาที ห่างกัน 0.05 วินาที) - สัญลักษณ์โลโก้ของฉันหล่นจากด้านบนเหมือนลูกบอลในอินโทร บีบตัวเมื่อลงที่ 13.51 วินาที และนิ่งลงเป็นจุดปิดท้ายของตัวโลโก้คำ - เส้นบางวาดใต้ล็อกอัป (power3.out, 0.3 วินาที) - บรรทัดโมโนที่เว้นระยะกว้างถอดรหัสใต้นั้น จากตัวอักษรสีชมพูที่สลับสับสนเป็นตัวอักษรสีอ่อน (13.76–14.6 วินาที) - คำเรียกให้ลงมือทำเซอริฟตัวเอียงสีชมพูเฟดขึ้นที่ 14.33 วินาที (ตัวอย่าง "try it free.") - แถวจางๆ ของฟีเจอร์สั้นๆ สี่ข้อเฟดเข้าที่ด้านล่าง ค้างการ์ดปิดท้ายไว้จนถึง 15 วินาที </structure> <composition> - โทนสี: - สีเกือบดำ #0D0B1E สำหรับพื้นหลังมืด - อินดิโกเข้ม #1C0B5D สำหรับตัวอักษรเข้มและฉาก 3D - หน้าสีอ่อน #FAF9FF สำหรับพื้นหลังอ่อนและตัวอักษรอ่อน - ลาเวนเดอร์ #F0EDFF สำหรับแผงนุ่ม - สีหม่น #6B6385 สำหรับคำบรรยาย และ #E9E4F2 สำหรับเส้น - สีเน้น: ชมพูหลัก #FB2D89 ม่วงรอง #7C6CF2 ส้มอุ่น #FE9117 และสีขาว - เหลือง #FFD23F และเขียวน้ำทะเล #2DD4B0 ใช้เป็นจุดกลิตช์เท่านั้น - ถ้าฉันให้สีแบรนด์ ให้สลับเข้าตามบทบาท - ฟอนต์: Roboto Flex น้ำหนัก 900 ระยะห่างตัวอักษรแน่น (-0.035 em) สำหรับทุกชื่อเรื่อง JetBrains Mono สำหรับกรอบ คำบรรยาย และบรรทัดคอมเมนต์ Instrument Serif Italic สำหรับข้อความสองบรรทัดและคำเรียกให้ลงมือทำ - วิกเน็ตต์ด้านข้างนุ่มๆ เข้มขึ้นเฉพาะขอบซ้ายและขวา: ประมาณ -8 % ที่กลางขอบ และ -12 % ที่มุม - กรอบสไตล์บรอดแคสต์ทับทุกอย่างจนถึงกลิตช์: - วงเล็บมุมขนาด 26 px - ชื่อเรื่องที่ซ้ายบน (ตัวอย่าง "[YOUR BRAND] / YOUR TAGLINE") - ไทม์โค้ดที่เดินอยู่ที่ขวาบน (00:00:SS:FF ที่ 60 fps) - ชื่อบทปัจจุบันที่ซ้ายล่าง - ตัวนับเฟรม "NNN / 900" พร้อมแถบความคืบหน้า 300 px ที่ขวาล่าง - ทุกส่วนเป็นสีอ่อนที่ความทึบ 0.9 ในโหมดผสม exclusion จึงกลายเป็นสีเข้มบนฉากอ่อนและมีสีอมบนสีชมพูหรือสีม่วง กรอบเฟดเข้าที่ 0.3 วินาที </composition> <techniques> - ทุกการเปลี่ยนฉากอยู่บนกริดบีต 28 เฟรม ฉากและไวป์ซ้อนกันไม่กี่เฟรม จึงไม่มีเฟรมใดว่างเปล่า - ทำทรานซิชันให้หลากหลาย: ลูกบอลพองเป็นพื้นหลังถัดไป การตัดสีแรงๆ ระหว่างสี่คำ ไวป์แถบแนวตั้ง ไวป์แถบแนวนอน แฟลชพร้อมวงช็อก และกลิตช์แยก RGB เข้าสู่การ์ดปิดท้าย - ให้ลูกบอลและสัญลักษณ์โลโก้มีการเคลื่อนไหวเชิงกายภาพ: บีบตัวเมื่อกระแทก ยืดตัวตอนตก โมชันเบลอเล็กน้อยเมื่อเร็ว - ใช้การเข้าทีละตัวอักษรตลอด แต่ละคำมีอีซของตัวเอง (การลงแบบ expo.out การผุดจากมาสก์แบบ back.out การเด้งบนโน้ต 1/32) และคลายเบลอเมื่อตัวอักษรมาถึง - ให้ทุกอย่างคมชัดเป็นเวกเตอร์: อนุภาค จุด และเส้นเล็กและคม ส่วนแสงเรืองนุ่มและอยู่ด้านหลังตัวอักษร </techniques> <music> ทำดนตรีเฮาส์ต้นฉบับที่ 128.57 BPM ยาว 15 วินาทีพอดี วางบนกริดบีต - อินโทร: แพดโปร่งๆ พร้อมเสียงดีดฟองๆ - จากฮิตที่ 1.867 วินาที: กรูฟเต็มรูปแบบ มีเตะสี่จังหวะตรง แคลป ไฮแฮต และเบสไซด์เชน - ตอนจบ: ไรเซอร์และกลิตช์เข้าสู่ฮิตสุดท้ายใหญ่ครั้งเดียวที่ 13.07 วินาที จากนั้นคอร์ดปิดก้องไปจนถึง 15 วินาที </music> <sound> บนดนตรี ให้เพิ่มเสียงฮิตที่แต่งขึ้นสำหรับการตัด: - ไรเซอร์เข้าสู่บูมที่ฟิลล์ 1.867 วินาที - วูชสั้นๆ ที่พีกตรงทุกการตัดคำและทุกไวป์ - คลิกนุ่มๆ ที่คลื่นรูปทรง - บูมเล็กๆ และเสียงติ๊กแก้วที่แฟลชอนุภาค - วูชแบบเส้นลากเมื่ออนุภาคออกไป - ซับดรอปเข้าสู่ฉาก 3D - ไรเซอร์และเสียงติ๊กกลิตช์ดิจิทัลเข้าสู่บูมสุดท้ายที่ 13.07 วินาที - เสียงระฆังเมื่อสัญลักษณ์โลโก้ลงที่ 13.51 วินาที ไม่มีเสียงบรรยาย มิกซ์ที่ประมาณ -14 LUFS ทรูพีกต่ำกว่า -1 dBTP </sound> <references> โชว์รีลเปิดตัวสินค้าเทคโนโลยีในสไตล์รีลแบรนด์เคลื่อนไหวเรียบหรู: โอเวอร์เลย์ HUD แบบบรอดแคสต์ ไทโปกราฟีเคลื่อนไหว อนุภาคเจเนอเรทีฟ กลุ่มจุด 3D ที่หมุนอยู่ และแดชบอร์ด UI สะอาดตา </references>

จดหมายข่าว

เราส่งพรอมต์ใหม่ที่ดีที่สุดจากคอมมูนิตี้พร้อมวิดีโอให้คุณ ไม่มีสแปม และทุกฉบับมีลิงก์ยกเลิกการรับ

เราใช้อีเมลของคุณสำหรับจดหมายข่าวนี้เท่านั้น นโยบายความเป็นส่วนตัว

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

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