Launching a plugin in the official WordPress directory is always an exciting experience. A few days ago, I published the Animated Raffle Winner, an interactive block designed specifically for the WordPress editor that provides a visual, fun, and accessible experience for conducting raffles and selecting random numbers.
In this post, I want to share a bit about what motivated the creation of this plugin, its main features, and how you can use it on your WordPress site.
What is the Animated Raffle Winner?
The central idea of the plugin is simple: to allow content creators, speakers, event organizers, and e-commerce owners to conduct lucky number draws directly on their pages or posts, without relying on external third-party tools. The spark for the creation of the plugin arose at the WordCamp Brazil last year.
Instead of simply displaying a static number on the screen, the Animated Raffle Winner transforms the drawing into an interactive event, building anticipation among participants with a suspenseful animation and celebrating the result on screen with fireworks, balloons, or confetti.
Key Features (Highlights of v1.0)
The plugin was born ready for production and includes the following features:
- Custom range: You can freely define the starting and ending numbers for the draw (including accepting negative numbers).
- Suspense animation: When clicking “Draw”, the numbers roll on the screen for 5 seconds before revealing the final result.
- Festive celebration: Dynamic fireworks cover the screen to celebrate the drawn number.
- Responsive interface: Works perfectly on mobile phones, tablets, and computers.
- Full customization in the Editor:
- Choose a custom background image directly from your WordPress media library.
- Opacity slider (0-100) for the image overlay.
- Predefined text sizes (Very small, Small, Medium, Large, and Very large) to fit your site’s layout.
- Re-draw flow: The button dynamically adapts to “Draw again” after each round, allowing for multiple consecutive draws with ease.
Focus on Accessibility and User Experience (UX)
One of the points I paid close attention to in the development of version 1.0 was usability and accessibility (a11y). Conducting visual and animated raffles can be exclusive if not carefully planned. Therefore, the block includes:
- Live announcements for Screen Readers: Implementation of
aria-liveregions to ensure the final drawing result is announced audibly to users of assistive technologies. - Motion Reduction Support: The block detects and respects the user’s operating system settings (
prefers-reduced-motion), smoothing or removing intense animations of number rolling and fireworks if the user has motion sensitivity. - Keyboard Control: You can interrupt the celebration animation and close full-view modes by pressing the
Escapekey. Additionally, the celebration automatically stops after a few seconds to avoid prolonged distractions.
How to Install and Use on Your Site
Starting to use the plugin is extremely simple:
- In your WordPress dashboard, go to Plugins > Add New.
- Search for “Animated Raffle Winner”.
- Click on Install and then on Activate.
- Open any post or page in the WordPress editor (also known as Gutenberg).
- Insert the Animated Raffle Winner block.
- Set the starting and ending numbers in the settings sidebar.
- Publish and click on Draw to see the magic happen!
Open Source and Contributions
The Animated Raffle Winner is an open-source project licensed under GPLv2. If you are a developer and want to see how the block was built using React and modern WordPress block APIs, or if you want to contribute with new ideas and fixes, the public repository is available on GitHub:
If you enjoyed the tool or have any suggestions for improvement, download it from the official page and leave your review. Your feedback is very important to guide future updates!
