ข้ามไปยังเนื้อหา
Tayakorn
HyperFrames Handbook

HyperFrames Handbook

LEVEL 1 · พื้นฐานที่ใช้ทุกวัน

สี่คำสั่งที่คือ 90% ของชีวิตจริง

วงจรทำงานจริงวนอยู่กับสี่คำสั่ง: check → snapshot → preview → render (มี lint เป็นตัวเช็กเร็วระหว่างพิมพ์ — check รันมันซ้ำให้อยู่แล้ว ไม่ต้องเรียกเบิ้ล) เข้าใจวิธีอ่านรายงานของพวกมัน = ทำงานได้ทั้งวัน ทั้งตอนเขียนเองและตอนตรวจงานที่ AI เขียน

6.1 check — ด่านเดียวที่รันครบห้าหมวด

$ npx hyperframes check
Lint      ◇ 0 errors, 0 warnings
Runtime   ◇ 0 errors, 0 warnings
Layout    ◇ 0 issues across 9 sample(s)
Motion    ◇ 0 errors, 0 warnings
Contrast  ◇ 32/32 text checks pass WCAG AA
◇  Check passed

มันบูตเบราว์เซอร์หนึ่งรอบ แล้วกวาด seek ตามตาราง (ค่าเริ่มต้น 9 จุด) รันครบ: โค้ด error / เลย์เอาต์ (ตัวหนังสือล้นกรอบ ทับกัน) / เจตนา motion (บทที่ 5) / คอนทราสต์ WCAG ทุก finding มาพร้อม selector + เวลา + ข้อเสนอแก้ — อ่านจบแก้ได้เลยโดยไม่ต้องเปิดรูป

ความฉลาดที่ควรรู้: ความรุนแรงขึ้นกับความคงอยู่ ปัญหาที่เห็นแค่จุด seek เดียว (เช่นจังหวะกำลังเฟดเข้า) ถูกลดเป็น info ไม่กั้นทาง ที่ค้างหลายจุดถึงนับเป็น error และถ้าทั้งเรื่องไม่มีอะไรขยับเลย มันปฏิเสธทั้งวิดีโอ (sweep_static) — เฟรมนิ่งทำให้คำตัดสิน "ผ่าน" ทุกข้อเชื่อไม่ได้ เส้นใต้ที่ลากยาวทั้งเรื่องในการ์ดของเราเกิดมาเพื่อข้อนี้

6.2 snapshot — ตาเปล่าเห็น f(t)

npx hyperframes snapshot ถ่าย 5 เฟรมหลัก หรือ --at 2.5,7 เลือกเวลาเอง ได้ contact sheet ให้กวาดตาด้วย ใช้บ่อยที่สุดตอนไล่บั๊กเลย์เอาต์ที่เครื่องมองไม่เห็น (บทที่ 3–4 มีตัวอย่างจริงทั้งคู่)

6.3 preview — Studio สำหรับตามนุษย์

$ npx hyperframes preview --background
Studio    http://localhost:3002/?view=storyboard#project/handbook-lab

เปิด Studio ในเบราว์เซอร์: ลาก playhead ดู timeline จริง แก้ไฟล์แล้ว reload ให้อัตโนมัติ นี่คือหน้าจอที่คุณใช้รีวิวก่อนอนุมัติเรนเดอร์ — และเป็นจุดส่งงานให้คนอื่นดูด้วย

6.4 render — จ่ายเงินเมื่อพร้อม

npx hyperframes render --quality draft ไว้วนงานเร็ว (การ์ด 10 วิ ใช้ 30–60 วินาทีบนเครื่องที่เขียนเล่มนี้) ส่งจริงค่อย --quality high เสร็จแล้วเช็กไฟล์จริงเสมอ: มีอยู่ ไม่ว่าง ความยาวถูก (ffprobe หนึ่งบรรทัดจบ)

อ่านแบบเต็มเล่ม