STORYBOX
Editor de historias con bloques de programación visual
Es una app web para armar historias y presentaciones con escenas. Se ponen fondos, objetos que se arrastran y redimensionan, textos con distintas fuentes y música por escena, y después se programa qué hace cada objeto con bloques visuales de Blockly. Tiene modo presentación a pantalla completa, exportación a PDF, deshacer y rehacer, copiar y pegar, y la interfaz está en español e inglés. Todo se guarda en el servidor con una miniatura automática.
Editor de Escenas
- Escenas ilimitadas con panel lateral de miniaturas
- Escena de portada con carrusel de fondos y título automático
- Reordenar escenas con drag & drop
- Fondos de color (HSL) o imagen de biblioteca/subida propia
Objetos y Textos
- Biblioteca de objetos por categorías + subida personalizada
- Drag & drop, redimensión (8 puntos), rotación y capas (z-index)
- 5 fuentes, 6 tamaños, negrita/cursiva/subrayado y color HSL
- Modo narración fijo en la parte inferior de la escena
Programación Visual (Blockly)
- 5 bloques de movimiento: derecha, izquierda, arriba, abajo, seguir
- 7 bloques de apariencia: aumentar, disminuir, rotar, comentario, sonido, mostrar, ocultar
- 2 bloques de control: repetir y detener
- Ejecución secuencial automática durante la presentación
Multimedia y Exportación
- Música de fondo por escena con biblioteca y subida de MP3
- 8 direcciones de transición con 3 velocidades
- Presentación a pantalla completa con navegación
- Exportación a PDF (html2canvas + jsPDF) e impresión directa
Frontend
Librerías
Backend
Blockly (Google)
Motor de programación visual por bloques para comportamiento de objetos
html2canvas
Captura de escenas como imagen para PDFs y miniaturas
jsPDF
Generación de documentos PDF exportables
react-beautiful-dnd
Reordenar escenas y bloques con drag & drop
react-draggable
Posicionamiento libre de objetos en la escena
react-colorful
Selector de color HSL para fondos y textos
Framer Motion
Animaciones de paneles e interfaz
Notistack
Notificaciones visuales de acciones
17 tipos de bloques de movimiento, apariencia y control
Lienzo con drag and drop, 8 puntos de agarre, rotación y capas
Transiciones en 8 direcciones con 3 velocidades
Música de fondo por escena, en bucle
Deshacer y rehacer basado en pilas
Exportación a PDF con html2canvas y jsPDF
Interfaz en español e inglés
Guardado en servidor con miniatura generada automáticamente
SIGUIENTE PROYECTO
MDT INGENIEROS