PkgFoundry
Catalog npm
Back to packageRELEASE DETAILS

0.5.0

npm

3d-effect-cinema

> 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`.

Published5 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.

npm version license React Three.js

🚀 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 />

PropiedadTipoValor por DefectoDescripción
titlestringundefinedTexto 3D renderizado en la escena. Si se omite o se pasa "", queda en blanco para usarse únicamente como fondo de efectos 3D puro.
containerSelectorstringundefinedID o selector del contenedor objetivo en el DOM (ej: containerSelector="home" o containerSelector="#main-hero") para montarse como fondo allí.
effectSingleEffectType | SingleEffectType[] | string"flames"Efecto WebGL o combinación múltiple de efectos (ej: effect="blobs,onda" o effect={["flames", "plasma"]}).
effectColorstringundefinedColor personalizado para TODOS los efectos 3D activos (soporta códigos #HEX como #00e676, #ff0055 o nombres en español como "azul", "verde", "magenta").
textColorstringundefinedColor personalizado para las letras del texto 3D (soporta códigos #HEX como #FFD700, #ffffff o nombres en español "blanco", "dorado", "rojo", "azul").
effectDensitynumber0.3Densidad/cantidad de partículas y llamas (0.1 a 1.0, por defecto 0.3 para un aspecto limpio y equilibrado).
effectSpeednumber0.5Multiplicador de velocidad de movimiento 3D (0.1 a 2.0, por defecto 0.5 para un movimiento suave sin mareos).
backgroundColorstringundefinedColor o gradiente de fondo (soporta códigos #HEX como #ffffff, #3b0712, gradientes CSS o nombres en español "rojo", "azul", "verde").
autoFitTextbooleantrueEscala automáticamente el texto 3D para que jamás se desborde ni se corte del contenedor padre.
loaderDurationnumberundefined(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.
redirectUrlstringundefined(Opcional) URL o ruta a la cual redireccionar automáticamente cuando finaliza la cuenta regresiva de loaderDuration.
onComplete() => voidundefined(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).
fontUrlstringundefinedURL personalizada de un archivo Typeface JSON 3D.
letterSpacingnumber0.85Multiplicador del espaciado proporcional entre letras 3D.
containerToDisplay"lhome" | "home" | ReactNodeundefinedPlantilla 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

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

Distribution files

1 collected
Distribution 1

Source distribution

Source file
Checksums from source
{
  "shasum": "a77ebc913a88304ba4b8f4ee113823f550f26c61",
  "tarball": "https://registry.npmjs.org/3d-effect-cinema/-/3d-effect-cinema-0.5.0.tgz",
  "fileCount": 14,
  "integrity": "sha512-f35cZ7Vl+MxX3yhWAtOq1lVKBaO7kkas1zumRQbM/qllG3FRmAX8SgzgNRgYpdrIpqjrHmqExxqKf1G9hMLSWg==",
  "signatures": [
    {
      "sig": "MEUCIBKE2VcG5sQtmqritw7hehpGedY0sdZBc+kUiOKTY8tVAiEA01t08jP+EdqHzS3sNwk4UqkCHx1sBXft7SqbTbJVFgY=",
      "keyid": "SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"
    }
  ],
  "unpackedSize": 475652
}

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:5479ec352daa9573e56791d8a35ee4645d05982a4f9e0ea97c084ec8aea2af05

Other collected versions

0.7.124 Sept0.7.024 Sept0.5.415 Sept0.5.315 Sept0.5.215 Sept0.5.115 SeptView all collected versions →