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-prism

npm 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
Scroll Effect — Twenty-four scroll effects — reveals, parallax, a progress bar, sticky stacking cards, a sideways track, text that fills in — on scroll-driven timelines
Page Transition — Forty transitions between pages, routes and steps — cube, carousel, circle and more — with light variants for machines without a GPU
Scene Backdrop — WebGL or CSS scene behind a regular UI: hero, cards, dashboard
Scroll Cylinder — Headline lines on a rotating cylinder, driven by scroll

Previous: Flip Card · Next: Button 3D · All 3D and motion