React animation example
React Text Animation: Scramble Decode Effect
A scramble effect sells "something is being computed": each letter cycles through random glyphs before settling, left to right. It is a good fit for dashboards, AI products and developer tools, where a plain fade feels too soft. Click the text to run it again with the next phrase.
- 4.3 KB file
- 6 live inputs
- React runtime
How this scramble text works
- Every letter gets a settle time; before it, the letter shows a random glyph from the charset input.
- Phrases are separated by "|" in the text input, and each click advances to the next one.
- A "decoded" event fires when the last letter lands, so you can chain the next step of your UI.
Add it to your React app
Install exodeui, download the file below, and paste this. The code updates as you customize. Other runtimes are in the other tabs.
import { ExodeUICanvas } from 'exodeui';
// react-text-effect.bexode goes in /public (download it below)
export function ReactTextEffect() {
return (
<ExodeUICanvas
src="/react-text-effect.bexode"
fit="Layout"
autoPlay
interactive
onTrigger={(name) => {
// fires: 'decoded'
}}
style={{ width: '100%', height: 420 }}
/>
);
}Inputs
| Input | Type | Default | Range |
|---|---|---|---|
phrases | Text | Ship motion, not specs|One file, every platform|Designed in minutes | — |
charset | Text | !<>-_\/[]{}=+*^?#ABCDEFX01 | — |
speed | Number | 1 | 0.3 – 3 |
accent | Text | #4ade80 | hex colour |
ink | Text | #f4f4f5 | hex colour |
bg | Text | #09090b | hex colour |
Events: decoded
More React animations
Orbit LoaderThree orbiting dots with motion trails and a live percentage; works as an endless spinner or a determinate loader.Depth Parallax SceneFive depth layers of mountains and sky that shift with the cursor at different speeds.Shared Element TransitionA card grid where the tapped card springs into a full detail page and back: a shared element transition.Liquid Fill ButtonA button that fills with a liquid wave on hover and morphs into a checkmark on click.Like Heart IconA heart icon that squashes, pops and bursts into particles when liked, with a live counter.3D Flip CardA two-sided card that flips in 3D on a spring, with a sliding highlight and hover tilt.
The same idea in other frameworks: Flutter wavy typewriter · SwiftUI shimmer reveal text · JavaScript terminal typing effect