'/%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
Tilt y Magnet
Una tarjeta de muestra se inclina en 3D hacia el puntero con un reflejo; una llamada a la acción se acerca al puntero cuando está cerca.
import { Tilt, Magnet } from '@alea/pro';
Ejemplos
Tilt y magnet
Una tarjeta de muestra se inclina hacia el puntero; una llamada a la acción se acerca a él. Ambos se apagan en pantallas táctiles y con movimiento reducido.
Alea Pro
Hover me.
Tokens
Los tokens de diseño que usa este componente, con su valor en el tema actual. Cambia cualquiera para darle otro estilo.
Motion
--alea-motion-duration-base…--alea-motion-duration-instant…--alea-motion-duration-slow…--alea-motion-ease-out…
Component
--alea-px…--alea-py…--alea-tilt-scale…--alea-tilt-x…--alea-tilt-y…
Props
Tilt props
Inclina su hijo en 3D hacia el puntero, con un reflejo opcional. Se apaga en pantallas táctiles y con movimiento reducido.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
as | ElementType | 'div' | |
className | string | - | |
glare | boolean | true | |
max | number | 8 | |
scale | number | 1.02 | |
style | CSSProperties | - |
Magnet props
Acerca un poco su hijo al puntero cuando está cerca (para una llamada a la acción principal). Se apaga en pantallas táctiles y con movimiento reducido.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
as | ElementType | 'span' | |
className | string | - | |
radius | number | 80 | |
strength | number | 0.3 | |
style | CSSProperties | - |
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.
Tilt
- Estados
- Hover (CSS)
- 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-tilt- Atributos data
data-glare
Magnet
- 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-magnet
Accesibilidad
- Ambos solo reaccionan a un puntero preciso y se apagan con movimiento reducido y en pantallas táctiles.
- Nada se aleja del puntero, así los objetivos siguen siendo fáciles de alcanzar.
Qué hacer y qué evitar
Hacer
- Usa tilt en fotos de producto y tarjetas de muestra.
- Usa magnet en un solo botón principal por página.
Evitar
- No inclines formularios, tablas ni nada que se lea por mucho tiempo.