FilmGrain

A subtle film grain effect that adds texture and analog-style imperfections to your interface.

			<script lang="ts">
  import { FilmGrainBackground } from '$lib/components/ui';
</script>

<!-- Basic usage -->
<div class="relative">
  <FilmGrainBackground />
  <div class="relative z-10">Your content here</div>
</div>

<!-- With custom opacity -->
<div class="relative">
  <FilmGrainBackground grainOpacity={0.25} />
  <div class="relative z-10">Your content here</div>
</div>

<!-- With custom class -->
<div class="relative">
  <FilmGrainBackground class="rounded-lg" />
  <div class="relative z-10">Your content here</div>
</div>

Props

Name	Type	Default	Description
class	string	''	Additional CSS classes to apply to the component
grainOpacity	number	0.15	Controls the opacity of the film grain effect (0-1)

Implementation Details

The FilmGrain component combines a subtle dot pattern background with a dynamic film grain overlay. The grain animation is created using CSS animations with layered radial and conic gradients for an authentic film noise effect.

The component includes performance optimizations for devices with reduced motion preferences, making it accessible and lightweight.

Usage Examples

Full page background

			<div class="relative min-h-screen">
  <div class="absolute inset-0 -z-10">
    <FilmGrainBackground
      grainOpacity={0.15}
      grainScale={1.4}
      grainSpeed={2.2} 
      grainContrast={2}
      grainColor="rgba(250, 250, 250, 0.15)"
      enableDotBackground={true}
      class="mix-blend-overlay"
    />
  </div>
  
  <div class="container mx-auto p-6">
    <h1 class="text-4xl font-bold">Your Content</h1>
    <!-- Page content -->
  </div>
</div>

Card with grain background