Frameflow
Ayuda al usuario a convertir su propio texto, imágenes y videos en un prototipo de historia con desplazamiento (scroll-story) editable. El banco de trabajo open-source se encuentra en https://github.com/Karen0758/frameflow-scroll-story-workbench; su docs/USER_GUIDE.md explica los controles. Usa el proyecto existente del usuario si está presente y conserva los medios originales.
Construir el proyecto
- Identifica el orden de las escenas, el título/cuerpo de cada escena, las capas visuales, las interacciones y qué video pertenece a cada escena. Resuelve únicamente las brechas que bloqueen el trabajo real; propón valores predeterminados sensatos para duraciones y diseños.
- Mantén la textura de fondo, sujeto, sombra y texto como elementos editables por separado cuando los activos de origen lo permitan. Un sujeto en escala de grises transparente puede usar Modo Multiplicar sobre un color o textura. No hornees el color de destino en el sujeto únicamente para imitar Multiplicar.
- Para cada video, inspecciona duración, tamaño de fotograma, intervalo de movimiento y fotogramas representativos inicial, medio y final. Elige un intervalo y una tasa de fotogramas que preserven el movimiento significativo sin fotogramas estáticos innecesarios. Extrae todos los fotogramas a un tamaño de lienzo uniforme y en orden numérico de nombre de archivo natural. Si usas el extractor del navegador del banco de trabajo, recuerda que su límite es 120 fotogramas y retiene el fondo del video. Si se necesitan personas transparentes, prepara una secuencia recortada por separado; no afirmes que el extractor del navegador lo hizo.
- Verifica cabeza, ambos pies, puntas de zapatos y sombra a lo largo de la secuencia. Mantén una línea de tierra estable y una escala visual constante; si el origen tiene zoom, corrígelo antes de importar. No cubras características recortadas estirándolas u ocultándolas en CSS. Si una característica está ausente en los fotogramas de origen, explica la limitación y busca o crea fotogramas de reemplazo cuando esté autorizado.
- En Frameflow, crea/reordena escenas, importa fotogramas y texturas del mismo tamaño, establece título/cuerpo/color/transición, luego configura tiempos separados para transición, sujeto y texto. Ajusta los diseños de escritorio y móvil de forma independiente. Previsualiza la navegación hacia adelante y atrás, e inspecciona esquinas de transición, primer/último fotograma, legibilidad del texto y comportamiento de carga.
- Exporta un paquete
.frameflowcomo entrega editable e indica al usuario dónde se guardó. De lo contrario, los datos del banco de trabajo permanecen en el localStorage/IndexedDB de este navegador. Una vista previa o compilación exitosa del banco de trabajo no establece que se haya exportado o desplegado un sitio web terminado.
Cuando se soliciten código o publicación
El banco de trabajo actual exporta un paquete editable, no un sitio web público independiente. Para publicar un sitio, implementa el runtime correspondiente en el proyecto web de destino, proporciona fuentes y medios con licencia propia, y luego verifica el comportamiento del navegador en tamaños de escritorio/móvil y la URL desplegada. La publicación en un repositorio o servicio de alojamiento requiere la autorización del usuario; no subas sus videos o imágenes de fotogramas por defecto.