Giờ shorts-kit làm được cả video quảng cáo sản phẩm, bên cạnh shorts có thuyết minh. Cả hai dùng chung engine nhưng mỗi loại có quy trình riêng, và có thêm thư viện shot cùng thư viện component cho cả hai cùng dùng.

Promo (quảng cáo)

• sk-promo và docs/promo/: làm quảng cáo, TVC và video ra mắt sản phẩm, khổ dọc (feed) hoặc ngang (16:9), có hoặc không có vài câu thoại.
• Có các bước duyệt trước khi dựng: mục tiêu, lời kêu gọi (CTA), các yếu tố bắt buộc và nơi đăng. Video mở đầu bằng nỗi đau của người dùng. Sau đó chọn 2-3 hướng ý tưởng, duyệt treatment, làm animatic có canh giờ, storyboard từng shot và bảng các phiên bản cần xuất.
• Sau khi dựng: cho một người chưa xem video xem thử để kiểm tra họ có hiểu không, rồi soát lại phần thẩm mỹ (docs/promo/aesthetics.md).
• bun run beats: đo nhịp (beat) của bản nhạc, các cảnh được canh theo beat.
• bun run voice: tạo vài câu thoại cho promo, kèm thời điểm của từng chữ để chữ trên màn hình hiện đúng lúc được nói. Một câu thoại có thể chỉ thuộc về một bản cắt ngắn (only).
• Mỗi bản cắt ngắn và mỗi khổ hình là một composition riêng, có đồng hồ riêng.
• bun run lint kiểm tra đồng hồ và file của promo. bun run encode kiểm tra true peak của file upload.

Shot và âm thanh

• docs/shots/: 161 thẻ chuyển động trong 10 nhóm: camera, chữ, UI xuất hiện, nhịp, chuyển cảnh, hiệu ứng, kết, tương tác, dữ liệu, mở đầu. Có thêm thẻ âm thanh cho bộ SFX (docs/shots/sfx/).
• Mỗi shot trong storyboard có size, angle và card. Promo không có thoại thì shot được gắn theo cảnh và beat.
• src/demo/: code mẫu mà các thẻ dẫn tới. Phần này được giữ lại để tham khảo, không build.
• Thẻ mới: isometric-pile, typed-prefix-states.
• Các demo dùng tên và logo của kit (ShortKitMark, ShortKitWordmark, ShortKitIcon trong src/shared/fixtures/Brand.tsx). Toàn bộ chữ trong demo đều là tiếng Anh, kể cả texture trang trong public/textures/live/.

Component thật

• Knowns UI là bộ giao diện mặc định cho mọi video (docs/promo/real-ui.md).
• “Repo của chính sản phẩm”: chép component của sản phẩm vào thư mục video, shim framework, build stylesheet riêng bằng bun run css <id> --dir <folder>, và lưu dữ liệu thật cùng hình ảnh ở local.

• bun run capture:

  • --type "css=text" gõ chữ vào trang, nên ô tìm kiếm của trang chạy thật.
  • --hide "css" ẩn các lớp phủ như banner cookie mà không bấm đồng ý.

3D

• src/shared/three/: shot, rig camera, trình tải model .glb, và chú thích bám theo một điểm trên vật thể.
• bun run model <name>: dựng model procedural bằng Blender chạy nền, không cần mở giao diện (scripts/blender/).
• src/shared/motion/iso.tsx: mặt phẳng isometric bằng CSS-3D, khối có độ dày, chồng thẻ, và cú xoay từ isometric về chính diện.

Preview

• Dashboard local được làm lại bằng Knowns UI:

  • Tab Brief và Timeline.
  • Xem được promo, kể cả khổ ngang và từng phiên bản xuất.
  • Thẻ storyboard có size, angle và card.
  • Phát thử video.
  • --lan để xem trên điện thoại cùng mạng Wi-Fi.

Dùng chung

• Thêm các component dùng chung, chia theo vai trò:

  • captions: InfoStrip, DigitRoll
  • frames: ClipCard
  • effects: FlashCut
  • motion: PageCam, VerticalTicker, velocity, handheld
  • fixtures