# ShinyText > Atom — orn-ui > ⚠️ Requires : This component (like every orn-ui component) must render inside a ancestor, or it throws at runtime. See https://orn-ui-docs.vercel.app/getting-started.md > Runs on Expo SDK 54, 55, 56 and 57, and on bare React Native >=0.81 with react >=19.1. No native modules — works in Expo Go, no prebuild. ## Installation Install just this component (copies the source into your project, no npm dependency) ```bash npx orn-ui add shiny-text ``` Or install the whole package and import it ```tsx pnpm add orn-ui import { ShinyText } from 'orn-ui/shiny-text'; ``` Depends on: core (theme + icons), transition ## Variants ### 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 ``` ## Full demo source ```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 | Name | Type | Default | Description | |---|---|---|---| | `text` | `string` | — | The text to animate. Only a string: the effect needs the characters. | | `duration?` | `number` | 2400 | Milliseconds a single sweep takes end to end. | | `delay?` | `number` | 600 | Pause between sweeps, in ms. | | `spread?` | `number` | 0.28 | Width of the bright band as a fraction of the text, from 0 to 1. Small values give a narrow glint, large ones a soft wave. | | `animated?` | `boolean` | true | When false it renders plain text in `shineColor`. | | `color?` | `string` | theme.colors.textLight | Resting color of the characters. | | `shineColor?` | `string` | theme.colors.primary | Color of the band that travels across. | | `align?` | `'left' \| 'center' \| 'right'` | left | Horizontal alignment of the line. | | `style?` | `StyleProp` | — | Typography only: `color` and `shineColor` win over any color set here. |