Pulsating neon

Open In Editor Publish Your Code

.text {
            font-family: 'Arial', sans-serif;
            font-size: 1.5rem; 
            font-weight: bold;
            color: #fff;
            text-transform: uppercase;
            text-shadow: 
                0 0 10px #ff00ff,
                0 0 20px #ff00ff,
                0 0 40px #00ffff,
                0 0 80px #00ffff;
            animation: pulse 2s infinite ease-in-out, rotate3D 6s infinite linear;
            perspective: 1000px;
            position: relative;
            z-index: 1;
            transform-style: preserve-3d;
            letter-spacing: 1px;
        }

@keyframes pulse {
            0%, 100% {
                font-size: 1.5rem;
            }
            50% {
                font-size: 1.9rem; 
        }
    }

@keyframes rotate3D {
            0% {
                transform: rotateX(0deg) rotateY(0deg);
            }
            50% {
                transform: rotateX(180deg) rotateY(180deg);
            }
            100% {
                transform: rotateX(360deg) rotateY(360deg);
            }
        }

canvas {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 0;
        }

JS

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

let lines = [];
        const lineCount = 9;

class NeonLine {
            constructor() {
                const textRect = document.querySelector('.text').getBoundingClientRect();
                this.textCenterX = textRect.left + textRect.width / 2;
                this.textCenterY = textRect.top + textRect.height / 2;
                
                // Posição inicial da linha (próxima ao texto)
                const angle = Math.random() * Math.PI * 2;
                const radius = textRect.width / 2 + Math.random() * 10;
                
                this.x1 = this.textCenterX + Math.cos(angle) * radius;
                this.y1 = this.textCenterY + Math.sin(angle) * radius;
                
                // Ponto final da linha (para criar uma linha em vez de um ponto)
                const lineLength = 15 + Math.random() * 9; // Linhas um pouco mais longas para destacar mais
                this.x2 = this.x1 + Math.cos(angle) * lineLength;
                this.y2 = this.y1 + Math.sin(angle) * lineLength;
                
                // Velocidade de movimento para trás (eixo Z)
                this.zSpeed = (1 + Math.random() * 2) * -1; // Negativo para ir para "trás"
                
                // Para simular o movimento no eixo Z
                this.scale = 1;
                this.opacity = 0.9 + Math.random() * 0.1; // Mais brilhante para destacar melhor
                
                this.thickness = 1.5 + Math.random() * 1.5; // Linhas um pouco mais espessas
                this.color = Math.random() > 0.5 ? '#ff00ff' : '#00ffff';
                
                // Velocidade rotacional ao redor do texto
                this.rotationSpeed = (0.01 + Math.random() * 0.02) * (Math.random() > 0.5 ? 1 : -1);
                this.rotationAngle = angle;

// Adicionar efeito de profundidade extra com blur
                this.blur = 0;
            }

update() {
                // Simula movimento no eixo Z (para "trás")
                this.scale += this.zSpeed * 0.015;
                this.opacity -= 0.01;
                
                // Rotação em torno do texto
                this.rotationAngle += this.rotationSpeed;
                
                const textRect = document.querySelector('.text').getBoundingClientRect();
                this.textCenterX = textRect.left + textRect.width / 2;
                this.textCenterY = textRect.top + textRect.height / 2;
                
                const radius = (textRect.width / 2 + Math.random() * 10) * this.scale;
                
                // Atualiza a posição dos pontos da linha
                this.x1 = this.textCenterX + Math.cos(this.rotationAngle) * radius;
                this.y1 = this.textCenterY + Math.sin(this.rotationAngle) * radius;
                
                const lineLength = (15 + Math.random() * 30) * this.scale;
                this.x2 = this.x1 + Math.cos(this.rotationAngle) * lineLength;
                this.y2 = this.y1 + Math.sin(this.rotationAngle) * lineLength;

// Aumentar o blur conforme a linha se move para "dentro"
                this.blur = (1 - this.scale) * 5;
            }

draw() {
                if (this.scale > 0 && this.opacity > 0) {
                    ctx.beginPath();
                    ctx.shadowBlur = this.blur;
                    ctx.shadowColor = this.color;
                    ctx.moveTo(this.x1, this.y1);
                    ctx.lineTo(this.x2, this.y2);
                    ctx.strokeStyle = this.color;
                    ctx.globalAlpha = this.opacity;
                    ctx.lineWidth = this.thickness * this.scale;
                    ctx.stroke();
                    ctx.shadowBlur = 0;
                    ctx.globalAlpha = 1;
                }
            }

reset() {
                return this.scale <= 0 || this.opacity <= 0;
            }
        }

function init() {
            lines = [];
            for (let i = 0; i < lineCount; i++) {
                lines.push(new NeonLine());
            }
        }

init();
        animate();

window.addEventListener('resize', () => {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            init();
        });

Pulsating neon

Recommended

HTML Neon Button Example

Neon Glass Context Menu with Color Picker

Neon Lasso

HTML

CSS

JS

Recommended

HTML Neon Button Example

Neon Glass Context Menu with Color Picker

Neon Lasso

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS