Passwordle

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