# ShinyText > Atom — orn-ui > ⚠️ Requiere : Este componente (como todos los de orn-ui) debe renderizarse dentro de un ancestro , o lanza un error en runtime. See https://orn-ui-docs.vercel.app/getting-started.md > Corre en Expo SDK 54, 55, 56 y 57, y en React Native puro >=0.81 con react >=19.1. Sin módulos nativos — funciona en Expo Go, sin prebuild. ## Instalación Instala solo este componente (copia el código fuente a tu proyecto, sin dependencia npm) ```bash npx orn-ui add shiny-text ``` O instala el paquete completo e impórtalo ```tsx pnpm add orn-ui import { ShinyText } from 'orn-ui/shiny-text'; ``` Depende de: core (theme + icons), transition ## Variantes ### align="center" — wraps by word on several lines ```tsx ``` ### duration and delay — slow sweep, long pause ```tsx ``` ### animated={false} — plain text in shineColor, same box ```tsx ``` ## Código completo del demo ```tsx function ColorPairs() { const colors = useColors(); return ( default — textLight resting, primary shining border → text — the widest pair the theme has ); } function Spreads() { const colors = useColors(); return ( ); } function UpgradeCard() { const colors = useColors(); return ( Unlimited invoices · priority support ); } export function ShinyTextDemo() { const colors = useColors(); // El par por defecto sólo cambia luminancia; para mirar *cómo* se mueve la // banda conviene el par más separado del tema, que cambia tono también. const strong = { color: colors.border, shineColor: colors.text }; const variants: VariantDef[] = [ { label: 'colors — the resting/shine pair is what makes it readable', content: , }, { label: 'align="center" — wraps by word on several lines', content: ( ), }, { label: 'spread — narrow glint vs. soft wave', content: , }, { label: 'duration and delay — slow sweep, long pause', content: , }, { label: 'animated={false} — plain text in shineColor, same box', content: ( ), }, { label: 'in a card, with the brand accent', content: , }, ]; return ; ``` ## Props | Nombre | Tipo | Por defecto | Descripción | |---|---|---|---| | `text` | `string` | — | El texto a animar. Sólo un string: el efecto necesita los caracteres. | | `duration?` | `number` | 2400 | Milisegundos que tarda un barrido de punta a punta. | | `delay?` | `number` | 600 | Pausa entre barridos, en ms. | | `spread?` | `number` | 0.28 | Ancho de la banda brillante como fracción del texto, de 0 a 1. Valores chicos dan un destello angosto; grandes, un latido. | | `animated?` | `boolean` | true | En false dibuja texto plano en `shineColor`. | | `color?` | `string` | theme.colors.textLight | Color de los caracteres en reposo. | | `shineColor?` | `string` | theme.colors.primary | Color de la banda que lo recorre. | | `align?` | `'left' \| 'center' \| 'right'` | left | Alineación horizontal de la línea. | | `style?` | `StyleProp` | — | Sólo tipografía: `color` y `shineColor` ganan sobre cualquier color puesto acá. |