BaseClip, Transform, and Style

1. BaseClip

interface BaseClip {
  id?: string;
  type: ClipType;
  start: number;
  duration: number;
  transform?: Transform;
  zIndex?: number;
  opacity?: number;
  style?: Style;
  animations?: Animation[];
  keyframes?: Keyframe[];
  transition?: Transition;
}

2. Field reference

id

• Type: string
• Required: no
• Purpose: element identifier

type

• Type: ClipType
• Required: yes

Currently supported:

• video
• image
• text
• rect
• circle
• polygon
• audio
• subtitle
• layout
• template

start

• Type: number
• Unit: seconds
• Required: yes
• Purpose: clip start time

duration

• Type: number
• Unit: seconds
• Required: yes
• Purpose: clip duration

transform

• Type: Transform
• Required: no

zIndex

• Type: number
• Required: no
• Default: 0

opacity

• Type: number
• Required: no
• Default: 1
• Purpose: shorthand opacity for visible elements
• Compatibility rule: style.opacity has higher priority than top-level opacity

style

• Type: Style
• Required: no

animations

• Type: Animation[]
• Required: no

keyframes

• Type: Keyframe[]
• Required: no

transition

• Type: Transition
• Required: no

Notes:

• transition applies to visible elements
• audio does not run visual transitions

3. Transform

interface Transform {
  x?: number | string;
  y?: number | string;
  width?: number | string;
  height?: number | string;
  scale?: number | [number, number];
  rotation?: number;
  skew?: [number, number];
  anchor?: Anchor;
}

Currently effective at runtime:

• x
• y
• width
• height
• scale
• rotation
• skew
• anchor

4. Percentage coordinate rules

This is not a DOM-style top-left system. It uses a centered coordinate model.

Examples:

• x: "50%" means horizontal center
• y: "50%" means vertical center
• x: "0%" means far left
• x: "100%" means far right
• y: "0%" means top
• y: "100%" means bottom

5. scale

Supported forms:

{ "scale": 1.2 }

{ "scale": [1.2, 0.8] }

6. anchor

Supported values:

• center
• top-left
• top
• top-right
• left
• right
• bottom-left
• bottom
• bottom-right

7. Style

interface Style {
  opacity?: number;
  objectFit?: "fill" | "cover" | "contain";
  fill?: string | Gradient;
  stroke?: string;
  strokeWidth?: number;
  fontFamily?: string;
  fontSize?: number;
  fontWeight?: number | string;
  fontStyle?: "normal" | "italic";
  lineHeight?: number;
  letterSpacing?: number;
  textAlign?: "left" | "center" | "right";
  textWrap?: boolean;
  shadowColor?: string;
  shadowBlur?: number;
  shadowOffset?: [number, number];
  borderRadius?: number | [number, number, number, number];
  filters?: Filter[];
}

Currently effective at runtime:

• opacity
• objectFit
• fill
• stroke
• strokeWidth
• fontFamily
• fontSize
• fontWeight
• fontStyle
• lineHeight
• letterSpacing
• textAlign
• textWrap
• shadowColor
• shadowBlur
• shadowOffset
• borderRadius
• filters

8. filters

Supported:

• blur
• brightness
• contrast
• saturate
• hue
• grayscale
• sepia
• invert

9. Shared style caveats

• style.objectFit is currently meaningful on image and video
• Allowed values are fill, cover, and contain
• Other clip types should not treat objectFit as an effective field