Simple Motionรหัสพรอมต์: NPXรีลสินค้า «ตัวอย่างมีชีวิต» พร้อมมอร์ฟโลโก้
placeholder
ใช้แล้ว 1 ครั้งSimple Motion
รีลโปรโมตแอปด้วยตัวอักษรเคลื่อนไหวบนบีต 128 BPM
รีลแอปแนวนอน 15 วินาทีด้วยตัวอักษรเคลื่อนไหวและกราฟิกอินเทอร์เฟซ: กลุ่มชิป ชื่อเรื่องเคอร์เซอร์ การดำดิ่งของกล้อง แผนภาพ ตัวแก้ไขสด สามขั้นตอน และการ์ดปิดท้าย
รหัสพรอมต์ MOCเผยแพร่เมื่อ ใช้แล้ว 3 ครั้ง
ใช้พรอมต์นี้พรอมต์จะเปิดในแอป: เพิ่มไฟล์ของคุณเอง แล้วเอเจนต์จะสร้างวิดีโอให้
รายงานพรอมต์นี้พรอมต์
แนวคิด
สร้างรีลโปรโมตผลิตภัณฑ์แนวนอนความยาว 15 วินาที (1920x1080, 60 fps) สำหรับแอปของฉัน สร้างจากตัวอักษรและกราฟิกอินเทอร์เฟซทั้งหมด และตัดตามบีตเฮาส์ 128 BPM ให้รู้สึกเหมือนโชว์รีลมอชันดีไซน์ระดับพรีเมียม ทุกฉากส่งต่อให้ฉากถัดไปด้วยการเคลื่อนไหว ไม่ใช่การตัดธรรมดา: แฟลช เคอร์เซอร์ การดำดิ่งผ่านตัวอักษร การ์ดที่พับ ม่านแบบคอลัมน์ การระเบิด การบีบแบนเป็นเส้น มีบางอย่างลงจอดเกือบทุกบีต รีลเริ่มจากผืนผ้าใบจุดสีเข้มภายใต้ HUD สไตล์กล้อง ไปสู่หน้าตัวแก้ไขสีสว่างตรงกลาง แล้วเป็นหน้าสีชมพูใกล้จบ และการ์ดปิดท้ายสีเข้มพร้อมไอคอนและชื่อแอปของฉัน ใช้ชื่อแอปของฉัน ไอคอนแอปสี่เหลี่ยมจัตุรัสของฉัน ที่อยู่เว็บของฉัน และข้อความสั้นๆ ของฉันเองแทนตัวอย่างในเครื่องหมายคำพูดด้านล่าง ไม่ใช้ภาพถ่ายหรือฟุตเทจ วาดไอคอนทั้งหมด (ลูกศร เชฟรอน ดาว เครื่องหมายถูก กากบาท สี่เหลี่ยมเล็กๆ กล่องเคอร์เซอร์) เป็นรูปทรงเวกเตอร์ ไม่ใช่ตัวอักษรที่พิมพ์ เพื่อไม่ให้ฟอนต์สำรองหรือกล่องว่างโผล่ขึ้นมา ข้อความต้องไม่ล้นออกนอกเฟรมหรือนอกแคปซูล และทุกแอนิเมชันถอดรหัสหรือพิมพ์ต้องจบที่ข้อความที่ถูกต้อง
โครงสร้าง
ตารางบีต: 128 BPM ตั้งแต่ 0 วินาที ดังนั้นหนึ่งบีตคือ 0.469 วินาที และหนึ่งห้องคือ 1.875 วินาที แฟลชลงที่ห้อง 2 (1.875 วินาที) หน้าสีชมพูระเบิดที่ห้อง 7 (11.25 วินาที) และการ์ดปิดท้ายกระแทกที่ห้อง 8 (13.125 วินาที) ไฮไลต์ฟีเจอร์ลงบนสี่บีตติดกันในฉาก 3 และการสลับการแก้ไขลงบนสี่บีตติดกันในฉาก 4
0–1.9 วินาที กลุ่มชิปและการสลับคำ ชิปมุมมนเล็กๆ ประมาณ 24 ชิ้นลอยอยู่ในตำแหน่งคงที่รอบกลางผืนผ้าใบสีเข้ม แต่ละชิ้นเป็นโมโน 21 px มีจุดทางซ้ายและเส้นขอบบาง บางชิ้นมีขอบสีชมพู ชิปแต่ละชิ้นเอียงไปไม่กี่องศาและเอนเล็กน้อยแบบ 3D และบางชิ้นเบลอเหมือนอยู่นอกโฟกัส ชิปโฟกัสเข้ามาทีละชิ้นตั้งแต่ 0.08 วินาทีถึง 1.1 วินาที (ความทึบ เบลอจาก 6 px จนคมชัด สเกลจาก 0.94 เป็น 1 ใน 0.22 วินาที) และลอยเคลื่อนไปไม่กี่พิกเซล ข้อความของชิปแสดงรายการสิ่งที่แอปทำได้ เช่น "Kinetic type, shapes", "Describe your idea", "Live preview", "MP4 export" คิกเกอร์โมโน "TELL THE CHAT WHAT TO SHOW" ถอดรหัสจากสัญลักษณ์สุ่มเหนือกึ่งกลางที่ 0.4 วินาที พาดหัวขนาดใหญ่ 155 px "No keyframes." ผุดขึ้นทีละตัวอักษรตั้งแต่ 0.11 วินาที ที่ 0.92 วินาที คำที่สองออกไปทางด้านบนผ่านขอบบนของบรรทัด ทีละตัวอักษร ทั้งหมดภายใน 0.1 วินาที "timeline." ผุดขึ้นแทนที่เป็นสีส้มในราว 0.13 วินาที คำแรกไม่เคลื่อนที่เลย ที่ 1.42 วินาที พาดหัวทั้งหมดออกไปทางด้านบน และสี่เหลี่ยมเรืองแสงเล็กจิ๋วปรากฏที่กึ่งกลางและโตขึ้นเป็นประมาณ 42 px ตั้งแต่ 1.58 วินาที ชิปทุกชิ้นเอียงแรงและบินเข้าหากล้องและผ่านไปตามเส้นของมันจากกึ่งกลาง ในมุมมอง 3D (0.22 วินาที อีซอินแบบเร่งสไตล์ power1)
1.9–3.7 วินาที แฟลช เคอร์เซอร์ และการดำดิ่ง แฟลชสีเทาอมชมพูเต็มเฟรมและจางลงใน 0.25 วินาที ขณะที่รังสีบางๆ 40 เส้นพุ่งออกและวงแหวนนุ่มๆ สองวงขยายออก สี่เหลี่ยม (สีส้ม มุมมน) มาถึงที่ประมาณ 45 px เอียงอยู่ และพองขึ้นเป็นประมาณ 215 px ในหนึ่งในสี่วินาทีขณะที่ตั้งตรง จากนั้นทำหน้าที่เป็นเคอร์เซอร์: ชื่อเรื่องขนาดยักษ์ "OPEN APP" (311 px เกือบเท่าความกว้างเฟรม) ผุดขึ้นทีละตัวอักษรขณะที่สี่เหลี่ยมวิ่งนำหน้าตัวอักษรและหดเล็กลงไปเรื่อยๆ มันลงจอดเป็นจุดปิดประโยค (ประมาณ 60 px) และเปลี่ยนเป็นสีชมพู ที่ประมาณ 2.66 วินาที แคปซูลสีชมพูพร้อมที่อยู่เว็บของฉันเด้งขึ้นใต้ชื่อเรื่อง (อีซแบบ back-out) และถอดรหัส ตามด้วยการดันเข้าอย่างช้าๆ ที่ 3.2 วินาที กล้องดำดิ่งเข้าไปในช่องว่างของตัว O ตัวแรก: ชื่อเรื่องขยายตามเส้นโค้งแบบเร่ง (ประมาณ 1.07 เป็น 3 ใน 0.3 วินาที แล้วเป็น 22 ภายใน 0.5 วินาที) ขณะที่ตัว O เลื่อนไปที่กึ่งกลาง ฉากถัดไปปรากฏผ่านรูของตัว O และเต็มเฟรมขณะที่ขอบของตัวอักษรพุ่งผ่านไป
3.25–5.8 วินาที แผนภาพ ฉากสีเข้มพร้อมป้ายเล็กที่มุมบนซ้าย: สี่เหลี่ยมเล็กที่วาดขึ้น แล้วตามด้วย "02 —— DESCRIBE THE VIDEO" การ์ดกลางมีขอบสีชมพู โลโก้และชื่อแอปของฉัน คำบรรยายโมโนเล็กๆ เช่น "AI MOTION DESIGNER" จุดสีเขียวน้ำเงินพร้อมที่อยู่เว็บของฉัน และปุ่มฟีเจอร์สี่ปุ่ม เช่น "Edit in words", "No keyframes", "Live preview", "MP4 export" ทางซ้าย อินพุตสามรายการเลื่อนเข้ามา ("Footage", "Photos", "Logos" แต่ละรายการมีไอคอนเล็กๆ ที่วาดขึ้น) ทางขวา เอาต์พุตหกรายการเลื่อนเข้ามาห่างกัน 50 มิลลิวินาที: "Kinetic type", "Shapes", "3D effects", "Music", "Sound effects", "Vertical" แต่ละรายการมีบรรทัดย่อยโมโนเล็กๆ และแท็ก พาดหัว "From idea to video in one chat." ผุดขึ้นทีละตัวอักษรที่มุมบนขวา คำท้ายๆ เป็นสีส้ม สายโค้งถูกวาดจากอินพุตไปยังการ์ดและจากการ์ดไปยังเอาต์พุต โดยมีจุดเรืองแสงไหลไปตามสาย ปุ่มฟีเจอร์สี่ปุ่มเติมสีชมพูทีละปุ่มต่อบีต ที่ 5.6 วินาที การ์ดเต้นเป็นจังหวะและพับเป็นแถบสีสว่างแคบๆ เรียบๆ
5.7–9.75 วินาที หน้าสีสว่าง หน้าสีสว่างเปิดออกจากแถบนั้น ขยายจากประมาณ 80 px จนเต็มเฟรมในราว 0.23 วินาที (ช้า แล้วเร็ว แล้วผ่อนลง) พร้อมโมชันเบลอที่จางลงเมื่อลงจอด
ด้านซ้าย: ป้ายเล็ก (สี่เหลี่ยมที่วาดขึ้น, "03 —— LIVE PREVIEW") ชื่อเรื่องสองบรรทัด "Chat instead / of a timeline." (บรรทัดที่สองสีชมพู) ผุดขึ้นทีละตัวอักษร ข้อความเนื้อหาสีจางสองบรรทัด "Tell the chat what to show. / The agent builds the animation." ผุดขึ้นทีละคำ และจุดเล็กๆ ห้าจุด
ด้านขวา: หน้าต่างตัวแก้ไขสีขาวพร้อมปุ่มสัญญาณไฟจราจร ที่อยู่ของฉันในแถบชื่อเรื่อง และ "Try it free" ทางขวา บรรทัดโมโนที่มีหมายเลขแปดบรรทัดพิมพ์ตัวเองด้วยความเร็วประมาณ 100 ตัวอักษรต่อวินาทีพร้อมเคอร์เซอร์สีชมพู เช่น "Pick a template", "idea = describe(", say="Bigger", ประโยคเนื้อหาในเครื่องหมายคำพูด, "Refine in words, then export" แถบสถานะด้านล่างแสดง "MP4 export" พร้อมกล่องเคอร์เซอร์เส้นขอบเล็กๆ ทางขวา
ตลอดด้านล่าง แถบคำ ("bigger", "slower", "another colour", "vertical", "horizontal", "square", "kinetic type" ...) เลื่อนไปทางซ้ายด้วยความเร็วประมาณ 167 px/วินาที ตั้งแต่ 7.5 วินาที บนสี่บีตติดกัน ค่าในเครื่องหมายคำพูดหลัง say= สลับเป็น "Slower", "Another colour", "Vertical", "Square" ภายในกล่องไฮไลต์สีชมพูพร้อมการถอดรหัสอย่างรวดเร็ว ทุกครั้งที่สลับ แถบสถานะแสดง "Live preview · Slower" เป็นต้น จุดหนึ่งจุดโตขึ้นด้วยสีเน้นใหม่ และคำที่ตรงกันในแถบกลายเป็นแคปซูลสีชมพู ทั้งหน้าค่อยๆ ดันเข้า 2.5%9.45–11.35 วินาที คีย์เฟรมเทียบกับคำพูด ป้ายเล็ก (สี่เหลี่ยมที่วาดขึ้น, "04 —— NO KEYFRAMES") อยู่ที่มุมบนซ้าย คอลัมน์แนวตั้งเก้าคอลัมน์กวาดฉากสีเข้มทับฉากสีสว่าง สลับกันจากด้านบนและด้านล่าง แต่ละคอลัมน์ใช้เวลา 0.15 วินาที ขอบนุ่มและมีแถบสีชมพูเรืองแสงที่ขอบนำ พาดหัว "Edit in words." ผุดขึ้น แคปซูลสีชมพูพร้อมคำขอในเครื่องหมายคำพูด เช่น 'Bigger', 'slower' เชื่อมด้วยเส้นกับข้าวหลามตัดมุมมนที่มีป้าย "AGENT" จุดเรืองแสงวิ่งไปยังการ์ดบน "keyframes / to hunt for" ซึ่งเปลี่ยนเป็นสีส้มพร้อมป้าย "NO" ที่มีกากบาทวาดขึ้นและเส้นทางประ จากนั้นจุดวิ่งไปตามเส้นทางล่าง (ป้ายเล็ก "say what should change") ไปยังการ์ด "chat/say-what-should-change / live preview" การ์ดนั้นเปลี่ยนเป็นสีเขียวน้ำเงินพร้อมป้าย "LIVE" ที่มีเครื่องหมายถูกวาดขึ้นและแสงเรือง ในระหว่างนั้น "Live preview." ผุดขึ้นหลังพาดหัวเป็นสีส้ม และตัวเลขเล็กๆ สามรายการผุดขึ้นที่ด้านล่าง: "PREVIEW live", "EXPORT MP4", "KEYFRAMES none" เป็นสีเขียวน้ำเงิน
11.15–13.4 วินาที สามขั้นตอน หน้าสีชมพูระเบิดออกจากป้าย LIVE เป็นวงกลมขอบนุ่มพร้อมขอบเรืองแสง ขนาดประมาณ 130 px แล้ว 190 px ในสองเฟรมแรก จากนั้นพุ่งผ่านมุมไกลภายในอีก 0.1 วินาที ตัวเลขขนาดใหญ่สามตัว "01", "02", "03" (243 px) ม้วนเข้ามาเหมือนวงล้อสล็อตแมชชีน เบลอขณะหมุน และลงจอดจากซ้ายไปขวาที่ 11.32, 11.5 และ 11.77 วินาที แต่ละตัวมาพร้อมเส้นบางที่วาดใต้แถวของมัน ป้ายโมโนเล็กๆ ที่ถอดรหัส ("TEMPLATE", "IDEA", "EXPORT" แต่ละป้ายมีดาวสีเหลืองเล็กๆ ที่วาดขึ้นนำหน้า) และประโยคที่ค่อยๆ ปรากฏ ("Pick a template", "Describe your idea", "Refine in words, then export") ตั้งแต่ 12.65 วินาที ทุกอย่างเบลอและบีบแนวตั้งเป็นเส้นบางๆ ตัดผ่านกลางเฟรม ซึ่งกลายเป็นรางของการ์ดปิดท้าย
12.8–15 วินาที การ์ดปิดท้าย เส้นสีขาวบางๆ พุ่งออกเต็มความกว้างในสองเฟรม ไอคอนแอปของฉัน (ประมาณ 150 px วางอยู่บนเส้น) ขับเข้ามาจากทางขวาตามเส้น เร็วมากแล้วเบรกแรง: ส่วนใหญ่ของระยะในช่วง 0.13 วินาทีแรก นิ่งที่ 13.2 วินาที พร้อมริ้วความเร็วสองสามเส้นอยู่ข้างหลัง มันลากหน้าสีเข้มที่มีส่วนหัวมนคล้ายกระสุนตามมา แล้วขยายออกจนเฟรมมืดที่ 13.4 วินาที ชื่อแอปของฉัน (Geist 500, 176 px) ปรากฏหลังไอคอนขณะที่มันผ่านไป และไอคอนกับชื่ออยู่กึ่งกลางด้วยกันเป็นล็อกอัปเดียว เส้นหดเป็นเส้นใต้ที่ยื่นเกินปลายทั้งสองของล็อกอัปประมาณ 30 px และหรี่ลง แท็กไลน์ "Your AI motion designer." ผุดขึ้นทีละคำที่ 13.75 วินาที ปุ่มแคปซูลสองปุ่มเด้งขึ้นที่ 14.1 และ 14.17 วินาที แต่ละปุ่มกว้างเท่าคำของมันบวกระยะขอบเท่ากัน จัดกึ่งกลางเป็นคู่ห่างกัน 23 px: ปุ่มเส้นขอบพร้อมเชฟรอนเล็กๆ ที่วาดขึ้นและ "Try it free" และปุ่มสีชมพูพร้อมที่อยู่เว็บของฉันและลูกศรที่วาดขึ้น แสงวาบสีส้มกวาดผ่านชื่อที่ 14.6 วินาที คงไว้จนจบ มองเห็นครบและอ่านได้จนถึงเฟรมสุดท้าย
องค์ประกอบภาพ
โทนสี:
ฉากสีเข้ม: เกือบดำ #0D0B1E และหมึกเข้ม #1C0B5D พร้อมแสงเรืองหมึกเข้มนุ่มๆ ตรงกลางและตารางจุด 48 px จางๆ ทับทุกอย่าง
หน้าสีสว่าง: #FAF9FF พร้อมเฉดลาเวนเดอร์ #F0EDFF และวิกเนตแนวนอนที่ทำให้ขอบซ้ายและขวาเข้มลงเป็นประมาณ #B6B1C6
สีเน้นหลัก: ชมพู #FB2D89 สำหรับแคปซูล ปุ่ม ไฮไลต์ และเคอร์เซอร์
สีเน้นรอง: ส้ม #FE9117 สำหรับคำที่เน้นในแต่ละพาดหัว
สีกลาง: ขาว #FFFFFF ข้อความสีจาง #6B6385 บนพื้นสว่างและ #8E87A6 บนพื้นเข้ม เส้น #E9E4F2
รายละเอียด: เขียวน้ำเงิน #2DD4B0 สำหรับความสำเร็จ เหลือง #FFD23F และม่วง #7C6CF2 เฉพาะรายละเอียดเล็กๆ
ตัวอักษร: Geist สำหรับทุกอย่างที่ใหญ่ พาดหัวน้ำหนัก 800 ระยะตัวอักษรแคบประมาณ -0.023em ตัวชื่อแบรนด์ของการ์ดปิดท้ายน้ำหนัก 500 Geist Mono สำหรับป้าย ชิป โค้ด และ HUD โดยป้ายเล็กสไตล์สมอลแคปส์ที่ระยะตัวอักษรกว้าง 0.15–0.35em
HUD เหนือฉาก 1–6:วงเล็บมุมบางๆ ที่สี่มุม
บนซ้าย: จุดสีชมพูพร้อมชื่อแอปหรือแท็กไลน์
บนขวา: ไทม์โค้ดที่เดินอยู่ (HH:MM:SS:FF ที่ 60 fps)
ล่างซ้าย: ส่วนปัจจุบัน ("01 OPEN APP", "02 DESCRIBE THE VIDEO", "03 LIVE PREVIEW", "04 NO KEYFRAMES", "05 TRY IT FREE")
ล่างขวา: "VERTICAL · HORIZONTAL · SQUARE"
ข้อความ HUD ทั้งหมดเป็นโมโน 14 px สีจางที่เปลี่ยนเป็นสีเข้มบนหน้าสีสว่างและสีขาวบนหน้าสีชมพู HUD จางหายเมื่อการ์ดปิดท้ายมาถึง
เทคนิค
พาดหัวผุดขึ้นสู่บรรทัดของมันทีละตัวอักษร แต่ละตัวอักษรถูกตัดด้วยบรรทัดและผุดขึ้นจากด้านล่าง (0.15 วินาที อีซเอาต์สไตล์ power3) โดยกระจายการหน่วงเวลาให้ทั้งบรรทัดลงจอดในราว 0.4 วินาทีไม่ว่าจะยาวเท่าใด คำที่ถูกสลับออกไปทางด้านบนผ่านขอบบนของบรรทัดทีละตัวอักษรขณะที่คำใหม่ผุดขึ้นแทนที่ ข้อความเนื้อหาและแท็กไลน์ผุดขึ้นทีละคำ คิกเกอร์โมโน ป้าย และที่อยู่ถอดรหัสจากสัญลักษณ์สุ่ม แคปซูลและปุ่มเด้งขึ้นพร้อมการเลยเล็กน้อย (อีซแบบ back-out) โค้ดพิมพ์ด้วยความเร็วประมาณ 100 ตัวอักษรต่อวินาทีพร้อมเคอร์เซอร์สีชมพู ใช้โมชันเบลอกับการเคลื่อนไหวที่เร็วที่สุด: การเปิดหน้า ตัวเลขที่หมุน การบีบแบนเป็นเส้น และการขับไอคอนเข้ามา คงการดันเข้าช้าๆ บนฉากที่หยุดนิ่ง เพื่อให้เฟรมไม่นิ่งสนิทจนกว่าจะถึงช่วงค้างของการ์ดปิดท้าย
ดนตรี
เพลงเฮาส์บรรเลงต้นฉบับที่เปี่ยมพลังที่ 128 BPM พอดี ยาว 15 วินาทีพอดี โดยมีเสียงกลองเบสตรงตามตารางบีต เริ่มด้วยห้องแรกที่อู้อี้ผ่านโลว์พาส และไรเซอร์ไวต์นอยส์ บีตเต็มดรอปพอดีที่แฟลชที่ 1.875 วินาที พร้อมเสียงกระแทกและซับบูมลึกๆ จากนั้นเป็นกรูฟ four-on-the-floor คงที่พร้อมเสียงแคลป ไฮแฮต เบสที่เต้นเป็นจังหวะ และคอร์ดซินธ์สว่างสดใส โดยไม่มีดรอปหรือช่วงระดับเสียงที่ขาดหายตรงไหนเลย ก่อนการ์ดปิดท้ายเล็กน้อย เพลงปิดลงเป็นเสียงผ่านโลว์พาสนานครึ่งห้อง (ฟิลเตอร์บิลด์) แทนที่จะหยุด เสียงบูมและสแปลชสุดท้ายกระแทกที่ 13.125 วินาที ตามด้วยเอาต์โทรสั้นๆ ของเพลงเองจนถึง 15 วินาที
สิ่งที่ต้องเตรียม
- ไอคอนแอปสี่เหลี่ยมจัตุรัสของฉัน คมชัด และควรอยู่บนพื้นหลังโปร่งใส อยู่ในการ์ดแผนภาพและขับเข้ามาบนการ์ดปิดท้าย
- ชื่อแอป ที่อยู่เว็บ และข้อความสั้นๆ ของฉัน (พาดหัว ชื่อฟีเจอร์ แท็กไลน์) เพื่อแทนที่ตัวอย่างในเครื่องหมายคำพูด
เทคนิคในวิดีโอนี้
เทคนิคโมชันดีไซน์ที่ใช้สร้างวิดีโอนี้ แต่ละเทคนิคมีโค้ดที่ทำงานได้ด้วยตัวเอง เปิดในเบราว์เซอร์หรือส่งให้เอเจนต์ของคุณได้
ที่ 0:01 ในวิดีโอ ตัวอักษรตัวอักษรในมาสก์ลอยขึ้นพร้อมสลับคำ
ตัวอักษรแต่ละตัวของพาดหัวตัวหนาอยู่ในกล่องตัดภาพของตัวเองที่สูงเท่าบรรทัด และลอยขึ้นมาจากด้านล่าง (0.15 วินาที, power3.out) ค่า stagger ถูกกระจายในช่วงเวลาคงที่ (ประมาณ 0.26 วินาทีสำหรับพาดหัวทั้งหมด) คำยาวจึงใช้เวลาเท่าคำสั้น เมื่อสลับคำสุดท้าย ตัวอักษรของคำนั้นจะออกไปทางขอบบนของบรรทัดภายใน 0.1 วินาที (power2.in) ขณะที่คำใหม่ซึ่งซ้อนอยู่ตำแหน่งเดียวกันด้วยสีเน้นลอยเข้ามาภายในราว 0.13 วินาที ส่วนคำแรกไม่ขยับเลย
ใช้เมื่อไร ประโยคทรงพลังที่เปลี่ยนคำหนึ่งคำตามจังหวะโดยไม่ต้องตัดภาพ
แสดงโค้ด
<!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:[email protected]&family=Geist+Mono:[email protected]&display=block"); * { margin: 0; padding: 0; box-sizing: border-box; } html, body { width: 1920px; height: 1080px; overflow: hidden; background: #0D0B1E; } #root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: "Geist", sans-serif; color: #fff; background: radial-gradient(ellipse 62% 70% at 50% 50%, #16102e 0%, #0e0b20 45%, #090714 100%); } #root::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(240, 237, 255, 0.07) 1.3px, transparent 1.9px); background-size: 48px 48px; } #kicker { position: absolute; left: 0; right: 0; top: 398px; text-align: center; font: 400 23px/1 "Geist Mono", monospace; letter-spacing: 0.15em; color: #8e87a6; white-space: pre; } #title { position: absolute; left: 409px; top: 452px; white-space: pre; font: 800 155px/1.2 "Geist", sans-serif; letter-spacing: -0.023em; } #w2 { position: relative; display: inline-block; } #wb { position: absolute; left: 0; top: 0; color: #FE9117; } .m { display: inline-block; clip-path: inset(-6% -12% 0 -12%); } /* the line is the mask */ .c { display: inline-block; } </style> </head> <body> <div id="root" data-composition-id="main" data-start="0" data-duration="4" data-width="1920" data-height="1080"> <div id="kicker" class="clip" data-start="0" data-duration="4">TELL THE CHAT WHAT TO SHOW</div> <div id="title" class="clip" data-start="0" data-duration="4"><span id="w1">No </span><span id="w2"><span id="wa">keyframes.</span><span id="wb">timeline.</span></span></div> </div> <script> // Split a word into masked characters: the outer span clips on the line, the inner one moves. function split(el) { const text = el.textContent; el.textContent = ""; const out = []; for (const ch of text) { const m = document.createElement("span"); m.className = "m"; const c = document.createElement("span"); c.className = "c"; c.textContent = ch; m.appendChild(c); el.appendChild(m); if (ch !== " ") out.push(c); } return out; } const tl = gsap.timeline({ paused: true }); const w1 = split(document.getElementById("w1")), wa = split(document.getElementById("wa")), wb = split(document.getElementById("wb")); const IN = 0.15, OUT = 0.11; // rise and exit durations of one letter const spread = (n, total) => total / Math.max(1, n - 1); // stagger that fits n letters into `total` seconds gsap.set(wb, { yPercent: 105 }); const first = w1.concat(wa), last = w1.concat(wb); first.forEach((c, i) => tl.fromTo(c, { yPercent: 105 }, { yPercent: 0, duration: IN, ease: "power3.out", immediateRender: true }, 0.1 + i * spread(first.length, 0.264))); wa.forEach((c, i) => tl.to(c, { yPercent: -105, duration: OUT, ease: "power2.in" }, 1.6 + i * spread(wa.length, 0.1))); // the old word leaves upward wb.forEach((c, i) => tl.to(c, { yPercent: 0, duration: IN, ease: "power3.out" }, 1.68 + i * spread(wb.length, 0.132))); // the new word rises in its place last.forEach((c, i) => tl.to(c, { yPercent: -105, duration: OUT, ease: "power2.in" }, 3.3 + i * spread(last.length, 0.144))); tl.fromTo("#kicker", { opacity: 0 }, { opacity: 1, duration: 0.25 }, 0.4); tl.to("#kicker", { opacity: 0, duration: 0.1 }, 3.25); 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:02 ในวิดีโอ ตัวอักษรเคอร์เซอร์สี่เหลี่ยมที่พิมพ์พาดหัวและลงเป็นจุดท้ายประโยค
สี่เหลี่ยมเล็กที่เอียงอยู่เข้ามาจากช็อตก่อนหน้าที่ขนาดราว 45 px ขยายเป็นราว 215 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=Geist:[email protected]&family=Geist+Mono:[email protected]&display=block"); * { margin: 0; padding: 0; box-sizing: border-box; } html, body { width: 1920px; height: 1080px; overflow: hidden; background: #0D0B1E; } #root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: "Geist", sans-serif; color: #fff; background: radial-gradient(ellipse 62% 70% at 50% 50%, #16102e 0%, #0e0b20 45%, #090714 100%); } #root::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(240, 237, 255, 0.07) 1.3px, transparent 1.9px); background-size: 48px 48px; } #title { position: absolute; left: 124px; top: 337px; white-space: pre; font: 800 311px/1.2 "Geist", sans-serif; letter-spacing: -0.022em; } .m { display: inline-block; clip-path: inset(-6% -12% 0 -12%); } .c { display: inline-block; } #sq { position: absolute; left: 910px; top: 490px; width: 100px; height: 100px; border-radius: 22px; background: linear-gradient(140deg, #ffc27a 0%, #FE9117 55%, #fb5a5f 100%); box-shadow: 0 0 40px rgba(254, 145, 23, 0.5); } #sqd { position: absolute; inset: 0; border-radius: inherit; background: #FB2D89; opacity: 0; } </style> </head> <body> <div id="root" data-composition-id="main" data-start="0" data-duration="3.5" data-width="1920" data-height="1080"> <div id="title" class="clip" data-start="0" data-duration="3.5">OPEN APP</div> <div id="sq" class="clip" data-start="0" data-duration="3.5"><div id="sqd"></div></div> </div> <script> const tl = gsap.timeline({ paused: true }); const title = document.getElementById("title"), sq = document.getElementById("sq"); const text = title.textContent; title.textContent = ""; const chars = []; for (const ch of text) { const m = document.createElement("span"); m.className = "m"; const c = document.createElement("span"); c.className = "c"; c.textContent = ch; m.appendChild(c); title.appendChild(m); if (ch !== " ") chars.push(c); } // Letters rise one after another (a short pause on the space). [0.37, 0.4, 0.43, 0.46, 0.53, 0.56, 0.59].forEach((t, i) => tl.fromTo(chars[i], { yPercent: 105 }, { yPercent: 0, duration: 0.16, ease: "power3.out", immediateRender: true }, t)); // The square (100 px box) by keyframes [seconds, value]: it arrives at 45 px and tilted, swells to about 215 px, // straightens, then runs ahead of the letters shrinking until it rests as the full stop (centre x, y in px). const K = { s: [[0.1, 0.45], [0.17, 1.1], [0.22, 1.75], [0.27, 2.15], [0.32, 2.15], [0.37, 2.1], [0.42, 1.73], [0.52, 1.1], [0.57, 0.77], [0.67, 0.61]], r: [[0.1, 15], [0.17, 4], [0.22, -5], [0.27, -6], [0.32, -2], [0.37, 0]], x: [[0.37, 960], [0.42, 1032], [0.47, 1240], [0.52, 1420], [0.57, 1588], [0.62, 1700], [0.67, 1755]], y: [[0.37, 535], [0.42, 518], [0.52, 530], [0.57, 545], [0.62, 580], [0.67, 600]] }; const at = (keys, t) => { if (t <= keys[0][0]) return keys[0][1]; for (let i = 1; i < keys.length; i++) if (t <= keys[i][0]) { const [a, va] = keys[i - 1], [b, vb] = keys[i]; return va + (vb - va) * (t - a) / (b - a); } return keys[keys.length - 1][1]; }; const draw = (t) => gsap.set(sq, { scale: at(K.s, t), rotation: at(K.r, t), x: at(K.x, t) - 960, y: at(K.y, t) - 540 }); tl.to({}, { duration: 3.5, onUpdate: () => draw(tl.time()) }, 0); draw(0); // Landed: the cursor becomes the full stop in the accent colour. tl.to("#sqd", { opacity: 1, duration: 0.25, ease: "power1.inOut" }, 0.52); tl.to(sq, { boxShadow: "0 0 70px rgba(251, 45, 137, 0.6)", duration: 0.3 }, 0.52); 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 ในวิดีโอ ทรานซิชันดำดิ่งผ่านช่องว่างในตัวอักษรเข้าสู่ฉากถัดไป
กล้องขยายชื่อเรื่องรอบช่องว่างในตัว O ตัวแรกด้วยคีย์เฟรมที่เว้นระยะแบบลอการิทึม (1.07 ตอนเริ่มดำดิ่ง, 3 หลัง 0.3 วินาที, 22 หลัง 0.5 วินาที) ขณะที่การเคลื่อนที่แบบ power2.out พาช่องว่างนั้นมาที่กึ่งกลางเฟรม พื้นหลังของชื่อเรื่องมีรูมาสก์ทรงรีที่ตามช่องว่างไปด้วย ฉากถัดไปที่อยู่ข้างล่างจึงมองเห็นผ่านตัวอักษรและเต็มเฟรมขณะที่ขอบของ O พุ่งผ่านไป
ใช้เมื่อไร เปลี่ยนจากคำใหญ่ไปสู่ช็อตสินค้าหรือส่วนใหม่ในการเคลื่อนไหวต่อเนื่องครั้งเดียว
แสดงโค้ด
<!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:[email protected]&family=Geist+Mono:[email protected]&display=block"); * { margin: 0; padding: 0; box-sizing: border-box; } html, body { width: 1920px; height: 1080px; overflow: hidden; background: #0D0B1E; } #root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: "Geist", sans-serif; color: #fff; background: radial-gradient(ellipse 62% 70% at 50% 50%, #16102e 0%, #0e0b20 45%, #090714 100%); } #root::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(240, 237, 255, 0.07) 1.3px, transparent 1.9px); background-size: 48px 48px; } #next { position: absolute; inset: 0; background: radial-gradient(ellipse 50% 58% at 50% 54%, #22124a 0%, #100c26 62%, #090714 100%); } #card { position: absolute; left: 679px; top: 399px; width: 562px; height: 351px; border-radius: 22px; border: 2px solid #FB2D89; background: #1a1340; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 16px; padding: 40px; } #card b { width: 50px; height: 50px; border-radius: 12px; background: #1C0B5D; box-shadow: inset 0 0 0 3px #FB2D89; } #card span { font: 700 45px/50px "Geist", sans-serif; } #card i { width: 233px; height: 64px; border-radius: 10px; background: #FB2D89; } #back { position: absolute; inset: 0; background: radial-gradient(ellipse 62% 70% at 50% 50%, #16102e 0%, #0e0b20 45%, #090714 100%); } #cam { position: absolute; inset: 0; } #title { position: absolute; left: 124px; top: 337px; white-space: pre; font: 800 311px/1.2 "Geist", sans-serif; letter-spacing: -0.022em; color: #fff; } </style> </head> <body> <div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1920" data-height="1080"> <div id="next" class="clip" data-start="0" data-duration="3"><div id="card"><b></b><span>"Next scene"</span><i></i><i></i></div></div> <div id="back" class="clip" data-start="0" data-duration="3"></div> <div id="cam" class="clip" data-start="0" data-duration="3"><div id="title">OPEN APP</div></div> </div> <script> // The camera dives into the counter of the first letter "O": the title scales up about the counter while the // counter slides to the frame centre; the background gets an elliptical hole that follows the counter, so the // next scene (underneath) shows through it. const tl = gsap.timeline({ paused: true }); const F = 311; // font size of the title const title = document.getElementById("title"), cam = document.getElementById("cam"), back = document.getElementById("back"); // Counter of Geist 800 "O" in its line box (line-height 1.2), as fractions of the font size. const ocx = title.offsetLeft + 0.3935 * F, ocy = title.offsetTop + 0.5995 * F, RX = 0.1735 * F, RY = 0.2285 * F; gsap.set(cam, { transformOrigin: `${ocx}px ${ocy}px` }); // Scale keyframes [seconds, scale], interpolated in log space: slow, then exploding past the camera. const DIVE = [[0.6, 1.075], [0.683, 1.2], [0.733, 1.4], [0.783, 1.6], [0.833, 1.9], [0.867, 2.3], [0.917, 3], [0.967, 4.5], [1.017, 8], [1.05, 12.5], [1.083, 17], [1.1, 22]]; const scaleAt = (t) => { if (t <= DIVE[0][0]) return 1 + 0.075 * Math.max(0, t) / DIVE[0][0]; // slow push-in before the dive for (let i = 1; i < DIVE.length; i++) if (t <= DIVE[i][0]) { const [a, sa] = DIVE[i - 1], [b, sb] = DIVE[i]; return Math.exp(Math.log(sa) + (Math.log(sb) - Math.log(sa)) * (t - a) / (b - a)); } return 40; }; const k = { v: 0 }; tl.to(k, { v: 1, duration: 0.32, ease: "power2.out" }, 0.6); // the counter travels to the centre gsap.set("#card", { scale: 0.86 }); tl.to("#card", { scale: 1, duration: 0.5, ease: "power2.out" }, 1.02); const draw = (t) => { const s = scaleAt(t), cx = ocx + (960 - ocx) * k.v, cy = ocy + (540 - ocy) * k.v; gsap.set(cam, { scale: s, x: cx - ocx, y: cy - ocy, opacity: t > 1.1 ? 0 : 1 }); const hole = t >= 0.68 ? `radial-gradient(ellipse ${RX * 1.1 * s}px ${RY * 1.07 * s}px at ${cx}px ${cy}px, transparent 99%, #000 100%)` : "none"; back.style.webkitMaskImage = back.style.maskImage = hole; back.style.opacity = t > 1.1 ? 0 : 1; }; tl.to({}, { duration: 3, onUpdate: () => draw(tl.time()) }, 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:09 ในวิดีโอ ทรานซิชันปัดเป็นคอลัมน์พร้อมขอบนำที่เรืองแสง
คอลัมน์เท่ากันเก้าคอลัมน์เผยฉากถัดไปสลับกันจากด้านบนและด้านล่าง เริ่มห่างกัน 20-70 มิลลิวินาที และแต่ละคอลัมน์ใช้เวลา 0.15 วินาที (power2.inOut) แต่ละคอลัมน์เป็นเลเยอร์ CSS mask หนึ่งชั้นที่มีขอบนุ่ม 36 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=Geist:[email protected]&family=Geist+Mono:[email protected]&display=block"); * { margin: 0; padding: 0; box-sizing: border-box; } html, body { width: 1920px; height: 1080px; overflow: hidden; background: #0D0B1E; } #root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: "Geist", sans-serif; color: #fff; background: radial-gradient(ellipse 62% 70% at 50% 50%, #16102e 0%, #0e0b20 45%, #090714 100%); } #root::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(240, 237, 255, 0.07) 1.3px, transparent 1.9px); background-size: 48px 48px; } #from { position: absolute; inset: 0; background: linear-gradient(90deg, #b6b1c6 0%, #e2ddef 20%, #FAF9FF 50%, #e0dbee 78%, #b6b1c6 100%); color: #0D0B1E; } #to { position: absolute; inset: 0; background: radial-gradient(ellipse 48% 58% at 52% 56%, #22124a 0%, #100c26 64%, #090714 100%); color: #fff; } .word { position: absolute; left: 0; right: 0; top: 470px; text-align: center; font: 800 120px/1 "Geist", sans-serif; letter-spacing: -0.025em; } #bars { position: absolute; inset: 0; } .bar { position: absolute; height: 7px; background: #FB2D89; box-shadow: 0 0 18px 4px rgba(251, 45, 137, 0.7); opacity: 0; } </style> </head> <body> <div id="root" data-composition-id="main" data-start="0" data-duration="2.5" data-width="1920" data-height="1080"> <div id="from" class="clip" data-start="0" data-duration="2.5"><div class="word">"Light scene"</div></div> <div id="to" class="clip" data-start="0" data-duration="2.5"><div class="word">"Dark scene"</div></div> <div id="bars" class="clip" data-start="0" data-duration="2.5"></div> </div> <script> // Nine columns reveal the next scene, each sliding in from the top or the bottom with a soft edge and a glowing bar // at its leading edge. One CSS mask layer per column, sized and placed from the timeline's time. const tl = gsap.timeline({ paused: true }); const COLS = [[0, 0.5, 1], [1, 0.53, -1], [2, 0.55, 1], [3, 0.575, -1], [4, 0.595, 1], [5, 0.665, -1], [6, 0.62, 1], [7, 0.64, -1], [8, 0.685, 1]]; // [column, start s, from top 1 / bottom -1] const CW = 1920 / 9, CD = 0.15, FEATHER = 36; const to = document.getElementById("to"), barsEl = document.getElementById("bars"); const bars = COLS.map(([i]) => { const b = document.createElement("div"); b.className = "bar"; b.style.left = i * CW + "px"; b.style.width = Math.ceil(CW) + "px"; barsEl.appendChild(b); return b; }); const ease = gsap.parseEase("power2.inOut"); const draw = (t) => { const imgs = [], sizes = [], poss = []; COLS.forEach(([i, t0, dir], k) => { const p = ease(Math.min(1, Math.max(0, (t - t0) / CD))), h = Math.round(p * 1110); imgs.push(`linear-gradient(${dir > 0 ? 180 : 0}deg, #000 calc(100% - ${FEATHER}px), transparent)`); sizes.push(`${Math.ceil(CW) + 1}px ${h}px`); poss.push(`${Math.floor(i * CW)}px ${dir > 0 ? 0 : 1080 - h}px`); bars[k].style.opacity = p > 0 && p < 1 ? 1 : 0; bars[k].style.top = (dir > 0 ? h - 26 : 1080 - h + 19) + "px"; }); const m = to.style; m.webkitMaskImage = m.maskImage = imgs.join(","); m.webkitMaskSize = m.maskSize = sizes.join(","); m.webkitMaskPosition = m.maskPosition = poss.join(","); m.webkitMaskRepeat = m.maskRepeat = "no-repeat"; }; tl.to({}, { duration: 2.5, onUpdate: () => draw(tl.time()) }, 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 ในวิดีโอ ทรานซิชันวงกลมระเบิดออกจากป้ายสถานะ
ฉากถัดไปถูกมาสก์ด้วยวงกลมที่มีศูนย์กลางอยู่ที่ป้ายเล็กของฉากสุดท้าย ขอบนุ่ม 26 px และมีขอบเรืองแสงวาดอยู่ด้านนอกพอดี รัศมีเป็นไปตามคีย์เฟรม (ประมาณ 130 และ 190 px ในสองเฟรมแรก แล้วพุ่งผ่านมุมไกลสุดในอีก 0.1 วินาที) สีใหม่จึงระเบิดออกจากป้าย และเนื้อหาใหม่ลอยเข้ามาเมื่อลงตำแหน่ง
ใช้เมื่อไร เปลี่ยนช่วงเวลาสำเร็จเล็ก ๆ ให้เป็นส่วนเต็มหน้าจอถัดไป
แสดงโค้ด
<!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:[email protected]&family=Geist+Mono:[email protected]&display=block"); * { margin: 0; padding: 0; box-sizing: border-box; } html, body { width: 1920px; height: 1080px; overflow: hidden; background: #0D0B1E; } #root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: "Geist", sans-serif; color: #fff; background: radial-gradient(ellipse 62% 70% at 50% 50%, #16102e 0%, #0e0b20 45%, #090714 100%); } #root::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(240, 237, 255, 0.07) 1.3px, transparent 1.9px); background-size: 48px 48px; } #badge { position: absolute; left: 1636px; top: 732px; width: 137px; height: 42px; border-radius: 21px; background: #2DD4B0; color: #05302a; display: flex; align-items: center; justify-content: center; gap: 10px; font: 700 20px/1 "Geist Mono", monospace; } #badge svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 3; fill: none; stroke-linecap: round; } #rim { position: absolute; left: 1705px; top: 753px; width: 0; height: 0; border-radius: 50%; box-shadow: 0 0 0 10px rgba(255, 140, 195, 0.35), 0 0 40px 18px rgba(255, 90, 160, 0.35); } #next { position: absolute; inset: 0; background: radial-gradient(ellipse 60% 70% at 33% 40%, #ff4f9c 0%, #FB2D89 30%, #e81f7b 55%, #cc176b 80%, #b0125d 100%); } .word { position: absolute; left: 127px; top: 152px; font: 800 243px/1.08 "Geist", sans-serif; letter-spacing: -0.022em; color: #fff; } </style> </head> <body> <div id="root" data-composition-id="main" data-start="0" data-duration="2.5" data-width="1920" data-height="1080"> <div id="badge" class="clip" data-start="0" data-duration="2.5"><svg viewBox="0 0 24 24"><path d="M5 12.5l4.5 4.5L19 7" /></svg>LIVE</div> <div id="next" class="clip" data-start="0" data-duration="2.5"><div class="word">"01"</div></div> <div id="rim" class="clip" data-start="0" data-duration="2.5"></div> </div> <script> // The next scene bursts out of the status badge as a soft-edged circle with a glowing rim; its radius follows // keyframes (slow for two frames, then racing past the corners), and the new content rises in as it lands. const tl = gsap.timeline({ paused: true }); const next = document.getElementById("next"), rim = document.getElementById("rim"); const CX = 1705, CY = 753; // centre of the badge const R = [[1.0, 0], [1.017, 127], [1.05, 191], [1.067, 545], [1.1, 737], [1.117, 1330], [1.15, 1580], [1.167, 2000]]; // [s, radius px] const radius = (t) => { if (t <= R[0][0]) return 0; for (let i = 1; i < R.length; i++) if (t <= R[i][0]) { const [a, ra] = R[i - 1], [b, rb] = R[i]; return ra + (rb - ra) * (t - a) / (b - a); } return 2000; }; tl.fromTo("#badge", { scale: 0 }, { scale: 1, duration: 0.16, ease: "back.out(2.4)", immediateRender: true }, 0.2); tl.fromTo(".word", { y: 40, opacity: 0 }, { y: 0, opacity: 1, duration: 0.24, ease: "power3.out", immediateRender: true }, 1.17); const draw = (t) => { const r = radius(t); const m = r >= 1999 ? "none" : `radial-gradient(circle at ${CX}px ${CY}px, #000 ${Math.max(0, r - 26)}px, transparent ${r}px)`; next.style.webkitMaskImage = next.style.maskImage = m; gsap.set(rim, { width: 2 * r, height: 2 * r, x: -r, y: -r, opacity: r > 0 && r < 1999 ? 1 : 0 }); }; tl.to({}, { duration: 2.5, onUpdate: () => draw(tl.time()) }, 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 ในวิดีโอ ข้อมูลวงล้อตัวเลขแบบสล็อตแมชชีน
ตัวเลขแต่ละหลักเป็นวงล้อแนวตั้งที่มีเลข 10 ตัวขึ้นไปในคอลัมน์ที่กว้างเท่าตัวเลขที่ลงตัว วงล้อเลื่อนขึ้นไปยังค่าของมันในราว 0.25 วินาทีด้วย power3.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:[email protected]&family=Geist+Mono:[email protected]&display=block"); * { margin: 0; padding: 0; box-sizing: border-box; } html, body { width: 1920px; height: 1080px; overflow: hidden; background: #0D0B1E; } #root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: "Geist", sans-serif; color: #fff; background: radial-gradient(ellipse 62% 70% at 50% 50%, #16102e 0%, #0e0b20 45%, #090714 100%); } #root::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(240, 237, 255, 0.07) 1.3px, transparent 1.9px); background-size: 48px 48px; } #root { background: radial-gradient(ellipse 60% 70% at 33% 40%, #ff4f9c 0%, #FB2D89 30%, #e81f7b 55%, #cc176b 80%, #b0125d 100%); } .dv { position: absolute; left: 127px; width: 1666px; height: 2px; background: rgba(255, 255, 255, 0.34); transform-origin: 0 50%; } .num { position: absolute; left: 127px; display: flex; font: 800 243px/1 "Geist", sans-serif; letter-spacing: -0.022em; color: #fff; } .col { position: relative; display: inline-block; overflow: hidden; height: 1.08em; } .reel { display: block; } .reel span { display: block; height: 1.08em; line-height: 1.08em; text-align: center; margin: 0 -0.2em; } </style> </head> <body> <div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1920" data-height="1080"> <div class="dv clip" id="d0" data-start="0" data-duration="3" style="top: 147px;"></div> <div class="dv clip" id="d1" data-start="0" data-duration="3" style="top: 421px;"></div> <div class="dv clip" id="d2" data-start="0" data-duration="3" style="top: 695px;"></div> <div class="num clip" id="n0" data-start="0" data-duration="3" style="top: 152px;"></div> <div class="num clip" id="n1" data-start="0" data-duration="3" style="top: 426px;"></div> <div class="num clip" id="n2" data-start="0" data-duration="3" style="top: 700px;"></div> </div> <script> // Each digit is a reel of digits that scrolls up and lands on its value, blurred while fast; later digits spin // longer, so the number settles left to right. The column is as wide as the landed digit. const tl = gsap.timeline({ paused: true }); const NUMS = [["01", 0.3], ["02", 0.5], ["03", 0.77]]; // [value, starts at s] NUMS.forEach(([str, t0], ni) => { const el = document.getElementById("n" + ni); [...str].forEach((ch, di) => { const col = document.createElement("span"); col.className = "col"; const reel = document.createElement("span"); reel.className = "reel"; const spins = 10 + di * 3, target = +ch; for (let k = 0; k <= spins; k++) { const s = document.createElement("span"); s.textContent = String((target - spins + k + 100) % 10); reel.appendChild(s); } col.appendChild(reel); el.appendChild(col); const probe = document.createElement("span"); probe.textContent = ch; probe.style.cssText = "display:inline-block;position:absolute;visibility:hidden"; el.appendChild(probe); col.style.width = probe.getBoundingClientRect().width + "px"; probe.remove(); const h = 100 / (spins + 1), dur = 0.24 + di * 0.035; tl.fromTo(reel, { yPercent: 0, filter: "blur(6px)" }, { yPercent: -h * spins, filter: "blur(0px)", duration: dur, ease: "power3.out", immediateRender: true }, t0 + di * 0.02); tl.fromTo(col, { opacity: 0 }, { opacity: 1, duration: 0.05, immediateRender: true }, t0 + di * 0.02); }); tl.fromTo("#d" + ni, { scaleX: 0 }, { scaleX: 1, duration: 0.3, ease: "power2.out", immediateRender: true }, t0 - 0.02); }); 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 ในวิดีโอ อนุภาคกลุ่มชิปเชิงลึกพร้อมการพุ่งผ่านแบบวาร์ป
ชิปที่มีป้ายกำกับราวยี่สิบกว่าอันวางอยู่ในตำแหน่งคงที่ พร้อมการหมุนเล็กน้อยและการเอียงแบบ 3D บางอันเบลอเหมือนอยู่นอกโฟกัส พวกมันโฟกัสชัดทีละอัน (opacity, blur จาก 6 px จนคมชัด, scale จาก 0.94 เป็น 1, 0.22 วินาที) และลอยไปไม่กี่พิกเซล เมื่อจะออก แต่ละอันเอียงอย่างแรง (0.14 วินาที) และพุ่งตามเส้นของมันจากกึ่งกลางผ่านกล้องด้วย translateZ ในกล่อง perspective (0.22 วินาที, power1.in) เบลอสูงสุดราว 10 px เหมือนเส้นแสง ขณะที่สี่เหลี่ยมแกนเล็กขยายเป็นราว 42 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=Geist:[email protected]&family=Geist+Mono:[email protected]&display=block"); * { margin: 0; padding: 0; box-sizing: border-box; } html, body { width: 1920px; height: 1080px; overflow: hidden; background: #0D0B1E; } #root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: "Geist", sans-serif; color: #fff; background: radial-gradient(ellipse 62% 70% at 50% 50%, #16102e 0%, #0e0b20 45%, #090714 100%); } #root::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(240, 237, 255, 0.07) 1.3px, transparent 1.9px); background-size: 48px 48px; } #space { position: absolute; inset: 0; perspective: 1000px; perspective-origin: 960px 540px; } .chip { position: absolute; display: flex; align-items: center; gap: 13px; height: 44px; padding: 0 18px 0 16px; border-radius: 10px; white-space: pre; font: 500 21px/1 "Geist Mono", monospace; color: #E3DEF0; background: rgba(22, 18, 46, 0.86); border: 1.5px solid rgba(233, 228, 242, 0.14); } .chip i { width: 7px; height: 7px; border-radius: 50%; background: #6B6385; } .chip.hl { color: #fff; background: rgba(251, 45, 137, 0.13); border-color: #FB2D89; } .chip.hl i { background: #FB2D89; } #core { position: absolute; left: 955px; top: 535px; width: 10px; height: 10px; border-radius: 22%; background: linear-gradient(135deg, #FE9117, #FB2D89); box-shadow: 0 0 18px rgba(251, 45, 137, 0.9); } </style> </head> <body> <div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1920" data-height="1080"> <div id="space" class="clip" data-start="0" data-duration="3"></div> <div id="core" class="clip" data-start="0" data-duration="3"></div> </div> <script> // Labels float at different depths (roll, small 3D tilt, depth-of-field blur), focus in one by one and drift; // then each tilts hard and flies past the camera along its line from the centre (translateZ in a perspective box). const tl = gsap.timeline({ paused: true }); const CHIPS = [["\"Tell the chat what to show\"", 907, 340, 3, 1, 0], ["\"Kinetic type\"", 1349, 740, 2, 0, 0], ["\"Live preview\"", 225, 598, 2, 0, 0.4], ["\"Describe your idea\"", 1213, 931, 4, 1, 0], ["\"MP4 export\"", 1700, 590, -3, 0, 1.6], ["\"Shapes\"", 571, 853, 0, 0, 0], ["\"3D effects\"", 1677, 652, -3, 0, 1.4], ["\"Fonts for every script\"", 650, 940, 2, 0, 0], ["\"Music and sound effects\"", 1432, 167, -2, 0, 0], ["\"Pick a template\"", 1128, 828, 0, 0, 0], ["\"Edit in words\"", 286, 873, 4, 0, 0.6], ["\"Your own footage\"", 380, 757, 2, 0, 0.6]]; // [text, x, y, roll, highlighted, blur] let seed = 11; const rnd = () => { seed = (seed * 16807) % 2147483647; return seed / 2147483647; }; // seeded const space = document.getElementById("space"); CHIPS.forEach(([text, x, y, roll, hl, blur], i) => { const el = document.createElement("div"); el.className = "chip" + (hl ? " hl" : ""); el.innerHTML = "<i></i>" + text.replace(/"/g, ""); el.style.left = x + "px"; el.style.top = y + "px"; space.appendChild(el); const at = 0.08 + i * 0.07; gsap.set(el, { xPercent: -50, yPercent: -50, rotation: roll, rotationY: (rnd() - 0.5) * 16, rotationX: (rnd() - 0.5) * 12, opacity: 0, filter: `blur(${blur + 6}px)`, scale: 0.94 }); tl.to(el, { opacity: 1, filter: `blur(${blur}px)`, scale: 1, duration: 0.22, ease: "power2.out" }, at); // focus pull in tl.to(el, { x: (rnd() - 0.5) * 24, y: (rnd() - 0.5) * 22, duration: 2.0 - at, ease: "none" }, at); // drift const w = 2.0 + rnd() * 0.04; tl.to(el, { rotationX: (rnd() - 0.5) * 120, rotationY: (rnd() - 0.5) * 130, duration: 0.14, ease: "power2.out" }, w); // tilt tl.to(el, { z: 860 + rnd() * 100, filter: `blur(${blur + 10}px)`, duration: 0.22, ease: "power1.in" }, w); // fly past, blurring like a streak tl.to(el, { opacity: 0, duration: 0.06 }, w + 0.17); }); gsap.set("#core", { scale: 0, rotation: 45 }); tl.to("#core", { scale: 1, duration: 0.1, ease: "power2.out" }, 1.85); tl.to("#core", { scale: 2.6, rotation: 15, duration: 0.33, ease: "power1.out" }, 1.95); 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รหัสพรอมต์: MOVแบรนด์รีลแถลงการณ์ลูกบอลกระดอน
<direction> สร้างแบรนด์รีลแนวตั้งความยาว 19.2 วินาที (1080x1920, 30 fps) ที่วนลูปได้อย่างไร้รอยต่อ เป็นโมชันกราฟิกทั้งหมด ตัดตามบีต 150 BPM (0.4 วินาทีต่อจังหวะ, 12 ห้อง) ไอเดียคือ ลูกบอลเงางามลูกเดียวเป็นพระเอกของทั้งเรื่อง มันกระดอนไปตามแถลงการณ์ฮุกที่ขึ้นหนึ่งคำต่อหนึ่งจังหวะ กลายเป็นลูกตุ้มของลูกตุ้มนาฬิกา เปลี่ยนเป็นโคมไฟที่ส่องสว่างหน้ากระดาษ รอให้มอนตาจเร็ว ๆ ผ่านไปหลังชื่อแบรนด์ของคุณ แล้วจบลงตามลำพังบนการ์ดปิดท้ายตรงตำแหน่งที่เฟรมแรกเริ่มต้นพอดี ลุคเป็นตัวอักษรเอดิทอเรียลหนา ๆ บนพื้นหลังเรียบสีราตรีลึกและสีกระดาษ มีสีเน้นไล่เฉดชมพูไปส้มและสีเน้นที่สองเป็นม่วง จังหวะ: ถี่กระชั้นใน 3.2 วินาทีแรก จากนั้นเป็นสองฉากยาวที่ได้หายใจบนชีพจรสองจังหวะ ช่วงระเบิดคัตตามโน้ตเขบ็ต 3.2 วินาที ไคลแม็กซ์ 2 วินาที และจุดลูปที่เงียบสงบ หลีกเลี่ยงฟุตเทจ เสียงบรรยาย ครอสเฟดนุ่ม ๆ และการตัดใด ๆ ที่พลาดบีต: ทุกการตัดต้องอยู่บนจังหวะหรือครึ่งจังหวะ คำที่เป็นสีเน้นต้องใช้น้ำหนัก ExtraBold เท่ากับส่วนอื่น ห้ามบางกว่า </direction> <structure> 1. ฮุก, 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) ให้แทนที่ด้วยบรรทัดแถลงการณ์ของคุณเอง พื้นหลังสลับระหว่างสีมืดกับสีกระดาษในทุกการตัด ที่คำว่า «แสง» และ «มิติ» ลูกบอลพุ่งขึ้นและออกไปทางซ้ายบน 2. ลูกตุ้ม, 3.2–8.0 วิ พื้นหลังสีกระดาษ ลูกบอลกลายเป็นตุ้ม (112 px) ของแท่งเรียวสีเข้มที่แขวนจากจุดหมุนเหนือกึ่งกลางด้านบน 380 px (ความยาวแขน 1317 px) เงาเบลอของแท่งและตุ้มเยื้องไปทางขวา ชื่อเรื่องตัวพิมพ์ใหญ่สองบรรทัดอยู่ตรงกลางและเปลี่ยนในทุกการแกว่ง: «ทำด้วย / มือ?» → «ทำด้วย / โค้ด.» (บรรทัดที่สองใช้สีเน้น) → «ไม่มี / ไทม์ไลน์.» → «ไม่มี / คีย์เฟรม.» → «แค่ / คำพูด.» (สีเน้น) → «และ / แสง.» เหล่านี้เป็นตัวอย่างให้แทนที่ ที่ 7.2 วิ แสงดับลงเลยแนวแท่งออกไป และการแกว่งครั้งสุดท้ายลากความมืดข้ามเฟรม 3. โคมไฟ, 8.0–12.8 วิ สีเข้ม #14112E ลูกบอลกลายเป็นโคมไฟเรืองแสงที่ลำแสงรูปกรวยเผยหน้ากระดาษ หน้ากระดาษมีข้อความ «แสง / ก็คือ / คณิตศาสตร์.» ตัวพิมพ์ใหญ่ (ตัวอย่าง; บรรทัดสุดท้ายสีม่วง) และโลโก้ล็อกอัปเล็ก ๆ ใกล้ y 1430: จุดไล่เฉดสีและโลโก้ตัวอักษรของคุณสีหมึก ตั้งแต่ 12.27 วิ หน้ากระดาษสว่างทั้งหน้า 4. มอนตาจ, 12.8–16.0 วิ ที่จังหวะดรอป «[แบรนด์ของคุณ]» ด้วยฟอนต์ Anton (สูงประมาณ 260 px จัดกึ่งกลาง) อยู่นิ่ง ขณะที่โลกด้านหลังเปลี่ยนทุกโน้ตเขบ็ต (0.2 วิ) โลกเรียงตามลำดับ: - บล็อบ 3D เงามันลายหินอ่อนสีชมพูส้มที่มีขอบเห็นชัด บนพื้นเทา - บล็อบเดียวกันใกล้ขึ้น - บล็อกเรียบ: สี่เหลี่ยมม่วง เข้ม และสีกระดาษ กับไล่เฉดสีเน้น - วงแหวนหมึกกับกระดาษสะกดจิตที่ซูมและหมุน - ป้ายกระดาษเปล่าที่แกว่งจากเชือกเหนือพื้นม่วง - ทุ่งคีย์บอร์ดสีเข้มมองจากด้านบน มีคีย์สีชมพูและส้มไม่กี่ปุ่มถูกกด - ทอรัสที่วาดด้วยจุดฮาล์ฟโทนที่ชัดเจนบนพื้นเข้ม - สีม่วงเรียบพร้อมกริดจาง ๆ - รูปทรง 3D แบบของเล่นที่ตีลังกาบนสีพลัมเข้ม (ลูกบาศก์ ลูกบอล วงแหวน กรวย และแคปซูลในสีพาเลตต์ บวกสีเหลือง #FFD23F) - รูปทรงเดียวกันแบบเบลอบนสีชมพูพาสเทล - โทรศัพท์กระจกบนพื้นเทา - บล็อบบนพื้นม่วง - พื้นลูกบาศก์สีขาวที่มีเสาสีชมพูและส้มพุ่งขึ้น - ทอรัสฮาล์ฟโทนเป็นจุดหมึกบนพื้นขาว - สีคอรัลเรียบพร้อมกริด 5. ฟินาเล่วอกเซล, 16.0–18.2 วิ พื้นหลังสีม่วง คำสั้น ๆ (ผลิตภัณฑ์ของคุณ หรือครึ่งหลังของชื่อแบรนด์) ถูกสร้างจากลูกบาศก์เล็ก ๆ ก่อตัวสมบูรณ์ที่ 16.6 วิ หายใจ แล้วแตกกระจายตั้งแต่ 17.72 วิ ขณะที่หลุมดำเปิดจากกึ่งกลางและเต็มเฟรมที่ 18.17 วิ 6. การ์ดปิดท้าย, 18.2–19.2 วิ สีเข้ม ลูกบอลโตขึ้นจากความว่างเปล่าตรงกลาง (142 px ที่ x 539, y 959) โลโก้ตัวอักษรของคุณในไล่เฉดชมพูไปส้มปรากฏใต้ลูกบอลที่ 18.1 วิ คงอยู่ แล้วเฟดหายที่ 18.85 วิ เหลือเพียงลูกบอลตรงตำแหน่งที่เฟรมแรกของหนังเริ่มต้นพอดี ลูปจึงไร้รอยต่อ </structure> <composition> พาเลตต์: - ราตรีลึก #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 </composition> <techniques> ฮุก: - แต่ละคำลงในสี่เฟรมด้วย 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 วิ </techniques> <music> สร้างแทร็กอิเล็กทรอนิกส์บรรเลงออริจินัลที่มืด หนักแน่น ที่ 150 BPM ในคีย์ดีไมเนอร์ ฟีลแบบ half-time (คิกที่จังหวะหนึ่ง สแนร์ที่จังหวะสาม) มีเบสบิดเบี้ยวเต้นเป็นโน้ตเขบ็ต กลองกระชับ และแพดตึงเครียด รวมทั้งเสียงร้องตัดต่อที่ผ่านการประมวลผลไม่มีคำร้องใช้เป็นเท็กซ์เจอร์ ไม่มีการร้อง เล่นตั้งแต่เฟรมแรก คิกและสแนร์ตกบนการตัดคำและการแกว่งของลูกตุ้ม และดรอปที่ 12.8 วิ จบด้วยเสียงกระแทกหนัก ๆ พร้อมคอร์ดมืดตรงกับหลุมดำที่ 18.0 วิ พอดี ซึ่งก้องอยู่ใต้การ์ดปิดท้าย ตัดให้ยาว 19.2 วิ ตรงห้องเพลง </music> <sound> ซ้อนเสียงเหล่านี้เหนือดนตรี: - เสียงคลิกเบา ๆ ทุกครั้งที่คำแฟลช - เสียงวู้ชทุกครั้งที่แกว่ง - ไรเซอร์เข้าสู่ลูกตุ้ม - เสียงสวีปตกเมื่อแสงดับ - เสียงระฆังเมื่อลูกบอลสว่างขึ้น - ไรเซอร์เข้าสู่บูมที่มอนตาจตอน 12.8 วิ - เสียงติ๊กเบา ๆ ทุกครั้งที่เปลี่ยนโลกใหม่ - เสียงวู้ชเมื่อลูกบาศก์พุ่งเข้ามา - เสียงบูมเล็ก ๆ เมื่อคำลงที่ - ไรเซอร์เข้าสู่บูมลึกใต้หลุมดำ ไม่มีเสียงพูด </sound>
ใช้แล้ว 3 ครั้ง
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 ครั้งจดหมายข่าว
รับพรอมต์ใหม่ทางอีเมล
เราส่งพรอมต์ใหม่ที่ดีที่สุดจากคอมมูนิตี้พร้อมวิดีโอให้คุณ ไม่มีสแปม และทุกฉบับมีลิงก์ยกเลิกการรับ
เราใช้อีเมลของคุณสำหรับจดหมายข่าวนี้เท่านั้น นโยบายความเป็นส่วนตัว
