Code Demo Narrator
Explica software con código, previews visuales, líneas resaltadas, anotaciones y diferencias sincronizados con el desplazamiento.
Primeros pasos
- Añade Code Demo Narrator a una página de Framer, usa ancho flexible y deja que la altura se ajuste al contenido.
- Elige Content: Code → UI (SwiftUI), Code → API (TypeScript), Diff Story o Custom Chapters.
- Para crear tu historia, selecciona Custom Chapters y edita Chapters. Añade título, explicación, código y preview para cada paso.
- En Highlighted, escribe números de línea como
2, 4-6. Selecciona una imagen, un video o una escena incluida en Preview del capítulo. - Ajusta Layout, Appearance, Focus y Motion. Activa Output → Show para mostrar el texto de salida de cada capítulo.
- Prueba en Framer Preview en escritorio y móvil. Desplázate en ambas direcciones y revisa los medios, las líneas resaltadas y las anotaciones antes de publicar.
Contenido y capítulos
La historia SwiftUI incluye cinco capítulos; TypeScript, cuatro; y Diff Story, dos. Cada preset utiliza su propia historia en lugar del arreglo editable Chapters. Selecciona Custom Chapters para usar tu contenido; admite de uno a ocho capítulos. Al eliminar todos los capítulos personalizados aparece Empty Text.
| Control | Función |
|---|---|
| Eyebrow, Title, Description | Etiqueta, título y explicación del capítulo. |
| Accent | Acento del capítulo para progreso, énfasis, detalles del preview y luz ambiental. |
| Filename | Nombre del archivo activo en el encabezado del editor. |
| Tabs | Nombres de archivo separados por comas, solo de presentación. No son pestañas editables ni interactivas. |
| Language | Color de sintaxis para Swift, TypeScript, JavaScript, JSX / TSX, Python, HTML, CSS, JSON, Shell o Plain Text. |
| Code | Fragmento de código que se muestra. Nunca se ejecuta. |
| Highlighted | Números de línea o rangos inclusivos, por ejemplo 2, 4-6. |
| Added, Removed | Líneas con estilo de adición o eliminación cuando Diff Mode está activo. Incluye ambas versiones de las líneas en el fragmento. |
| Preview | Built-in Scene, Image o Video. |
| Scene | Una de las once escenas ilustrativas de las tres historias incluidas. |
| Image, Video | Tus medios para el preview. Video acepta mp4, webm y mov; la reproducción depende de los códecs del navegador. |
| Alt Text | Descripción accesible del preview. |
| Annotations | Hasta cuatro anotaciones con el formato indicado abajo. |
| Output | Filas de texto plano para la franja opcional de salida. |
Foco, diferencias y anotaciones
Focus → Dim Code atenúa las líneas fuera de Highlighted. Preview Ring señala un elemento predefinido de una escena incluida cuando el capítulo tiene líneas resaltadas. No identifica elementos dentro de tus medios ni interpreta el código.
Activa Code → Diff Mode para tus adiciones y eliminaciones. El preset Diff Story activa ese estilo automáticamente. Presenta una versión original y otra modificada con adiciones y eliminaciones; no es un motor de comparación automática.
Activa Focus → Annotations y escribe anotaciones de esta forma:
Reusable card@70,46 | Updated action@62,78
Separa las anotaciones con |. Las coordenadas son porcentajes de 0 a 100 sobre el contenedor del preview. Ajústalas según tus medios y el marco; no siguen objetos de un video. Las anotaciones son capas visuales y no bloquean los controles del video.
Diseño y comportamiento adaptable
En un componente ancho, el texto de los capítulos se desplaza junto a un editor de código y un preview fijos. El capítulo activo cambia en Activation Line. Al desplazarse hacia arriba, la historia retrocede; cada instancia lleva su propio seguimiento.
Por debajo de Mobile Below, el componente se convierte en tarjetas apiladas con código y preview propios. El breakpoint usa el ancho del componente, por lo que una columna estrecha en escritorio también puede mostrar tarjetas. Una ventana de poca altura puede activar las tarjetas para mantener una composición usable.
| Control | Predeterminado | Efecto |
|---|---|---|
| Preview Side | Right | Coloca el preview a la izquierda o derecha de la composición de escritorio. |
| Frame | Browser | Marco del preview: Freeform, Browser, Phone, Tablet o Desktop. |
| Content Width | 1220 px | Ancho máximo de la historia. |
| Preview Width | 50% | Proporción del preview dentro del área de código y preview. |
| Gap | 56 px | Espacio entre columnas en escritorio. |
| Chapter Height | 85 vh | Altura mínima de desplazamiento por capítulo en escritorio. |
| Sticky Offset | 80 px | Distancia desde la parte superior de la ventana para los paneles fijos. |
| Mobile Below | 980 px | Ancho del componente por debajo del cual aparecen tarjetas. |
| Text Align | Left | Alineación Left o Center del texto. |
| Padding | 112px 24px | Espaciado exterior. La demo pública usa espaciado de sección propio y puede cambiar este valor. |
Usa el flujo normal de la página y evita ancestros con overflow Hidden o Clip alrededor de la sección fija. Deja contenido antes y después de la historia para que pueda entrar y salir de forma natural.
Apariencia y código
| Control | Predeterminado | Efecto |
|---|---|---|
| Appearance → Theme | Carbon | Carbon, Graphite, Paper o Xcode-inspired. |
| Accent Override | Vacío | Sustituye los acentos por capítulo al proporcionar un color. |
| Editor Radius | 16 px | Redondea el editor independientemente del preview. |
| Shadow | Activado | Añade una sombra al marco del preview. |
| Ambient Glow | Activado | Añade un resplandor suave del color de acento al preview. |
| Glow | 0.5 | Intensidad de la luz ambiental. |
| Code → Font Size | 13 px | Tamaño del código, de 11 a 18 px. |
| Line Numbers | Activado | Muestra números de línea. |
| Diff Mode | Desactivado | Activa Added/Removed en capítulos personalizados. |
| Preview → Fit | Contain | Contain conserva todo el medio; Cover llena el marco y recorta los bordes. |
| Preview → Radius | 14 px | Radio de las esquinas del preview. |
El color de sintaxis es ligero y está pensado para presentación. Elige Plain Text cuando no necesites colores por token. Las líneas largas se pueden desplazar dentro del editor.
Salida y progreso
Output → Show está desactivado por defecto. Al activarlo, la franja usa el texto Output del capítulo y la etiqueta elegida en Mode: Terminal, Output, Console, Request o Response. Son etiquetas de presentación; no se ejecutan comandos ni solicitudes.
Progress → Show, Line y Markers están activados por defecto. Thickness inicia en 2 px y Track define el color sin relleno. El indicador de progreso es vertical en escritorio y horizontal sobre las tarjetas.
Movimiento y video
| Control | Predeterminado | Efecto |
|---|---|---|
| Transition | Slide + Fade | Slide + Fade, Fade o None entre capítulos. |
| Duration | 300 ms | Duración de la transición. |
| Preview Shift | 10 px | Movimiento del preview con Slide + Fade. |
| Code Shift | 10 px | Movimiento del código con Slide + Fade. |
| Activation Line | 50% | Posición de la ventana que selecciona el capítulo activo. |
| Autoplay, Loop, Muted | Activado | Preferencias de reproducción de video. |
| Controls | Desactivado | Muestra controles nativos del navegador al activarse. |
| Play Label, Pause Label | Play, Pause | Etiquetas de los controles accesibles de reproducción. |
Los videos se pausan cuando están inactivos, fuera del área visible o en una pestaña oculta. Se respeta la pausa manual. Si la reproducción automática está desactivada o bloqueada, aparece un botón de reproducción cuando los controles nativos están ocultos. El video silenciado es la configuración más fiable para autoplay.
La preferencia de movimiento reducido del visitante desactiva la reproducción automática y simplifica las transiciones. Usa Transition → None para cambios inmediatos sin depender de esa preferencia.
Canvas
Framer Canvas muestra una lista estática de capítulos, código y preview. Canvas → Preview Chapter selecciona solo la vista de edición. Canvas no reproduce videos automáticamente ni muestra la experiencia completa de desplazamiento; pruébala en Preview.
Accesibilidad
Los títulos, el código y el progreso siguen siendo accesibles. Las capas de salida durante una transición no reciben foco de teclado. Los botones de reproducción tienen foco visible. Ajusta Alt Text, ARIA Label, Empty Text, Play Label y Pause Label para tu público; los valores iniciales están en inglés. Revisa el contraste después de cambiar la paleta.
Solución de problemas
No aparecen mis cambios de capítulos
Selecciona Content → Custom Chapters. Las otras tres opciones usan sus historias incluidas.
El editor y el preview no permanecen fijos
Compruébalo en Preview. Usa altura según contenido y desplazamiento normal de página; quita overflow Hidden o Clip de los ancestros. Un componente estrecho o una ventana de poca altura usan tarjetas de forma intencional.
No aparecen la salida o las líneas añadidas
Activa Output → Show para la salida y Code → Diff Mode para Added/Removed personalizados. Numera desde 1 e incluye las filas correspondientes en Code.
El video no se reproduce automáticamente
Sube un video compatible con navegadores, activa Autoplay y Muted y prueba en Preview. El movimiento reducido desactiva autoplay. Usa el botón de reproducción o activa Controls si el navegador restringe la reproducción.
Una anotación señala el lugar incorrecto
Ajusta sus coordenadas después de elegir el marco y Fit. Los medios propios usan anotaciones manuales; Preview Ring funciona únicamente con las escenas incluidas.
Preguntas frecuentes
¿El componente compila código o se conecta a una API?
No. Sincroniza texto preparado, fragmentos de código y previews visuales. Los ejemplos de API y aplicaciones incluidos son ilustrativos.
¿Puedo usar mis capturas y videos?
Sí. Elige Image o Video en cada capítulo personalizado y añade tus medios. Puedes combinar distintos tipos de medios entre capítulos.
¿Es una plantilla de sitio completo?
No. Es un Framer Code Component. El diseño de la página comercial no está incluido.
¿Qué recibo?
Un enlace privado de instalación en Framer y una guía de acceso e instalación mediante la entrega del checkout, además de esta documentación en inglés y español. No necesitas instalar paquetes adicionales dentro de Framer.
Limitaciones
- Hasta ocho capítulos personalizados, cuatro anotaciones por capítulo y cinco marcos predefinidos.
- Código y pestañas solo de presentación; sin compilador, editor interactivo, generador automático de diferencias, cliente API ni sitio incrustado en vivo.
- Las escenas incluidas tienen diseños y textos predefinidos. Usa tus medios para mostrar la interfaz de un producto específico.
- El comportamiento fijo depende de la página contenedora. Los códecs y autoplay dependen del navegador.
- Las imágenes y los videos se escalan o recortan; su contenido no se reorganiza como las escenas incluidas.
- Xcode-inspired es el nombre de un tema visual; este producto es independiente de Apple.
¿Necesitas ayuda? Visita soporte o escribe a ARForge Labs.
Registro de cambios
v1.0
Primera versión de Code Demo Narrator.
- Tres historias incluidas y hasta ocho capítulos personalizados.
- Código, previews, líneas resaltadas, anotaciones y diferencias sincronizados.
- Cinco marcos de preview, cuatro temas y un diseño de tarjetas adaptable.
- Soporte de movimiento reducido y controles accesibles de video.
- Documentación en inglés y español y enlace privado de instalación en Framer entregado después de la compra.
arforgelabs.support@proton.me