Drommo
Biblioteca 3D elegante con videoclips educativos y búsqueda semántica
Página web

Biblioteca 3D elegante con videoclips educativos y búsqueda semántica

Prompt

Construye una biblioteca 3D elegante donde estanterías contienen volúmenes que al abrirse reproducen videoclips educativos, combinada con búsqueda semántica por tema, duración o nivel. **Entregables:** index.html, styles.css, library.js, carpeta assets/ con clips, metadatos y miniaturas. **Stack:** Three.js, video HTML5, Algolia o búsqueda local semántica, GSAP. **Descripción:** Biblioteca 3D donde cada estantería contiene volúmenes que al abrirse reproducen videoclips educativos. La experiencia combina navegación espacial elegante con búsqueda semántica para encontrar clips por tema, duración o nivel. **Búsqueda semántica:** El usuario escribe una consulta; el motor devuelve resultados rankeados por similitud semántica (embedding) y los estantes relevantes se iluminan en la escena. Los resultados muestran miniaturas y un snippet; al seleccionar, la cámara hace un fly-to hacia el volumen y el clip se reproduce. **Clips y metadatos:** Cada clip tiene metadatos JSON: title, duration, language, transcript, tags. Panel lateral muestra transcript con highlights sincronizados (scroll-to-time). Subtítulos SRT y opción de descargar transcript. **Interacciones espaciales:** Paseo libre por pasillos con orbit/first-person toggle. Foco rápido por teclado (teclas 1–9) para secciones populares. Favoritos: arrastrar clip a "carrito" 3D para crear una playlist. **Reproducción y calidad:** Streaming adaptativo si disponible; preload de thumbnails y metadatos. Pausar reproducción al alejarse; opción de reproducir en background en panel HTML. **Accesibilidad y fallback:** ARIA en controles, subtítulos, transcripciones y versión 2D con lista y reproductor. prefers-reduced-motion reduce transiciones y desactiva fly-to. **Rendimiento:** Carga progresiva de estanterías; LOD para modelos; texturas 512–1024px. Pausar render fuera de viewport; requestIdleCallback para tareas no críticas. **Analítica:** Búsquedas por término, clips reproducidos, tiempo medio por clip, rutas más comunes. Heatmaps de cámara para identificar áreas de interés.

Tipo
Página web
Tecnología
Three.js, GSAP, Algolia, video HTML5
  • 3D
  • library
  • education
  • video clips
  • semantic search
  • Algolia
  • playlist
  • first-person
Crear en Drommo

«Crear en Drommo» abre un chat en el modo correcto con el prompt ya escrito. No se envía hasta que tú lo mandes.

Ideas parecidas

CodeNova: hacker de medianochePágina web
Cyberpunk / Neón ResplandorPágina web
Espacios de coworkingPágina web
Programa de AfiliadosPágina web
Benchmarks 3DPágina web