Price Scroll

Show Preview
Price Scroll

About Price Scroll

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)