Word Prism
Words on the faces of a prism that turns to the next one. Pro · 3D and motion › 3D objects and showcases
A word in running text that sits on the faces of a prism and turns to the next one: the faces are real 3D planes around an axis, so the old word rolls away as the new one rolls in, shading as it turns. Sits on the text baseline and takes the width of the longest word, so the line never jumps. Assistive technology reads all the words once instead of the changing one. Stops off screen, in a hidden tab and with reduced motion (the current word then stays put).
Installation
npx valyro-cli@latest login
npx valyro-cli@latest add word-prismnpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { WordPrism } from 'valyro-ui-pro';Props
| Prop | Type | Default | |
|---|---|---|---|
words * | string[] | The words on the faces of the prism, in the order they come up. | |
index | number | Index of the word facing the viewer (controlled). | |
defaultIndex | number | 0 | Index of the word facing the viewer at first (uncontrolled). |
onIndexChange | (index: number) => void | Called when the prism turns to another word — by itself every interval ms, or from outside. | |
interval | number | 2400 | Turns to the next word every so many ms; 0 stops it (the word then changes only with index). Pauses on hover. |
paused | boolean | false | Holds the current word, e.g. from a pause button of the page (moving text must be pausable, WCAG 2.2.2). |
axis | 'x' | 'y' | 'x' | x — the prism rolls upwards, like a split-flap; y — it spins sideways. |
duration | number | 700 | Length of one turn, ms. |
accent | boolean | true | Paints the words with the theme's accent colour. |
Related components
- Orbit Showcase — 3D ring of cards: drag with momentum, arrows, keyboard
- Coverflow Carousel — 3D product carousel on native scroll: swipe with momentum, arrows, keyboard
- Flip Card — Two-sided card that flips in 3D
- Reveal — Reveal any component on scroll: rise, fade in, 3D unfold
- Stagger — Lists, grids and table rows appear in a wave, one after another
- Tilt — Tilt, lift, glare and magnetic pull under the cursor for any card
- Layout Group — Jump-free reordering: filter, sort, regrid
- Presence — Enter and exit: an element stays mounted until its exit animation ends
- Scene Backdrop — WebGL or CSS scene behind a regular UI: hero, cards, dashboard
- Scroll Cylinder — Headline lines on a rotating cylinder, driven by scroll
- Stacking Panels — Panels stick on scroll and pile into a stack
- Helix Rail — Cards on a helix that spins with scroll
Previous: Flip Card · Next: Button 3D · All 3D and motion