'/%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
CardStack, FlipCard y bordes
Tarjetas que se apilan y se abren en abanico, una tarjeta que gira para mostrar su reverso, un borde con degradado que gira para la destacada, y un brillo alrededor de un botón premium.
import { CardStack, FlipCard, GradientBorder, RimGlow } from '@alea/pro';
Ejemplos
Pila de tarjetas
Varias del mismo tipo, apiladas; se abren en abanico con hover o foco con un resorte.
Starter
Hover the stack.
Pro
Hover the stack.
Team
Hover the stack.
Tarjeta que gira
El reverso aparece con hover, foco o clic: detalles detrás de un resumen.
Borde con degradado y brillo
Un borde cuyo degradado gira, para la tarjeta destacada; un brillo alrededor de un botón premium.
Pro yearly
Most teams pick this.
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-slow…--alea-motion-spring…
Component
--alea-i…--alea-stack-n…--alea-stack-spread…
Props
CardStack props
Tarjetas apiladas una sobre otra que se abren en abanico con hover o foco, con un resorte. Para "hay varias de estas" (planes, fotos, notificaciones).
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
className | string | - | |
spread | number | 1 |
FlipCard props
Dos caras: el reverso aparece con hover, foco o clic (teclado: Enter o Espacio). Para detalles detrás de un resumen.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
backobligatoria | ReactNode | - | |
frontobligatoria | ReactNode | - | |
className | string | - | |
height | number | 220 |
GradientBorder props
Un borde cuyo degradado gira lentamente alrededor del elemento: un "destacado" más fuerte que BorderBeam.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
as | ElementType | 'div' | |
className | string | - | |
duration | number | 6 | |
style | CSSProperties | - | |
width | number | 1.5 |
RimGlow props
Un brillo suave que recorre el borde de una píldora: para una llamada a la acción premium ("Obtener Pro"). Envuelve un Button.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
className | string | - |
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.
CardStack
- Estados
- Hover (CSS)Focus inside
- 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-card-stack.alea-card-stack-item
FlipCard
- 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-flip.alea-flip-toggle.alea-flip-inner.alea-flip-face- Atributos data
data-flippeddata-back
GradientBorder
- 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-gradient-border
RimGlow
- 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-rim-glow
Accesibilidad
- FlipCard es un botón con aria-pressed; la cara que no se ve está oculta para lectores de pantalla.
- CardStack mantiene cada tarjeta en el orden de lectura; el abanico es solo visual.
- Los bordes y brillos son decoración; dejan de girar con movimiento reducido.
Teclado
| Tecla | Acción |
|---|---|
| Enter o Espacio | FlipCard: girar |
| Tab | CardStack: el foco adentro abre la pila en abanico |
Qué hacer y qué evitar
Hacer
- Usa un efecto por pantalla, en la tarjeta que más importa.
- Cuando el reverso tiene datos clave, ponlos también en texto fuera de la tarjeta.
Evitar
- No escondas lo que la gente necesita detrás de un giro.
- No animes el borde de todas las tarjetas: la destacada solo resalta si está sola.