Preview

Try adjusting parameters bellow to see how they affect the Infusion effect. Toggle the global Infusion switch to enable/disable 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 preview

History

This component was initially invented in Sigma File Manager app

Installation

npx sigma-ui add infusion

Examples

Full-page Effect

By default, Infusion component affects the entire page:

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

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

Contained Effect

Use relative prop to contain the effect within a specific container:

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

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