Overview

Structure of ScenaConfig and the principle of disabling components with false.

Every aspect of the widget — from the video source to the appearance of each UI element — is controlled through a single configuration object, ScenaConfig, passed to scena.mount(). The only required field is video.src; everything else has a sensible default or can be disabled entirely.

import {
  useScena,
  ComponentSize,
  ComponentShape,
  ComponentPosition,
  ComponentPlacement,
} from '@retoo/scena';

import '@retoo/scena/styles';

const scena = useScena();

const instance = await scena.mount({
  video: { src: '/video.mp4' },
  size: ComponentSize.MD,
  shape: ComponentShape.CIRCLE,
  container: {
    position: ComponentPosition.ABSOLUTE,
    placement: ComponentPlacement.MIDDLE_CENTER,
  },
  ctaButton: { text: 'Get in touch' },
});

Config structure

ScenaConfig is a flat object that combines component overrides and feature configs:

Key	Description
`video`	Video source, poster, autoplay, loop, muted, volume. Required.
`size`	Widget size — `xs`, `sm`, `md`, `lg`, `xl`, `xxl`
`shape`	Widget shape — `circle`, `square`, `portrait`, `landscape`
`container`	Positioning — `position`, `placement`, custom classes/styles
`videoContainer`	Video container customization
`videoLoader`	Loading indicator. Pass `false` to disable.
`videoProgress`	Progress bar. Pass `false` to disable.
`videoControls`	Play/pause controls overlay. Pass `false` to disable.
`videoVolume`	Volume control. Pass `false` to disable.
`closeButton`	Close button. Pass `false` to disable.
`ctaButton`	Call-to-action button. Pass `false` to disable.
`visibility`	Initial visibility state and animation
`preview`	Preview mode overrides

Disabling components

Pass false to any component key to remove it from the widget entirely:

import { useScena } from '@retoo/scena';

import '@retoo/scena/styles';

const scena = useScena();

await scena.mount({
  video: { src: '/video.mp4' },
  ctaButton: false,
  closeButton: false,
  videoControls: false,
  videoProgress: false,
  videoVolume: false,
});

This is different from hiding — a disabled component is never rendered in the DOM.

Runtime updates

After mount, modify any config property through the instance:

import { useScena, ComponentSize } from '@retoo/scena';

import '@retoo/scena/styles';

const scena = useScena();

const instance = await scena.mount({
  video: { src: '/video.mp4' },
});

// Deep merge — only the specified fields are updated
instance.config.mergeConfig({
  size: ComponentSize.LG,
  ctaButton: { text: 'Buy now' },
});

// Full replacement
instance.config.setConfig({
  video: { src: '/new-video.mp4' },
  size: ComponentSize.SM,
});

Both methods trigger a reactive update — the widget re-renders immediately without remounting.

Customization

Most components accept customClasses and customStyles for visual overrides without modifying the source. Classes are merged with the defaults; styles are applied as inline CSS.

import { useScena } from '@retoo/scena';

import '@retoo/scena/styles';

const scena = useScena();

await scena.mount({
  video: { src: '/video.mp4' },
  ctaButton: {
    text: 'Contact us',
    customClasses: { 
      button: 'bg-red-500 text-white'
    },
    customStyles: { 
      root: {
        marginTop: '8px'
      } 
    },
  },
});

Quick Start

Mount your first video widget in under 5 minutes.

Size

Configure widget dimensions with ComponentSize — xs, sm, md, lg, xl, xxl.