Greasy Fork is available in English.

Discord customizer

Discord style

// ==UserScript==
// @name         Discord customizer
// @namespace    http://tampermonkey.net/
// @version      1.0.0
// @description  Discord style
// @author       _PeDeCoca
// @match        *://*.discord.com/*
// @license      @Mit
// ==/UserScript==

(function() {
    'use strict';

    // Estilos atualizados
    const customStyle = document.createElement('style');
    customStyle.innerHTML = `
        /* Cores personalizadas */
        :root {
            --background-primary: #350048;
            --background-secondary: #1a0024;
            --background-tertiary: #0d0012;
            --text-normal: #ffffff;
        }

        /* Background simples */
        .app-2rEoOp {
            background: linear-gradient(45deg, #12c2e9, #c471ed, #f64f59);
            background-size: 400% 400%;
            animation: gradientBG 15s ease infinite;
        }

        @keyframes gradientBG {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        /* Efeito avatar novo e otimizado */
        .avatar_f9f2ca, .avatar-f9f2ca {
            position: relative !important;
            z-index: 2 !important;
            border-radius: 50% !important;
            overflow: visible !important;
            box-shadow:
                0 0 10px #00ffff,
                0 0 20px #00ffff,
                0 0 30px #00ffff,
                inset 0 0 15px rgba(0, 255, 255, 0.5) !important;
            animation: avatarGlow 3s infinite !important;
        }

        /* Wrapper do avatar */
        .clickable_f9f2ca {
            position: relative !important;
            z-index: 2 !important;
            transform-style: preserve-3d !important;
            transition: transform 0.3s !important;
        }

        /* Efeito de borda gradiente */
        .clickable_f9f2ca::before {
            content: '';
            position: absolute;
            top: -3px;
            left: -3px;
            right: -3px;
            bottom: -3px;
            background: linear-gradient(45deg, #ff00ff, #00ffff);
            border-radius: 50%;
            z-index: -1;
            animation: borderRotate 3s linear infinite;
            opacity: 0.8;
        }

        /* Efeito de brilho */
        .clickable_f9f2ca::after {
            content: '';
            position: absolute;
            inset: -5px;
            background: radial-gradient(circle at center,
                rgba(255,255,255,0.8) 0%,
                rgba(255,255,255,0) 70%);
            border-radius: 50%;
            z-index: -1;
            opacity: 0;
            transition: opacity 0.3s;
        }

        /* Efeitos hover */
        .clickable_f9f2ca:hover {
            transform: scale(1.1) rotate(5deg);
        }

        .clickable_f9f2ca:hover::before {
            animation: borderRotate 1s linear infinite;
        }

        .clickable_f9f2ca:hover::after {
            opacity: 0.5;
        }

        /* Animações */
        @keyframes borderRotate {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        @keyframes pulseGlow {
            0% { filter: drop-shadow(0 0 5px #ff00ff); }
            50% { filter: drop-shadow(0 0 15px #00ffff); }
            100% { filter: drop-shadow(0 0 5px #ff00ff); }
        }

        /* Ajustes do chat */
        .chat-3bRxxu {
            background: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(10px);
        }

        /* Container de partículas ajustado */
        #particles-js {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
            pointer-events: none;
            opacity: 0.5;
        }

        /* Efeitos épicos para o avatar */
        .avatar_f9f2ca, .avatar-f9f2ca {
            position: relative !important;
            z-index: 2 !important;
            border-radius: 50% !important;
            overflow: visible !important;
            box-shadow:
                0 0 10px #00ffff,
                0 0 20px #00ffff,
                0 0 30px #00ffff,
                inset 0 0 15px rgba(0, 255, 255, 0.5) !important;
            animation: avatarGlow 3s infinite !important;
        }

        /* Container do avatar com matrix effect */
        .clickable_f9f2ca {
            position: relative !important;
            z-index: 2 !important;
            transform-style: preserve-3d !important;
            transition: all 0.3s !important;
        }

        /* Efeito matrix no hover */
        .clickable_f9f2ca::before {
            content: '';
            position: absolute;
            inset: -5px;
            background:
                linear-gradient(90deg,
                    rgba(0, 255, 0, 0.5),
                    rgba(0, 255, 255, 0.5)
                ),
                repeating-linear-gradient(
                    0deg,
                    transparent,
                    transparent 2px,
                    rgba(0, 255, 0, 0.2) 2px,
                    rgba(0, 255, 0, 0.2) 4px
                );
            border-radius: 50%;
            z-index: -1;
            opacity: 0;
            transition: all 0.3s;
            animation: matrixFlow 20s linear infinite;
        }

        /* Anel de energia */
        .clickable_f9f2ca::after {
            content: '';
            position: absolute;
            inset: -8px;
            border: 2px solid transparent;
            border-radius: 50%;
            background: linear-gradient(45deg, #ff00ff, #00ffff, #00ff00, #ff00ff) border-box;
            -webkit-mask:
                linear-gradient(#fff 0 0) padding-box,
                linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            opacity: 0.8;
            animation: spinRing 3s linear infinite;
        }

        /* Efeitos hover aprimorados */
        .clickable_f9f2ca:hover {
            transform: scale(1.2) rotate(5deg);
        }

        .clickable_f9f2ca:hover::before {
            opacity: 1;
        }

        .clickable_f9f2ca:hover::after {
            inset: -12px;
            opacity: 1;
        }

        /* Nomes com efeito neon */
        .username-2b1r56,
        .username-3_PJ5r,
        .title-338goq {
            color: #00ffff !important;
            text-shadow:
                0 0 5px #00ffff,
                0 0 10px #00ffff,
                0 0 20px #00ffff !important;
            animation: textPulse 2s infinite;
        }

        /* Animações novas */
        @keyframes avatarGlow {
            0%, 100% { filter: brightness(1) hue-rotate(0deg); }
            50% { filter: brightness(1.5) hue-rotate(180deg); }
        }

        @keyframes matrixFlow {
            0% { background-position: 0 0; }
            100% { background-position: 0 1000px; }
        }

        @keyframes spinRing {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        @keyframes textPulse {
            0%, 100% { opacity: 1; text-shadow: 0 0 10px #00ffff; }
            50% { opacity: 0.8; text-shadow: 0 0 20px #00ffff; }
        }

        /* Efeito de energia ao clicar */
        .clickable_f9f2ca:active::after {
            animation: energyBurst 0.5s ease-out;
        }

        @keyframes energyBurst {
            0% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.5); opacity: 0.5; }
            100% { transform: scale(1); opacity: 0.8; }
        }
    `;

    // Adiciona canvas para Matrix
    function createMatrixBackground() {
        const canvas = document.createElement('canvas');
        canvas.id = 'matrix-bg';
        document.body.appendChild(canvas);

        const ctx = canvas.getContext('2d');
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        const matrix = "ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789@#$%^&*()*&^%";
        const fontSize = 10;
        const columns = canvas.width/fontSize;
        const drops = [];

        for(let x = 0; x < columns; x++)
            drops[x] = 1;

        function drawMatrix() {
            ctx.fillStyle = 'rgba(0, 0, 0, 0.04)';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            ctx.fillStyle = '#0F0';
            ctx.font = fontSize + 'px monospace';

            for(let i = 0; i < drops.length; i++) {
                const text = matrix[Math.floor(Math.random()*matrix.length)];
                ctx.fillText(text, i*fontSize, drops[i]*fontSize);
                if(drops[i]*fontSize > canvas.height && Math.random() > 0.975)
                    drops[i] = 0;
                drops[i]++;
            }
        }

        setInterval(drawMatrix, 33);
    }

    // Sistema de partículas
    function createParticleSystem() {
        const particlesContainer = document.createElement('div');
        particlesContainer.id = 'particles-js';
        document.body.appendChild(particlesContainer);

        const particles = [];
        const mouse = { x: null, y: null };

        class Particle {
            constructor(x, y) {
                this.x = x;
                this.y = y;
                this.size = Math.random() * 3 + 1; // Partículas menores
                this.baseX = x;
                this.baseY = y;
                this.density = Math.random() * 30 + 1;
                // Adiciona velocidade própria para movimento autônomo
                this.speedX = (Math.random() * 1 - 0.5) * 0.5; // Velocidade reduzida
                this.speedY = (Math.random() * 1 - 0.5) * 0.5; // Velocidade reduzida
                // Adiciona cor aleatória em tons de azul/roxo
                this.color = `rgba(${114 + Math.random() * 30}, ${137 + Math.random() * 30}, ${218 + Math.random() * 37}, ${0.6 + Math.random() * 0.4})`;
            }

            draw(ctx) {
                ctx.fillStyle = this.color;
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
                ctx.closePath();
                ctx.fill();
            }

            update() {
                // Movimento autônomo
                this.x += this.speedX;
                this.y += this.speedY;

                // Verificar limites da tela
                if (this.x < 0 || this.x > window.innerWidth) this.speedX *= -1;
                if (this.y < 0 || this.y > window.innerHeight) this.speedY *= -1;

                // Interação com o mouse
                let dx = mouse.x - this.x;
                let dy = mouse.y - this.y;
                let distance = Math.sqrt(dx * dx + dy * dy);

                if (distance < 100) {
                    let forceDirectionX = dx / distance;
                    let forceDirectionY = dy / distance;
                    let force = (100 - distance) / 100;
                    let directionX = forceDirectionX * force * this.density;
                    let directionY = forceDirectionY * force * this.density;
                    this.x -= directionX * 0.5; // Reduzido o efeito do mouse
                    this.y -= directionY * 0.5;
                }

                // Efeito de ondulação suave
                this.x += Math.sin(this.y/50) * 0.3;
                this.y += Math.cos(this.x/50) * 0.3;
            }
        }

        const canvas = document.createElement('canvas');
        canvas.style = 'position: fixed; top: 0; left: 0; pointer-events: none;';
        document.body.appendChild(canvas);
        const ctx = canvas.getContext('2d');

        function initParticles() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            particles.length = 0;

            // Reduzido o número de partículas
            for (let i = 0; i < 50; i++) { // Mudado de 150 para 50 partículas
                const x = Math.random() * canvas.width;
                const y = Math.random() * canvas.height;
                particles.push(new Particle(x, y));
            }
        }

        function animate() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            for (const particle of particles) {
                particle.update();
                particle.draw(ctx);
            }

            // Desenha linhas entre partículas próximas com gradiente
            for (let i = 0; i < particles.length; i++) {
                for (let j = i; j < particles.length; j++) {
                    const dx = particles[i].x - particles[j].x;
                    const dy = particles[i].y - particles[j].y;
                    const distance = Math.sqrt(dx * dx + dy * dy);

                    if (distance < 100) {
                        const gradient = ctx.createLinearGradient(
                            particles[i].x, particles[i].y,
                            particles[j].x, particles[j].y
                        );
                        gradient.addColorStop(0, particles[i].color);
                        gradient.addColorStop(1, particles[j].color);

                        ctx.beginPath();
                        ctx.strokeStyle = gradient;
                        ctx.lineWidth = 0.5;
                        ctx.moveTo(particles[i].x, particles[i].y);
                        ctx.lineTo(particles[j].x, particles[j].y);
                        ctx.stroke();
                    }
                }
            }

            requestAnimationFrame(animate);
        }

        window.addEventListener('mousemove', (e) => {
            mouse.x = e.x;
            mouse.y = e.y;
        });

        window.addEventListener('resize', initParticles);
        initParticles();
        animate();
    }

    // Função para garantir que os efeitos do avatar sejam aplicados
    function ensureAvatarEffects() {
        const avatarSelectors = [
            '.avatar_f9f2ca',
            '.clickable_f9f2ca',
            '.avatar-f9f2ca'
        ];

        const avatars = document.querySelectorAll(avatarSelectors.join(','));
        avatars.forEach(avatar => {
            if (!avatar.dataset.enhanced) {
                avatar.dataset.enhanced = 'true';

                // Força o reflow do CSS
                requestAnimationFrame(() => {
                    avatar.style.position = 'relative';
                    avatar.style.zIndex = '2';
                    avatar.style.display = 'none';
                    avatar.offsetHeight;
                    avatar.style.display = '';
                });
            }
        });
    }

    // Adiciona observer específico para avatares
    function setupAvatarObserver() {
        const avatarObserver = new MutationObserver((mutations) => {
            mutations.forEach(mutation => {
                if (mutation.addedNodes.length) {
                    ensureAvatarEffects();
                }
            });
        });

        avatarObserver.observe(document.body, {
            childList: true,
            subtree: true
        });
    }

    // Função de inicialização atualizada
    function applyCustomizations() {
        document.head.appendChild(customStyle);
        createParticleSystem();
        ensureAvatarEffects();
        setupAvatarObserver();

        // Aplicação mais frequente dos efeitos
        setInterval(ensureAvatarEffects, 1000);

        console.log('Discord customizado com efeitos visuais aplicados!');
    }

    // Inicia quando o DOM estiver pronto
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', applyCustomizations);
    } else {
        applyCustomizations();
    }
})();