'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
EfectosAlea Pro
Efectos de imagen
Compara antes y después con un asa, amplía detalles con una lupa, revela una imagen generada desde el ruido, y deshaz una eliminada en humo.
import { ImageCompare, Lens, ImageReveal, Disintegrate } from '@alea/pro';
Ejemplos
Antes y después
Arrastra el asa, o enfócala y usa las flechas, Inicio y Fin.
%22%2F%3E%3Ccircle%20cx%3D%22460%22%20cy%3D%22150%22%20r%3D%2256%22%20fill%3D%22%23ffce1f%22%2F%3E%3Cpath%20d%3D%22M0%20300%20L120%20190%20L220%20270%20L330%20160%20L460%20290%20L560%20210%20L640%20260%20V400%20H0Z%22%20fill%3D%22%235b2a86%22%2F%3E%3Cpath%20d%3D%22M0%20340%20L140%20260%20L260%20330%20L380%20250%20L520%20340%20L640%20300%20V400%20H0Z%22%20fill%3D%22%23cd57ff%22%20opacity%3D%22.85%22%2F%3E%3C%2Fsvg%3E)
%22%2F%3E%3Ccircle%20cx%3D%22460%22%20cy%3D%22150%22%20r%3D%2256%22%20fill%3D%22%23ddd%22%2F%3E%3Cpath%20d%3D%22M0%20300%20L120%20190%20L220%20270%20L330%20160%20L460%20290%20L560%20210%20L640%20260%20V400%20H0Z%22%20fill%3D%22%23444%22%2F%3E%3Cpath%20d%3D%22M0%20340%20L140%20260%20L260%20330%20L380%20250%20L520%20340%20L640%20300%20V400%20H0Z%22%20fill%3D%22%23666%22%20opacity%3D%22.85%22%2F%3E%3C%2Fsvg%3E)
Lupa
Una lupa sigue al puntero sobre la imagen de un producto.
Revelar y disolver
Una imagen generada aparece desde el ruido; una eliminada se deshace en humo.
Tokens
Los tokens de diseño que usa este componente, con su valor en el tema actual. Cambia cualquiera para darle otro estilo.
Color
--alea-focus…
Radius
--alea-radius-md…
Shadow
--alea-shadow-pop…
Component
--alea-compare…
Other
--alea-control-thumb…--alea-media-scrim…
Props
ImageCompare props
Dos imágenes, una sobre otra, con un asa para compararlas (antes y después). El asa es un slider: las flechas la mueven.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
afterobligatoria | ReactNode | - | |
beforeobligatoria | ReactNode | - | |
className | string | - | |
label | string | 'Compare the images' |
Lens props
Una lupa que sigue al puntero sobre una imagen: para detalles de producto. Con el teclado se ve la imagen completa.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
altobligatoria | string | - | |
srcobligatoria | string | - | |
className | string | - | |
size | number | 140 | |
zoom | number | 2 |
ImageReveal props
Una imagen que aparece desde un ruido de puntos cuando entra en pantalla: para imágenes generadas o una revelación dramática.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
altobligatoria | string | - | |
srcobligatoria | string | - | |
className | string | - | |
duration | number | 1400 |
Disintegrate props
Contenido que se deshace en humo y desaparece (para eliminar algo visual, como una imagen). Lo mantiene montado hasta que se va; llama a onGone.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
showobligatoria | boolean | - | |
className | string | - | |
onGone | (() => void) | - |
Especificaciones
Generado desde el código: las variantes de los tipos, los estados y tokens del CSS, y los patrones de motion que aplican. Las grillas muestran el componente real en ambos temas; los números se miden en la página.
ImageCompare
- Estados
- Keyboard focus
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-compare.alea-compare-layer.alea-compare-handle- Atributos data
data-before
Lens
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-lens.alea-lens-glass
ImageReveal
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-image-reveal.alea-fx-defs- Atributos data
data-in
Disintegrate
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-disintegrate.alea-fx-defs
Accesibilidad
- El asa de ImageCompare es un slider con nombre y valor: las flechas la mueven un 5%, Inicio y Fin saltan a los extremos.
- Lens es para el puntero; la imagen completa siempre está disponible para teclado y lectores de pantalla.
- Reveal y dissolve omiten su animación con movimiento reducido.
Teclado
| Tecla | Acción |
|---|---|
| Izquierda o Flecha derecha | ImageCompare: mueve el asa |
| Inicio o Fin | ImageCompare: al inicio o al final |
Qué hacer y qué evitar
Hacer
- Da a las dos imágenes de ImageCompare un texto alternativo que diga qué cambió.
- Reserva Disintegrate para un elemento eliminado, no para cada vez que algo se quita.
Evitar
- No pongas detalles solo bajo la lupa.
- No hagas aparecer con efecto una imagen que la gente espera usar: muéstrala.