Clon de Netflix — inicio y planes de streaming

Ruta sugerida: netflix-clone Objetivo: Crear una landing page web premium, moderna, cinematográfica, oscura, inmersiva, funcional y responsive para presentar una plataforma ficticia de streaming de películas, series, documentales, animación, estrenos, listas personalizadas, perfiles de usuario, recomendaciones, trailers, reproducción simulada, membresía, catálogo y comunidad. Nota de marca: Crear una plataforma ficticia y original inspirida en servicios modernos de streaming, sin copiar logos, nombres comerciales, identidad visual exacta, textos oficiales, sonidos, assets, interfaces protegidas, colores oficiales, series reales, películas reales, thumbnails reales ni diseño exacto de Netflix u otra plataforma real. Concepto principal: La web debe sentirse como entrar a una sala de cine digital 3D donde el catálogo cobra vida. Al hacer scroll, la cámara recorre un lobby cinematográfico oscuro con pantalla gigante, posters flotantes, carruseles de contenido, tarjetas de series ficticias, luces de proyector, partículas, butacas, controles de video, perfiles de usuario y un túnel de recomendaciones. Requisitos principales: Crear una landing page completa, moderna, funcional y responsive.; Incluir un canvas 3D visible e integrado en la experiencia principal.; Agregar animaciones de scroll 3D.; Agregar efectos parallax en textos, posters, pantallas, tarjetas, carruseles, perfiles, botones, luces, butacas, controles de video y fondos.; Todos los botones deben funcionar correctamente.; Optimizar para desktop, tablet y móvil.; Usar animaciones suaves, cinematográficas, elegantes y con buen rendimiento.; Mantener la escena clara, premium, oscura, visual, ordenada y fácil de navegar.; Usar datos ficticios para títulos, géneros, ratings, fechas, episodios, trailers, perfiles, precios y membresías. Organizacion visual: max_width: 1200px o 1280px; padding_desktop: 96px a 150px por sección; padding_mobile: 24px a 32px; gaps: 24px, 32px o 48px; fondos: negro cine; rojo profundo original; violeta oscuro; azul noche; bloques glassmorphism; gradientes cinematográficos; humo sutil; líneas de luz; divisores suaves; descripcion: No amontonar posters, carruseles, textos, botones, precios, formularios ni visuales 3D. Separar cada bloque de catálogo con suficiente espacio visual.; cards: Las tarjetas de contenido deben mostrar título, género, duración, rating ficticio, año ficticio, estado, sinopsis breve y CTA de forma clara.; carruseles: Los carruseles deben tener controles visibles, navegación clara y buen espaciado.; reproductor: El reproductor debe tener controles visibles, barra de progreso y estado de reproducción. Estructura: header: logo: STREAMVERSE; menu: Home; Movies; Series; New Releases; Genres; Pricing; FAQ; Contact; botones: Start Watching; Browse Catalog; descripcion: Header fijo con fondo translúcido tipo glassmorphism oscuro, menú móvil hamburguesa funcional y scroll suave hacia cada sección.; microinteracciones: Logo con brillo sutil tipo proyector; Enlaces con underline animado; Botones con elevación, glow rojo/violeta y feedback visual; Menú móvil con transición limpia; hero: titulo: A Cinematic 3D Streaming Universe for Every Story; subtitulo: Discover original fictional movies, series, documentaries and animated worlds through an immersive streaming experience.; busqueda: input: Search movies, series or genres; selector: Action; Drama; Sci-Fi; Comedy; Documentary; Anime-inspired; Family; boton: Search StreamVerse; botones: Enter StreamVerse; Watch Trailer; Choose Plan; visual: Sala de cine 3D con pantalla gigante, trailer simulado, posters flotantes, butacas, luces de proyector, tarjetas de catálogo, controles de video, perfiles de usuario, partículas, neón sutil y profundidad visual.; canvas_3d: nombre: Streaming Cinema Experience; descripcion: Crear una escena 3D dentro de un canvas que represente un cine digital premium.; elementos: Pantalla principal 3D; Posters flotantes de títulos ficticios; Carrusel de películas; Carrusel de series; Reproductor de video simulado; Butacas de cine; Luces de proyector; Tarjetas de contenido; Perfiles de usuario; Watchlist flotante; Etiquetas de géneros; Botón play 3D; Barra de progreso; Miniaturas de episodios; Panel de recomendaciones; CTA flotante de suscripción; hotspots: Featured Trailer; Movie Shelf; Series Shelf; Continue Watching; Genres; Profiles; Watchlist; Start Watching; animacion_principal: El botón “Enter StreamVerse” debe activar una animación donde la cámara entra al lobby, cruza posters, enfoca la pantalla principal, reproduce un trailer simulado, abre un carrusel, muestra detalles de un título, guarda en watchlist y termina frente al CTA “Start Watching”.; secciones: nombre: Platform Overview; titulo: Streaming Designed Like a Private Cinema; cards: Original Fictional Catalog; Immersive Trailers; Personal Watchlists; Profiles for Everyone; nombre: Featured Trailer; titulo_destacado: Eclipse City: Season One; elementos: Poster cinematográfico; Video placeholder; Play/Pause; Barra de progreso; Control de volumen; Fullscreen; Add to Watchlist; View Details; Replay Trailer; botones: Play Trailer; Pause Trailer; Add to Watchlist; View Details; Replay Trailer; nombre: Movies; peliculas: Midnight Orbit; The Glass Harbor; Neon Wilds; Silent Comet; Velvet Heist; Desert Signal; The Last Projection; Aurora District; Paper Moon Hotel; Quantum Rain; botones: Play Preview; Add to List; More Info; nombre: Series; series: Northstar Academy; Codebreakers; Lunar Kitchen; City of Echoes; Dream Circuit; The Archive Room; Skyline Detectives; After the Signal; botones: Open Series; Watch Episode; Add Series; nombre: Content Detail; elementos: Título; Poster; Sinopsis; Géneros; Año; Duración; Rating ficticio; Cast ficticio; Director ficticio; Episodes si es serie; Similar titles; botones: Play Now; Add to Watchlist; Share; Close; nombre: Player Experience; elementos: Pantalla; Play/Pause; Barra de progreso; Tiempo actual; Duración; Volumen; Subtitles toggle; Quality selector; Next episode; Skip intro; Fullscreen; Back to catalog; nombre: Genres; generos: Action; Drama; Comedy; Sci-Fi; Fantasy; Documentary; Thriller; Romance; Family; Anime-inspired; Mystery; Adventure; boton: Explore Genre; nombre: Continue Watching; elementos: Título; Progreso; Próximo episodio; Tiempo restante; botones: Resume; Remove; nombre: Profiles; perfiles: Alex; Maya; Kids; Guest; Cinephile; botones: Select Profile; Edit Profile; Create Profile; nombre: Recommendations; categorias: Because you watched; Trending in your world; New fictional originals; Continue your mood; Short watch; Weekend picks; botones: Refresh Recommendations; Hide Title; Add Recommended; nombre: New Releases; elementos: Título; Fecha; Género; Tipo: movie, series, documentary, special; botones: Set Reminder; Watch Trailer; nombre: Watchlist; elementos: Saved movies; Saved series; Continue watching; Downloads placeholder; Favorite genres; botones: Open Watchlist; Sort Watchlist; Clear Watched; Share List; nombre: Devices; dispositivos: Smart TV; Laptop; Tablet; Phone; Console; Browser; boton: Preview Device; nombre: Kids / Family; elementos: Kids profile; Content controls; Watch limits placeholder; Friendly catalog; Parent controls; botones: Preview Kids Mode; Set Controls; Create Kids Profile; nombre: Pricing; planes: Starter; Standard Cinema; Premium 4K; Family Screen; Ultimate Studio; plan_recomendado: Premium 4K; botones: Choose Plan; Start Trial; nombre: Testimonials; testimonios: StreamVerse feels like browsing a private cinema from home.; The 3D catalog makes discovering stories feel exciting again.; Profiles, watchlists and trailers made the experience easy for everyone.; nombre: FAQ; preguntas: Is this an official Netflix website?; Are the movies and series fictional?; Can I play trailers?; Can I create profiles?; Can I save titles to a watchlist?; Can I choose a streaming plan?; Is the experience responsive on mobile?; nota: Incluir respuesta clara indicando que es una plataforma ficticia original sin afiliación con Netflix u otra marca real.; nombre: Signup / Contact; campos: Name; Email; Preferred Plan; Favorite Genre; Number of Profiles; Device Preference; Message optional; Consent Checkbox; checkbox: I understand this is a fictional streaming platform concept.; boton: Create StreamVerse Account; footer: texto: Original fictional streaming platform concept. Not affiliated with Netflix or any real streaming brand.; links: Movies; Series; Genres; Profiles; Watchlist; Devices; Pricing; Contact; Terms; Privacy; Content Policy; Social links Interacciones obligatorias: El menú debe navegar con scroll suave a cada sección.; Enter StreamVerse debe activar animación guiada en el canvas 3D.; Watch Trailer debe llevar a Featured Trailer y activar reproductor.; Choose Plan debe llevar a Pricing.; Search StreamVerse debe filtrar o mostrar resultados simulados.; Los hotspots del canvas deben mostrar información.; Play Trailer debe activar reproducción simulada.; Pause Trailer debe pausar visualmente.; Add to Watchlist debe cambiar estado.; View Details debe abrir panel.; Replay Trailer debe reiniciar trailer.; Play Preview debe abrir reproductor.; Add to List debe cambiar estado.; More Info debe abrir detalle.; Open Series debe abrir detalle.; Watch Episode debe abrir reproductor.; Add Series debe cambiar estado.; Play Now debe abrir reproductor.; Share debe mostrar confirmación.; Close debe cerrar modal.; Subtitles debe activar subtítulos simulados.; Quality debe alternar opciones.; Next Episode debe cambiar miniatura.; Skip Intro debe avanzar progreso.; Fullscreen debe activar vista expandida simulada.; Back to Catalog debe volver al catálogo.; Explore Genre debe filtrar catálogo o enfocar sección del canvas.; Resume debe abrir reproductor en progreso.; Remove debe quitar tarjeta.; Select Profile debe cambiar perfil activo.; Edit Profile debe abrir formulario.; Create Profile debe agregar perfil simulado.; Refresh Recommendations debe reorganizar resultados.; Hide Title debe ocultar tarjeta.; Add Recommended debe guardar título.; Set Reminder debe activar recordatorio simulado.; Open Watchlist debe abrir panel.; Sort Watchlist debe reorganizar.; Clear Watched debe limpiar vistos.; Share List debe mostrar confirmación.; Preview Device debe cambiar mockup de pantalla.; Preview Kids Mode debe cambiar visual.; Set Controls debe abrir panel.; Create Kids Profile debe crear perfil.; Choose Plan debe seleccionar plan y mostrar resumen.; Start Trial debe llevar a Signup.; FAQ debe expandirse y cerrarse correctamente.; Create StreamVerse Account debe validar campos, checkbox y mostrar confirmación.; El formulario debe validar campos y mostrar confirmación.; El menú móvil debe abrir y cerrar correctamente.; Todos los botones deben tener hover, active state y feedback visual. Animaciones: La cámara debe moverse desde el lobby de cine hacia pantalla principal, trailer, películas, series, géneros, perfiles, recomendaciones, dispositivos, pricing y signup.; Los posters deben salir desde profundidad usando translateZ, scale y fade.; Las filas de catálogo deben desplazarse horizontalmente con parallax suave.; La pantalla principal debe iluminar el ambiente como proyección cinematográfica.; Los trailers simulados deben activar barras de progreso y cambios de luz.; Las tarjetas de contenido deben rotar ligeramente con hover 3D.; Los perfiles deben aparecer como avatares flotantes.; Las recomendaciones deben reorganizarse con transición suave.; La watchlist debe apilar tarjetas como una bandeja 3D.; Los mockups de dispositivos deben sincronizar pantallas con animación.; Las tarjetas de pricing deben elevarse con hover 3D.; El formulario debe aparecer con transición limpia desde profundidad. Estilo visual: descripcion: Cinematográfico, oscuro, premium, moderno, inmersivo, elegante, entretenido y visual.; paleta: Negro cine; Azul noche; Rojo profundo original; Violeta oscuro; Blanco pantalla; Gris grafito; Cian sutil; Dorado suave para destacados; Verde éxito; Rojo suave para errores; recursos: Glassmorphism oscuro; Tarjetas limpias; Posters flotantes; Pantallas 3D; Reproductor; Carruseles; Perfiles; Luces de proyector; Sombras suaves; Bordes redondeados; tipografia: Tipografía moderna, bold, legible y orientada a entretenimiento. Resultado esperado: Una landing page completa, inmersiva y funcional para “Netflix Clone 3D”, con identidad original tipo “StreamVerse”, canvas 3D, sala de cine digital, posters flotantes, catálogo de películas y series ficticias, trailer destacado, reproductor completo, detalles de contenido, géneros, continue watching, perfiles, recomendaciones, estrenos, watchlist, dispositivos, modo familiar, pricing, testimonios, FAQ, signup, formulario funcional con checkbox de concepto ficticio, scroll animations 3D, parallax, hotspots, botones funcionales, diseño responsive, márgenes amplios, separación clara entre componentes y estética premium de plataforma de streaming original.