Thanks to visit codestin.com
Credit goes to github.com

Skip to content

RageClick.app - A satirical productivity tool that progressively corrupts as you click. Built with SvelteKit, TypeScript, and dark humor.

Notifications You must be signed in to change notification settings

jelenastricak/rageclick

Repository files navigation

RageClick.app

A satirical productivity experience where every click is synergy.

RageClick.app is a darkly comedic web application that satirizes modern workplace productivity obsession through progressive visual corruption and absurdist corporate jargon.

🎯 Features

Core Mechanics

  • Click-to-Corruption System: Five progressive tiers (0→50→150→300→500+) that incrementally degrade the visual experience
  • Productivity Gauge: Exponential growth with diminishing returns (just like real productivity!)
  • Mandatory Mindfulness Breaks: Forced cooldown periods (8-20s) triggered when entering new tiers
  • Performance Review Panel: Real-time metrics tracking your "engagement"
  • Visual Corruption Effects: Canvas-based effects including:
    • Pixel Jitter (random noise blocks)
    • Scan Lines (animated CRT effect)
    • Color Shift (RGB channel separation)
    • Rainbow Corruption (animated gradient overlay)
    • BSOD Flash (blue screen of death simulation)
    • Screen Shake (kinetic feedback)

Technical Highlights

  • SvelteKit 2 with TypeScript (strict mode)
  • Tailwind CSS with custom corporate/warning/chaos color palette
  • Motion One for smooth, performant animations
  • Native Canvas 2D API for visual effects
  • LocalStorage persistence for totalClicks, maxProductivityStreak, timesSynergyOverflowed
  • SSR-safe state management with browser guards
  • Accessible with ARIA labels, keyboard navigation, and respect for prefers-reduced-motion
  • Responsive mobile-first design

🎨 Color Palette

Corporate (Tier 1-2)

  • Blue: #1e3a8a
  • Background: #f8fafc
  • Muted: #64748b

Warning (Tier 3-4)

  • Amber: #f59e0b
  • Danger: #dc2626

Chaos (Tier 4-5)

  • Pink: #ec4899
  • Violet: #8b5cf6
  • Emerald: #10b981

🚀 Quick Start

Prerequisites

  • Node.js 18+ (tested on v22)
  • pnpm 9+ (tested on 10.18.2)

Installation

# Install dependencies
pnpm install

# Run development server
pnpm dev

# Build for production
pnpm build

# Preview production build
pnpm preview

The application will be available at http://localhost:5173

📊 Corruption Tiers

Tier Clicks Break Duration Effects Active
1 0-50 None Clean corporate aesthetic
2 51-150 8s Pixel Jitter (0.2), Scan Lines (0.1)
3 151-300 12s Pixel Jitter (0.3), Scan Lines (0.4), Color Shift (0.2)
4 301-500 16s Pixel Jitter (0.5), Scan Lines (0.6), Color Shift (0.5), Rainbow (0.3)
5 501+ 20s Full chaos: All effects max intensity + BSOD flashes

💾 Data Persistence

The app stores three key metrics in localStorage:

  • rageclick.totalClicks - Total lifetime engagements
  • rageclick.maxProductivityStreak - Highest consecutive clicks before a break
  • rageclick.timesSynergyOverflowed - Count of productivity score ≥97% achievements

To reset progress: Click the "🔄 Reset" button in the header or clear your browser's localStorage for this domain.

🎭 Monetization Stubs

Three pricing tiers are displayed in the upgrade modal:

  • Premium: $9.99/mo
  • Annual: $99/year (marked as "Best Value")
  • Lifetime: $999/forever

All pricing is satirical. No payment integration exists.

🧪 Testing the Experience

  1. Tier 1 → 2 transition: Click 51 times, observe:

    • First mandatory break (8s)
    • Subtle scan lines and pixel jitter appear
  2. Productivity overflow: Get productivity score to 95%+:

    • Gauge pulses with glow effect
    • At 97%, triggers synergy overflow counter
    • Occasional BSOD flash and screen shake
  3. Tier 5 chaos: Reach 501+ clicks:

    • Full visual corruption active
    • Random BSOD flashes
    • Intense screen shake effects
    • Rainbow gradient overlays

🛠️ Project Structure

rageclick/
├── src/
│   ├── lib/
│   │   ├── components/
│   │   │   ├── ClickButton.svelte
│   │   │   ├── CorruptionCanvas.svelte
│   │   │   ├── FeedbackText.svelte
│   │   │   ├── MetricsPanel.svelte
│   │   │   ├── MindfulnessBreak.svelte
│   │   │   └── ProductivityGauge.svelte
│   │   ├── stores/
│   │   │   └── clickStore.ts
│   │   ├── types/
│   │   │   └── index.ts
│   │   └── utils/
│   │       ├── canvasEffects.ts
│   │       ├── corruptionTiers.ts
│   │       └── sarcasticPhrases.ts
│   ├── routes/
│   │   ├── +layout.svelte
│   │   └── +page.svelte
│   ├── app.css
│   └── app.html
├── static/
├── package.json
├── tailwind.config.js
├── svelte.config.js
├── vite.config.js
└── README.md

🌐 Browser Support

  • ✅ Chrome/Edge (latest)
  • ✅ Firefox (latest)
  • ✅ Safari (latest)
  • ⚠️ Reduced effects on prefers-reduced-motion settings
  • ⚠️ Requires JavaScript and localStorage enabled

📝 Known Limitations

  • No backend; all state is client-side
  • localStorage can be cleared by user, resetting progress
  • Canvas effects are CPU-intensive at Tier 5
  • No offline support (requires initial load)

🤝 Contributing

This is a satirical demonstration project built by Rufus (Senior Enterprise Developer, CyberLink Security).

For questions or feedback, please open an issue on the repository.

📜 License

MIT License - See LICENSE file for details


Disclaimer: This application is a work of satire. Any resemblance to real productivity tools, corporate jargon, or workplace dynamics is entirely intentional and meant for comedic purposes. No actual productivity will be gained from using this application.

Built with 💙 and questionable priorities by CyberLink Security.

About

RageClick.app - A satirical productivity tool that progressively corrupts as you click. Built with SvelteKit, TypeScript, and dark humor.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published