svelte-kit-vice/src/uix/eidos/components/text-gradient

Eidos TextGradient

<TextGradient> pinta un gradiente animado A TRAVÉS del texto (background-clip: text), con borde opcional enmarcado en el mismo gradiente. El texto queda intacto en el DOM — efecto solo de pintura, los lectores de pantalla no notan nada.

Familia text-effects (TextBlur / TextCircular / TextFocus / TextScramble) — diseño de familia: docs/decisions/design-text-effects.md.

Superficie

<TextGradient>Shiny words</TextGradient>
<TextGradient colors={['--color-primary-solid', '--color-tertiary-solid']}>Lista de stops del tema</TextGradient>
<TextGradient colors="aurora" direction="diagonal">Gradiente canónico con nombre (S9)</TextGradient>
<TextGradient showBorder pauseOnHover yoyo={false}>Con marco</TextGradient>

colors discrimina por forma: un string[] es una lista de stops; un string a secas nombra un gradiente canónico del theming (var(--gradient-{name})).

Props clave

Prop	Tipo	Default	Notas
children	Snippet	—	El texto real (queda en el DOM).
colors	string | string[]	naranjas del seed	string[] = lista de stops (tokens --color-* → var() o cualquier color CSS). string = nombre de gradiente canónico (var(--gradient-{name})).
animationSpeed	number (s)	8	Duración del ciclo de pan.
showBorder	boolean	false	Marco con el mismo gradiente.
direction	'horizontal' | 'vertical' | 'diagonal'	'horizontal'	Eje del pan.
pauseOnHover	boolean	false	Pausa al hover.
yoyo	boolean	true	Alterna la dirección (alternate) o loop continuo.

Tokens públicos

--text-gradient-duration · --text-gradient-radius · --text-gradient-weight · --text-gradient-border-inner-bg · --text-gradient-border-padding.

Baseline

Port limpio del seed web/routes/demos/animations/text/gradient/gradient.svelte (colección intacta como referencia — provenance en docs/architecture/packs.md). El seed ya era CSS puro con reduced-motion; sus déficits: colores solo crudos, #000 fijo en el interior del borde, radius/weight/padding mágicos, y margin: 0 auto (opinión de layout).

Comparativa

Capacidad	Eidos	Tailwind bg-clip	Framer Motion text	animate-gradient libs
Stops = tokens del tema (re-tint al cambiar modo)	Sí	Manual	No	No
Gradientes con NOMBRE del sistema (S9)	Sí	No	No	No
CSS puro (cero JS por frame)	Sí	Sí	No (JS)	Depende
Borde en el mismo gradiente	Sí	Manual	No	No
Reduced motion	Sí	Manual	Sí	No

Referencias externas: MDN background-clip (https://developer.mozilla.org/docs/Web/CSS/background-clip) · Tailwind gradient utilities (https://tailwindcss.com/docs/background-image) · react-bits GradientText (https://reactbits.dev/text-animations/gradient-text).

Decisiones

• Stops por var() interpolado — un token --color-primary-solid va al linear-gradient como var(--color-primary-solid): CSS nativo, reactivo al tema sin resolveToken JS.
• colors discrimina nombre vs stops (D-T3) — un string resuelve var(--gradient-{name}) (el set canónico de EidosConfig.gradients / applyGradients, jaula abierta → el tipo se queda en string, no una unión cerrada); un string[] son stops libres. Una sola prop en vez de colors + preset: el vocabulario canónico S9 y los stops crudos son la MISMA entrada, discriminada por forma (sin alias de prop).
• El interior del borde ya no es #000: token público --text-gradient-border-inner-bg con default --color-surface-default (el seed asumía fondo negro; aquí sigue al tema — fija el token para recuperar el look del seed).
• margin: 0 auto del seed NO se porta — centrar es del consumidor.
• Keyframes locales anotados /* functional: */ (R-4.5): pan ambiental decorativo, no firma perceptual de evento.
• No emite eventos sema (pausa por hover = estado CSS, sin percepción).

Gaps

• Ángulos arbitrarios del pan (más allá de 3 ejes): diferir — el eje canónico de ángulos existe (--gradient-angle-*); si un consumidor lo pide, direction acepta entonces esas keys.
• Pan del gradiente con nombre respetando SU ángulo interno: descartar — el pan mueve background-position; el ángulo del nombre es parte del gradiente y se respeta tal cual.
• Nombres MESH (colors="aurora" role-mesh): no soportado por naturaleza — un mesh serializa a radiales + un color base, y ese color base no es un background-image válido (sí un background shorthand), así que no pinta a través de background-clip: text. colors con nombre exige un gradiente de un solo <image> (linear / radial / conic).
• Texto multilínea con clip por línea: implementar cuando haya consumidor — background-clip: text ya cubre el caso común.

Passive justification

Pasivo por diseño: tratamiento de pintura sobre contenido real. Sin estados interactivos propios (el pause-on-hover es animation-play-state CSS), sin foco, sin teclado, sin ARIA extra — el contenido ES el contrato de accesibilidad.

Referencias

• Seed portado: web/routes/demos/animations/text/gradient/gradient.svelte.
• Gradientes con nombre: EidosConfig.gradients → --gradient-{name} (src/uix/eidos/lib/render-css.ts).