Arc Portfolio Deck
Presenta proyectos seleccionados en un arco interactivo de tarjetas editoriales con arrastre, navegación por teclado y enlaces editables.
Primeros pasos
- Copia una instancia preparada de Editorial Cream o Midnight Archive a tu página de Framer.
- Configura Width como Fill dentro de un stack y Height como Fit content.
- Abre Projects y reemplaza la imagen, el nombre, la categoría y el año de cada proyecto. Agrega, reordena o elimina proyectos en la misma lista.
- Configura Project link con la página, sección o URL externa del proyecto. Un enlace vacío oculta su CTA.
- Ajusta Appearance, Deck geometry, Title font, Metadata font e Interaction para tu composición.
- Prueba en Framer Preview en escritorio y móvil. Revisa el arrastre, la navegación, el recorte de imágenes, los enlaces y la altura completa del componente.
Canvas muestra una vista estable de Initial project. Preview ofrece la experiencia interactiva. Los dos presets preparados son instancias independientes del mismo componente.
Contenido
Projects admite hasta 100 elementos. Cada uno tiene Image, Name, Category, Year, Project link, New tab y Advanced → Stable ID. Year es texto, por lo que admite rangos como «2024–2026». Category y Year vacíos no dejan separadores sueltos. Los nombres largos se distribuyen en varias líneas y pueden aumentar la altura.
Edita el texto alternativo de la imagen en el selector. Si falta, se usa el nombre del proyecto y, después, Content → Image fallback. Una imagen ausente o que falla muestra un reemplazo visible.
Cada proyecto puede enlazar a una página, sección o URL externa diferente mediante Project link. Haz clic en la imagen activa o en su CTA para abrir ese destino. Seleccionar una tarjeta lateral lleva primero ese proyecto al centro. New tab se aplica a la imagen y al CTA. Sin Project link, la imagen queda sin enlace y el CTA se oculta. Reemplaza los destinos de demostración al copiar el deck a otro sitio.
Un Stable ID único conserva la selección al editar o reordenar proyectos. También se reconocen los identificadores nativos de Framer. Sin ellos, la identidad se deriva del contenido y del orden de aparición de duplicados. Los duplicados indistinguibles no pueden conservar su identidad individual en cualquier reordenamiento; no reutilices identificadores explícitos.
Content permite cambiar Heading, CTA, Drag help, Empty state, Unnamed project, Image fallback, Select label y Announcement. Los últimos dos admiten {name}, {index} y {total}. Al eliminar todos los Projects aparece el estado vacío configurado y no se restaura el contenido de muestra.
Apariencia
Appearance → Preset ofrece Editorial Cream, Midnight Archive y Custom. Los primeros dos definen sus propias paletas. Custom muestra Background, Surface, Text, Secondary, Accent y Border. Radius se aplica a los tres.
Title font y Metadata font son controles nativos de tipografía ampliados. Las instancias preparadas usan Noto Serif e Inter, con Georgia y Arial como alternativas portables. Cambiar la tipografía puede modificar la altura necesaria.
Los controles coral y dorado usan texto oscuro. Revisa el contraste al cambiar colores personalizados; los contornos de foco usan el color principal del texto.
Geometría del deck
| Control | Predeterminado | Efecto |
|---|---|---|
| Card width | 300 px | Ancho máximo; se reduce para caber en el componente. |
| Width / height | 0.75 | Proporción mínima; un texto largo puede aumentar la altura. |
| Arc depth | 70 | Descenso vertical de las tarjetas exteriores; 0 aplana el recorrido. |
| Overlap % | 50 | Espaciado horizontal; valores mayores muestran menos de las tarjetas vecinas. |
| Rotation ° | 11 | Rotación hacia afuera por posición, independiente de profundidad y espaciado. |
| Desktop cards | 5 | Ventana visible en reposo; elige 3, 5 o 7. |
| Mobile cards | 3 | Ventana móvil en reposo; elige 1 o 3. |
| Stage padding | 28 px | Espacio para las tarjetas transformadas y sus sombras. |
| Advanced scale → Active | 1 | Escala de la tarjeta central. |
| Advanced scale → Side | 0.88 | Escala lateral, limitada a la escala activa. |
Ajusta el solapamiento antes de aumentar la densidad en un diseño estrecho. El escenario reserva espacio para rotación, profundidad del arco, escala y altura medida de la tarjeta. Los bordes laterales se recortan intencionalmente en anchos pequeños.
Interacciones
Arrastra a la izquierda para avanzar y a la derecha para volver. Cada gesto confirma como máximo un proyecto adyacente. Un gesto pequeño regresa al inicio; un movimiento corto y suficientemente rápido puede avanzar. Los arrastres extendidos encuentran resistencia. Arrastrar sobre la imagen activa o el CTA no abre su enlace.
Seleccionar una tarjeta lateral puede llevar directamente a un proyecto visible no adyacente. Los botones y las flechas del teclado pueden cambiar la dirección antes de que termine la transición; el movimiento continúa desde la posición visual actual.
| Control | Predeterminado | Efecto |
|---|---|---|
| Initial project | 1 | Selección inicial numerada desde uno. |
| Loop | On | Continúa por los extremos de la colección. |
| Drag | On | Habilita los gestos horizontales del puntero. |
| Sensitivity | 1 | Ajusta la respuesta a la distancia del arrastre. |
| Hover lift | On | Eleva tarjetas laterales en dispositivos con hover y puntero preciso. |
| Lift px | 14 px | Elevación de la tarjeta lateral. |
| Snap ms | 360 ms | Duración de la transición; movimiento reducido cambia la selección de inmediato. |
| Offer autoplay | Off | Ofrece Play/Pause; la reproducción sigue requiriendo pulsar Play. |
| Interval s | 5 s | Tiempo entre avances durante la reproducción. |
Hover no cambia la selección y se neutraliza durante el arrastre. Con Loop desactivado, los extremos son asimétricos, los gestos resisten el límite y las flechas no disponibles se deshabilitan. Un proyecto permanece estable sin navegación; cero muestra el estado vacío. Dos o tres proyectos en loop reciclan tarjetas únicas con una transición de opacidad al cruzar la unión, y las cantidades pares tienen una distribución asimétrica. No se crean duplicados de relleno.
Autoplay avanza un proyecto por intervalo después de pulsar Play. Hover suspende el temporizador. La navegación manual, la interacción del puntero, los cambios de foco, salir del área visible, perder el foco de la ventana y ocultar el documento detienen la reproducción. Pulsa Play nuevamente para retomarla. Sin Loop, termina en el último proyecto. Movimiento reducido deshabilita la reproducción; el foco del propio botón Play no cancela su activación.
Navigation controla Show arrows, Show counter, Show drag help, Previous label, Next label, Play label, Pause label y Collection name. Las flechas del teclado siguen disponibles aunque se oculten las flechas visibles. Media & shadow controla Image fit (cover o contain), Crop position y Shadow (None, Soft, Medium o Strong). Los valores predeterminados son cover, 50% 50% y Soft.
Comportamiento responsive
La densidad responde al ancho medido del propio componente. Por debajo de 850 px, la densidad predeterminada de escritorio se reduce a tres tarjetas. Por debajo de 600 px se aplica Mobile cards, la profundidad del arco pasa al 45% del valor de escritorio y la rotación al 60%. Una columna estrecha en una pantalla grande recibe las mismas adaptaciones.
Los gestos horizontales conservan el desplazamiento vertical normal de la página. El escenario usa touch-action: pan-y pinch-zoom y no intercepta la rueda. El zoom mediante pellizco queda bajo control del navegador.
Usa Fit content para la altura. Las instancias predeterminadas miden aproximadamente 750 px en escritorio y 640 px en móvil, según la tipografía y el contenido. Un viewport de escritorio de 700 px puede requerir desplazamiento normal para acceder a todos los controles. El texto largo o fuentes mayores pueden aumentar la altura; evita un contenedor de altura fija pequeña con recorte. Fill-height no es compatible.
Uso recomendado
Usa el deck para proyectos seleccionados de portafolio, estudios fotográficos, colecciones de productos y trabajo editorial. Entre cinco y doce proyectos bien elegidos dan una primera impresión legible. Se incluyeron colecciones de 30 en la validación; solo se montan las tarjetas próximas al proyecto activo.
Buenas prácticas
Usa imágenes distintas, metadatos breves, texto alternativo útil y destinos reales. Proporciona identificadores estables para ediciones frecuentes. Conserva los tamaños de los controles táctiles y revisa la tipografía en anchos pequeños. Reemplaza todos los proyectos ficticios antes de presentar el deck como tu portafolio.
Accesibilidad
El deck es una región con nombre y foco de teclado. Las flechas izquierda/derecha navegan dentro de ella y se ignoran en campos editables. La navegación usa botones nativos; el enlace de la imagen activa y el CTA son enlaces reales. Los selectores laterales quedan fuera de la secuencia normal de Tab, con navegación equivalente por anterior/siguiente y flechas del teclado.
Solo el artículo activo expone su contenido a tecnologías de asistencia. Las tarjetas inactivas no tienen enlaces de proyecto. Las selecciones manuales confirmadas se anuncian una vez; autoplay no repite anuncios. El foco permanece dentro del componente si la navegación eliminaría un enlace de imagen o CTA enfocado. Los controles táctiles tienen un objetivo mínimo de 44 × 44 px.
Se respeta movimiento reducido. Las comprobaciones automatizadas de accesibilidad no constituyen una certificación. Las pruebas con lectores de pantalla físicos no se han completado.
Solución de problemas
Las tarjetas o los controles se recortan
Usa Fit content y permite que crezca el contenedor. El recorte de tarjetas laterales en anchos pequeños es intencional.
Faltan imágenes después de insertar
Selecciona una Image para cada proyecto o copia una instancia preparada que conserve los recursos nativos de imagen.
No aparece el CTA del proyecto
Configura Project link en ese elemento. Los enlaces vacíos ocultan el CTA deliberadamente.
Los colores o el movimiento no cambian
Selecciona Custom para editar la paleta. Abre Preview para ver movimiento; Canvas permanece estático intencionalmente.
La reproducción no comienza
Activa Offer autoplay, pulsa Play y saca el puntero del deck. Movimiento reducido y el último proyecto sin Loop deshabilitan la reproducción. El foco o la interacción del puntero detienen una sesión existente.
La selección cambia al editar
Proporciona un Stable ID único. Sin él o un identificador nativo, cambiar el contenido puede cambiar la identidad. Eliminar el elemento activo selecciona el siguiente disponible en ese índice o el último vecino restante.
Preguntas frecuentes
¿Puedo configurarlo sin editar código?
Sí. Usa una instancia preparada de Framer y su panel de propiedades nativo.
¿Los dos presets son componentes diferentes?
No. Son instancias independientes del mismo componente.
¿Requiere un servicio externo?
No. Las imágenes cargadas usan el alojamiento normal de Framer.
¿Puede conectarse a CMS, video, un carrito o un lightbox?
Esas integraciones quedan fuera de esta versión.
¿Eliminar todos los proyectos restaura las muestras?
No. Una colección explícitamente vacía permanece vacía.
Limitaciones
La altura depende del contenido; no se admiten diseños de altura fija o Fill-height. Los anchos inferiores a los 320 px probados requieren una revisión adicional. Las uniones del loop con pocos proyectos usan reciclaje por opacidad, por lo que el abanico no permanece totalmente opaco durante esas transiciones. Hover no aparece en dispositivos exclusivamente táctiles. Las inserciones nuevas desde el archivo de código pueden requerir seleccionar imágenes manualmente.
Se revisaron Framer Canvas/Preview y navegadores basados en Chromium. iPhone/Android físicos, Safari, Firefox, gestos físicos de pellizco y lectores de pantalla siguen sin verificar. Las comprobaciones locales con zoom CSS al 200% no demuestran compatibilidad completa con el escalado de texto del navegador o sistema operativo.
La versión 1.0 está disponible. Usa los enlaces de arriba para explorar el demo público u obtener el componente.
¿Necesitas ayuda? Visita soporte o escribe a ARForge Labs.
Registro de cambios
v1.0
Versión inicial de Arc Portfolio Deck.
- Proyectos editables organizados en un arco adaptable de tarjetas editoriales.
- Arrastre, selección de tarjetas laterales, botones de navegación y controles de teclado.
- Enlaces individuales en imágenes activas y CTA, con nueva pestaña opcional.
- Paletas Editorial Cream, Midnight Archive y Custom.
- Soporte para movimiento reducido, documentación en inglés y español, y enlace privado de instalación entregado después de la compra.
arforgelabs.support@proton.me