Back to packageRELEASE DETAILS

0.5.4

npm

3d-effect-cinema

High-performance WebGL 3D background effects and cinematic splash intro loader for React and Next.js

Published15 Sept 2026

Direct dependencies35

Transitive dependenciesNot calculated

README

Current package documentation

🎬 3D Effect Cinema (v0.7.0)

Componente de Fondo WebGL 3D de Alto Rendimiento, Motor de Efectos Bioluminiscentes, Tipografía 3D Personalizable y Pantalla de Carga / Intro Cinematográfica para React y Next.js impulsado por @react-three/fiber & three. 100% Compatible con Next.js 14, 15 y 16 (App Router & Pages Router con Turbopack o Webpack) sin necesidad de configuraciones adicionales.

🚀 Novedades en v0.7.0

📋 Exportación directa a Código JSX: Botón inteligente en el modal de estudio de control para copiar de 1-clic el componente exacto con todos los parámetros configurados.
🔤 Espaciado Proporcional de Letras: Cálculo de interlineado/kerning proporcional dinámico para prevenir huecos gigantes entre espacios o caracteres.
🎨 Color Personalizado para Letras 3D (textColor): Selector de colores para el material 3D de la tipografía (soporta #HEX e independización del tema).
🔀 8 Tipografías 3D Integradas: Selección ampliada con fuentes Bold, Light, Clean, Sci-Fi y Serif.

🚀 Demo Interactivo en Vivo

👉 Probar la Galería Interactiva en Vivo (Vercel)

📦 Instalación

npm install 3d-effect-cinema three @react-three/fiber @react-three/drei

⚡ Inicio Rápido (Plug & Play en Next.js & React)

Importa <AnimatedBackground /> directamente en cualquier archivo (Server Component o Client Component):

import AnimatedBackground from "3d-effect-cinema";

export default function App() {
  return (
    <div className="w-full h-screen">
      <AnimatedBackground
        title="CINEMULTIPLEX"
        fontFamily="cinema"
        textColor="#FFD700"
        effect="blobs,flames"
        effectColor="#00e5ff"
        backgroundColor="#07080c"
      />
    </div>
  );
}

🎬 Modo Pantalla de Carga / Intro Splash Screen (con Redirección Automática)

import AnimatedBackground from "3d-effect-cinema";

export default function SplashIntro() {
  return (
    // Mantiene la animación durante 5 segundos con barra de progreso de cristal y redirecciona a /home
    <div className="w-full h-screen">
      <AnimatedBackground
        title="CINEMULTIPLEX"
        fontFamily="cinema"
        effect="blobs,flames"
        effectColor="#00e5ff"
        loaderDuration={5}
        redirectUrl="/home"
        containerSelector="home"
      />
    </div>
  );
}

🎨 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"`).
`textColor`	`string`	`undefined`	Color personalizado para las letras del texto 3D (soporta códigos `#HEX` como `#FFD700`, `#ffffff` o nombres en español `"blanco"`, `"dorado"`, `"rojo"`, `"azul"`).
`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-regular"` \| `"gentilis"` \| `"gentilis-light"` \| `"optimer"` \| `"optimer-clean"` \| `"droid-sans"` \| `"droid-serif"` \| `string`	`"cinema"`	Tipografía 3D elegible (8 tipografías integradas o URL personalizada).
`fontUrl`	`string`	`undefined`	URL personalizada de un archivo Typeface JSON 3D.
`letterSpacing`	`number`	`0.85`	Multiplicador del espaciado proporcional 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 por defecto del texto.

🛠️ Solución de Errores e Integración en Next.js

Para consultar el análisis técnico detallado de cómo la v0.5.0 resuelve los 6 problemas clásicos de Next.js (Turbopack, SSR, next-intl, Three.js duplicado y window.React), consulta la Guía Completa de Integración en Next.js.

👤 Autor y Desarrollador

Creado con ❤️ por Esteban Puentes

🌐 Portafolio: esteban-puentes.vercel.app
💼 LinkedIn: linkedin.com/in/esteban-puentes
🚀 Demo en Vivo: cinema-animation-sample.vercel.app

📝 Licencia

MIT © Esteban Puentes

Downloads & popularity

Awaiting observations

No metric observations yet

Download counts and popularity will appear here as the collector receives them.

Declared dependencies 43

Native requirements

35 direct targetsNot calculated transitive count

Package / target	Requirement	Relationship
clsx Environment { "local_name": "clsx", "alias": false, "peer_metadata": null }	`^2.1.1`	runtime
lucide-react Environment { "local_name": "lucide-react", "alias": false, "peer_metadata": null }	`^1.17.0`	runtime
tailwind-merge Environment { "local_name": "tailwind-merge", "alias": false, "peer_metadata": null }	`^3.6.0`	runtime
@radix-ui/react-slot Environment { "local_name": "@radix-ui/react-slot", "alias": false, "peer_metadata": null }	`^1.2.5`	runtime
@radix-ui/react-tabs Environment { "local_name": "@radix-ui/react-tabs", "alias": false, "peer_metadata": null }	`^1.1.14`	runtime
@radix-ui/react-avatar Environment { "local_name": "@radix-ui/react-avatar", "alias": false, "peer_metadata": null }	`^1.1.12`	runtime
@radix-ui/react-dialog Environment { "local_name": "@radix-ui/react-dialog", "alias": false, "peer_metadata": null }	`^1.1.16`	runtime
@radix-ui/react-select Environment { "local_name": "@radix-ui/react-select", "alias": false, "peer_metadata": null }	`^2.3.0`	runtime
@radix-ui/react-tooltip Environment { "local_name": "@radix-ui/react-tooltip", "alias": false, "peer_metadata": null }	`^1.2.9`	runtime
class-variance-authority Environment { "local_name": "class-variance-authority", "alias": false, "peer_metadata": null }	`^0.7.1`	runtime
@radix-ui/react-separator Environment { "local_name": "@radix-ui/react-separator", "alias": false, "peer_metadata": null }	`^1.1.9`	runtime
@radix-ui/react-scroll-area Environment { "local_name": "@radix-ui/react-scroll-area", "alias": false, "peer_metadata": null }	`^1.2.11`	runtime
@radix-ui/react-dropdown-menu Environment { "local_name": "@radix-ui/react-dropdown-menu", "alias": false, "peer_metadata": null }	`^2.1.17`	runtime
next Environment { "local_name": "next", "alias": false, "peer_metadata": null }	`15.5.12`	development
tsup Environment { "local_name": "tsup", "alias": false, "peer_metadata": null }	`^8.4.0`	development
react Environment { "local_name": "react", "alias": false, "peer_metadata": null }	`19.1.0`	development
three Environment { "local_name": "three", "alias": false, "peer_metadata": null }	`^0.184.0`	development
eslint Environment { "local_name": "eslint", "alias": false, "peer_metadata": null }	`^9`	development
mongodb Environment { "local_name": "mongodb", "alias": false, "peer_metadata": null }	`^7.3.0`	development
mongoose Environment { "local_name": "mongoose", "alias": false, "peer_metadata": null }	`^9.7.0`	development
next-intl Environment { "local_name": "next-intl", "alias": false, "peer_metadata": null }	`^4.13.0`	development
react-dom Environment { "local_name": "react-dom", "alias": false, "peer_metadata": null }	`19.1.0`	development
typescript Environment { "local_name": "typescript", "alias": false, "peer_metadata": null }	`^5`	development
@types/node Environment { "local_name": "@types/node", "alias": false, "peer_metadata": null }	`^20`	development
tailwindcss Environment { "local_name": "tailwindcss", "alias": false, "peer_metadata": null }	`^4`	development
@types/react Environment { "local_name": "@types/react", "alias": false, "peer_metadata": null }	`^19`	development
@types/three Environment { "local_name": "@types/three", "alias": false, "peer_metadata": null }	`^0.184.1`	development
postprocessing Environment { "local_name": "postprocessing", "alias": false, "peer_metadata": null }	`^6.39.1`	development
@eslint/eslintrc Environment { "local_name": "@eslint/eslintrc", "alias": false, "peer_metadata": null }	`^3`	development
@types/react-dom Environment { "local_name": "@types/react-dom", "alias": false, "peer_metadata": null }	`^19`	development
@react-three/drei Environment { "local_name": "@react-three/drei", "alias": false, "peer_metadata": null }	`^10.7.7`	development
@react-three/fiber Environment { "local_name": "@react-three/fiber", "alias": false, "peer_metadata": null }	`^9.6.1`	development
eslint-config-next Environment { "local_name": "eslint-config-next", "alias": false, "peer_metadata": null }	`15.5.12`	development
@radix-ui/react-slot Environment { "local_name": "@radix-ui/react-slot", "alias": false, "peer_metadata": null }	`^1.2.5`	development
@tailwindcss/postcss Environment { "local_name": "@tailwindcss/postcss", "alias": false, "peer_metadata": null }	`^4`	development
@react-three/postprocessing Environment { "local_name": "@react-three/postprocessing", "alias": false, "peer_metadata": null }	`^3.0.4`	development
react Environment { "local_name": "react", "alias": false, "peer_metadata": null }	`^18.0.0 \|\| ^19.0.0`	peer
three Environment { "local_name": "three", "alias": false, "peer_metadata": { "optional": true } }	`^0.150.0 \|\| ^0.160.0 \|\| ^0.170.0 \|\| ^0.184.0`	peer
react-dom Environment { "local_name": "react-dom", "alias": false, "peer_metadata": null }	`^18.0.0 \|\| ^19.0.0`	peer
postprocessing Environment { "local_name": "postprocessing", "alias": false, "peer_metadata": { "optional": true } }	`^6.0.0`	peer
@react-three/drei Environment { "local_name": "@react-three/drei", "alias": false, "peer_metadata": { "optional": true } }	`^9.0.0 \|\| ^10.0.0`	peer
@react-three/fiber Environment { "local_name": "@react-three/fiber", "alias": false, "peer_metadata": { "optional": true } }	`^8.0.0 \|\| ^9.0.0`	peer
@react-three/postprocessing Environment { "local_name": "@react-three/postprocessing", "alias": false, "peer_metadata": { "optional": true } }	`^2.0.0 \|\| ^3.0.0`	peer

Distribution files

1 collected

Distribution 1

Source distribution

Source file

Checksums from source

{
  "shasum": "b4cfef990b77aef3003c9c96e7834d9de0ba31ce",
  "tarball": "https://registry.npmjs.org/3d-effect-cinema/-/3d-effect-cinema-0.5.4.tgz",
  "fileCount": 15,
  "integrity": "sha512-YS1vb5mMEIkj9aiRvJ5C2TFaWhWzvVxbVwMLzpZdQoSD9Uo779SS+RM0mTW4jlXJf5zHxmqd5Djzfj+CHt2j+w==",
  "signatures": [
    {
      "sig": "MEUCIQDGDNecYZuPA60JNGOrt01RphZ/CtsjMVmp+2MykS0fnAIgDyhWMMiRmV/r1J9AsH36DSJPM98RWbkCsSy0mS9Ohhk=",
      "keyid": "SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"
    }
  ],
  "unpackedSize": 476876
}

Repository

PENDING

esteban284/3d-effect-cinema

Shared repository data · GitHub

License detected in repository: Not collected

Metadata history

Meaningful changes

Current collected state Current

Observed since 20 Oct, 19:34 UTC

No superseded metadata states collected. Unchanged observations do not create new revisions.

Record identity

package_version:7239d45c80df3993a3e3171f5f45806900aaf05bb2836937afd3366ee0faa440

Other collected versions

0.7.124 Sept 0.7.024 Sept 0.5.315 Sept 0.5.215 Sept 0.5.115 Sept 0.5.05 Sept View all collected versions →