luffy-create

Video

Video elements let you bring screen recordings, product demos, stock clips, generated animations, and motion backgrounds into a scene. A video behaves like a visual layer on the canvas, so you can resize, crop, style, animate, and arrange it with text, shapes, charts, and images.


Adding Video

  1. Open Video from the left sidebar
  2. Upload an MP4, WebM, or MOV file
  3. Click the asset to place it on the canvas
  4. Resize and position it
  5. Select it to edit properties in the right sidebar

Uploaded video is scaled to fit the canvas automatically. You can then use exact width/height controls or drag handles on the canvas.


Clip Timing

Video timing has two layers: where the video appears in the scene, and where playback begins inside the source file.

Control What it does
Timeline Start When the video starts inside the scene
Start Time Trim point inside the original source video
Duration How long the clip plays in the scene
Playback Speed Slow down or speed up the clip
Loop Repeat a short video for the scene duration
Volume / Muted Keep, lower, or remove the original audio

Use Timeline Start when a clip should appear after narration begins. Use Start Time when the useful part of the source video begins later than the file itself.


Layout and Crop

Property Use
Width / Height Set exact size or resize on canvas
Lock Ratio Preserve the original aspect ratio
Corner Radius Round the clip like a card, phone frame, or UI panel
Crop Focus on the important part of a recording
Perspective Place the video on an angled surface or mockup

Crop first, then style. This keeps the important content visible while removing browser bars, empty margins, or unwanted background areas.


Styling and Adjustments

Video supports many of the same visual controls as images:

Feature Why it helps
Brightness / Contrast / Saturation Match the clip to the scene mood
Temperature / Tint / Vibrance Create warm, cool, or branded looks
Blur Push background video behind text
Border Frame a clip as a card or device screen
Gradient Border Add a polished highlight frame
Animated Border Draw attention to a featured video layer
Box Shadow Lift the clip off the background
Inner Shadow Add depth inside the frame
Corner Radius Make videos feel like modern UI panels

For screen recordings, a border, small corner radius, and soft shadow often make the clip feel intentionally designed instead of pasted into the scene.


Animation Ideas

Goal Suggested setup
Introduce a demo clip Fade In or Scale In with Ease Out
Show a product preview Subtle shadow, rounded corners, slow Scale In
Create a moving background Loop video, lower opacity, add blur
Focus attention Add animated border or a short pulse loop
Show before/after Use two clips and reveal one with Wipe In

Keep video animations clean. A clip already contains motion, so extra animation should support the scene rather than distract from it.


Practical Workflow

  1. Trim the clip to the useful moment.
  2. Crop to the important visual area.
  3. Set size, position, and corner radius.
  4. Adjust color and brightness so text remains readable.
  5. Add border or shadow if the clip needs separation from the background.
  6. Add a short enter animation only if it improves the scene rhythm.