Cursor Catcher transforms a passive user into an active participant by turning their cursor into a "player" in a fun, interactive mini-game.
Made with Workshop
Build your own component with AI
🕹️ Cursor Catcher
This component isn't just a part of your website; it's a retro arcade experience built directly in Framer. Cursor Catcher transforms a passive user into an active participant by turning their cursor into a "player" in a fun, interactive mini-game.
Inspired by classic arcade games, it recreates that nostalgic feel with simple pixel art, jittery character movement, and satisfying particle effects, all to add a playful and memorable touch to any website.
The Cursor Catcher component offers a wide range of controls to personalize the gameplay and visuals.
Gameplay & Logic:
Catch Radius: Set the distance a user's cursor needs to be from the character to make a "catch."
Game Timer: Define the duration of the game in seconds.
Character Speed: Adjust how quickly the character moves across the screen.
Show High Score: A toggle to display the highest score achieved by a user.
Visuals & Aesthetics:
Character: Choose from five different pixel art characters to be the "catcher": Robot, Ghost, Bug, Crystal, or Spark.
Theme: Select a color palette that matches your site's aesthetic from Classic Green, Neon Synthwave, Arcade Blue, or Sunset Orange.
Pixel Size: Control the size of the individual pixels, making the graphics appear more blocky or more detailed.
Scanlines: A toggle to add or remove the nostalgic CRT scanline effect on the game screen.
Particles: A toggle to enable or disable the particle effects that appear when the user makes a catch.