Random Name Picker Spinner Wheel - Customizable Randomizer

Technical Specification for the Random Name Picker Spinner Wheel

Overview

The Random Name Picker Spinner Wheel is a browser-based utility designed for fair, visual random selection. It focuses on performance, accessibility, and high customizability for educators, event hosts, and casual users.

User Interface and Design

• Layout: The center stage features a large, interactive Canvas-based wheel. The sidebar handles input management, while the footer contains controls for history and settings.
• Color Palette: High-contrast, accessible colors (WCAG compliant). The wheel segments cycle through a vibrant, distinct color palette for readability.
• Animations:
  • Smooth deceleration physics for the spinning wheel.
  • Particle-based confetti overlay upon selecting a winner.
  • Responsive layout that adjusts wheel size based on viewport width.

Key Features

1. Input Management:
   • Textarea input for comma-separated or newline-separated lists.
   • File import (CSV/TXT) for batch uploading large lists.
   • 'Save as preset' functionality using browser LocalStorage.
2. Spinning Customizations:
   • Spin Duration: Adjustable speed settings (Slow, Normal, Fast, Instant).
   • Removal Logic: Toggle switch for 'Eliminate winner after spin' to manage round-robin style games.
   • Sound Effects: Optional toggle for ticking audio during spin and celebratory chime on success.
3. Visual Customization:
   • Custom slice colors (User-defined or auto-generated rainbow theme).
   • Wheel label font size toggles (Auto-scale based on slice width).
   • Choice of center icon (None, Standard Pointer, Custom Image).
4. Result Handling:
   • Results Log: A collapsible sidebar panel showing the chronological history of picked items.
   • Shareability: Unique URL generation including current list state (via Base64 encoding in hash params).
   • Export: Ability to save the result history as a PDF or text file.

Technical Stack

• Frontend: Vanilla JavaScript (ES6+), HTML5 Canvas for high-performance rendering, CSS3 for animations.
• Accessibility: ARIA-labeled buttons, full keyboard navigation for spinning, and screen reader-friendly output announcements.
• Performance: Zero external dependencies to ensure ultra-fast loading times, even on low-bandwidth networks.