Scroll Demo Narrator
Convierte la demo de un producto en una historia sincronizada con el scroll: una pantalla fija, el texto de cada capítulo, el color de acento y una línea de progreso que avanzan juntos.
Primeros pasos
- Agrega Scroll Demo Narrator a tu página. Dale un ancho flexible y deja que su altura se ajuste al contenido; no fijes una altura en píxeles.
- Abre Chapters. Edita los capítulos de muestra: cambia Title y Text, define un Accent por capítulo y elige una Scene para cada capítulo de demostración. Puedes tener hasta ocho capítulos.
- Para usar tu propio contenido, cambia Media de un capítulo a Image o Video, sube el archivo y elige Fit.
- Abre Layout para configurar Device Side, Frame, Content Width, Media Width, Gap, Chapter Height y Sticky Offset.
- Elige un Motion → Transition (Slide + Fade, Fade o None) y ajusta la Activation Line.
- Abre Framer Preview y desplázate despacio en escritorio y en una ventana estrecha para ver cómo la pantalla, el acento y la línea de progreso se mantienen sincronizados.
Capítulos
Cada capítulo es un bloque de texto. En escritorio, la pantalla se ubica en una columna fija junto al texto; a medida que el bloque de cada capítulo cruza la línea de activación, ese capítulo se vuelve activo. Siempre hay exactamente un capítulo activo: el primero se muestra antes de entrar en la historia y el último permanece al salir. Al subir, todo retrocede en el mismo orden, y un salto grande selecciona directamente el capítulo correcto sin reproducir los intermedios.
Un componente recién insertado comienza con la demo de cuatro capítulos de una herramienta ficticia de proyectos (Capture, Plan, Progress, Share). Esa demo es el valor predeterminado de Chapters; no hay una configuración de demostración aparte. Reemplázala con tu propio contenido.
| Control | Opciones | Predeterminado | Efecto |
|---|---|---|---|
| Title | Texto | "Chapter title" | El encabezado del capítulo. |
| Text | Texto | "One short line about this step." | Una línea de apoyo bajo el título. |
| Label | Texto | Vacío | Antetítulo pequeño y opcional sobre el título. Vacío lo oculta. |
| Accent | Color | Azul en el capítulo 1 | Color del número, el marcador, el relleno de progreso y el brillo ambiental de este capítulo. |
| Media | Demo, Image, Video | Demo | El tipo de contenido del capítulo. Demo es una elección explícita; una imagen sin asignar no se convierte en escena de demostración. |
| Scene | Capture, Plan, Progress, Share | Capture | La escena integrada de un capítulo de demostración. Las cuatro escenas forman una sola historia continua. |
| Image | Selector de imagen | Ninguna | La imagen de un capítulo de imagen, o la portada de un capítulo de video. |
| Video | mp4, webm, mov, m4v | Ninguno | El archivo de un capítulo de video. Usa un archivo reproducible en la web, como MP4 en H.264. |
| Description | Texto | Vacío | Texto alternativo para tecnologías de asistencia. En imágenes, si está vacío se usa el texto alternativo de la propia imagen. |
| Fit | Cover, Contain | Cover | Cover llena la pantalla y recorta los bordes que no coinciden; Contain muestra el contenido completo con espacio alrededor. |
| Highlight | Objeto con X, Y, Width, Height, Note | Off (On en dos capítulos de demostración) | Un rectángulo redondeado opcional sobre parte de la pantalla. Consulta Realces. |
Los campos vacíos, uno o dos capítulos, el reordenamiento y eliminar el capítulo activo son todos seguros. Quitar todos los capítulos muestra un estado vacío pequeño cuyo texto es el control Empty Text; no restaura la demo. De tres a ocho capítulos es el rango útil.
Realces
Un realce es un rectángulo redondeado con borde y un relleno tenue, dibujado sobre parte de la pantalla. Nunca cambia la distribución, nunca captura clics y desaparece junto con su capítulo.
X, Y, Width y Height son valores de 0 a 100 medidos sobre el contenido. En tus propias imágenes y videos, el rectángulo usa esas coordenadas sobre el contenido tal como queda ajustado: con Fit: Contain sigue el área con bandas, y con Fit: Cover sigue el mismo punto de la imagen de origen aunque la relación de aspecto del marco lo recorte. En las escenas de demostración integradas, el realce se ancla al elemento que señala, de modo que se mantiene preciso cuando la escena se reorganiza en distintos anchos; si ese elemento queda fuera de un marco muy pequeño, el realce no se dibuja.
Note se dibuja como un pequeño rótulo unido al realce, en el color de acento del capítulo. Déjalo vacío para mostrar solo el rectángulo.
Distribución
| Control | Opciones | Predeterminado | Efecto |
|---|---|---|---|
| Device Side | Left, Right | Right | En qué lado se ubica la pantalla fija. El orden de lectura se mantiene coherente en ambos casos. |
| Frame | Window, Phone, None | Window | El marco visual propio del componente alrededor de la pantalla. |
| Content Width | 480 a 1600 px | 1200 px | Ancho máximo del contenido de la historia. |
| Media Width | 30 a 70 % | 52 % | La parte de la fila que ocupa la columna de la pantalla en escritorio. |
| Gap | 0 a 160 px | 64 px | Espacio entre la columna de texto y la pantalla. |
| Chapter Height | 40 a 120 vh | 85 vh | Altura mínima de cada bloque de capítulo en escritorio, como parte del viewport de scroll. El texto largo crece más allá. |
| Sticky Offset | 0 a 240 px | 80 px | A qué distancia del borde superior del viewport se fija la pantalla. |
| Mobile Below | 480 a 1200 px | 900 px | Ancho del componente al que la distribución cambia a tarjetas. Se mide sobre el ancho del propio componente, no de la ventana. |
| Text Align | Left, Center | Left | Alineación del texto de los capítulos. |
| Padding | Padding CSS | 112px 24px | Relleno exterior alrededor de la historia. |
El tamaño exterior de la pantalla es estable mientras cambian los capítulos: cambiar una escena, imagen o video nunca mueve el texto ni modifica la altura de la historia. Si el viewport es demasiado bajo para una composición lado a lado, el componente pasa a tarjetas por su cuenta.
Apariencia
| Control | Opciones | Predeterminado | Efecto |
|---|---|---|---|
| Background | Color | #0B0D12 | Fondo de la página detrás de todo el componente. |
| Surface | Color | #131722 | Color del marco y de la superficie del estado vacío. |
| Text | Color | #F4F5F8 | Color del título de capítulo y del texto principal. |
| Secondary | Color | #A8AFBF | Color del texto de apoyo. |
| Border | Color | Luz tenue | Color del marco y de los divisores. |
| Radius | 0 a 40 px | 20 px | Radio de las esquinas del marco. |
| Shadow | On, Off | On | Sombra bajo el marco. |
| Ambient Glow | On, Off | On | Un halo suave con el acento activo detrás de la pantalla. |
| Glow | 0 a 1 | 0.5 | Intensidad del halo ambiental. Se oculta cuando Ambient Glow está desactivado. |
El halo se construye con capas de color de baja opacidad, no con filtros animados a pantalla completa.
Tipografía
Title, Body y Label tienen cada uno un control de fuente completo: familia, tamaño, grosor, interlineado, espaciado entre letras y alineación. Si no eliges una familia, el componente usa una tipografía de sistema sans-serif clara en lugar de heredar una fuente inesperada.
Animación
| Control | Opciones | Predeterminado | Efecto |
|---|---|---|---|
| Transition | Slide + Fade, Fade, None | Slide + Fade | Cómo cambia la pantalla entre capítulos. Slide + Fade mueve la pantalla saliente y la entrante en direcciones opuestas y se invierte al subir. |
| Duration | 0 a 800 ms | 320 ms | Duración de la transición. |
| Distance | 0 a 48 px | 12 px | Desplazamiento horizontal de Slide + Fade. Se oculta en las otras transiciones. |
| Activation Line | 20 a 80 % | 50 % | En qué punto del viewport de scroll se activa un capítulo. |
Las transiciones son interrumpibles: si cambias de capítulo de nuevo a mitad de la transición, la pantalla converge en el capítulo actual sin fotogramas en blanco y con la pantalla entrante y la saliente en escena a lo sumo al mismo tiempo.
Con la preferencia de movimiento reducido del visitante activada, los cambios son inmediatos, las transiciones ambientales se desactivan y la reproducción automática de video queda deshabilitada. El texto de los capítulos y el indicador de progreso siguen funcionando.
Progreso
| Control | Opciones | Predeterminado | Efecto |
|---|---|---|---|
| Show | On, Off | On | Muestra u oculta todo el indicador de progreso. |
| Line | On, Off | On | La línea vertical de relleno continuo. |
| Markers | On, Off | On | Los puntos por capítulo que muestran los completados, el activo y los pendientes. |
| Thickness | 1 a 8 px | 2 px | Grosor de la línea. Se oculta cuando Line está desactivado. |
| Track | Color | Luz tenue | Color de la línea sin rellenar. Se oculta cuando Line está desactivado. |
La línea se rellena de forma continua con la posición de scroll de la historia: 0 al inicio, 1 al final, y retrocede al subir. El relleno usa el acento del capítulo activo.
Video
| Control | Opciones | Predeterminado | Efecto |
|---|---|---|---|
| Autoplay | On, Off | On | Reproduce el video del capítulo activo cuando está en pantalla y la pestaña está visible. |
| Loop | On, Off | On | Repite el video. |
| Muted | On, Off | On | Silencia la reproducción. La reproducción automática sin sonido es la opción más compatible. |
| Controls | On, Off | Off | Muestra los controles de video del navegador. |
| Play Label | Texto | "Play" | Texto del botón de reproducción accesible. |
| Pause Label | Texto | "Pause" | Texto del control de pausa accesible. |
Solo se monta el video del capítulo activo, así que una historia con varios videos no los descarga todos a la vez. Los videos inactivos, fuera de pantalla o en una pestaña en segundo plano se pausan. Cuando Autoplay está desactivado o el navegador lo bloquea y los controles nativos están ocultos, aparece un botón de reproducción real. Se respeta una pausa manual; los pequeños desplazamientos no la reinician. En modo de tarjetas solo se reproduce la tarjeta más visible.
Canvas
En el editor de Framer, el componente muestra una vista previa estática: la lista de capítulos más una pantalla, sin scroll, sin reproducción automática y sin el realce superpuesto. Preview Chapter (1 a 8) elige qué pantalla de capítulo aparece solo en esa vista estática; nunca fuerza un capítulo en Preview. Por debajo de unos 760 px de ancho del componente, la vista previa estática apila la pantalla sobre la lista.
Adaptación a distintos tamaños
El componente se adapta a su propio ancho. Por encima de Mobile Below usa la distribución fija lado a lado; por debajo, cada capítulo se convierte en una tarjeta con su propia pantalla y su altura natural, y se elimina la columna fija. No hay desbordamiento horizontal desde 320 px, y generalmente no necesitas versiones móviles separadas.
Coloca contenido de página antes y después del componente para que la pantalla fija tenga espacio para entrar y salir. Un viewport muy bajo también cambia a tarjetas.
Usos recomendados
- Páginas de presentación de SaaS y aplicaciones
- Recorridos por funciones y explicaciones de incorporación
- Páginas de novedades y lanzamientos de producto
- Casos de estudio que siguen un flujo de principio a fin
Buenas prácticas
- Usa de tres a ocho capítulos, con una idea clara por capítulo.
- Mantén Text en una sola línea breve; el título lleva el mensaje.
- Dale a cada capítulo un Accent distinto para que el cambio de color se note.
- Prepara imágenes y video con una forma cercana a la del marco, o usa Fit: Cover.
- Deja bastante espacio arriba y abajo del componente para la entrada y la salida de la pantalla fija.
- Prueba en escritorio y en un contenedor estrecho antes de publicar.
Accesibilidad
Todo el texto de los capítulos permanece en el DOM con una jerarquía de encabezados clara; nada se oculta de las tecnologías de asistencia cuando está inactivo. Las escenas de demostración decorativas y las pantallas salientes se excluyen del árbol de accesibilidad. El progreso se expone una vez como una barra de progreso y no se anuncia en cada píxel de scroll, y el foco no se mueve al desplazarse.
Los botones de reproducción y pausa son botones reales con etiquetas de los controles Play Label y Pause Label y un contorno de foco visible. Las pantallas salientes no reciben foco ni interceptan eventos. La preferencia de movimiento reducido se respeta automáticamente. Escribe un texto de Description significativo para los capítulos de imagen y video, y conserva suficiente contraste en tu paleta.
Solución de problemas
La pantalla no se mantiene fija al desplazarse
La pantalla fija necesita un camino sin recortes hasta el scroll de la página. Asegúrate de que ninguna sección o contenedor por encima del componente en Framer tenga el overflow en Hidden o Clip, y de que el componente esté en el flujo normal de la página y no dentro de un marco con scroll y altura fija. Compruébalo en Preview, no solo en Canvas.
La historia no tiene espacio para entrar o salir
Agrega contenido de página normal antes y después del componente. Sin nada arriba, el primer capítulo se activa de inmediato; sin nada abajo, el último capítulo no tiene dónde terminar.
El realce queda mal ubicado en mi imagen
X, Y, Width y Height son porcentajes del contenido visible. Con Fit: Contain el contenido visible queda con bandas y el realce sigue esa área más pequeña. Prepara la imagen con una forma cercana a la del marco, cambia a Fit: Cover o ajusta los cuatro valores.
El video no se reproduce automáticamente
Comprueba que Media del capítulo sea Video, que hayas subido un archivo reproducible, que Autoplay esté activado y que Muted esté activado. Prueba en Preview; Canvas nunca reproduce video. Si el navegador bloquea la reproducción, usa el botón de reproducción o activa Controls. El movimiento reducido desactiva la reproducción automática de forma intencional.
Cambia a tarjetas en una pantalla ancha
El punto de cambio es el ancho del propio componente, no el de la ventana. Dentro de una columna estrecha, el componente usa tarjetas incluso en un monitor grande. Ensancha la columna o baja Mobile Below. Un viewport muy bajo también fuerza las tarjetas.
Preguntas frecuentes
¿Cuántos capítulos debería usar?
De tres a ocho. Uno o dos funcionan y no se rompen, pero el efecto necesita varios momentos para leerse.
¿Puedo combinar escenas de demostración, imágenes y video?
Sí. Cada capítulo elige su propio Media de forma independiente.
¿Puedo poner la pantalla a la izquierda?
Sí, con Device Side. El orden de lectura se ajusta.
¿Funciona en móvil?
Sí. Por debajo del punto de cambio se convierte en una pila de tarjetas, cada una con su propia pantalla y altura natural.
¿Puedo desactivar la animación?
Configura Motion → Transition en None, o confía en la preferencia de movimiento reducido del visitante, que la simplifica automáticamente.
¿Requiere bibliotecas externas o archivos adicionales?
No necesitas instalar nada adicional en Framer. El componente está contenido en un solo archivo de código y usa el entorno compatible de Framer.
¿Pueden convivir dos en una misma página?
Sí. Cada instancia sigue su propio capítulo activo, su contenido y su progreso de forma independiente.
Limitaciones
- El sticky depende de la página. Un elemento superior en Framer con overflow en Hidden o Clip, o colocar el componente dentro de un contenedor con scroll y altura fija, rompe la fijación. Las capas propias del componente no recortan.
- Marcos predefinidos. Window, Phone y None son los marcos disponibles. No hay un editor libre de dispositivos.
- Demo ilustrativa. Las cuatro escenas integradas son una referencia visual y están etiquetadas como "Demo". Sus textos y tarjetas no tienen controles individuales, y quedan densas en las tarjetas más estrechas. Reemplázalas con tu propio contenido para producción.
- Coordenadas del realce. X, Y, Width y Height son porcentajes del contenido visible. Con Contain el contenido visible queda con bandas y el realce sigue esa área más pequeña.
- Contenido multimedia, no un sitio en vivo. Las imágenes y videos subidos se escalan o recortan; su interfaz interna no reorganiza el contenido.
- Contraste personalizado. Tu paleta determina el contraste. Colores muy claros o muy oscuros pueden reducir la legibilidad.
- Video en el navegador. La reproducción automática con sonido, los códecs y los controles nativos dependen del navegador. Los videos se pausan en Canvas y cuando están inactivos o fuera de vista. El movimiento reducido desactiva la reproducción automática.
- Etiquetas de accesibilidad en inglés. Los campos Description, Play Label, Pause Label, Empty Text y ARIA Label puedes escribirlos en el idioma que quieras, pero el componente incluye valores predeterminados en inglés para ellos.
¿Necesitas ayuda? Visita soporte.
Registro de cambios
v1.0
Versión inicial de Scroll Demo Narrator.
- Una historia de 3 a 8 capítulos sincronizada con el scroll natural: el capítulo activo, el color de acento, el halo ambiental y la línea de progreso derivan de un mismo cálculo.
- Pantalla fija junto a los capítulos en escritorio; una distribución de tarjetas apiladas por debajo de un punto de cambio basado en el ancho del componente.
- Contenido Demo, Image y Video por capítulo, con ajuste Cover o Contain.
- Cuatro escenas de demostración integradas de una misma historia de producto continua, con realces anclados a sus elementos.
- Transiciones Slide + Fade, Fade y None, interrumpibles y sensibles a la dirección.
- Property Controls agrupados para Chapters, Layout, Appearance, Typography, Motion, Progress, Video y Canvas.
- Montaje diferido del video, compatibilidad con movimiento reducido, controles de reproducción operables con teclado y una vista previa estática en Canvas.
arforgelabs.support@proton.me