Number Flow

Details

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.

Features

• 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