component
Passwordle
By Mai Studio
Details
- Mai StudioAuthor
- componentType
- 2025-08-08Published
- 2025-08-08Updated
- 2025-07-31Added
- TextCategories
Summary
Title: Game title (default: "Passwordle").
Description
How It Works Users guess a 5-letter word using a physical keyboard. Each guess provides color-coded feedback: green for letters in the correct position, yellow for letters in the word but misplaced, and gray for letters not in the word. Players have a set number of attempts (default: 5) to guess correctly. If successful, a success message appears, and the user is redirected to a specified URL (same or new tab) after a brief delay. If all attempts are used without success, a failure message shows, revealing the correct word, and a reset button allows restarting. The interface includes a title, a grid of guess rows, and animated tiles (bouncing for input, flipping for submitted guesses). The component is designed for Framer, with a polished, customizable look for prototypes, gamified logins, or educational tools. Variables You Can Alter Password Word : Set the 5-letter word to guess (default: "APPLE"). Redirect URL : URL to redirect upon success (default: "https://framer.com/"). Max Attempts : Number of allowed guesses (3–10, default: 5). Correct Color : Color for correct letters (default: green, #6aaa64). Present Color : Color for misplaced letters (default: yellow, #c9b458). Absent Color : Color for letters not in the word (default: gray, #787c7e). Empty Color : Color for empty tiles (default: light gray, #d3d6da). Text Color : Color for text (default: dark gray, #222). Background Color : Component background color (default: white, #fff). Font : Font settings like size, weight, and spacing (default: 32px bold, 0.1em spacing). Title : Game title (default: "Passwordle"). Success Text : Message on correct guess (default: "Access Granted"). Fail Text : Message on failure (default: "Access Denied"). Reveal Title : Prefix for revealed word on failure (default: "Word: "). Open Redirect in New Tab : Toggle to open redirect URL in a new tab (default: false, same tab).
Rank history
Daily rank per list, from the first snapshot — lower is better.
- All · #5255