ef-surface

Mirror/duplicate of another element's canvas output.

Basic Usage

<ef-video id="main-video" src="video.mp4" class="size-full"></ef-video>
<ef-surface target="main-video" class="absolute top-4 right-4 w-32 h-20 rounded-lg"></ef-surface>

Picture-in-Picture Effect

Mirror video in a small preview corner.

Video Wall Effect

Create grid layouts with multiple mirrors showing different filters.

Reflection Effect

Create mirror reflection with vertical flip and fade.

Blurred Background Effect

Use enlarged, blurred surface behind main video for cinematic look.

CSS Filter Effects

Apply different CSS filters to surfaces while keeping original unchanged.

Multiple Shadow Layers

Stack surfaces with offsets to create depth and shadow effects.

Use Cases

• Picture-in-picture -- Show same source in preview corner
• Video walls -- Grid layouts with multiple mirrors
• Reflections -- Flip and fade for water/glass effects
• Backgrounds -- Blurred enlarged version behind content
• Filter effects -- Apply CSS filters to surfaces independently
• Shadow layers -- Stack offset surfaces for depth