src

string

-

The URL of the video file to be displayed inside the text mask.

Required

children

ReactNode

-

The text content that will serve as the mask for the video. Can be a string or other React nodes.

Required

className

string

`undefined`

Optional additional CSS class names for the main container of the component.

Optional

autoPlay

boolean

`true`

Whether the video should start playing automatically when loaded.

Optional

muted

boolean

`true`

Whether the video's audio should be muted.

Optional

loop

boolean

`true`

Whether the video should loop back to the start when it reaches the end.

Optional

preload

`"auto" | "metadata" | "none"`

`"auto"`

Specifies how the video should be preloaded: `auto` (browser decides), `metadata` (fetch metadata only), or `none` (no preloading).

Optional

fontSize

string | number

`20` (interpreted as `20vw`)

The font size for the text mask. Numbers are interpreted as viewport width units (e.g., `20` becomes `20vw`). Strings can be any valid CSS font-size (e.g., `'100px'`, `'15em'`).

Optional

fontWeight

string | number

`"bold"`

The font weight for the text mask (e.g., `"normal"`, `"bold"`, `500`, `900`).

Optional

textAnchor

string

`"middle"`

Determines how the text is aligned relative to its `x` position (e.g., `"start"`, `"middle"`, `"end"`).

Optional

dominantBaseline

string

`"middle"`

Specifies how the text baseline is aligned relative to its `y` position (e.g., `"auto"`, `"ideographic"`, `"alphabetic"`, `"middle"`).

Optional

fontFamily

string

`"sans-serif"`

The font family for the text mask (e.g., `"Arial, sans-serif"`, `"Impact"`).

Optional

as

`"div" | "span" | "section" | "article" | "p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6"`

`"div"`

The HTML element type to render as the component's root container. This element will also be a Framer Motion component.

Optional

`...motionProps`

`HTMLMotionProps<"div">`

`undefined`

Any valid Framer Motion props for an HTML element (e.g., `initial`, `animate`, `transition`, `whileHover`, `variants`). These props are applied directly to the root container specified by the `as` prop.

Optional

Video Text

How to Import

Props

Basic Usage

On This Page

Contribute

Video Text

How to Import

Props

Basic Usage

On This Page

Contribute

React Video Text Component - Lightswind UI

Key Details of React Video Text

Video Text

How to Import

Props

Basic Usage

On This Page

Contribute

Video Text

How to Import

Props

Basic Usage

On This Page

Contribute