Chromatic Media Portal
Un portal de imágenes que combina separación cromática localizada, perspectiva sutil y una máscara interactiva para revelar una segunda imagen.
Primeros pasos
- Usa Add to Framer desde la confirmación o el recibo de compra, o pega la URL del componente incluida en tu proyecto de Framer.
- Asigna ancho y alto a la instancia. Empieza con unos 720 × 540 px en escritorio o 320 × 420 px para una tarjeta vertical. El componente sigue el tamaño de su frame; no impone una proporción.
- Abre Content y elige Base Media y Alternate Media. Ambos controles aceptan imágenes.
- Completa Alt Text y Alternate Alt, y elige Fit, Position X y Position Y. Ambas imágenes comparten los ajustes de encuadre.
- Elige Preset, Reveal → Mask Shape y Reveal → Trigger.
- Abre Preview de Framer. Mueve el cursor, haz clic o toca, y prueba Enter / Espacio con el componente enfocado. Canvas utiliza una vista estática.
Una instancia nueva comienza con Chromatic Noir, Hover, Circle y Expand on Click activado. Incluye un placeholder integrado, no las fotografías ni los controles externos del sitio de demostración. Sin imagen alternativa, la separación cromática y el tilt siguen funcionando; el reveal no está disponible.
Presets
| Preset | Tratamiento | Movimiento y duración |
|---|---|---|
| Chromatic Noir | Cyan, magenta y una contribución roja menor; intensidad de 10 px; mezcla Screen; opacidad de canales de 80%. | Tilt de hasta 4°, desplazamiento elástico de 3 px, seguimiento de 65 ms y reveal de 550 ms. |
| Duotone Studio | Dos canales de color contenido; intensidad de 4 px; mezcla Lighten; opacidad de canales de 58%. | Tilt de hasta 1.8°, desplazamiento elástico de 1 px, seguimiento de 90 ms y reveal de 720 ms. |
| Custom | Utiliza tus controles cromáticos y de movimiento guardados. | Habilita Reveal Duration y los controles detallados de movimiento. |
Los presets con nombre determinan sus ajustes visuales. Elige Custom antes de modificar intensidad, colores de canales, mezcla, falloff, decay, cantidad de tilt o duración del reveal. Tus valores personalizados se conservan al cambiar de preset. Chromatic → Enabled y Motion → Enable Tilt siguen disponibles en los presets con nombre. El contenido, forma de máscara, activación, radio, retardos y estilo permanecen configurables.
Contenido
| Control | Opciones o rango | Predeterminado | Función |
|---|---|---|---|
| Base Media | Imagen | Placeholder integrado | Imagen principal. |
| Alternate Media | Imagen | Vacío | Segunda imagen revelada mediante la máscara. |
| Alt Text / Alternate Alt | Texto | Vacío | Descripciones para tecnologías de asistencia. Si están vacíos, se usan las descripciones del selector de imágenes. |
| Fit | Cover, Contain, Fill | Cover | Cover recorta; Contain conserva la imagen completa con espacio de fondo; Fill estira al tamaño del frame. |
| Position X / Position Y | 0–100% | 50% / 50% | Alineación compartida de las imágenes dentro del frame. |
Usa imágenes con composición similar para una transición continua, o sujetos distintos para un reveal más marcado. Ambas fuentes ocupan el mismo espacio, pero las fotografías con proporciones diferentes conservan su propio recorte con Cover. Se admiten imágenes transparentes; el fondo configurado aparece en las áreas sin cubrir.
Reveal
| Control | Opciones o rango | Predeterminado | Función |
|---|---|---|---|
| Trigger | Hover, Hold, Click, Always Revealed | Hover | Cómo se hace visible la segunda imagen. |
| Mask Shape | Circle, Organic, Rectangle | Circle | Ventana circular, sutilmente irregular o rectangular. |
| Reveal Radius | 40–500 px | 140 px | Tamaño de la ventana local; se reduce en frames pequeños. |
| Expand on Click | On, Off | On | El clic o toque puede ampliar la ventana hasta cubrir el frame. |
| Duration | 200–1200 ms | 550 ms en Custom | Tiempo de apertura; el cierre dura aproximadamente el 80% de ese valor. |
| Hover Delay | 0–2000 ms | 120 ms | Espera antes de abrir la ventana local con Hover. |
| Hold Delay | 100–3000 ms | 450 ms | Permanencia del cursor antes de abrir con Hold. |
| Corner | 0–100 px | 8 px | Radio de las esquinas de Rectangle; disminuye al expandirse la máscara. |
Hover y Hold
Hover abre una ventana local después de Hover Delay. Hold espera Hold Delay: significa mantener el cursor sobre el componente, no mantener presionado el botón del mouse. Salir cierra una ventana no fijada. Con Expand on Click activado, un clic expande y fija el reveal; otro clic lo cierra. La ventana local sigue al cursor con suavidad.
Click y Always Revealed
Click alterna la segunda imagen. Si Expand on Click está desactivado, alterna una ventana local en lugar de un reveal completo. Always Revealed muestra la imagen alternativa completa sin botón de reveal. La expansión se calcula desde el origen hasta la esquina más lejana, por lo que un clic cerca del borde también puede cubrir todo el frame.
Touch y teclado
En dispositivos touch, Hover y Hold se convierten en alternancia por toque. El tilt y el movimiento cromático ligado al cursor se desactivan para touch. Los gestos de desplazamiento no se tratan como toques.
Con una imagen alternativa cargada e Interaction activado, el componente recibe foco. Enter o Espacio alterna el portal desde el centro; Escape lo cierra. El foco tiene un contorno visible. Sin imagen alternativa, el componente no se presenta como un botón innecesario.
Chromatic
El efecto utiliza representaciones desplazadas y teñidas de la imagen principal, con una máscara suave alrededor del cursor. Es localizado, no un filtro de color permanente sobre la fotografía. La imagen alternativa aparece sobre las capas cromáticas para conservar sus colores al revelarse por completo.
Los siguientes controles detallados están disponibles en Custom:
| Control | Opciones o rango | Predeterminado | Función |
|---|---|---|---|
| Enabled | On, Off | On | Activa el efecto cromático independientemente del reveal. |
| Intensity | 0–20 px | 10 px | Intensidad del desplazamiento. Cero oculta las capas cromáticas. |
| Effect Radius | 80–600 px | 240 px | Área de separación cromática alrededor del cursor. |
| Falloff | Soft, Medium, Sharp | Soft | Suavidad del límite del efecto. |
| Cyan Channel | Color | #00E7FF | Color del primer canal. |
| Magenta Channel | Color | #FF2EBE | Color del segundo canal. |
| Red Channel | Color | #FF3A38 | Contribución menor del tercer canal. |
| Blend | Screen, Lighten, Difference, Multiply, Normal | Screen | Cómo se combinan las capas de color. |
| Channel Opacity | 0–100% | 80% | Visibilidad de las capas cromáticas. |
| Decay | Fast, Normal, Slow | Normal | Velocidad de retorno de la separación al salir. |
Effect Radius, Reveal Radius, desplazamiento y tilt se reducen cuando la dimensión menor del frame está por debajo de 480 px. Los valores del panel describen los ajustes a tamaño completo. El movimiento rápido del cursor añade una contribución limitada, y el comienzo del reveal incrementa brevemente la intensidad. Screen y Lighten son buenos puntos de partida; otras mezclas varían considerablemente según los colores de la imagen.
Motion
| Control | Rango | Predeterminado en Custom | Función |
|---|---|---|---|
| Enable Tilt | On, Off | On | Activa la rotación con perspectiva. |
| Tilt | 0–10° | 4° | Tilt máximo configurado. |
| Perspective | 400–2000 px | 1000 px | Profundidad de la perspectiva. |
| Elastic | 0–8 px | 3 px | Pequeña traslación que responde al cursor. |
| Follow Lag | 0–200 ms | 65 ms | Suavizado del seguimiento. |
Tilt y Perspective se ocultan cuando Enable Tilt está desactivado. El movimiento vuelve suavemente al estado neutro al salir. Una pequeña escala de interacción se calcula internamente. La animación se detiene al estabilizarse y se pausa fuera de pantalla o cuando se oculta la página.
Style y Behavior
| Grupo / control | Predeterminado | Función |
|---|---|---|
| Style → Background | #050505 | Fondo durante la carga y en el espacio que deja Contain. |
| Style → Radius | 0 px | Radio de las esquinas del frame, incluidas esquinas independientes. |
| Style → Overlay | None | None, Dark o tinte Custom sobre el componente completo. |
| Style → Overlay Color | #050505 | Color del overlay Custom. |
| Style → Opacity | 0% | Opacidad del overlay; no tiene efecto con Overlay en None. |
| Behavior → Interaction | On | Activa la interacción con el cursor y el reveal. |
| Behavior → Cursor | Default | Cursor del sistema Default o Pointer. |
| Behavior → Button Label | Reveal alternate image | Etiqueta accesible de la acción; tradúcela para tu sitio. |
| Behavior → Canvas Preview | Base | Presentación estática del editor: Base, Local o Revealed. |
Canvas Preview solo modifica la presentación del editor. Local y Revealed necesitan una imagen alternativa. El sitio publicado sigue el trigger configurado. Interaction desactivado impide la interacción del usuario; Always Revealed puede seguir mostrando la imagen alternativa.
Movimiento reducido
Siempre se respeta prefers-reduced-motion del dispositivo. Se desactivan el movimiento cromático ligado al cursor, tilt, desplazamiento elástico y morphing orgánico. El reveal se convierte en un crossfade de 200 ms que conserva el acceso mediante clic, toque y teclado. No existe un control para ignorar esta preferencia.
Demo y entrega
La preview pública incluye fotografías, una barra de controles y cuatro instancias de ejemplo. Esos elementos demuestran el componente; no forman parte del componente independiente comprado. El Cursor predeterminado es Default, mientras que la demo usa explícitamente Pointer y etiquetas de botón en español.
La compra proporciona el enlace Add to Framer del componente y una descarga bilingüe de configuración. La documentación está disponible en inglés y español. Proporciona tus propias imágenes y comprueba que tienes permiso para utilizarlas.
Solución de problemas
La imagen no se revela
Elige Alternate Media y espera a que cargue. Revisa Interaction, Trigger y su retardo. Always Revealed muestra la alternativa sin alternancia. Una imagen alternativa que falla se ignora; si falla la principal, aparece el placeholder.
Cambiar intensidad o duración no tiene efecto
Elige Custom. Los presets con nombre determinan los ajustes visuales y temporales detallados. Revisa también Chromatic → Enabled, Channel Opacity y la preferencia de movimiento reducido del dispositivo.
El efecto parece demasiado fuerte en una tarjeta pequeña
Usa Duotone Studio, o selecciona Custom y reduce Intensity y Tilt. Los frames pequeños ya reducen automáticamente los radios del efecto y del reveal.
El encuadre se ve diferente entre imágenes
Usa fotografías con proporciones y composición coincidentes. Fit y Position X / Y son compartidos; no hay un control independiente de recorte para la segunda imagen.
Canvas no anima
Es intencional. Elige Canvas Preview para inspeccionar un estado estático; usa Preview o el sitio publicado para interactuar.
Preguntas frecuentes
¿Esta versión admite video?
No. La versión 1.0 es la edición de imágenes. No acepta video ni sincroniza su reproducción.
¿Puedo usar solo la imagen principal?
Sí. El efecto cromático y el tilt funcionan sin imagen alternativa.
¿Necesita algún servicio o paquete adicional?
No. Utiliza React y Framer con las APIs de estilo y animación del navegador. No requiere servicio externo, API key, CDN de imágenes obligatorio ni paquete adicional de animación.
¿Puedo colocar un título o botón encima?
Sí, coloca capas de Framer independientes sobre el componente. Una capa que capture eventos del cursor puede impedir que el portal reciba interacción en esa zona.
Limitaciones
Esta versión admite únicamente imágenes y no incluye lightbox, acción de navegación, audio, rotación por arrastre ni cursor personalizado. Los ajustes de encuadre son compartidos, sin posición independiente para cada fuente. La carga depende del recurso proporcionado. Las imágenes grandes y muchas instancias activas simultáneamente aumentan el costo de renderizado; la fluidez depende del dispositivo y navegador. Las máscaras CSS, mezclas y filtros SVG pueden variar ligeramente entre navegadores.
Registro de cambios
v1.0
Lanzamiento inicial de la edición de imágenes.
- Separación cromática localizada, seguimiento suavizado, tilt sutil y retorno progresivo al salir.
- Máscaras Circle, Organic y Rectangle con Hover, Hold, Click y Always Revealed.
- Presets Chromatic Noir, Duotone Studio y Custom.
- Imágenes responsive, alternativa touch, uso con teclado y movimiento reducido del sistema.
- Controles agrupados en Framer, vistas estáticas en Canvas y documentación en inglés/español.
arforgelabs.support@proton.me