Number Flow Trading is an interactive Framer component for displaying animated prices with corresponding percentage changes. Each price smoothly transitions between values using Number Flow, while the percentage indicator automatically switches between positive and negative states.
Positive changes display an upward indicator with a green background, while negative changes rotate the indicator and use a red background. The layout animation keeps the price and percentage indicator smoothly aligned as values change.
The component includes a Shuffle button that lets users cycle through multiple configured price and percentage entries. Designers can add their own values and differences directly from the Framer property panel.
The button is also fully customizable, allowing control over its text, visibility, size, spacing, colors, radius, and position.
Animated currency price values
Percentage difference display
Positive and negative change states
Automatic directional arrow animation
Smooth number transitions
Multiple price entries
Interactive Shuffle button
Custom button styling
Adjustable price typography
Configurable spacing and sizing
Responsive layout
Number Flow animation
Motion-based layout transitions
Currency formatting in USD
Percentage formatting with up to 2 decimal places
Number Flow Trading is an interactive Framer component for displaying animated prices with corresponding percentage changes. Each price smoothly transitions between values using Number Flow, while the percentage indicator automatically switches between positive and negative states.
Positive changes display an upward indicator with a green background, while negative changes rotate the indicator and use a red background. The layout animation keeps the price and percentage indicator smoothly aligned as values change.
The component includes a Shuffle button that lets users cycle through multiple configured price and percentage entries. Designers can add their own values and differences directly from the Framer property panel.
The button is also fully customizable, allowing control over its text, visibility, size, spacing, colors, radius, and position.
Animated currency price values
Percentage difference display
Positive and negative change states
Automatic directional arrow animation
Smooth number transitions
Multiple price entries
Interactive Shuffle button
Custom button styling
Adjustable price typography
Configurable spacing and sizing
Responsive layout
Number Flow animation
Motion-based layout transitions
Currency formatting in USD
Percentage formatting with up to 2 decimal places
