Examples
Trend Control
Control digit spin direction with static values or dynamic functions
The trend prop controls which direction digits spin during transitions. You can pass a static value or a function for dynamic control.
Trend values
| Value | Behavior |
|---|---|
undefined (default) | Auto-detects: increasing values spin up, decreasing spin down |
1 | Always spin upward |
-1 | Always spin downward |
0 | Each digit takes the shortest path (e.g. 9→1 goes up through 0 instead of rolling down through 8,7,6...) |
Dynamic trend function
You can also pass a function that receives the previous and next values:
<NumberFlow
value={price}
trend={(prev, next) => {
if (next > prev) return 1; // Price up → spin up
if (next < prev) return -1; // Price down → spin down
return 0; // Same → shortest path
}}
style={{ fontSize: 36, color: '#fff' }}
/>