Splash Water Video Masking

A video element clipped with an SVG mask so footage plays inside a splash-water shape, for creative hero and showcase sections.

UI Layouts byui layout

import SplashWaterVideoMasking from "@/components/ui/splashwater-videomasking";

export default function Default() {
  return (
    <div className="flex w-full items-center justify-center p-4">
      <div className="w-full max-w-2xl">
        <SplashWaterVideoMasking />
      </div>
    </div>
  );
}

Source

ui-layouts.com

Published

7/8/2026

Similar components

Explore more

Part of UI Layouts — browse the full library on 21st.dev.

Video components162 Mask components41 Visual Effect components58 Showcase components48 Clip Path components30

Dependencies

Tags

Newest

Popular

Shaders

Heros

Features

AI Chat Components

Calls to Action

Buttons

Testimonials

Pricing Sections

Text Components

Dependencies

Tags

Splash Water Video Masking

Tags

Source

Published

Similar components

Explore more