Vdomindset

/vdomindset — คลิป mindset เทียบสองชีวิต เรนเดอร์จากโค้ด

ฟอร์แมตนี้ไม่ได้มาจากรสนิยม แต่มาจากการวัดเพจ Mindset Therapy ทั้ง 623 รีล (เก็บ 2026-08-12) แล้วโหลดมาวัดจริง 64 คลิป — ท็อป 50 + กลุ่มกลาง 14 ตัวเป็นกลุ่มควบคุม

ทั้งสองกลุ่มเป็น motion graphic ไม่มีคัตเหมือนกันหมด → ตัวแปรคือความยาวกับความคมของไอเดีย ไม่ใช่คุณภาพงานภาพ อย่าทำยาวเกิน 10 วินาที

กติกาของฟอร์แมต (อย่าหลุด)

• ซ้าย–ขวา บนเส้นพื้นเดียวกัน เป็นค่าตั้งต้น — คลิป 12 ล้านกับ 11 ล้านของเพจอ้างอิงใช้แบบนี้ ทั้งคู่ ส่วนคลิปบน–ล่างที่เคยถอดมาได้ 2.1 แสน ใช้บน–ล่างเฉพาะเมื่ออุปมาเป็น "เส้นทาง" (เนิน ราง ไทม์ไลน์) เพราะเส้นทางอ่านได้ทางเดียวคือซ้ายไปขวา
• อุปมาเดียว ทำให้เห็น ไม่ใช่พูด — ไม่มีคลิปท็อปตัวไหนบอกว่า "ความสม่ำเสมอสำคัญ" มันให้ดูกองบล็อกที่สูงขึ้นข้างกองที่ยังเตี้ย
• ป้ายคำ 2–4 คำ วางใต้ตัวละครแต่ละฝั่ง ไม่ใช่ประโยคกลางจอ · คำเป้าหมายลอยบนสุดคำเดียว
• props สีเหล็กเทาทั้งสองฝั่ง มีแต่ "คน" กับ "AI" ที่มีสี → สายตาอ่านว่าต่างกันที่ ใครทำงาน
• ไม่มี CTA ยกเว้นตัวปิดซีรีส์ (คลิปท็อปของเพจอ้างอิงไม่มี CTA เลยสักตัว)
• ไม่มี fade เข้า–ออก เพราะต้องวนลูป — fade ทิ้งรอยดำตรงรอยต่อ
• ห้ามใส่อีโมจิ และห้ามใช้โลโก้/แฮนเดิลของเพจต้นฉบับ

เริ่มงาน

cp -r <SKILL_DIR>/template $WORK/<ชื่องาน>
cd $WORK/<ชื่องาน>
mkdir -p public/fonts public/brand
cp "$GOOGLE_FONTS/fonts/ofl/sarabun/Sarabun-Regular.ttf"  public/fonts/
cp "$GOOGLE_FONTS/fonts/ofl/sarabun/Sarabun-SemiBold.ttf" public/fonts/
# โลโก้แบรนด์ ถ้าเป็น PNG พื้นดำ คีย์เป็น alpha ก่อน
ffmpeg -y -i logo.png -vf "colorkey=0x000000:0.18:0.0" public/brand/logo.png
npm install
npm run studio                  # พรีวิวสด เลือกคลิปจากรายการซ้าย
node tools/render-all.mjs       # เรนเดอร์ + ใส่เพลงครบทุกคลิป

template มี 8 คลิปที่ทำเสร็จแล้ว เป็นตัวอย่างครบทุกทรง — ลบที่ไม่ใช้แล้วเขียนของตัวเองต่อ

ล็อกจังหวะภาพเข้ากับเพลง

python <SKILL_DIR>/references/downbeat.py "$MEDIA/bgm/<เพลง>.mp3"
# -> bpm / bar / downbeat ตัวแรกหลังอินโทร

เอา BPM ใส่ src/theme.ts แล้วทุกความยาวคลิปมาจาก BAR_F(bars) · เอา downbeat ใส่ tools/render-all.mjs ห้ามเขียนเลขเฟรมดิบที่ไหนเลย

การวนลูป — ข้อจำกัดที่คุมการออกแบบทั้งหมด

ทุกการเคลื่อนไหวต้องเป็นฟังก์ชันคาบของ u (0..1 ตลอดคลิป): saw(u, n) / wave(u, n) โดย n เป็นจำนวนเต็ม

สิ่งที่ "ค่อย ๆ เพิ่มแล้วต้องรีเซ็ต" ห้ามทำเป็นการไต่ระดับ (ระดับน้ำ ทรายในนาฬิกา ระยะทาง กองของที่สูงขึ้น) ให้เปลี่ยนเป็น สภาวะคงที่ที่ต่างกันสองฝั่ง แทน — ถังซ้ายรั่วตลอด/ถังขวาเต็มล้นตลอด หรือทำเป็น คลื่นที่วิ่ง เช่นโดมิโน (มุมของแต่ละตัว = ฟังก์ชันของ ((p - i/n) mod 1)) ซึ่งวนได้จริง

ถ้าเลี่ยงไม่ได้จริง ๆ ให้ fade หัว-ท้ายพร้อมกันทั้งเลน (คลิป Hill ใช้วิธีนี้)

rig สตอกฟิกเกอร์

ตัวละคร = แคปซูล 6 เส้น (stroke-linecap: round) + หัวกลม สูง 226 หน่วย ระบบมุม: 0° = ชี้ลง, + = หมุนไปทางที่ตัวละครหัน · มุมลูก (เข่า/ศอก) สัมพัทธ์กับชิ้นแม่ · เข่าติดลบเสมอ

คลังท่าใน poses.ts: standing pointing celebrate scooping placing walking carrying pushing sitting rowing flying

ท่าที่อ่านออกชัด: ยืน · เดิน · วิ่ง · นั่ง · นอน · ชี้ · ยกแขน · ก้มตัก · เข็น ท่าที่ทำไม่ได้ อย่าเสียเวลา: มือไพล่หลังหัว · กอดอก · เท้าพาดโต๊ะ — ออกมาเป็นก้อนหมด

กับดัก (เจอมาแล้วทุกข้อ)

• ตัวละครหายเหลือ "ไส้กรอกสองท่อน" — <FigureDefs/> / <PropDefs/> ต้องอยู่ใน <svg> ทุกตัว ที่วาดตัวละครหรือ prop · gradient เป็น paint server ที่ resolve ทั้งเอกสาร จึงรอดได้จนกว่า element ที่ถือมันจะ unmount แล้วทุกอย่างที่ทาด้วย url(#…) หายเงียบ เหลือแต่ชิ้นที่ใช้สีทึบ
• ท่าคอลลิเนียร์กลายเป็นแท่งเดียว — ท่าบินต้องกางขาเป็น V งอเข่าข้างหนึ่ง หมุนราว 40° ไม่ใช่ 70°+
• ครอสเฟดตัวละครสองก๊อปปี้เพื่อซ่อนรอยต่อ = เห็นเป็นคนสองคน สู้ปล่อยให้มีจังหวะว่างสั้น ๆ ดีกว่า
• delayRender ของฟอนต์ต้องตั้ง timeoutInMilliseconds: 120000 + --concurrency=2 (default 28 วิ ไม่พอตอนเรนเดอร์เต็มเพราะเปิดหลายแท็บ · still ผ่านแต่ full render ล้ม)
• ห้าม Math.random() ใน prop ใช้ jitter จาก index เช่น ((i*37) % 11) - 5
• บน Windows อย่า spawn npx — bare npx = ENOENT, npx.cmd = EINVAL (Node บล็อก .cmd หลัง CVE-2024-27980) · ให้เรียก node node_modules/@remotion/cli/remotion-cli.js ตรง ๆ
• แสงเรืองหลังตัวละครกลืนตัวละคร → alpha ~0.2 และเยื้องออกจากตัว
• พื้นหลัง radial gradient แรงเกินเห็นเป็นวงรีชัด → stops ห่าง ๆ alpha ต่ำ

วิธีทำงาน (สำคัญกว่าโค้ด)

อย่าเดาว่าท่าออกมาสวย — เรนเดอร์ still แล้วดูภาพจริงทุกครั้ง

node node_modules/@remotion/cli/remotion-cli.js still src/index.ts <Clip> out/s.png --frame=60
ffmpeg -y -i out/a.png -i out/b.png -filter_complex "[0][1]hstack" -frames:v 1 out/check.png

ครอปเฉพาะโซนที่สงสัย (crop=1080:820:0:520) จะเห็นปัญหาชัดกว่าดูทั้งเฟรม · ปกติ 2–3 รอบต่อท่า

กลยุทธ์ปล่อย

เพจอ้างอิงปล่อย 623 คลิป มี 50 ตัวกินวิวไป 83% — เจ้าของเพจเองก็เดาไม่ถูกว่าตัวไหนจะปัง ต้นทุนต่อคลิปของเราต่ำมาก (เรนเดอร์ 1–2 นาที) จึงควร ยิงเยอะแล้วคัดตัวชนะ ไม่ใช่ขัดตัวเดียวให้เพอร์เฟกต์

งานที่ทำเสร็จแล้ว

• $WORK/kosin-series — ซีรีส์ 8 คลิป AI mindset (ตัวที่ template ก๊อปมา)
• $WORK/kosin-reel — 22 วิ บน–ล่าง ภาษาไทย จบด้วยโกสินทร์บิน (ยาวเกินฟอร์แมต ใช้เป็นตัวปักหมุด)
• $WORK/discipline-reel — 11 วิ ภาษาอังกฤษ ต้นแบบที่ถอดมาจากรีลจริง