Biblioteca 3D de Clips Educativos Interactivos

Objetivo: Desarrollar una landing page moderna, educativa, inmersiva e interactiva para presentar una biblioteca digital 3D de clips educativos, microlecciones, videos cortos, recursos de aprendizaje, cápsulas formativas, explicaciones visuales, guías rápidas y contenido académico. Concepto principal: La web debe sentirse como entrar a una biblioteca educativa futurista donde cada estante contiene clips, lecciones y recursos interactivos. A medida que el usuario hace scroll, debe recorrer visualmente una biblioteca 3D con pasillos, estanterías, pantallas holográficas, libros digitales, tablets, clips de video flotantes, categorías temáticas, pizarras, estaciones de estudio y paneles de progreso. 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, estanterías, libros, clips, tarjetas, tablets, pantallas, iconos, pizarras, luces y fondos.; Crear una experiencia enfocada en educación, microlearning, biblioteca digital, clips educativos, búsqueda de contenido, playlists, aprendizaje visual y progreso del estudiante.; Todos los botones deben funcionar correctamente.; Optimizar para desktop, tablet y móvil.; Usar animaciones suaves, claras, educativas y con buen rendimiento.; Mantener la escena legible, organizada, accesible y premium.; Trabajar libremente para mejorar la escena 3D, la narrativa educativa, las interacciones, el diseño visual, el parallax y el flujo de conversión. Estructura: header: logo: EDU CLIPS LIBRARY 3D; menu: Home; Library; Clips; Categories; Playlists; Teachers; Pricing; Contact; boton_destacado: Start Learning; descripcion: Header fijo con fondo translúcido tipo glassmorphism, menú móvil tipo hamburguesa funcional y scroll suave hacia cada sección.; hero: titulo: Explore Educational Clips Inside an Interactive 3D Library; subtitulo: Discover short lessons, visual explanations, study playlists and learning resources through an immersive digital library experience.; botones: Enter Library; Browse Clips; Start Learning; fondo: Biblioteca educativa 3D con estanterías modernas, libros digitales, pantallas con clips, tablets flotantes, tarjetas de lección, pizarras luminosas, rutas de estudio, iconos académicos y profundidad visual.; parallax: Agregar parallax entre el título, clips, libros, estanterías, pantallas, tarjetas, luces y fondo.; canvas_3d: nombre: Interactive Educational Library; descripcion: Crear una escena 3D dentro de un canvas que represente una biblioteca educativa premium, futurista y amigable.; elementos: Entrada principal de la biblioteca; Pasillos con estanterías digitales; Libros flotantes; Pantallas holográficas con clips educativos; Tablets con microlecciones; Tarjetas de cursos; Pizarras interactivas; Estaciones de estudio; Categorías por materias; Panel de búsqueda; Playlist wall; Dashboard de progreso; Avatares de profesores o tutores abstractos; Recursos descargables; Marcadores, notas, audífonos y lápices digitales; Luces suaves, sombras limpias y profundidad visual; hotspots: Search Library; Featured Clips; Science Shelf; Math Shelf; Language Shelf; History Shelf; Study Playlists; Progress Dashboard; Start Learning; animacion_principal: El botón “Enter Library” debe activar una animación visible de cámara entrando desde la puerta principal hacia los pasillos de estanterías y el muro de clips educativos.; scroll_3d_storytelling: zonas: Entrada principal; Buscador educativo; Estanterías por categorías; Clips destacados; Playlists de aprendizaje; Estación de microlecciones; Dashboard de progreso; Profesores y tutores; Planes de acceso; Contacto final; transformaciones: translateZ para profundidad; scale para destacar clips, tarjetas y CTAs; rotate suave para libros, tablets, tarjetas, marcadores e iconos; fade para transiciones limpias; blur sutil para pasillos lejanos; movimiento de cámara tipo walkthrough por una biblioteca digital; capas_parallax: frontal: títulos; botones; CTAs; buscador; filtros; tarjetas de clips; media: estanterías; libros; tablets; pantallas; pizarras; playlists; hotspots; fondo: arquitectura de biblioteca; luces; pasillos; ventanas; sombras; partículas; secciones: nombre: Library Overview; titulo: A Smart Library Built for Fast Visual Learning; descripcion: Explicar cómo la biblioteca permite encontrar clips educativos, organizar recursos, aprender por categorías, guardar favoritos y construir rutas de estudio.; tarjetas: Short Educational Clips; Searchable Learning Library; Curated Study Playlists; Progress Tracking; nombre: Search & Filters; descripcion: Crear un buscador funcional visual.; busqueda: Search by topic; Search by subject; Search by grade level; Search by duration; Search by teacher; filtros: All; Math; Science; History; Language; Technology; Art; Study Skills; Popular; New; boton: Clear Filters; comportamiento: Al escribir o seleccionar filtro, debe cambiar el contenido visible o mostrar resultados simulados. Clear Filters debe restaurar la vista.; nombre: Featured Educational Clips; clips: How Photosynthesis Works; Fractions in 5 Minutes; The Water Cycle Explained; Basic JavaScript Loops; World War II Timeline; Spanish Vocabulary: Daily Routines; Intro to Geometry; How to Take Better Notes; campos: Título; Materia; Duración; Nivel; Profesor; Descripción breve; botones: Play Clip; Save Clip; comportamiento: Play Clip debe abrir un reproductor simulado o modal de video. Save Clip debe cambiar estado a guardado.; nombre: Clip Player; descripcion: Crear un reproductor educativo simulado.; elementos: Video placeholder; Barra de progreso; Botón play/pause; Captions; Notas rápidas; Recursos relacionados; Pregunta de repaso; botones: Play Lesson; Take Notes; Mark Complete; Download Resource; nombre: Categories / Shelves; estanterias: Math Shelf; Science Shelf; History Shelf; Language Shelf; Technology Shelf; Art Shelf; Business Shelf; Study Skills Shelf; campos: Número ficticio de clips; Nivel; Descripción; boton: Open Shelf; comportamiento: Open Shelf debe filtrar clips o enfocar la estantería en el canvas.; nombre: Study Playlists; playlists: Math Foundations; Science Essentials; Coding Basics; History Crash Course; English Practice Clips; Exam Prep Toolkit; campos: Número de clips; Duración total; Nivel; Objetivo; Progreso ficticio; boton: Start Playlist; nombre: Learning Paths; rutas: Beginner Path; Exam Review Path; Teacher Recommended Path; Fast Revision Path; Visual Learning Path; Project-Based Learning Path; campos: Pasos; Duración; Objetivos; boton: Choose Path; nombre: Teachers / Tutors; profesores: Dr. Elena Brooks — Science; Marco Ruiz — Math; Aisha Khan — History; Sofia Martin — Language; Kenji Mori — Technology; campos: Materia; Bio breve; Clips publicados; boton: View Teacher; nombre: Progress Dashboard; metricas: Clips watched; Playlists completed; Study streak; Notes saved; Quiz score; Favorite subjects; boton: View Progress; nombre: Resources; recursos: Study guide; Worksheet; Summary sheet; Quiz PDF; Flashcards; Teacher notes; campos: Formato; Materia; boton: Download Resource; nombre: Pricing / Access; planes: Free Library; Student Plus; Family Learning; Teacher Toolkit; School License; campos: Precio ficticio; Clips disponibles; Playlists; Descargas; Progreso; Soporte; boton: Choose Plan; nombre: Testimonials; testimonios: The 3D library made it easy for students to discover short lessons.; Clips, notes and playlists helped my class review faster.; The visual shelves made learning feel organized and engaging.; nombre: Contact; campos: Name; Email; Role; Learning Need; Message; boton: Contact Learning Team; datos_ficticios: Email; School partnership note; Support availability; Social links; footer: descripcion: Mantener diseño limpio, amplio, educativo y profesional. Interacciones obligatorias: El menú debe navegar con scroll suave a cada sección.; Enter Library debe activar una animación guiada en el canvas 3D.; Browse Clips debe llevar a Clips.; Start Learning debe llevar a Playlists o Pricing.; Los hotspots del canvas deben mostrar información.; El buscador debe filtrar o mostrar resultados simulados.; Los filtros deben cambiar contenido visible.; Clear Filters debe restaurar la vista.; Play Clip debe abrir reproductor simulado.; Save Clip debe cambiar estado a guardado.; Play Lesson debe cambiar estado a reproducción.; Take Notes debe abrir panel de notas.; Mark Complete debe actualizar progreso visual.; Download Resource debe mostrar confirmación.; Open Shelf debe filtrar clips o enfocar estantería.; Start Playlist debe seleccionar playlist y actualizar progreso.; Choose Path debe seleccionar ruta y mostrar resumen.; View Teacher debe abrir perfil o filtrar clips.; View Progress debe abrir dashboard.; Choose Plan debe seleccionar plan o llevar a Contact.; El formulario debe validar campos y mostrar confirmación.; El menú móvil debe abrir y cerrar correctamente.; El scroll debe activar animaciones 3D y parallax. Animaciones: Al hacer scroll, la cámara debe moverse desde la entrada de la biblioteca hacia estanterías, clips y dashboard de progreso.; Las estanterías deben aparecer desde profundidad usando translateZ, scale y fade.; Los libros deben flotar con rotación suave.; Las pantallas de clips deben encenderse progresivamente.; Las tarjetas de clips deben salir desde los estantes como paneles 3D.; Los filtros deben reorganizar clips con transición suave.; El reproductor debe abrirse con efecto de zoom limpio.; Las barras de progreso deben llenarse al entrar en pantalla.; Los nodos de learning paths deben iluminarse paso a paso.; Los recursos descargables deben deslizarse como documentos 3D.; Las métricas del dashboard deben animarse con conteo progresivo.; Los fondos, pasillos, ventanas, estanterías y luces deben moverse más lento para generar profundidad.; Agregar partículas suaves tipo polvo de biblioteca, glow azul/cian, reflejos de cristal, texturas de papel digital, sombras limpias y luz cálida de estudio.; Evitar movimientos bruscos, rápidos o caóticos. Estilo visual: descripcion: Educativo, tecnológico, claro, premium, amigable e inspirador.; inspiracion: bibliotecas modernas; plataformas EdTech; microlearning; academias online; salas de estudio digitales; dashboards educativos; bibliotecas interactivas; experiencias de aprendizaje visual; paleta: Azul noche; Cian educativo; Blanco marfil; Verde aprendizaje; Amarillo suave para destacados; Gris grafito; Beige papel; Morado tecnológico como acento; componentes: glassmorphism claro y oscuro; tarjetas limpias; luces suaves; estanterías digitales; texturas de papel; sombras elegantes; iconos académicos; composición ordenada; sensacion: Claridad, descubrimiento, aprendizaje, organización, motivación y progreso. Resultado esperado: Una landing page completa, inmersiva y funcional para “3D Interactive Library Educational Clips”, con canvas 3D, biblioteca educativa interactiva, buscador, filtros, clips, reproductor, estanterías por materia, playlists, learning paths, profesores, dashboard de progreso, recursos, pricing, formulario funcional, scroll animations 3D, parallax, hotspots, botones funcionales, diseño responsive y estética premium de plataforma EdTech.