Hướng dẫn đầy đủ về hệ thống template Rendervid. Học cách tạo template video JSON, sử dụng biến động với cú pháp {{variable}}, cấu hình hơn 40 preset hoạt ảnh, 17 chuyển cảnh và hơn 30 hàm easing.
Rendervid là một công cụ render video lập trình được xây dựng dựa trên hệ thống template khai báo, dựa trên JSON. Thay vì chỉnh sửa video thủ công trên timeline, bạn định nghĩa mọi khía cạnh của video – scene, layer, hoạt ảnh, chuyển cảnh và cài đặt đầu ra – trong một tài liệu JSON duy nhất. Cách tiếp cận này làm cho template không có trạng thái, có thể kiểm soát phiên bản và có thể được tạo bởi máy, mở ra cánh cửa cho sản xuất video dựa trên AI, pipeline render hàng loạt và quy trình làm việc nội dung hoàn toàn tự động.
Hướng dẫn này bao gồm hệ thống template Rendervid hoàn chỉnh từ đầu đến cuối: cấu hình cấp root, cài đặt đầu ra, hệ thống biến và đầu vào, scene và composition, tất cả tám loại layer, hơn 40 preset hoạt ảnh, hơn 30 hàm easing, 17 chuyển cảnh, hiệu ứng hình ảnh, cấu hình font và định dạng đầu ra.
Mỗi template Rendervid là một đối tượng JSON với một tập hợp các trường cấp root được định nghĩa rõ ràng. Đây là khung của một template hoàn chỉnh:
{
"name": "my-template",
"output": { ... },
"inputs": [ ... ],
"composition": {
"scenes": [ ... ]
},
"fonts": { ... },
"customComponents": { ... },
"defaults": { ... }
}
| Trường | Kiểu | Bắt buộc | Mô tả |
|---|---|---|---|
name | string | Có | Định danh template dễ đọc |
output | object | Có | Cấu hình đầu ra video hoặc hình ảnh (kích thước, fps, thời lượng, định dạng) |
inputs | array | Không | Định nghĩa đầu vào động cho các biến template |
composition | object | Có | Chứa mảng scenes định nghĩa tất cả nội dung hình ảnh |
fonts | object | Không | Khai báo Google Font và font tùy chỉnh |
customComponents | object | Không | Các component layer tùy chỉnh đã đăng ký |
defaults | object | Không | Giá trị mặc định áp dụng cho tất cả layer trừ khi bị ghi đè |
Trường name dùng cho mục đích tổ chức – nó không ảnh hưởng đến việc render. Các trường output và composition là hai trụ cột mà mọi template phải có. Tất cả những thứ khác là tùy chọn nhưng mở khóa các khả năng mạnh mẽ.
Đối tượng output kiểm soát tệp được render cuối cùng: định dạng, kích thước, tốc độ khung hình, thời lượng và màu nền của nó.
{
"output": {
"type": "video",
"width": 1920,
"height": 1080,
"fps": 30,
"duration": 10,
"backgroundColor": "#000000"
}
}
| Trường | Kiểu | Mặc định | Mô tả |
|---|---|---|---|
type | string | "video" | Loại đầu ra: "video" hoặc "image" |
width | number | 1920 | Chiều rộng tính bằng pixel (lên đến 7680 cho 8K) |
height | number | 1080 | Chiều cao tính bằng pixel (lên đến 4320 cho 8K) |
fps | number | 30 | Số khung hình trên giây (1-120) |
duration | number | – | Tổng thời lượng tính bằng giây |
backgroundColor | string | "#000000" | Màu nền dưới dạng hex, RGB hoặc tên màu |
Đây là cấu hình đầu ra cho các định dạng phổ biến:
1080p Full HD (YouTube, mục đích chung):
{
"type": "video",
"width": 1920,
"height": 1080,
"fps": 30,
"duration": 60,
"backgroundColor": "#000000"
}
Instagram Reels / TikTok (9:16 dọc):
{
"type": "video",
"width": 1080,
"height": 1920,
"fps": 30,
"duration": 30,
"backgroundColor": "#FFFFFF"
}
4K UHD:
{
"type": "video",
"width": 3840,
"height": 2160,
"fps": 60,
"duration": 120,
"backgroundColor": "#000000"
}
Hình ảnh Open Graph / Chia sẻ Mạng xã hội:
{
"type": "image",
"width": 1200,
"height": 630,
"backgroundColor": "#1a1a2e"
}
Đối với đầu ra hình ảnh, fps và duration bị bỏ qua – renderer chụp một khung hình duy nhất.
Hệ thống đầu vào và biến là thứ làm cho template Rendervid có thể tái sử dụng. Thay vì mã hóa cứng văn bản, màu sắc hoặc URL vào template của bạn, bạn định nghĩa inputs và tham chiếu chúng bằng cú pháp {{variableName}} ở bất kỳ đâu trong template.
Inputs được khai báo trong mảng inputs cấp cao nhất. Mỗi đối tượng input mô tả một biến duy nhất:
{
"inputs": [
{
"key": "title",
"type": "string",
"label": "Title",
"description": "Main title text displayed in the intro scene",
"required": true,
"default": "Hello World"
},
{
"key": "brandColor",
"type": "color",
"label": "Brand Color",
"description": "Primary brand color used for backgrounds and accents",
"required": false,
"default": "#FF5733"
},
{
"key": "showSubtitle",
"type": "boolean",
"label": "Show Subtitle",
"description": "Toggle subtitle visibility",
"required": false,
"default": true
}
]
}
| Trường | Kiểu | Bắt buộc | Mô tả |
|---|---|---|---|
key | string | Có | Định danh duy nhất được sử dụng trong tham chiếu {{key}} |
type | string | Có | Kiểu dữ liệu: string, number, boolean, color, url, array |
label | string | Không | Nhãn dễ đọc cho việc render UI |
description | string | Không | Giải thích về những gì input này kiểm soát |
required | boolean | Không | Input có phải được cung cấp khi render hay không |
default | any | Không | Giá trị dự phòng nếu không có input được cung cấp |
string – Văn bản tự do. Sử dụng cho tiêu đề, mô tả, chú thích hoặc bất kỳ nội dung văn bản nào.number – Giá trị số. Sử dụng cho thời lượng, kích thước, vị trí, mức độ mờ đục hoặc số lượng.boolean – Chuyển đổi đúng/sai. Sử dụng cho khả năng hiển thị có điều kiện, cờ tính năng hoặc công tắc bật/tắt.color – Giá trị màu ở dạng hex (#FF5733), RGB (rgb(255,87,51)) hoặc định dạng tên. Sử dụng cho nền, màu văn bản và màu nhấn.url – Chuỗi URL hợp lệ. Sử dụng cho nguồn hình ảnh, nguồn video, liên kết và URL font.array – Danh sách các giá trị. Sử dụng cho thư viện hình ảnh, danh sách văn bản, nội dung slide hoặc bất kỳ dữ liệu lặp lại nào.Sau khi inputs được định nghĩa, tham chiếu chúng ở bất kỳ đâu trong template bằng dấu ngoặc nhọn kép:
{
"type": "text",
"text": "{{title}}",
"style": {
"color": "{{brandColor}}",
"fontSize": "{{titleSize}}"
}
}
Các biến được giải quyết khi render. Khi bạn gọi API hoặc CLI Rendervid, bạn truyền các giá trị thực tế:
{
"title": "Summer Sale 2026",
"brandColor": "#E63946",
"titleSize": 72
}
Đây là một template hoàn chỉnh với nhiều loại input hoạt động cùng nhau:
{
"name": "product-promo",
"output": {
"type": "video",
"width": 1080,
"height": 1080,
"fps": 30,
"duration": 15
},
"inputs": [
{
"key": "productName",
"type": "string",
"label": "Product Name",
"description": "Name of the product being promoted",
"required": true,
"default": "Product"
},
{
"key": "price",
"type": "number",
"label": "Price",
"description": "Product price displayed in the video",
"required": true,
"default": 29.99
},
{
"key": "productImage",
"type": "url",
"label": "Product Image URL",
"description": "URL to the product image",
"required": true
},
{
"key": "accentColor",
"type": "color",
"label": "Accent Color",
"description": "Color used for CTA buttons and highlights",
"required": false,
"default": "#FF6B35"
},
{
"key": "showBadge",
"type": "boolean",
"label": "Show Sale Badge",
"description": "Whether to display the sale badge overlay",
"required": false,
"default": false
},
{
"key": "features",
"type": "array",
"label": "Product Features",
"description": "List of feature bullet points",
"required": false,
"default": ["Feature 1", "Feature 2", "Feature 3"]
}
],
"composition": {
"scenes": [
{
"name": "hero",
"duration": 15,
"layers": [
{
"type": "image",
"src": "{{productImage}}",
"position": { "x": 540, "y": 400 },
"size": { "width": 600, "height": 600 }
},
{
"type": "text",
"text": "{{productName}}",
"style": { "fontSize": 48, "fontWeight": 700, "color": "#FFFFFF" },
"position": { "x": 540, "y": 80 }
},
{
"type": "text",
"text": "${{price}}",
"style": { "fontSize": 64, "fontWeight": 900, "color": "{{accentColor}}" },
"position": { "x": 540, "y": 900 }
}
]
}
]
}
}
Template duy nhất này có thể tạo ra hàng nghìn video sản phẩm độc đáo chỉ bằng cách thay đổi các giá trị đầu vào khi render – không cần sửa đổi template.
Đối tượng composition là nơi nội dung video của bạn tồn tại. Nó chứa một mảng scenes, và mỗi scene đại diện cho một phân đoạn riêng biệt của video với thời lượng, layer và chuyển cảnh riêng.
{
"composition": {
"scenes": [
{
"name": "intro",
"duration": 5,
"transition": {
"type": "fade",
"duration": 1
},
"layers": [ ... ]
},
{
"name": "main-content",
"duration": 20,
"transition": {
"type": "slide",
"duration": 0.5,
"direction": "left"
},
"layers": [ ... ]
},
{
"name": "outro",
"duration": 5,
"layers": [ ... ]
}
]
}
}
| Trường | Kiểu | Bắt buộc | Mô tả |
|---|---|---|---|
name | string | Không | Định danh cho scene (để dễ đọc và gỡ lỗi) |
duration | number | Có | Độ dài scene tính bằng giây |
transition | object | Không | Hiệu ứng chuyển cảnh khi vào scene này từ scene trước |
layers | array | Có | Mảng có thứ tự các đối tượng layer được render từ dưới lên trên |
Các scene phát theo trình tự. Tổng thời lượng video là tổng của tất cả thời lượng scene (trừ bất kỳ sự chồng chéo chuyển cảnh nào). Các layer trong một scene được render theo thứ tự mảng – layer đầu tiên nằm ở dưới cùng của ngăn xếp hình ảnh, và layer cuối cùng nằm trên cùng.
Nếu không có chuyển cảnh được chỉ định, scene sử dụng cut cứng theo mặc định.
Rendervid hỗ trợ tám loại layer riêng biệt. Mỗi loại layer phục vụ một mục đích cụ thể và chấp nhận tập hợp thuộc tính riêng của nó ngoài cấu hình cơ sở được chia sẻ.
Mọi layer, bất kể loại nào, đều hỗ trợ các thuộc tính cơ sở này:
{
"position": { "x": 100, "y": 100 },
"size": { "width": 500, "height": 200 },
"rotation": 0,
"scale": { "x": 1, "y": 1 },
"anchor": { "x": 0.5, "y": 0.5 },
"opacity": 1,
"blendMode": "normal",
"from": 0,
"duration": -1,
"filters": [],
"style": {},
"className": ""
}
| Thuộc tính | Kiểu | Mặc định | Mô tả |
|---|---|---|---|
position | object | {x: 0, y: 0} | Tọa độ X/Y tính bằng pixel |
size | object | – | Chiều rộng và chiều cao tính bằng pixel |
rotation | number | 0 | Góc xoay tính bằng độ |
scale | object | {x: 1, y: 1} | Hệ số tỷ lệ cho trục X và Y |
anchor | object | {x: 0.5, y: 0.5} | Điểm neo cho các phép biến đổi (phạm vi 0-1, 0.5 = trung tâm) |
opacity | number | 1 | Độ mờ đục của layer (0 = trong suốt, 1 = mờ đục) |
blendMode | string | "normal" | Chế độ pha trộn CSS cho compositing |
from | number | 0 | Thời gian bắt đầu tính bằng giây (tương đối với điểm bắt đầu scene) |
duration | number | -1 | Thời lượng layer tính bằng giây (-1 = toàn bộ thời lượng scene) |
filters | array | [] | Mảng các đối tượng filter hình ảnh |
style | object | {} | Các thuộc tính style giống CSS bổ sung |
className | string | "" | Tên class CSS cho styling tùy chỉnh |
text – Render văn bản được định kiểu với toàn quyền kiểm soát font, kích thước, màu sắc, căn chỉnh, chiều cao dòng, khoảng cách chữ, bóng văn bản và hơn thế nữa. Hỗ trợ cú pháp {{variable}} cho nội dung động.
image – Hiển thị hình ảnh tĩnh từ URL hoặc đường dẫn cục bộ. Hỗ trợ cắt xén, chế độ object-fit, bán kính viền và filter hình ảnh.
video – Nhúng clip video trong một scene. Hỗ trợ cắt tỉa (đầu/cuối), kiểm soát âm lượng, tốc độ phát lại, lặp lại và tắt tiếng.
shape – Render các hình nguyên thủy hình học: hình chữ nhật, hình tròn, hình elip, đường thẳng và đa giác. Hỗ trợ fill, stroke, bán kính viền, gradient và bóng.
audio – Thêm track âm thanh vào một scene. Hỗ trợ âm lượng, fade in/out, cắt tỉa và lặp lại. Các layer audio không có đại diện hình ảnh.
group – Một layer container chứa các layer con. Các group cho phép bạn áp dụng các phép biến đổi, hoạt ảnh và hiệu ứng cho nhiều layer cùng một lúc.
lottie – Render hoạt ảnh Lottie/Bodymovin JSON. Hỗ trợ tốc độ phát lại, lặp lại và kiểm soát phân đoạn để phát các phạm vi khung hình cụ thể.
custom – Tải các component tùy chỉnh đã đăng ký được định nghĩa trong trường customComponents. Sử dụng điều này cho các template layer có thể tái sử dụng, được tham số hóa.
Để biết cấu hình chi tiết của từng loại layer, bao gồm tất cả các thuộc tính có sẵn và ví dụ mã, xem Tham chiếu Component Rendervid .
Rendervid bao gồm hơn 40 preset hoạt ảnh tích hợp sẵn được tổ chức thành bốn danh mục: entrance, exit, emphasis và keyframe. Hoạt ảnh được gắn vào bất kỳ layer nào và kiểm soát cách layer đó xuất hiện, biến mất hoặc hoạt động trong suốt thời gian tồn tại của nó.
{
"type": "text",
"text": "Animated Title",
"animations": [
{
"type": "entrance",
"effect": "fadeInUp",
"duration": 30,
"delay": 10,
"easing": "easeOutCubic",
"loop": 0,
"alternate": false
}
]
}
| Trường | Kiểu | Mặc định | Mô tả |
|---|---|---|---|
type | string | – | Danh mục hoạt ảnh: entrance, exit, emphasis, keyframe |
effect | string | – | Tên preset (ví dụ: fadeInUp, pulse, bounceOut) |
duration | number | 30 | Thời lượng tính bằng khung hình |
delay | number | 0 | Độ trễ trước khi hoạt ảnh bắt đầu, tính bằng khung hình |
easing | string | "ease" | Tên hàm easing |
loop | number | 0 | Số vòng lặp (0 = không lặp, -1 = vô hạn) |
alternate | boolean | false | Đảo ngược hướng trong các vòng lặp thay thế |
Hoạt ảnh entrance kiểm soát cách một layer xuất hiện trên màn hình. Chúng chạy một lần khi thời gian bắt đầu của layer được đạt tới.
| Preset | Mô tả |
|---|---|
fadeIn | Làm mờ đơn giản từ 0 đến 1 |
fadeInUp | Làm mờ trong khi trượt lên |
fadeInDown | Làm mờ trong khi trượt xuống |
fadeInLeft | Làm mờ trong khi trượt từ bên trái |
fadeInRight | Làm mờ trong khi trượt từ bên phải |
slideInUp | Trượt vào từ dưới khung hình |
slideInDown | Trượt vào từ trên khung hình |
slideInLeft | Trượt vào từ cạnh trái |
slideInRight | Trượt vào từ cạnh phải |
scaleIn | Phóng to từ 0 đến kích thước đầy đủ |
zoomIn | Phóng to từ tỷ lệ nhỏ hơn với vượt quá nhẹ |
rotateIn | Xoay vào vị trí từ một góc offset |
bounceIn | Nảy vào vị trí với vượt quá đàn hồi |
flipInX | Lật 3D trên trục X (lật ngang) |
flipInY | Lật 3D trên trục Y (lật dọc) |
typewriter | Các ký tự xuất hiện từng cái một (layer văn bản) |
revealLeft | Mặt nạ hiển thị trượt từ trái |
revealRight | Mặt nạ hiển thị trượt từ phải |
revealUp | Mặt nạ hiển thị trượt lên |
revealDown | Mặt nạ hiển thị trượt xuống |
Hoạt ảnh exit kiểm soát cách một layer biến mất. Chúng chạy ở cuối thời lượng của layer.
| Preset | Mô tả |
|---|---|
fadeOut | Làm mờ đơn giản từ 1 đến 0 |
slideOutUp | Trượt ra qua đầu khung hình |
slideOutDown | Trượt ra qua đáy khung hình |
scaleOut | Thu nhỏ từ kích thước đầy đủ xuống 0 |
zoomOut | Phóng to ra tỷ lệ nhỏ hơn và làm mờ |
rotateOut | Xoay ra khỏi vị trí đến một góc offset |
bounceOut | Nảy ra ngoài với vượt quá đàn hồi trước khi biến mất |
flipOutX | Lật 3D ra trên trục X |
flipOutY | Lật 3D ra trên trục Y |
Hoạt ảnh emphasis thu hút sự chú ý đến một layer trong khi nó vẫn hiển thị. Chúng hoạt động tốt với lặp lại.
| Preset | Mô tả |
|---|---|
pulse | Nhịp tỷ lệ nhịp nhàng (phát triển và co lại) |
shake | Lắc ngang nhanh |
bounce | Chuyển động nảy dọc |
swing | Xoay lắc giống con lắc |
wobble | Lắc lư ngoài trục kết hợp xoay và dịch chuyển |
flash | Nhấp nháy độ mờ đục nhanh |
rubberBand | Hiệu ứng kéo giãn đàn hồi và bật lại |
heartbeat | Nhịp tim đập hai lần |
float | Chuyển động trôi nhẹ nhàng lên xuống |
spin | Xoay liên tục 360 độ |
Để kiểm soát sáng tạo hoàn toàn, hoạt ảnh keyframe cho phép bạn định nghĩa các thay đổi thuộc tính tùy chỉnh từng khung hình:
{
"type": "keyframe",
"keyframes": [
{ "frame": 0, "opacity": 0, "x": -100 },
{ "frame": 15, "opacity": 1, "x": 0 },
{ "frame": 30, "opacity": 1, "x": 0 },
{ "frame": 45, "opacity": 0, "x": 100 }
],
"easing": "easeInOutCubic"
}
Hoạt ảnh keyframe có thể animate bất kỳ thuộc tính số nào: opacity, x, y, rotation, scaleX, scaleY và hơn thế nữa. Mỗi keyframe chỉ định một số khung hình và các giá trị thuộc tính tại khung hình đó. Renderer nội suy giữa các keyframe bằng hàm easing được chỉ định.
Một layer duy nhất có thể có nhiều hoạt ảnh. Ví dụ, một hoạt ảnh entrance theo sau bởi một vòng lặp emphasis, sau đó là một hoạt ảnh exit:
{
"animations": [
{
"type": "entrance",
"effect": "fadeInUp",
"duration": 20,
"easing": "easeOutCubic"
},
{
"type": "emphasis",
"effect": "pulse",
"duration": 30,
"delay": 20,
"loop": -1
},
{
"type": "exit",
"effect": "fadeOut",
"duration": 15,
"easing": "easeInCubic"
}
]
}
Hàm easing kiểm soát tốc độ thay đổi trong một hoạt ảnh, xác định xem chuyển động có cảm giác tuyến tính, mượt mà, nảy hoặc đàn hồi hay không. Rendervid bao gồm hơn 30 hàm easing tích hợp sẵn.
| Hàm | Mô tả |
|---|---|
linear | Tốc độ không đổi từ đầu đến cuối, không có gia tốc |
ease | Easing giống CSS mặc định với gia tốc và giảm tốc nhẹ nhàng |
easeIn | Bắt đầu chậm, tăng tốc về phía cuối |
easeOut | Bắt đầu nhanh, giảm tốc về phía cuối |
easeInOut | Tăng tốc trong nửa đầu, giảm tốc trong nửa thứ hai |
| Hàm | Mô tả |
|---|---|
easeInQuad | Gia tốc bậc hai (t^2) |
easeOutQuad | Giảm tốc bậc hai |
easeInOutQuad | Gia tốc bậc hai sau đó giảm tốc |
| Hàm | Mô tả |
|---|---|
easeInCubic | Gia tốc bậc ba (t^3) – rõ ràng hơn bậc hai |
easeOutCubic | Giảm tốc bậc ba – dừng mượt mà và tự nhiên |
easeInOutCubic | Ease in và out bậc ba – easing được sử dụng phổ biến nhất |
| Hàm | Mô tả |
|---|---|
easeInQuart | Gia tốc bậc bốn (t^4) |
easeOutQuart | Giảm tốc bậc bốn |
easeInOutQuart | Ease in và out bậc bốn |
| Hàm | Mô tả |
|---|---|
easeInQuint | Gia tốc bậc năm (t^5) – bắt đầu rất mạnh |
easeOutQuint | Giảm tốc bậc năm – dừng rất mạnh |
easeInOutQuint | Ease in và out bậc năm |
| Hàm | Mô tả |
|---|---|
easeInSine | Gia tốc dựa trên sin – đường cong easing nhẹ nhàng nhất |
easeOutSine | Giảm tốc dựa trên sin |
easeInOutSine | Ease in và out dựa trên sin |
| Hàm | Mô tả |
|---|---|
easeInExpo | Gia tốc hàm mũ – gần như phẳng sau đó mạnh |
easeOutExpo | Giảm tốc hàm mũ – mạnh sau đó gần như phẳng |
easeInOutExpo | Ease in và out hàm mũ |
| Hàm | Mô tả |
|---|---|
easeInCirc | Đường cong gia tốc tròn |
easeOutCirc | Đường cong giảm tốc tròn |
easeInOutCirc | Ease in và out tròn |
| Hàm | Mô tả |
|---|---|
easeInBack | Kéo lùi một chút trước khi tăng tốc về phía trước (dự đoán) |
easeOutBack | Vượt quá mục tiêu sau đó quay lại (vượt quá) |
easeInOutBack | Dự đoán khi vào, vượt quá khi ra |
| Hàm | Mô tả |
|---|---|
easeInElastic | Lắc lư đàn hồi khi gia tốc – cuộn lên giống lò xo |
easeOutElastic | Lắc lư đàn hồi khi giảm tốc – bật giống lò xo |
easeInOutElastic | Đàn hồi ở cả hai đầu |
| Hàm | Mô tả |
|---|---|
easeInBounce | Hiệu ứng nảy khi vào – như một quả bóng rơi ngược lại |
easeOutBounce | Hiệu ứng nảy khi ra – như một quả bóng chạm đất |
easeInOutBounce | Nảy ở cả hai đầu |
easeOutCubic hoặc easeOutQuart cho lối vào cảm giác tự nhiêneaseOutElastic hoặc easeOutBack cho vượt quá vui tươieaseInOutSine cho chuyển động nhẹ nhàng, liên tụceaseInExpo cho xây dựng, easeOutExpo cho dừng nhanheaseOutBounce cho hiệu ứng giống trọng lựcChuyển cảnh kiểm soát cách một scene chuyển sang scene tiếp theo. Rendervid cung cấp 17 loại chuyển cảnh từ cắt đơn giản đến hiệu ứng 3D điện ảnh.
{
"name": "scene-two",
"duration": 10,
"transition": {
"type": "fade",
"duration": 1,
"direction": "left"
},
"layers": [ ... ]
}
Đối tượng transition được đặt trên scene đến (scene đang được chuyển đến). Thuộc tính direction chỉ áp dụng cho các chuyển cảnh có hướng như slide, wipe và push.
| Chuyển cảnh | Mô tả |
|---|---|
cut | Chuyển đổi tức thì không có hiệu ứng hình ảnh (mặc định) |
fade | Crossfade giữa các scene – scene đi ra làm mờ khi scene đến làm mờ vào |
zoom | Phóng to vào scene đi ra trong khi scene đến xuất hiện |
slide | Scene đến trượt qua scene đi ra từ một hướng có thể cấu hình (trái, phải, lên, xuống) |
wipe | Lau cạnh cứng tiết lộ scene đến, di chuyển qua khung hình theo hướng đã cho |
push | Scene đến đẩy scene đi ra khỏi màn hình theo hướng được chỉ định |
rotate | Scene đi ra xoay đi trong khi scene đến xoay vào |
flip | Chuyển cảnh lật 3D – khung hình lật như một thẻ để tiết lộ scene tiếp theo |
blur | Scene đi ra làm mờ trong khi scene đến làm rõ nét |
circle | Mặt nạ hình tròn mở rộng từ trung tâm (hoặc một điểm được chỉ định) để tiết lộ scene tiếp theo |
glitch | Hiệu ứng méo mó glitch kỹ thuật số với sai lệch màu và dịch chuyển |
dissolve | Hòa tan cấp pixel nơi các pixel riêng lẻ chuyển đổi ngẫu nhiên giữa các scene |
cube | Xoay khối 3D – các scene ở trên các mặt liền kề của một khối quay |
swirl | Méo xoáy ốc xoáy scene đi ra vào scene đến |
diagonal-wipe | Lau cạnh cứng chéo di chuyển từ một góc đến góc đối diện |
iris | Iris hình tròn mở hoặc đóng như khẩu độ máy ảnh |
crosszoom | Cả hai scene phóng to đồng thời – scene đi ra phóng to vào, scene đến phóng to ra |
Fade điện ảnh với crossfade dài:
{
"transition": {
"type": "fade",
"duration": 2
}
}
Trượt từ bên phải (phổ biến cho nội dung tuần tự):
{
"transition": {
"type": "slide",
"duration": 0.5,
"direction": "right"
}
}
Xoay khối 3D (cảm giác năng động, hiện đại):
{
"transition": {
"type": "cube",
"duration": 1
}
}
Hiệu ứng glitch (năng động, hướng công nghệ):
{
"transition": {
"type": "glitch",
"duration": 0.3
}
}
Các layer Rendervid hỗ trợ một loạt hiệu ứng hình ảnh thông qua filter, chế độ pha trộn, bóng và biến đổi.
Filter được áp dụng qua mảng filters trên bất kỳ layer nào. Mỗi filter là một đối tượng với type và value:
{
"filters": [
{ "type": "blur", "value": 5 },
{ "type": "brightness", "value": 1.2 },
{ "type": "contrast", "value": 1.1 },
{ "type": "grayscale", "value": 0.5 },
{ "type": "saturate", "value": 1.5 }
]
}
| Filter | Phạm vi Giá trị | Mô tả |
|---|---|---|
blur | 0+ (pixel) | Làm mờ Gaussian – giá trị cao hơn tạo ra mờ nhiều hơn |
brightness | 0+ (hệ số nhân) | 0 = đen, 1 = bình thường, 2 = độ sáng gấp đôi |
contrast | 0+ (hệ số nhân) | 0 = xám, 1 = bình thường, 2 = độ tương phản gấp đôi |
grayscale | 0-1 | 0 = màu đầy đủ, 1 = hoàn toàn không bão hòa |
hue-rotate | 0-360 (độ) | Xoay màu xung quanh vòng tròn màu |
invert | 0-1 | 0 = bình thường, 1 = màu đảo ngược hoàn toàn |
saturate | 0+ (hệ số nhân) | 0 = không bão hòa, 1 = bình thường, 2 = bão hòa gấp đôi |
sepia | 0-1 | 0 = bình thường, 1 = tông màu sepia đầy đủ |
Thuộc tính blendMode kiểm soát cách một layer tổng hợp với các layer bên dưới nó:
{
"type": "shape",
"blendMode": "multiply",
"opacity": 0.8
}
Các chế độ pha trộn được hỗ trợ: normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosity.
Các layer văn bản và hình dạng hỗ trợ hiệu ứng bóng thông qua thuộc tính style:
{
"style": {
"shadow": {
"color": "rgba(0, 0, 0, 0.5)",
"offsetX": 4,
"offsetY": 4,
"blur": 10
}
}
}
Filter, chế độ pha trộn, độ mờ đục và bóng đều có thể được kết hợp trên một layer duy nhất cho các xử lý hình ảnh tinh vi:
{
"type": "image",
"src": "{{backgroundImage}}",
"opacity": 0.7,
"blendMode": "overlay",
"filters": [
{ "type": "blur", "value": 3 },
{ "type": "brightness", "value": 0.8 }
],
"style": {
"shadow": {
"color": "rgba(0, 0, 0, 0.3)",
"offsetX": 0,
"offsetY": 10,
"blur": 20
}
}
}
Rendervid hỗ trợ cả Google Font (hơn 100 họ font được tích hợp sẵn) và font tùy chỉnh được tải từ URL bên ngoài.
Khai báo Google Font trong mảng fonts.google:
{
"fonts": {
"google": [
{ "family": "Roboto", "weights": [400, 700] },
{ "family": "Open Sans", "weights": [300, 400, 600, 700] },
{ "family": "Montserrat", "weights": [400, 500, 700, 900] },
{ "family": "Playfair Display", "weights": [400, 700] }
]
}
}
Mỗi đối tượng font yêu cầu:
| Trường | Kiểu | Mô tả |
|---|---|---|
family | string | Tên họ Google Font (yêu cầu khớp chính xác) |
weights | array | Mảng các độ đậm số để tải (100-900) |
Độ đậm font phổ biến: 100 (Thin), 200 (Extra Light), 300 (Light), 400 (Regular), 500 (Medium), 600 (Semi Bold), 700 (Bold), 800 (Extra Bold), 900 (Black).
Tải font từ URL bên ngoài bằng mảng fonts.custom:
{
"fonts": {
"custom": [
{
"family": "MyBrandFont",
"src": "https://example.com/fonts/brand-font.woff2",
"weight": 400,
"style": "normal"
},
{
"family": "MyBrandFont",
"src": "https://example.com/fonts/brand-font-bold.woff2",
"weight": 700,
"style": "normal"
}
]
}
}
Các định dạng font được hỗ trợ: WOFF2 (được khuyến nghị cho kích thước tệp nhỏ nhất), WOFF, TTF và OTF.
Tham chiếu font đã khai báo theo tên họ trong style layer văn bản:
{
"type": "text",
"text": "{{headline}}",
"style": {
"fontFamily": "Montserrat",
"fontWeight": 700,
"fontSize": 64,
"color": "#FFFFFF"
}
}
Rendervid bao gồm chuỗi font dự phòng theo nền tảng cụ thể để đảm bảo render nhất quán trên các môi trường khác nhau. Nếu một font được chỉ định không khả dụng, renderer quay lại các font hệ thống khớp với cùng phân loại (serif, sans-serif, monospace).
Rendervid hỗ trợ một loạt các định dạng đầu ra và codec cho cả render video và hình ảnh.
| Định dạng | Codec | Phần mở rộng Tệp | Tốt nhất Cho |
|---|---|---|---|
| MP4 | H.264 | .mp4 | Tương thích tối đa – web, di động, mạng xã hội |
| WebM | VP8 / VP9 | .webm | Nhúng web với kích thước tệp nhỏ hơn |
| MOV | ProRes | .mov | Quy trình chỉnh sửa chuyên nghiệp, chất lượng không mất dữ liệu |
| GIF | – | .gif | Hoạt ảnh ngắn, chia sẻ xã hội, email |
| MP4 | H.265 / HEVC | .mp4 | Thiết bị mới hơn, tệp nhỏ hơn 50% so với H.264 ở cùng chất lượng |
| WebM | AV1 | .webm | Codec thế hệ tiếp theo, hiệu quả nén tốt nhất |
| Định dạng | Phần mở rộng Tệp | Tốt nhất Cho |
|---|---|---|
| PNG | .png | Chất lượng không mất dữ liệu, hỗ trợ trong suốt |
| JPEG | .jpg | Ảnh chụp, kích thước tệp nhỏ hơn |
| WebP | .webp | Web hiện đại, cân bằng tốt nhất giữa chất lượng và kích thước |
| Preset | Mô tả |
|---|---|
draft | Render nhanh với chất lượng giảm – lý tưởng cho xem trước |
standard | Chất lượng và kích thước tệp cân bằng – tốt cho hầu hết các trường hợp sử dụng |
high | Bitrate và chất lượng cao hơn – cho sản phẩm cuối cùng |
lossless | Chất lượng tối đa không có hiện tượng nén |
Rendervid hỗ trợ độ phân giải từ hình thu nhỏ nhỏ đến 8K:
| Độ phân giải | Kích thước | Sử dụng Phổ biến |
|---|---|---|
| SD | 640 x 480 | Hình thu nhỏ, xem trước |
| HD | 1280 x 720 | Video web, email |
| Full HD | 1920 x 1080 | YouTube, thuyết trình |
| 2K | 2560 x 1440 | Màn hình chất lượng cao |
| 4K UHD | 3840 x 2160 | Chuyên nghiệp, phát sóng |
| 8K | 7680 x 4320 | Độ phân giải tối đa, bảo đảm tương lai |
Tốc độ khung hình từ 1 fps (trình chiếu) đến 120 fps (chuyển động chậm, nội dung game) được hỗ trợ. Các lựa chọn phổ biến là 24 fps (điện ảnh), 30 fps (web/xã hội) và 60 fps (chuyển động mượt mà).
Đây là một template Rendervid đầy đủ minh họa các tính năng chính của hệ thống template hoạt động cùng nhau: đầu vào động, nhiều scene với chuyển cảnh, composition phân lớp, hoạt ảnh với easing, font và hiệu ứng hình ảnh.
{
"name": "tech-product-launch",
"output": {
"type": "video",
"width": 1920,
"height": 1080,
"fps": 30,
"duration": 20,
"backgroundColor": "#0A0A0A"
},
"inputs": [
{
"key": "productName",
"type": "string",
"label": "Product Name",
"required": true,
"default": "ProductX"
},
{
"key": "tagline",
"type": "string",
"label": "Tagline",
"required": true,
"default": "The future is here."
},
{
"key": "heroImage",
"type": "url",
"label": "Hero Image",
"required": true
},
{
"key": "primaryColor",
"type": "color",
"label": "Primary Color",
"default": "#6C63FF"
},
{
"key": "ctaText",
"type": "string",
"label": "Call to Action",
"default": "Learn More"
}
],
"fonts": {
"google": [
{ "family": "Inter", "weights": [400, 600, 800] },
{ "family": "JetBrains Mono", "weights": [400] }
]
},
"composition": {
"scenes": [
{
"name": "intro",
"duration": 6,
"layers": [
{
"type": "shape",
"shape": "rectangle",
"position": { "x": 960, "y": 540 },
"size": { "width": 1920, "height": 1080 },
"style": {
"fill": "{{primaryColor}}",
"opacity": 0.1
}
},
{
"type": "text",
"text": "{{productName}}",
"position": { "x": 960, "y": 400 },
"anchor": { "x": 0.5, "y": 0.5 },
"style": {
"fontFamily": "Inter",
"fontWeight": 800,
"fontSize": 96,
"color": "#FFFFFF",
"textAlign": "center"
},
"animations": [
{
"type": "entrance",
"effect": "fadeInUp",
"duration": 30,
"delay": 15,
"easing": "easeOutCubic"
}
]
},
{
"type": "text",
"text": "{{tagline}}",
"position": { "x": 960, "y": 520 },
"anchor": { "x": 0.5, "y": 0.5 },
"style": {
"fontFamily": "Inter",
"fontWeight": 400,
"fontSize": 36,
"color": "{{primaryColor}}",
"textAlign": "center",
"letterSpacing": 4
},
"animations": [
{
"type": "entrance",
"effect": "fadeIn",
"duration": 25,
"delay": 40,
"easing": "easeOutSine"
}
]
},
{
"type": "shape",
"shape": "rectangle",
"position": { "x": 960, "y": 600 },
"size": { "width": 80, "height": 3 },
"style": {
"fill": "{{primaryColor}}"
},
"animations": [
{
"type": "entrance",
"effect": "scaleIn",
"duration": 20,
"delay": 60,
"easing": "easeOutQuart"
}
]
}
]
},
{
"name": "product-showcase",
"duration": 8,
"transition": {
"type": "slide",
"duration": 0.8,
"direction": "left"
},
"layers": [
{
"type": "image",
"src": "{{heroImage}}",
"position": { "x": 1200, "y": 540 },
"size": { "width": 800, "height": 800 },
"anchor": { "x": 0.5, "y": 0.5 },
"filters": [
{ "type": "brightness", "value": 1.1 },
{ "type": "contrast", "value": 1.05 }
],
"animations": [
{
"type": "entrance",
"effect": "zoomIn",
"duration": 40,
"easing": "easeOutBack"
},
{
"type": "emphasis",
"effect": "float",
"duration": 120,
"delay": 40,
"loop": -1,
"alternate": true
}
]
},
{
"type": "text",
"text": "Introducing",
"position": { "x": 400, "y": 350 },
"anchor": { "x": 0.5, "y": 0.5 },
"style": {
"fontFamily": "JetBrains Mono",
"fontSize": 18,
"color": "{{primaryColor}}",
"textTransform": "uppercase",
"letterSpacing": 6
},
"animations": [
{
"type": "entrance",
"effect": "typewriter",
"duration": 30,
"delay": 10,
"easing": "linear"
}
]
},
{
"type": "text",
"text": "{{productName}}",
"position": { "x": 400, "y": 430 },
"anchor": { "x": 0.5, "y": 0.5 },
"style": {
"fontFamily": "Inter",
"fontWeight": 800,
"fontSize": 72,
"color": "#FFFFFF"
},
"animations": [
{
"type": "entrance",
"effect": "revealLeft",
"duration": 25,
"delay": 20,
"easing": "easeOutQuart"
}
]
},
{
"type": "text",
"text": "{{tagline}}",
"position": { "x": 400, "y": 520 },
"anchor": { "x": 0.5, "y": 0.5 },
"style": {
"fontFamily": "Inter",
"fontWeight": 400,
"fontSize": 24,
"color": "#CCCCCC",
"lineHeight": 1.6
},
"animations": [
{
"type": "entrance",
"effect": "fadeInUp",
"duration": 20,
"delay": 40,
"easing": "easeOutCubic"
}
]
}
]
},
{
"name": "cta",
"duration": 6,
"transition": {
"type": "fade",
"duration": 1.2
},
"layers": [
{
"type": "shape",
"shape": "rectangle",
"position": { "x": 960, "y": 540 },
"size": { "width": 1920, "height": 1080 },
"style": {
"fill": "{{primaryColor}}",
"opacity": 0.15
}
},
{
"type": "text",
"text": "{{productName}}",
"position": { "x": 960, "y": 380 },
"anchor": { "x": 0.5, "y": 0.5 },
"style": {
"fontFamily": "Inter",
"fontWeight": 800,
"fontSize": 80,
"color": "#FFFFFF",
"textAlign": "center"
},
"animations": [
{
"type": "entrance",
"effect": "bounceIn",
"duration": 35,
"easing": "easeOutElastic"
}
]
},
{
"type": "shape",
"shape": "rectangle",
"position": { "x": 960, "y": 550 },
"size": { "width": 280, "height": 60 },
"style": {
"fill": "{{primaryColor}}",
"borderRadius": 30
},
"animations": [
{
"type": "entrance",
"effect": "scaleIn",
"duration": 25,
"delay": 30,
"easing": "easeOutBack"
},
{
"type": "emphasis",
"effect": "pulse",
"duration": 60,
"delay": 60,
"loop": -1,
"alternate": true
}
]
},
{
"type": "text",
"text": "{{ctaText}}",
"position": { "x": 960, "y": 550 },
"anchor": { "x": 0.5, "y": 0.5 },
"style": {
"fontFamily": "Inter",
"fontWeight": 600,
"fontSize": 22,
"color": "#FFFFFF",
"textAlign": "center"
},
"animations": [
{
"type": "entrance",
"effect": "fadeIn",
"duration": 20,
"delay": 40,
"easing": "easeOutSine"
}
]
}
]
}
]
}
}
Template này tạo ra một video ra mắt sản phẩm 20 giây với ba scene: một intro kiểu chữ với hoạt ảnh văn bản xen kẽ, một giới thiệu sản phẩm với hình ảnh trôi nổi và hiệu ứng máy đánh chữ, và một scene kêu gọi hành động kết thúc với một nút nhấp nháy. Tất cả văn bản, màu sắc và hình ảnh đều được điều khiển bởi các biến template, làm cho nó hoàn toàn có thể tái sử dụng.
Template Rendervid là các tệp JSON định nghĩa cấu trúc, nội dung, hoạt ảnh và cài đặt đầu ra của video hoặc hình ảnh. Mỗi template bao gồm cấu hình đầu ra (kích thước, fps, thời lượng), định nghĩa đầu vào cho các biến động, composition với các scene và layer, cùng cấu hình font và component tùy chỉnh tùy chọn.
Biến template sử dụng cú pháp {{variableName}}. Bạn định nghĩa các đầu vào trong mảng inputs của template với key, type (string, number, boolean, color, url, array), label, description và giá trị mặc định. Khi render, các biến này được thay thế bằng giá trị thực tế, giúp template có thể tái sử dụng và linh hoạt.
Rendervid bao gồm hơn 40 preset hoạt ảnh tích hợp sẵn được tổ chức thành bốn danh mục: hoạt ảnh vào (fadeIn, slideIn, scaleIn, bounceIn, v.v.), hoạt ảnh ra (fadeOut, slideOut, zoomOut, v.v.), hoạt ảnh nhấn mạnh (pulse, shake, bounce, swing, heartbeat, v.v.), và hoạt ảnh keyframe tùy chỉnh hoàn toàn với hơn 30 hàm easing.
Rendervid cung cấp 17 loại chuyển cảnh: cut, fade, zoom, slide, wipe, push, rotate, flip (3D), blur, circle, glitch, dissolve, cube (3D), swirl, diagonal-wipe, iris và crosszoom. Mỗi chuyển cảnh có thể được cấu hình với tham số thời lượng và hướng.
Rendervid hỗ trợ nhiều định dạng đầu ra bao gồm MP4 (H.264), WebM (VP8/VP9), MOV (ProRes), GIF cho video, và PNG, JPEG, WebP cho hình ảnh. Các codec nâng cao như H.265/HEVC và AV1 cũng được hỗ trợ. Độ phân giải lên đến 8K (7680x4320) với tốc độ khung hình từ 1 đến 120 fps.
Có, Rendervid hỗ trợ hơn 100 Google Font tích hợp sẵn và tải font tùy chỉnh từ URL ở định dạng WOFF2, WOFF, TTF và OTF. Bạn có thể chỉ định độ đậm font từ 100-900 và cấu hình font dự phòng theo nền tảng để tương thích đa môi trường.
Chúng tôi giúp các công ty như của bạn phát triển chatbot thông minh, Máy chủ MCP, công cụ AI hoặc các loại tự động hóa AI khác để thay thế con người trong các tác vụ lặp đi lặp lại trong tổ chức của bạn.
Khám phá tất cả các thành phần Rendervid: 8 loại lớp tích hợp sẵn (text, image, video, shape, audio, group, lottie, custom), các thành phần React được xây dựng ...
Triển khai Rendervid ở bất kỳ đâu: render trên trình duyệt cho xem trước, Node.js cho xử lý hàng loạt phía máy chủ, hoặc render trên cloud với AWS Lambda, Azure...
Khám phá Rendervid, phần mềm mã nguồn mở miễn phí thay thế Remotion để tạo video theo chương trình. Thiết kế tối ưu cho AI với tích hợp MCP, mẫu JSON, render đá...