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

TH

เปิดแอป beta

Simple Motion

โชว์รีลโมชันดีไซน์แปดเทคนิค

โชว์รีลแนวนอน 15 วินาที แปดฉากตัดฉับพลัน: ชื่อเรื่อง รูปทรงมอร์ฟ กริด LED คำจากอนุภาค ของเหลว กำแพงตัวอักษร ลูกบาศก์ 3D และการ์ดปิดท้าย

รหัสพรอมต์ ONOเผยแพร่เมื่อ 11 พฤศจิกายน 2569

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

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

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

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

แนวคิด

สร้างโชว์รีลโมชันดีไซน์ความยาว 15 วินาที แนวนอน 1920x1080 ที่ 60 fps ใช้แปดฉาก: เจ็ดฉากยาวพอดี 2 วินาทีและการ์ดปิดท้าย 1 วินาที ทุกการตัดต้องตกบนจังหวะแรกของเพลงเฮาส์ 120 BPM ให้รู้สึกเหมือนรีลของโมชันดีไซเนอร์ที่แม่นยำและขี้เล่น โดยใช้เทคนิคต่างกันในทุกฉาก ใช้การตัดแบบฉับพลันเท่านั้น ห้ามใช้เฟดระหว่างฉาก ยกเว้นเฟดเป็นสีดำตอนท้าย ใช้หน้ากราฟิกแบบเรียบ สีชมพูเป็นสีเน้นเพียงสีเดียว ตัวอักษรกรอเทสก์หนาและชิดแน่น และการลากเงาแบบชัตเตอร์ในทุกการเคลื่อนไหวที่เร็ว หลีกเลี่ยงรูปภาพ ฟุตเทจ และเสียงพากย์ ห้ามมีตัวอักษรใดเลยล้นข้ามขอบลูกบาศก์ คำบนกำแพงตัวอักษรต้องไม่เรียงเป็นคอลัมน์เด็ดขาด ห้ามมีอนุภาคค้างหลังการระเบิด

โครงสร้าง

0-2 วินาที ชื่อเรื่องบนหน้าสีอ่อน เส้นสีเกือบดำขนาด 1500 x 6 px ขยายจากกึ่งกลางเฟรม (scaleX, expo.out 0.45 วินาที) ที่ 0.5 วินาที คำแรก เช่น "SHOW" ผุดขึ้นจากเส้นด้านล่าง ที่ 1.0 วินาที คำที่สอง เช่น "REEL" หล่นลงจากเส้นด้านบน (เปลี่ยนทั้งสองคำเป็นของคุณ) แต่ละคำอยู่ในกล่องที่ถูกตัดที่เส้น: ระยะเคลื่อน 290 px, expo.out 0.45 วินาที, Geist Bold 248 px, จัดกึ่งกลาง ที่ 1.5 วินาที ป้ายมุมสามป้ายค่อย ๆ ปรากฏใน 0.1 วินาที: ชื่อที่มุมบนซ้าย ไทม์โค้ดที่เดินแม่นยำระดับเฟรม (HH:MM:SS:FF) ที่มุมบนขวา และรายการฟีเจอร์ เช่น "TYPE / SHAPES / 3D / SOUND" ที่มุมล่างซ้ายด้วยโทนสีจางหม่น ตั้งแต่ 1.6 วินาที เลเยอร์ทั้งหมดซูมจาก 1x เป็น 41x ใน 0.4 วินาทีด้วย expo.in เข้าไปที่จุดภายในเส้นหนาของคำบน (ขีดขวางของตัว T ใช้ได้) เฟรมจบด้วยสีเกือบดำเต็มจอและตัดเข้าฉากถัดไปโดยไม่ให้เห็น
2-4 วินาที รูปทรงบนพื้นสีเกือบดำ ป้ายบท เช่น "01 / FIRST STEP" วงกลมสีชมพูเด้งออกจากความว่างเปล่าจนกว้าง 512 px พร้อมการเลยจุดแบบนุ่ม ๆ หนึ่งครั้ง r = 256(1 - e^(-9t) cos 11t) ทุกครึ่งวินาทีมันเปลี่ยนรูปเป็นรูปถัดไป: สี่เหลี่ยมจัตุรัส (ด้านยาว 338 px) จากนั้นสามเหลี่ยม (รัศมีวงกลมล้อมรอบ 266) จากนั้นปลาดาวห้าแขนแบบนุ่ม แต่ละเส้นขอบถูกวาดจาก 240 จุด ซึ่งการผสมไปยังรูปถัดไปเริ่มต่างกันไม่กี่ร้อยวินาที ขอบจึงสั่นไหว 0.1 วินาที เฟรมหมุนตามเข็มนาฬิกาต่อเนื่อง: หมุนเร็วแบบ power2.inOut 30 ถึง 45 องศาเมื่อแต่ละรูปลงจอด และเลื่อนช้า ๆ ในระหว่างนั้น ทุกหนึ่งในสี่วินาที วงแหวนบางสีซีดออกจากรูปที่รัศมี 300 px และขยายถึง 980 px (expo.out, 0.95 วินาที) ขณะจางหาย
4-6 วินาที กริด LED ป้ายบท เช่น "02 / SECOND STEP" เฟรมกลายเป็นกริดขนาด 32 x 18 ของกระเบื้องสีอ่อนขนาด 56 px ระยะห่าง 60 px มีเส้นสีเกือบดำคั่นระหว่างกัน แต่ละกระเบื้องพลิกเหมือนไพ่ (ความสูง x |cos|, 180 องศา, power2.inOut 0.23 วินาที) และเปลี่ยนสีที่ครึ่งทาง การพลิกวิ่งเป็นคลื่นจากเซลล์กลางออกไปด้านนอก 0.028 วินาทีต่อเซลล์ โดยนับระยะแนวตั้ง 1.2 เท่า คลื่นเผยเซลล์ว่างสีหมึกเข้มลึกและตัวเลขพิกเซลขนาดใหญ่ในเซลล์สีชมพูสูง 13 เซลล์ เช่น "02" ที่ 5.45 วินาที การกวาดแนวตั้งวิ่งจากขวาไปซ้ายใน 0.37 วินาที และบีบเฉพาะเซลล์ว่างให้เหลือหนึ่งในสี่ของความสูงชั่วครู่
6-8 วินาที อนุภาคบนพื้นสีเกือบดำ ป้ายบท เช่น "03 / THIRD STEP" จุดสีอ่อนและสีชมพูประมาณ 2,800 จุด (3 ถึง 6 px) ลอยไปทั่วเฟรม จากนั้นรวมตัวเป็นคำ เช่น "IDEAS" ด้วย Geist Bold จัดระยะให้เต็ม x 395-1520 โดยความสูงตัวพิมพ์ใหญ่จาก y 382 ถึง 668 ใช้ sine.inOut ใน 0.42 วินาที โดยแต่ละจุดช้าลงเล็กน้อย พวกมันค้างอยู่พร้อมการสั่นหนึ่งพิกเซล ที่ 7.5 วินาที พวกมันระเบิดออกจากศูนย์กลางด้วยความเร็วที่เพิ่มขึ้น และทุกจุดออกนอกเฟรมภายใน 7.8 วินาที จุดจะลากเป็นริ้วตามเส้นทางเมื่อเคลื่อนที่เร็ว
8-10 วินาที ของเหลวบนพื้นสีชมพู ป้ายเล็กสีเกือบดำ "LIVE PREVIEW" หยดเมตาบอลสีอ่อนเจ็ดหยด หนึ่งหยดใหญ่ตรงกลางและหกหยดรอบ ๆ โคจรและหายใจ เชื่อมและรวมกันเมื่ออยู่ใกล้ ที่ 8.45 วินาที พวกมันถูกดูดเป็นหยดเดียว (power2.in 0.17 วินาที) ซึ่งคงขนาดเล็กไว้ ที่ 9.05 วินาที พวกมันถูกเหวี่ยงออกอีกครั้งด้วย back.out
10-12 วินาที กำแพงตัวอักษรบนหน้าสีอ่อน ป้าย "KINETIC TYPE" แถว Geist Bold 152 px แปดแถวที่ระยะห่าง 150 px ครอบคลุมเฟรม คำสลับระหว่างดังสีเกือบดำและเบาสีเทาจาง โดยเว้นวรรคระหว่างคำเพิ่มเล็กน้อย เช่น "MOTION IDEAS TYPE SHAPES SOUND PREVIEW" วนซ้ำ (เปลี่ยนเป็นคำฟีเจอร์ของคุณ) แถวคู่เยื้องไปเกือบเต็มรอบของคำเพื่อไม่ให้คำเรียงเป็นคอลัมน์เลย แถวคู่วิ่งไปทางซ้ายและแถวคี่วิ่งไปทางขวา แต่ละแถวเร็วกว่าแถวบน 60 px/s (900 ถึง 1320 px/s) ที่ 11.0 วินาที ทุกแถวหยุดกึก แล้วกระชากต่ออีกประมาณระยะ 0.17 วินาที (power3.inOut 0.28 วินาที) ในขณะเดียวกัน แถบสีชมพูเต็มความกว้างสูง 300 px เปิดออกจากกึ่งกลางตรงกลางเฟรม (scaleY expo.out 0.35 วินาที) ชื่อด้วย Geist Bold สีขาว 262 px เช่น "STUDIO NAME" ผุดเข้าแถบจากขอบล่าง (expo.out 0.33 วินาที)
12-14 วินาที ลูกบาศก์ 3D บนพื้นสีเกือบดำ ป้าย "3D EFFECTS" ลูกบาศก์ขนาด 514 px อยู่ในมุมมองเปอร์สเปกทีฟ (2400 px) เอียง -14.5 องศาเพื่อให้เห็นด้านบนสีหมึกเข้มลึก มันพักในมุมสามส่วนสี่และหมุนหนึ่งในสี่รอบทุกครึ่งวินาที (power3.out 0.3 วินาที) โดยแต่ละหน้าลงที่มุมเดียวกัน สี่หน้ามีคำหนาหน้าละหนึ่งคำ เช่น: "TYPE" สีเกือบดำบนสีอ่อน, "3D" สีขาวบนสีชมพู, "SHAPES" สีอ่อนบนสีเกือบดำ, "SOUND" สีชมพูบนสีอ่อน คำสั้นขนาด 200 px คำที่ยาวกว่าถูกย่อเหลือประมาณ 85% ของหน้า เพื่อให้ทุกคำพอดีภายในหน้าโดยมีระยะขอบ
14-15 วินาที การ์ดปิดท้ายบนพื้นสีเกือบดำ ชื่อสองคำด้วย Geist Bold 224 px เช่น "Studio Name" คำแรกสีอ่อนและคำที่สองสีชมพู ผุดขึ้นจากขอบคมใต้เส้นฐานเล็กน้อย (expo.out 0.45 วินาที) ที่ 14.15 วินาที ประโยค เช่น "your tagline · your website" ตามมาด้วย Geist Medium 44 px ที่ 14.25 วินาที ข้อความเรียกให้ลงมือทำตัวเล็ก ๆ เช่น "TRY IT FREE" ปรากฏด้วย Geist Mono ตั้งแต่ 14.55 วินาที การ์ดทั้งใบเฟดเชิงเส้นเป็นสีดำ ถึงสีดำในเฟรมสุดท้าย

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

Palette:

หน้าสีอ่อน #FAF9FF
สีเกือบดำ #0D0B1E สำหรับหน้าสีเข้มและตัวอักษรสีเข้ม
สีหมึกเข้มลึก #1C0B5D สำหรับแผงสีเข้ม เซลล์ว่างในกริด และด้านบนของลูกบาศก์
สีเน้นสีชมพูหนึ่งเดียว #FB2D89
สีขาว #FFFFFF สำหรับตัวอักษรบนสีชมพู
สีหม่น #6B6385 สำหรับป้ายเล็กบนหน้าสีอ่อน และที่ความโปร่งแสง 24% สำหรับคำเบาของกำแพงตัวอักษร
ป้ายบทบนสีเกือบดำเป็น #E9E4F2 ที่ความโปร่งแสง 55%
Type:
Geist Bold สำหรับทุกอย่างที่ใหญ่ จัดชิดแน่น: letter-spacing -0.07em, line-height 1
Geist Medium เฉพาะประโยคบนการ์ดปิดท้าย
Geist Mono 22 px สำหรับป้ายมุม วางห่างจากซ้าย 64 px และห่างจากบน 60 px
องค์ประกอบใหญ่อยู่กึ่งกลางเฟรม โดยมีพื้นที่ว่างกว้างรอบองค์ประกอบเอกเพียงหนึ่งเดียวของแต่ละฉาก

เทคนิค

ทุกการเคลื่อนไหวที่เร็วมีการลากเงาแบบชัตเตอร์ เรนเดอร์สำเนาสามชุดของเลเยอร์ที่เคลื่อนไหวโดยสุ่มตัวอย่างห่างกันหนึ่งในสี่เฟรม (t - 1/240 s, t, t + 1/240 s) และซ้อนด้วยความทึบ 1, 1/2 และ 1/3 ซึ่งเป็นการหาค่าเฉลี่ย การเคลื่อนไหวจึงทิ้งภาพเงาสีเทาเป็นขั้น ๆ ฉากที่วาดบน canvas (มอร์ฟ กริด อนุภาค ของเหลว) หาค่าเฉลี่ยสามรอบแบบเดียวกัน คำเข้ามาโดยผุดขึ้นหรือหล่นลงจากขอบตัดที่คม ด้วย expo.out ไม่เคยใช้การเฟดเข้า การตัดครั้งแรกถูกซ่อนด้วยการซูม expo.in เข้าสู่เส้นของตัวอักษร การเปลี่ยนอื่นทั้งหมดเป็นการตัดฉับพลันบนจังหวะแรก การเฟดเชิงเส้นเป็นสีดำของการ์ดปิดท้ายเป็นเฟดเดียวเท่านั้น

ดนตรี

เพลงเฮาส์ออริจินัลที่ 120 BPM ยาว 15 วินาทีพอดี หนึ่งห้องต่อหนึ่งฉาก ทั้งหมดอยู่บนกริดจังหวะของคอมโพสิชัน มีกลองเตะแบบ four-on-the-floor เสียงแคลปที่จังหวะ 2 และ 4 ไฮแฮตเปิดบนจังหวะยก เบสไลน์ฟังกี้เด้งดึ๋ง และคอร์ดสแตบสว่างบนจังหวะยก ห้องแรกใต้ชื่อเรื่องเป็นการไต่ระดับเบา ๆ ไรเซอร์และวูชสั้น ๆ วิ่งเข้าสู่การซูม และกรูฟเต็มระดับดรอปที่ 2.0 วินาทีพร้อมเสียงบูม กลองเตะทุกครั้งตกบนกริด ทุกการตัดจึงตกบนจังหวะแรก เพลงเฟดออกในครึ่งวินาทีสุดท้าย มิกซ์ที่ประมาณ -14 LUFS ทรูพีกต่ำกว่า -1 dBTP

เสียง

เสียงเอฟเฟกต์วางตามภาพ ซ้อนบนเพลง:

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

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

ตัวอย่างเทคนิค “คำที่แยกออกจากเส้นที่ขยายตัว” — ที่ 0:01 ในวิดีโอ

ตัวอักษร

คำที่แยกออกจากเส้นที่ขยายตัว

เส้นหนา 6 px ขยายออกจากกึ่งกลาง (scaleX จาก 0 ถึง 1, expo.out 0.45 s) คำแรกพุ่งขึ้นจากเส้นด้านล่าง ส่วนคำที่สองหล่นลงจากเส้นด้านบน ห่างกัน 0.5 s แต่ละคำอยู่ในกล่อง overflow-hidden ของตัวเองซึ่งขอบคือเส้นนั้น จึงดูเหมือนออกมาจากเส้น (y จาก 290 px ถึง 0, expo.out 0.45 s) ใช้ฟอนต์ grotesk หนาขนาด 248 px ระยะตัวอักษร -0.07em สีเกือบดำบนหน้าสว่าง

ใช้เมื่อไร ชื่อเรื่องเปิดที่ต้องการให้ดูเป็นระบบและแม่นยำ ใช้คำสั้น ๆ สองคำซ้อนกัน

แสดงโค้ด

<!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=Geist:wght@400;500;700&family=Geist+Mono&display=swap");
html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: "Geist", sans-serif; }
.scene { position: absolute; inset: 0; overflow: hidden; }
.scene { background: #faf9ff; }
.rule { position: absolute; left: 210px; top: 537px; width: 1500px; height: 6px; background: #0d0b1e; transform: scaleX(0); }
.box { position: absolute; left: 0; width: 1920px; overflow: hidden; }
.box.top { top: 0; height: 534px; }      /* bottom edge = the rule */
.box.bottom { top: 566px; height: 514px; } /* top edge just under the rule */
.word { position: absolute; left: 0; width: 1920px; text-align: center; white-space: nowrap;
  font: 700 248px/1 "Geist", sans-serif; letter-spacing: -0.07em; color: #0d0b1e; }
.box.top .word { top: 316px; }
.box.bottom .word { top: 0; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1920" data-height="1080">
  <div class="scene clip" data-start="0" data-duration="3">
    <div class="rule"></div>
    <div class="box top"><div class="word">"SHOW"</div></div>
    <div class="box bottom"><div class="word">"REEL"</div></div>
  </div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
const RISE = 290;   // travel of each word, about one line height
const DUR = 0.45;   // every move: expo.out over 0.45 s
tl.fromTo(".rule", { scaleX: 0 }, { scaleX: 1, duration: DUR, ease: "expo.out" }, 0);
tl.fromTo(".box.top .word", { y: RISE }, { y: 0, duration: DUR, ease: "expo.out" }, 0.5);
tl.fromTo(".box.bottom .word", { y: -RISE }, { y: 0, duration: DUR, ease: "expo.out" }, 1.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:01 ในวิดีโอ

ทรานซิชัน

ซูมทะลุเส้นของตัวอักษร พร้อมรอยเลื่อนชัตเตอร์สามการรับแสง

เลเยอร์ชื่อเรื่องทั้งหมดขยายจาก 1 เป็น 41 ใน 0.4 s ด้วย expo.in รอบจุดภายในเส้นหนา (ที่นี่คือขีดของตัว T) ทำให้เฟรมสุดท้ายเต็มด้วยสีตัวอักษร ซึ่งเป็นพื้นหลังของฉากถัดไป เป็นการตัดต่อที่ไร้รอยต่อ รอยเลื่อนคือสำเนาของเลเยอร์สามชุดที่สุ่มห่างกันหนึ่งในสี่เฟรม (t - 1/240 s, t, t + 1/240 s) ซ้อนกันที่ opacity 1, 1/2 และ 1/3 ซึ่งเป็นค่าเฉลี่ยที่แน่นอนของสามการรับแสง การเคลื่อนที่เร็วจึงทิ้งภาพซ้อนสีเทาเป็นขั้นเหมือนชัตเตอร์จริง

ใช้เมื่อไร การตัดต่อแบบกระชากจากชื่อเรื่องสว่างเข้าสู่ฉากมืด เทคนิครอยเลื่อนใช้ได้กับการเคลื่อนไหวเร็วใด ๆ ใน DOM

แสดงโค้ด

<!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=Geist:wght@400;500;700&family=Geist+Mono&display=swap");
html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: "Geist", sans-serif; }
.scene { position: absolute; inset: 0; overflow: hidden; }
.scene { background: #faf9ff; }
.layer { position: absolute; inset: 0; background: #faf9ff; }
.zoom { position: absolute; inset: 0; transform-origin: 956px 368px; } /* a point inside the T's bar */
.word { position: absolute; left: 0; top: 316px; width: 1920px; text-align: center; white-space: nowrap;
  font: 700 248px/1 "Geist", sans-serif; letter-spacing: -0.07em; color: #0d0b1e; }
.next { position: absolute; inset: 0; background: #0d0b1e; }
.dot { position: absolute; left: 910px; top: 490px; width: 100px; height: 100px; border-radius: 50%; background: #fb2d89; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1920" data-height="1080">
  <div class="scene clip" data-start="0" data-duration="3">
    <div id="stack"></div>
    <div class="next clip" data-start="2" data-duration="1"><div class="dot"></div></div>
  </div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
const SH = 0.25 / 60;                 // a quarter frame at 60 fps
const SAMPLES = [-SH, 0, SH], OPACITY = [1, 1 / 2, 1 / 3];
const expoIn = gsap.parseEase("expo.in");
const stack = document.getElementById("stack");
const layers = SAMPLES.map((dt, i) => {
  const L = document.createElement("div");
  L.className = "layer"; L.style.opacity = OPACITY[i];
  L.innerHTML = '<div class="zoom"><div class="word">MOTION</div></div>';
  stack.appendChild(L);
  return { dt, zoom: L.querySelector(".zoom") };
});
function pose(L, t) {
  const p = Math.min(1, Math.max(0, (t - 1.6) / 0.4)); // zoom from 1.6 s to 2.0 s
  L.zoom.style.transform = "scale(" + (1 + 40 * expoIn(p)).toFixed(4) + ")";
}
const clock = { t: 0 };
tl.to(clock, { t: 3, duration: 3, ease: "none", onUpdate: () => layers.forEach((L) => pose(L, clock.t + L.dt)) }, 0);
layers.forEach((L) => pose(L, L.dt));
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 ในวิดีโอ

รูปทรง

มอร์ฟรูปทรงแบบรัศมีที่โยกไหว พร้อมวงคลื่น

พาธ SVG เส้นเดียวถูกวาดใหม่ทุกเฟรมจาก 240 จุดรอบจุดศูนย์กลาง แต่ละรูปทรง (วงกลม สี่เหลี่ยม สามเหลี่ยม ดาวห้าแฉกนุ่ม ๆ) เป็นฟังก์ชันรัศมีตามมุม และแต่ละจุดผสมไปยังรูปทรงถัดไปใน 0.07 s พร้อมหน่วงเล็กน้อยของตัวเอง (0 ถึง 0.05 s ผลรวมของคลื่นไซน์) ทำให้เส้นขอบโยกไหวระหว่างมอร์ฟ กรอบหมุนตามเข็มนาฬิกาด้วยการหมุนเร็ว power2.inOut เมื่อแต่ละรูปทรงลงตัว และเลื่อนช้า ๆ ระหว่างนั้น วงแหวนบางออกจากรูปทรงทุกหนึ่งในสี่วินาทีและขยายจาก 300 เป็น 980 px (expo.out, 0.95 s) พร้อมจางหาย

ใช้เมื่อไร จังหวะสนุก ๆ ของ 'รูปทรง' ตามเพลง มอร์ฟหนึ่งครั้งต่อหนึ่งบีต

แสดงโค้ด

<!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=Geist:wght@400;500;700&family=Geist+Mono&display=swap");
html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: "Geist", sans-serif; }
.scene { position: absolute; inset: 0; overflow: hidden; }
.scene { background: #0d0b1e; }
.ring { position: absolute; left: -20px; top: -440px; width: 1960px; height: 1960px; opacity: 0; }
#turn { position: absolute; inset: 0; transform-origin: 960px 540px; }
svg { position: absolute; left: 0; top: 0; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="2" data-width="1920" data-height="1080">
  <div class="scene clip" data-start="0" data-duration="2">
    <div id="rings"></div>
    <div id="turn"><svg width="1920" height="1080" viewBox="0 0 1920 1080"><path id="shape" fill="#fb2d89" d=""></path></svg></div>
  </div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
const TAU = Math.PI * 2, N = 240, CX = 960, CY = 540, d2r = Math.PI / 180;
const rings = [];
for (let k = 0; k < 8; k++) {
  const d = document.createElement("div"); d.className = "ring";
  d.innerHTML = '<svg width="1960" height="1960" viewBox="0 0 1960 1960"><circle cx="980" cy="980" r="978" fill="none" stroke="#faf9ff" stroke-width="2.5" vector-effect="non-scaling-stroke"/></svg>';
  document.getElementById("rings").appendChild(d); rings.push(d);
}
// radius of each shape at angle a, in the turning frame
const circleR = (t) => { const u = Math.max(0, t - 0.025); return 256 * (1 - Math.exp(-9 * u) * Math.cos(11 * u)); };
const polyR = (a, n, rc, v) => { const ap = rc * Math.cos(Math.PI / n), seg = TAU / n; const x = (((a - v) % seg) + seg) % seg; return ap / Math.cos(x - Math.PI / n); };
const squareR = (a) => 169 / Math.max(Math.abs(Math.cos(a)), Math.abs(Math.sin(a)));
const starR = (a) => { const c = (1 + Math.cos(5 * (a + Math.PI / 2))) / 2; return 108 + 154 * c * c; };
const shapes = [(a, t) => circleR(t), (a) => squareR(a), (a) => polyR(a + 22 * d2r, 3, 266, -Math.PI / 2), (a) => starR(a + 100 * d2r)];
const morphAt = [0.5, 1.0, 1.5];
const delay = Array.from({ length: N }, (_, i) => { const a = (i / N) * TAU; return 0.03 * (0.5 + 0.5 * Math.sin(3 * a + 1.3)) + 0.02 * (0.5 + 0.5 * Math.sin(7 * a + 0.4)); });
const morphE = gsap.parseEase("power2.inOut"), ringE = gsap.parseEase("expo.out");
const path = document.getElementById("shape");
function draw(t) {
  let k = 0; while (k < 3 && t >= morphAt[k]) k++;
  const from = shapes[Math.max(0, k - 1)], to = shapes[k], m0 = k > 0 ? morphAt[k - 1] : -1;
  let d = "";
  for (let i = 0; i < N; i++) {
    const a = (i / N) * TAU;
    let r = shapes[0](a, t);
    if (k > 0) { const e = morphE(Math.min(1, Math.max(0, (t - m0 - delay[i]) / 0.07))); r = from(a, t) * (1 - e) + to(a, t) * e; }
    d += (i ? "L" : "M") + (CX + r * Math.cos(a)).toFixed(1) + " " + (CY + r * Math.sin(a)).toFixed(1);
  }
  path.setAttribute("d", d + "Z");
  rings.forEach((el, j) => {
    const age = t - j * 0.25, p = age / 0.95;
    if (age < 0 || p >= 1) { el.style.opacity = 0; return; }
    el.style.opacity = 0.32 * (1 - p);
    el.style.transform = "scale(" + (300 / 980 + (1 - 300 / 980) * ringE(p)) + ")";
  });
}
const clock = { t: 0 };
tl.to(clock, { t: 2, duration: 2, ease: "none", onUpdate: () => draw(clock.t) }, 0);
// clockwise spin as each shape lands, slow drift between
tl.set("#turn", { rotation: -15 }, 0);
tl.to("#turn", { rotation: 32, duration: 0.25, ease: "power2.inOut" }, 0.52);
tl.to("#turn", { rotation: 45, duration: 0.23, ease: "sine.out" }, 0.77);
tl.to("#turn", { rotation: 82, duration: 0.2, ease: "power2.inOut" }, 1.0);
tl.to("#turn", { rotation: 100, duration: 0.4, ease: "sine.out" }, 1.2);
tl.to("#turn", { rotation: 136, duration: 0.4, ease: "power2.out" }, 1.6);
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 ในวิดีโอ

ทรานซิชัน

คลื่นพลิกกริดพิกเซลที่เผยคำที่สว่างขึ้น

กริด 32 x 18 ช่อง แต่ละช่อง 56 px ระยะห่าง 60 px บนพื้นเกือบดำ วาดบน canvas แต่ละช่องพลิกเหมือนไพ่ (ความสูง x |cos(มุม)|, มุม 0 ถึง 180 องศา, power2.inOut ใน 0.23 s) และเปลี่ยนสีที่ครึ่งทาง เวลาพลิกเป็นคลื่นออกจากช่องกลาง (0.028 s ต่อช่อง นับระยะแนวตั้ง 1.2 เท่า) จึงเปิดเป็นม่านรูม่านตาที่ขรุขระพร้อมช่องแนวนอน คำถูกแรสเตอร์จากฟอนต์เป็นช่องครั้งเดียว (ช่องสว่างเมื่ออักษรครอบคลุมส่วนใหญ่) ภายหลังมีการกวาดแนวตั้งจากขวาไปซ้ายและบีบเฉพาะช่องว่างหนึ่งบีต

ใช้เมื่อไร การเผยแบบดิจิทัลสไตล์ป้ายไฟ LED สำหรับตัวเลขหรือคำสั้น ๆ

แสดงโค้ด

<!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=Geist:wght@400;500;700&family=Geist+Mono&display=swap");
html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: "Geist", sans-serif; }
.scene { position: absolute; inset: 0; overflow: hidden; }
.scene { background: #0d0b1e; }
canvas { position: absolute; left: 0; top: 0; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="2" data-width="1920" data-height="1080">
  <div class="scene clip" data-start="0" data-duration="2">
    <canvas id="grid" width="1920" height="1080"></canvas>
  </div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
const COLS = 32, ROWS = 18, PITCH = 60, TILE = 56, WORD = "02";
const C = { light: "#faf9ff", tile: "#1c0b5d", lit: "#fb2d89", gap: "#0d0b1e" };
let PIX = [];
function raster(word) {   // the word into 32 x 18 cells: cap height 13 cells, 26 cells wide at most
  const S = 10, cv = document.createElement("canvas"); cv.width = COLS * S; cv.height = ROWS * S;
  const g = cv.getContext("2d"), size = (13 / 0.708) * S;
  g.font = "700 " + size + 'px "Geist"';
  const m = g.measureText(word), w = m.actualBoundingBoxLeft + m.actualBoundingBoxRight;
  g.fillStyle = "#fff"; g.fillText(word, 16 * S - w / 2 + m.actualBoundingBoxLeft, 15 * S);
  const d = g.getImageData(0, 0, cv.width, cv.height).data, rows = [];
  for (let r = 0; r < ROWS; r++) { let row = ""; for (let c = 0; c < COLS; c++) { let on = 0; for (let j = 1; j < S; j += 2) for (let i = 1; i < S; i += 2) if (d[((r * S + j) * cv.width + c * S + i) * 4 + 3] > 127) on++; row += on > 12 ? "#" : "."; } rows.push(row); }
  return rows;
}
const mid = [];
for (let r = 0; r < ROWS; r++) for (let c = 0; c < COLS; c++) { const dx = c - 16, dy = (r - 9) * 1.2; mid.push(0.19 + 0.0277 * Math.hypot(dx, dy)); }
const FLIP = 0.2333, flipE = gsap.parseEase("power2.inOut");
const sweep = (c) => 1.3 + (8.5 + 0.71 * (31 - c)) / 60;
const ctx = document.getElementById("grid").getContext("2d");
function draw(t) {
  ctx.fillStyle = C.gap; ctx.fillRect(0, 0, 1920, 1080);
  for (let r = 0; r < ROWS; r++) for (let c = 0; c < COLS; c++) {
    const lit = PIX.length && PIX[r][c] === "#";
    const p = Math.min(1, Math.max(0, (t - mid[r * COLS + c] + FLIP / 2) / FLIP)), a = Math.PI * flipE(p);
    let s = Math.abs(Math.cos(a));
    if (!lit && p >= 1) { const d = (t - sweep(c)) / 0.034; s *= 1 - 0.75 * Math.exp(-d * d); }
    const h = TILE * s; if (h < 0.3) continue;
    ctx.fillStyle = a < Math.PI / 2 ? C.light : lit ? C.lit : C.tile;
    ctx.fillRect(c * PITCH + 2, r * PITCH + 2 + (TILE - h) / 2, TILE, h);
  }
}
tl.eventCallback("onUpdate", () => draw(tl.time()));
tl.to({}, { duration: 2 }, 0);
document.fonts.load('700 100px "Geist"').then(() => { PIX = raster(WORD); 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:07 ในวิดีโอ

อนุภาค

คำจากอนุภาค: รวมตัว ค้าง ระเบิด

จุดประมาณ 2,800 จุด (รัศมี 1.6 ถึง 3.2 px สามในสี่สว่าง หนึ่งในสี่สีเน้น) เริ่มกระจายทั่วเฟรมและลอยไป เป้าหมายคือจุดสุ่มภายในตัวอักษรของคำที่วาดครั้งเดียวบน canvas นอกจอ โดยเว้นระยะตัวอักษรให้เต็มกล่องคงที่ แต่ละจุดเคลื่อนด้วย sine.inOut ใน 0.42 s หลังหน่วงของตัวเอง (0 ถึง 0.05 s) สั่นหนึ่งพิกเซลขณะที่คำค้างอยู่ จากนั้นทุกอย่างระเบิดออกจากศูนย์กลาง คำพองขึ้น (scale 1 + 40 u^2) และแรงผลักรัศมีที่เพิ่มตาม u^3 เหวี่ยงทุกจุดพ้นเฟรมใน 0.3 s จึงไม่เหลืออะไรตอนตัดต่อ แต่ละจุดวาดเป็นเส้นปลายมนจากตำแหน่งก่อนหน้าหนึ่งในสามเฟรมถึงหลังหนึ่งในสามเฟรม จุดที่เร็วจึงเป็นเส้นลาก

ใช้เมื่อไร เปลี่ยนความคิดหรือคำให้เป็นสสารแล้วกลับคืน: การเผยแบบประกอบ การออกแบบระเบิด

แสดงโค้ด

<!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=Geist:wght@400;500;700&family=Geist+Mono&display=swap");
html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: "Geist", sans-serif; }
.scene { position: absolute; inset: 0; overflow: hidden; }
.scene { background: #0d0b1e; }
canvas { position: absolute; left: 0; top: 0; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="2" data-width="1920" data-height="1080">
  <div class="scene clip" data-start="0" data-duration="2">
    <canvas id="dots" width="1920" height="1080"></canvas>
  </div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
const WORD = "IDEAS", BOX = { x0: 395, x1: 1520, top: 382, base: 668 }, N = 2800;
let seed = 7; const rnd = () => { seed = (seed * 16807) % 2147483647; return seed / 2147483647; };
let P = [];
function build() {
  const c = document.createElement("canvas"); c.width = 1920; c.height = 1080; const g = c.getContext("2d");
  const size = (BOX.base - BOX.top) / 0.708; g.font = "700 " + size + 'px "Geist"';
  const ink = (ls) => { g.letterSpacing = ls + "px"; const m = g.measureText(WORD); return m.actualBoundingBoxLeft + m.actualBoundingBoxRight - ls; };
  const ls = (BOX.x1 - BOX.x0 - ink(0)) / (WORD.length - 1); g.letterSpacing = ls + "px";
  const m = g.measureText(WORD); g.fillStyle = "#fff"; g.fillText(WORD, BOX.x0 + m.actualBoundingBoxLeft, BOX.base);
  const d = g.getImageData(0, 0, 1920, 1080).data, pts = [];
  for (let y = 300; y < 760; y += 2) for (let x = 300; x < 1620; x += 2) if (d[(y * 1920 + x) * 4 + 3] > 128) pts.push([x, y]);
  P = Array.from({ length: N }, () => { const tg = pts[Math.floor(rnd() * pts.length)]; return { sx: rnd() * 1920, sy: rnd() * 1080, vx: (rnd() - 0.5) * 30, vy: (rnd() - 0.5) * 30, tx: tg[0], ty: tg[1], delay: rnd() * 0.05, r: 1.6 + rnd() * 1.6, col: rnd() < 0.24 ? "#fb2d89" : "#faf9ff", ph: rnd() * 6.28, burst: 0.7 + rnd() * 0.6 }; });
}
const gather = gsap.parseEase("sine.inOut");
function pos(p, t) {
  const fx = p.sx + p.vx * t, fy = p.sy + p.vy * t, e = gather(Math.min(1, Math.max(0, (t - 0.3 - p.delay) / 0.42)));
  let x = fx + (p.tx - fx) * e + Math.sin(t * 9 + p.ph) * 1.2 * e, y = fy + (p.ty - fy) * e + Math.cos(t * 7 + p.ph) * 1.2 * e;
  if (t > 1.5) { // swell, then fling every dot clear of the frame within 0.3 s
    const u = t - 1.5, k = 1 + 40 * p.burst * u * u, dx = x - 960, dy = y - 540, r = Math.hypot(dx, dy) || 1, push = 61000 * p.burst * u * u * u;
    x = 960 + dx * k + (dx / r) * push; y = 540 + dy * k + (dy / r) * push;
  }
  return [x, y];
}
const ctx = document.getElementById("dots").getContext("2d"); ctx.lineCap = "round";
function draw(t) {
  ctx.clearRect(0, 0, 1920, 1080);
  for (const p of P) { const a = pos(p, t - 1 / 180), b = pos(p, t + 1 / 180); ctx.strokeStyle = p.col; ctx.lineWidth = p.r * 2; ctx.beginPath(); ctx.moveTo(a[0], a[1]); ctx.lineTo(b[0] + 0.01, b[1]); ctx.stroke(); }
}
tl.eventCallback("onUpdate", () => draw(tl.time()));
tl.to({}, { duration: 2 }, 0);
document.fonts.load('700 400px "Geist"').then(() => { build(); 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:09 ในวิดีโอ

รูปทรง

หยดเมตาบอลที่โคจร รวมกัน และระเบิด

หยดเจ็ดหยด (หนึ่งใหญ่ หกรอบ ๆ) เรนเดอร์เป็นสนามบน canvas ความละเอียดครึ่งหนึ่ง พิกเซลถูกเติมเมื่อผลรวมของ (radius / distance)^2 เกิน 1 โดยมีแถบนุ่ม 0.92 ถึง 1.08 สำหรับ antialiasing หยดจึงป่องและเชื่อมกันเมื่อเข้าใกล้ ดาวบริวารโคจรด้วยความเร็วเชิงมุมของตัวเองและหายใจเข้าออก เมื่อถึงบีต ระยะและขนาดถูกดูดเข้าศูนย์กลาง (power2.in, 0.17 s) คงเป็นหยดเดียว แล้วถูกเหวี่ยงออกอีกครั้งด้วย back.out เฉลี่ยสามการรับแสงเพื่อให้การเคลื่อนที่เร็วเบลอ

ใช้เมื่อไร จังหวะลื่นไหลแบบอินทรีย์ระหว่างฉากกราฟิก ช่วงลาวาแลมป์หรือ 'ของเหลว'

แสดงโค้ด

<!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=Geist:wght@400;500;700&family=Geist+Mono&display=swap");
html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: "Geist", sans-serif; }
.scene { position: absolute; inset: 0; overflow: hidden; }
.scene { background: #fb2d89; }
canvas { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="2" data-width="1920" data-height="1080">
  <div class="scene clip" data-start="0" data-duration="2">
    <canvas id="fluid" width="960" height="540"></canvas>
  </div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
const BG = [251, 45, 137], FG = [250, 249, 255], d2r = Math.PI / 180;
const SAT = [{ a: -118, d: 251, r: 85, w: 38, ph: 0.3 }, { a: -164, d: 279, r: 83, w: -30, ph: 1.9 }, { a: 149, d: 246, r: 108, w: 44, ph: 3.1 }, { a: -42, d: 296, r: 108, w: -36, ph: 4.4 }, { a: -4, d: 394, r: 90, w: 28, ph: 5.2 }, { a: 36, d: 281, r: 83, w: -48, ph: 2.6 }];
const inE = gsap.parseEase("power2.in"), outE = gsap.parseEase("back.out(1.6)"), grow = gsap.parseEase("power2.out");
const reach = (t) => t < 0.45 ? 1 : t < 0.62 ? 1 - inE((t - 0.45) / 0.17) : t < 1.05 ? 0 : t < 1.3 ? outE((t - 1.05) / 0.25) : 1;
const size = (t) => t < 0.45 ? 1 : t < 0.62 ? 1 - 0.45 * inE((t - 0.45) / 0.17) : t < 1.05 ? 0.55 : t < 1.2 ? 0.55 + 0.45 * grow((t - 1.05) / 0.15) : 1;
function balls(t) {
  const R = reach(t), S = size(t), cx = 480 + 21 * Math.sin(t * 2.1), out = [[cx, 270, 66.5 * S]];
  for (const s of SAT) { const a = (s.a + s.w * (t - 1.2)) * d2r, d = s.d * R * (1 + 0.16 * Math.sin(t * 5.7 + s.ph)) / 2; out.push([cx + d * Math.cos(a), 270 + d * Math.sin(a), (s.r / 2) * S]); }
  return out;
}
const ctx = document.getElementById("fluid").getContext("2d"), img = ctx.createImageData(960, 540), px = img.data, acc = new Float32Array(960 * 540);
function draw(t) {
  acc.fill(0);
  for (const ts of [t - 1 / 180, t, t + 1 / 180]) {
    const B = balls(ts);
    for (let y = 0; y < 540; y++) for (let x = 0; x < 960; x++) {
      let f = 0; for (const b of B) { const dx = x + 0.5 - b[0], dy = y + 0.5 - b[1]; f += (b[2] * b[2]) / (dx * dx + dy * dy + 0.01); }
      acc[y * 960 + x] += (f <= 0.92 ? 0 : f >= 1.08 ? 1 : (f - 0.92) / 0.16) / 3;
    }
  }
  for (let i = 0, j = 0; i < acc.length; i++, j += 4) { const a = acc[i]; px[j] = BG[0] + (FG[0] - BG[0]) * a; px[j + 1] = BG[1] + (FG[1] - BG[1]) * a; px[j + 2] = BG[2] + (FG[2] - BG[2]) * a; px[j + 3] = 255; }
  ctx.putImageData(img, 0, 0);
}
tl.eventCallback("onUpdate", () => draw(tl.time()));
tl.to({}, { duration: 2 }, 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:11 ในวิดีโอ

ตัวอักษร

กำแพงตัวอักษรเลื่อนสวนทางที่หยุดกึก กระตุก และเปิดแถบ

แถวตัวพิมพ์ใหญ่หนาแปดแถวขนาด 152 px ระยะ 150 px เต็มเฟรม คำสลับกันระหว่างดัง (เกือบดำ) กับเบา (เทาหม่นที่ 24% ราว 1.4:1 บนหน้า) จัดวางตามความกว้างของฟอนต์เองพร้อมเว้นวรรคเพิ่มเล็กน้อย แถวคู่เริ่มช้ากว่าแถวคี่เกือบหนึ่งรอบคำ เพื่อไม่ให้คำเรียงเป็นคอลัมน์ แถวคู่วิ่งซ้าย แถวคี่วิ่งขวา แต่ละแถวเร็วกว่าแถวบน 60 px/s (900 ถึง 1320 px/s) เมื่อถึงบีตจะหยุดกึก แล้วกระตุกไปข้างหน้าเท่าระยะ 0.173 s ด้วย power3.inOut ใน 0.28 s ขณะหยุด แถบสีเน้นเต็มความกว้างเปิดจากกึ่งกลาง (scaleY expo.out 0.35 s) และชื่อพุ่งขึ้นในแถบจากขอบล่างของแถบ (expo.out 0.33 s)

ใช้เมื่อไร จังหวะแถลงการณ์หรือคำหลักที่ดังกึกก้อง เพื่อให้ชื่อผลิตภัณฑ์หรือบุคคลปรากฏ

แสดงโค้ด

<!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=Geist:wght@400;500;700&family=Geist+Mono&display=swap");
html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: "Geist", sans-serif; }
.scene { position: absolute; inset: 0; overflow: hidden; }
.scene { background: #faf9ff; }
.row { position: absolute; left: 0; white-space: pre; font: 700 152px/1 "Geist", sans-serif; letter-spacing: -0.07em; }
.row span { position: absolute; top: 0; }
.loud { color: #0d0b1e; } .quiet { color: rgba(107, 99, 133, 0.24); }
.band { position: absolute; left: 0; top: 390px; width: 1920px; height: 300px; background: #fb2d89; overflow: hidden; transform: scaleY(0); }
.name { position: absolute; left: 0; top: 18px; width: 1920px; text-align: center; white-space: nowrap; font: 700 262px/1 "Geist", sans-serif; letter-spacing: -0.07em; color: #ffffff; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="2" data-width="1920" data-height="1080">
  <div class="scene clip" data-start="0" data-duration="2">
    <div id="rows"></div>
    <div class="band"><div class="name">"YOUR NAME"</div></div>
  </div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
const WORDS = ["MOTION", "IDEAS", "TYPE", "SHAPES", "SOUND", "PREVIEW"], SIZE = 152, GAP = 24.5;
function build() {
  const g = document.createElement("canvas").getContext("2d"); g.font = "700 " + SIZE + 'px "Geist"'; g.letterSpacing = -0.07 * SIZE + "px";
  const adv = (w) => g.measureText(w).width, space = adv(" ");
  const C = WORDS.reduce((sum, w) => sum + adv(w) + space + GAP, 0);
  const evenAnchor = -1397 + 0.867 * C;   // even rows start 0.867 of a word cycle after the odd ones: staggered, never in columns
  for (let k = 0; k < 8; k++) {
    const row = document.createElement("div"); row.className = "row"; row.style.top = (-40 + 150 * k - 0.15 * SIZE) + "px";
    let x = 0, anchor = 0;
    for (let c = 0; c < 4; c++) WORDS.forEach((w, i) => { const s = document.createElement("span"); s.className = i % 2 ? "quiet" : "loud"; s.textContent = w; s.style.left = x + "px"; row.appendChild(s); if (c === 2 && i === 3) anchor = x; x += adv(w) + space + GAP; });
    document.getElementById("rows").appendChild(row);
    const x0 = (k % 2 ? -1397 : evenAnchor) - anchor, dir = k % 2 ? 1 : -1, v = 900 + 60 * k;
    tl.fromTo(row, { x: x0 }, { x: x0 + dir * v, duration: 1, ease: "none" }, 0);             // run
    tl.to(row, { x: x0 + dir * v * 1.1733, duration: 0.28, ease: "power3.inOut" }, 1.0);     // stop dead, lurch on
  }
  tl.fromTo(".band", { scaleY: 0 }, { scaleY: 1, duration: 0.35, ease: "expo.out" }, 1.0);
  tl.fromTo(".name", { y: 300 }, { y: 0, duration: 0.33, ease: "expo.out" }, 1.128);
  window.__timelines = window.__timelines || {}; window.__timelines["main"] = tl;
}
document.fonts.load('700 152px "Geist"').then(build, build);
</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:12 ในวิดีโอ

3 มิติ

ลูกบาศก์คำบนแท่นหมุน หมุนหนึ่งในสี่รอบต่อบีต

ลูกบาศก์ 3D ด้วย CSS (หน้าละ 514 px, perspective 2400 px) เอียง -14.5 องศาในพื้นที่หน้าจอด้วย wrapper เพื่อให้เห็นด้านบน และหมุนภายในรอบแกน Y พักที่มุมมองสามในสี่ (-26.7 องศา) แล้วหมุน -90 องศาทุกครึ่งวินาทีด้วย power3.out ใน 0.3 s ทำให้ทุกหน้าลงที่มุมเดียวกัน หน้าสลับพื้นสว่าง สีเน้น และมืด แต่ละหน้ามีคำหนาหนึ่งคำปรับขนาดให้พอดี (คำสั้น 200 px คำยาวย่อเหลือราว 85% ของความกว้างหน้า ไม่ให้ล้นขอบ) ด้านบนเป็นแผงสีเข้ม

ใช้เมื่อไร แจกแจงความสามารถหรือฟีเจอร์สามถึงสี่อย่างตามจังหวะในวัตถุ 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=Geist:wght@400;500;700&family=Geist+Mono&display=swap");
html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: "Geist", sans-serif; }
.scene { position: absolute; inset: 0; overflow: hidden; }
.scene { background: #0d0b1e; }
.stage { position: absolute; inset: 0; perspective: 2400px; perspective-origin: 960px 540px; }
.tilt { position: absolute; left: 703px; top: 283px; width: 514px; height: 514px; transform-style: preserve-3d; transform: rotateX(-14.5deg); }
.cube { position: absolute; inset: 0; transform-style: preserve-3d; }
.face { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 700 200px/1 "Geist", sans-serif; letter-spacing: -0.07em; white-space: nowrap; }
.front { transform: translateZ(257px); background: #faf9ff; color: #0d0b1e; }
.right { transform: rotateY(90deg) translateZ(257px); background: #fb2d89; color: #ffffff; }
.back { transform: rotateY(180deg) translateZ(257px); background: #0d0b1e; color: #faf9ff; letter-spacing: -0.05em; }
.left { transform: rotateY(-90deg) translateZ(257px); background: #faf9ff; color: #fb2d89; }
.top { transform: rotateX(90deg) translateZ(257px); background: #1c0b5d; }
.bottom { transform: rotateX(-90deg) translateZ(257px); background: #1c0b5d; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="2" data-width="1920" data-height="1080">
  <div class="scene clip" data-start="0" data-duration="2">
    <div class="stage"><div class="tilt"><div class="cube">
      <div class="face front">"TYPE"</div><div class="face right">"3D"</div><div class="face back">"SHAPES"</div><div class="face left">"SOUND"</div>
      <div class="face top"></div><div class="face bottom"></div>
    </div></div></div>
  </div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
// every word fits its face: short words keep 200 px, longer ones fill about 85% of the 514 px face
const FIT = { front: [0.9, -0.07], right: [0.9, -0.07], back: [0.85, -0.05], left: [0.85, -0.07] };
function fit() {
  const g = document.createElement("canvas").getContext("2d"); g.font = '700 100px "Geist"';
  for (const [k, [fill, ls]] of Object.entries(FIT)) {
    const el = document.querySelector(".face." + k), w = el.textContent.replace(/"/g, ""), m = g.measureText(w);
    const ink = m.actualBoundingBoxLeft + m.actualBoundingBoxRight + (w.length - 1) * ls * 100;
    el.style.fontSize = Math.min(200, (100 * fill * 514) / ink) + "px";
  }
}
document.fonts.load('700 100px "Geist"').then(fit);
tl.set(".cube", { rotationY: 63.3 }, 0);                       // starts one face early
for (let k = 0; k < 4; k++) tl.to(".cube", { rotationY: -26.7 - 90 * k, duration: 0.3, ease: "power3.out" }, 0.5 * k);
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>

พรอมต์อื่นๆ

พรีวิวของพรอมต์ “แถลงการณ์ตัวอักษรเคลื่อนไหวที่ร้อยเรียงด้วยเส้นเดียว”

Simple MotionTQW

แถลงการณ์ตัวอักษรเคลื่อนไหวที่ร้อยเรียงด้วยเส้นเดียว

<direction> สร้างวิดีโอ kinetic typography แนวตั้ง (1080x1920) ความยาว 46 วินาที ที่นำเสนอคำแถลงพันธกิจสั้น ๆ จากชื่อเรื่องสองบรรทัด ผ่านสามย่อหน้า ไปจนถึงข้อความเชิญชวนสามข้อและการ์ดปิดท้าย แนวคิด: เส้นสีเส้นเดียวเคลื่อนผ่านทั้งชิ้นงานและเชื่อมทุกฉากเป็นเรื่องเล่าทางภาพเดียวกัน โดยเปลี่ยนรูปแบบทุกครั้ง (วงห่วง ปม กรอบ หน้ากระดาษที่ยกขึ้น เส้นทางที่กล้องตามไป) สไตล์เรียบง่ายและทันสมัย ใช้สีเรียบสดใส และข้อความทั้งหมดใช้ฟอนต์ Montserrat ซึ่งเป็นแซนเซอริฟที่สะอาดตา จัดข้อความคำต่อคำตามที่เขียนไว้ทุกประการ ควรให้ความรู้สึกเหมือนงานอัตลักษณ์โมชั่นดีไซน์ระดับรางวัล: มีอารมณ์ร่วม ร่วมสมัย เป็นงานศิลป์ แม่นยำ และมีความเป็นมนุษย์ ทุกฉากต้องดูแตกต่างจากฉากอื่น หลีกเลี่ยงสิ่งที่ดูเหมือนการนำเสนอแบบสไลด์ เทมเพลต Canva โฆษณา NGO ทั่วไป หรือฟุตเทจสต็อก ห้ามใช้ภาพถ่าย ฟุตเทจ หรือภาพประกอบที่ตีความคำ และห้ามเพิ่มคำที่เกี่ยวข้องหรือเรียบเรียงใหม่: ตัวอักษรและเส้นคือภาพทั้งหมด ใช้เพลงต้นฉบับนุ่ม ๆ โดยไม่มีเสียงบรรยาย </direction> <structure> เวลาโดยประมาณ โดยย่อหน้าเต็มเป็นแกนหลักของเรื่องเล่า: 1. ชื่อเรื่องแรก (ประมาณ 0–5 วินาที): "THREADS OF HOPE." (แทนที่ด้วยของคุณ) บนพื้นหลังสีขาวนวล เส้นสีบานเย็นวนเข้ามาและเผยแต่ละบรรทัดของชื่อเรื่องจากด้านล่าง แล้วผูกเป็นปม สีน้ำเงินทะลักออกจากปมและเต็มหน้าจอ 2. ชื่อเรื่องที่สอง (ประมาณ 5–10 วินาที): "ROOTS OF PEACE." (แทนที่ด้วยของคุณ) เส้นสีเหลืองวาดกรอบสี่เหลี่ยมรอบคำ ขณะที่ตัวอักษรของคำแรกลอยขึ้นทีละตัว 3. ย่อหน้าแรก (ประมาณ 10–18 วินาที): เส้นยกขึ้นเป็นหน้าสีเหลืองเต็มจอที่มีข้อความ "Across [your country], we are weaving new connections through psychological support, collective action, and community-led initiatives." (แทนที่ด้วยของคุณ) เน้นวลีสำคัญด้วยการวงด้วยเส้นที่เชื่อมต่อกัน เช่น "weaving new connections", "psychological support", "collective action" และ "community-led initiatives" 4. ย่อหน้าที่สอง (ประมาณ 18–27 วินาที): ฉากสีน้ำเงินเข้มพร้อมข้อความ "We bring together professionals, organizations, and communities to rebuild the social fabric, strengthen psychosocial well-being, and cultivate cultures of peace rooted in empathy, solidarity, dialogue, and mutual care." (แทนที่ด้วยของคุณ) วลีสำคัญ "cultures of peace" มีช่วงเวลาของตัวเอง อยู่ในบรรทัดของมันเอง ขนาดประมาณ 1.5 เท่าของข้อความรอบข้าง สีเหลืองสว่าง และขยายจากขนาดเล็กลงเล็กน้อยจนเต็มขนาด เมื่อบรรทัดถัดไปเข้ามา ส่วนที่เหลือของย่อหน้าจะค่อย ๆ จางลงเหลือความทึบต่ำลง แต่วลีนี้ยังคงสว่างเต็มที่จนจบฉาก "emphaty" ถูกเน้นด้วยสีบานเย็น "solidarity" ถูกเน้นด้วยสีฟ้าอ่อน "dialogue" ถูกเน้นด้วยสีเขียว และ "mutual care" ถูกเน้นด้วยสีลาเวนเดอร์ เพื่อให้สีเหลืองเป็นของวลีสำคัญเท่านั้นในที่นี้ 5. ย่อหน้าที่สาม (ประมาณ 27–35 วินาที): ฉากสีเขียวที่กล้องเดินทางไปตามเส้น ขณะที่ "From individual healing to collective transformation, we are creating opportunities for communities to reconnect, grow, and shape more peaceful futures." ทั้งหมดเป็นตัวหนา (แทนที่ด้วยของคุณ) คลี่ออกไปตามเส้นทาง 6. ข้อความเชิญชวน (ประมาณ 35–41 วินาที): คำเชิญที่เน้นสามข้อ ปรากฏทีละข้อ: "Explore our work.", "Connect with our mission.", "Help cultivate cultures of peace." (แทนที่ด้วยของคุณ) ข้อสุดท้ายอาจสะท้อนการเน้นสีเหลืองของ "cultures of peace" 7. การ์ดปิดท้าย (ประมาณ 41–46 วินาที): "Know More about" / "[your brand]" / "[your website]" เส้นหยุดนิ่ง และชิ้นงานจบด้วยเฟรมสงบนิ่ง </structure> <composition> ใช้การจัดเฟรมแนวตั้ง มีขอบกว้างและมีพื้นที่ว่างมาก แต่ละฉากมีเลย์เอาต์ของตัวเองเพื่อไม่ให้สองฉากดูเหมือนกัน: ชื่อเรื่องกึ่งกลาง ชื่อเรื่องในกรอบ หน้าสีเต็มขอบ พื้นเข้มที่มีลำดับชั้นชัดเจน และเส้นทางที่กล้องเดินทาง ตั้งข้อความทั้งหมดด้วย Montserrat ชื่อเรื่องเป็นตัวหนาพิมพ์ใหญ่ตามที่เขียนไว้ทุกประการ ข้อความเนื้อหาใช้น้ำหนักที่เบากว่า จัดเป็นบรรทัดสั้น ๆ อ่านง่าย ทำให้คำสำคัญโดดเด่นด้วยสี น้ำหนัก หรือขนาด แทนการตกแต่ง โทนสีสดใสและเรียบ: พื้นฐานสีขาวนวล โดยมีสีบานเย็น น้ำเงินอิ่มตัว เหลือง น้ำเงินเข้ม และเขียวเป็นสีของฉาก สีฟ้าอ่อนเป็นสีเน้นรอง และสีเหลืองสว่างสงวนไว้สำหรับวลีสำคัญ "cultures of peace" เส้นต้องตัดกับพื้นหลังที่ผ่านเสมอ </composition> <techniques> เส้นต่อเนื่องคือกลไกหลัก เส้นถูกวาดด้วยการเผยเส้นขอบและทำหน้าที่เป็นมาสก์ที่เผยข้อความจากด้านล่าง เส้นผูกเป็นปมที่ปล่อยสีทะลักเต็มจอเป็นทรานซิชันไปยังฉากถัดไป เส้นวาดกรอบสี่เหลี่ยม เส้นยกขึ้นเหมือนแผ่นกระดาษไปเป็นหน้าถัดไป และสุดท้ายกลายเป็นเส้นทางที่กล้องตามไปในฉากสีเขียว ทุกทรานซิชันส่งต่อโดยเส้นเอง ไม่ใช้การตัดต่อหรือการปัดแบบทั่วไป การเคลื่อนไหวของข้อความ: ตัวอักษรลอยขึ้นทีละตัวแบบเหลื่อมเวลา คำและบรรทัดเผยตามลำดับการอ่าน วลีสำคัญลงตัวช้ากว่าเล็กน้อยและหนักแน่นกว่า วลีที่เน้นขยายจากขนาดเล็กลงเล็กน้อยจนเต็มขนาด ขณะที่บรรทัดที่จบแล้วจางลงในความทึบ ทำให้การเคลื่อนไหวทั้งหมดนุ่มนวลและแม่นยำ ด้วยการเข้ามาแบบ ease-out นุ่ม ๆ และไม่มีการเด้ง ใช้จังหวะสงบที่เหลือเวลาให้อ่านทุกย่อหน้า </techniques>

พรีวิวของพรอมต์ “โชว์รีลสะกดจิตดำดิ่งผ่านดวงตาในสไตล์ซินธ์เวฟนีออน”

Simple MotionPHY

โชว์รีลสะกดจิตดำดิ่งผ่านดวงตาในสไตล์ซินธ์เวฟนีออน

<direction> สร้างโชว์รีลโมชันกราฟิกไซคีเดลิกสะกดจิตความยาว 20 วินาที อัตราส่วน 16:9 ขนาด 1920x1080 และ 60 fps ทุกอย่างวาดและสร้างขึ้นเอง: ลวดลายเชิงกระบวนการและรูปทรงเรนเดอร์ 3D ไม่มีฟุตเทจและไม่มีรูปถ่าย ตัดให้เข้ากับเพลงซินธ์เวฟนีออนที่ 120 BPM ไอเดียคือ ดวงตาเปิดออกจากเส้นเดียว และกล้องดำดิ่งผ่านดวงตาเข้าไปในโลกที่แปลกขึ้นเรื่อย ๆ ก่อนจะลงจอดที่ไตเติล ทุกเฟรมขับเคลื่อนด้วยเวลา ช่วงต่าง ๆ เปลี่ยนที่เส้นห้องดนตรี (ทุก 2 วินาที) หลังแฟลชสีขาว และพัลส์ความสว่างบนจังหวะทำให้ภาพเหมือนกำลังหายใจ ลุคเป็นสีหมึกเข้มและเกือบดำ กับสีชมพูนีออน ส้ม ม่วง เขียวอมฟ้า และเหลือง บลูมนุ่ม ๆ เคมีเอเบอร์เรชันเล็กน้อย เกรนละเอียด และวิกเนตต์ โดยมี HUD เชิงเทคนิคบาง ๆ ล้อมทุกอย่าง คำที่อยู่ในเครื่องหมายคำพูดทั้งหมดเป็นตัวอย่างให้แทนที่ด้วยคำของคุณ รักษาความยาวให้ใกล้เคียงเพื่อให้เลย์เอาต์ไม่เพี้ยน หลีกเลี่ยงฟุตเทจและภาพสต็อก การเติมสีเรียบไร้พื้นผิว สีดำสนิท (สีเข้มต้องไม่ต่ำกว่า #0D0B1E) สีอิ่มตัวเกินไป และชื่อจริงหรือแบรนด์จริงบนหน้าจอ </direction> <structure> 1. 0.0–4.0 วินาที ดวงตา ดำสนิท จากนั้นที่ 0.3 วินาทีเส้นขนตาเรืองแสงบาง ๆ ปรากฏขึ้น ดวงตาเป็นรูปอัลมอนด์แหลม: รูปเลนส์ระหว่างวงกลมสองวงที่ซ้อนกัน กว้างประมาณ 0.55 ของความกว้างเฟรม เฟรมทั้งหมดรอบ ๆ เต็มไปด้วยเส้นชั้นความสูงของมัน ซึ่งเป็นไอโซไลน์ของรูปสองวงกลมเดียวกันในช่วงลอการิทึม (แต่ละช่องว่างกว้างกว่าช่องก่อนหน้าประมาณ 13%) เส้นเหล่านี้ไหลออกด้านนอกช้า ๆ และจางลงตามระยะ: ลาเวนเดอร์ซีด ส้ม และเขียวอมฟ้าใกล้ดวงตา ชมพูไกลออกไป เหนือแถบสีหมึกเข้ม ตั้งแต่ 0.3 ถึง 0.85 วินาที ดวงตาเป็นเพียงรอยแยก ตั้งแต่ 0.85 ถึง 1.33 วินาที เปลือกตาเปิดออก (power2.out) ขณะที่ดวงตาขยายจาก 86% เป็นขนาดเต็ม ม่านตาเป็นเส้นใย เป็นแถบสีส้ม พีช มินต์ และม่วง มีวงขอบสีชมพู แสงเรืองสีเขียวอมฟ้า และไฮไลต์รูปวงแหวนที่ด้านบนซ้าย เปลือกตามีขอบด้านในสีขาวนุ่ม ๆ คลื่นตามจังหวะวิ่งผ่านเส้นที่ 1.5, 1.75, 2.5 และ 2.75 วินาที คำบรรยายกึ่งกลางด้วยฟอนต์โมโนขนาดเล็กเว้นระยะตัวอักษร («YOUR LINE OF TWENTY-SIX LETTERS») ถอดรหัสปรากฏตั้งแต่ 1.4 วินาทีที่ประมาณ 45 ตัวอักษรต่อวินาที และแตกสลายจากด้านขวาที่ 2.8–3.1 วินาที ตั้งแต่ 2.75 วินาที รูม่านตาขยายและแสดงฉากถัดไปที่กำลังเล่นอยู่ภายใน ขณะที่แถบม่านตาเปลี่ยนเป็นม่วงและเหลือง ตั้งแต่ 3.42 ถึง 3.98 วินาที กล้องพุ่งเข้าไปในรูม่านตาจนฉากภายในเต็มเฟรมที่ 1:1 2. 4.0–8.0 วินาที อุโมงค์ ตัดด้วยแฟลชสีขาวพร้อมรังสีแผ่กระจาย เป็นอุโมงค์เปอร์สเปกทีฟของวงแหวนที่เว้นระยะให้รัศมีผกผันเพิ่มขึ้น 0.75 ต่อวง แต่ละวงมีดวงตารูปอัลมอนด์ 18 ดวง ขอบสีเขียวอมฟ้า ม่านตาสีชมพูและม่วง และไฮไลต์สีขาว วงที่สลับกันเยื้องกันครึ่งเซลล์และหมุนสวนทางกัน วงแหวนพุ่งออกด้านนอกประมาณ 11 วงต่อวินาที พร้อมแรงผลักทุกจังหวะ และวงที่ไกลละลายเป็นหมอกหมึกรอบแกนสีขาว ทุกจังหวะมีวงแหวนเรืองแสงออกจากแกนและขยายใหญ่ขึ้น สลับเป็นสีขาว ชมพู แล้วเขียวอมฟ้า ตั้งแต่ 6.05 ถึง 6.45 วินาที ดวงตาแปลงร่างเป็นกระดานหมากรุกแบบโพลาร์ แล้วเป็นซันเบิร์สต์ 36 แฉกที่หมุนช้า ๆ ในสีรุ้งหม่น ๆ พร้อมวงแหวนสว่างรอบศูนย์กลางที่โป่งขึ้นหลัง 7.0 วินาที ตั้งแต่ 7.45 ถึง 7.8 วินาที กระดานหมากรุกแฟลชกลับมา และตั้งแต่ 7.72 ถึง 7.97 วินาที ทุกอย่างขาวโพลน 3. 8.0–11.33 วินาที ก้อนโครเมียม สีขาวจางหายไปใน 0.5 วินาที เผยเมทาบอลโครเมียมสะท้อนรุ้งเหนือระลอกคลื่นวงกลมซ้อนสีเข้ม เป็นทรงกลมหกลูกที่รวมกันอย่างเรียบเนียน: ตัวเข้มพร้อมแถบเส้นชั้นบางแบบคราบน้ำมันสีเขียวอมฟ้าและชมพู แสงขอบสีชมพู และสเปกคิวลาร์สีขาวคมชัด มันหมุนและเปลี่ยนรูป โซ่แนวตั้งรวมตัวเป็นก้อน หยดเล็กสองหยดแยกออกที่ 9.1–9.5 วินาที และยุบยับที่ 9.5–9.9 วินาที ตั้งแต่ 10.0 วินาที เฟรมกลายเป็นคาไลโดสโคปที่ไล่ผ่านกระจกพับ 4, 6, 3, 8 แล้ว 10 ส่วน และส่วนโค้งซีดกวาดออกด้านนอกที่ 10.0–10.25 วินาที 4. 11.33–14.0 วินาที เกลียว แฟลชกลิตช์ จากนั้นแขนเกลียวลอการิทึมสิบสองแขนที่ทำจากเซลล์รูปหยดน้ำ แต่ละเซลล์ใหญ่กว่าเซลล์ก่อนหน้า 1.5 เท่าตามแขน และแขนหมุนทวนเข็มนาฬิกาออกด้านนอก เซลล์มีขอบลาเวนเดอร์สองชั้นและมีม่านตา (เขียวอมฟ้า ชมพู หรือส้ม) หรือข้าวหลามตัดไล่เฉดซ้อนกัน (ชมพูหรือม่วง) เส้นสีทองบาง ๆ วาดตามแขนและวงแหวน และแกนสีขาวเรืองแสงที่ศูนย์กลาง เกลียวซูมเข้าหาศูนย์กลางประมาณ 1 หน่วยลอการิทึมต่อวินาทีและหมุนช้า ๆ ทั้งสองการเคลื่อนไหวได้รับแรงผลักทุกจังหวะ พร้อมพัลส์ความสว่างทุกจังหวะ ตั้งแต่ 13.82 ถึง 14.0 วินาที บลูมสีขาวขยายจากศูนย์กลางจนเต็มเฟรม 5. 14.0–15.5 วินาที ห้องทรงกลม สีขาวจางลงใน 0.7 วินาทีสู่ห้อง 3D ซุ้มโค้งทำจากลูกปัดคล้ายไข่มุก ทรงกลมสะท้อนรุ้งขนาดใหญ่เรียงตามผนัง และแผ่นดิสก์แบนบนพื้นมีลายทางออปอาร์ตซิกแซกสีรุ้งพาสเทล ทั้งหมดอยู่ในหมอกม่วงหมึก กล้องแล่นไปข้างหน้าและเอียงไปทางขวา 6. 15.5–16.0 วินาที มอนทาจบนโน้ตสิบหกส่วน (คัตที่ 15.5, 15.633, 15.75 และ 15.883 วินาที): โคลสอัพม่านตา รังสี คาไลโดสโคป และเกลียว แต่ละภาพมีแฟลชเล็ก ๆ 7. 16.0–18.0 วินาที ดวงตาอีกครั้ง แฟลชสีขาวพร้อมดิสก์สีเข้มตรงกลางที่หดเหลือศูนย์ใน 50 มิลลิวินาที กล้องดึงถอยออกจากรูม่านตา โดยเห็นห้องทรงกลมอยู่ข้างใน จนถึงดวงตาเต็มดวงที่ 16.32 วินาที ตอนนี้เส้นชั้นความสูงเป็นแถบนีออนหนา: ชมพูใกล้ดวงตา แล้วม่วง แล้วสีหมึกเข้มไกลออกไป เปลี่ยนเป็นเขียวอมฟ้าในช่วง 16.9–17.8 วินาที ม่านตาเป็นวงแหวนสีรุ้งพาสเทลรอบรูม่านตาสีเข้มขนาดใหญ่ พัลส์ตามจังหวะตกที่ 16.5, 17.0 และ 17.5 วินาที ตั้งแต่ 17.84 ถึง 17.98 วินาที ดวงตากะพริบปิด: แถบต่าง ๆ ยืดตรงเป็นลายเส้นแนวนอนพร้อมเส้นสว่างหนึ่งเส้นตรงกลาง ที่ 18.0 วินาที ทุกอย่างยุบเป็นความมืดใน 50 มิลลิวินาที 8. 18.1–20.0 วินาที ไตเติล คำหนึ่งในฟอนต์กรอเทสก์สีดำกว้าง («YOUR WORD») ปรับให้กว้างประมาณ 1436 px และจัดกึ่งกลาง ปรากฏด้วยการกวาดจากซ้ายไปขวาพร้อมขอบเบลอนุ่ม ๆ ใน 0.52 วินาที ตัวอักษรเป็นสีซีด (ลาเวนเดอร์ มินต์ แล้วชมพูอ่อน จากซ้ายไปขวา) และเติมด้วยเกรน พร้อมการแยกสีแดง/น้ำเงินที่ค่อย ๆ ลดจาก 10 เหลือ 3 px และแสงเรืองที่แต้มม่วง เขียวอมฟ้า และชมพู ที่ 18.62 วินาที คำบรรยายรองตัวเอียงค่อย ๆ ปรากฏใต้คำ («your short tagline») ที่ 19.1 วินาที บรรทัดโมโนเล็กจิ๋วที่เว้นระยะตัวอักษรถอดรหัสปรากฏเหนือคำ («( a short call to action )») ตั้งแต่ 19.55 ถึง 19.95 วินาที คำสลายเป็นนอยส์และเฟรมจางหาย </structure> <composition> พาเล็ต: สีหมึกเข้ม #1C0B5D และเกือบดำ #0D0B1E สำหรับทุกพื้นที่มืด (พื้นหลัง แถบ ส่วนที่ขาวของดวงตา) สีเน้นคือชมพู #FB2D89 (หลัก) ส้ม #FE9117 ม่วง #7C6CF2 เขียวอมฟ้า #2DD4B0 เหลือง #FFD23F และขาว #FFFFFF ใช้ลาเวนเดอร์อ่อน #F0EDFF / #FAF9FF สำหรับโทนซีดและข้อความ ลาเวนเดอร์หม่น #9890B4 สำหรับข้อความเล็กของ HUD และ #E9E4F2 สำหรับเส้น องค์ประกอบสีรุ้งหมุนเวียนชมพู ม่วง เขียวอมฟ้า เหลือง ส้ม เกรดทับทุกอย่าง: บลูมนุ่มบนรูปทรงสว่าง (ค่าธรณีประมาณ 0.7) เคมีเอเบอร์เรชันแบบรัศมีเล็กน้อยไปทางมุม เกรนละเอียด วิกเนตต์ และความอิ่มตัวที่หม่นลงเล็กน้อย สีเข้มต้องไม่ต่ำกว่า #0D0B1E ฟอนต์: Unbounded 900 (กรอเทสก์สีดำกว้างมาก) สำหรับไตเติล JetBrains Mono 400/700 ขนาด 11–15 px เว้นระยะตัวอักษรประมาณ 0.3 em สำหรับ HUD และ Spectral Italic 400 ประมาณ 43 px สำหรับคำบรรยายรอง HUD: อยู่เหนือทุกอย่างตั้งแต่ 1.0 วินาที ค่อย ๆ ปรากฏใน 0.5 วินาที และจางหายที่ 19.6–19.9 วินาที วงเล็บมุมรูปตัว L บาง ๆ อยู่ห่างจากแต่ละมุม 28 px - ซ้ายบน: ชื่อด้วยโมโนตัวหนา («YOUR NAME») และแท็กไลน์ใต้ชื่อ («YOUR TAGLINE») - ขวาบน ชิดขวา: ตัวนับบท («01 / 07») และป้ายบทตัวหนา («FIRST CHAPTER») ซึ่งเปลี่ยนในแต่ละช่วง - ซ้ายล่าง: ไทม์โค้ด «TC 00:00:SS:FF» ที่นับเฟรมที่ 60 fps และ «120 BPM · bar.beat.sixteenth» (เช่น 02.3.3) - ขวาล่าง: สี่เหลี่ยมขนาด 8 px สี่อัน โดยจังหวะปัจจุบันสว่างเป็นสีขาว และเครดิตสั้น ๆ ตัวหนา (เช่น «YOURSITE.COM») - เส้นความคืบหน้าหนา 1.5 px วิ่งระหว่างวงเล็บด้านล่างและเติมเต็มตามหัวเล่น </composition> <techniques> - ถอดรหัสข้อความ: ที่จุดเริ่มของทุกช่วง ตัวนับบทและป้ายบทถอดรหัสทีละตัวอักษรใน 0.38 วินาที แต่ละตัวอักษรสลับผ่านสัญลักษณ์อย่าง # % & = + @ < | / $ ที่ 30 ครั้งต่อวินาทีและคลี่คลายจากซ้ายไปขวา คำบรรยายและคอลทูแอคชันใช้การถอดรหัสแบบเดียวกัน และคำบรรยายแตกสลายจากด้านขวาด้วยวิธีเดียวกัน - แฟลชของแต่ละช่วง: แฟลชสีขาวพร้อมรังสีแผ่กระจายแต่ละครั้งสลายตาม 0.94 / (1 + (t / 0.07)^2.5) - การพุ่งเข้ารูม่านตา (3.42–3.98 วินาที): การซูมเร่งแบบเอกซ์โพเนนเชียล โดยล็อกซูม = 5.5·x² / (x + 0.1) ตลอดการเคลื่อนไหว ฉากถัดไปเล่นอยู่ในรูม่านตาและจบพอดีที่ 1:1 ทำให้การตัดต่อเนียนไร้รอยต่อ การดึงถอยที่ 16.0 วินาทีเป็นภาพสะท้อนของมัน - แรงผลักตามจังหวะ: ความเร็วอุโมงค์ การซูมและการหมุนของเกลียว รวมถึงระลอกและวงแหวนได้รับแรงกระแทกทุกจังหวะ พร้อมพัลส์ความสว่างบนจังหวะ - มอร์ฟแทนการตัดภายในฉาก: ดวงตาเป็นกระดานหมากรุกเป็นซันเบิร์สต์ โซ่เมทาบอลเป็นก้อนเป็นหยดเล็กเป็นการยุบยับ จากนั้นจำนวนกระจกพับของคาไลโดสโคป 4, 6, 3, 8, 10 - ทรานซิชัน: ขาวโพลนและเฟดจากสีขาวที่เส้นห้องดนตรี แฟลชกลิตช์เข้าเกลียว บลูมสีขาวจากศูนย์กลางเข้าห้องทรงกลม คัตแฟลชบนโน้ตสิบหกส่วนในมอนทาจ และการยุบเป็นความมืด 50 มิลลิวินาทีก่อนไตเติล - ไตเติล: การกวาดจากซ้ายไปขวาด้วยขอบนุ่ม การแยก RGB ที่ผ่อนจาก 10 เหลือ 3 px แล้วสลายเป็นนอยส์และเฟดออกตอนท้าย </techniques> <music> ซินธ์เวฟนีออนที่ 120 BPM ในคีย์ A minor หนึ่งคอร์ดต่อห้อง (2 วินาที): Am F สำหรับอินโทร แล้ว Am F C G Am, F ในบรีกดาวน์, G ตอนกลับมา, Am ตอนจบ เสียงคิกตกตรงกับจังหวะของภาพพอดี (ทุก 0.5 วินาที) - 0–4 วินาที: ท่วงทำนองระฆังโน้ตเขบ็ตหนึ่งชั้นเหนือแพดอบอุ่น พร้อมไรเซอร์ยาวและฉาบย้อนกลับ ไม่มีกลอง - ที่ 4.0 วินาที: คิกแบบโฟร์ออนเดอะฟลอร์ เบสโน้ตเขบ็ตหนึ่งชั้นที่กระโดดข้ามอ็อกเทฟ และอาร์เปจโจซอว์โน้ตเขบ็ตสองชั้น เบสและอาร์เปจโจพัมป์ไปกับคิก - ตั้งแต่ 8.0 วินาที: สแนร์ใหญ่มีรีเวิร์บที่จังหวะสองและสี่ ไฮแฮตออฟบีต และลีดสแควร์ที่ลากโน้ตยาว พร้อมสแนร์ฟิลล์เข้าสู่ 14.0 วินาที - 14.0–16.0 วินาที: กลองและเบสหายไป แพดพองขึ้น และอาร์เปจโจที่ผ่านฟิลเตอร์ไต่ขึ้นพร้อมสแนร์โรลโน้ตสามสิบสองส่วนเข้าสู่ 16.0 วินาที - ที่ 16.0 วินาที: ทุกอย่างกลับมาอย่างรุนแรง - กลองหยุดครึ่งจังหวะก่อน 18.0 วินาที และคอร์ด A minor add9 ที่ก้องกังวานหนึ่งคอร์ดพาไปสู่การ์ดปิดท้าย </music> <sound> เสียงประกอบบนภาพ: - ไซน์สูงนุ่ม ๆ ที่ 0.3 วินาทีสำหรับเส้นขนตา - ไรเซอร์เข้าสู่บูมทุ้มลึกที่ 4.0 วินาที - ไรเซอร์และบูมสั้น ๆ ที่ 8.0 วินาที - กลิตช์ที่ 11.33 วินาที - ไรเซอร์และวูชเข้าสู่ 14.0 วินาที - กลิตช์ติ๊กสั้น ๆ สี่ครั้งบนจุดตัดของมอนทาจ - ไรเซอร์ยาวเข้าสู่บูมที่ 16.0 วินาที - วูชตอนกะพริบตาที่ 17.95 วินาที - ดาวเนอร์และซับดรอปที่ 18.0 วินาที - ระฆังนุ่ม ๆ เมื่อไตเติลปรากฏที่ 18.12 วินาที - วูชโปร่ง ๆ ขณะไตเติลสลาย ไม่มีเสียงบรรยาย มิกซ์ที่ประมาณ −14 LUFS โดยทรูพีกต่ำกว่า −1 dBTP </sound> <references> สีแบบเอาต์รันและซินธ์เวฟปลายยุค 80 มัวเรออปอาร์ตและภาพลวงตาเส้นชั้นความสูง ภาพดวงตาแนวไซคีเดลิก โชว์รีลเชิงกระบวนการสไตล์เดโมซีน และรีลของสตูดิโอโมชันดีไซน์ที่ล้อมด้วย HUD เชิงเทคนิค </references>

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

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

Simple MotionTKM

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

<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>

จดหมายข่าว

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

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

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

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