---
title: "Passwordle — Free Framer component · Best of Framer"
description: "Free Framer component · by Mai Studio · Text. Title: Game title (default: \"Passwordle\")."
canonical: "https://framer.elliotli.dev/component/passwordle"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/Passwordle

# Passwordle

[View on Framer](https://framer.com/marketplace/components/passwordle/?via=elliot-li)

![Passwordle preview image 1](https://framer.elliotli.dev/og/component/passwordle/6166d73604a77814/1600x1200.jpg)

## 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 [How rankings work →](/terms#rankings)

-   All · #6138

## Details

- **Author**: Mai Studio
- **Published**: 2025-08-08
- **Updated**: 2025-08-08
- **Added**: 2025-07-31
- **Categories**: Text

## More like this

-   [Text Reveal Effect](/component/text-reveal-effect) — Lera · $4 — Text reveal effect over "ghost" layer.
-   [Soft Heading](/component/soft-heading) — Kaisa A · Free — Animated Soft Heading in 2 colors
-   [Curved Text Marquee](/component/curved-text-marquee) — Ahmet Loca · Free — Animated Bend
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing