Zvid Video Layers: Rounded Corners, Rotation, and Filters

Zvid image, video, and GIF layers can use rounded corners, rotation, filters, crop, resize, opacity, and timeline controls directly in project JSON. The important part is understanding the layer as one system: width and height define its box, resize and cropParams determine what fills the box, radius clips its corners, anchor controls placement and rotation origin, angle rotates it, and track determines which layer appears above another.

The current field definitions in this guide come from Zvid's official common element properties, image elements, video elements, filter options, and border radius references.

Rounded corners, rotation and filters stay inside the Zvid project model.

A complete picture-in-picture layer

{
  "type": "VIDEO",
  "id": "product-demo-card",
  "src": "https://cdn.example.com/demos/product-walkthrough.mp4",
  "x": 1460,
  "y": 650,
  "width": 620,
  "height": 420,
  "anchor": "center-center",
  "resize": "cover",
  "angle": -4,
  "radius": {
    "tl": 32,
    "tr": 32,
    "bl": 32,
    "br": 32
  },
  "filter": {
    "brightness": 4,
    "contrast": 8,
    "saturate": 6
  },
  "opacity": 1,
  "track": 20,
  "enterBegin": 0.4,
  "enterEnd": 0.8,
  "exitBegin": 6.8,
  "exitEnd": 7.2,
  "enterAnimation": "fade",
  "exitAnimation": "fade",
  "videoBegin": 3,
  "videoEnd": 10,
  "volume": 0
}

This layer:

• Uses a 620 × 420 composition box.
• Crops source video to fill the box with cover.
• Places its center at (1460, 650).
• Rotates four degrees counterclockwise around the center.
• Clips every corner to a 32-pixel radius.
• Makes small color adjustments.
• Sits on track 20 above lower-track elements.
• Fades onto the timeline and trims seconds 3 through 10 from the source.

The JSON is valid only if the URL, timings, effect names, project limits, and source duration are also valid. Visual quality still needs an editor preview and render.

radius: round media corners with an object

The property is named radius, and its value is an object:

{
  "radius": {
    "tl": 24,
    "tr": 24,
    "bl": 24,
    "br": 24
  }
}

Corner keys are:

Key	Corner
tl	Top left
tr	Top right
bl	Bottom left
br	Bottom right

Values are pixels. radius is supported by image, video, and GIF elements. It is not the way to style a text/HTML card; text and HTML use their style and customCode CSS surface for border radius, shadows, and CSS filters.

Asymmetric corners are valid:

{
  "radius": {
    "tl": 48,
    "tr": 12,
    "bl": 12,
    "br": 48
  }
}

Use asymmetry deliberately. A consistent card system is easier to recognize and review than random corner values per item.

Radius mistakes

• Sending "radius": 24 instead of the object
• Using CSS-style keys such as topLeft
• Applying it to a text element instead of styling its HTML/CSS
• Choosing a radius larger than the layer geometry can support visually
• Reviewing on a flat background where clipping artifacts are hard to see
• Forgetting that a rotated card exposes the background around its corners

Test against a high-contrast background and inspect all four corners at full resolution.

angle: rotate around the anchor

angle is measured in degrees and accepts values from -360 through 360. A positive or negative value changes the rotation direction. The transform origin is controlled by anchor.

{
  "x": 960,
  "y": 540,
  "width": 700,
  "height": 460,
  "anchor": "center-center",
  "angle": 6
}

With center-center, (960, 540) represents the center and the layer rotates around that center. With top-left, the same coordinates represent a different reference point and the card swings around its top-left corner.

Allowed anchors are the nine positions from top-left through bottom-right. Use a center anchor for cards that should rotate in place. Use an edge anchor when the visual intentionally hinges or fans from a corner.

Rotation changes the occupied footprint

The width and height describe the unrotated box. Once rotated, its visible corners extend beyond that box's original axis-aligned bounds. Leave enough margin to avoid clipping against the canvas or obscuring nearby text.

Do not position a rotated layer by trial-and-error values alone. In the Zvid Editor, show safe regions and inspect the first and last visible frame. A motion or fade can make a card cross an edge even when its steady state looks correct.

position and x/y are different modes

Zvid supports nine-grid presets:

{
  "position": "bottom-right",
  "width": 420,
  "height": 280
}

When a non-custom position preset is used, Zvid calculates x and y from the project and layer dimensions. Explicit x and y are ignored. If no anchor is supplied, the position value also determines the anchor.

Use presets for simple edge and center placement. Use explicit coordinates for precise composition:

{
  "position": "custom",
  "x": 1460,
  "y": 650,
  "anchor": "center-center"
}

A frequent debugging mistake is setting position: "bottom-right", changing x, and seeing no movement. Remove the preset or set position to custom.

filter: adjust media before composition

Supported media filter fields are:

Field	Type/range	Purpose
brightness	number, -100 to 100	Lower or raise brightness
contrast	number, -100 to 100	Lower or raise contrast
saturate	number, -100 to 100	Lower or raise saturation
hue-rotate	degree string, such as "30"	Rotate hue
blur	string from "0" to "100"	Blur the media
invert	boolean	Invert colors
colorTint	hex color	Apply a color tint

Example:

{
  "filter": {
    "brightness": -12,
    "contrast": 10,
    "saturate": -8,
    "colorTint": "#0F172A"
  }
}

Image, video, and GIF elements support the object. HTML uses CSS filters through customCode instead.

Use filters for a communication job

Good uses:

• Darken a full-bleed background so overlaid type remains readable.
• Normalize a family of approved images modestly.
• Desaturate background media so a product card leads.
• Blur a decorative duplicate layer behind a contained source.
• Tint contextual media to match a defined campaign look.

Poor uses:

• Correct fundamentally unusable exposure or white balance.
• Hide unapproved or sensitive content with a weak blur.
• Apply one strong preset to every supplier's media.
• Change product color so the visual becomes misleading.
• Stack extreme adjustments without comparing to the original.

Keep source media and filter settings in the render record so a reviewer can understand the transformation.

resize, cropParams, and layer dimensions

The layer box and source crop are separate concepts.

contain

Fits the full source inside width × height; unused space can remain. Use it for logos, product packaging, screenshots, and media where cropping would remove important information.

{
  "type": "IMAGE",
  "src": "https://cdn.example.com/product.webp",
  "width": 720,
  "height": 720,
  "resize": "contain"
}

cover

Fills the box and crops overflow. Use it when the source family has tested focal points and the box must be full.

{
  "type": "VIDEO",
  "src": "https://cdn.example.com/demo.mp4",
  "width": 720,
  "height": 480,
  "resize": "cover"
}

cropParams

Selects an explicit rectangle from the source before placing it:

{
  "cropParams": {
    "x": 180,
    "y": 40,
    "width": 1280,
    "height": 960
  }
}

Use explicit crop metadata when automation knows the subject or UI region. Do not guess the source coordinate system. Validate source dimensions and review the result when upstream media changes.

Rounded corners clip the resulting media box. Check a cover crop and radius together; the crop may move the subject close to a rounded edge.

track: control layer order

Higher tracks render above lower tracks:

[
  {
    "type": "IMAGE",
    "src": "https://cdn.example.com/background.webp",
    "width": 1920,
    "height": 1080,
    "resize": "cover",
    "track": 0
  },
  {
    "type": "VIDEO",
    "src": "https://cdn.example.com/demo.mp4",
    "width": 620,
    "height": 420,
    "position": "center-right",
    "radius": {"tl": 32, "tr": 32, "bl": 32, "br": 32},
    "track": 20
  },
  {
    "type": "TEXT",
    "text": "Live product workflow",
    "position": "center-left",
    "track": 30
  }
]

Inside a scene, scene elements render below project-level global visuals. Use project-level visuals intentionally for persistent logos, frames, or overlays. A forgotten global layer can cover every scene regardless of its local track.

Document track bands in complex projects, for example:

0–9    backgrounds
10–19  decorative shapes/media
20–29  primary cards
30–39  labels and text
40–49  global brand and safety overlays

This convention is yours, not a Zvid requirement, but it makes templates easier to inspect.

Timing fields still govern a styled layer

Every visual layer shares:

• enterBegin — begins appearing
• enterEnd — fully visible
• exitBegin — begins disappearing
• exitEnd — fully gone
• enterAnimation and exitAnimation

Times are project-relative for global visuals and scene-local for scene visuals. Without an animation, the element cuts in at enterBegin and out at exitEnd.

Video source timing is separate:

• videoBegin and videoEnd trim the source.
• enterBegin and exitEnd place the trimmed result on the composition timeline.

A perfectly styled card can still show the wrong source segment if these two clocks are confused.

Build the composition visually, then inspect JSON

The Zvid Editor is the fastest place to tune geometry because you can see the canvas and timeline together. A practical workflow:

1. Add the real source media.
2. Set the intended box and choose contain or cover.
3. Position and select the anchor.
4. Apply a small angle.
5. Add radius and modest filters.
6. Set track and timing.
7. Scrub through entry, steady state, and exit.
8. Export or inspect the API-ready JSON.
9. Validate and render the exact project.

When code authors the JSON, import it into the editor for visual review. The round trip avoids debugging layout from numbers alone.

Decide which styles can be variables

Template placeholders can resolve in numeric fields, colors, and other supported values. That does not mean every client request should control geometry or filters.

Good variable candidates:

• Approved media URL
• Brand accent from a controlled profile
• A small enumerated card angle chosen by trusted mapping
• Condition for showing the card

Keep fixed in the template unless explicitly governed:

• Corner system
• Track bands
• Crop policy
• Filter recipe
• Safe-area positions
• Animation timings

If a variable can make content unreadable, misleading, or leave the canvas, constrain it in application code and preview every allowed value.

Validate the project before spending on a render

Check:

• angle is numeric and within -360 to 360.
• opacity is between 0 and 1.
• Each radius corner is a numeric pixel value within active limits.
• Filter numbers and strings use the documented types and ranges.
• position and explicit coordinates are not fighting.
• Media supports the selected properties.
• Layer dimensions and source resolution fit account limits.
• Timeline and source trims are ordered and in range.
• Track order matches the intended overlap.

Run Zvid validation before rendering. In a stored-template workflow, preview the template with the real media and variable set. Validation catches types; preview and rendering catch composition.

Create a visual test matrix

Render a small matrix rather than one ideal source:

Test	Why
Bright and dark media	Filter and text contrast
Portrait and landscape media	Crop and resize behavior
0°, positive angle, negative angle	Anchor and canvas margins
Radius 0 and approved radius	Clipping and corner artifacts
Card above and below text	Track behavior
Entry, middle, and exit frames	Timing and animation
Full HD and every supported output profile	Pixel-scale consistency

Zvid's native image rendering is useful for static style proofs. Create a controlled image project or snapshot the relevant moment, render a small bulk set, and compare outputs at full resolution. Then render the video to verify motion and source decoding.

How to round corners without hiding composition bugs

In a timeline editor such as After Effects, a designer may round corners with a mask, track matte, or dedicated rounded-corners effect. In Zvid, the radius field styles the image or video layer directly. That makes the JSON simpler, but it does not remove the need to inspect crop, anchor, rotation, and neighboring layers together.

To create a rounded video card, start with a large enough media source, set the final layer box, apply resize, then add the corner radius. Rotate only after choosing the anchor. Add shadow or border treatment as a separate layer when the design needs it. If the corners of a video appear uneven, check whether the media is being cropped inside a different aspect ratio before increasing the radius.

This workflow applies to a webcam card, picture-in-picture tutorial, YouTube-style demo, or product mockup. The tool can reproduce the same design through a template, while the editor remains the best place to test extreme text and media. A rounded corners video should look intentional at the first frame, during motion, and at the exit—not only in a static screenshot.

Real Zvid example: styled media layer demo

The video below is a custom Zvid render adapted from the published saas-product-demo motion system, then changed only where the documented layer properties require it. The screen footage renders as one contained video layer styled with the exact properties from this guide — a 56-pixel corner radius, a slight angle rotation around a center anchor, and a modest filter — while the captions call out each property in turn.

<video controls playsinline preload="metadata" poster="https://cdn.zvid.io/images/1/blog-26-demo_thumbnail-1784366729996.jpg" aria-label="Zvid-rendered saas-product-demo demonstration for Video Layer Rounded Corners Rotation Filters" style="width:100%;height:auto;"> <source src="https://cdn.zvid.io/videos/1/blog-26-demo-1784366729847.mp4" type="video/mp4"> Your browser does not support embedded video. </video>

A real Zvid render adapted from the published saas-product-demo example for this workflow.

The inline anatomy image is also a Zvid render. It labels box, anchor, rotated footprint, corners, crop, and track in one frame so the geometry is easier to reason about.

Frequently asked questions

How do I add rounded corners to a Zvid video layer?

Set radius to an object with pixel values for tl, tr, bl, and br. The property works on video, image, and GIF media elements.

Why does changing x and y not move my layer?

A non-custom position preset causes Zvid to calculate placement and ignore explicit coordinates. Remove the preset or use position: "custom".

What point does a rotated layer rotate around?

It rotates around its anchor. Use center-center when the layer should rotate in place around its center.

Can filters be applied to text or HTML elements?

The media filter object applies to image, video, and GIF elements. Text/HTML styling uses CSS through its style and customCode fields.

Style the whole layer system

Rounded corners, rotation, and filters become reliable when the box, crop, anchor, position mode, track, and timing are designed together. Use the editor to see those relationships, inspect the API JSON, validate types and limits, and render a varied test matrix.

That process turns a few JSON properties into a repeatable card system instead of a fragile one-frame effect.