Preview

Adjust the parameters to see how they change the effect. The global Infusion switch enables the page-wide effect.

Interactive Infusion Demo

Adjust the sliders below. Notice how it overlays all components in this block.

Sample Form

Email

Message

Customize Effect

Global Infusion

Enable/disable the global page effect

Image Opacity (Light): 0.20

Image Opacity (Dark): 0.30

Blur: 64px

Noise Intensity: 0.50

Noise Opacity: 0.05

Video

Installation

npx sigma-ui@latest add infusion

Usage

<script setup lang="ts">
import { Infusion } from '@/components/ui/infusion';
</script>

<template>
  <Infusion src="/background-image.png" />
</template>

Infusion paints an image, blur, and noise layer. Without relative, the layer covers the page. With relative, it stays inside the nearest positioned parent.

This effect was first built for Sigma File Manager.

Examples

Full-page effect

<template>
  <div>
    <Infusion src="/background-image.png" />
    <div>
      <!-- Page content -->
    </div>
  </div>
</template>

Contained effect

<template>
  <div class="relative h-[400px] overflow-hidden rounded-lg">
    <Infusion
      src="/background-image.png"
      relative
    />
    <div class="relative z-10">
      <!-- Content above the effect -->
    </div>
  </div>
</template>

API Reference

Infusion

Props

Prop	Type	Default
srcrequired URL of the image or video used as the background.	string	""
opacity Opacity of the media in light mode, from 0 to 1.	number	0.2
opacityDark Opacity of the media in dark mode, from 0 to 1.	number	0.3
zIndex CSS z-index of the overlay.	number	100
blur Blur radius applied to the media, in pixels.	number	64
noiseIntensity Alpha of the generated noise pixels, from 0 to 1; 0 disables the noise layer.	number	0.5
noiseScale Scale multiplier of the noise tile (256px at 1).	number	1
noiseOpacity Opacity of the noise layer, from 0 to 1.	number	0.05
blendMode CSS mix-blend-mode of the overlay.	Property.MixBlendMode	"normal"
relative Fills the nearest positioned parent instead of the whole viewport.	boolean	false
type Whether src points to an image or a looping, muted video.	"image" | "video"	"image"

Accessibility

The layer is decorative and does not add controls. Keep text on top of it readable, and do not put information into the background image alone.

Key	Description
Tab	Moves focus past the effect. The layer is not interactive.