Skip to content

component

Passwordle

By Mai Studio

Details

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.

12001400152558/148/228/309/79/15
  • All · #5255