ลูป UI มอร์ฟิงที่ควบคุมด้วยเคอร์เซอร์ที่คลิก
<direction> สร้างวิดีโอสี่เหลี่ยมจัตุรัสความยาว 14 วินาที (1440x1440, 30 fps): ลูปโมชันของ UI ที่ต่อเนื่องไร้รอยต่อ วาดขึ้นทั้งหมด ไม่มีการตัดต่อ รูปทรงมนหนึ่งรูปเปลี่ยนรูปจากคอมโพเนนต์อินเทอร์เฟซหนึ่งไปอีกอันอย่างต่อเนื่อง: ปุ่ม, ตัวโหลด, เครื่องหมายถูก, พิลล์แบบไอส์แลนด์, เครื่องเล่นเพลง, แถบเลื่อนระดับเสียง, สวิตช์, แท็บ, แผนภูมิ, พิลล์ค้นหา, พาเลตต์คำสั่ง, ทอสต์ แล้วกลับมาที่ปุ่ม เคอร์เซอร์บนหน้าจอควบคุมทุกการเปลี่ยนแปลงและคลิกกับลากจริง เฟรมสุดท้ายต้องตรงกับเฟรมแรกเพื่อให้วนลูปได้ ลุคสะอาดและสงบ: พื้นสีลาเวนเดอร์ คอมโพเนนต์สีหมึกเข้มและสีขาว และฟอนต์ UI สะอาดหนึ่งแบบ สีสันเดียวมาจากโลโก้ของฉัน ซึ่งทำหน้าที่แทนปกอัลบั้ม มีบางอย่างเกิดขึ้นเกือบทุกจังหวะที่ราว 120 BPM หลีกเลี่ยงแสงเรือง, การไล่สีบนองค์ประกอบ UI, อนุภาค, อีซซิ่งแบบเด้ง, การตัดต่อ และเสียงพูด คำบนหน้าจอทั้งหมดด้านล่างเป็นตัวอย่างให้แทนที่ด้วยคำของฉัน ให้แต่ละคำมีความยาวใกล้เคียงกันเพื่อให้เลย์เอาต์คงอยู่ </direction> <structure> 0.0-0.6 วิ: ปุ่มพิลล์สีหมึกเข้ม "Open app" (ราว 640x200 px, ตัวอักษรสีขาว 62 px) เคอร์เซอร์ไหลเข้ามาจากล่างขวาและกดที่ 0.46 วิ ปุ่มยุบลงเหลือ 96% 0.6-1.25 วิ: หดเป็นวงกลม 230 px ที่มีส่วนโค้งสีขาวหมุนอยู่ จากนั้นเครื่องหมายถูกสีขาววาดตัวเองขึ้นมา 1.25-1.75 วิ: วงกลมยืดออกเป็นพิลล์ไอส์แลนด์ (ราว 860x210) มีโลโก้ของฉันเป็นสี่เหลี่ยมมุมมนเล็กๆ ทางซ้าย และแท่งคลื่นเสียงสีขาวห้าแท่งที่เด้งอยู่ทางขวา 1.75-3.7 วิ: ไอส์แลนด์เปิดออกเป็นการ์ดเครื่องเล่นสีหมึกเข้ม (ราว 990x630, มุม 72 px) โลโก้ขยายเป็นปก 224 px แบบองค์ประกอบร่วม ข้างชื่อ "Ideas in motion" และ "[your site]" สีลาเวนเดอร์อ่อน ด้านล่างมีแถบความคืบหน้าสีขาวบางพร้อมปุ่มลาก, "01" และ "03" ที่ปลายทั้งสองข้าง และไอคอนก่อนหน้า / หยุดชั่วคราว / ถัดไป เคอร์เซอร์คลิกหยุดชั่วคราว ซึ่งเปลี่ยนเป็นเล่นผ่านการเบลอเร็วๆ แล้วคลิกกลับเป็นหยุดชั่วคราว จากนั้นจับปุ่มลากซึ่งขยาย 25% แล้วลากจากราวหนึ่งในสามไปเกือบสุด 3.7-5.25 วิ: การ์ดยุบเป็นพิลล์ระดับเสียงกว้าง (ราว 1070x186) พร้อมไอคอนลำโพง เคอร์เซอร์ลากระดับเกือบถึงศูนย์ ขึ้นไปอีก และเลยค่าสูงสุด พิลล์ทั้งอันยืดไปทางขวาเหมือนยาง ได้ถึงราว 170 px แล้วเด้งกลับพร้อมการสั่นเล็กน้อยหนึ่งครั้งเมื่อปล่อย 5.25-6.25 วิ: กลายเป็นสวิตช์ (ราว 520x260) ปุ่มปรากฏเป็นสีเทาตรงกลาง แล้วพลิกเป็นเปิด ปิด เปิด ปิด โดยกดทุกครั้ง เปิดคือรางสีหมึกเข้มโดยมีปุ่มสีขาวอยู่ทางขวา ปิดคือรางสีซีด #E9E4F2 โดยมีปุ่มอยู่ทางซ้าย 6.25-7.25 วิ: ปุ่มขยายเป็นตัวบ่งชี้สีหมึกเข้มของแถบแท็บสีขาว "Pick" / "Describe" / "Export" เคอร์เซอร์คลิก "Describe" แล้วคลิก "Export" ตัวบ่งชี้ยืดนำไปก่อนแล้วตามทัน และป้ายด้านล่างเปลี่ยนเป็นสีขาว 7.25-9.7 วิ: แถบแท็บเปิดออกเป็นการ์ดแผนภูมิสีขาว (ราว 1100x840) โดยแท็บย้ายขึ้นไปด้านบนและตัวบ่งชี้กลายเป็นพิลล์เล็ก ตัวเลขใหญ่หนาหมุน "01", "02", "03" พร้อมเบลอเล็กน้อยเหนือคำบรรยาย "Refine in words, then export" ในขณะเดียวกันเส้นสีหมึกเข้มวาดตัวเองจากซ้ายไปขวาในราวครึ่งวินาทีเหนือพื้นที่สีลาเวนเดอร์และเส้นบางสี่เส้น เคอร์เซอร์กวาดไปตามเส้นพร้อมทูลทิปสีหมึกเข้มที่แสดง "01", "02", "03" ระหว่างทาง ตามด้วยจุดและเส้นนำประ การคลิก "Describe" ทำให้ตัวเลขหมุนไปที่ "02" พร้อมคำบรรยาย "Describe your idea" และเส้นโค้งมอร์ฟเป็นเส้นที่ต่ำลงและเป็นคลื่นมากขึ้น 9.7-10.1 วิ: การ์ดยุบเป็นพิลล์ค้นหาสีขาวพร้อมไอคอนค้นหา, "Edit in words" และ "⌘K" ทางขวา 10.1-11.75 วิ: พิลล์เปิดออกเป็นพาเลตต์คำสั่ง (ราว 1060x830) ด้านบนเป็นแถวค้นหาพร้อมข้อความตัวอย่าง "Describe your idea" และเคอร์เซอร์พิมพ์ที่กะพริบ แล้วเป็นเส้นบาง ตามด้วยห้าแถวที่เข้ามาห่างกัน 40 มิลลิวินาที แต่ละแถวมีกระเบื้องไอคอนสีลาเวนเดอร์: "Pick a template ⌘N", "MP4 export ⌘E", "Ideas in motion", "Live preview", "Your AI motion designer ↵" คำว่า "motion" ถูกพิมพ์ทีละตัวอักษรต่อการกดหนึ่งครั้ง ห่างกันราว 0.1 วิ และไม่สม่ำเสมอเล็กน้อย โดยเคอร์เซอร์พิมพ์ค้างนิ่งขณะพิมพ์ คำที่พิมพ์ต้องตรงกับสองแถวพอดี แถวที่ไม่ตรงอีกต่อไปจะเบลอหายไป สองแถวที่ตรงเลื่อนขึ้น แผงสั้นลงแบบสปริงและภาพซูมเข้า ไฮไลต์สีลาเวนเดอร์อยู่ที่แถวแรกที่ตรง เลื่อนลงไปที่ "Your AI motion designer" และเปลี่ยนเป็นสีหมึกเข้มเมื่อกด Enter 11.75-12.6 วิ: พาเลตต์พับผ่านโทนสีที่อ่อนกว่าเป็นทอสต์สีหมึกเข้ม (ราว 970x180) พร้อมเครื่องหมายถูกสีขาวและ "Your AI motion designer" ขณะที่ภาพค่อยๆ ผ่อนกลับ 12.6-14 วิ: ข้อความของทอสต์เบลอเป็น "Open app" และพิลล์หดกลับเป็นปุ่มตอนเริ่ม คงอยู่จนจบ โดยเคอร์เซอร์พักอยู่ที่ล่างขวา เฟรมสุดท้ายจึงตรงกับเฟรมแรก </structure> <composition> พื้นหลังเป็นสีลาเวนเดอร์ #F0EDFF มีแสงเรืองสีขาวนุ่มๆ เหนือกึ่งกลางเล็กน้อยและวิกเน็ตจางๆ คอมโพเนนต์เป็นสีหมึกเข้ม #1C0B5D หรือแผงสีขาว #FFFFFF ข้อความโทนอ่อนคือ #6B6385 ส่วนเส้นบางและสถานะปิดของสวิตช์คือ #E9E4F2 แผงทั้งหมดทอดเงายาวนุ่มที่แต่งสีด้วยหมึก สีเน้นเดียวคือสีของโลโก้ฉัน ในที่นี้คือชมพู #FB2D89 และส้ม #FE9117 ดังนั้นให้ใช้สีของโลโก้ของคุณ โลโก้ปรากฏเป็นสี่เหลี่ยมมุมมนเล็กๆ ของไอส์แลนด์และเป็นปกของเครื่องเล่น ตั้งข้อความทั้งหมดด้วย Geist และตัวเลขเล็กๆ ของเครื่องเล่นด้วย Geist Mono เคอร์เซอร์เป็นลูกศรสีเกือบดำ (#0D0B1E) พร้อมขอบสีขาว ทุกอย่างอยู่กึ่งกลางผืนผ้าใบ </composition> <techniques> รูปทรงเดียวเปลี่ยนความกว้าง ความสูง รัศมีมุม และสีด้วยสปริงที่แน่น: ราว 0.25 วิเพื่อนิ่ง เกินเป้าสูงสุดราว 1% ทุกอย่างที่อยู่ภายในแต่ละสถานะเฟดเข้าและออกใน 0.1 วิพร้อมเบลอ 10 px ข้อความจึงไม่ซ้อนกันเลยขณะที่คอนเทนเนอร์ปรับขนาด การสลับข้อความ เช่น หยุดชั่วคราวเป็นเล่น และข้อความทอสต์กลับเป็น "Open app" ก็ผ่านการเบลอเร็วๆ เช่นกัน เคอร์เซอร์เคลื่อนที่ตามเส้นโค้งเรียบและหดลงราว 14% ขณะที่ปุ่มของมันถูกกดค้าง โลโก้ย้ายจากไอส์แลนด์ไปเป็นปกเครื่องเล่นแบบองค์ประกอบร่วม พิลล์ระดับเสียงยืดเหมือนยางเมื่อถูกดึงเลยค่าสูงสุด แล้วเด้งกลับพร้อมการสั่นเล็กน้อยหนึ่งครั้ง ขอบหน้าของปุ่มสวิตช์ใช้สปริงที่แข็งกว่าขอบหลัง ปุ่มจึงยืดออกขณะเคลื่อนที่ ตัวบ่งชี้แท็บก็ยืดนำไปก่อนแล้วตามทันแบบเดียวกัน ตัวเลขของแผนภูมิหมุนพร้อมเบลอเล็กน้อย เส้นวาดตัวเองจากซ้ายไปขวาในราว 0.5 วิ และเส้นโค้งมอร์ฟเป็นรูปทรงใหม่เมื่อเปลี่ยนแท็บ แถวของพาเลตต์เข้ามาห่างกัน 40 มิลลิวินาที และแถวที่ถูกกรองออกเบลอหายไป กล้องอยู่นิ่ง ยกเว้นการซูมเข้านุ่มๆ 17% ขณะที่พาเลตต์สั้น แล้วผ่อนกลับเมื่อทอสต์ก่อตัว </techniques> <music> สร้างเพลงบรรเลงร็อกกาบิลลี / คันทรีร็อกสนุกๆ ในคีย์ E-flat ที่ราว 120 BPM ยาวเท่ากับวิดีโอพอดี มีกรูฟแบบ boom-chick โดยกลองเบสตกที่จังหวะและสแนร์ตกที่โน้ตเขบ็ตระหว่างนั้น และลิกกีตาร์ลีดเสียง twang เหนือเบสและกลอง เริ่มด้วยพลังเต็มที่ตั้งแต่เฟรมแรกและคงที่ วางการกระทำของเคอร์เซอร์และการมอร์ฟบนตารางจังหวะของเพลง ที่ราว 13.4 วิ วงหยุดที่เสียงตีเดียวพร้อมคราช แล้วปล่อยให้ก้อง เพื่อให้ลูปวนกลับมาตรงจังหวะ </music> <sound> เสียงเอฟเฟกต์ที่ประกอบให้เข้ากับภาพ ซ้อนอยู่บนเพลง: - ทุกการกดของเคอร์เซอร์คลิกด้วยเสียงติ๊กสั้นสดใสและเสียงกังวานมีระดับเสียงเล็กน้อย ทุกการปล่อยให้เสียงติ๊กที่นุ่มและสูงกว่า ทั้งสองแพนเบาๆ ตามเคอร์เซอร์ - เสียงบลิปเล็กๆ เมื่อเครื่องหมายถูกปรากฏ - ฉาบย้อนกลับที่พองขึ้นสู่การคลิกแท็บ "Export" - เสียงบูมทุ้มนุ่มเมื่อการ์ดแผนภูมิเปิดออก - การค้นหาถูกพิมพ์ด้วยเครื่องพิมพ์ดีด: สองปุ่มสำหรับ ⌘K, หนึ่งแช็กต่อตัวอักษรที่พิมพ์, ปุ่มที่เบากว่าสำหรับลูกศรลง และ Enter หนักๆ พร้อมกระดิ่งเครื่องพิมพ์ดีดเล็กๆ - เสียงซิปของการเลื่อนแคร่เมื่อพาเลตต์พับเป็นทอสต์ ปิดท้ายด้วยเสียงกึกเมื่อทอสต์ลงจอด - เสียงบูมลึกและเสียงสาดน้ำใต้การหยุดสุดท้าย ย่านเสียงสูงของเพลงลดลงชั่วครู่ใต้ทุกการคลิกและการกดปุ่มเพื่อให้ได้ยินชัด ไม่มีเสียงพูด มิกซ์ที่ราว -14 LUFS โดยมี true peak ต่ำกว่า -1 dBTP </sound> <references> ลูปมอร์ฟอินเทอร์เฟซรูปทรงเดียวที่ลื่นไหล เหมือนโชว์รีลของ UI ผลิตภัณฑ์และทรานซิชันสไตล์ Dynamic Island ที่คอนเทนเนอร์เดียวเปลี่ยนรูปเป็นคอมโพเนนต์ถัดไปอย่างต่อเนื่องในช็อตเดียว </references>
