https://github.com/anurag1101/hackpuff

HackPuff is an interactive terminal simulation that takes you through a thrilling "hacking" sequence. Watch as messages appear with animated effects, random colors, and sound, all while a dynamic background sets the stage for your virtual hack.
https://github.com/anurag1101/hackpuff

animations-css css hacker-terminal html javascript responsive-web-design soundeffects

Last synced: 11 months ago
JSON representation

HackPuff is an interactive terminal simulation that takes you through a thrilling "hacking" sequence. Watch as messages appear with animated effects, random colors, and sound, all while a dynamic background sets the stage for your virtual hack.

• Host: GitHub
• URL: https://github.com/anurag1101/hackpuff
• Owner: Anurag1101
• Created: 2025-01-29T08:23:28.000Z (12 months ago)
• Default Branch: main
• Last Pushed: 2025-02-13T14:26:47.000Z (11 months ago)
• Last Synced: 2025-02-13T15:30:27.718Z (11 months ago)
• Topics: animations-css, css, hacker-terminal, html, javascript, responsive-web-design, soundeffects
• Language: JavaScript
• Homepage: https://hackpuff.netlify.app/
• Size: 14 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# HackPuff: A Terminal Simulation

**HackPuff** is a fun, interactive terminal simulation that mimics a fictional data-hacking sequence. This project creates a visually engaging, dynamic **"hacking"** experience with colorfully animated messages, random delays, and background transitions. It uses `HTML`, `CSS`, and `JavaScript` to simulate the feeling of a terminal running a hack sequence.

## Features:

- **Interactive Terminal:** Displays various stages of a hack simulation in real-time, with messages like **"Initializing HackPuff..."** and **"Reading your Files..."**

  

- **Animated Text:** Messages appear with random colors and are animated for a more immersive experience.

- **Sound Effects:** Adds sound effects when certain messages (like **"Cleaning up..."**) are displayed to enhance the atmosphere.

- **Dynamic Backgrounds:** Changes the background image after the hack sequence, making it look like the "hack" was completed.

- **Responsive Design:** Optimized for desktop, tablet, and mobile views to ensure a smooth user experience on different devices.

## Installation:

### Clone the repository:

    git clone https://github.com/your-username/HackPuff.git

### Navigate to the project directory:

    cd HackPuff

    

### Open the `index.html` file in your web browser to see the simulation in action.

## How It Works:

The project runs an interactive sequence of terminal messages that simulate a hacking attempt. Here's how the flow is designed:

- **Message Display:** As soon as the user clicks the **"Start"** button, a series of messages are displayed, each message randomly colored and animated for extra emphasis.

- **Random Delays:** To mimic the unpredictability of a hack, random delays are added between each message using JavaScript.

- **Sound Effect:** When the message **"Cleaning up..."** appears, a sound effect is triggered to make the cleanup process feel more realistic.

- **Background Change:** After the messages are finished, the page clears, and a new background image (styled like a **"matrix-hacker"** environment) is displayed with a final message saying **"Thank you for your Data."**

## Project Structure:

    HackPuff/

    │

    ├── index.html        # Main HTML file

    ├── style.css         # Custom styles for the terminal

    ├── script.js         # JavaScript file to handle message flow, animations, and sounds

    ├── matrix-hacker-background.jpg  # Background image used after the hack

    ├── little-alien-142498.mp3        # Sound effect for the "Cleaning up..." message

## Code Explanation:

**addItem Function:**  Adds a message to the screen, applying random colors and animation based on the message.

    const addItem = async (item) => { ... }

**randomDelay Function:**  Creates a random delay between messages to simulate the unpredictable nature of the hack.

    const randomDelay = () => { ... }

**main Function:**  Controls the flow of the simulation by displaying each message in sequence, playing sounds, and changing the background once the "hack" is complete.

    async function main() { ... }

**Sound Effect:** A sound effect is triggered when the "Cleaning up..." message is displayed to enhance the simulation.

    const cleanupSound = new Audio("little-alien-142498.mp3"); 

    cleanupSound.play();

**Button Click Listener:**  Prevents multiple clicks and triggers the start of the simulation when the user clicks the "Start" button.

    document.querySelector(".glow-on-hover").addEventListener("click", () => { ... });

    

## Usage:

- Click the **"Start"** button to begin the simulation.

- Watch as messages pop up with randomized colors and animations.

- Enjoy the sound effects and background transition once the sequence finishes.

## Contributing:

Feel free to fork this project and submit pull requests if you'd like to contribute. Improvements are always welcome!

## License:

This project is open-source and available under the `MIT` License.