Filmgrain Background Component

Film grain background effect as a component for Astro and React. Incluye una textura realista y opciones de personalización.

Instalación

npm install filmgrain-bg

Uso en Astro

---
import FilmGrain from 'filmgrain-bg/astro/FilmGrain.astro';
---
<FilmGrain
  color="#222"
  grainOpacity={0.2}
  grainImage="/ruta/tu/noiseTex.webp"
  grainAnimationSpeed={0.25}
  fullHeight={false}
>
  <!-- Tu contenido aquí -->
</FilmGrain>

Uso en React

import FilmGrain from 'filmgrain-bg/react/FilmGrain';
import noiseTex from 'filmgrain-bg/noiseTex.webp';

<FilmGrain
  color="#222"
  grainOpacity={0.2}
  grainImage={noiseTex}
  grainAnimationSpeed={0.25}
  fullHeight={false}
>
  {/* Tu contenido aquí */}
</FilmGrain>

Props disponibles

• color: Color de fondo del contenedor
• style: Estilos extra para el contenedor
• grainOpacity: Opacidad del grano (default 0.15)
• grainImage: Ruta de la textura (default noiseTex.webp)
• grainAnimationSpeed: Velocidad de la animación (default 0.15)
• fullHeight: Si el contenedor debe ocupar 100vh (default true)

Notas

• Puedes personalizar la textura usando la prop grainImage.
• El archivo noiseTex.webp está incluido en el paquete.
• Si usas Astro, importa el componente desde filmgrain-bg/astro/FilmGrain.astro.
• Si usas React, importa desde filmgrain-bg/react/FilmGrain.

Licencia

MIT