Svelte Gamified Login Screen
Tired of boring, conventional login forms? This project reimagines the authentication experience as a fun, interactive mini-game.
Instead of simply typing your credentials, you must catch the correct letters and characters as they fall from the top of the screen. It's a test of attention and reflexes that provides a unique and memorable first impression for any application.
You can test it here: https://svelte-future-login.surge.sh/
✨ Concept & Inspiration
The idea for this project was inspired by a creative concept demonstrated in an Instagram reel. The goal was to bring that interactive and challenging login mechanic to life using Svelte, TypeScript, and Tailwind CSS.
🎮 Features
- Gamified Input: Catch randomly falling letters to enter your email and password.
- Engaging User Experience: Turns a mundane task into a fun and challenging interaction.
- Modern Tech Stack: Built with the latest SvelteKit, TypeScript for type safety, and Tailwind CSS for styling.
- Responsive Design: The game is playable on all devices, from mobile phones to desktops.
- Simple & Customizable: The codebase is clean and easy to understand, making it simple to modify styles or game mechanics.
🚀 Getting Started
Follow these instructions to get a copy of the project up and running on your local machine for development and testing purposes.
Prerequisites
You need to have Node.js (version 18 or higher) and npm installed on your machine.
Installation
- Clone the repository:
git clone https://github.com/SirSalamandra/svelte-login-screen.git
- Navigate to the project directory:
cd svelte-login-screen
- Install the dependencies:
npm install
💻 Running the Project
Once you've installed the dependencies, you can run the development server:
npm run dev
This will start the development server, typically on http://localhost:5173. Open this URL in your browser to see the login screen in action.
🛠️ Building for Production
To create a production version of your app:
npm run build
You can preview the production build with npm run preview.
🤝 Contributing
Contributions are welcome! If you have suggestions for improving this login screen, feel free to fork the repository and submit a pull request.
- Fork the Project
- Create your Feature Branch (git checkout -b feature/AmazingFeature)
- Commit your Changes (git commit -m 'Add some AmazingFeature')
- Push to the Branch (git push origin feature/AmazingFeature)
- Open a Pull Request
📄 License
This project is open-source. We recommend adding an MIT License to your repository. You can create a LICENSE file in the root of your project and add the MIT license text to it.
