3d-effect-cinema 0.2.0 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/README.md +148 -88
  2. package/dist/index.d.mts +165 -28
  3. package/dist/index.d.ts +165 -28
  4. package/dist/index.js +1 -1
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.mjs +1 -1
  7. package/dist/index.mjs.map +1 -1
  8. package/package.json +1 -1
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # 🎬 3D Effect Cinema
2
2
 
3
- > High-performance, customizable 3D Cinema Loader & Interactive WebGL Background Experience for React and Next.js powered by `@react-three/fiber` & `three`.
3
+ > 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`.
4
4
 
5
5
  [![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)
6
6
  [![license](https://img.shields.io/npm/l/3d-effect-cinema.svg?style=flat-square)](https://github.com/esteban284/3d-effect-cinema)
@@ -9,33 +9,13 @@
9
9
 
10
10
  ---
11
11
 
12
- ## 🚀 Live Demo & Preview
12
+ ## 🚀 Demo Interactivo en Vivo
13
13
 
14
- 👉 **[Ver Demo en Vivo (Vercel)](https://cinema-animation-sample.vercel.app)**
15
-
16
- ```
17
- +-------------------------------------------------------------------------------+
18
- | 🌟 CINEMULTIPLEX 3D - Fire Sparks & Dynamic WebGL Hero Background |
19
- | [ Gold ] [ Neon ] [ Emerald ] [ Crimson ] [ Obsidian ] [ Glass ] |
20
- +-------------------------------------------------------------------------------+
21
- ```
22
-
23
- ---
24
-
25
- ## ✨ Features
26
-
27
- - 💥 **Interactive Fire Sparks**: Click or touch anywhere on screen to trigger explosive 3D fire embers and local light flashes.
28
- - 🖼️ **Dynamic Hero Background (`<CinemaBackground />`)**: Embed the 3D WebGL background inside any container (div, hero section, card) with auto-resizing.
29
- - 🌟 **Cinematic 3D Typography**: Animated 3D extruded text with spring physics.
30
- - 🎨 **6 Material Themes**: `emerald` (Matrix Luxe), `crimson` (Ruby Fire), `gold`, `neon`, `obsidian`, `glass`.
31
- - 🎥 **Cinematic Camera Rig**: Camera dolly zoom, subtle mouse parallax, and breathing float movement.
32
- - ⚡ **Next.js & React 19 Ready**: Pre-configured with `'use client'` directives for seamless App Router integration.
14
+ 👉 **[Probar la Galería Interactiva en Vivo (Vercel)](https://cinema-animation-sample.vercel.app)**
33
15
 
34
16
  ---
35
17
 
36
- ## 📦 Installation
37
-
38
- Install the package and its peer dependencies in your React / Next.js project:
18
+ ## 📦 Instalación
39
19
 
40
20
  ```bash
41
21
  npm install 3d-effect-cinema three @react-three/fiber @react-three/drei @react-three/postprocessing postprocessing
@@ -43,35 +23,26 @@ npm install 3d-effect-cinema three @react-three/fiber @react-three/drei @react-t
43
23
 
44
24
  ---
45
25
 
46
- ## 🚀 Usage Examples
26
+ ## ⚡ Inicio Rápido
47
27
 
48
- ### 1. Dynamic Hero Section Background (`<CinemaBackground />`)
49
-
50
- Embed the interactive 3D WebGL experience inside any section of your website:
28
+ ### Modo 1: Fondo 3D Permanente
51
29
 
52
30
  ```tsx
53
31
  "use client";
54
32
 
55
- import { CinemaBackground } from "3d-effect-cinema";
33
+ import AnimatedBackground from "3d-effect-cinema";
56
34
 
57
- export default function HeroSection() {
35
+ export default function App() {
58
36
  return (
59
- <div className="relative w-full h-[600px]">
60
- <CinemaBackground
61
- text="UNITED OF WEB"
62
- theme="emerald"
63
- interactiveSparks={true}
64
- >
65
- {/* Your HTML/React overlays on top of the 3D scene */}
66
- <div className="text-center text-white pointer-events-auto">
67
- <h2 className="text-4xl font-bold tracking-widest uppercase">
68
- Search Optimization Engine
69
- </h2>
70
- <button className="mt-6 px-8 py-3 bg-emerald-500 hover:bg-emerald-400 text-black font-bold uppercase rounded-md transition-all">
71
- Explore Services
72
- </button>
73
- </div>
74
- </CinemaBackground>
37
+ // Fondo de Nubes de Energía Verde Bioluminiscente sobre Fondo Blanco
38
+ <div className="w-full h-screen">
39
+ <AnimatedBackground
40
+ effect="blobs"
41
+ effectColor="#00e676"
42
+ effectDensity={0.4}
43
+ effectSpeed={0.5}
44
+ backgroundColor="#ffffff"
45
+ />
75
46
  </div>
76
47
  );
77
48
  }
@@ -79,71 +50,160 @@ export default function HeroSection() {
79
50
 
80
51
  ---
81
52
 
82
- ### 2. Full Screen Cinema Experience (`<CinemaLoader />`)
53
+ ### Modo 2: Pantalla de Carga / Intro Splash Screen (con Redirección Automática)
83
54
 
84
55
  ```tsx
85
56
  "use client";
86
57
 
87
- import { useState } from "react";
88
- import { CinemaLoader, CinemaHome } from "3d-effect-cinema";
58
+ import AnimatedBackground from "3d-effect-cinema";
89
59
 
90
- export default function App() {
91
- const [loaded, setLoaded] = useState(false);
92
-
93
- if (!loaded) {
94
- return (
95
- <CinemaLoader
96
- cinemaName="NOVA CINEMA"
97
- defaultTheme="emerald"
98
- onEnterCinema={() => setLoaded(true)}
60
+ export default function SplashIntro() {
61
+ return (
62
+ // Mantiene la animación durante 5 segundos y luego redirecciona a /home
63
+ <div className="w-full h-screen">
64
+ <AnimatedBackground
65
+ title="CINEMULTIPLEX"
66
+ fontFamily="helvetiker"
67
+ effect="blobs,flames"
68
+ effectColor="#00e5ff"
69
+ loaderDuration={5}
70
+ redirectUrl="/home"
71
+ containerSelector="home"
99
72
  />
100
- );
101
- }
73
+ </div>
74
+ );
75
+ }
76
+ ```
77
+
78
+ ---
79
+
80
+ ## 🎨 Documentación Completa de la API
81
+
82
+ ### `<AnimatedBackground />`
83
+
84
+ | Propiedad | Tipo | Valor por Defecto | Descripción |
85
+ | :--- | :--- | :--- | :--- |
86
+ | `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**. |
87
+ | `containerSelector` | `string` | `undefined` | ID o selector del contenedor objetivo en el DOM (ej: `containerSelector="home"` o `containerSelector="#main-hero"`) para montarse como fondo allí. |
88
+ | `effect` | `SingleEffectType \| SingleEffectType[] \| string` | `"flames"` | Efecto WebGL o **combinación múltiple de efectos** (ej: `effect="blobs,onda"` o `effect={["flames", "plasma"]}`). |
89
+ | `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"`). |
90
+ | `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). |
91
+ | `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). |
92
+ | `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"`). |
93
+ | `autoFitText` | `boolean` | `true` | Escala automáticamente el texto 3D para que jamás se desborde ni se corte del contenedor padre. |
94
+ | `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. |
95
+ | `redirectUrl` | `string` | `undefined` | *(Opcional)* URL o ruta a la cual redireccionar automáticamente cuando finaliza la cuenta regresiva de `loaderDuration`. |
96
+ | `onComplete` | `() => void` | `undefined` | *(Opcional)* Callback ejecutado al finalizar el temporizador de `loaderDuration`. |
97
+ | `fontFamily` | `"cinema"` \| `"helvetiker"` \| `"gentilis"` \| `"optimer"` \| `string` | `"cinema"` | Tipografía 3D elegible (`"cinema"`, `"helvetiker"`, `"gentilis"`, `"optimer"` o URL personalizada). |
98
+ | `fontUrl` | `string` | `undefined` | URL personalizada de un archivo Typeface JSON 3D. |
99
+ | `letterSpacing` | `number` | `0.85` | Multiplicador del espaciado entre letras 3D. |
100
+ | `containerToDisplay` | `"lhome"` \| `"home"` \| `ReactNode` | `undefined` | Plantilla de vista superpuesta ("lhome" para la landing de cine, o cualquier componente React). |
101
+ | `theme` | `'emerald'` \| `'crimson'` \| `'gold'` \| `'neon'` \| `'obsidian'` \| `'glass'` | `'crimson'` | Tema de luces y material 3D del texto. |
102
+
103
+ ---
104
+
105
+ ## 🌟 Lista de Efectos Disponibles
106
+
107
+ | Nombre de Efecto | Valor de Prop `effect` | Icono | Descripción |
108
+ | :--- | :--- | :--- | :--- |
109
+ | **Nubes Bioluminiscentes** | `"blobs"` / `"energy-blobs"` / `"plasma-blobs"` | 🟢 | Nubes bioluminiscentes de energía líquida fusionándose suavemente. |
110
+ | **Llamas Orgánicas** | `"flames"` / `"fluid-flames"` / `"llamas"` | 🔥 | Partículas de llamas de fuego fluido de mezcla aditiva. |
111
+ | **Cristales 3D** | `"fire"` / `"crystal-flames"` / `"cristales"` | 💎 | Conos de llamas 3D de cristal facetado. |
112
+ | **Chispas 3D** | `"sparks"` / `"chispas"` | 💥 | Ráfagas de chispas incandescente con gravedad física. |
113
+ | **Onda de Choque 3D** | `"shockwave"` / `"wave"` / `"onda"` | 🌊 | Anillos emissivos de onda de choque expansivos. |
114
+ | **Plasma Eléctrico** | `"plasma"` / `"electric"` | ⚡ | Arcos de plasma eléctrico reactivos al cursor. |
115
+ | **Ascuas Ambientales** | `"embers"` / `"ascuas"` | ✨ | Ascuas y polvo estelar flotante en el aire. |
116
+ | **Todos los Efectos** | `"all"` / `"supernova"` / `"todos"` | 🌟 | Activa todos los efectos 3D en simultáneo. |
117
+
118
+ ---
102
119
 
103
- return <CinemaHome cinemaName="NOVA CINEMA" webTheme="neon" />;
120
+ ## 💡 Ejemplos de Uso
121
+
122
+ ### 1. Fondo de Nubes Bioluminiscentes sobre Fondo Blanco (Estilo Captura)
123
+
124
+ ```tsx
125
+ import AnimatedBackground from "3d-effect-cinema";
126
+
127
+ export default function NubesVerdes() {
128
+ return (
129
+ <div className="w-full h-screen">
130
+ <AnimatedBackground
131
+ effect="blobs"
132
+ effectColor="#00e676"
133
+ backgroundColor="#ffffff"
134
+ effectDensity={0.4}
135
+ effectSpeed={0.5}
136
+ />
137
+ </div>
138
+ );
104
139
  }
105
140
  ```
106
141
 
107
142
  ---
108
143
 
109
- ## 🎨 Material Themes
144
+ ### 2. Multi-Selección de Efectos (`effect="llamas,onda,plasma"`)
110
145
 
111
- | Theme | Description | Visual Style |
112
- | :--- | :--- | :--- |
113
- | `emerald` | Deep Matrix green green metallic glow with emerald embers | 💚 Matrix Luxe |
114
- | `crimson` | Fiery ruby red emissive metal with flame embers | ❤️ Ruby Fire |
115
- | `gold` | High-metallic polished gold with warm ambient glow | 🌟 Luxe Gold |
116
- | `neon` | Cyberpunk cyan with vibrant emissive bloom | ⚡ Cyberpunk Neon |
117
- | `obsidian` | Deep glossy purple mineral with high environment reflection | 💜 Obsidian Dark |
118
- | `glass` | Refractive glass material with chromatic dispersion | 💎 Refractive Glass |
146
+ ```tsx
147
+ import AnimatedBackground from "3d-effect-cinema";
148
+
149
+ export default function MultiEfectos() {
150
+ return (
151
+ <div className="w-full h-[600px]">
152
+ <AnimatedBackground
153
+ title="UNITED OF WEB"
154
+ fontFamily="helvetiker"
155
+ effect="llamas,onda,plasma"
156
+ effectColor="#00e5ff"
157
+ backgroundColor="#021a38"
158
+ letterSpacing={0.85}
159
+ />
160
+ </div>
161
+ );
162
+ }
163
+ ```
119
164
 
120
165
  ---
121
166
 
122
- ## 🛠️ API Reference
167
+ ### 3. Pantalla de Carga de 5 Segundos con Redirección y Selector de Contenedor DOM
123
168
 
124
- ### `<CinemaBackground />`
169
+ ```tsx
170
+ import AnimatedBackground from "3d-effect-cinema";
125
171
 
126
- | Prop | Type | Default | Description |
127
- | :--- | :--- | :--- | :--- |
128
- | `text` | `string` | `"CINEMA"` | 3D Text rendered in space |
129
- | `theme` | `'emerald' \| 'crimson' \| 'gold' \| 'neon' \| 'obsidian' \| 'glass'` | `'emerald'` | Material & light theme |
130
- | `customBackground` | `string` | `undefined` | Custom CSS gradient or color (e.g., `"radial-gradient(...)"`) |
131
- | `interactiveSparks` | `boolean` | `true` | Enables/disables fire sparks on mouse click |
132
- | `showParticles` | `boolean` | `true` | Enables/disables ambient floating embers |
172
+ export default function SplashIntro() {
173
+ return (
174
+ <div id="home" className="w-full h-screen">
175
+ <AnimatedBackground
176
+ title="CINEMULTIPLEX"
177
+ fontFamily="helvetiker"
178
+ effect="blobs,flames"
179
+ effectColor="#00e5ff"
180
+ loaderDuration={5}
181
+ redirectUrl="/home"
182
+ containerSelector="home"
183
+ />
184
+ </div>
185
+ );
186
+ }
187
+ ```
133
188
 
134
189
  ---
135
190
 
136
- ### `<CinemaLoader />`
191
+ ## 🖱️ Interactividad Clic & Drag
137
192
 
138
- | Prop | Type | Default | Description |
139
- | :--- | :--- | :--- | :--- |
140
- | `cinemaName` | `string` | `"CINEMULTIPLEX"` | Brand text displayed in 3D typography and UI |
141
- | `defaultTheme` | `MaterialTheme` | `'gold'` | Initial material theme |
142
- | `customBackground` | `string` | `undefined` | Override CSS background gradient |
143
- | `onEnterCinema` | `() => void` | **Required** | Callback triggered when user clicks Enter |
193
+ 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**.
194
+
195
+ ---
196
+
197
+ ## 👤 Autor y Desarrollador
198
+
199
+ Creado con ❤️ por **Esteban Puentes**
200
+
201
+ - 🌐 **Portafolio**: [esteban-puentes.vercel.app](https://esteban-puentes.vercel.app)
202
+ - 💼 **LinkedIn**: [linkedin.com/in/esteban-puentes](https://www.linkedin.com/in/esteban-puentes/)
203
+ - 🚀 **Demo en Vivo**: [cinema-animation-sample.vercel.app](https://cinema-animation-sample.vercel.app)
144
204
 
145
205
  ---
146
206
 
147
- ## 📝 License
207
+ ## 📝 Licencia
148
208
 
149
- MIT © [Esteban](https://github.com/esteban284)
209
+ MIT © [Esteban Puentes](https://github.com/esteban284)
package/dist/index.d.mts CHANGED
@@ -1,4 +1,5 @@
1
1
  import * as react from 'react';
2
+ import react__default from 'react';
2
3
 
3
4
  type MaterialTheme = "gold" | "neon" | "emerald" | "crimson" | "obsidian" | "glass";
4
5
  interface AnimatedLetterProps {
@@ -12,57 +13,193 @@ interface AnimatedLetterProps {
12
13
  }
13
14
  declare function AnimatedLetter({ char, index, totalLetters, position, phase, theme, fontUrl, }: AnimatedLetterProps): react.JSX.Element | null;
14
15
 
15
- interface CameraRigProps {
16
- phase: "loading" | "entering" | "idle" | "exiting";
16
+ type SingleEffectType = "fire" | "flames" | "crystal-flames" | "fluid-flames" | "blobs" | "energy-blobs" | "plasma-blobs" | "inferno" | "sparks" | "shockwave" | "wave" | "plasma" | "electric" | "embers" | "supernova" | "all";
17
+ type EffectType = SingleEffectType | SingleEffectType[] | string;
18
+ interface AnimatedBackgroundProps {
19
+ /** View template or component to display ("lhome", "home", or custom React component) */
20
+ containerToDisplay?: string | react__default.ReactNode;
21
+ /** DOM element ID/class or container target to attach as background (e.g. "home", "#main-hero", "lhome") */
22
+ containerSelector?: string;
23
+ /** 3D Effect type or multiple effects (e.g. "blobs,onda" or ["flames", "shockwave"]) */
24
+ effect?: EffectType;
25
+ /** 3D Title rendered in world space (omit or pass "" for blank pure background effects) */
26
+ title?: string;
27
+ /** Background color or gradient (supports Spanish names like "rojo", "azul", "verde", "dorado" or #HEX / CSS colors) */
28
+ backgroundColor?: string;
29
+ /** Custom color for ALL 3D WebGL effects (e.g. "azul", "verde", "magenta", "#00e5ff", "#ff0055") */
30
+ effectColor?: string;
31
+ /** Speed multiplier for 3D motion & animation (default 0.5 for smooth relaxing motion) */
32
+ effectSpeed?: number;
33
+ /** Density / quantity of flame & WebGL particles (range 0.1 to 1.0, default 0.3 for clean elegant flames) */
34
+ effectDensity?: number;
35
+ /** Automatically scale 3D text to fit parent container perfectly (default true) */
36
+ autoFitText?: boolean;
37
+ /** Optional duration in seconds when used as a Loader / Splash screen animation */
38
+ loaderDuration?: number;
39
+ /** Optional URL to redirect to automatically when loaderDuration timer reaches 0 */
40
+ redirectUrl?: string;
41
+ /** Optional callback triggered when loaderDuration timer finishes */
42
+ onComplete?: () => void;
43
+ /** 3D Font Family ("cinema", "helvetiker", "gentilis", "optimer" or custom font URL) */
44
+ fontFamily?: "cinema" | "helvetiker" | "gentilis" | "optimer" | string;
45
+ /** Custom 3D Typeface JSON URL */
46
+ fontUrl?: string;
47
+ /** 3D Material theme */
48
+ theme?: MaterialTheme;
49
+ /** Letter spacing multiplier (default 0.85 to prevent text overlaps) */
50
+ letterSpacing?: number;
51
+ /** Container CSS class name */
52
+ className?: string;
53
+ /** Inline CSS styles */
54
+ style?: react__default.CSSProperties;
55
+ /** Custom children overlay */
56
+ children?: react__default.ReactNode;
17
57
  }
18
- declare function CameraRig({ phase }: CameraRigProps): null;
58
+ /**
59
+ * Main Animated Background Component for 3d-effect-cinema.
60
+ * Supports permanent 3D background mode OR cinematic Splash Screen / Loader mode (with loaderDuration & redirectUrl).
61
+ * Can be targeted to a DOM container via `containerSelector` (e.g. containerSelector="home").
62
+ */
63
+ 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;
64
+
65
+ interface CinemaBackgroundProps {
66
+ /** 3D Text rendered in world space */
67
+ text?: string;
68
+ /** Active material & lighting theme */
69
+ theme?: MaterialTheme;
70
+ /** Custom CSS gradient or solid color */
71
+ customBackground?: string;
72
+ /** Enable/disable 3D fire sparks on click */
73
+ interactiveSparks?: boolean;
74
+ /** Enable/disable 3D shockwave rings on click */
75
+ interactiveShockwave?: boolean;
76
+ /** Enable/disable electric plasma arcs */
77
+ interactivePlasma?: boolean;
78
+ /** Enable/disable ambient floating particle embers */
79
+ showParticles?: boolean;
80
+ /** Enable bloom glow effect */
81
+ enableBloom?: boolean;
82
+ /** Optional container CSS class name */
83
+ className?: string;
84
+ /** Optional inline container styles */
85
+ style?: React.CSSProperties;
86
+ /** Children React nodes rendered on top of the 3D canvas */
87
+ children?: React.ReactNode;
88
+ }
89
+ /**
90
+ * Highly customizable 3D Cinema WebGL Background Component.
91
+ * Fits dynamically into any HTML parent container (div, header, section, card).
92
+ */
93
+ declare function CinemaBackground({ text, theme, customBackground, interactiveSparks, interactiveShockwave, interactivePlasma, showParticles, enableBloom, className, style, children, }: CinemaBackgroundProps): react.JSX.Element;
94
+
95
+ interface WithCinema3DOptions extends Omit<CinemaBackgroundProps, "children"> {
96
+ }
97
+ /**
98
+ * Higher-Order Component (HOC) that wraps any React component with the 3D WebGL Cinema background.
99
+ *
100
+ * @example
101
+ * const HeroWith3D = withCinema3D(MyHeroComponent, {
102
+ * text: "UNITED OF WEB",
103
+ * theme: "emerald",
104
+ * interactiveSparks: true,
105
+ * interactiveShockwave: true,
106
+ * });
107
+ */
108
+ declare function withCinema3D<P extends object>(WrappedComponent: react__default.ComponentType<P>, hocOptions?: WithCinema3DOptions): {
109
+ (props: P): react__default.JSX.Element;
110
+ displayName: string;
111
+ };
19
112
 
20
113
  interface CinemaLoaderProps {
21
114
  cinemaName?: string;
22
115
  defaultTheme?: MaterialTheme;
23
116
  customBackground?: string;
24
- onEnterCinema: () => void;
117
+ onEnterCinema?: () => void;
25
118
  }
26
119
  declare function CinemaLoader({ cinemaName, defaultTheme, customBackground, onEnterCinema, }: CinemaLoaderProps): react.JSX.Element;
27
120
 
28
- declare function ClickFireSparks({ theme }: {
121
+ interface FireFlamesProps {
122
+ theme?: MaterialTheme;
123
+ effectColor?: string;
124
+ effectSpeed?: number;
125
+ effectDensity?: number;
126
+ mode?: "fluid" | "crystal" | "all";
127
+ enabled?: boolean;
128
+ }
129
+ /**
130
+ * Dual-Engine Fire Flames Component:
131
+ * Offers both Organic Liquid Energy Flame Clouds (mode="fluid") and 3D Crystal Flame Geometries (mode="crystal" or mode="all")
132
+ */
133
+ declare function FireFlames({ theme, effectColor, effectSpeed, effectDensity, mode, enabled, }: FireFlamesProps): react.JSX.Element | null;
134
+
135
+ interface PlasmaBlobsProps {
136
+ theme?: MaterialTheme;
137
+ effectColor?: string;
138
+ effectSpeed?: number;
139
+ effectDensity?: number;
140
+ enabled?: boolean;
141
+ }
142
+ /**
143
+ * Exact Bioluminescent Liquid Energy Blobs Effect (matching user screenshot)
144
+ */
145
+ declare function PlasmaBlobs({ theme, effectColor, effectSpeed, effectDensity, enabled, }: PlasmaBlobsProps): react.JSX.Element | null;
146
+
147
+ declare function ClickFireSparks({ theme, effectColor, effectSpeed, enabled, }: {
29
148
  theme?: MaterialTheme;
149
+ effectColor?: string;
150
+ effectSpeed?: number;
151
+ enabled?: boolean;
30
152
  }): react.JSX.Element;
31
153
 
32
- interface LoaderOverlayProps {
33
- phase: "loading" | "entering" | "idle" | "exiting";
34
- cinemaName: string;
35
- theme: MaterialTheme;
36
- onEnter: () => void;
37
- onThemeChange: (theme: MaterialTheme) => void;
154
+ declare function ClickShockwave({ theme, effectColor, effectSpeed, enabled, }: {
155
+ theme?: MaterialTheme;
156
+ effectColor?: string;
157
+ effectSpeed?: number;
158
+ enabled?: boolean;
159
+ }): react.JSX.Element | null;
160
+
161
+ interface ElectricPlasmaProps {
162
+ theme?: MaterialTheme;
163
+ effectColor?: string;
164
+ effectSpeed?: number;
165
+ enabled?: boolean;
38
166
  }
39
- declare function LoaderOverlay({ phase, cinemaName, theme, onEnter, onThemeChange, }: LoaderOverlayProps): react.JSX.Element;
167
+ declare function ElectricPlasma({ theme, effectColor, effectSpeed, enabled, }: ElectricPlasmaProps): react.JSX.Element | null;
40
168
 
41
169
  interface SceneParticlesProps {
42
170
  theme: MaterialTheme;
171
+ effectColor?: string;
172
+ effectSpeed?: number;
43
173
  visible: boolean;
44
174
  }
45
- declare function SceneParticles({ theme, visible }: SceneParticlesProps): react.JSX.Element | null;
175
+ declare function SceneParticles({ theme, effectColor, effectSpeed, visible }: SceneParticlesProps): react.JSX.Element | null;
46
176
 
47
- interface CinemaBackgroundProps {
48
- text?: string;
49
- theme?: MaterialTheme;
50
- customBackground?: string;
51
- interactiveSparks?: boolean;
52
- showParticles?: boolean;
53
- className?: string;
54
- style?: React.CSSProperties;
55
- children?: React.ReactNode;
177
+ interface CameraRigProps {
178
+ phase: "loading" | "entering" | "idle" | "exiting";
179
+ effectSpeed?: number;
56
180
  }
57
- /**
58
- * Reusable 3D Cinema Background Component.
59
- * Fits dynamically inside any parent container (div, header, section).
60
- */
61
- declare function CinemaBackground({ text, theme, customBackground, interactiveSparks, showParticles, className, style, children, }: CinemaBackgroundProps): react.JSX.Element;
181
+ declare function CameraRig({ phase, effectSpeed }: CameraRigProps): null;
182
+
183
+ interface EffectState {
184
+ sparks: boolean;
185
+ shockwave: boolean;
186
+ plasma: boolean;
187
+ embers: boolean;
188
+ }
189
+ interface LoaderOverlayProps {
190
+ phase: "loading" | "entering" | "idle" | "exiting";
191
+ cinemaName: string;
192
+ theme: MaterialTheme;
193
+ effects: EffectState;
194
+ onTitleChange: (newTitle: string) => void;
195
+ onThemeChange: (theme: MaterialTheme) => void;
196
+ onToggleEffect: (effectName: keyof EffectState) => void;
197
+ }
198
+ declare function LoaderOverlay({ phase, cinemaName, theme, effects, onTitleChange, onThemeChange, onToggleEffect, }: LoaderOverlayProps): react.JSX.Element;
62
199
 
63
200
  declare function CinemaHome({ cinemaName, webTheme }: {
64
201
  cinemaName?: string;
65
202
  webTheme?: string;
66
203
  }): react.JSX.Element;
67
204
 
68
- export { AnimatedLetter, CameraRig, CinemaBackground, type CinemaBackgroundProps, CinemaHome, CinemaLoader, ClickFireSparks, LoaderOverlay, type MaterialTheme, SceneParticles };
205
+ 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 };