Price Scroll
Animated price component that scrolls from one value to another on hover or on any trigger. Fully customizable with prefix, font, color, and animation speed.
Make it with Workshop
Build your own component with AI
Scroll Price is a sleek and interactive pricing component designed to visually engage users by animating a price transition on hover. Ideal for product showcases, pricing pages, and promotional displays.
Features
Animated Value Scroll: Smoothly transitions from a starting price (From Number) to an ending price (To Number).
Custom Prefix & Suffix: Add currency symbols or units (e.g., US$, €, %, etc.).
Animation Speed Control: Adjust transition duration to match your site’s flow (default: 0.5s).
Flexible Styling:
Font Family: Customize to match your branding (default: Inter)
Font Size: Fully adjustable (default: 120px)
Font Weight: Set the desired emphasis
Text Color: Pick any HEX color for perfect visual fit
Configuration
From Number: Starting value (e.g., 200)
To Number: Ending value (e.g., 500)
Scroll Trigger: Controlled by hover interaction
Scroll Mode: Can be toggled (Yes/No)
