Media Text

Text filled with an image or video, creating a clipping mask effect.

Import

import { MediaText } from "@igorao79/uivix";

Your text

Image

Image fill

<MediaText
  src="/ocean.jpg"
  className="text-6xl font-black"
>
  OCEAN
</MediaText>

Video fill

<MediaText
  videoSrc="/my-video.mp4"
  className="text-6xl font-black text-white"
>
  WAVES
</MediaText>

Pass a videoSrc prop with a local or hosted video URL. The video will play inside the text using a mix-blend-mode technique.

Prop	Type	Default	Description
children	string	-	The text content (required)
src	string	-	Image URL to fill the text
videoSrc	string	-	Video URL to fill the text
backgroundSize	string	"cover"	CSS background-size (image mode)
backgroundPosition	string	"center"	CSS background-position (image mode)
loop	boolean	true	Loop video (video mode)
muted	boolean	true	Mute video (video mode)
as	ElementType	"h1"	HTML tag to render
className	string	-	Additional CSS classes