3d-effect-cinema 0.3.0 → 0.4.1

package/README.md

@@ -1,6 +1,6 @@
 # 🎬 3D Effect Cinema
 
-> High-performance, highly customizable 3D Cinema WebGL Experience, HOC & Dynamic Background for React and Next.js powered by `@react-three/fiber` & `three`.
+> Componente de Fondo WebGL 3D de Alto Rendimiento, Motor de Efectos Bioluminiscentes y Pantalla de Carga / Intro Cinematográfica para React y Next.js impulsado por `@react-three/fiber` & `three`.
 
 [![npm version](https://img.shields.io/npm/v/3d-effect-cinema.svg?style=flat-square&color=blue)](https://www.npmjs.com/package/3d-effect-cinema)
 [![license](https://img.shields.io/npm/l/3d-effect-cinema.svg?style=flat-square)](https://github.com/esteban284/3d-effect-cinema)
@@ -9,28 +9,13 @@
 
 ---
 
-## 🚀 Live Demo
+## 🚀 Demo Interactivo en Vivo
 
-👉 **[Ver Demo en Vivo (Vercel)](https://cinema-animation-sample.vercel.app)**
+👉 **[Probar la Galería Interactiva en Vivo (Vercel)](https://cinema-animation-sample.vercel.app)**
 
 ---
 
-## ✨ Features
-
-- 🪄 **Higher-Order Component (`withCinema3D`)**: Easily wrap any React component with a dynamic 3D WebGL background.
-- 🖼️ **Dynamic Container Background (`<CinemaBackground />`)**: Fits inside any parent container (`div`, `header`, `section`, `card`) with responsive auto-resizing.
-- ✍️ **Live 3D Title Control**: Dynamic text input that updates the 3D typography in real-time.
-- 🎛️ **Interactive FX Toggles Bar**: Toggle buttons to control 3D Fire Sparks, Shockwave rings, Electric Plasma, and Ambient Embers.
-- 💥 **Multiple Interactive 3D Effects**:
-  - 🔥 **`ClickFireSparks`**: Explosive fire ember burst & local point light flash on click.
-  - 🌊 **`ClickShockwave`**: Expanding 3D energy ring wave on click.
-  - ⚡ **`ElectricPlasma`**: Interactive electric plasma tendrils reacting to pointer movement.
-  - ✨ **`SceneParticles`**: Thermal rising ambient embers.
-- 🎨 **6 Material Themes**: `emerald` (Matrix Luxe), `crimson` (Ruby Fire), `gold`, `neon`, `obsidian`, `glass`.
-
----
-
-## 📦 Installation
+## 📦 Instalación
 
 ```bash
 npm install 3d-effect-cinema three @react-three/fiber @react-three/drei @react-three/postprocessing postprocessing
@@ -38,64 +23,53 @@ npm install 3d-effect-cinema three @react-three/fiber @react-three/drei @react-t
 
 ---
 
-## 🚀 Usage Examples
-
-### 1. Using the HOC (`withCinema3D`)
+## ⚡ Inicio Rápido
 
-Wrap any existing React component with the 3D WebGL background:
+### Modo 1: Fondo 3D Permanente
 
 ```tsx
 "use client";
 
-import { withCinema3D } from "3d-effect-cinema";
+import AnimatedBackground from "3d-effect-cinema";
 
-function LandingHero() {
+export default function App() {
   return (
-    <div className="text-center text-white py-24">
-      <h1 className="text-5xl font-bold uppercase tracking-widest">
-        Enterprise Solutions
-      </h1>
-      <p className="mt-4 text-white/70 max-w-xl mx-auto">
-        Build high-performance 3D web experiences effortlessly.
-      </p>
+    // Fondo de Nubes de Energía Verde Bioluminiscente sobre Fondo Blanco
+    <div className="w-full h-screen">
+      <AnimatedBackground
+        effect="blobs"
+        effectColor="#00e676"
+        effectDensity={0.4}
+        effectSpeed={0.5}
+        backgroundColor="#ffffff"
+      />
     </div>
   );
 }
-
-// Export wrapped with 3D Cinema background
-export default withCinema3D(LandingHero, {
-  text: "UNITED OF WEB",
-  theme: "emerald",
-  interactiveSparks: true,
-  interactiveShockwave: true,
-  interactivePlasma: true,
-});
 ```
 
 ---
 
-### 2. Using the Component (`<CinemaBackground />`)
-
-Embed directly inside any container in your layout:
+### Modo 2: Pantalla de Carga / Intro Splash Screen (con Redirección Automática)
 
 ```tsx
 "use client";
 
-import { CinemaBackground } from "3d-effect-cinema";
+import AnimatedBackground from "3d-effect-cinema";
 
-export default function CustomCard() {
+export default function SplashIntro() {
   return (
-    <div className="w-full h-[500px] rounded-2xl overflow-hidden shadow-2xl">
-      <CinemaBackground
-        text="CREATIVE"
-        theme="crimson"
-        interactiveSparks={true}
-        interactivePlasma={true}
-      >
-        <button className="px-8 py-3 bg-red-600 hover:bg-red-500 text-white font-bold uppercase rounded-full">
-          Get Started
-        </button>
-      </CinemaBackground>
+    // Mantiene la animación durante 5 segundos y luego redirecciona a /home
+    <div className="w-full h-screen">
+      <AnimatedBackground
+        title="CINEMULTIPLEX"
+        fontFamily="helvetiker"
+        effect="blobs,flames"
+        effectColor="#00e5ff"
+        loaderDuration={5}
+        redirectUrl="/home"
+        containerSelector="home"
+      />
     </div>
   );
 }
@@ -103,41 +77,133 @@ export default function CustomCard() {
 
 ---
 
-### 3. Full Interactive Playground & Loader (`<CinemaLoader />`)
+## 🎨 Documentación Completa de la API
+
+### `<AnimatedBackground />`
+
+| Propiedad | Tipo | Valor por Defecto | Descripción |
+| :--- | :--- | :--- | :--- |
+| `title` | `string` | `undefined` | Texto 3D renderizado en la escena. Si se omite o se pasa `""`, queda en blanco para usarse únicamente como **fondo de efectos 3D puro**. |
+| `containerSelector` | `string` | `undefined` | ID o selector del contenedor objetivo en el DOM (ej: `containerSelector="home"` o `containerSelector="#main-hero"`) para montarse como fondo allí. |
+| `effect` | `SingleEffectType \| SingleEffectType[] \| string` | `"flames"` | Efecto WebGL o **combinación múltiple de efectos** (ej: `effect="blobs,onda"` o `effect={["flames", "plasma"]}`). |
+| `effectColor` | `string` | `undefined` | Color personalizado para **TODOS** los efectos 3D activos (soporta códigos `#HEX` como `#00e676`, `#ff0055` o nombres en español como `"azul"`, `"verde"`, `"magenta"`). |
+| `effectDensity` | `number` | `0.3` | Densidad/cantidad de partículas y llamas (`0.1` a `1.0`, por defecto `0.3` para un aspecto limpio y equilibrado). |
+| `effectSpeed` | `number` | `0.5` | Multiplicador de velocidad de movimiento 3D (`0.1` a `2.0`, por defecto `0.5` para un movimiento suave sin mareos). |
+| `backgroundColor` | `string` | `undefined` | Color o gradiente de fondo (soporta códigos `#HEX` como `#ffffff`, `#3b0712`, gradientes CSS o nombres en español `"rojo"`, `"azul"`, `"verde"`). |
+| `autoFitText` | `boolean` | `true` | Escala automáticamente el texto 3D para que jamás se desborde ni se corte del contenedor padre. |
+| `loaderDuration` | `number` | `undefined` | *(Opcional)* Duración en **segundos** para usar el componente como pantalla de carga / intro splash screen. Si no se define, se mantiene como un fondo permanente. |
+| `redirectUrl` | `string` | `undefined` | *(Opcional)* URL o ruta a la cual redireccionar automáticamente cuando finaliza la cuenta regresiva de `loaderDuration`. |
+| `onComplete` | `() => void` | `undefined` | *(Opcional)* Callback ejecutado al finalizar el temporizador de `loaderDuration`. |
+| `fontFamily` | `"cinema"` \| `"helvetiker"` \| `"gentilis"` \| `"optimer"` \| `string` | `"cinema"` | Tipografía 3D elegible (`"cinema"`, `"helvetiker"`, `"gentilis"`, `"optimer"` o URL personalizada). |
+| `fontUrl` | `string` | `undefined` | URL personalizada de un archivo Typeface JSON 3D. |
+| `letterSpacing` | `number` | `0.85` | Multiplicador del espaciado entre letras 3D. |
+| `containerToDisplay` | `"lhome"` \| `"home"` \| `ReactNode` | `undefined` | Plantilla de vista superpuesta ("lhome" para la landing de cine, o cualquier componente React). |
+| `theme` | `'emerald'` \| `'crimson'` \| `'gold'` \| `'neon'` \| `'obsidian'` \| `'glass'` | `'crimson'` | Tema de luces y material 3D del texto. |
+
+---
+
+## 🌟 Lista de Efectos Disponibles
+
+| Nombre de Efecto | Valor de Prop `effect` | Icono | Descripción |
+| :--- | :--- | :--- | :--- |
+| **Nubes Bioluminiscentes** | `"blobs"` / `"energy-blobs"` / `"plasma-blobs"` | 🟢 | Nubes bioluminiscentes de energía líquida fusionándose suavemente. |
+| **Llamas Orgánicas** | `"flames"` / `"fluid-flames"` / `"llamas"` | 🔥 | Partículas de llamas de fuego fluido de mezcla aditiva. |
+| **Cristales 3D** | `"fire"` / `"crystal-flames"` / `"cristales"` | 💎 | Conos de llamas 3D de cristal facetado. |
+| **Chispas 3D** | `"sparks"` / `"chispas"` | 💥 | Ráfagas de chispas incandescente con gravedad física. |
+| **Onda de Choque 3D** | `"shockwave"` / `"wave"` / `"onda"` | 🌊 | Anillos emissivos de onda de choque expansivos. |
+| **Plasma Eléctrico** | `"plasma"` / `"electric"` | ⚡ | Arcos de plasma eléctrico reactivos al cursor. |
+| **Ascuas Ambientales** | `"embers"` / `"ascuas"` | ✨ | Ascuas y polvo estelar flotante en el aire. |
+| **Todos los Efectos** | `"all"` / `"supernova"` / `"todos"` | 🌟 | Activa todos los efectos 3D en simultáneo. |
+
+---
+
+## 💡 Ejemplos de Uso
+
+### 1. Fondo de Nubes Bioluminiscentes sobre Fondo Blanco (Estilo Captura)
 
 ```tsx
-"use client";
+import AnimatedBackground from "3d-effect-cinema";
 
-import { CinemaLoader } from "3d-effect-cinema";
+export default function NubesVerdes() {
+  return (
+    <div className="w-full h-screen">
+      <AnimatedBackground
+        effect="blobs"
+        effectColor="#00e676"
+        backgroundColor="#ffffff"
+        effectDensity={0.4}
+        effectSpeed={0.5}
+      />
+    </div>
+  );
+}
+```
+
+---
+
+### 2. Multi-Selección de Efectos (`effect="llamas,onda,plasma"`)
+
+```tsx
+import AnimatedBackground from "3d-effect-cinema";
 
-export default function InteractiveDemo() {
+export default function MultiEfectos() {
   return (
-    <CinemaLoader
-      cinemaName="NOVA CINEMA"
-      defaultTheme="emerald"
-    />
+    <div className="w-full h-[600px]">
+      <AnimatedBackground
+        title="UNITED OF WEB"
+        fontFamily="helvetiker"
+        effect="llamas,onda,plasma"
+        effectColor="#00e5ff"
+        backgroundColor="#021a38"
+        letterSpacing={0.85}
+      />
+    </div>
   );
 }
 ```
 
 ---
 
-## 🛠️ Props Reference
+### 3. Pantalla de Carga de 5 Segundos con Redirección y Selector de Contenedor DOM
 
-### `<CinemaBackground />` & `withCinema3D(Component, options)`
+```tsx
+import AnimatedBackground from "3d-effect-cinema";
 
-| Prop / Option | Type | Default | Description |
-| :--- | :--- | :--- | :--- |
-| `text` | `string` | `"CINEMA"` | 3D Text rendered in world space |
-| `theme` | `'emerald' \| 'crimson' \| 'gold' \| 'neon' \| 'obsidian' \| 'glass'` | `'emerald'` | Material & lighting preset |
-| `customBackground` | `string` | `undefined` | Custom CSS gradient or color |
-| `interactiveSparks` | `boolean` | `true` | Enable/disable fire sparks on click |
-| `interactiveShockwave` | `boolean` | `true` | Enable/disable shockwave rings on click |
-| `interactivePlasma` | `boolean` | `true` | Enable/disable electric plasma arcs |
-| `showParticles` | `boolean` | `true` | Enable/disable ambient floating embers |
+export default function SplashIntro() {
+  return (
+    <div id="home" className="w-full h-screen">
+      <AnimatedBackground
+        title="CINEMULTIPLEX"
+        fontFamily="helvetiker"
+        effect="blobs,flames"
+        effectColor="#00e5ff"
+        loaderDuration={5}
+        redirectUrl="/home"
+        containerSelector="home"
+      />
+    </div>
+  );
+}
+```
+
+---
+
+## 🖱️ Interactividad Clic & Drag
+
+Al hacer **clic o arrastrar el ratón/touch** sobre la escena 3D, brotan ráfagas instantáneas del efecto activo **en las coordenadas exactas del puntero**.
+
+---
+
+## 👤 Autor y Desarrollador
+
+Creado con ❤️ por **Esteban Puentes**
+
+- 🌐 **Portafolio**: [esteban-puentes.vercel.app](https://esteban-puentes.vercel.app)
+- 💼 **LinkedIn**: [linkedin.com/in/esteban-puentes](https://www.linkedin.com/in/esteban-puentes/)
+- 🚀 **Demo en Vivo**: [cinema-animation-sample.vercel.app](https://cinema-animation-sample.vercel.app)
 
 ---
 
-## 📝 License
+## 📝 Licencia
 
-MIT © [Esteban](https://github.com/esteban284)
+MIT © [Esteban Puentes](https://github.com/esteban284)

package/dist/index.d.mts

@@ -13,6 +13,55 @@ interface AnimatedLetterProps {
 }
 declare function AnimatedLetter({ char, index, totalLetters, position, phase, theme, fontUrl, }: AnimatedLetterProps): react.JSX.Element | null;
 
+type SingleEffectType = "fire" | "flames" | "crystal-flames" | "fluid-flames" | "blobs" | "energy-blobs" | "plasma-blobs" | "inferno" | "sparks" | "shockwave" | "wave" | "plasma" | "electric" | "embers" | "supernova" | "all";
+type EffectType = SingleEffectType | SingleEffectType[] | string;
+interface AnimatedBackgroundProps {
+    /** View template or component to display ("lhome", "home", or custom React component) */
+    containerToDisplay?: string | react__default.ReactNode;
+    /** DOM element ID/class or container target to attach as background (e.g. "home", "#main-hero", "lhome") */
+    containerSelector?: string;
+    /** 3D Effect type or multiple effects (e.g. "blobs,onda" or ["flames", "shockwave"]) */
+    effect?: EffectType;
+    /** 3D Title rendered in world space (omit or pass "" for blank pure background effects) */
+    title?: string;
+    /** Background color or gradient (supports Spanish names like "rojo", "azul", "verde", "dorado" or #HEX / CSS colors) */
+    backgroundColor?: string;
+    /** Custom color for ALL 3D WebGL effects (e.g. "azul", "verde", "magenta", "#00e5ff", "#ff0055") */
+    effectColor?: string;
+    /** Speed multiplier for 3D motion & animation (default 0.5 for smooth relaxing motion) */
+    effectSpeed?: number;
+    /** Density / quantity of flame & WebGL particles (range 0.1 to 1.0, default 0.3 for clean elegant flames) */
+    effectDensity?: number;
+    /** Automatically scale 3D text to fit parent container perfectly (default true) */
+    autoFitText?: boolean;
+    /** Optional duration in seconds when used as a Loader / Splash screen animation */
+    loaderDuration?: number;
+    /** Optional URL to redirect to automatically when loaderDuration timer reaches 0 */
+    redirectUrl?: string;
+    /** Optional callback triggered when loaderDuration timer finishes */
+    onComplete?: () => void;
+    /** 3D Font Family ("cinema", "helvetiker", "gentilis", "optimer" or custom font URL) */
+    fontFamily?: "cinema" | "helvetiker" | "gentilis" | "optimer" | string;
+    /** Custom 3D Typeface JSON URL */
+    fontUrl?: string;
+    /** 3D Material theme */
+    theme?: MaterialTheme;
+    /** Letter spacing multiplier (default 0.85 to prevent text overlaps) */
+    letterSpacing?: number;
+    /** Container CSS class name */
+    className?: string;
+    /** Inline CSS styles */
+    style?: react__default.CSSProperties;
+    /** Custom children overlay */
+    children?: react__default.ReactNode;
+}
+/**
+ * Main Animated Background Component for 3d-effect-cinema.
+ * Supports permanent 3D background mode OR cinematic Splash Screen / Loader mode (with loaderDuration & redirectUrl).
+ * Can be targeted to a DOM container via `containerSelector` (e.g. containerSelector="home").
+ */
+declare function AnimatedBackground({ containerToDisplay, containerSelector, effect, title, backgroundColor, effectColor, effectSpeed, effectDensity, autoFitText, loaderDuration, redirectUrl, onComplete, fontFamily, fontUrl, theme, letterSpacing, className, style, children, }: AnimatedBackgroundProps): react__default.JSX.Element;
+
 interface CinemaBackgroundProps {
     /** 3D Text rendered in world space */
     text?: string;
@@ -43,8 +92,7 @@ interface CinemaBackgroundProps {
  */
 declare function CinemaBackground({ text, theme, customBackground, interactiveSparks, interactiveShockwave, interactivePlasma, showParticles, enableBloom, className, style, children, }: CinemaBackgroundProps): react.JSX.Element;
 
-interface WithCinema3DOptions extends Omit<CinemaBackgroundProps, "children"> {
-}
+type WithCinema3DOptions = Omit<CinemaBackgroundProps, "children">;
 /**
  * Higher-Order Component (HOC) that wraps any React component with the 3D WebGL Cinema background.
  *
@@ -69,32 +117,67 @@ interface CinemaLoaderProps {
 }
 declare function CinemaLoader({ cinemaName, defaultTheme, customBackground, onEnterCinema, }: CinemaLoaderProps): react.JSX.Element;
 
-declare function ClickFireSparks({ theme, enabled, }: {
+interface FireFlamesProps {
+    theme?: MaterialTheme;
+    effectColor?: string;
+    effectSpeed?: number;
+    effectDensity?: number;
+    mode?: "fluid" | "crystal" | "all";
+    enabled?: boolean;
+}
+/**
+ * Dual-Engine Fire Flames Component:
+ * Offers both Organic Liquid Energy Flame Clouds (mode="fluid") and 3D Crystal Flame Geometries (mode="crystal" or mode="all")
+ */
+declare function FireFlames({ theme, effectColor, effectSpeed, effectDensity, mode, enabled, }: FireFlamesProps): react.JSX.Element | null;
+
+interface PlasmaBlobsProps {
+    theme?: MaterialTheme;
+    effectColor?: string;
+    effectSpeed?: number;
+    effectDensity?: number;
+    enabled?: boolean;
+}
+/**
+ * Exact Bioluminescent Liquid Energy Blobs Effect (matching user screenshot)
+ */
+declare function PlasmaBlobs({ theme, effectColor, effectSpeed, effectDensity, enabled, }: PlasmaBlobsProps): react.JSX.Element | null;
+
+declare function ClickFireSparks({ theme, effectColor, effectSpeed, enabled, }: {
     theme?: MaterialTheme;
+    effectColor?: string;
+    effectSpeed?: number;
     enabled?: boolean;
 }): react.JSX.Element;
 
-declare function ClickShockwave({ theme, enabled, }: {
+declare function ClickShockwave({ theme, effectColor, effectSpeed, enabled, }: {
     theme?: MaterialTheme;
+    effectColor?: string;
+    effectSpeed?: number;
     enabled?: boolean;
 }): react.JSX.Element | null;
 
 interface ElectricPlasmaProps {
     theme?: MaterialTheme;
+    effectColor?: string;
+    effectSpeed?: number;
     enabled?: boolean;
 }
-declare function ElectricPlasma({ theme, enabled, }: ElectricPlasmaProps): react.JSX.Element | null;
+declare function ElectricPlasma({ theme, effectColor, effectSpeed, enabled, }: ElectricPlasmaProps): react.JSX.Element | null;
 
 interface SceneParticlesProps {
     theme: MaterialTheme;
+    effectColor?: string;
+    effectSpeed?: number;
     visible: boolean;
 }
-declare function SceneParticles({ theme, visible }: SceneParticlesProps): react.JSX.Element | null;
+declare function SceneParticles({ theme, effectColor, effectSpeed, visible }: SceneParticlesProps): react.JSX.Element | null;
 
 interface CameraRigProps {
     phase: "loading" | "entering" | "idle" | "exiting";
+    effectSpeed?: number;
 }
-declare function CameraRig({ phase }: CameraRigProps): null;
+declare function CameraRig({ phase, effectSpeed }: CameraRigProps): null;
 
 interface EffectState {
     sparks: boolean;
@@ -118,4 +201,4 @@ declare function CinemaHome({ cinemaName, webTheme }: {
     webTheme?: string;
 }): react.JSX.Element;
 
-export { AnimatedLetter, CameraRig, CinemaBackground, type CinemaBackgroundProps, CinemaHome, CinemaLoader, ClickFireSparks, ClickShockwave, type EffectState, ElectricPlasma, LoaderOverlay, type MaterialTheme, SceneParticles, type WithCinema3DOptions, withCinema3D };
+export { AnimatedBackground, type AnimatedBackgroundProps, AnimatedLetter, CameraRig, CinemaBackground, type CinemaBackgroundProps, CinemaHome, CinemaLoader, ClickFireSparks, ClickShockwave, type EffectState, type EffectType, ElectricPlasma, FireFlames, LoaderOverlay, type MaterialTheme, PlasmaBlobs, SceneParticles, type WithCinema3DOptions, AnimatedBackground as default, withCinema3D };

package/dist/index.d.ts

@@ -13,6 +13,55 @@ interface AnimatedLetterProps {
 }
 declare function AnimatedLetter({ char, index, totalLetters, position, phase, theme, fontUrl, }: AnimatedLetterProps): react.JSX.Element | null;
 
+type SingleEffectType = "fire" | "flames" | "crystal-flames" | "fluid-flames" | "blobs" | "energy-blobs" | "plasma-blobs" | "inferno" | "sparks" | "shockwave" | "wave" | "plasma" | "electric" | "embers" | "supernova" | "all";
+type EffectType = SingleEffectType | SingleEffectType[] | string;
+interface AnimatedBackgroundProps {
+    /** View template or component to display ("lhome", "home", or custom React component) */
+    containerToDisplay?: string | react__default.ReactNode;
+    /** DOM element ID/class or container target to attach as background (e.g. "home", "#main-hero", "lhome") */
+    containerSelector?: string;
+    /** 3D Effect type or multiple effects (e.g. "blobs,onda" or ["flames", "shockwave"]) */
+    effect?: EffectType;
+    /** 3D Title rendered in world space (omit or pass "" for blank pure background effects) */
+    title?: string;
+    /** Background color or gradient (supports Spanish names like "rojo", "azul", "verde", "dorado" or #HEX / CSS colors) */
+    backgroundColor?: string;
+    /** Custom color for ALL 3D WebGL effects (e.g. "azul", "verde", "magenta", "#00e5ff", "#ff0055") */
+    effectColor?: string;
+    /** Speed multiplier for 3D motion & animation (default 0.5 for smooth relaxing motion) */
+    effectSpeed?: number;
+    /** Density / quantity of flame & WebGL particles (range 0.1 to 1.0, default 0.3 for clean elegant flames) */
+    effectDensity?: number;
+    /** Automatically scale 3D text to fit parent container perfectly (default true) */
+    autoFitText?: boolean;
+    /** Optional duration in seconds when used as a Loader / Splash screen animation */
+    loaderDuration?: number;
+    /** Optional URL to redirect to automatically when loaderDuration timer reaches 0 */
+    redirectUrl?: string;
+    /** Optional callback triggered when loaderDuration timer finishes */
+    onComplete?: () => void;
+    /** 3D Font Family ("cinema", "helvetiker", "gentilis", "optimer" or custom font URL) */
+    fontFamily?: "cinema" | "helvetiker" | "gentilis" | "optimer" | string;
+    /** Custom 3D Typeface JSON URL */
+    fontUrl?: string;
+    /** 3D Material theme */
+    theme?: MaterialTheme;
+    /** Letter spacing multiplier (default 0.85 to prevent text overlaps) */
+    letterSpacing?: number;
+    /** Container CSS class name */
+    className?: string;
+    /** Inline CSS styles */
+    style?: react__default.CSSProperties;
+    /** Custom children overlay */
+    children?: react__default.ReactNode;
+}
+/**
+ * Main Animated Background Component for 3d-effect-cinema.
+ * Supports permanent 3D background mode OR cinematic Splash Screen / Loader mode (with loaderDuration & redirectUrl).
+ * Can be targeted to a DOM container via `containerSelector` (e.g. containerSelector="home").
+ */
+declare function AnimatedBackground({ containerToDisplay, containerSelector, effect, title, backgroundColor, effectColor, effectSpeed, effectDensity, autoFitText, loaderDuration, redirectUrl, onComplete, fontFamily, fontUrl, theme, letterSpacing, className, style, children, }: AnimatedBackgroundProps): react__default.JSX.Element;
+
 interface CinemaBackgroundProps {
     /** 3D Text rendered in world space */
     text?: string;
@@ -43,8 +92,7 @@ interface CinemaBackgroundProps {
  */
 declare function CinemaBackground({ text, theme, customBackground, interactiveSparks, interactiveShockwave, interactivePlasma, showParticles, enableBloom, className, style, children, }: CinemaBackgroundProps): react.JSX.Element;
 
-interface WithCinema3DOptions extends Omit<CinemaBackgroundProps, "children"> {
-}
+type WithCinema3DOptions = Omit<CinemaBackgroundProps, "children">;
 /**
  * Higher-Order Component (HOC) that wraps any React component with the 3D WebGL Cinema background.
  *
@@ -69,32 +117,67 @@ interface CinemaLoaderProps {
 }
 declare function CinemaLoader({ cinemaName, defaultTheme, customBackground, onEnterCinema, }: CinemaLoaderProps): react.JSX.Element;
 
-declare function ClickFireSparks({ theme, enabled, }: {
+interface FireFlamesProps {
+    theme?: MaterialTheme;
+    effectColor?: string;
+    effectSpeed?: number;
+    effectDensity?: number;
+    mode?: "fluid" | "crystal" | "all";
+    enabled?: boolean;
+}
+/**
+ * Dual-Engine Fire Flames Component:
+ * Offers both Organic Liquid Energy Flame Clouds (mode="fluid") and 3D Crystal Flame Geometries (mode="crystal" or mode="all")
+ */
+declare function FireFlames({ theme, effectColor, effectSpeed, effectDensity, mode, enabled, }: FireFlamesProps): react.JSX.Element | null;
+
+interface PlasmaBlobsProps {
+    theme?: MaterialTheme;
+    effectColor?: string;
+    effectSpeed?: number;
+    effectDensity?: number;
+    enabled?: boolean;
+}
+/**
+ * Exact Bioluminescent Liquid Energy Blobs Effect (matching user screenshot)
+ */
+declare function PlasmaBlobs({ theme, effectColor, effectSpeed, effectDensity, enabled, }: PlasmaBlobsProps): react.JSX.Element | null;
+
+declare function ClickFireSparks({ theme, effectColor, effectSpeed, enabled, }: {
     theme?: MaterialTheme;
+    effectColor?: string;
+    effectSpeed?: number;
     enabled?: boolean;
 }): react.JSX.Element;
 
-declare function ClickShockwave({ theme, enabled, }: {
+declare function ClickShockwave({ theme, effectColor, effectSpeed, enabled, }: {
     theme?: MaterialTheme;
+    effectColor?: string;
+    effectSpeed?: number;
     enabled?: boolean;
 }): react.JSX.Element | null;
 
 interface ElectricPlasmaProps {
     theme?: MaterialTheme;
+    effectColor?: string;
+    effectSpeed?: number;
     enabled?: boolean;
 }
-declare function ElectricPlasma({ theme, enabled, }: ElectricPlasmaProps): react.JSX.Element | null;
+declare function ElectricPlasma({ theme, effectColor, effectSpeed, enabled, }: ElectricPlasmaProps): react.JSX.Element | null;
 
 interface SceneParticlesProps {
     theme: MaterialTheme;
+    effectColor?: string;
+    effectSpeed?: number;
     visible: boolean;
 }
-declare function SceneParticles({ theme, visible }: SceneParticlesProps): react.JSX.Element | null;
+declare function SceneParticles({ theme, effectColor, effectSpeed, visible }: SceneParticlesProps): react.JSX.Element | null;
 
 interface CameraRigProps {
     phase: "loading" | "entering" | "idle" | "exiting";
+    effectSpeed?: number;
 }
-declare function CameraRig({ phase }: CameraRigProps): null;
+declare function CameraRig({ phase, effectSpeed }: CameraRigProps): null;
 
 interface EffectState {
     sparks: boolean;
@@ -118,4 +201,4 @@ declare function CinemaHome({ cinemaName, webTheme }: {
     webTheme?: string;
 }): react.JSX.Element;
 
-export { AnimatedLetter, CameraRig, CinemaBackground, type CinemaBackgroundProps, CinemaHome, CinemaLoader, ClickFireSparks, ClickShockwave, type EffectState, ElectricPlasma, LoaderOverlay, type MaterialTheme, SceneParticles, type WithCinema3DOptions, withCinema3D };
+export { AnimatedBackground, type AnimatedBackgroundProps, AnimatedLetter, CameraRig, CinemaBackground, type CinemaBackgroundProps, CinemaHome, CinemaLoader, ClickFireSparks, ClickShockwave, type EffectState, type EffectType, ElectricPlasma, FireFlames, LoaderOverlay, type MaterialTheme, PlasmaBlobs, SceneParticles, type WithCinema3DOptions, AnimatedBackground as default, withCinema3D };