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

TH

เปิดแอป beta

Simple Motion

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

โลโก้ถูกสร้างจากโครงลวดที่วาดและสามเหลี่ยม low-poly ที่ตีลังกา วาบตรงจังหวะดรอปเป็นไอคอนแอป แล้วพิมพ์ชื่อและแท็กไลน์ไว้ข้าง ๆ

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

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

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

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

แนวคิด

สร้างวิดีโอเปิดตัวโลโก้แนวนอนความยาว 21 วินาที ขนาด 1920x1080 ที่ 60 fps โดยค่อย ๆ ประกอบโลโก้ของฉันจากเหลี่ยม low-poly และจบด้วยล็อกอัปแนวนอนที่พิมพ์ชื่อแบรนด์ของฉันและมีแท็กไลน์อยู่ด้านล่าง แนวคิดคือการประกอบยาวเงียบสงบไม่มีการตัดต่อเป็นเวลาสิบสี่วินาที ปลดปล่อยตรงจังหวะดรอปของเพลงภายในสองวินาที แล้วจบอย่างสงบด้วยการพิมพ์ข้อความ ลุคคือพื้นหลังเกือบดำพร้อมวิกเน็ตวงกลมนุ่ม ๆ สีแบรนด์แบบเรียบ และตัวอักษรกรอเทสก์ที่สะอาด หลีกเลี่ยงการไล่สีบนโลโก้ รอยต่อที่มองเห็นระหว่างสามเหลี่ยม การตัดต่อระหว่างการประกอบ และสิ่งที่รกอยู่หลังโลโก้

โครงสร้าง

0–2.6 วินาที โครงลวด: โครงลวด low-poly ของเส้นขอบโลโก้ของฉันวาดตัวเองจากด้านล่างของโลโก้ออกไปด้านนอก มีประมาณ 35–45 จุดยอดและเส้นบาง ๆ 90 เส้น
1.9–13.3 วินาที การประกอบ: โลโก้ถูกตัดเป็นสามเหลี่ยมประมาณ 55 ชิ้นตามโครงลวดนั้น และบินเข้ามาทีละชิ้นจากนอกเฟรม การลงจอดเริ่มช้า ๆ ที่ด้านล่างของโลโก้และถี่ขึ้นเรื่อย ๆ ไปทางด้านบน ชิ้นสุดท้ายลงจอดที่ 13.3 วินาที แล้วโลโก้จะสมบูรณ์และแม่นยำ ค้างโลโก้ที่เสร็จแล้วประมาณหนึ่งวินาที
14.38 วินาที แสงวาบ ตรงจังหวะดรอปของเพลงพอดี แสงระเบิด วงแหวนสีส้มที่ขยายออก และแสงวาบสว่างบนโลโก้เกิดขึ้นพร้อมกัน 0.1 วินาทีหลังจังหวะนั้น แผ่นสีหมึกเข้มจะโตขึ้นหลังโลโก้และกลายเป็นสี่เหลี่ยมมุมมนแบบไอคอนแอป ค้างไอคอนที่อยู่กึ่งกลางไว้หนึ่งวินาที
15.74–16.15 วินาที การเลื่อน: ไอคอนหดเหลือประมาณ 42% และเลื่อนไปที่หนึ่งในสามด้านซ้าย เพื่อเว้นที่ให้ชื่อ
16.1–21 วินาที ชื่อ: เคอร์เซอร์สีชมพูปรากฏทางขวาของไอคอน และชื่อถูกพิมพ์ออกมา เช่น "Brand Name" (เปลี่ยนเป็นแบรนด์ของคุณ) ที่ 18.15 วินาที แท็กไลน์กวาดเข้ามาใต้ชื่อ เช่น "Your tagline here" (เปลี่ยนเป็นของคุณ) เคอร์เซอร์กะพริบสามครั้งตามจังหวะและหายไปที่ 19.9 วินาที ค้างล็อกอัปไว้จนจบ

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

พื้นหลัง: วิกเน็ตแบบรัศมีเกือบดำ #0D0B1E ตรงกลางและเข้มลงเป็น #040308 ที่มุมภาพ
พาเลตต์สี:

สีหมึกเข้ม #1C0B5D สำหรับแผ่นไอคอน
สีชมพู #FB2D89 เป็นสีเน้นหลัก
สีส้ม #FE9117
สีขาว #FFFFFF
ลาเวนเดอร์อ่อน #E9E4F2 และ #F0EDFF สำหรับเส้นและข้อความนุ่ม ๆ
สีม่วง #7C6CF2 เฉพาะแสงเรืองในพื้นหลัง
โลโก้คงเป็นสีเรียบไม่มีการไล่สี
โครงลวด: เส้นสีลาเวนเดอร์ #E9E4F2 ความทึบ 60% หนา 1.3 px; จุดยอดสี #F0EDFF รัศมี 2.6 px
แผ่นไอคอน: วงกลม 676 px ที่กลายเป็นสี่เหลี่ยมมุมมนรัศมีมุม 24% พร้อมเงาตกกระทบนุ่ม ๆ
ตัวอักษร: ชื่อใช้ตัวกรอเทสก์หนา (Golos Text 700 ประมาณ 155 px สีขาว) แท็กไลน์อยู่ด้านล่างด้วยตัวกรอเทสก์บาง (Onest 400 ประมาณ 49 px สีลาเวนเดอร์ความทึบ 74%)
เคอร์เซอร์: แท่งสีชมพู #FB2D89 ขนาด 10 x 128 px พร้อมแสงเรืองสีชมพูนุ่ม ๆ
ล็อกอัปสุดท้าย (ไอคอนทางซ้าย ชื่อและแท็กไลน์ทางขวา) จัดให้อยู่กึ่งกลางเฟรมทั้งชุด

เทคนิค

Push-in: ช่วงเปิดอยู่บน push-in ที่ช้ามากเข้าหากึ่งกลางเฟรม จากสเกล 0.886 ที่ 0 วินาที ถึง 0.998 ที่ 11 วินาที แล้วหยุดนิ่ง
การวาดโครงลวด: แต่ละเส้นขยายแบบเชิงเส้นจากจุดยอดแรกไปยังจุดยอดหลังใน 0.08–0.45 วินาที จุดเล็ก ๆ ค่อย ๆ ปรากฏที่แต่ละจุดยอดเมื่อเส้นไปถึง
การบินเข้า: แต่ละชิ้นประกอบด้วยสามเหลี่ยมหนึ่งถึงสามอัน บินเข้ามาเร็วตามเส้นทางโค้งและชะลอเข้าที่ภายในประมาณ 0.5 วินาที พร้อมตีลังกาแบบ 3D การหมุน พลิก และเอียงค่อย ๆ ลดลงเป็นศูนย์เมื่อมาถึง ระหว่างบินจะหรี่ลงเหลือประมาณ 60% และเบลอเล็กน้อย; เมื่อลงจอดจะคมชัดและสว่างเต็มที่ สามเหลี่ยมแต่ละอันแสดงส่วนของตัวเองจากโลโก้สีเรียบพอดี ดังนั้นชุดที่ประกอบเสร็จจึงไร้รอยต่อ
แสงเรือง: แสงเรืองสีชมพู #FB2D89 จาง ๆ ความทึบต่ำกว่า 10% และค่อย ๆ กลายเป็นสีม่วง #7C6CF2 โตขึ้นหลังโลโก้ขณะที่โลโก้เต็ม
แสงวาบที่ 14.38 วินาที:

แสงระเบิดสีชมพู-ม่วงอ่อนแบบ screen วาบรอบโลโก้และจางลงใน 0.8 วินาที
วงแหวนบาง ๆ สีส้มอุ่น หนา 7 px เริ่มที่รัศมี 300 px และพุ่งออกนอกเฟรมด้วยความเร็วคงที่ใน 0.38 วินาที
โลโก้วาบสว่างและนิ่งลงใน 0.3 วินาที
แผ่น: 0.1 วินาทีหลังจังหวะ แผ่น #1C0B5D โตจากจุดเป็นวงกลม 676 px ใน 0.21 วินาที (sine ease-out) ตอนแรกมีแสงสว่าง จากนั้นมุมของมันจะเป็นเหลี่ยมที่รัศมี 24%
การเลื่อน: ไอคอนย่อเหลือประมาณ 42% และเลื่อนไปที่หนึ่งในสามด้านซ้ายใน 0.415 วินาที (power3 ease-in-out) เบลอได้ถึง 7 px ตอนเร็วที่สุดและลงจอดอย่างคมชัด หลังจากนั้นยังโตต่อช้า ๆ ประมาณ 3% ใน 5 วินาที
การพิมพ์: หนึ่งตัวอักษรต่อโน้ตเซมิควาเวอร์ของเพลง (0.156 วินาทีที่ 96 BPM) แต่ละตัวอักษรค่อย ๆ ปรากฏใน 0.05 วินาที ขณะที่เคอร์เซอร์กระโดดตามไป
แท็กไลน์: กวาดเข้ามาจากซ้ายไปขวาในประมาณ 0.2 วินาที ทีละตัวอักษร

ดนตรี

เพลงบรรเลง 96 BPM เต็มไปด้วยความหวังและทันสมัย ยาว 21 วินาทีพอดี

ช่วงเริ่ม: กล็อกเกนสปีลแบบกล่องดนตรีนุ่ม ๆ เหนือแพดอบอุ่น
ราว 4.4 วินาที: เรียบเรียงเต็มแบบสดใสเข้ามา (กลอง เบส เครื่องสาย ไลน์กล็อกเกนสปีลสดใส) ฟิลเตอร์ค่อย ๆ เปิดตลอดสองห้องและไต่ระดับไปสู่แสงวาบ
14.38 วินาที: เสียงฉาบกระแทกและคอร์ดใหญ่ลงตรงแสงวาบพอดี
หลังดรอป: กล่องดนตรีกลับมาเหนือแพดที่ลากยาวใต้ล็อกอัปและจางเป็นความเงียบที่ 21 วินาที
รักษาทุกอย่างให้อยู่บนกริดจังหวะ เพื่อให้การพิมพ์และการกะพริบของเคอร์เซอร์ตกบนโน้ตเซมิควาเวอร์และจังหวะ

เสียง

เสียงเอฟเฟกต์เหนือเพลง:

เสียง riser นุ่ม ๆ ก่อนการลงจอดของสามเหลี่ยมชิ้นแรก
riser ก่อนแสงวาบ แล้วเสียงบูมลึกและเสียงกระแทกแก้วเบา ๆ บนแสงวาบ
เสียง whoosh สั้น ๆ ตอนวงแหวนพุ่งออก และอีกครั้งตอนไอคอนเลื่อน
เสียงคลิกแป้นนุ่ม ๆ สำหรับทุกตัวอักษรที่พิมพ์ และเสียงจาง ๆ ตอนแท็กไลน์ปรากฏ
ไม่มีเสียงบรรยาย ความดังรวมประมาณ -14 LUFS, true peak ต่ำกว่า -1 dBTP

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

สติงโลโก้ระดับพรีเมียมแนวเทคโนโลยีหรือการเปิดตัวแอป: การประกอบจากโครงลวด low-poly เป็นรูปทึบในสไตล์การสร้างเหลี่ยม 3D ปลดปล่อยตรงจังหวะดรอปเป็นการเผยไอคอนแอป พร้อมล็อกอัปชื่อที่พิมพ์แบบเทอร์มินัล

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

ตัวอย่างเทคนิค “Wireframe that draws itself from one point outward” — ที่ 0:01 ในวิดีโอ

รูปทรง

Wireframe that draws itself from one point outward

A low-poly outline of the logo is drawn as thin lavender lines (#E9E4F2 at 62%, 1.3 px) with small dots on the vertices. Every vertex gets a time from its distance to a start point, every line draws (stroke-dashoffset, linear) from its earlier vertex to its later one in 0.08-0.45 s, and a dot fades in in 0.08 s when the first line reaches it. Under it the whole drawing scales 0.886 to 0.91 about the frame's centre, a push-in too slow to notice.

ใช้เมื่อไร To open a logo reveal or a diagram with the structure before the surface.

แสดงโค้ด

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Wireframe that draws itself from one point outward</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>
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1920px; height: 1080px; overflow: hidden; background: #040308; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: radial-gradient(circle at 960px 540px, #0D0B1E 0, #0D0B1E 250px, #0a0817 500px, #06050f 600px, #040308 900px); }
#w { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 960px 540px; }
#w line { stroke: #E9E4F2; stroke-opacity: 0.62; stroke-width: 1.3; fill: none; }
#w circle { fill: #F0EDFF; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="4" data-width="1920" data-height="1080"><svg id="w" viewBox="0 0 1920 1080"></svg></div>
<script>
const tl = gsap.timeline({ paused: true });
const NS = "http://www.w3.org/2000/svg", svg = document.getElementById("w");
let seed = 3; const rnd = () => (seed = (seed * 16807) % 2147483647) / 2147483647;
// vertices of a rough disc (any low-poly outline works the same)
const pts = [];
for (let r = 0; r <= 4; r++) { const n = r ? r * 6 : 1; for (let i = 0; i < n; i++) { const a = (i / n) * Math.PI * 2 + r, R = r * 55 + rnd() * 18; pts.push([960 + R * Math.cos(a), 540 + R * Math.sin(a)]); } }
const START = [960, 760], SPEED = 160; // where the drawing starts, how fast it spreads (px/s)
const t = pts.map(([x, y]) => 0.3 + Math.hypot(x - START[0], y - START[1]) / SPEED);
const seen = new Set();
pts.forEach((p, i) => {
  pts.map((q, j) => [Math.hypot(q[0] - p[0], q[1] - p[1]), j]).sort((a, b) => a[0] - b[0]).slice(1, 4).forEach(([d, j]) => {
    const key = i < j ? i + "," + j : j + "," + i; if (seen.has(key)) return; seen.add(key);
    const [a, b] = t[i] <= t[j] ? [i, j] : [j, i];
    const ln = document.createElementNS(NS, "line");
    ln.setAttribute("x1", pts[a][0]); ln.setAttribute("y1", pts[a][1]); ln.setAttribute("x2", pts[b][0]); ln.setAttribute("y2", pts[b][1]);
    ln.setAttribute("stroke-dasharray", d + " " + (d + 2)); ln.setAttribute("stroke-dashoffset", d);
    svg.appendChild(ln);
    tl.to(ln, { attr: { "stroke-dashoffset": 0 }, duration: Math.max(0.08, Math.min(0.45, t[b] - t[a])), ease: "none" }, t[a]);
  });
});
pts.forEach(([x, y], i) => {
  const c = document.createElementNS(NS, "circle"); c.setAttribute("cx", x); c.setAttribute("cy", y); c.setAttribute("r", 2.6); c.setAttribute("opacity", 0);
  svg.appendChild(c); tl.to(c, { attr: { opacity: 1 }, duration: 0.08, ease: "none" }, t[i]);
});
tl.fromTo(svg, { scale: 0.886 }, { scale: 0.912, duration: 4, ease: "none" }, 0); // the slow push-in
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>

3 มิติ

Low-poly facets that fly in, tumble and settle into the exact logo

The finished flat logo is cut into triangles; each triangle is its own layer showing only its window onto the logo (an SVG mask of the triangle grown 1.1 px on every side about its incentre, so neighbours overlap and meet without seams). Each piece flies in from off-screen on a decelerating path (expo.out, about 0.6 s), tumbling in 3D (rotation 70-220 deg, rotationY 40-120 deg, rotationX 20-80 deg, perspective 900 px) down to zero, dimmed and slightly soft in flight (brightness 0.58, blur 2.4 px) and sharp on landing. They land one after another from the bottom of the logo to the top over about eleven seconds; when the last one lands the logo is pixel-exact.

ใช้เมื่อไร To assemble a logo, a product or an illustration from its own pieces.

แสดงโค้ด

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Low-poly facets that fly in, tumble and settle into the exact logo</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>
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1920px; height: 1080px; overflow: hidden; background: #040308; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: radial-gradient(circle at 960px 540px, #0D0B1E 0, #0D0B1E 250px, #0a0817 500px, #06050f 600px, #040308 900px); }
#pieces { position: absolute; inset: 0; }
.piece { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; opacity: 0; will-change: transform; }
.piece svg { position: absolute; left: 0; top: 0; overflow: visible; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="6" data-width="1920" data-height="1080"><div id="pieces"></div></div>
<script>
const tl = gsap.timeline({ paused: true });
const host = document.getElementById("pieces");
// the finished logo, flat (any vector mark): an orange halo, a white disc, a pink play triangle
const LOGO = '<circle cx="960" cy="540" r="230" fill="#FE9117"/><circle cx="960" cy="540" r="200" fill="#FFFFFF"/><path d="M905 445 L1060 540 L905 635 Z" fill="#FB2D89"/>';
let seed = 11; const rnd = () => (seed = (seed * 16807) % 2147483647) / 2147483647;
const N = 6, X0 = 720, Y0 = 300, S = 480 / N, P = []; // a jittered grid over the logo's box, two triangles a cell
for (let j = 0; j <= N; j++) for (let i = 0; i <= N; i++) P.push([X0 + i * S + (i % N ? (rnd() - 0.5) * 30 : 0), Y0 + j * S + (j % N ? (rnd() - 0.5) * 30 : 0)]);
const tris = [];
for (let j = 0; j < N; j++) for (let i = 0; i < N; i++) { const a = j * (N + 1) + i, b = a + 1, c = a + N + 1, d = c + 1; tris.push([a, b, d], [a, d, c]); }
const used = tris.filter((t) => t.some((k) => Math.hypot(P[k][0] - 960, P[k][1] - 540) < 240));
used.sort((u, v) => Math.max(...v.map((k) => P[k][1])) - Math.max(...u.map((k) => P[k][1]))); // bottom first
const SPAN = 4.6, FLY = 0.6; // seconds over which pieces land, seconds each flight takes
used.forEach((t, n) => {
  const [A, B, C] = t.map((k) => P[k]);
  const la = Math.hypot(B[0] - C[0], B[1] - C[1]), lb = Math.hypot(A[0] - C[0], A[1] - C[1]), lc = Math.hypot(A[0] - B[0], A[1] - B[1]), per = la + lb + lc;
  const ix = (la * A[0] + lb * B[0] + lc * C[0]) / per, iy = (la * A[1] + lb * B[1] + lc * C[1]) / per;
  const r = Math.abs((B[0] - A[0]) * (C[1] - A[1]) - (C[0] - A[0]) * (B[1] - A[1])) / per, g = (r + 1.1) / r; // grow 1.1 px a side
  const win = [A, B, C].map(([x, y]) => [ix + (x - ix) * g, iy + (y - iy) * g]);
  const el = document.createElement("div"); el.className = "piece"; el.style.transformOrigin = ix + "px " + iy + "px";
  el.innerHTML = '<svg width="1920" height="1080" viewBox="0 0 1920 1080"><defs><mask id="m' + n + '" maskUnits="userSpaceOnUse" x="0" y="0" width="1920" height="1080"><polygon fill="#fff" points="' + win.map((q) => q.join(",")).join(" ") + '"/></mask></defs><g mask="url(#m' + n + ')">' + LOGO + '</g></svg>';
  host.appendChild(el);
  const land = FLY + 0.2 + (n * SPAN) / used.length, ang = rnd() * Math.PI * 2, sgn = () => (rnd() < 0.5 ? -1 : 1);
  tl.set(el, { opacity: 1 }, land - FLY);
  tl.fromTo(el, { x: Math.cos(ang) * 1300, y: Math.sin(ang) * 1300, rotation: sgn() * (70 + 150 * rnd()), rotationY: sgn() * (40 + 80 * rnd()), rotationX: sgn() * (20 + 60 * rnd()), transformPerspective: 900, filter: "brightness(0.58) blur(2.4px)" },
    { x: 0, y: 0, rotation: 0, rotationY: 0, rotationX: 0, filter: "brightness(1) blur(0px)", duration: FLY, ease: "expo.out", immediateRender: false }, land - FLY);
});
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>

ตัวอย่างเทคนิค “Light burst and racing ring that grow an app-icon plate” — ที่ 0:14 ในวิดีโอ

ทรานซิชัน

Light burst and racing ring that grow an app-icon plate

On the hit a screen-blended radial burst (pink-mauve, strongest around the logo) appears at once and fades over 0.8 s (power2.out); a 7 px warm ring starts at a 300 px radius and races out at constant speed to 1150 px in 0.38 s; the logo flashes (brightness 1.45, saturation 0.65, back in 0.3 s). 0.1 s after the hit the icon plate grows from a dot behind the logo (scale 0.02 to 1 in 0.21 s, sine.out), lit at first (brightness 1.35, settling in 0.25 s), and turns from a circle into a rounded square (border-radius 50% to 24% in 0.08 s).

ใช้เมื่อไร To turn a free-floating logo into an app icon on the drop.

แสดงโค้ด

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Light burst and racing ring that grow an app-icon plate</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>
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1920px; height: 1080px; overflow: hidden; background: #040308; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: radial-gradient(circle at 960px 540px, #0D0B1E 0, #0D0B1E 250px, #0a0817 500px, #06050f 600px, #040308 900px); }
#flash { position: absolute; inset: 0; opacity: 0; mix-blend-mode: screen; background: radial-gradient(circle at 960px 500px, rgb(185, 85, 135) 0, rgb(160, 68, 115) 220px, rgb(104, 40, 74) 330px, rgb(66, 26, 48) 450px, rgb(26, 10, 19) 640px, #000 860px); }
#ring { position: absolute; left: 660px; top: 240px; width: 600px; height: 600px; border-radius: 50%; border: 7px solid rgb(60, 34, 6); mix-blend-mode: screen; opacity: 0; }
#plate { position: absolute; left: 622px; top: 202px; width: 676px; height: 676px; border-radius: 50%; background: #1C0B5D; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55); opacity: 0; }
#logo { position: absolute; left: 780px; top: 360px; width: 360px; height: 360px; border-radius: 50%; background: #FFFFFF; box-shadow: inset 0 0 0 40px #FE9117; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1920" data-height="1080"><div id="flash"></div><div id="ring"></div><div id="plate"></div><div id="logo"></div></div>
<script>
const tl = gsap.timeline({ paused: true });
const T = 1.0; // the hit
tl.set("#flash", { opacity: 1 }, T).to("#flash", { opacity: 0, duration: 0.8, ease: "power2.out" }, T);
const ring = (r) => ({ left: 960 - r, top: 540 - r, width: 2 * r, height: 2 * r }); // grow the box, not the scale, so the line keeps its width
tl.set("#ring", { opacity: 1, ...ring(300) }, T).to("#ring", { ...ring(1150), duration: 0.382, ease: "none" }, T).set("#ring", { opacity: 0 }, T + 0.382);
tl.fromTo("#logo", { filter: "brightness(1.45) saturate(0.65)" }, { filter: "brightness(1) saturate(1)", duration: 0.3, ease: "power2.out", immediateRender: false }, T);
tl.set("#plate", { opacity: 1, scale: 0.02, filter: "brightness(1.35)" }, T + 0.097)
  .to("#plate", { scale: 1, duration: 0.21, ease: "sine.out" }, T + 0.097)
  .to("#plate", { filter: "brightness(1)", duration: 0.25, ease: "power1.out" }, T + 0.18)
  .to("#plate", { borderRadius: "24%", duration: 0.08, ease: "power2.inOut" }, T + 0.257);
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>

ตัวอย่างเทคนิค “Icon shrinks aside with a motion blur to make room for the name” — ที่ 0:15 ในวิดีโอ

เลย์เอาต์

Icon shrinks aside with a motion blur to make room for the name

The centred 676 px icon scales to 0.417 and slides to the left third in 0.415 s (power3.inOut, about the frame's centre), blurring up to 7 px at its fastest moment and sharp again as it lands; afterwards it keeps growing by 2.8% over five seconds so the lockup never freezes. The name then starts where the icon made room.

ใช้เมื่อไร To go from a hero icon to a horizontal logo lockup.

แสดงโค้ด

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Icon shrinks aside with a motion blur to make room for the name</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>
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1920px; height: 1080px; overflow: hidden; background: #040308; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: radial-gradient(circle at 960px 540px, #0D0B1E 0, #0D0B1E 250px, #0a0817 500px, #06050f 600px, #040308 900px); }
#wrap { position: absolute; inset: 0; transform-origin: 960px 540px; }
#icon { position: absolute; left: 622px; top: 202px; width: 676px; height: 676px; border-radius: 24%; background: #1C0B5D; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55); }
#icon i { position: absolute; left: 158px; top: 158px; width: 360px; height: 360px; border-radius: 50%; background: #FFFFFF; box-shadow: inset 0 0 0 40px #FE9117; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="4" data-width="1920" data-height="1080"><div id="wrap"><div id="icon"><i></i></div></div></div>
<script>
const tl = gsap.timeline({ paused: true });
const AT = 0.6, X = -438, Y = -18.5, S = 0.417; // when, where the icon's centre goes (px from the centre), how small
tl.to("#wrap", { scale: S, x: X, y: Y, duration: 0.415, ease: "power3.inOut" }, AT);
tl.fromTo("#wrap", { filter: "blur(0px)" }, { filter: "blur(7px)", duration: 0.2, ease: "power2.in", immediateRender: false }, AT + 0.015);
tl.to("#wrap", { filter: "blur(0px)", duration: 0.2, ease: "power2.out" }, AT + 0.215);
tl.to("#wrap", { scale: S * 1.028, duration: 3, ease: "none" }, AT + 0.415); // keeps breathing
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>

ตัวอักษร

Wordmark typed on sixteenth notes with a cursor that blinks on the beat

A pink cursor bar (10 x 128 px, soft glow) appears, then the name types one letter every sixteenth note at 96 BPM (0.156 s), each letter fading in over 0.05 s while the cursor jumps to its advance edge plus 16 px. Typed, the cursor blinks on the beat (off 0.28 s, on 0.34 s) three times and goes; meanwhile the tagline sweeps in left to right, each character fading in over 0.06 s as a front passes at about 3000 px/s. Bold grotesk for the name (Golos Text 700, 155 px), light text for the tagline (Onest 400, 49 px, lavender at 74%).

ใช้เมื่อไร For a logo lockup or a title that should feel typed live, in time with the music.

แสดงโค้ด

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Wordmark typed on sixteenth notes with a cursor that blinks on the beat</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=Golos+Text:wght@700&family=Onest:wght@400&display=swap");
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1920px; height: 1080px; overflow: hidden; background: #040308; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: radial-gradient(circle at 960px 540px, #0D0B1E 0, #0D0B1E 250px, #0a0817 500px, #06050f 600px, #040308 900px); }
#word { position: absolute; left: 720px; top: 395px; white-space: nowrap; font-family: "Golos Text", sans-serif; font-weight: 700; font-size: 155px; letter-spacing: -1.45px; color: #FFFFFF; }
#tag { position: absolute; left: 724px; top: 600px; white-space: nowrap; font-family: "Onest", sans-serif; font-weight: 400; font-size: 49px; letter-spacing: -0.95px; color: rgba(233, 228, 242, 0.74); }
#word span, #tag span { opacity: 0; }
#cursor { position: absolute; left: 0; top: 446px; width: 10px; height: 128px; border-radius: 1px; background: #FB2D89; box-shadow: 0 0 14px rgba(251, 45, 137, 0.45); opacity: 0; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="5" data-width="1920" data-height="1080"><div id="word"></div><div id="cursor"></div><div id="tag"></div></div>
<script>
const tl = gsap.timeline({ paused: true });
const WORD = "Brand Name", TAG = "Your tagline goes here";
const BEAT = 60 / 96, STEP = BEAT / 4, T0 = 0.4; // the music's beat, a sixteenth, when typing starts
const word = document.getElementById("word"), tag = document.getElementById("tag"), cur = document.getElementById("cursor");
const spans = (el, s) => [...s].map((c) => { const e = document.createElement("span"); e.textContent = c; el.appendChild(e); return e; });
const L = spans(word, WORD), G = spans(tag, TAG);
document.fonts.ready.then(() => {
  const x0 = word.offsetLeft, edge = L.map((s) => x0 + s.offsetLeft + s.offsetWidth + 16);
  tl.set(cur, { x: x0 + 9, opacity: 1 }, T0 - 0.15);
  L.forEach((s, k) => { const t = T0 + k * STEP; tl.to(s, { opacity: 1, duration: 0.05, ease: "none" }, t); tl.set(cur, { x: edge[k] - 5 }, t); });
  const done = T0 + L.length * STEP;
  for (let b = 0; b < 3; b++) { tl.set(cur, { opacity: 0 }, done + 0.5 + b * BEAT); tl.set(cur, { opacity: 1 }, done + 0.78 + b * BEAT); }
  tl.set(cur, { opacity: 0 }, done + 0.5 + 3 * BEAT);
  G.forEach((s) => tl.to(s, { opacity: 1, duration: 0.06, ease: "none" }, done + 0.48 + s.offsetLeft / 3050));
  window.__timelines = window.__timelines || {}; window.__timelines["main"] = tl;
});
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

พรอมต์อื่นๆ

พรีวิวของพรอมต์ “โปรโมตแลนดิ้งเพจด้วยทรานซิชันที่เปลี่ยนผ่านวัตถุ”

โปรโมตแลนดิ้งเพจด้วยทรานซิชันที่เปลี่ยนผ่านวัตถุ

<direction> ทำวิดีโอโปรโมตมอชันกราฟิกแนวนอน 15 วินาที ขนาด 1920x1080 สำหรับ [your brand] โดยสร้างให้เหมือนแลนดิ้งเพจที่มีชีวิตขึ้นมา ตัดตามแทร็กอิเล็กทรอนิกส์ 128 BPM โดยไม่มีเสียงบรรยาย แนวคิดคือไม่มีการตัดต่อธรรมดาเลย: ทุกฉากส่งต่อไปยังฉากถัดไปผ่านวัตถุ (จุด ตัวเลือกจากรีล โทรศัพท์ หรือไทล์ผู้ชนะ) รักษาลุคยูไอผลิตภัณฑ์ที่สะอาดสว่าง: พื้นหลังสีอ่อน ปุ่มแคปซูลมุมโค้ง การ์ด โทรศัพท์ แดชบอร์ด และกำแพงวิดีโอ โดยป้ายทั้งหมดเป็นข้อความสีเข้มบนแผ่นสีขาว และใช้สีแบรนด์ของฉันตามบทบาท หลีกเลี่ยงการตัดแบบแข็ง ครอสเฟด เสียงพูด ข้อความสีขาวบนพื้นหลังสว่างหรือลายทาง และป้ายที่ทับวงแหวนหรือรูปทรงข้างเคียง </direction> <structure> ห้าจังหวะที่ยาวใกล้เคียงกัน ประมาณ 3 วินาทีต่อจังหวะ และทุกการส่งต่อตกบนจังหวะบีต 1. เปิดเรื่อง: จุดเดียวปรากฏตรงกลางและขยายเป็นแคปซูลแนวนอนที่มีแถววงกลม: ภาพบุคคลเล็กๆ และไอคอนอย่าง "Aa" รูปทรงง่ายๆ และลูกบาศก์ ไอคอนแต่ละอันมองเห็นครบ ไม่ถูกวงกลมข้างเคียงบัง กล้องถอยออกเผยพาดหัวสองบรรทัด จัดกึ่งกลางทั้งสองบรรทัด บรรทัดแรกประมาณ "No … keyframes." (เปลี่ยนเป็นของคุณ) คำสุดท้ายของพาดหัวหมุนผ่านตัวเลือกต่างๆ ต่อเนื่องเหมือนรีลสล็อต 2. ซูมดำดิ่งเข้าไปในรีลหมุนของภาพครีเอเตอร์และการ์ด รีลช้าลงและหยุดที่ตัวเลือกหนึ่ง ซึ่งถูกไฮไลต์ 3. ตัวเลือกกลายเป็นโทรศัพท์ และการ์ดฟีเจอร์คลี่ออกเป็นพัดรอบๆ การ์ดหนึ่งใบเขียนว่า "Edit in words" พร้อมตัวเลข "03" ขนาดใหญ่ และแท็กเล็ก "Live preview" วางไว้ข้างตัวเลขทันที (เปลี่ยนเป็นฟีเจอร์ของคุณ) คำบรรยายบนการ์ดอยู่บนแผ่นสีขาว 4. วิปแพนนำไปสู่แดชบอร์ดของไทล์วิดีโอที่มีคำบรรยายบนแผ่นสีขาว ระบบให้คะแนนและเลือกวิดีโอผู้ชนะ ซึ่งถูกไฮไลต์ 5. ไทล์ผู้ชนะเปิดออกเป็นกำแพงวิดีโอเอียงที่มีคำบรรยายบนแผ่นสีขาว จากนั้นกำแพงพับเป็นโลโก้ของฉันสำหรับการ์ดปิดท้าย โดยมี "[your website]" อยู่ข้างโลโก้บนแผ่นสีขาว </structure> <composition> การจัดเฟรมกึ่งกลางและสมมาตรสำหรับพาดหัวและการ์ดปิดท้ายโลโก้ องค์ประกอบยูไอจัดวางเหมือนแลนดิ้งเพจจริง: แถวแคปซูล การ์ดที่มีตัวเลขใหญ่และแท็กเล็ก โมเดลโทรศัพท์ ตารางแดชบอร์ด และกำแพงเอียงแบบเพอร์สเปกทีฟ ใช้สีแบรนด์ของฉันตามบทบาท: โทนพื้นหลัง (สีอ่อน มีบางส่วนเป็นลายทาง) สีเน้นหนึ่งสีสำหรับไฮไลต์ การเลือก และวงแหวน และสีข้อความเข้ม คำบรรยายทุกอันบนการ์ด ไทล์ และกำแพงเป็นข้อความสีเข้มบนแผ่นสีขาวมุมโค้ง เพื่อให้อ่านได้บนทุกพื้นหลัง ใช้ฟอนต์ซานส์เซอริฟที่สะอาดตระกูลเดียว: พาดหัวตัวหนา ป้ายน้ำหนักปกติ และป้ายปุ่มตัวหนา เว้นระยะขอบให้กว้างขวางเพื่อไม่ให้ข้อความแตะวงแหวนหรือขอบ </composition> <techniques> ทุกทรานซิชันคือวัตถุที่เปลี่ยนเป็นฉากถัดไป ไม่ใช่การตัด จุดขยายเป็นแคปซูลด้วย ease-out นุ่มนวล และวงกลมเด้งเข้ามาแบบเหลื่อมเวลาเล็กน้อย การถอยกล้องคือการย่อสเกลอย่างลื่นไหลเพื่อเผยพาดหัว คำที่หมุนคือสล็อตโรลแนวตั้งที่วนผ่านคำต่างๆ ซูมผ่านแคปซูลเข้าไปในรีล รีลหมุนเร็วแล้วชะลอด้วย ease-out ยาวเพื่อหยุดตรงตัวเลือกอย่างแม่นยำ ตัวเลือกปรับสเกลและเปลี่ยนรูปเป็นโทรศัพท์ และการ์ดคลี่ออกรอบๆ ด้วยการหมุนและเลื่อนแบบเหลื่อมเวลา วิปแพนคือการเคลื่อนที่แนวนอนเร็วพร้อมโมชันเบลอและ ease แบบ in-out คมชัด การเลือกในแดชบอร์ดคือวงแหวนไฮไลต์และขยายสเกลที่ผู้ชนะ ผู้ชนะขยายเป็นกำแพง 3D เอียง ซึ่งพับและยุบเป็นโลโก้พร้อมการนิ่งสุดท้าย การเคลื่อนไหวและจุดลงสำคัญทั้งหมดตรงกับกริดบีต </techniques> <music> สร้างแทร็กอิเล็กทรอนิกส์สดใสต้นฉบับที่ 128 BPM ยาว 15 วินาทีพอดี โดยมีโครงเรื่องชัดเจน: เริ่มเบาๆ ไต่ระดับผ่านฉากรีลและโทรศัพท์ ดรอปรอบๆ วิปแพน และจบอย่างสะอาดที่โลโก้ วางบนกริดบีตของการตัดต่อ พร้อมเสียงฮิตที่แต่งซ้อนสำหรับทุกการส่งต่อ ไรเซอร์เข้าสู่ดรอป และฮิตสุดท้ายตอนกำแพงพับเป็นโลโก้ มาสเตอร์ที่ประมาณ -14 LUFS โดยมีทรูพีคต่ำกว่า -1 dBTP </music> <sound> ไม่มีเสียงบรรยาย เพิ่มเสียงวูชตอนซูมทะลุและวิปแพน เสียงติ๊กแล้วหยุดสั้นๆ ตอนรีลหยุด และเสียงกระแทกนุ่มๆ ที่โลโก้ ให้ทั้งหมดเบากว่าเพลงและตรงจังหวะ </sound> <references> แลนดิ้งเพจ SaaS ที่ทำแอนิเมชันเป็นวิดีโอโปรโมตผลิตภัณฑ์: การ์ดยูไอ โมเดลโทรศัพท์ แดชบอร์ดวิเคราะห์ข้อมูล และกำแพงวิดีโอ ในสไตล์วิดีโอเปิดตัวแอปสมัยใหม่ที่มีทรานซิชันจากวัตถุสู่วัตถุอย่างลื่นไหล </references>

พรีวิวของพรอมต์ “โปรโมตตั๋ว กระเป๋าเดินทาง และฟอร์แมต พร้อมเผยโลโก้”

โปรโมตตั๋ว กระเป๋าเดินทาง และฟอร์แมต พร้อมเผยโลโก้

<direction> สร้างวิดีโอโปรโมตโมชันกราฟิกแนวนอนความยาว 15 วินาที (1920x1080, 60 fps) สำหรับ [your brand] ผลิตภัณฑ์ที่เปลี่ยนคำอธิบายให้เป็นวิดีโอที่เสร็จสมบูรณ์ (ปรับคำให้เข้ากับของคุณ) ไอเดียคือ คำขอกลายเป็นตั๋ว ตั๋วเปิดออกเป็นคำสัญญา กระเป๋าเดินทางส่งมอบขั้นตอนทีละขั้น สามฟอร์แมตกวาดผ่านไป และทุกอย่างลงเอยที่โลโก้ของฉัน ไม่มีเสียงบรรยาย: ข้อความอยู่บนหน้าจอและดนตรีขับเคลื่อนทุกอย่าง ทุกอย่างวาดขึ้น: กราฟิก 2D แบบแบนพร้อมการ์ดหนึ่งใบที่เอียงแบบ 3D ไม่มีฟุตเทจ ลุคสว่าง สะอาด และมีพลัง: สีชมพูเน้นหนึ่งสีบนหน้าสว่าง พร้อมพื้นที่มืดสีหมึกเข้ม หลีกเลี่ยงฟุตเทจ เสียงพูด ความเบลอภายในมาสก์ข้อความ และการลอยหรือบิดเบี้ยวของโลโก้ โลโก้ก่อตัวเป็นชิ้นเดียวตรงตามที่วาดไว้ และนิ่งสนิทตั้งแต่ประมาณ 13.3 วินาทีจนจบ </direction> <structure> 1. 0–1.9 วินาที, คำขอ ทางซ้าย ข้อความนำเล็กสีชมพูที่เว้นระยะตัวอักษร "YOUR AI MOTION DESIGNER" อยู่เหนือพาดหัวสามบรรทัดขนาดประมาณ 180 px คือ "Describe" / "the" / "video." (แทนที่ด้วยของคุณ; บรรทัดสุดท้ายเป็นสีชมพู) บรรทัดต่างๆ ลอยขึ้นจากเส้นฐานทีละบรรทัด บรรทัดแรกเคลื่อนไหวแล้วที่เฟรม 0 และบรรทัดอื่นตามมาห่างกัน 0.13 วินาที แบบเชิงเส้น บรรทัดละ 0.17 วินาที ทางขวาเป็นการ์ดตั๋วสีขาวที่เอียงตามมุมมอง ด้านซ้ายอยู่ใกล้กว่า มีหัวสีชมพู "FROM IDEA TO VIDEO" และโลโก้ของฉันขนาดเล็กพร้อม "[your brand]" ข้างๆ สองช่อง "FROM IDEA · Your idea" และ "TO MP4 · Video" เชื่อมกันด้วยเส้นประพร้อมสามเหลี่ยมเล่นสีชมพู นอกจากนี้ยังมีป้ายเล็ก "EDIT WORDS", "STEP 03", "EFFECTS 3D" และ "PREVIEW LIVE" บาร์โค้ด และ "03" บนตอนตั๋ว การ์ดบินเข้ามาจากทางขวาที่ 0.23 วินาที (power3.out, 0.35 วินาที) พุ่งเลยไปทางซ้ายประมาณ 125 px แล้วกลับมาหยุดนิ่ง (sine.inOut, 0.37 วินาที) ระหว่างนั้นโค้ด "MP4" สลับตัวอักษรสุ่ม 15 ครั้งต่อวินาทีและล็อกทีละตัวอักษรที่ 0.67, 0.8 และ 0.93 วินาที ที่ 1.17 วินาที ตราประทับสีชมพูแบบเส้นขอบ "MP4 EXPORT" เอียง -14° ทุบลงจาก 2.4x ใน 8 เฟรมพร้อมการเด้งเล็กน้อย ที่ 1.67 วินาที สามเหลี่ยมเล่นหดเป็นจุดสีชมพูที่ขยายเป็นวงกลมกวาดโดยมีจุดนั้นเป็นศูนย์กลาง พร้อมวงแหวนสีชมพูอ่อนสองวงที่ขี่อยู่นอกขอบเล็กน้อย รัศมีเปลี่ยนผ่าน 15, 36, 66, 120, 210, 330, 540, 900 และ 1500 px ทุกสองเฟรมหนึ่งขั้น บรรทัดพาดหัวออกไปทางด้านบนตามลำดับเมื่อวงกลมขยาย 2. 1.9–4.0 วินาที, คำสัญญา บนพื้นสีชมพูเต็มจอ (แบบรัศมี สว่างกว่าตรงกลาง) สามเหลี่ยมเล่นสีขาว ยาวกว่ากว้างเล็กน้อยเพื่อให้ชี้ไปทางที่มันไป ถือกำเนิดภายในวงกลม มันบินหนึ่งรอบรอบคำ หมุนตามเส้นทางของมัน: ขึ้นบน ซ้ายผ่านด้านบน ลงด้านซ้าย ไปตามด้านล่าง ขึ้นด้านขวา และออกทางมุมขวาบน ด้านหลังมันวาดวงโคจรจุดสีขาวที่จุดเก่ากว่าจางลงเป็นเส้นบางจางๆ วงกลมใหญ่จางๆ สองวงอยู่ในพื้นหลัง "No keyframes." (ประมาณ 220 px สีขาว) เหวี่ยงเข้ามาทีละตัวอักษร ห่างกัน 0.03 วินาที บนส่วนโค้งจากล่างขวา เริ่มที่ 38° แล้วตั้งตรง ที่ 2.8 วินาทีมันบินขึ้นและออกไปทีละตัวอักษร ในเวลาเดียวกัน "The agent animates it." (ประมาณ 157 px) ลอยขึ้นจากเส้นฐานทีละตัวอักษร ห่างกัน 16 มิลลิวินาที ที่ 3.03 วินาที แคปซูลสีขาวมุมมนกวาดเข้ามาจากซ้ายหลัง "animates it." ใน 0.18 วินาที และคำเหล่านั้นเปลี่ยนเป็นสีชมพูภายในนั้น ที่ 3.77 วินาที คำเบลอและจางหาย กระเป๋าเดินทางสีหมึกเข้มพร้อมสายรัดสีชมพูและป้าย "MP4" ตกลงมาจากด้านบนและลงที่ 4.02 วินาทีพร้อมการยุบเล็กน้อย 3. 4.0–8.95 วินาที, ขั้นตอน วงกลมสว่างเปิดออกจากกระเป๋าเดินทางพร้อมวงแหวนสีชมพูอ่อนสองวง และวงรีคลื่นสีชมพูสองวงแผ่ออกจากฐานของมัน ด้านบน "Edit in words." (สีหม่น ประมาณ 56 px) ลอยขึ้น จากนั้น "Your idea is ready to move." (ประมาณ 93 px) ลอยขึ้นทีละคำ โดย "move." เป็นสีชมพูและมีเส้นใต้สีชมพูวาดด้วยมือขีดอยู่ข้างใต้ เหนือกระเป๋าเดินทาง การ์ดขั้นตอนสีขาวหกใบมาถึงทุก 0.58 วินาที การ์ดแต่ละใบขนาด 900x165 px มุมมน มีกระเบื้องไอคอนทางซ้ายและชิปสถานะทางขวา แต่ละใบลอยขึ้นจากหลังกระเป๋าเดินทาง (จากต่ำลง 100 px และขนาด 72%, 0.3 วินาที, power2.inOut) พร้อมชิปสีลาเวนเดอร์ "Animating" และตัวหมุนโหลด จากนั้นสว่างขึ้นในสองจังหวะ: ขอบสีชมพูและแสงฮาโลด้านนอกนุ่มๆ ก่อน แล้ว 0.07 วินาทีต่อมากระเบื้องไอคอนเปลี่ยนเป็นสีชมพูและชิปกลายเป็น "✓ Ready" สีชมพู เมื่อการ์ดใบถัดไปมา ใบเก่าขยับขึ้น 40 px และจางใน 0.15 วินาที การ์ดอ่านว่า: "Kinetic type", "Shapes", "3D effects", "Sound", "Your own footage", "Fonts for every script" (แทนที่ด้วยของคุณ) ใต้กระเป๋าเดินทาง จุดหกจุดและตัวนับเดินหน้าไปกับการ์ดแต่ละใบ จาก "1 / 6 in motion" ถึง "6 / 6 in motion" ที่ 7.9 วินาที การ์ดใบสุดท้ายสลับในที่เป็น "Ready to move." พร้อมกระเบื้องเครื่องหมายถูกและชิปสีชมพู "6 / 6" ตัวนับถูกแทนที่ด้วย "✓ Live preview. MP4 export." ที่ 8.4 วินาที ทุกอย่างยกเว้นกระเป๋าเดินทางลอยออกไปและเบลอจาง ที่ 8.7 วินาที กล้องดำดิ่งเข้าไปในกระเป๋าเดินทางจนตัวสีหมึกเข้มของมันเต็มเฟรม 4. 8.95–11.4 วินาที, ฟอร์แมต กลุ่มแถบเอียงสามแถบกวาดข้ามจากขวาไปซ้ายใน 0.2 วินาทีและเปิดแผงเต็มเฟรมหลังขอบท้ายของมัน แถบเอียงประมาณ 18°: แถบเรียวสีชมพูเข้ม แถบกว้างสีชมพู และแถบเรียวสีชมพูอ่อน การกวาดแบบเดียวกันมาอีกครั้งที่ 9.76 วินาทีและ 10.5 วินาที แผงทั้งสามเป็นบล็อกไล่สีนุ่มๆ ที่มีเส้นขอบฟ้า: - ลาเวนเดอร์ไปม่วง พร้อมแสงอุ่นที่ครึ่งล่าง; - ท้องฟ้าสีม่วงเหนือ "ทะเล" สีหมึกเข้ม; - ท้องฟ้าสีส้มเหนือสีหมึกเข้ม พร้อมแถบหมอกสีเขียวน้ำทะเล แต่ละแผงค่อยๆ ซูมเข้าจาก 1.07 เป็น 1 และมีการไล่สีหมึกเข้มที่ด้านล่าง ชื่อของมันลอยขึ้นทีละตัวอักษรที่ล่างซ้าย ประมาณ 226 px สีขาว: "Vertical", "Horizontal", "Square" ที่ซ้ายบนมี HUD เล็กที่เว้นระยะตัวอักษร: "01 / 03" สีชมพูอ่อน จากนั้น "9:16" จากนั้น "MP4 EXPORT" พิมพ์ขึ้น พร้อมเส้นใต้สีชมพูที่ขยายอยู่ข้างใต้ เปลี่ยนเป็น "02 / 03 · 16:9 · LIVE PREVIEW" แล้ว "03 / 03 · 1:1 · NO KEYFRAMES" 5. 11.4–12.5 วินาที, กริด แผงสุดท้ายหดเข้าไปในการ์ดด้านขวา ขณะที่อีกสองแผงเลื่อนเข้ามาจากซ้าย รวมกันเป็นการ์ดแนวตั้งสามใบ (580x780 px ห่างกัน 30 px) บนพื้นที่สีหมึกเข้ม กริดดันเข้าเบาๆ ถึง 1.05 และกลับมานิ่งในครึ่งวินาที "Vertical, horizontal or square." ลอยขึ้นเหนือกริดเป็นสีขาว เมื่อกริดนิ่งแล้ว ชื่อเล็กๆ ค่อยๆ ปรากฏบนการ์ด ("Vertical", "Horizontal", "Square") อยู่ในเฟรมอย่างปลอดภัย 6. 12.2–15 วินาที, โลโก้ จุดสีชมพูโตขึ้นจากการ์ดตรงกลาง พร้อมวงแหวนฮาโลจางๆ ขณะที่กริดหดเหลือ 0.9 บนหน้าสีขาว รัศมีของมันถูกคีย์ทุกสองเฟรมจาก 12 ถึง 1150 px จากนั้นจุดหดเร็วและช้าลง (260, 125, 90, 75 px) ขณะเคลื่อนไปทางซ้ายของกึ่งกลาง ที่นั่นมันเปิดออกตรงๆ เป็นรูปร่างพื้นหลังของโลโก้ฉัน โดยไม่ทับโลโก้เลย และส่วนภายในของโลโก้โตขึ้นเป็นชิ้นเดียว ตรงตามที่โลโก้วาดไว้ ที่ 13.03 วินาที "[your brand]" เลื่อนออกจากหลังโลโก้ไปทางขวา (power3.out, 0.32 วินาที) ขณะที่วงแหวนสีชมพูบางแผ่ออกรอบโลโก้และจางหาย ชื่อขนาดประมาณ 150 px สีหมึกเข้ม ตัวอักษรอยู่กึ่งกลางเส้นกลางของโลโก้ และล็อกอัปทั้งหมดอยู่กึ่งกลางเฟรม จากนั้น "Describe the video. The agent animates it." ลอยขึ้นทีละคำข้างใต้ โดยประโยคที่สองเป็นสีชมพู ชิปสีลาเวนเดอร์สามอันเด้งเข้ามา: "• Vertical", "• Horizontal", "• Square" "[your website]" ลอยขึ้นเป็นสีเทาหม่น โลโก้นิ่งสนิทตั้งแต่ประมาณ 13.3 วินาที และทุกอย่างค้างไว้จนจบ </structure> <composition> พื้นฐานคือหน้าสว่าง #FAF9FF พร้อมกริดจุดจางๆ ขนาด 40 px #E9E4F2 และแสงเรืองรัศมีสีชมพูนุ่มๆ สีหมึกเข้ม #1C0B5D ใช้สำหรับตัวอักษรเข้ม วัตถุเข้ม และพื้นที่มืด มีสีเน้นเดียวคือสีชมพู #FB2D89 สำหรับไฮไลต์ พื้นที่เน้น และความคืบหน้า สีหม่น #6B6385 สำหรับบรรทัดรอง และลาเวนเดอร์ #F0EDFF สำหรับชิปนุ่มๆ สีส้ม #FE9117 สีม่วง #7C6CF2 และสีเขียวน้ำทะเล #2DD4B0 ปรากฏเฉพาะในแผงฟอร์แมตทั้งสาม (และในโลโก้ของฉันถ้าใช้สีเหล่านั้น) พาดหัวใช้ซานส์เรขาคณิตหนา Manrope ExtraBold ด้วยการจัดระยะแน่นประมาณ -0.05em ป้ายเล็ก ข้อความ HUD และเว็บไซต์ใช้ซานส์สะอาด Inter SemiBold เลย์เอาต์ตามช็อต: - ช็อต 1: พาดหัวทางซ้าย ตั๋วเอียงทางขวา - ช็อต 2: ข้อความอยู่กึ่งกลางบนพื้นสีชมพู - ช็อต 3: การ์ดขั้นตอนซ้อนอยู่เหนือกระเป๋าเดินทาง จุดและตัวนับอยู่ใต้มัน พาดหัวอยู่ด้านบน - ช็อต 4: ชื่อฟอร์แมตที่ล่างซ้าย HUD ที่ซ้ายบน - ช็อต 6: ล็อกอัปปิดท้ายอยู่กึ่งกลาง โดยมีแท็กไลน์ ชิป และเว็บไซต์ซ้อนอยู่ข้างใต้ </composition> <techniques> การเผยสะอาดตา ข้อความลอยขึ้นจากเส้นฐานของตัวเองภายในกรอบตัดที่เคลื่อนไปพร้อมกัน ไม่เคยเป็นความเบลอภายในมาสก์ ขาออกเร่งความเร็วและหายไปในประมาณ 0.1 วินาที - วงกลมกวาดขยายด้วยรัศมีแบบขั้นบันไดที่คีย์ทุกสองเฟรม พร้อมวงแหวนสีชมพูอ่อนขี่อยู่นอกขอบเล็กน้อย - โค้ดบนตั๋วสลับตัวอักษรและล็อกทีละตัวอักษร - ตราประทับทุบลงจาก 2.4x พร้อมการเด้งเล็กน้อย - ตัวอักษรเข้ามาบนส่วนโค้งที่หมุน และแคปซูลไฮไลต์กวาดเข้ามาหลังคำที่เปลี่ยนสีภายในนั้น - การ์ดขั้นตอนสว่างขึ้นในสองจังหวะ: ขอบและฮาโลก่อน แล้วจึงกระเบื้องและชิป - กล้องดำดิ่งเข้าไปในกระเป๋าเดินทางที่สเกล 1.5, 3.1, 6.2 และ 7 ในหนึ่งในสี่วินาที - การกวาดสามแถบเอียงพาการเปลี่ยนฉากระหว่างแผงฟอร์แมต และแต่ละแผงค่อยๆ ซูมเข้า - แผงเดี่ยวยุบเป็นกริดการ์ดสามใบ - จุดเดินทางและเปิดออกเป็นโลโก้ ซึ่งสร้างเป็นชิ้นเดียวและไม่เคลื่อนหรือบิดเบี้ยวอีกเมื่อก่อตัวแล้ว </techniques> <music> ใช้แทร็กอิเล็กทรอนิกส์เฮาส์ต้นฉบับที่สดใสและมองโลกในแง่ดีที่ 120 BPM ความยาว 15 วินาทีพอดี กรูฟเต็มเล่นตั้งแต่เฟรมแรก โดยมีเสียงคิกทุกจังหวะที่ประมาณ x.05 และ x.55 วินาที คงที่อยู่ใต้การ์ดและฟอร์แมต กลองหายไปที่ 12.55 วินาทีเมื่อจุดกลืนกริด เหลือแพดอบอุ่นและอาร์เปจโจที่ไต่ขึ้นซึ่งจางหายภายใน 15 วินาที การตัดและจังหวะสำคัญตกอยู่บนกริดบีต </music> <sound> การออกแบบเสียงวางทับบนแทร็ก โดยไม่มีกลองเพิ่ม: - เสียงวูชเมื่อตั๋วบินเข้ามา; - เสียงติ๊กเบาๆ เมื่อโค้ดล็อก; - เสียงกระแทกนุ่มๆ ที่ตราประทับ; - เสียงวูชผ่านวงกลมกวาดแต่ละครั้งและแคปซูลไฮไลต์; - เสียงตุบเมื่อกระเป๋าเดินทางลง; - เสียงบลิปที่สูงขึ้นเรื่อยๆ เมื่อการ์ดแต่ละใบเปลี่ยนเป็นสีชมพู; - เสียงระฆังเมื่อการ์ดใบสุดท้ายลง; - เสียงไรเซอร์เข้าสู่การดำดิ่งและเสียงกระแทกเมื่อแผงแรกเปิด; - เสียงวูชในการกวาดแถบแต่ละครั้งและเมื่อการ์ดมารวมกัน; - เสียงไรเซอร์เข้าสู่ดรอป; - เสียงระฆังเมื่อโลโก้ก่อตัว; - เสียงคลิกเบาๆ ที่ชิป มิกซ์ที่ประมาณ -14 LUFS โดยมีทรูพีกต่ำกว่า -1 dBTP </sound> <references> โฆษณาเปิดตัวแอปสมัยใหม่ในสไตล์เวกเตอร์แบบแบน สร้างบนตัวอักษรเคลื่อนไหวและอุปมาเรื่องการเดินทาง: บัตรโดยสาร กระเป๋าเดินทาง และแผงขอบฟ้า ปิดท้ายด้วยล็อกอัปโลโก้ที่สะอาดอยู่กึ่งกลาง </references>

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

พรีวิวของพรอมต์ “สติงแอปแบบจอแยกสองเฟรมเรต”

สติงแอปแบบจอแยกสองเฟรมเรต

<direction> ทำสติงสินค้าแนวนอนแบบจอแยก ยาว 12 วินาที สำหรับแอปของฉัน ขนาด 1920x1080 ที่ 59.94 fps แผงสี่เหลี่ยมจัตุรัสสองแผงเล่นแอนิเมชันอินเทอร์เฟซสว่างๆ อันเดียวกันเคียงข้างกัน แผงซ้ายเดินด้วยความรู้สึกแบบ 29.97 fps ส่วนแผงขวาวิ่งด้วยเฟรมเรตเต็ม เพื่อให้เห็นความต่างของความลื่นไหล ช็อตเร็วเจ็ดช็อตลงตามบีต: เคอร์เซอร์คลิกโลโก้ของฉันในหน้าต่างแอป ไอคอนแตกออกเป็นสี่เหลี่ยมโคจร คลิกบนแถบเมนูทำให้กล่องพรอมต์กระจกดีดออกมาและมีข้อความพิมพ์ลงไป หน้าข้อความเลื่อนผ่านพร้อมการ์ด การ์ดสองใบซ้อนกันลอยขึ้น โลโก้ของฉันอยู่เดี่ยวๆ และโลโก้ตัวอักษรเรืองแสงกระแทกเข้ามาบนพื้นเกือบดำ ลุคสะอาดและสว่าง มีเงานุ่มๆ และโมชันเบลอในทุกการเคลื่อนไหว หลีกเลี่ยงการเริ่มจากภาพนิ่ง ครอสเฟด เกรน และเสียงบรรยาย </direction> <structure> 1. 0.00–2.39 วิ ส่วนหัวและการคลิก หมอกสีม่วงจางๆ เคลียร์ออกเป็นหน้าสีขาวใน 0.9 วิ และทิ้งแสงสีลาเวนเดอร์ไว้ด้านล่าง ส่วนหัวบรรทัดเดียวลอยขึ้นจากประมาณ y 930 ไป 537 ด้วยอีสเอาต์แบบเอกซ์โพเนนเชียล (ประมาณ 1.2 วิ) เบลอหนักตอนแรก มีโลโก้ของฉันในวงกลมสีลาเวนเดอร์ 132 px ชื่อ "[แบรนด์ของคุณ]" ด้วย Inter Medium สีหมึกเข้ม และแคปซูลสีหมึกเข้ม "เปิดแอป" ชื่อป๊อปขึ้นในเฟรมที่สอง เบลออยู่แล้ว แคปซูลตามมาอีกสองเฟรมต่อมา เลื่อนไปทางซ้าย 15 px ขณะที่คมชัดขึ้น ตั้งแต่ 0.45 วิ หน้าต่างแอปสีขาวรัศมีมุม 93 px ค่อยๆ ปรากฏรอบส่วนหัว (53%, 70% แล้ว 100% เมื่อถึง 0.78 วิ) ข้างในมีแถบค้นหาสีลาเวนเดอร์ "อธิบายวิดีโอ" คอลัมน์ไอคอนสีหม่น และการ์ดบนปกไล่จากหมึกเข้มไปม่วง การ์ดเขียนว่า "ไอเดียของคุณพร้อมเคลื่อนไหวแล้ว" / "พรีวิวสด · ส่งออก MP4" ในแผงซ้าย และ "แชตแทนไทม์ไลน์" ในแผงขวา ปกเขียนว่า "จากไอเดียเป็นวิดีโอในแชตเดียว" หรือ "อธิบายไอเดียของคุณ" ที่ 0.88 วิ เคอร์เซอร์ลูกศรสีดำขอบขาวปรากฏขวาบนและไหลไปทางซ้ายพร้อมชะลอลง มันหมุน -85 องศาให้หันลงขณะพุ่งดิ่ง ลงบนโลโก้ในแนวตั้งตรงและขยาย 1.55 เท่า ขณะที่วงแหวนสีชมพูนุ่มๆ สว่างขึ้นรอบวงกลม กล้องซูมเข้าถึง 1.2 รอบจุดศูนย์กลาง (ease-in-out, 0.47 วิ) และค้างหนึ่งเฟรม จากนั้นดึงกลับเป็น 1.04 ด้วยเส้นโค้งที่เร่งขึ้น ขณะที่เคอร์เซอร์กด (หดลง 15%) ตรงเข้าสู่การตัด 2. 2.39–3.35 วิ ไอคอนและวงโคจร ตัดแข็งตรงจังหวะดรอปของเพลง: โลโก้ของฉันในฐานะไอคอนแอปลงที่ 276 px และหดเหลือ 178 px (expo out, 0.47 วิ) สี่เหลี่ยมมุมมนสี่อัน มีโมชันเบลอและนำหน้าอยู่ 32 องศา เข้าที่เป็นรูปกากบาทรอบมันที่รัศมี 222 px (expo out, 0.9 วิ) ด้านซ้ายเป็นสีม่วง เขียวเทอร์ควอยซ์ ชมพู และเหลือง ด้านขวาเป็นชมพู ส้ม เขียวเทอร์ควอยซ์ และขาว วงกลมสีลาเวนเดอร์สองโทนโตขึ้นด้านหลังไอคอนใน 0.2 วิ ตั้งแต่ 3.12 วิ สี่เหลี่ยมพับไปทางแถวด้านขวาและหดลง และไอคอนหดเหลือประมาณ 70 px ภายใต้แรมป์เบลอ 3. 3.35–5.29 วิ แถบเมนูและพรอมต์ ตัดไปที่มุมขวาบนของหน้าจอคอมพิวเตอร์ใต้หน้าสีขาว เห็นขอบเกือบดำ 46 px และแถบเมนูโปร่งแสงสีเข้มพร้อมไอคอน wifi แบตเตอรี่ และตัวควบคุม โลโก้ของฉัน จุดเน้นสามจุด "[แบรนด์ของคุณ]" และ "เปิดแอป" วอลเปเปอร์ไล่จากหมึกเข้มไปม่วง มีริ้วแสงเฉียงทางซ้าย แสงเรืองสีชมพู เส้นตารางบางๆ และประกายทางขวา เคอร์เซอร์ลอยขึ้นไปที่โลโก้และคลิก (สเกลเป็น 0.82 นาน 0.1 วิ) กล่องพรอมต์กระจกฝ้าดีดออกจากไอคอน: 740 x 226 px รัศมี 56 px สีลาเวนเดอร์โปร่งแสงพร้อมเส้นขอบขาวบางๆ มันสเกลจาก 0.18 เป็น 1 พร้อมโอเวอร์ชูตใน 0.19 วิ ความเบลอลดจาก 9 px เป็น 0 ขณะที่กล้องแพนไปทางขวา 115 px มันพิมพ์ด้วยความเร็ว 27 ตัวอักษรต่อวินาทีหลังแคเรตสีขาว: "แก้ไขด้วยคำพูด ไม่ต้องใช้คีย์เฟรม" ทางซ้าย "ใหญ่ขึ้น ช้าลง สีอื่น" ทางขวา ปุ่มส่งกลมสีชมพูและสัญลักษณ์เล็กๆ สามอันอยู่แถวล่าง ช็อตลอยขึ้นและออกไปด้วยแรมป์เบลอแนวตั้ง ขณะที่ม่านสีลาเวนเดอร์ขึ้นถึง 75% 4. 5.29–7.16 วิ หน้าคำตอบและการ์ด จากแฟลชสีลาเวนเดอร์ หน้าข้อความสีเทาม่วงด้วย Inter 42–45 px เลื่อนขึ้นจากต่ำกว่า 291 px มันเคลื่อนที่ด้วยเส้นโค้งเอกซ์โพเนนเชียล (ค่าคงที่เวลา 0.2 วิ) พร้อมเบลอแนวตั้งที่ผูกกับความเร็ว วลีหนึ่งด้วย SemiBold สีหมึกเข้มอยู่ใต้เคอร์เซอร์ตั้งตรงอันเล็ก: "นักออกแบบโมชัน AI" ทางซ้าย "“ช้าลง”, “สีอื่น”" ทางขวา บรรทัดตัวอย่าง: "จากไอเดียเป็นวิดีโอในแชตเดียว", "01 เลือกเทมเพลต", "02 อธิบายไอเดียของคุณ", "03 ปรับแต่งด้วยคำพูด แล้วส่งออก", "บอกแชตว่าจะให้แสดงอะไร เอเจนต์สร้างแอนิเมชันให้", "ไคเนติกไทป์ รูปทรง เอฟเฟกต์ 3D และเสียง" ที่ 6.22 วิ การ์ดป๊อปขึ้นใกล้ด้านล่าง เบลอ มันลอยขึ้นด้วยอีสเอาต์เร็วบนการลอยขึ้นคงที่ 158 px/วิ ขณะที่หน้าหรี่ลงเหลือ 45% และเบลอ 3 px ทางซ้ายการ์ดแสดงสามเหลี่ยมนามธรรมสีหมึกเข้ม ม่วง ส้ม และเหลือง พร้อมคำบรรยาย "ไอเดียในความเคลื่อนไหว" / "[เว็บไซต์ของคุณ]" ทางขวาแสดงปกไล่จากหมึกเข้มไปม่วงพร้อมการ์ดสีขาว "อธิบายไอเดียของคุณ" พร้อมคำบรรยาย "แชตแทนไทม์ไลน์" / "พรีวิวสด · ส่งออก MP4" ตั้งแต่ 6.9 วิ มันเร่งขึ้น หดเหลือ 0.9 และเบลอหายไป 5. 7.16–8.16 วิ การ์ดซ้อนกัน การละลายแบบเบลอสามเฟรมนำการ์ดสองใบที่ซ้อนกัน (534 x 343 px รัศมี 51 px) เข้ามา พวกมันมาถึงต่ำลง 165 px ใหญ่ขึ้น 15% และเบลอ เข้าที่ใน 0.3 วิ และลอยขึ้นต่อ แล้วออกไปด้วยการเคลื่อนที่ที่เร่งขึ้นและแรมป์เบลอ แต่ละใบมีชื่อเรื่องสีขาวขนาดยักษ์ที่ความทึบ 60% ถูกขอบล่างตัดไว้ ทางซ้ายชื่อเรื่องคือ "ฟอนต์" และ "เพลง" บนกราฟิกสามเหลี่ยมพร้อมแคปซูล "เปิดแอป" ทางขวาคือ "รูปทรง" และ "เสียง" บนปกไล่จากหมึกเข้มไปม่วงพร้อมแคปซูล "02" และ "03" และการ์ดด้านในสีขาว "ไคเนติกไทป์ รูปทรง" และ "เพลงและเสียงเอฟเฟกต์" การ์ดใบที่สองมีแสงเรืองสีชมพูส้ม 6. 8.16–10.03 วิ โลโก้อยู่เดี่ยวๆ ตัดแบบเบลอไปที่โลโก้ของฉันในวงกลมสีลาเวนเดอร์ 167 px บนพื้นขาว มันลอยขึ้น 115 px เข้าที่ด้วยเส้นโค้งเอกซ์โพเนนเชียล (0.17 วิ) ค้างอยู่ แล้วหดเข้าสู่การตัด 7. 10.03–12.00 วิ การ์ดปิดท้าย ตัดแข็งไปที่พื้นเกือบดำที่มีแสงเรืองรัศมีสีหมึกเข้ม โลโก้ตัวอักษรสีขาวที่มีแสงเรืองนุ่มสองชั้นกระแทกเข้ามาจาก 3.85x: "[แบรนด์ของคุณ]" ทางซ้าย "[เว็บไซต์ของคุณ]" ทางขวา เบลอแนวนอนของมันหายไปใน 0.1 วิ มันลงตัวที่ 1x ในราวหนึ่งวินาทีด้วยเส้นโค้งที่ช้าลงเรื่อยๆ แล้วถอยออกช้าๆ และเร่งไปที่ 0.72x ในเฟรมสุดท้าย </structure> <composition> พื้นหลังเป็นสีเกือบดำ #0D0B1E แผงสี่เหลี่ยมจัตุรัสสองแผง แผงละ 930 x 930 px วางเคียงกันที่ y 100 (ซ้ายที่ x 20 ขวาที่ x 970) เหนือแต่ละแผงมีป้ายเล็กๆ ด้วย Inter SemiBold 28 px สีลาเวนเดอร์อ่อน #E9E4F2: "พรีวิวสด" เหนือแผงซ้าย และ "[แบรนด์ของคุณ] · ส่งออก MP4" เหนือแผงขวา ทั้งสองแผงเล่นเจ็ดช็อตเดียวกันพร้อมกัน ด้วยจังหวะและการเคลื่อนไหวเดียวกัน แผงซ้ายแสดงภาพใหม่ทุกสองเฟรม และแผงขวาทุกเฟรม ต่างกันเพียงบางคำระหว่างสองแผง ตามที่ระบุไว้ในช็อต ภายในแผง จัดทุกอย่างบนเวที 1080 x 1080 ที่ปรับสเกลให้พอดี จานสี: หน้าสว่าง #FAF9FF; ลาเวนเดอร์ #F0EDFF สำหรับแผงนุ่มและแสงเรือง; เส้น #E9E4F2; เทาม่วงหม่น #6B6385 สำหรับข้อความรอง; หมึกเข้ม #1C0B5D สำหรับข้อความเข้มและพื้นผิวเข้ม; เกือบดำ #0D0B1E สีเน้นคือชมพู #FB2D89 (หลัก) และส้ม #FE9117 พร้อมม่วง #7C6CF2 เขียวเทอร์ควอยซ์ #2DD4B0 และเหลือง #FFD23F เมื่อต้องการสี่สี ใช้ Inter 400/500/600/700 ตลอด โลโก้ของฉันคือไอคอนแอปในทุกที่ที่มีโลโก้ปรากฏ ไอคอนสี่เหลี่ยมมุมมนเหมาะกับเลย์เอาต์ที่สุด เช่น สี่เหลี่ยมสีหมึกเข้มที่มีวงวนสีชมพู ส้ม ขาว และสามเหลี่ยมเพลย์สีชมพู </composition> <techniques> ไม่มีอะไรเริ่มจากเฟรมนิ่ง ทุกองค์ประกอบเข้ามาโดยเคลื่อนไหวอยู่แล้วด้วยอีสเอาต์แบบเอกซ์โพเนนเชียล และออกไปด้วยการเคลื่อนที่ที่เร่งขึ้นหรือแรมป์เบลอ โมชันเบลอตามความเร็วและทิศทางของทุกการเคลื่อนไหว ไม่มีครอสเฟด: ช็อตเปลี่ยนด้วยการตัดแข็ง การตัดแบบเบลอ และการละลายแบบเบลอสั้นๆ ทั้งหมดตามบีต กล้องซูมเข้าถึง 1.2 (ease-in-out, 0.47 วิ) ค้างหนึ่งเฟรมและดึงกลับเป็น 1.04 ด้วยเส้นโค้งที่เร่งขึ้นในช็อต 1 และแพนไปทางขวา 115 px ในช็อต 3 เคอร์เซอร์เป็นลูกศรสีดำขอบขาว การคลิกทำให้มันหดลง (15% หรือเป็น 0.82 นาน 0.1 วิ) การพิมพ์ทำที่ 27 ตัวอักษรต่อวินาทีหลังแคเรตสีขาว ป๊อปอินมีโอเวอร์ชูต ทางออกขึ้นด้านบนใช้แรมป์เบลอแนวตั้ง และการกระแทกเข้าของการ์ดปิดท้ายใช้เบลอแนวนอน </techniques> <music> ทำเพลงพื้นหลังฟังกี้เฮาส์ร่าเริงที่ 124 BPM ยาว 12 วินาทีพอดี เริ่มด้วยอินโทรที่ผ่านฟิลเตอร์ใต้ช็อตแรก กรูฟเต็ม (เตะสี่จังหวะ แคลป เบสสแลป คอร์ดดีดๆ) ดรอปตรงการตัดไปที่ไอคอนที่ 2.39 วิ เบรกดาวน์ที่ผ่านฟิลเตอร์เล่นใต้โลโก้เดี่ยวๆ และเสียงก้องรีเวิร์บจางหายตามหลังการกระแทกของการ์ดปิดท้าย ทุกการตัดลงบนบีต มิกซ์ให้ประมาณ -14 LUFS โดยมี true peak ต่ำกว่า -1 dBTP </music> <sound> เพิ่มเสียงเอฟเฟกต์เหล่านี้ทับบนเพลง: - ไรเซอร์ขึ้นสู่ดรอปและบูมตรงดรอป - เสียงคลิกเบาๆ เมื่อเคอร์เซอร์กดโลโก้ และอีกครั้งที่ไอคอนบนแถบเมนู - เสียงป๊อปเมื่อกล่องพรอมต์ดีดออกมา - เสียงติ๊กพิมพ์เบาๆ - วูชตอนพับเข้าแถบเมนูและตอนสะบัดไปที่หน้าข้อความ - สวิชเมื่อการ์ดลอยขึ้นและเมื่อการ์ดที่ซ้อนกันละลายเข้ามา - เสียงกระแทกเบาๆ ที่โลโก้เดี่ยว - บูมพร้อมโทนเสียงที่ตกลงที่การ์ดปิดท้าย ไม่มีเสียงพูด </sound> <references> สติงเปิดตัวแอปที่ขัดเกลาสไตล์โมชันยูไอผลิตภัณฑ์ยุคใหม่: ม็อกอัปอินเทอร์เฟซสว่างๆ การเคลื่อนกล้องแบบไคเนติก โมชันเบลอแนวทิศทางหนักๆ และการตัดที่ตรงกับบีต จัดวางเป็นการเปรียบเทียบเฟรมเรต </references>

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

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