App Story Rail
Convierte las capturas de tu app en una secuencia de capítulos con profundidad, navegación por deslizamiento y un panel narrativo sincronizado.
Primeros pasos
- Agrega App Story Rail a tu página. Dale un ancho acorde con la sección y deja que su altura se ajuste al contenido.
- Abre Chapters. Reemplaza los capítulos de muestra con tu propia Image, Alt, Title y Description. Puedes agregar hasta nueve capítulos.
- Si un capítulo tiene una acción, completa tanto CTA como Link.
- Abre Layout para elegir Ratio, Frame e Image Fit. Para reproducir la demo, usa 9:16 y un Device W de 180 px. Un componente recién insertado comienza con 9:19.5 y 260 px.
- Elige un Appearance → Preset y configura Navigation → Initial con el capítulo que quieras mostrar primero. La numeración comienza en 1.
- Abre Framer Preview. Prueba arrastrar la secuencia, seleccionar los segmentos de progreso y deslizar en un contenedor estrecho.
Capítulos e imágenes
Cada capítulo combina una imagen con título, descripción y un enlace opcional. El panel narrativo sigue al capítulo seleccionado. Se incluyen seis capítulos de muestra; reemplaza sus textos e imágenes antes de utilizar la secuencia para tu producto.
| Propiedad | Contenido | Descripción |
|---|---|---|
| Image | Imagen subida | Captura u otra imagen vertical para este capítulo. Si falta, se usa una ilustración de respaldo. |
| Alt | Hasta 140 caracteres | Describe la captura. Si está vacío, se utiliza el texto alternativo de la imagen y, después, el título del capítulo. |
| Title | Hasta 72 caracteres | Encabezado del capítulo. |
| Description | Hasta 240 caracteres | Explicación breve de la función o el paso. |
| CTA | Hasta 28 caracteres | Etiqueta de la acción. Completa también Link. |
| Link | Enlace de Framer | Destino asociado con ese capítulo. |
El texto que supera estos límites se acorta. Mantén breve la explicación del panel y usa la página de destino para ampliar los detalles.
Cover llena el marco y puede recortar la captura. Contain conserva la imagen completa y puede dejar espacio alrededor. Es una presentación de imágenes: no ejecuta una app ni incrusta un sitio web.
Distribución
La columna Predeterminado describe un componente recién insertado. La demo actual usa los ajustes más compactos que se detallan a continuación.
| Propiedad | Opciones o rango | Predeterminado | Descripción |
|---|---|---|---|
| Device W | 180–420 px | 260 px | Ancho preferido de la captura; las distribuciones estrechas ajustan el tamaño mostrado. |
| Ratio | 9:19.5, 9:19, 9:16, Custom | 9:19.5 | Forma del marco de la captura. |
| Custom | 0.4–0.75 | 0.462 | Ancho dividido entre alto; aparece cuando Ratio está en Custom. |
| Gap | 8–72 px | 32 px | Separación entre capturas; las distribuciones pequeñas limitan este valor. |
| Rail Pad | 16–96 px | 48 px | Espacio alrededor de la secuencia de imágenes. |
| Content Gap | 16–64 px | 30 px | Separación entre la secuencia y el contenido narrativo. |
| Frame | None, Minimal, Device | Device | Acabado del marco de las capturas. |
| Image Fit | Cover, Contain | Cover | Llena el marco o conserva la imagen completa. |
| Panel | Left, Center | Left | Alineación del panel narrativo. |
Reproduce la demo
La demo usa seis capítulos, el preset Midnight, un marco Device, Image Fit en Cover y texto alineado a la izquierda. Su configuración compacta es:
| Propiedad | Ajuste de la demo |
|---|---|
| Layout → Device W | 180 px |
| Layout → Ratio | 9:16 |
| Layout → Gap | 12 px |
| Layout → Rail Pad | 16 px |
| Layout → Content Gap | 16 px |
| Typography → Title | 24 px |
| Typography → Body | 14 px |
| Typography → CTA | 12 px |
Autoplay y Loop están desactivados; Progress usa Segments. Las pantallas abstractas son las ilustraciones de respaldo integradas. Elige una Image en cada capítulo para reemplazarlas con capturas de tu app.
Navegación
| Propiedad | Opciones o rango | Predeterminado | Descripción |
|---|---|---|---|
| Initial | 1–9 | 1 | Capítulo inicial, limitado a los capítulos que hayas agregado. |
| Loop | On / Off | Off | Permite continuar entre el último y el primer capítulo. |
| Wheel | On / Off | Off | Activa la navegación con desplazamiento horizontal de rueda o Shift + rueda vertical fuera de la distribución móvil. |
| Keyboard | On / Off | On | Activa las flechas izquierda/derecha, Home y End mientras la propia secuencia tiene el foco. |
| Autoplay | On / Off | Off | Avanza entre capítulos automáticamente. |
| Interval | 2500–12000 ms | 5000 ms | Espera entre avances automáticos; aparece con Autoplay. |
| Pause Hover | On / Off | On | Pausa el avance automático al colocar el cursor encima. |
| Arrows | On / Off | On | Muestra los botones anterior y siguiente. |
| Arrow Style | Minimal, Outline, Filled | Outline | Apariencia de los botones de flecha. |
| Mobile | On / Off | Off | Muestra flechas en móvil cuando Arrows está activado. |
| Progress | On / Off | On | Muestra el progreso entre capítulos. |
| Progress Style | Line, Segments, Dots | Segments | Segments y Dots permiten elegir capítulos; Line muestra el progreso. |
| New Tab | On / Off | Off | Abre los enlaces de capítulos en otra pestaña. |
Arrastra horizontalmente en la secuencia de mayor tamaño; en móvil, desliza la fila de capturas. El movimiento vertical normal de la rueda queda disponible para desplazar la página.
Autoplay se pausa al arrastrar o desplazar la fila móvil, mientras el foco esté dentro del componente, cuando la pestaña esté oculta y cuando el componente quede fuera de vista. También se pausa al pasar el cursor si Pause Hover está activado. Con Loop desactivado, se detiene en el último capítulo. Un solo capítulo no avanza.
Apariencia y profundidad
En Appearance → Preset, elige Midnight, Editorial, Monochrome o Custom. Custom Colors aparece solo con Custom e incluye Background, Surface, Elevated, Text, Muted, Accent, Secondary y Border.
Appearance también ofrece Frame, Frame Radius (38 px), Panel Radius (22 px), Shadow (activado) y Glow (activado). Typography tiene controles separados para Title, Body y CTA, inicialmente de 32, 16 y 14 px.
| Propiedad de Depth | Rango | Predeterminado | Descripción |
|---|---|---|---|
| Amount | 0–100% | 100% | Intensidad general de profundidad. Usa 0 para una secuencia más plana. |
| Perspective | 600–1800 px | 1100 px | Distancia de perspectiva en las distribuciones de mayor tamaño. |
| Rotation | 0–12° | 11° | Rotación máxima de las capturas laterales. |
| Side Blur | 0–3 px | 1.6 px | Desenfoque de las capturas laterales. |
La profundidad se suaviza en tablet y se reemplaza por una fila plana desplazable en móvil. Las preferencias de movimiento reducido eliminan el movimiento de profundidad y el desenfoque, y evitan Autoplay. Configurar Amount en 0 aplana la presentación; no es un interruptor independiente para todas las transiciones.
Adaptación a distintos tamaños
El componente responde al ancho de su contenedor. A partir de 960 px utiliza la secuencia de escritorio con profundidad. Entre 600 y 959 px reduce el tamaño de las capturas, la separación, la rotación y el desenfoque. Por debajo de 600 px cambia a desplazamiento horizontal nativo con ajuste por posiciones y un panel narrativo apilado.
Deja que la altura crezca con las capturas y el panel. Evita colocarlo dentro de un contenedor de altura fija demasiado bajo que recorte la narración. Prueba el ancho real de la columna, especialmente si la secuencia está junto a otro contenido.
Usos recomendados
Usa una secuencia breve para explicar la introducción a tu app, demostrar un flujo o recorrer un producto móvil. Asigna un propósito a cada capítulo y conserva una proporción uniforme en las capturas.
Para una visita controlada por el lector, deja Autoplay desactivado y conserva Segments o Dots. Para una secuencia promocional, activa Autoplay sin quitar la posibilidad visible de elegir capítulos.
Buenas prácticas
- Usa capturas de dimensiones uniformes y revisa el recorte con contenido real.
- Escribe un Alt útil y etiquetas de acción breves.
- Mantén al menos un método de navegación visible, especialmente cuando las flechas móviles estén ocultas.
- Comprueba la legibilidad de los colores personalizados de texto y fondo.
Accesibilidad
La secuencia tiene una región de carrusel con nombre y un área que puede recibir el foco del teclado. Accessibility → Region usa “App story” inicialmente. Con Keyboard activado, enfoca la secuencia y usa las flechas izquierda/derecha, Home o End; estos atajos no interfieren con enlaces, botones o formularios.
Los botones de flecha y selección de capítulo tienen etiquetas. Accessibility → Announce activa anuncios discretos de cambios de capítulo y está desactivado inicialmente. Las imágenes usan Alt del capítulo, el texto alternativo de la imagen o el título. Las preferencias de movimiento reducido desactivan el avance automático y reducen el movimiento visual. Estas funciones no sustituyen la revisión de tus textos, contraste y diseño.
Solución de problemas
Mi captura aparece recortada
Configura Layout → Image Fit en Contain o elige un Ratio más cercano al de tu captura. Cover llena el marco de forma intencional.
La secuencia se ve diferente en móvil
Con un contenedor menor de 600 px, usa una fila plana con ajuste de desplazamiento. La profundidad y el desenfoque de escritorio no se aplican a esta distribución.
Autoplay no avanza
Revisa Autoplay, el número de capítulos y Loop. Se pausa con el foco dentro del componente, al arrastrar, al pasar el cursor si está configurado, fuera de vista o en una pestaña oculta. Se desactiva con movimiento reducido y en la representación estática. Prueba en Preview.
Las flechas desaparecen en mi teléfono
Activa Navigation → Arrows y Mobile. Las flechas móviles están desactivadas inicialmente; el deslizamiento y los selectores de capítulo habilitados siguen disponibles.
Falta el enlace del capítulo o no abre en Canvas
Completa CTA y Link. Prueba el destino en Preview; la representación estática evita activar enlaces.
Mi título o descripción se acortan
Title tiene un límite de 72 caracteres; Description, de 240; y CTA, de 28. Acorta el texto y traslada los detalles al destino del enlace.
Preguntas frecuentes
¿Puedo usar mis propias capturas?
Sí. Elige una Image por elemento en Chapters y escribe un Alt útil.
¿Cuántos capítulos puedo agregar?
Hasta nueve. También puedes usar uno solo, aunque no habrá otro al que avanzar.
¿Cada capítulo puede tener un destino diferente?
Sí. CTA y Link pertenecen a cada capítulo. New Tab se comparte en todo el componente.
¿Puedo quitar el marco del dispositivo?
Sí. Configura Layout → Frame en None. Minimal ofrece un acabado más ligero.
¿Puedo hacer que la secuencia sea plana?
Configura Depth → Amount en 0. Móvil ya utiliza una fila plana, y el movimiento reducido elimina los efectos de profundidad.
¿Admite video o pantallas de apps en vivo?
No. Los capítulos aceptan imágenes y texto con enlaces opcionales. Usa capturas para representar tu app.
Limitaciones
La secuencia tiene una estructura de capítulos fija y admite hasta nueve imágenes. La longitud de los textos está limitada. Las proporciones de dispositivo son verticales, incluido el rango Custom. No reproduce video, admite espacios de contenido arbitrario ni ejecuta apps en vivo. En móvil, la profundidad de escritorio se sustituye intencionalmente por desplazamiento nativo.
Registro de cambios
v1.0
Primera versión documentada de App Story Rail.
- Hasta nueve capítulos con imágenes, panel narrativo sincronizado y enlaces opcionales por capítulo.
- Presentación con profundidad en contenedores amplios y navegación con ajuste de desplazamiento en móvil.
- Controles de capítulos, avance automático opcional, presets de apariencia y compatibilidad con movimiento reducido.
arforgelabs.support@proton.me