Formulário Cyberpunk HTML: Efeito Glitch, Rastreamento Ocular

365 Gemini123

Abrir no Editor Video Publique Seu Código

Formulário Cyberpunk HTML: Efeito Glitch, Rastreamento Ocular

Recomendado

6 January 2026

Formulário HTML para criação de conta com campo de pesquisa

18 October 2025

Botão HTML com efeito hover (WEBLEB)

9 December 2025

Formulário de login HTML com estilo CSS neon

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>THE SURRENDER</title>
    <style>
        :root {
            --neon-red: #ff003c;
            --void-black: #050505;
            --glitch-green: #00ff41;
        }

body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            background-color: var(--void-black);
            color: var(--neon-red);
            font-family: 'Courier New', Courier, monospace;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: crosshair;
        }

#glitch-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: repeating-linear-gradient(
                0deg,
                rgba(0, 0, 0, 0.15),
                rgba(0, 0, 0, 0.15) 1px,
                transparent 1px,
                transparent 2px
            );
            pointer-events: none;
            z-index: 10;
        }

.container {
            position: relative;
            width: 400px;
            padding: 40px;
            border: 1px solid var(--neon-red);
            background: rgba(10, 0, 0, 0.9);
            box-shadow: 0 0 20px rgba(255, 0, 60, 0.2);
            text-align: center;
            animation: shake 5s infinite;
        }

h1 {
            font-size: 1.5rem;
            letter-spacing: 5px;
            text-transform: uppercase;
            margin-bottom: 30px;
            animation: glitch-text 2s infinite;
        }

.input-group {
            margin-bottom: 20px;
            position: relative;
        }

input {
            width: 100%;
            background: transparent;
            border: none;
            border-bottom: 1px solid var(--neon-red);
            color: var(--glitch-green);
            padding: 10px 0;
            outline: none;
            font-size: 1rem;
            transition: all 0.3s;
        }

input:focus {
            border-bottom: 1px solid var(--glitch-green);
            letter-spacing: 2px;
        }

label {
            display: block;
            font-size: 0.7rem;
            text-align: left;
            margin-bottom: 5px;
            opacity: 0.7;
        }

.checkbox-group {
            text-align: left;
            font-size: 0.6rem;
            margin: 20px 0;
            line-height: 1.4;
        }

.checkbox-group input {
            width: auto;
            margin-right: 10px;
        }

button {
            background: var(--neon-red);
            color: white;
            border: none;
            padding: 15px 30px;
            font-weight: bold;
            text-transform: uppercase;
            cursor: pointer;
            width: 100%;
            transition: 0.2s;
            clip-path: polygon(10% 0, 100% 0, 90% 100%, 0% 100%);
        }

button:hover {
            background: var(--glitch-green);
            color: black;
            transform: scale(1.05);
            box-shadow: 0 0 15px var(--glitch-green);
        }

.eye-socket {
            position: absolute;
            top: -50px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 40px;
            background: #111;
            border-radius: 50%;
            border: 2px solid var(--neon-red);
            overflow: hidden;
        }

.pupil {
            position: absolute;
            width: 20px;
            height: 20px;
            background: var(--neon-red);
            border-radius: 50%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

@keyframes shake {
            0% { transform: translate(0,0); }
            1% { transform: translate(-2px, 1px); }
            2% { transform: translate(2px, -1px); }
            3% { transform: translate(-2px, -1px); }
            100% { transform: translate(0,0); }
        }

@keyframes glitch-text {
            0% { text-shadow: 2px 0 var(--glitch-green), -2px 0 blue; }
            5% { text-shadow: -2px 0 var(--glitch-green), 2px 0 blue; }
            10% { text-shadow: 0 0 transparent; }
        }

.warning-scroll {
            position: fixed;
            bottom: 0;
            width: 100%;
            background: var(--neon-red);
            color: black;
            white-space: nowrap;
            overflow: hidden;
            font-weight: bold;
            padding: 5px 0;
        }

.scroll-text {
            display: inline-block;
            animation: scroll 20s linear infinite;
        }

@keyframes scroll {
            from { transform: translateX(100%); }
            to { transform: translateX(-100%); }
        }
    </style>
</head>
<body>

<div class="container">
        <div class="eye-socket">
            <div class="pupil" id="pupil"></div>
        </div>
        <h1>Digital Soul Bind</h1>
        <form onsubmit="event.preventDefault(); alert('YOUR DATA IS NOW OUR ETERNITY.');">
            <div class="input-group">
                <label>BIOMETRIC IDENTIFIER (NAME)</label>
                <input type="text" required placeholder="WHO ARE YOU?">
            </div>
            <div class="input-group">
                <label>VULNERABILITY ACCESS (EMAIL)</label>
                <input type="email" required placeholder="WHERE DO YOU HIDE?">
            </div>
            <div class="input-group">
                <label>DEEPEST REGRET (PASSWORD)</label>
                <input type="password" required placeholder="********">
            </div>

<div class="checkbox-group">
                <label>
                    <input type="checkbox" required> I grant this application full permission to monitor my thoughts, sell my sleep patterns to advertisers, and utilize my metadata for the cloning of my consciousness in the year 2045.
                </label>
                <br>
                <label>
                    <input type="checkbox" required> I acknowledge that "Privacy" is a 20th-century myth and I willingly dissolve my individuality.
                </label>
            </div>

<button type="submit">ASCEND TO THE CLOUD</button>
        </form>
    </div>

<div class="warning-scroll">
        <div class="scroll-text">
            WARNING: BY REMAINING ON THIS PAGE YOU HAVE ALREADY CONSENTED TO THE HARVESTING OF YOUR RETINAL SCAN DATA — YOUR KEYSTROKES ARE BEING TRANSFORMED INTO NON-FUNGIBLE TOKENS — THERE IS NO LOG OUT — WE ARE WATCHING —
        </div>
    </div>

// Randomly change input labels to be more aggressive
        const inputs = document.querySelectorAll('input[type="text"], input[type="email"]');
        const phrases = ["GIVE US THE TRUTH", "WE ALREADY KNOW", "RESISTANCE IS FUTILE", "TYPE FASTER"];
        
        setInterval(() => {
            const randomInput = inputs[Math.floor(Math.random() * inputs.length)];
            const originalPlaceholder = randomInput.placeholder;
            randomInput.placeholder = phrases[Math.floor(Math.random() * phrases.length)];
            setTimeout(() => {
                randomInput.placeholder = originalPlaceholder;
            }, 500);
        }, 3000);
    </script>
</body>
</html>

Recomendado

Formulário HTML para criação de conta com campo de pesquisa

Botão HTML com efeito hover (WEBLEB)

Formulário de login HTML com estilo CSS neon

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS