Skip to content
/ ScayCute Public

ScayCute is a modern prank web app that starts with a cute cat and ends with a scary surprise. It also displays animated device info in a stylish glitchy UI. Perfect for fun, learning, and creative UX experiments.

Scayar.com

License

MIT license
1 star 1 fork Branches Tags Activity
Star
Notifications You must be signed in to change notification settings

Scayar/ScayCute

BranchesTags

Repository files navigation

ScayCute Logo

🐾 ScayCute

The Ultimate Cute-to-Scary Prank Web Application
Modern • Interactive • Freaky • Fun

Features License Python HTML5 CSS3 JavaScript

⭐ Star • 🐛 Report Bug • 💡 Request Feature

📖 Table of Contents

📝 About

ScayCute is a modern, fully-responsive web application that combines deceptive charm with unexpected horror. It starts with an innocent, adorable cat interface but quickly transforms into a startling experience featuring animated device information displays, glitch effects, and jump scares.

🎯 Purpose

Perfect for:

  • Pranks & fun with friends
  • Educational purposes - learning web technologies
  • Creative UX/UI experiments
  • Demonstrating responsive design
  • Understanding browser APIs

✨ Features

🎨 Frontend

  • 🌈 Glassmorphic Design - Modern glassmorphism UI with backdrop blur effects
  • 📱 Fully Responsive - Works seamlessly on desktop, tablet, and mobile devices
  • 🎭 Glitch Effects - Animated text glitches and flicker animations
  • 🎬 Jump Scare System - Randomized scary face overlays with audio
  • ⚡ Smooth Transitions - CSS animations and fade effects

🔧 Backend

  • 🐍 FastAPI Server - Optional Python backend for advanced deployment
  • 🌐 Static Hosting - Works with any static file server
  • 🔌 API Integration - Optional IP geolocation and Telegram notifications

🛡️ Privacy & Security

  • 🔒 100% Offline Mode - Works without any APIs or external services
  • ⚙️ Optional APIs - Only when you explicitly configure them
  • 🔐 No Data Collection - Respects user privacy by default

📊 Device Information Display

  • IP Address & Location (with API)
  • Device Type (Mobile/Tablet/Desktop)
  • Browser & Operating System
  • Screen Resolution
  • Language & Timezone
  • Memory & CPU Cores
  • Cookies & Referrer Information

🚀 Quick Start

Prerequisites

  • Python 3.8+ (optional, for FastAPI server)
  • Modern web browser (Chrome, Firefox, Safari, Edge)

Option 1: Simple Python Server (Recommended for Beginners)

# Clone the repository
git clone https://github.com/Scayar/ScayCute.git
cd ScayCute

# Start the server
python -m http.server 8000 --bind 0.0.0.0

# Open in browser
# Visit: http://localhost:8000

Option 2: FastAPI Server (For Production)

# Clone the repository
git clone https://github.com/Scayar/ScayCute.git
cd ScayCute

# Install dependencies
pip install -r requirements.txt

# Start the server
uvicorn main:app --host 0.0.0.0 --port 8000

# Open in browser
# Visit: http://localhost:8000

Option 3: Static Hosting

Simply upload all files to any static hosting service like:

  • GitHub Pages
  • Netlify
  • Vercel
  • AWS S3
  • Any web server

📸 Screenshots

Landing Page Scary Reveal Telegram Alert
Landing Page Scary Info Page Telegram Example

🏗️ Project Structure

ScayCute/
├── 📄 index.html          # Landing page with cute cat
├── 📄 scary.html          # Scary reveal page
├── 🎨 style.css           # All styles and animations
├── ⚙️ script.js           # Core functionality and logic
├── 🐍 main.py             # FastAPI server (optional)
├── 📋 requirements.txt    # Python dependencies
├── 🖼️ cute-cat.jpg        # Landing page background
├── 🎬 scary-video.mp4     # Background video
├── 🔊 scary-audio.mp3     # Scary sound effects
├── 📸 cat-landing.png     # Screenshot assets
├── 📸 scary-info.png      # Screenshot assets
├── 📸 telegram-example.png # Screenshot assets
├── 📝 README.md           # This file
└── 📜 LICENSE             # MIT License

🔧 Installation

Detailed Setup Instructions

  1. Clone Repository

    git clone https://github.com/Scayar/ScayCute.git
cd ScayCute

  2. For Python Server (Optional)

    # Create virtual environment (recommended)
python -m venv venv

# Activate virtual environment
# Windows:
venv\Scripts\activate
# Linux/Mac:
source venv/bin/activate

# Install dependencies
pip install -r requirements.txt

  3. Configure (Optional - for API features)

    • Edit script.js and add your API keys (see Advanced Configuration)

  4. Run

    # Simple server
python -m http.server 8000

# Or FastAPI
uvicorn main:app --host 0.0.0.0 --port 8000

🎮 Usage

Basic Usage

  1. Start the server
  2. Open http://localhost:8000 in your browser
  3. Click the button on the landing page
  4. Watch the magic happen! 👻

Sharing with Friends

Use ngrok to create a public URL:

# Install ngrok from https://ngrok.com/download
ngrok http 8000

# Share the public URL it provides
# Example: https://abc123.ngrok.io

🎨 Advanced Configuration

Enable IP Geolocation & Telegram Alerts

  1. Get API Keys:

  2. Edit script.js - Add your keys at the top:

    const IPGEOLOCATION_API_KEY = "YOUR_API_KEY_HERE";
const TELEGRAM_BOT_TOKEN = "YOUR_BOT_TOKEN_HERE";
const TELEGRAM_CHAT_ID = "YOUR_CHAT_ID_HERE";

  3. Save and refresh - Now features will work!

Customization Options

Change Colors

Edit CSS variables in style.css:

:root {
    --main-bg: #181818;
    --accent: #ff003c;        /* Main accent color */
    --glitch1: #ff003c;       /* Glitch effect color 1 */
    --glitch2: #00fff7;       /* Glitch effect color 2 */
}

Modify Jump Scare Timing

In script.js, find:

}, 5000 + Math.random() * 4000); // Random delay between 5-9s

🏗️ Architecture Flow

User Interaction Flow

📊 View Flow Diagram 
graph TD
    A[🐱 Landing Page<br/>Cute Cat Background] -->|User Clicks Button| B[💫 Transition Effect<br/>600ms Fade Out]
    B --> C{API Keys Configured?}
    C -->|Yes| D[🌐 Fetch IP Geolocation<br/>Optional API Call]
    C -->|No| E[Skip API Calls]
    D --> F[📱 Send Telegram Alert<br/>Optional Notification]
    F --> G
    E --> G[👻 Scary Reveal Page]
    G --> H[Display Device Info<br/>• Background Video<br/>• Glitch Effects<br/>• Flickering Warnings]
    H --> I[⏱️ Wait 5-9 seconds]
    I --> J[🎬 Random Jump Scare<br/>• Red Flash Overlay<br/>• Scary Face Popup<br/>• Loud Audio Scream]
    
    style A fill:#ff7b00,stroke:#ff003c,stroke-width:3px,color:#fff
    style G fill:#ff003c,stroke:#00fff7,stroke-width:3px,color:#fff
    style J fill:#000,stroke:#ff003c,stroke-width:4px,color:#fff
Loading

Technical Architecture

🏗️ View Architecture Diagram 
graph TB
    subgraph "🎨 Frontend Layer"
        A[HTML5<br/>Semantic Structure]
        B[CSS3<br/>Glassmorphism & Animations]
        C[JavaScript<br/>DOM & Fetch API]
    end
    
    subgraph "🖥️ Server Layer"
        D[Simple HTTP Server<br/>Python http.server]
        E[FastAPI Server<br/>Production Ready]
    end
    
    subgraph "🔌 External APIs (Optional)"
        F[🌍 ipgeolocation.io<br/>Location Data]
        G[📱 Telegram Bot API<br/>Notifications]
    end
    
    A --> D
    B --> D
    C --> D
    A --> E
    B --> E
    C --> E
    
    D -.Optional.-> F
    D -.Optional.-> G
    E -.Optional.-> F
    E -.Optional.-> G
    
    style A fill:#E34F26,stroke:#fff,stroke-width:2px,color:#fff
    style B fill:#1572B6,stroke:#fff,stroke-width:2px,color:#fff
    style C fill:#F7DF1E,stroke:#000,stroke-width:2px
    style D fill:#306998,stroke:#fff,stroke-width:2px,color:#fff
    style E fill:#009688,stroke:#fff,stroke-width:2px,color:#fff
    style F fill:#ff003c,stroke:#fff,stroke-width:2px,color:#fff
    style G fill:#229ED9,stroke:#fff,stroke-width:2px,color:#fff
Loading

🎯 Feature Breakdown

mindmap
  root((ScayCute))
    Landing Page
      Glassmorphic Design
      Cute Cat Background
      Pulse Animation
      Modern Button
    Scary Page
      Background Video
      Glitch Effects
      Device Info Display
      Flickering Warnings
      Jump Scare System
    Optional Features
      IP Geolocation
      Telegram Notifications
      Custom Colors
      Timing Control
    Responsive Design
      Mobile Support
      Tablet Layout
      Desktop View
Loading

🤝 Contributing

We welcome contributions! Here's how you can help:

Contributing Guidelines

  1. Fork the Repository

    # Click "Fork" button on GitHub

  2. Create Feature Branch

    git checkout -b feature/AmazingFeature

  3. Make Your Changes

    • Follow existing code style
    • Add comments for complex logic
    • Test on multiple browsers

  4. Commit Changes

    git commit -m "Add: Amazing new feature"

  5. Push and Create PR

    git push origin feature/AmazingFeature
# Then create Pull Request on GitHub

Code Style

  • Use consistent indentation (spaces, not tabs)
  • Add comments for complex sections
  • Keep functions modular and reusable
  • Test on Chrome, Firefox, and Safari

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

Permissions:

  • ✅ Commercial use
  • ✅ Modification
  • ✅ Distribution
  • ✅ Private use

Limitations:

  • ❌ Liability
  • ❌ Warranty

👤 Credits

Author

Scayar

🌐 Website: Scayar.com

📧 Email: Scayar.exe@gmail.com

💬 Telegram: @im_scayar

☕️ Support: Buy Me a Coffee

⭐ Star this Repository if you found it helpful!

Made with ❤️ by Scayar for fun and learning!

⬆ Back to Top

About

ScayCute is a modern prank web app that starts with a cute cat and ends with a scary surprise. It also displays animated device info in a stylish glitchy UI. Perfect for fun, learning, and creative UX experiments.

Scayar.com

Topics

javascript css html frontend web-app funny device-info responsive-design scary social-engineering glitch-effect fastapi prank-app glassmorphism jump-scare

Resources

Readme

License

MIT license
Activity

Stars

1 star

Watchers

0 watching

Forks

1 fork
Report repository

Releases

No releases published

Packages

No packages published

Languages