3d-effect-cinema

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

---

🛠️ 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