Simple Motionรหัสพรอมต์: NPXรีลสินค้า «ตัวอย่างมีชีวิต» พร้อมมอร์ฟโลโก้
placeholder
ใช้แล้ว 1 ครั้งSimple Motion
แบรนด์รีลแถลงการณ์ลูกบอลกระดอน
แบรนด์รีลแนวตั้ง 19 วินาที ลูกบอลเงางามกระดอนไปตามแถลงการณ์ตามบีต ลูกตุ้ม และโคมไฟ ตามด้วยมอนตาจเร็วและฟินาเล่วอกเซล
รหัสพรอมต์ MOVเผยแพร่เมื่อ ใช้แล้ว 2 ครั้ง
ใช้พรอมต์นี้พรอมต์จะเปิดในแอป: เพิ่มไฟล์ของคุณเอง แล้วเอเจนต์จะสร้างวิดีโอให้
รายงานพรอมต์นี้พรอมต์
แนวคิด
สร้างแบรนด์รีลแนวตั้งความยาว 19.2 วินาที (1080x1920, 30 fps) ที่วนลูปได้อย่างไร้รอยต่อ เป็นโมชันกราฟิกทั้งหมด ตัดตามบีต 150 BPM (0.4 วินาทีต่อจังหวะ, 12 ห้อง) ไอเดียคือ ลูกบอลเงางามลูกเดียวเป็นพระเอกของทั้งเรื่อง มันกระดอนไปตามแถลงการณ์ฮุกที่ขึ้นหนึ่งคำต่อหนึ่งจังหวะ กลายเป็นลูกตุ้มของลูกตุ้มนาฬิกา เปลี่ยนเป็นโคมไฟที่ส่องสว่างหน้ากระดาษ รอให้มอนตาจเร็ว ๆ ผ่านไปหลังชื่อแบรนด์ของคุณ แล้วจบลงตามลำพังบนการ์ดปิดท้ายตรงตำแหน่งที่เฟรมแรกเริ่มต้นพอดี ลุคเป็นตัวอักษรเอดิทอเรียลหนา ๆ บนพื้นหลังเรียบสีราตรีลึกและสีกระดาษ มีสีเน้นไล่เฉดชมพูไปส้มและสีเน้นที่สองเป็นม่วง จังหวะ: ถี่กระชั้นใน 3.2 วินาทีแรก จากนั้นเป็นสองฉากยาวที่ได้หายใจบนชีพจรสองจังหวะ ช่วงระเบิดคัตตามโน้ตเขบ็ต 3.2 วินาที ไคลแม็กซ์ 2 วินาที และจุดลูปที่เงียบสงบ หลีกเลี่ยงฟุตเทจ เสียงบรรยาย ครอสเฟดนุ่ม ๆ และการตัดใด ๆ ที่พลาดบีต: ทุกการตัดต้องอยู่บนจังหวะหรือครึ่งจังหวะ คำที่เป็นสีเน้นต้องใช้น้ำหนัก ExtraBold เท่ากับส่วนอื่น ห้ามบางกว่า
โครงสร้าง
ฮุก, 0–3.2 วิ เฟรมมืด ลูกบอล (140 px) เริ่มจากกลางจอและตกลงไปยังเส้นพื้นที่ประมาณ y 1516 หดเหลือ 88 px และลงถึงพื้นที่ 0.37 วิ ตั้งแต่ 0.4 วิ จะมีคำปรากฏหนึ่งคำต่อจังหวะ แล้วต่อครึ่งจังหวะ: «เรา» (0.4), «ไม่ได้» (0.8), «แค่» (1.2), «พรอมต์» (1.6), «เรา» (2.0), «กำกับ» (2.2, ใช้ไล่เฉดสีเน้น), «พิมพ์» (2.6), «แสง» (2.8), «มิติ» (3.0) ให้แทนที่ด้วยบรรทัดแถลงการณ์ของคุณเอง พื้นหลังสลับระหว่างสีมืดกับสีกระดาษในทุกการตัด ที่คำว่า «แสง» และ «มิติ» ลูกบอลพุ่งขึ้นและออกไปทางซ้ายบน
ลูกตุ้ม, 3.2–8.0 วิ พื้นหลังสีกระดาษ ลูกบอลกลายเป็นตุ้ม (112 px) ของแท่งเรียวสีเข้มที่แขวนจากจุดหมุนเหนือกึ่งกลางด้านบน 380 px (ความยาวแขน 1317 px) เงาเบลอของแท่งและตุ้มเยื้องไปทางขวา ชื่อเรื่องตัวพิมพ์ใหญ่สองบรรทัดอยู่ตรงกลางและเปลี่ยนในทุกการแกว่ง: «ทำด้วย / มือ?» → «ทำด้วย / โค้ด.» (บรรทัดที่สองใช้สีเน้น) → «ไม่มี / ไทม์ไลน์.» → «ไม่มี / คีย์เฟรม.» → «แค่ / คำพูด.» (สีเน้น) → «และ / แสง.» เหล่านี้เป็นตัวอย่างให้แทนที่ ที่ 7.2 วิ แสงดับลงเลยแนวแท่งออกไป และการแกว่งครั้งสุดท้ายลากความมืดข้ามเฟรม
โคมไฟ, 8.0–12.8 วิ สีเข้ม #14112E ลูกบอลกลายเป็นโคมไฟเรืองแสงที่ลำแสงรูปกรวยเผยหน้ากระดาษ หน้ากระดาษมีข้อความ «แสง / ก็คือ / คณิตศาสตร์.» ตัวพิมพ์ใหญ่ (ตัวอย่าง; บรรทัดสุดท้ายสีม่วง) และโลโก้ล็อกอัปเล็ก ๆ ใกล้ y 1430: จุดไล่เฉดสีและโลโก้ตัวอักษรของคุณสีหมึก ตั้งแต่ 12.27 วิ หน้ากระดาษสว่างทั้งหน้า
มอนตาจ, 12.8–16.0 วิ ที่จังหวะดรอป «[แบรนด์ของคุณ]» ด้วยฟอนต์ Anton (สูงประมาณ 260 px จัดกึ่งกลาง) อยู่นิ่ง ขณะที่โลกด้านหลังเปลี่ยนทุกโน้ตเขบ็ต (0.2 วิ) โลกเรียงตามลำดับ:
บล็อบ 3D เงามันลายหินอ่อนสีชมพูส้มที่มีขอบเห็นชัด บนพื้นเทา
บล็อบเดียวกันใกล้ขึ้น
บล็อกเรียบ: สี่เหลี่ยมม่วง เข้ม และสีกระดาษ กับไล่เฉดสีเน้น
วงแหวนหมึกกับกระดาษสะกดจิตที่ซูมและหมุน
ป้ายกระดาษเปล่าที่แกว่งจากเชือกเหนือพื้นม่วง
ทุ่งคีย์บอร์ดสีเข้มมองจากด้านบน มีคีย์สีชมพูและส้มไม่กี่ปุ่มถูกกด
ทอรัสที่วาดด้วยจุดฮาล์ฟโทนที่ชัดเจนบนพื้นเข้ม
สีม่วงเรียบพร้อมกริดจาง ๆ
รูปทรง 3D แบบของเล่นที่ตีลังกาบนสีพลัมเข้ม (ลูกบาศก์ ลูกบอล วงแหวน กรวย และแคปซูลในสีพาเลตต์ บวกสีเหลือง #FFD23F)
รูปทรงเดียวกันแบบเบลอบนสีชมพูพาสเทล
โทรศัพท์กระจกบนพื้นเทา
บล็อบบนพื้นม่วง
พื้นลูกบาศก์สีขาวที่มีเสาสีชมพูและส้มพุ่งขึ้น
ทอรัสฮาล์ฟโทนเป็นจุดหมึกบนพื้นขาว
สีคอรัลเรียบพร้อมกริด
ฟินาเล่วอกเซล, 16.0–18.2 วิ พื้นหลังสีม่วง คำสั้น ๆ (ผลิตภัณฑ์ของคุณ หรือครึ่งหลังของชื่อแบรนด์) ถูกสร้างจากลูกบาศก์เล็ก ๆ ก่อตัวสมบูรณ์ที่ 16.6 วิ หายใจ แล้วแตกกระจายตั้งแต่ 17.72 วิ ขณะที่หลุมดำเปิดจากกึ่งกลางและเต็มเฟรมที่ 18.17 วิ
การ์ดปิดท้าย, 18.2–19.2 วิ สีเข้ม ลูกบอลโตขึ้นจากความว่างเปล่าตรงกลาง (142 px ที่ x 539, y 959) โลโก้ตัวอักษรของคุณในไล่เฉดชมพูไปส้มปรากฏใต้ลูกบอลที่ 18.1 วิ คงอยู่ แล้วเฟดหายที่ 18.85 วิ เหลือเพียงลูกบอลตรงตำแหน่งที่เฟรมแรกของหนังเริ่มต้นพอดี ลูปจึงไร้รอยต่อ
องค์ประกอบภาพ
พาเลตต์:
ราตรีลึก #0C0A1E และ #14112E ที่สว่างขึ้นเล็กน้อยสำหรับฉากมืด
กระดาษ #F2EFFA สำหรับฉากสว่าง
หมึก #1C0B5D สำหรับตัวอักษรบนกระดาษ
ไล่เฉดสีเน้นชมพูไปส้ม #FB2D89 → #FE9117
สีเน้นที่สองสีม่วง #7C4DFF
สีเหลือง #FFD23F เฉพาะรูปทรงของเล่น
คำในฮุกเป็นสีกระดาษบนการตัดที่มืด และสีหมึกบนการตัดที่เป็นกระดาษ
ตัวอักษร:คำและชื่อเรื่องใช้ Manrope ExtraBold ระยะห่างตัวอักษรแคบ (-0.035em ในชื่อเรื่องตัวพิมพ์ใหญ่)
ชื่อแบรนด์ในมอนตาจใช้ Anton
แฮนเดิลเล็ก ๆ «@yourbrand» (ให้แทนที่) ด้วย JetBrains Mono ที่มุมซ้ายบน ห่างจากขอบซ้าย 56 px และจากด้านบน 246 px ตลอดทั้งเรื่อง
ชื่อเรื่องลูกตุ้ม: บรรทัดแรกสูงตัวพิมพ์ใหญ่ประมาณ 145 px บรรทัดสองประมาณ 128 px จัดกึ่งกลาง
ลูกบอลเป็นทรงกลมเงามัน: ไฮไลต์สีขาวนุ่มที่ซ้ายบนบนตัวบอลที่ไล่เฉดส้ม → ชมพู → แมเจนตาเข้ม
ชื่อแบรนด์ในมอนตาจ: สามเลเยอร์ (เงาแข็งเยื้อง 9 px, เส้นขอบ 16 px และสีเติม) เป็นสีขาวขอบเข้มบนโลกที่มืดหรือวุ่นวาย และสีเข้มขอบขาวบนโลกที่สว่าง
คำวอกเซล: หนึ่งแถว สูงประมาณ 430 px กว้าง 890 px ตัวอักษรแรกไล่เฉดชมพูไปส้มจากบนลงล่าง ส่วนที่เหลือเป็นสีขาวกระดาษ
การ์ดปิดท้าย: ลูกบอลอยู่กึ่งกลาง โลโก้ตัวอักษรไล่เฉดที่ประมาณ y 1225 กว้างประมาณ 620 px
เทคนิค
ฮุก:
แต่ละคำลงในสี่เฟรมด้วย ease-out แรง ๆ (power3.out) การเข้าฉากหมุนเวียนกัน: ระยะห่างตัวอักษรที่หุบเข้าจากครึ่งเอ็ม การดรอปพร้อมซูมจาก 125% และต่ำลง 320 px การยืดแนวตั้งจาก 260% โดยยึดที่เส้นฐาน และการเลื่อนเข้าจากนอกจอซ้าย 835 px
การเปลี่ยนพื้นหลังเป็นฮาร์ดคัต
ทุกการตัด ลูกบอลพองเป็น 125% อยู่กับที่หนึ่งเฟรม และอยู่ที่จุดสูงสุดของการกระโดดในเฟรมถัดไป ตลอดห้าเฟรมมันไหลไปยังตำแหน่งพักอีกที่ (x 287 หรือ 788) พร้อมหดกลับ
ลูกตุ้ม:แกว่ง ±23.6° ด้วย power3.inOut ใน 0.34 วิ แต่ละการแกว่งอยู่กึ่งกลางทุกจังหวะที่สอง (3.6, 4.4, 5.2, 6.0, 6.8, 7.6 วิ) และค้างที่ปลายทั้งสอง
สำเนาจางสามชุดห่างกันหนึ่งเฟรมลากตามตุ้ม
แท่งมองเห็นได้ชัดเจน และเงาก็เด่น
แต่ละการแกว่งกวาดชื่อเรื่องไปสู่อันถัดไป ชื่อใหม่แสดงในด้านที่ตุ้มผ่านไปแล้วและชื่อเก่าในอีกด้าน โดยใช้มาสก์ inset สี่เหลี่ยมด้วย easing เดียวกัน
ที่ 7.2 วิ ทุกอย่างเลยแนวแท่งกลายเป็นสีมืด และการแกว่งครั้งสุดท้ายลากความมืดข้ามเฟรม
โคมไฟ:ลูกบอลไหลไปกลางจอในหนึ่งในสามวินาทีและเริ่มเรืองแสง พร้อมฮาโลสีส้มชมพูนุ่ม ๆ รอบตัวประมาณ 220 px
ลำแสงกรวยเปิดจากลูกบอลเป็นแถบแคบ 7° ชี้ขึ้นตรง ๆ มันกวาดลงไปทางซ้ายและขวาพร้อมกว้างขึ้นตามการเคลื่อนของลูกบอล: ไปถึงราว x 800, y 1090 แล้ว x 900, y 975 แล้วขึ้นไปที่ x 760, y 560
กรวยตั้งลงเหนือคำ กว้าง 120° และชี้ลง
กรวยเป็นมาสก์รูปลิ่มที่มีจุดยอดอยู่ที่ลูกบอล เผยหน้ากระดาษใต้ความมืด สำเนาของหน้ากระดาษที่ความทึบ 28% กว้างขึ้น 4.5° ข้างละด้าน สร้างเงามัวสีเทาคมชัด
ตั้งแต่ 12.27 วิ กรวยเปิดเป็น 360° ใน 0.33 วิ ด้วย easing แบบ in-out
มอนตาจ: ฮาร์ดคัตทุก 0.2 วิ หลังชื่อที่อยู่นิ่ง แต่ละโลกเคลื่อนไหวในช่องของมัน: วงแหวนซูมและหมุน ป้ายแกว่ง คีย์ถูกกด รูปทรงตีลังกา และเสาพุ่งขึ้น
ฟินาเล่วอกเซล:ลูกบาศก์เล็กราว 800 ลูก หนาสามชั้น บนกริด 11x18 ต่อตัวอักษร
ลูกบาศก์เริ่มกระจายในมิติความลึกและบินเข้าที่ด้วย quartic in-out ในครึ่งวินาที เหลื่อมกันได้ถึง 0.18 วิ ขณะที่จุดเล็ก ๆ พุ่งผ่านกล้อง
คำหายใจ: แต่ละตัวอักษรหมุนเล็กน้อยรอบจุดศูนย์กลาง และมีระลอกคลื่นวิ่งผ่านแถวของมัน
ตั้งแต่ 17.72 วิ ลูกบาศก์ทุกลูกแตกออกไปด้านนอกและเข้าหาเลนส์ เป็นริ้วด้วยโมชันเบลอ
แผ่นดิสก์สีเข้มเปิดจากรูเข็มที่กึ่งกลาง (power3.in, 0.37 วิ ตั้งแต่ 17.8 วิ) และเต็มเฟรมที่ 18.17 วิ โดยมีลูกบาศก์บินอยู่เหนือมัน
การ์ดปิดท้าย: ลูกบอลโตขึ้นจากความว่างเปล่าในราว 0.12 วิ และโลโก้ตัวอักษรเฟดหายที่ 18.85 วิ
ดนตรี
สร้างแทร็กอิเล็กทรอนิกส์บรรเลงออริจินัลที่มืด หนักแน่น ที่ 150 BPM ในคีย์ดีไมเนอร์ ฟีลแบบ half-time (คิกที่จังหวะหนึ่ง สแนร์ที่จังหวะสาม) มีเบสบิดเบี้ยวเต้นเป็นโน้ตเขบ็ต กลองกระชับ และแพดตึงเครียด รวมทั้งเสียงร้องตัดต่อที่ผ่านการประมวลผลไม่มีคำร้องใช้เป็นเท็กซ์เจอร์ ไม่มีการร้อง เล่นตั้งแต่เฟรมแรก คิกและสแนร์ตกบนการตัดคำและการแกว่งของลูกตุ้ม และดรอปที่ 12.8 วิ จบด้วยเสียงกระแทกหนัก ๆ พร้อมคอร์ดมืดตรงกับหลุมดำที่ 18.0 วิ พอดี ซึ่งก้องอยู่ใต้การ์ดปิดท้าย ตัดให้ยาว 19.2 วิ ตรงห้องเพลง
เสียง
ซ้อนเสียงเหล่านี้เหนือดนตรี:
เสียงคลิกเบา ๆ ทุกครั้งที่คำแฟลช
เสียงวู้ชทุกครั้งที่แกว่ง
ไรเซอร์เข้าสู่ลูกตุ้ม
เสียงสวีปตกเมื่อแสงดับ
เสียงระฆังเมื่อลูกบอลสว่างขึ้น
ไรเซอร์เข้าสู่บูมที่มอนตาจตอน 12.8 วิ
เสียงติ๊กเบา ๆ ทุกครั้งที่เปลี่ยนโลกใหม่
เสียงวู้ชเมื่อลูกบาศก์พุ่งเข้ามา
เสียงบูมเล็ก ๆ เมื่อคำลงที่
ไรเซอร์เข้าสู่บูมลึกใต้หลุมดำ
ไม่มีเสียงพูด
สิ่งที่ต้องเตรียม
- ไม่บังคับ: โลโก้ตัวอักษรของคุณ ควรเป็นพื้นหลังโปร่งใส สำหรับโลโก้ล็อกอัปบนหน้าโคมไฟและการ์ดปิดท้าย หากไม่มี ชื่อแบรนด์ของคุณจะถูกจัดเป็นตัวอักษรไล่เฉดสี
เทคนิคในวิดีโอนี้
เทคนิคโมชันดีไซน์ที่ใช้สร้างวิดีโอนี้ แต่ละเทคนิคมีโค้ดที่ทำงานได้ด้วยตัวเอง เปิดในเบราว์เซอร์หรือส่งให้เอเจนต์ของคุณได้
ที่ 0:01 ในวิดีโอ ตัวอักษรแฟลชคำตามจังหวะตัดพร้อมสี่ท่าเข้า
หนึ่งคำต่อหนึ่งจังหวะ (0.4 วินาทีที่ 150 BPM และครึ่งจังหวะตอนท้าย) พื้นหลังสลับระหว่างเกือบดำกับสีกระดาษทุกครั้งที่ตัด แต่ละคำลงภายในสี่เฟรมด้วย power3.out โดยใช้หนึ่งในสี่ท่าเข้าสลับกันไป: tracking ที่บีบเข้าจากครึ่ง em, การดรอปพร้อมซูมจาก 125% และต่ำลง 320 px, การยืดแนวตั้งจาก 260% โดยยึดที่เส้นฐาน และการสไลด์เข้าจากนอกเฟรมซ้าย 835 px
ใช้เมื่อไร แถลงการณ์หรือประโยคเรียกความสนใจที่พูดทีละคำตามจังหวะ
แสดงโค้ด
<!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=Manrope:wght@800&family=Anton&display=swap"); #root { position: relative; width: 100%; height: 100%; overflow: hidden; } #bg { position: absolute; inset: 0; background: #0c0a1e; } .w { position: absolute; left: 0; top: 840px; width: 1080px; text-align: center; white-space: nowrap; font: 800 230px/1.1 "Manrope", sans-serif; letter-spacing: -0.03em; opacity: 0; } .w span { display: inline-block; } </style> </head> <body> <div id="root" data-composition-id="main" data-start="0" data-duration="2.8" data-width="1080" data-height="1920"> <div id="bg" class="clip" data-start="0" data-duration="2.8"></div> <div id="words" class="clip" data-start="0" data-duration="2.8"></div> </div> <script> const BEAT = 0.4; // seconds per beat (150 BPM) const E = 4 / 30; // every entrance lands in four frames const DARK = "#0c0a1e", PAPER = "#f2effa", INK = "#1c0b5d"; const WORDS = [ // [word, entrance, beats on screen] ["we", "track", 1], ["don't", "zoom", 1], ["just", "stretch", 1], ["prompt.", "slide", 1], ["we", "track", 0.5], ["direct.", "zoom", 1], ["type", "stretch", 0.5], ["light", "slide", 0.5], ["depth", "track", 0.5], ]; const tl = gsap.timeline({ paused: true }); const host = document.getElementById("words"), bg = document.getElementById("bg"); let t = 0; WORDS.forEach(([text, kind, beats], i) => { const dark = i % 2 === 0; const el = document.createElement("div"); el.className = "w"; el.style.color = text === "direct." ? "#fb2d89" : dark ? PAPER : INK; el.innerHTML = [...text].map((c) => "<span>" + c + "</span>").join(""); host.appendChild(el); tl.set(bg, { backgroundColor: dark ? DARK : PAPER }, t); tl.set(el, { opacity: 1 }, t); tl.set(el, { opacity: 0 }, t + beats * BEAT); if (kind === "track") el.querySelectorAll("span").forEach((g, k, all) => tl.fromTo(g, { x: 115 * (k - all.length / 2) }, { x: 0, duration: E, ease: "power3.out", immediateRender: false }, t)); if (kind === "zoom") tl.fromTo(el, { scale: 1.25, y: 320 }, { scale: 1, y: 0, duration: E, ease: "power3.out", immediateRender: false }, t); if (kind === "stretch") tl.fromTo(el, { scaleY: 2.6, transformOrigin: "50% 100%" }, { scaleY: 1, duration: E, ease: "power3.out", immediateRender: false }, t); if (kind === "slide") tl.fromTo(el, { x: -835 }, { x: 0, duration: E, ease: "power3.out", immediateRender: false }, t); t += beats * BEAT; }); 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:00 ในวิดีโอ ตัวละครลูกบอลที่เด้งตอนตัดแล้วกระโดดข้ามไป
ทรงกลม CSS มันเงา (radial-gradient สองชั้น: ไฮไลต์ขาวนุ่มบนตัวบอลไล่จากส้มเป็นแมเจนตา) วางอยู่ที่หนึ่งในสองจุดบนเส้นพื้น ในเฟรมของแต่ละการตัดมันพองเป็น 125% อยู่กับที่ เฟรมถัดไปก็อยู่จุดสูงสุดของการกระโดดแล้ว และตลอดห้าเฟรมมันไหลไปยังอีกจุดพร้อมหดกลับเป็น 100% จึงดูเหมือนเด้งแบบ 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> #root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #0c0a1e; } #floor { position: absolute; inset: 0; } #ball { position: absolute; left: 0; top: 0; width: 88px; height: 88px; background: radial-gradient(circle at 33% 27%, rgba(255,246,236,.95) 0%, rgba(255,246,236,0) 15%), radial-gradient(circle at 38% 32%, #ffb347 0%, #fe9117 24%, #fb2d89 66%, #b0135c 90%, #7d0b40 100%); border-radius: 50%; } </style> </head> <body> <div id="root" data-composition-id="main" data-start="0" data-duration="2.8" data-width="1080" data-height="1920"> <div id="floor" class="clip" data-start="0" data-duration="2.8"><div id="ball"></div></div> </div> <script> const F = 1 / 30; const L = { x: 287, y: 1516 }, R = { x: 788, y: 1516 }; // the two resting spots const P = [0, 0.42, 0.7, 0.876, 0.963, 0.995, 1]; // share of the way across, frame by frame const H = [0, 165, 136, 65, 19, 2, 0]; // height above the floor, px const S = [1.25, 1.14, 1.07, 1.045, 1.02, 1, 1]; // the pop on the cut, then back to size const tl = gsap.timeline({ paused: true }); const ball = document.getElementById("ball"); gsap.set(ball, { xPercent: -50, yPercent: -50, x: L.x, y: L.y }); for (let k = 0; k < 6; k++) { const from = k % 2 ? R : L, to = k % 2 ? L : R, t0 = 0.4 + k * 0.4; // a hop on every beat P.forEach((p, f) => tl.to(ball, { x: from.x + (to.x - from.x) * p, y: to.y - H[f], scale: S[f], duration: F, ease: "none" }, t0 + (f - 1) * F)); } 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 ในวิดีโอ ทรานซิชันลูกตุ้มที่ปัดไตเติลและลากแสงตาม
ก้านห้อยจากจุดหมุนเหนือเฟรมและแกว่ง ±23.6° ด้วย power3.inOut ใน 0.34 วินาที กึ่งกลางทุกจังหวะที่สอง แล้วหยุดค้าง เมื่อลูกตุ้มผ่านไป clip-path inset ที่ขับด้วย ease เดียวกันจะเผยไตเติลสองบรรทัดถัดไปทางด้านที่ลูกตุ้มผ่านแล้วและตัดอันเก่าออก สำเนาจางของลูกตุ้มสามชิ้นห่างกันหนึ่งเฟรมทิ้งรอยลาก และสำเนาเบลอของก้านกับลูกตุ้มทำหน้าที่เป็นเงา ในการแกว่งครั้งสุดท้าย โพลิกอนสีเข้มที่มีเส้นก้านเป็นขอบจะปิดทุกอย่างที่อยู่เลยไปและถูกลากข้ามเฟรม
ใช้เมื่อไร สลับชุดข้อความสั้นๆ ด้วยจังหวะแบบกายภาพเหมือนเมโทรนอม จบด้วยจอดับ
แสดงโค้ด
<!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=Manrope:wght@800&family=Anton&display=swap"); #root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #f2effa; } #stage { position: absolute; inset: 0; } .title { position: absolute; left: 0; top: 600px; width: 1080px; text-align: center; font: 800 150px/0.95 "Manrope", sans-serif; letter-spacing: -0.04em; color: #1c0b5d; opacity: 0; } .title .hot { color: #fb2d89; } .arm { position: absolute; left: 536px; top: -380px; width: 8px; height: 1317px; transform-origin: 4px 0; } .rod { position: absolute; inset: 0; background: #120a33; border-radius: 4px; } .bob { position: absolute; left: -52px; top: 1261px; width: 112px; height: 112px; background: radial-gradient(circle at 33% 27%, rgba(255,246,236,.95) 0%, rgba(255,246,236,0) 15%), radial-gradient(circle at 38% 32%, #ffb347 0%, #fe9117 24%, #fb2d89 66%, #b0135c 90%, #7d0b40 100%); border-radius: 50%; } #shadow { left: 558px; top: -374px; filter: blur(9px); opacity: .22; } #shadow .rod, #shadow .bob { background: #1c0b5d; } #curtain { position: absolute; inset: 0; background: #0c0a1e; opacity: 0; } </style> </head> <body> <div id="root" data-composition-id="main" data-start="0" data-duration="4" data-width="1080" data-height="1920"> <div id="stage" class="clip" data-start="0" data-duration="4"> <div class="title" id="t0"><div>MADE</div><div>BY HAND?</div></div> <div class="title" id="t1"><div>MADE</div><div class="hot">BY CODE.</div></div> <div class="title" id="t2"><div>NO</div><div>KEYFRAMES.</div></div> <div class="title" id="t3"><div>AND</div><div>LIGHT.</div></div> <div class="arm" id="shadow"><div class="rod"></div><div class="bob"></div></div> <div class="arm ghost" id="g2" style="opacity:.15"><div class="bob"></div></div> <div class="arm ghost" id="g1" style="opacity:.3"><div class="bob"></div></div> <div id="curtain"></div> <div class="arm" id="arm"><div class="rod"></div><div class="bob"></div></div> </div> </div> <script> const AMP = 23.6, SWING = 0.34, PX = 540, PY = -380, L = 1317; // swing angle, its length, pivot, arm const CENTRES = [0.4, 1.2, 2.0, 2.8]; // a swing on every second beat const tl = gsap.timeline({ paused: true }); const titles = [...document.querySelectorAll(".title")]; gsap.set(titles[0], { opacity: 1 }); const x = (deg) => PX + L * Math.sin(deg * Math.PI / 180); // where the bob is, left or right for (const [sel, lag] of [["#arm", 0], ["#shadow", 0], ["#g1", 1 / 30], ["#g2", 2 / 30]]) { gsap.set(sel, { rotation: AMP }); gsap.set(sel + " .bob", { rotation: -AMP }); // keep the highlight up and left CENTRES.forEach((c, k) => { const to = k % 2 ? AMP : -AMP; tl.to(sel, { rotation: to, duration: SWING, ease: "power3.inOut" }, c - SWING / 2 + lag); tl.to(sel + " .bob", { rotation: -to, duration: SWING, ease: "power3.inOut" }, c - SWING / 2 + lag); }); } CENTRES.slice(0, 3).forEach((c, k) => { // the wipe follows the bob const inc = titles[k + 1], out = titles[k], t0 = c - SWING / 2, a = x(-AMP), b = x(AMP), ltr = k % 2 === 0; tl.set(inc, { opacity: 1 }, t0); tl.fromTo(inc, { clipPath: ltr ? "inset(0px " + (1080 - a) + "px 0px 0px)" : "inset(0px 0px 0px " + b + "px)" }, { clipPath: ltr ? "inset(0px " + (1080 - b) + "px 0px 0px)" : "inset(0px 0px 0px " + a + "px)", duration: SWING, ease: "power3.inOut", immediateRender: false }, t0); tl.fromTo(out, { clipPath: ltr ? "inset(0px 0px 0px " + a + "px)" : "inset(0px " + (1080 - b) + "px 0px 0px)" }, { clipPath: ltr ? "inset(0px 0px 0px " + b + "px)" : "inset(0px " + (1080 - a) + "px 0px 0px)", duration: SWING, ease: "power3.inOut", immediateRender: false }, t0); tl.set(out, { opacity: 0 }, t0 + SWING); }); // the light goes out beyond the rod, and the last swing drags the dark across const poly = (deg) => { const r = deg * Math.PI / 180, qx = PX + 3 * L * Math.sin(r), qy = PY + 3 * L * Math.cos(r); return "polygon(" + PX + "px " + PY + "px, " + qx + "px " + qy + "px, 6000px " + qy + "px, 6000px -3000px, " + PX + "px -3000px)"; }; const cur = document.getElementById("curtain"), ease = gsap.parseEase("power3.inOut"), last = CENTRES[3] - SWING / 2; gsap.set(cur, { clipPath: poly(AMP) }); tl.set(cur, { opacity: 1 }, 2.2); for (let f = 1; f <= 11; f++) tl.to(cur, { clipPath: poly(AMP - 2 * AMP * ease(Math.min(1, f / 30 / SWING))), duration: 1 / 30, ease: "none" }, last + (f - 1) / 30); window.__timelines = window.__timelines || {}; window.__timelines["main"] = tl; </script> <script type="module"> // Fit the composition to the window and play its timeline on a loop. const root = document.getElementById('root'); const width = Number(root?.dataset.width) || 1080; const height = Number(root?.dataset.height) || 1920; const fit = () => { if (!root) return; const scale = Math.min(innerWidth / width, innerHeight / height); Object.assign(root.style, { width: width + 'px', height: height + 'px', transform: 'scale(' + scale + ')', marginLeft: (innerWidth - width * scale) / 2 + 'px', marginTop: (innerHeight - height * scale) / 2 + 'px', }); }; fit(); addEventListener('resize', fit); window.__timelines?.main?.repeat(-1).play(0); </script> </body> </html>ที่ 0:10 ในวิดีโอ รูปทรงกรวยสปอตไลต์ที่ค้นหาแล้วเผยหน้ากระดาษที่สว่าง
บนพื้นมืด ลูกบอลเรืองแสงเคลื่อนผ่านหลายตำแหน่ง ขณะที่ clip-path รูปลิ่ม (ยอดอยู่ที่ลูกบอล มีทิศทางและครึ่งความกว้าง วาดเป็นโพลิกอนที่ยาวไกลเกินเฟรม) แสดงเลเยอร์กระดาษที่มีตัวอักษร สำเนาที่สองของหน้าที่ความทึบ 28% ถูกตัดด้วยลิ่มที่กว้างกว่า 4.5° ทำให้เกิดเพนัมบราขอบคม ลำแสงเริ่มเป็นเส้นแคบ 7° ชี้ขึ้น กวาดไปทางซ้ายและลงพร้อมขยายถึงราว 120° แล้วเปิดเป็น 360° ในหนึ่งในสามวินาทีเพื่อส่องสว่างทั้งหน้า
ใช้เมื่อไร เผยบรรทัดข้อความหรือสินค้าเหมือนโคมไฟกำลังค้นพบมันในความมืด
แสดงโค้ด
<!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=Manrope:wght@800&family=Anton&display=swap"); #root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #14112e; } #scene { position: absolute; inset: 0; } .page { position: absolute; inset: 0; background: #f2effa; } #soft { opacity: .28; } .line { position: absolute; left: 0; top: 660px; width: 1080px; text-align: center; font: 800 190px/0.93 "Manrope", sans-serif; letter-spacing: -0.04em; color: #1c0b5d; } .line span { color: #7c4dff; } #lamp { position: absolute; left: 0; top: 0; width: 100px; height: 100px; margin: -50px 0 0 -50px; background: radial-gradient(circle at 33% 27%, rgba(255,246,236,.95) 0%, rgba(255,246,236,0) 15%), radial-gradient(circle at 38% 32%, #ffb347 0%, #fe9117 24%, #fb2d89 66%, #b0135c 90%, #7d0b40 100%); border-radius: 50%; } #glow { position: absolute; left: 0; top: 0; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%; background: radial-gradient(circle, rgba(255,128,72,.6) 0%, rgba(252,80,110,.12) 36%, rgba(252,60,120,0) 50%); } </style> </head> <body> <div id="root" data-composition-id="main" data-start="0" data-duration="4.5" data-width="1080" data-height="1920"> <div id="scene" class="clip" data-start="0" data-duration="4.5"> <div class="page" id="soft"><div class="line">LIGHT<br>IS JUST<br><span>MATH.</span></div></div> <div class="page" id="lit"><div class="line">LIGHT<br>IS JUST<br><span>MATH.</span></div></div> <div id="glow"></div><div id="lamp"></div> </div> </div> <script> const PEN = 4.5; // the soft edge, degrees const s = { x: 536, y: 696, dir: 271, half: 0 }; // ball and beam (0 deg = right, 90 = down) const wedge = (h) => { if (h <= 0) return "polygon(" + Array(8).fill(s.x + "px " + s.y + "px").join(",") + ")"; h = Math.min(h, 180); const pts = [s.x + "px " + s.y + "px"]; for (let i = 0; i <= 6; i++) { const a = (s.dir - h + i * h / 3) * Math.PI / 180; pts.push((s.x + 5000 * Math.cos(a)) + "px " + (s.y + 5000 * Math.sin(a)) + "px"); } return "polygon(" + pts.join(",") + ")"; }; const draw = () => { gsap.set("#lamp, #glow", { x: s.x, y: s.y }); gsap.set("#soft", { clipPath: wedge(s.half) }); gsap.set("#lit", { clipPath: wedge(s.half >= 180 ? 180 : s.half - PEN) }); }; const tl = gsap.timeline({ paused: true, onUpdate: draw }); tl.to(s, { half: 19, duration: 0.25, ease: "power2.out" }, 0.2) // a sliver opens upward .to(s, { x: 797, y: 1094, dir: 154, half: 22, duration: 0.6, ease: "power2.inOut" }, 0.5) // sweeps down-left .to(s, { x: 897, y: 976, dir: 179, half: 27, duration: 0.5, ease: "power2.out" }, 1.2) .to(s, { x: 757, y: 558, dir: 124, half: 35, duration: 0.5, ease: "power2.inOut" }, 1.8) .to(s, { x: 537, y: 326, dir: 90, half: 66, duration: 0.45, ease: "power2.inOut" }, 2.4) // settles above the words .to(s, { half: 180, duration: 0.35, ease: "power2.inOut" }, 3.8); // and lights everything draw(); 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:14 ในวิดีโอ เลย์เอาต์ชื่อตัวอักษรเส้นขอบเหนือโลกที่เปลี่ยนทุกครึ่งจังหวะ
คำหนึ่งคำด้วยฟอนต์ดิสเพลย์แบบแคบตรึงอยู่กลางเฟรม ขณะที่โลกด้านหลังเปลี่ยนทุก 0.2 วินาที (โน้ตเขบ็ตหนึ่งชั้นที่ 150 BPM): ไล่เฉดสี ลายทาง วงแหวนซ้อนศูนย์กลาง ตาราง สีเรียบ คำประกอบจากสามเลเยอร์ซ้อนกัน: เงาแข็งเยื้อง 9 px เส้นขอบ 16 px และสีเติม บนโลกสว่างสีเติมกับเส้นขอบจะสลับกัน จึงอ่านออกเสมอ
ใช้เมื่อไร ชื่อแบรนด์หรือสินค้าที่ต้องอยู่รอดท่ามกลางลุคที่เปลี่ยนรัวเร็ว
แสดงโค้ด
<!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=Manrope:wght@800&family=Anton&display=swap"); #root { position: relative; width: 100%; height: 100%; overflow: hidden; } #world { position: absolute; inset: 0; } #name { position: absolute; inset: 0; } .wl { position: absolute; left: 0; top: 760px; width: 1080px; text-align: center; font: 330px/1.2 "Anton", sans-serif; } .sh { transform: translate(9px, 9px); } .sh, .ol { -webkit-text-stroke: 16px currentColor; } </style> </head> <body> <div id="root" data-composition-id="main" data-start="0" data-duration="3.2" data-width="1080" data-height="1920"> <div id="world" class="clip" data-start="0" data-duration="3.2"></div> <div id="name" class="clip" data-start="0" data-duration="3.2"><div class="wl sh">motion</div><div class="wl ol">motion</div><div class="wl fi">motion</div></div> </div> <script> const WORLDS = [ // [background, light world?] ["radial-gradient(80% 60% at 40% 40%, #fe9117, #fb2d89 60%, #8e89a3)", true], ["linear-gradient(160deg, #fb2d89, #fe9117)", false], ["linear-gradient(#7c4dff 0 59%, #0c0a1e 59% 74%, #fb2d89 74%)", false], ["repeating-radial-gradient(circle, #1c0b5d 0 60px, #f2effa 60px 120px)", false], ["repeating-radial-gradient(circle, #f2effa 0 70px, #1c0b5d 70px 140px)", true], ["radial-gradient(#8f63ff, #5a2fe0)", true], ["repeating-linear-gradient(90deg, #17122b 0 110px, #f2effa 110px 118px)", false], ["#0c0a1e", false], ["#7c4dff", false], ["radial-gradient(#4a1440, #22061f)", false], ["#ffd9e6", true], ["linear-gradient(#b9b5c6, #7f7a90)", false], ["linear-gradient(#fb2d89, #7c4dff)", false], ["repeating-linear-gradient(45deg, #fe9117 0 60px, #f2effa 60px 120px)", true], ["#f7f5fc", true], ["#fb4f6a", true], ]; const tl = gsap.timeline({ paused: true }); const world = document.getElementById("world"); const [sh, ol, fi] = document.querySelectorAll(".wl"); WORLDS.forEach(([bg, light], k) => { // a cut every eighth note const t = k * 0.2; tl.set(world, { background: bg }, t); tl.set([sh, ol], { color: light ? "#ffffff" : "#0c0a1e" }, t); tl.set(fi, { color: light ? "#0c0a1e" : "#ffffff" }, t); }); 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:16 ในวิดีโอ 3 มิติคำจากวอกเซลที่บินมารวมกัน หายใจ แล้วระเบิด
คำที่วาดบิตแมป 11x18 ต่อหนึ่งตัวอักษรกลายเป็นลูกบาศก์แบบ instanced ราว 800 ลูก หนาสามชั้น แต่ละลูกเริ่มจากตำแหน่งและการหมุนแบบสุ่ม แล้วบินไปยังเซลล์ของตัวเองด้วย quartic in-out ใน 0.5 วินาที เหลื่อมกันได้ถึง 0.18 วินาที ขณะที่อนุภาคหลายร้อยชิ้นพุ่งผ่านกล้อง เมื่อลงแล้วแต่ละตัวอักษรหมุนเบาๆ รอบจุดศูนย์กลางของตัวเอง และคลื่นวิ่งผ่านแถวของมัน ตอนท้ายทุกลูกเร่งออกด้านนอกและเข้าหาเลนส์ (quadratic in) โดยแต่ละลูกมีสำเนาจางอีกหกชิ้นตามหลังไม่กี่มิลลิวินาทีเป็นโมชันเบลอ ตัวอักษรแรกไล่สีจากชมพูเป็นส้มจากบนลงล่าง ที่เหลือเป็นขาวกระดาษ บนพื้นม่วง
ใช้เมื่อไร โลโก้หรือคำสั้นๆ ที่ประกอบขึ้นจากอนุภาคในช่วงไคลแมกซ์
ไลบรารี
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> #root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #7c4dff; } #gl { position: absolute; inset: 0; width: 1080px; height: 1920px; } </style> </head> <body> <div id="root" data-composition-id="main" data-start="0" data-duration="2.6" data-width="1080" data-height="1920"> <canvas id="gl" class="clip" data-start="0" data-duration="2.6" width="1080" height="1920"></canvas> </div> <script type="module"> import * as THREE from "https://cdn.jsdelivr.net/npm/[email protected]/+esm"; const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById("gl"), antialias: true, alpha: true, preserveDrawingBuffer: true }); renderer.setPixelRatio(1); renderer.setSize(1080, 1920, false); const scene = new THREE.Scene(), cam = new THREE.PerspectiveCamera(30, 1080 / 1920, 10, 20000); cam.position.set(0, 420, 3583); cam.lookAt(0, 0, 0); // about 1 px per unit on the word's plane scene.add(new THREE.HemisphereLight(0xffffff, 0x4a2fa0, 1.6)); const sun = new THREE.DirectionalLight(0xffffff, 2.7); sun.position.set(-600, 1400, 1800); scene.add(sun); const G = { // 11 x 18 cells per letter ("#" = cube) F: ["###########", "###########", "##", "##", "##", "##", "##", "##", "#########", "#########", "##", "##", "##", "##", "##", "##", "##", "##"], A: [" ######### ", "###########", ...Array(6).fill("## ##"), "###########", "###########", ...Array(8).fill("## ##")], B: ["######### ", "########## ", ...Array(5).fill("## ## "), "########## ", "######### ", "########## ", ...Array(6).fill("## ##"), "###########", "########## "], }; const P = 24, LEFT = [96, 408, 720], TOP = 744; // cell pitch, letter positions in the frame let seed = 23; const rnd = () => ((seed = (Math.imul(seed, 1664525) + 1013904223) >>> 0) / 4294967296); const cubes = []; ["F", "A", "B"].forEach((ch, li) => G[ch].forEach((row, ry) => [...row].forEach((cell, cx) => { if (cell !== "#") return; for (let dz = 0; dz < 3; dz++) cubes.push({ li, ry, color: li ? new THREE.Color(0xf2effa) : new THREE.Color(0xfb2d89).lerp(new THREE.Color(0xfe9117), ry / 17), tx: LEFT[li] + cx * P + P / 2 - 540, ty: 960 - (TOP + ry * P + P / 2), tz: -dz * P, sx: (rnd() - 0.5) * 3600, sy: (rnd() - 0.5) * 5200, sz: -3000 + rnd() * 5400, r: [rnd() * 6, rnd() * 6, rnd() * 6], delay: rnd() * 0.18, dur: 0.5 + rnd() * 0.12 }); }))); const mesh = new THREE.InstancedMesh(new THREE.BoxGeometry(21, 21, 21), new THREE.MeshStandardMaterial({ roughness: 0.55 }), cubes.length); cubes.forEach((k, i) => mesh.setColorAt(i, k.color)); scene.add(mesh); const centres = LEFT.map((x) => new THREE.Vector3(x + 132 - 540, 0, -P)), o = new THREE.Object3D(), v = new THREE.Vector3(), e = new THREE.Euler(); const inOut4 = (p) => (p < 0.5 ? 8 * p ** 4 : 1 - 8 * (1 - p) ** 4), c01 = (x) => Math.min(1, Math.max(0, x)); function draw(t) { const hold = Math.max(0, t - 0.55); cubes.forEach((k, i) => { const p = inOut4(c01((t - k.delay) / k.dur)), c = centres[k.li]; v.set(k.tx - c.x, k.ty, k.tz - c.z + 10 * Math.sin(k.ry * 0.6 + hold * 6)); // a ripple through the rows e.set(0.07 * Math.sin(hold * 3.1 + k.li * 1.7), 0.2 * Math.sin(hold * 4.2 + k.li * 0.9), 0); // each letter turns a little v.applyEuler(e).add(c); const q = c01((t - 1.8) / 0.55), b = q * q * q; // the burst o.position.set((k.sx + (v.x - k.sx) * p) * (1 + 3.5 * b), (k.sy + (v.y - k.sy) * p) * (1 + 3.5 * b), k.sz + (v.z - k.sz) * p + 3000 * b); o.rotation.set(k.r[0] * (1 - p) + 4 * b, k.r[1] * (1 - p) + 3 * b, k.r[2] * (1 - p)); o.updateMatrix(); mesh.setMatrixAt(i, o.matrix); }); mesh.instanceMatrix.needsUpdate = true; renderer.render(scene, cam); } const clock = { t: 0 }; const tl = gsap.timeline({ paused: true }); tl.to(clock, { t: 2.6, duration: 2.6, ease: "none" }, 0); tl.eventCallback("onUpdate", () => draw(clock.t)); 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:18 ในวิดีโอ ทรานซิชันไอริสหลุมดำสู่การ์ดปิดที่ลูปได้ต่อเนื่อง
จานสีเข้มขนาดสองเท่าของเส้นทแยงมุมเฟรมโตจาก 0 ที่กึ่งกลางด้วย power3.in ใน 0.37 วินาที จึงเริ่มเป็นรูเข็มขณะที่ตัวอักษรกำลังระเบิด แล้วกลืนทั้งเฟรมในจังหวะสุดท้าย ภายในนั้นลูกบอลหลักโตขึ้นจากความว่างเปล่าใน 0.12 วินาที โลโก้ตัวอักษรปรากฏในสองเฟรม ค้างไว้ แล้วจางหายไป 0.75 วินาทีต่อมา เหลือเพียงลูกบอลอยู่กึ่งกลางตรงที่เฟรมแรกของวิดีโอเริ่มต้น ทำให้รีลลูปได้อย่างไร้รอยต่อ
ใช้เมื่อไร ปิดงานที่ดังกระหึ่มด้วยการหยุดนิ่งที่โลโก้อย่างสงบ แล้ววนกลับสู่ช่วงเปิด
แสดงโค้ด
<!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=Manrope:wght@800&family=Anton&display=swap"); #root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #7c4dff; } #end { position: absolute; inset: 0; } #hole { position: absolute; left: 540px; top: 960px; width: 2400px; height: 2400px; margin: -1200px 0 0 -1200px; border-radius: 50%; background: #0c0a1e; } #ball { position: absolute; left: 0; top: 0; width: 142px; height: 142px; background: radial-gradient(circle at 33% 27%, rgba(255,246,236,.95) 0%, rgba(255,246,236,0) 15%), radial-gradient(circle at 38% 32%, #ffb347 0%, #fe9117 24%, #fb2d89 66%, #b0135c 90%, #7d0b40 100%); border-radius: 50%; } #mark { position: absolute; left: 0; top: 1160px; width: 1080px; text-align: center; font: 800 110px/1 "Manrope", sans-serif; letter-spacing: -0.03em; background: linear-gradient(90deg, #fb2d89, #fe9117); -webkit-background-clip: text; background-clip: text; color: transparent; } </style> </head> <body> <div id="root" data-composition-id="main" data-start="0" data-duration="1.5" data-width="1080" data-height="1920"> <div id="end" class="clip" data-start="0" data-duration="1.5"><div id="hole"></div><div id="ball"></div><div id="mark">your brand</div></div> </div> <script> const tl = gsap.timeline({ paused: true }); gsap.set("#ball", { xPercent: -50, yPercent: -50, x: 539, y: 959, scale: 0 }); tl.fromTo("#hole", { scale: 0 }, { scale: 1, duration: 0.37, ease: "power3.in" }, 0.1) // the hole opens .fromTo("#ball", { scale: 0 }, { scale: 1, duration: 0.12, ease: "power2.in", immediateRender: false }, 0.35) // the ball grows in it .fromTo("#mark", { opacity: 0 }, { opacity: 1, duration: 0.067, ease: "none" }, 0.4) .to("#mark", { opacity: 0, duration: 0.15, ease: "none" }, 1.15); // only the ball remains 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 Motionรหัสพรอมต์: NPX
Simple Motionรหัสพรอมต์: SYPรีลแบรนด์ บินผ่านโทรศัพท์ 3D พร้อมตัวอักษรเคลื่อนไหวนีออน
<direction> ทำรีลแบรนด์แนวตั้งความยาว 15.5 วินาที (1080x1920, 30 fps) การบินผ่านโทรศัพท์แบบ 3D เหนือโปรไฟล์ของแบรนด์ฉันเปลี่ยนเป็นช่วงโลโก้ จากนั้นตัวอักษรเคลื่อนไหวที่ตัดทีละพยางค์ตามบีตแทรปแบบฮาล์ฟไทม์ที่หนักแน่น จบที่โลโก้ของฉัน ทุกอย่างวาดขึ้น ไม่มีภาพถ่ายจริง ใช้โลโก้ของฉัน และใช้สีกับคำของแบรนด์ฉันแทนตัวอย่างด้านล่าง ลุคมีสามโลก: ไล่สีจากกรมท่าเข้มลึกไปเกือบดำสำหรับส่วน 3D, สตูดิโอสีเทาอ่อนตรงกลาง และสีดำสนิทกับแสงนีออนตอนท้าย หลีกเลี่ยงแผ่นสี่เหลี่ยมหรือลูกบาศก์หลังโลโก้ ตัวอักษรที่กลับด้านเมื่อคำผ่านไปด้านหลังบางอย่าง ข้อความที่แตะขอบเฟรม เฟรมกลับหัวหลังกล้องสะบัด และโลโก้โฮโลแกรมที่แบนหรือบี้ หน้าจอโทรศัพท์ต้องพอดีกับกรอบของมันพอดี </direction> <structure> 1. 0–4.3 วิ การบินผ่านโทรศัพท์ โทรศัพท์ 3D (ด้านหน้าจอและด้านหลังสีเงินเรืองแสงพร้อมส่วนนูนของกล้อง) ตีลังกาเข้ามา ตัวเล็กและเอียง ด้านหลังมาก่อน มันหมุนประมาณ 200 องศาและตั้งตรงบนหน้าจอที่ 1.05 วิ (power2.out) หน้าจออยู่กึ่งกลางเฟรมโดยมีขอบเท่ากันทุกด้าน แสดงแบรนด์เหมือนโปรไฟล์โซเชียล: แฮนเดิล รูปโปรไฟล์กลมพร้อมโลโก้ของฉัน ชื่อและสโลแกนหนึ่งบรรทัด ไบโอสองบรรทัดพร้อมเว็บไซต์ ปุ่มหลักสีชมพู และไฮไลต์วงกลมสี่อันที่ป้ายชื่อไม่ทับกัน ด้านล่างเป็นตาราง 3x3 ของกระเบื้องสีสันสดใสขนาดค่อนข้างเล็กมุมโค้งมนที่พอดีกับหน้าจอ พร้อมป้ายสั้น ๆ ที่พอดีภายในแต่ละกระเบื้อง ("IDEAS IN MOTION", "3D", "LOGO REVEAL"; แทนที่ด้วยของคุณ) ตั้งแต่ 1.05 วิ โทรศัพท์เอนไปด้านหลังประมาณ 48 องศาและขยายใหญ่ขึ้น ขณะที่กระเบื้องลอยขึ้นจากหน้าจอเข้าหากล้องที่ความสูงต่างกัน การสะบัดกล้อง (whip pan) ที่ 1.95 วิ ไปหยุดใกล้ ๆ ส่วนหัวของโปรไฟล์ กล้องเลื่อนลงตามไบโอช้า ๆ พร้อมเอียงตัว จนการสะบัดครั้งที่สองที่ 3.0 วิ พากล้องไปมองลงที่รูปโปรไฟล์ มันหยุดในแนวตั้งตรง จึงยังอ่านโปรไฟล์ได้ วงแหวนสีชมพูเรืองแสงสามวงซ้อนกันขึ้นมาจากรูปโปรไฟล์ (back.out ห่างกัน 80 มิลลิวินาที) สำเนาโลโก้ของฉันรูปวงกลมพร้อมเส้นขอบสีชมพูและแสงเรืองลอยขึ้นจากวงแหวน เอนเข้าหาผู้ชมเหมือนโฮโลแกรม 2. 4.3–6.5 วิ โลโก้ 3D ตัดฉับไปที่สัญลักษณ์โลโก้ของฉันเอง ที่ถูกดึงขึ้นเป็น 3D: ชั้นบาง ๆ ซ้อนกันในโทนเข้มลึก (เช่นชมพูเข้ม) อยู่หลังด้านหน้าที่มีแสง ไม่มีสี่เหลี่ยมอยู่ข้างหลัง มันเรืองแสงบนไล่สีวงกลมสีกรมท่า หมุนเข้ามาจากท่าเอียง (power3.out, 1 วิ) โยกไปมา แล้วหมุนออกไปตัวเล็กลง (power3.in) เข้าสู่การตัด คำตัวหนาเช่น "AHHHH" (แทนที่ด้วยของคุณ) วางบนวงแหวนใต้โลโก้ ไม่เคยทับโลโก้ ตั้งด้วยฟอนต์โกรเทสก์หนาพิเศษ ไล่สีส้มไปชมพูพร้อมแสงเรืองสีชมพูนุ่ม ๆ ตัวอักษรเว้นระยะห่างและไม่กลับด้านเลย คำกวาดผ่านด้านหน้า แล้วบินออกไปพร้อมโลโก้ ตั้งแต่ 4.75 วิ คำพื้นหลังขนาดยักษ์แบบเส้นขอบ ("OMG") ค่อย ๆ ปรากฏและลอยขึ้น 3. 6.5–9.2 วิ คำที่พิมพ์ในห้องสว่าง ตัดฉับไปที่ห้องสีเทาอ่อนมีขอบมืด คำถูกพิมพ์ทีละตัวอักษรตามพยางค์ของบีต ในกลุ่ม 3D ที่กล้องลอยผ่าน ก่อนอื่น "yeah" จากนั้น "she" สีขาวบนกล่องสีดำที่เริ่มด้วยเส้นบางแล้วเด้งเปิดออก ต่อด้วย "typed" สีชมพู "one" และ "single prompt" ที่ใหญ่กว่า ที่ 8.1 วิ ขอบมืดปิดเป็นวงรีแนวนอนใน 0.22 วิ และเปิดอีกครั้งใน 0.25 วิ ขณะที่คำเก่าบินไปทางซ้าย คำใหม่ตกลงมาจากด้านบนออกมาจากความเบลอ: "Now" / "it moves like" คำ "magic" สีชมพูลอยขึ้นจากด้านล่างแบบเบลอก่อนการตัดเล็กน้อย 4. 9.2–15.5 วิ ชุดนีออนและโลโก้ ตัดไปที่สีดำพร้อมคำ "magic" สีชมพูเรืองแสงอยู่ด้านบน แต่ละบรรทัดถัดไปมีสี แสงเรือง และการเข้าฉากของตัวเอง และซ้อนกัน: "And I'm" สีส้ม "unstoppable" สีม่วง "might do" สีขาว "MOTION" สีชมพู ชุดข้อความหมุนช้า ๆ ใน 3D แล้วบินขึ้นและออกไปใน 0.25 วิ ที่ 11.95 วิ บรรทัดปิดท้ายปรากฏทีละคำออกมาจากความเบลอเป็นสีชมพู: "no" / "more" / "timelines" ที่ 12.7 วิ แท่งโลหะห้าแท่งตกลงมาทับจากด้านบน ที่ 13.25 วิ ทุกอย่างเบลอออกไป และโลโก้ของฉันสีขาวพร้อมสโลแกนที่เว้นระยะห่างกว้าง ("YOUR TAGLINE HERE") ค่อย ๆ ชัดขึ้นจากความเบลอและค้างอยู่จนจบ คำทั้งหมดในเครื่องหมายคำพูดเป็นตัวอย่างที่ต้องแทนที่ด้วยของคุณเอง </structure> <composition> ตัวอย่างชุดสี: กรมท่า #1C0B5D, เกือบดำ #04020C, ชมพูสด #FB2D89, ส้ม #FE9117, ม่วง #8F7BFF, เทาอ่อน #D2D4D9, เทาสำหรับข้อความ #4A4E56 และขาว ใช้ฟอนต์โกรเทสก์หนาตัวเดียว หนาพิเศษและระยะห่างตัวอักษรแคบ (-0.045em) เช่น Manrope ExtraBold สำหรับทุกคำ คำพื้นหลังในฉาก 2 เป็นเส้นขอบขนาดยักษ์ (text-stroke ที่ประมาณ 20% alpha) ส่วน 3D อยู่บนไล่สีจากกรมท่าเข้มลึกไปเกือบดำ และฉากโลโก้อยู่บนไล่สีวงกลมสีกรมท่า ส่วนกลางเป็นห้องสีเทาอ่อนมีขอบมืด และตอนท้ายเป็นสีดำสนิทกับแสงนีออน รักษาทุกบรรทัดของข้อความให้อยู่ในเฟรมโดยมีขอบปลอดภัย โดยเฉพาะบรรทัดยาว "And I'm" และ "unstoppable" การ์ดสุดท้ายคือโลโก้สีขาวอยู่กึ่งกลางพร้อมสโลแกนเล็กเว้นระยะห่างกว้างอยู่ใต้โลโก้ </composition> <techniques> การสะบัดกล้อง: เบลอ 14 px เป็นเวลา 0.08 วิ กระโดดไปยังเฟรมใหม่ แล้ว 0.12 วิ กลับมาคมชัด วงแหวนซ้อนกันด้วย back.out ห่างกัน 80 มิลลิวินาที โฮโลแกรมโลโก้ลอยขึ้นพร้อมเส้นขอบสีชมพูและแสงเรืองและเอนเข้าหากล้องเล็กน้อย โลโก้ 3D หมุนเข้าด้วย power3.out (1 วิ) และออกด้วย power3.in ตัวอักษรที่พิมพ์พลิกขึ้นจากด้านล่างทีละตัว (rotationX -70, back.out, 0.18 วิ ห่างกัน 30–70 มิลลิวินาที) กล่อง "she" เปิดจากเส้นบางพร้อมเสียงเด้ง การเปลี่ยนฉากแบบไอริสปิดขอบมืดเป็นวงรีแนวนอน (0.22 วิ) และเปิดอีกครั้ง (0.25 วิ) การเข้าฉากของบรรทัดนีออน: ตัวอักษรของ "And I'm" กระแทกเข้ามาจากขนาดใหญ่ "unstoppable" เลื่อนเข้าจากทางขวาออกมาจากความเบลอ ตัวอักษรของ "might do" ลอยขึ้น และตัวอักษรของ "MOTION" สะบัดเข้าจากทางซ้ายพร้อมการเอียงและแถบเคลื่อนไหว ชุดข้อความออกไปทางด้านบนใน 0.25 วิ คำปิดท้ายปรากฏทีละคำออกมาจากความเบลอ แท่งโลหะห้าแท่งตกจากด้านบน (power3.in ห่างกัน 30 มิลลิวินาที) ตอนท้ายทุกอย่างเบลอออก จากนั้นโลโก้ค่อย ๆ ชัดขึ้นจากความเบลอ 24 px (0.45 วิ) และค่อย ๆ ขยาย 4% ขณะค้างอยู่ คำเปลี่ยนทุก 0.1–0.3 วิ ตามพยางค์ของบีต มีเพียงโลโก้ที่ค้างอยู่ </techniques> <music> แทรปแบบฮาล์ฟไทม์ประมาณ 147 BPM ในคีย์ G ไมเนอร์ บรรเลง ไม่มีเสียงร้อง ใต้ส่วนโทรศัพท์เล่นโมทีฟระฆังมืด ๆ ที่มีความตึงเครียดเพิ่มขึ้น บีตเต็ม (คิก 808 หนัก ซับที่ผิดเพี้ยน เสียงปรบมือ ไฮแฮตกลิ้งพร้อมการรัวแบบทริปเล็ต) ดรอปพอดีตอนตัดไปที่โลโก้ 3D ที่ 4.33 วิ ตัดแทร็กให้ดรอปตกตรงนั้น ค่อย ๆ เบาลงตอนท้าย </music> <sound> มีเพียงงานออกแบบเสียงบนเพลง: เสียงบูมเมื่อโทรศัพท์ลง เสียงวูชในการสะบัดกล้องสองครั้ง และเสียงระยิบระยับสำหรับโลโก้โฮโลแกรม เพิ่มเสียงกระแทกตอนตัดไปที่โลโก้ 3D เสียงอิมแพกต์ตอนตัดไปที่ห้องสว่าง และเสียงวูชตอนไอริส จากนั้นเสียงบูมตอนตัดไปที่สีดำ เสียงวูชเมื่อบรรทัดเลื่อนเข้ามาและบินออกไป เสียงโลหะกระแทกเมื่อแท่งตกลง และเสียงบูมลึกที่โลโก้สุดท้าย แล้วค่อย ๆ เบาลง ไม่มีเสียงบรรยาย </sound>
ใช้แล้ว 9 ครั้ง
Simple Motionรหัสพรอมต์: UKEคำที่สร้างโครงสร้าง: ไทโปกราฟีเคลื่อนไหวแบบวนลูป
<direction> สร้างฟิล์มไทโปกราฟีเคลื่อนไหวแบบสี่เหลี่ยมจัตุรัสความยาว 20 วินาที ขนาด 1080x1080 ที่ 60 fps พร้อมดนตรีและการออกแบบเสียง ข้อความสั้น ๆ เกี่ยวกับสินค้าสร้างโครงสร้างขึ้นจากคำของตัวเอง: คำหนัก ๆ กดลงมาเหมือนคานประตู อีกคำห้อยจากสายเคเบิลและทำให้เส้นที่ห้อยอยู่โค้งงอ สองคำแกว่งตั้งขึ้นเป็นเสาค้ำ กล้องดำดิ่งผ่านช่องว่างในตัวอักษรตัวหนึ่ง และประโยคปิดท้ายประกอบตัวเองบนแท่น ต้องวนลูปได้อย่างไร้รอยต่อ: เฟรมสุดท้ายคือเฟรมแรกเป๊ะ ทุกอย่างเป็นภาพวาด: ตัวอักษรแบน เส้น และเส้นกรอบบนพื้นหมึกเข้มลึกแบบแบน หลีกเลี่ยงฟุตเทจ รูปถ่าย พื้นผิว เกรน การปรับโทนสี และกราเดียนต์ ของหนักไม่เด้งเลย มีเพียงเส้นเท่านั้นที่ยืดหยุ่น การเคลื่อนไหวเป็นไปตามจังหวะการเรียบเรียงข้อความ ไม่ใช่จังหวะเต้นรำ คำทั้งหมดบนหน้าจอเป็นตัวอย่างที่ต้องแทนที่ด้วยข้อความของคุณเอง โดยเลือกตามบทบาทและความยาวของแต่ละช่องเพื่อให้เลย์เอาต์คงอยู่ </direction> <structure> - คิว 1, 0–3.3 วินาที, คานประตู: คำหนักขนาดใหญ่มาก 320 px พาดทั่วเฟรมใกล้ด้านบน (ตัวอย่าง “ล่า”) เส้นฐานอยู่ที่ y 524 ด้านล่างคือเส้น เอียงเล็กน้อยมาก (y 712 ทางซ้าย, y 697 ทางขวา) ประโยคผุดขึ้นจากเส้นเป็นสองกลุ่มที่ 0.33 วินาทีและ 1.03 วินาที ใช้ Playfair 58 px เส้นฐานอยู่เหนือเส้น 17 px (ตัวอย่าง “ไม่มีคีย์เฟรม” / “ให้ต้องไล่ล่า”) ประโยคอยู่ในช่องว่างระหว่างเส้นฐานของคำใหญ่ที่ขยายไปทั่วเฟรมกับเส้น ตั้งแต่ 0 ถึง 2.9 วินาที คำใหญ่จมลง 104 px และเอียงจาก -0.15 เป็น -1.9 องศารอบเส้นฐานด้านซ้าย (power2.inOut) ช่องว่างจึงแคบลง ที่ 2.93 วินาทีมันตกลงบนเส้นด้วยการนิ่งแบบหน่วงวิกฤต (โอเมกาประมาณ 14 ต่อวินาที) และปรับระดับตามมุมของเส้น ประโยคถูกตัดจากด้านบนด้วยเส้นฐานของมันและหายไป - คิว 1 ไป 2, 3.28–4.03 วินาที: เส้นจมลง 5 px ใต้การตกกระทบ จากนั้นคำใหญ่พุ่งตรงขึ้นออกนอกเฟรม (power2.inOut, 0.7 วินาที, ประมาณ 700 px) ขณะที่เส้นและทุกอย่างบนเส้นเลื่อนขึ้น 230 px (power2.inOut, 0.75 วินาที) - คิว 2, 3.5–6.5 วินาที, ของที่ห้อยอยู่: ประโยคที่สองผุดขึ้นจากเส้นที่ 3.58 วินาทีและ 4.18 วินาที (ตัวอย่าง “แชทแทน” / “ไทม์ไลน์”) ที่ 4.49 วินาที เส้นบางสองเส้น (1 px, สีขาวหน้ากระดาษอ่อนที่ 45 %) ตกลงจากเส้นที่ x 468 และ x 627 (power2.inOut, 0.34 วินาที) ที่ 4.79 วินาที คำหนัก 138 px (ตัวอย่าง “TIMELINE”) ตกออกมาจากหลังเส้น ถูกตัดให้เห็นเฉพาะส่วนใต้เส้น มันตกด้วยการเคลื่อนที่แบบหน่วงวิกฤตจากเหนือตำแหน่งพัก 191 px (โอเมกา 8.6 ต่อวินาที) และห้อยอยู่ใต้เส้นประมาณ 90 px ที่ 5.43 วินาที เส้นยอมแพ้: หย่อนเป็นครึ่งคลื่นไซน์ระหว่างปลายทั้งสอง ขับเคลื่อนด้วยสปริงหน่วงน้อย (30 px, โอเมกา 11.9 ต่อวินาที, อัตราส่วนการหน่วง 0.30) มันพุ่งเกินไปครั้งเดียวถึง 41 px เด้งกลับเล็กน้อยและหยุดที่ 30 px เส้นบางเปลี่ยนเป็นสายเคเบิลสีชมพู 2.5 px ใน 0.12 วินาที และคำจมลงไปพร้อมกับการหย่อน ทุกคำในประโยคขี่ไปตามเส้นโค้ง หมุนตามความชันเฉพาะที่ - คิว 3, 6.43–9.47 วินาที, เสาค้ำแรก: กล้องถอยออกเหลือ 76 % รอบจุดที่อยู่ไกลทางขวาของเฟรม (power2.inOut, 0.65 วินาที) เส้นและคำที่ห้อยอยู่จึงเลื่อนไปทางขวา และประโยคจมลงในเส้น ที่ 6.96 วินาที วลีผุดขึ้นที่มุมบนซ้าย ขนาด 49 px บนหน้าจอ (ตัวอย่าง “บรรยาย”) ที่ 7.09 วินาที คำหนักผุดขึ้นจากใต้เฟรมมานอนข้างปลายซ้ายที่เป็นอิสระของเส้น (หน่วงวิกฤต, 0.6 วินาที) ความยาวของมันประมาณความสูงของปลายอิสระของเส้น (ตัวอย่าง “วิดีโอ”) ที่ 7.95 วินาที มันแกว่ง 90 องศาทวนเข็มนาฬิการอบปลายด้านไกล (ประมาณ 0.8 วินาที) และตั้งตรงอยู่ใต้เส้น อ่านจากล่างขึ้นบน ขณะที่ตั้งขึ้นมันยกปลายซ้ายของเส้นขึ้น 61 px (power4.out, 0.53 วินาที) และคำที่ห้อยอยู่เอียงเป็น +2.7 องศา ที่ 8.83 วินาที วลีเล็ก ๆ ผุดขึ้นใต้คำที่ห้อยอยู่ (ตัวอย่าง “ไอเดียใน”) ที่ 9.02 วินาที คำ Playfair ใหญ่ผุดขึ้น (152 px บนหน้าจอ, 0.56 วินาที) ซึ่งตัวอักษรตัวที่สองคือ O (ตัวอย่าง “MOTION”) ภายในช่องว่างของ O มีฉากถัดไปวาดไว้แล้วที่ขนาดประมาณ 5 %: เส้น เสาค้ำ และคำที่ห้อยอยู่ในเลย์เอาต์ถัดไป - คิว 3 ไป 4, 9.47–10.02 วินาที, ผ่าน O: กล้องซูมเข้าไปในช่องว่างของ O ลอการิทึมธรรมชาติของสเกลเพิ่มตามกำลังสองของเวลา (ประมาณ x18 เมื่อถึง 10.0 วินาที) ขณะที่ศูนย์กลางของช่องว่างเลื่อนไปที่กลางเฟรม (power2.inOut) ฉากเล็กขี่ไปกับการซูม จากนั้นโตเกินและลงตัวที่เต็มเฟรมพอดีที่ 9.93 วินาที ขณะที่วงแหวนของ O กวาดผ่านขอบออกไป - คิว 4, 10–12.5 วินาที, ระดับ: วลีผุดขึ้นที่มุมบนซ้ายที่ 10.22 วินาทีและ 10.52 วินาที ขนาด 64 px (ตัวอย่าง “แก้ไขด้วย” / “คำพูด”) ที่ 10.49 วินาที เสาค้ำตั้งตรงอันที่สอง (คำเดียวกัน) ผุดขึ้นจากด้านล่างที่ขอบขวาเข้าที่ใต้ปลายขวาที่ต่ำของเส้น (หน่วงวิกฤต, 0.89 วินาที) ตั้งแต่ 11.08 ถึง 11.43 วินาที เส้นปรับระดับจนเป็นแนวนอนสมบูรณ์และสูญเสียการหย่อน (power1.out) และคำที่ห้อยอยู่ปรับระดับไปด้วย นี่คือช่วงเวลาแรกที่ฟิล์มเป็นแนวนอนสมบูรณ์ ตั้งแต่ 11.4 ถึง 11.6 วินาที เส้นพื้น 1 px (#E9E4F2 ที่ 18 %) วาดออกจากกึ่งกลางที่ y 965 (power2.in) จากนั้นนิ่ง - คิว 5, 12.5–16 วินาที, แท่น: วลีของคิว 4 จมลง ที่ 12.53 วินาที คำที่ห้อยอยู่ผุดขึ้นมาอยู่ใต้เส้นพอดี (หน่วงวิกฤต, 0.7 วินาที) และสายเคเบิลสั้นลงตาม ที่ 12.93 วินาที วลีแบบมีเชิง (54 px, ตัวอย่าง “ไอเดียของคุณพร้อมแล้วที่จะ”) ผุดขึ้นไปรออยู่เหนือแถวประมาณ 58 px แล้วที่ 13.83 วินาทีวางลงบนแถว (หน่วงวิกฤต, 0.5 วินาที) ที่ 13.33 วินาที คำหนักของแท่นคำแรกผุดขึ้นจากเส้น (117 px, 0.56 วินาที, ตัวอย่าง “ขยับ”) ที่ 14.17 วินาที คำสั้นแบบมีเชิงผุดขึ้นไปรออยู่เหนือเส้น แล้วที่ 14.59 วินาทีวางลงบนเส้น (คำแรกของ [your brand]) ที่ 14.87 วินาที คำหนักคำสุดท้ายผุดขึ้นจากเส้นและลงจอดเป็นคำสุดท้าย (119 px, 0.58 วินาที; คำสุดท้ายของ [your brand] พร้อมจุดปิดท้าย) - คิว 6, 16–18 วินาที: ค้างประโยคที่สมบูรณ์ไว้ ไม่มีอะไรเคลื่อนไหว - คิว 7, 18–20 วินาที, ลูป: ที่ 18.0 วินาที กล้องดำดิ่งใต้แท่นที่ปลายล่างของก้านตัวอักษรตัวหนึ่งของคำที่ห้อยอยู่ (E หรือ I) ลอการิทึมของสเกลเร่งขึ้น (ประมาณ x40 เมื่อถึง 19 วินาที) ขณะที่ปลายก้านถูกพาลงไปพ้นเฟรม จนสีอ่อนของก้านเต็มเฟรม ที่ 19.05 วินาที ภายใต้การบังเต็มที่นั้น ให้สลับไปเป็นเฟรมเปิดของคิว 1 เมื่อมองจากภายในก้านของคำใหญ่: คำใหญ่ที่ตำแหน่งเริ่มต้น เส้น ไม่มีประโยค เครื่องหมายเวลาแสดงคิวแรกอีกครั้ง ถอยออกด้วยสเกลลอการิทึมที่ชะลอลง (ประมาณ x22 ถึง x1 เมื่อถึง 20.0 วินาที) เพื่อให้เฟรมสุดท้ายเป็นเฟรมแรกเป๊ะ - จังหวะ: ประมาณหนึ่งองค์ประกอบใหม่ทุก 0.5–0.7 วินาทีภายในคิว การกดช้า ๆ ยาว ๆ ในคิว 1 ความนิ่งสั้น ๆ หลังเส้นปรับระดับ และการค้างสองวินาทีก่อนลูป </structure> <composition> - พื้น: หมึกเข้มลึก #1C0B5D แบน ตัวอักษรทั้งหมดเป็นสีขาวหน้ากระดาษอ่อน #FAF9FF สีเน้นเชิงโครงสร้างเพียงหนึ่งเดียวคือชมพู #FB2D89 ใช้เฉพาะเส้นหลัก สายเคเบิล และเครื่องหมายคิว - คำหนัก: Pliant 900 ที่ความกว้าง 105 (กร็อตเทสก์กว้างและหนักมาก) ระยะห่างตัวอักษรแคบ วลี: Playfair Display 400 เครื่องหมายเวลา: JetBrains Mono 13 px สีลาเวนเดอร์ #F0EDFF ความทึบ 47 % - ขอบ 60 px เส้นหลักเป็นเส้นสีชมพูหนา 4 px จาก x 60 ถึง x 1020 - เครื่องหมายเวลาในทุกเฟรม ที่ด้านบน: - บนซ้าย: ที่อยู่เว็บของคุณเป็นตัวพิมพ์ใหญ่ (ตัวอย่าง “YOURSITE.COM”); - บนขวา: ช่วงของคิวปัจจุบัน เขียนเช่น “06.50 — 10.00”; - ใต้ทั้งสอง: เส้น 1 px (#E9E4F2 ที่ 18 %) จาก x 60 ถึง x 1020 พร้อมขีด 3 px ทุกวินาที และขีด 6 px ทุกห้าวินาที; - บนเส้นนั้น: แท่งสีชมพูหนา 3 px ครอบคลุมช่วงของคิวปัจจุบันพอดี - แท่งและเวลาจะกระโดดไปคิวถัดไปในเฟรมแรกของคิวนั้น มีเจ็ดคิว: 0–3, 3–6.5, 6.5–10, 10–12.5, 12.5–16, 16–18 และ 18–20 วินาที </composition> <techniques> - ทุกวลีเผยตัวด้วยการผุดขึ้นจากเส้น ถูกตัดให้เห็นเฉพาะส่วนเหนือเส้น (หรือเหนือเส้นที่มองไม่เห็นใต้เส้นฐานประมาณ 17 px) และเริ่มต่ำลง 1.28 เท่าของขนาดฟอนต์ ซ่อนอยู่อย่างสมบูรณ์ มันลงจอดบนเส้นโค้งแบบหน่วงวิกฤต 1 - (1 + 6p)e^(-6p) ปรับให้ถึง 1 ใน 0.5 วินาที: เริ่มเร็ว ลงจอดนุ่มนวลยาว ไม่พุ่งเกิน - วลีของประโยคเดียวกันเข้ามาเป็นกลุ่มตามการพูด ห่างกัน 0.6–0.7 วินาที - ของหนักนิ่งด้วยการเคลื่อนที่แบบหน่วงวิกฤตจริง ๆ และไม่เด้ง มีเพียงเส้นที่ยืดหยุ่น: สปริงหน่วงน้อยเมื่อมันยอมแพ้ - คำที่ขี่ไปบนเส้นโค้งหมุนตามความชันเฉพาะที่ของเส้น - เมื่อคิวจบ ประโยคของคิวจะจมกลับลงในเส้น (power2.in, ประมาณ 0.26 วินาที) - กล้องคือสเกลและตำแหน่งของทั้งฉาก: - การถอยออกเหลือ 76 % รอบจุดที่อยู่ไกลทางขวาของเฟรม; - การซูมผ่านช่องว่างของตัวอักษร โดยลอการิทึมธรรมชาติของสเกลเพิ่มตามกำลังสองของเวลา และเลย์เอาต์ถัดไปถูกวาดไว้ล่วงหน้าภายในช่องว่าง; - การดำดิ่งเข้าไปในก้านตัวอักษรที่จบด้วยการบังเต็มที่และซ่อนการตัดกลับไปยังเฟรมเปิด </techniques> <music> เสียงพื้นอิเล็กทรอนิกส์แนวภาพยนตร์แบบมินิมอลที่ 120 BPM พอดี 10 ห้อง ทำให้ทุกขอบเขตของคิวตกบนจังหวะ (3, 6.5, 10, 12.5, 16 และ 18 วินาที) มีเบสซินธ์ลึกที่เต้นเป็นจังหวะ แพดนุ่ม ๆ ท่วงทำนองดีดแบบเบาบาง และเพอร์คัชชันเบา ๆ ที่เป็นเสียงติ๊ก ลำดับอารมณ์: - 0–3 วินาที: ต่ำและหนัก พร้อมเสียงเน้นที่ 3 วินาที; - จาก 3 วินาที: ยกขึ้น; - ก่อนถึง 10 วินาที: ฟิลเตอร์ไต่ขึ้นสู่ดาวน์บีตที่หนักแน่นที่ 10 วินาทีพอดี ซึ่งเป็นขณะที่การซูมลงจอด; - จาก 11.5 วินาที: โปร่งและเกือบนิ่ง; - ก่อนถึง 15.5 วินาที: การไต่ขึ้นอย่างมั่นใจสู่ประโยคเต็ม; - 16–18 วินาที: คอร์ดค้าง; - 18–20 วินาที: คลื่นที่ขึ้นสูงสุดที่ 19 วินาทีแล้วลดลงสู่เนื้อเสียงเปิดภายใน 20 วินาที ทำให้ลูปไม่ได้ยิน ไม่มีเสียงร้อง </music> <sound> เอฟเฟกต์เสียงอยู่เหนือเสียงพื้นเท่านั้น ไม่มีกลองหรือเบสของตัวเอง: - เสียงติ๊กไม้เบา ๆ ในเฟรมแรกที่มองเห็นของทุกวลี; - เสียงตูมต่ำพร้อมเสียงไม้กระแทกหนักเมื่อคานประตูลงจอด (3.1 วินาที) และเสียงลมหวือเมื่อมันบินออกไป; - เสียงติ๊กเล็ก ๆ สองครั้งเมื่อเส้นบางตกลง; - เสียงหวือที่ตกลง แล้วเสียงไม้กระดานลั่นเอี๊ยดพร้อมเสียงซับดรอปสั้น ๆ เมื่อเส้นยอมแพ้; - เสียงสวูชเบา ๆ ใต้การถอยของกล้อง; - เสียงหวือเมื่อเสาค้ำผุดขึ้นและแกว่ง พร้อมเสียงกระแทกเมื่อมันยกเส้น; - ไรเซอร์เข้าสู่เสียงกระทบคล้ายระฆังเมื่อการซูมผ่าน O ลงจอดที่ 10 วินาที; - เสียงคลิกโลหะเบา ๆ เมื่อเส้นล็อกได้ระดับ และเสียงซู่นุ่ม ๆ เมื่อเส้นพื้นวาดออก; - เสียงไม้กระแทกเมื่อคำของแท่นลงจอด และเสียงแตะเบา ๆ เมื่อวลีวางลง; - เสียงตูมที่ลึกกว่าพร้อมเสียงไม้กระทบและระฆังจาง ๆ ใต้คำสุดท้าย; - ไรเซอร์เข้าสู่ภาพขาววาบของการดำดิ่ง เสียงสวูชย้อนกลับที่จุดตัดที่ซ่อนอยู่ และเสียงหวือเมื่อถอยออก ไม่มีเสียงบรรยาย มิกซ์ที่ประมาณ -14 LUFS โดยมี true peak ต่ำกว่า -1 dBTP </sound> <references> ไทโปกราฟีเคลื่อนไหวเชิงบรรณาธิการสไตล์สวิสที่คำมีน้ำหนักและทำหน้าที่เป็นสถาปัตยกรรม (คานประตู สายเคเบิล เสา แท่น) ตัวอักษรที่จำลองฟิสิกส์ พร้อมการนิ่งแบบหน่วงวิกฤตและเส้นยืดหยุ่นหนึ่งเส้น ลูปไทโปกราฟีแบบซูมไม่รู้จบที่เดินทางผ่านช่องว่างและก้านของตัวอักษร </references>
ใช้แล้ว 1 ครั้งจดหมายข่าว
รับพรอมต์ใหม่ทางอีเมล
เราส่งพรอมต์ใหม่ที่ดีที่สุดจากคอมมูนิตี้พร้อมวิดีโอให้คุณ ไม่มีสแปม และทุกฉบับมีลิงก์ยกเลิกการรับ
เราใช้อีเมลของคุณสำหรับจดหมายข่าวนี้เท่านั้น นโยบายความเป็นส่วนตัว
