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).
Safa Bilici
