HTML5 CSS3 JavaScript WEB

Formulario de Autenticación con Efecto Morphing 3D

Formulario moderno de inicio de sesión y registro con una transición avanzada de tipo Morphing. La tarjeta se transforma dinámicamente en un círculo animado antes de cambiar entre las vistas de autenticación, combinando efectos de Glassmorphism, rotación 3D, reflejos luminosos y seguimiento del cursor. Utiliza una paleta elegante en tonos dorado, rojo y café para crear una experiencia visual premium inspirada en interfaces modernas de alta gama. Desarrollado con HTML, CSS y JavaScript puro.

Previsualización en Vivo

Código Fuente

Copia este código y úsalo en tus proyectos.

HTML

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Morphing Authentication</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<div class="background-glow"></div>

<div class="scene">

    <div class="card" id="card">

        <div class="shine"></div>

        <div class="loader" id="loader">
            ★
        </div>

        <div class="face login" id="loginFace">

            <div class="logo">★</div>

            <h2>Bienvenido de Nuevo</h2>

            <input type="email" placeholder="Correo Electrónico">
            <input type="password" placeholder="Contraseña">

            <button>
                Iniciar Sesión
            </button>

            <p>
                ¿No tienes una cuenta?
                <a href="#" id="registerBtn">
                    Regístrate
                </a>
            </p>

        </div>

        <div class="face register" id="registerFace">

            <div class="logo">★</div>

            <h2>Crear Cuenta</h2>

            <input type="text" placeholder="Nombre Completo">
            <input type="email" placeholder="Correo Electrónico">
            <input type="password" placeholder="Contraseña">
            <input type="password" placeholder="Confirmar Contraseña">

            <button>
                Crear Cuenta
            </button>

            <p>
                ¿Ya tienes una cuenta?
                <a href="#" id="loginBtn">
                    Iniciar Sesión
                </a>
            </p>

        </div>

    </div>

</div>

<script src="app.js"></script>

</body>
</html>

CSS

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Inter,sans-serif;
}

:root{
    --gold:#D4AF37;
    --gold-light:#F4D160;
    --red:#8B1E1E;
    --brown:#2C1810;
}

body{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;

    background:
    radial-gradient(circle at top left,var(--red),transparent 35%),
    radial-gradient(circle at bottom right,var(--gold),transparent 35%),
    linear-gradient(135deg,var(--brown),#140c09);
}

.background-glow{
    position:absolute;
    width:700px;
    height:700px;
    border-radius:50%;
    background:rgba(212,175,55,.08);
    filter:blur(100px);
    animation:floatGlow 10s ease-in-out infinite;
}

.scene{
    perspective:2500px;
}

.card{
    position:relative;

    width:420px;
    height:560px;

    border-radius:28px;

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(25px);
    -webkit-backdrop-filter:blur(25px);

    border:1px solid rgba(255,255,255,.12);

    overflow:hidden;

    transform-style:preserve-3d;

    box-shadow:
    0 25px 100px rgba(0,0,0,.5),
    inset 0 1px 1px rgba(255,255,255,.2);

    transition:
    width .7s ease,
    height .7s ease,
    border-radius .7s ease;
}

.card::before{
    content:"";
    position:absolute;
    inset:-2px;

    border-radius:inherit;

    background:
    linear-gradient(
        135deg,
        var(--gold),
        transparent,
        var(--red)
    );

    filter:blur(12px);

    opacity:.6;

    z-index:-1;
}

.card.morph{
    width:120px;
    height:120px;
    border-radius:50%;
}

.face{
    position:absolute;

    inset:0;

    padding:40px;

    display:flex;
    flex-direction:column;
    justify-content:center;

    transition:.4s;
}

.face.hide{
    opacity:0;
    pointer-events:none;
}

.register{
    display:none;
}

.logo{
    width:90px;
    height:90px;

    margin:0 auto 25px;

    border-radius:50%;

    display:flex;
    justify-content:center;
    align-items:center;

    font-size:2rem;
    color:white;

    background:
    linear-gradient(
        135deg,
        var(--gold),
        var(--red)
    );

    box-shadow:
    0 0 40px rgba(212,175,55,.5);
}

h2{
    color:white;
    text-align:center;
    margin-bottom:25px;
}

input{
    width:100%;
    padding:15px;
    margin-bottom:15px;

    border:none;
    outline:none;

    border-radius:12px;

    background:rgba(255,255,255,.08);

    color:white;
}

input::placeholder{
    color:rgba(255,255,255,.7);
}

button{
    border:none;
    cursor:pointer;

    padding:15px;

    border-radius:12px;

    font-weight:700;

    color:white;

    background:
    linear-gradient(
        135deg,
        var(--gold),
        var(--red)
    );

    transition:.3s;
}

button:hover{
    transform:translateY(-3px);
}

p{
    margin-top:20px;
    color:white;
    text-align:center;
}

a{
    color:var(--gold-light);
    text-decoration:none;
}

.shine{
    position:absolute;
    inset:0;
    overflow:hidden;
    pointer-events:none;
}

.shine::before{
    content:"";

    position:absolute;

    width:200%;
    height:100%;

    background:
    linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.25),
        transparent
    );

    animation:shine 5s linear infinite;
}

.loader{
    position:absolute;

    inset:0;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:3rem;
    color:white;

    opacity:0;

    pointer-events:none;

    z-index:50;
}

.card.morph .loader{
    opacity:1;
    animation:spin 1s linear infinite;
}

.card.morph .face{
    opacity:0;
    pointer-events:none;
}

@keyframes shine{

    from{
        transform:translateX(-100%);
    }

    to{
        transform:translateX(100%);
    }

}

@keyframes spin{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}

@keyframes floatGlow{

    0%,100%{
        transform:translate(0,0);
    }

    50%{
        transform:translate(100px,-50px);
    }

}

@media(max-width:480px){

    .card{
        width:90%;
        height:560px;
    }

}

JavaScript

const card = document.getElementById("card");

const loginFace = document.getElementById("loginFace");
const registerFace = document.getElementById("registerFace");

let currentView = "login";

function switchView(target){

    if(target === currentView) return;

    card.classList.add("morph");

    setTimeout(() => {

        if(target === "register"){

            loginFace.style.display = "none";
            registerFace.style.display = "flex";

        }else{

            registerFace.style.display = "none";
            loginFace.style.display = "flex";

        }

    },700);

    setTimeout(() => {

        card.classList.remove("morph");
        currentView = target;

    },1400);

}

document.addEventListener("click",(e)=>{

    if(e.target.id === "registerBtn"){

        e.preventDefault();
        switchView("register");

    }

    if(e.target.id === "loginBtn"){

        e.preventDefault();
        switchView("login");

    }

});

document.addEventListener("mousemove",(e)=>{

    if(card.classList.contains("morph")) return;

    const x =
    (window.innerWidth/2 - e.clientX)/40;

    const y =
    (window.innerHeight/2 - e.clientY)/40;

    card.style.transform =
    `rotateY(${-x}deg) rotateX(${y}deg)`;

});