Bounded media composition model

Validates a fictional layered scene with a gradient, masked image, transforms and text without rendering untrusted markup.

media-composition-model · media/compositionModel

media composition

Props

blendMode
layers
mask
transform

Live example loads in an isolated same-origin preview frame.

Source (media-composition-model/entry.ts)

import { defineExample } from '../registry.ts';

export const mediaCompositionModelExample = defineExample({
  id: 'media-composition-model',
  title: 'Bounded media composition model',
  description:
    'Validates a fictional layered scene with a gradient, masked image, transforms and text without rendering untrusted markup.',
  tags: ['media', 'composition', 'safety'],
  component: 'media/compositionModel',
  props: ['layers', 'mask', 'blendMode', 'transform'],
  load: () => import('./MediaCompositionModelExample.svelte'),
});