Skip to content

component

Number Generator

By Aidan Looker

Details

Summary

What is Number Generator?

Description

What is Number Generator? Number Generator is a premium, fully animated random number component. Set a custom range, hit roll, and watch the number animate into place with mode-specific motion effects and optional particle bursts. Ideal for landing pages, gamified experiences, prize draws, interactive prototypes, and any project that needs randomised number selection with a polished, branded look. Core Features Four visual modes — Fun (vibrant gradient with confetti particles), Modern (dark glass with blur effects), Minimal (clean light theme), and Neon (glowing dark UI with neon accents) Smooth rolling animation with three speed presets and per-mode motion styles including bounce, blur reveal, and shake effects Scrollable result history panel with numbered entries and accent-highlighted latest result. Auto-roll mode with adjustable interval for hands-free continuous generation Full color override system — background, number, button, accent, range label, and result label colors are all independently customizable Keyboard trigger support — press Space or Enter to roll without clicking Controls inside Framer General Mode — Fun, Modern, Minimal, or Neon visual theme Min Value / Max Value — define the number range (–99,999 to 99,999) Button Label — customise the roll button text Number Size — Small (56px), Medium (80px), or Large (110px) Behavior Roll Speed — Fast (0.6s), Normal (1.2s), or Slow (2s) Allow Repeats — permit or block consecutive duplicate results Exclude — comma-separated list of numbers to skip Keyboard — toggle Space / Enter key trigger Auto Roll Auto Roll — enable automatic rolling at a set interval Auto Interval — time between rolls (500ms–30,000ms) History Show History — display a scrollable list of past results Max Results — maximum entries to keep (3–500) Effects Particles — toggle confetti / glow bursts on result Intensity — Low (10), Medium (20), or High (30) particles per burst Colors Background, Number, Range Label, Accent, Button, and Result Label — six independent optional color overrides Font Custom font family selection Best use cases Prize draws and giveaway selectors on event or promotional landing pages Gamified web experiences, quizzes, and interactive product demos Randomised content generators for educational or presentation sites Prototype interactions that require dynamic, randomised data display Drop it onto your canvas, pick a mode, set your range, and ship a polished random number experience in under a minute.

Introduction

Roll, animate and display random numbers

Rank history

Daily rank per list, from the first snapshot — lower is better.

12001400157358/148/228/309/79/15
  • All · #5735