OTP VERIFICATION

Customize at your own, you can use it for many things
"use client";

import React, { useState, useEffect, useRef } from "react";

export interface VaultUnlockCardProps {
  onSuccess?: () => void;
}

export default function VaultUnlockCard({ onSuccess }: VaultUnlockCardProps) {
  const [pin, setPin] = useState("");
  const [isUnlocked, setIsUnlocked] = useState(false);
  const [isShutterClosed, setIsShutterClosed] = useState(false);
  const [isEmpActive, setIsEmpActive] = useState(false);
  const [progressWidth, setProgressWidth] = useState(0);
  const [isResetOpen, setIsResetOpen] = useState(false);
  const [glarePos, setGlarePos] = useState({ x: 50, y: 50 });

  const cardRef = useRef<HTMLDivElement>(null);
  const inputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    inputRef.current?.focus();
  }, []);

  useEffect(() => {
    const handleGlobalMouseMove = (e: MouseEvent) => {
      const card = cardRef.current;
      if (!card) return;

      const rect = card.getBoundingClientRect();
      const cardCenterX = rect.left + rect.width / 2;
      const cardCenterY = rect.top + rect.height / 2;

      const deltaX = (e.clientX - cardCenterX) / (window.innerWidth / 2);
      const deltaY = (e.clientY - cardCenterY) / (window.innerHeight / 2);

      const maxTilt = 9;
      const rx = Math.max(-maxTilt, Math.min(maxTilt, -deltaY * maxTilt));
      const ry = Math.max(-maxTilt, Math.min(maxTilt, deltaX * maxTilt));

      const gx = ((e.clientX - rect.left) / rect.width) * 100;
      const gy = ((e.clientY - rect.top) / rect.height) * 100;
      setGlarePos({ x: gx, y: gy });

      card.style.transform = `perspective(1000px) rotateX(${rx.toFixed(2)}deg) rotateY(${ry.toFixed(2)}deg)`;
    };

    window.addEventListener("mousemove", handleGlobalMouseMove);
    return () => {
      window.removeEventListener("mousemove", handleGlobalMouseMove);
    };
  }, []);

  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (isUnlocked || isShutterClosed) return;

    if (e.key === "Backspace") {
      setPin((prev) => prev.slice(0, -1));
      return;
    }

    if (/^[0-9]$/.test(e.key)) {
      if (pin.length < 4) {
        const nextPin = pin + e.key;
        setPin(nextPin);

        if (nextPin.length === 4) {
          triggerUnlockSequence();
        }
      }
    }
  };

  const triggerUnlockSequence = () => {
    setTimeout(() => {
      setIsShutterClosed(true);

      setTimeout(() => {
        setIsEmpActive(true);

        setTimeout(() => {
          setIsUnlocked(true);
          setIsShutterClosed(false);
          setIsEmpActive(false);

          setTimeout(() => {
            setProgressWidth(100);
          }, 80);

          onSuccess?.();
        }, 480);
      }, 320);
    }, 300);
  };

  const resetVault = () => {
    setPin("");
    setIsUnlocked(false);
    setIsShutterClosed(false);
    setIsEmpActive(false);
    setProgressWidth(0);
    setTimeout(() => inputRef.current?.focus(), 80);
  };

  return (
    <div
      style={{
        minHeight: "100vh",
        width: "100%",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        padding: "24px",
        backgroundColor: "#03060a",
        backgroundImage:
          "radial-gradient(circle at 50% 25%, rgba(16, 227, 150, 0.16) 0%, rgba(0, 240, 255, 0.05) 30%, transparent 70%), radial-gradient(ellipse 80% 50% at 50% 90%, rgba(10, 16, 28, 0.85) 0%, transparent 80%)",
        userSelect: "none",
        fontFamily:
          "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
      }}
      onClick={() => inputRef.current?.focus()}
    >
      <input
        ref={inputRef}
        type="password"
        inputMode="numeric"
        maxLength={4}
        value={pin}
        onChange={(e) => {
          const val = e.target.value.replace(/\D/g, "").slice(0, 4);
          setPin(val);
          if (val.length === 4) triggerUnlockSequence();
        }}
        onKeyDown={handleKeyDown}
        style={{
          position: "absolute",
          opacity: 0,
          pointerEvents: "none",
          top: "-100px",
        }}
        autoFocus
      />

      <div
        ref={cardRef}
        style={{
          maxWidth: "530px",
          width: "100%",
          borderRadius: "36px",
          padding: "24px 44px 34px 44px",
          backgroundColor: "rgba(10, 15, 24, 0.65)",
          backdropFilter: "blur(24px)",
          WebkitBackdropFilter: "blur(24px)",
          border: "1px solid rgba(255, 255, 255, 0.12)",
          borderTop: "1.5px solid rgba(16, 227, 150, 0.55)",
          boxShadow: isEmpActive
            ? "0 0 50px rgba(16, 227, 150, 0.8), 0 25px 70px -15px rgba(0, 0, 0, 0.8)"
            : "0 25px 70px -15px rgba(0, 0, 0, 0.8), 0 0 45px -10px rgba(16, 227, 150, 0.3), inset 0 1px 1px 0 rgba(255, 255, 255, 0.22)",
          position: "relative",
          overflow: "hidden",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          textAlign: "center",
          transformStyle: "preserve-3d",
          transition: "transform 0.15s ease-out, box-shadow 0.3s ease",
        }}
      >
        <div
          style={{
            position: "absolute",
            inset: 0,
            borderRadius: "inherit",
            background: `radial-gradient(480px circle at ${glarePos.x}% ${glarePos.y}%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.02) 40%, transparent 75%)`,
            pointerEvents: "none",
            mixBlendMode: "screen",
            zIndex: 6,
          }}
        />

        {isShutterClosed && (
          <>
            <div
              style={{
                position: "absolute",
                top: 0,
                left: 0,
                right: 0,
                height: "50%",
                background:
                  "radial-gradient(circle at 50% 100%, #121824 0%, #06080d 100%)",
                borderBottom: "2px solid #10e396",
                boxShadow: "0 10px 35px rgba(16, 227, 150, 0.6)",
                zIndex: 40,
                display: "flex",
                alignItems: "flex-end",
                justifyContent: "center",
                paddingBottom: "8px",
              }}
            >
              <div
                style={{
                  fontFamily: "monospace",
                  fontSize: "10px",
                  letterSpacing: "0.15em",
                  color: "#10e396",
                  fontWeight: "bold",
                  display: "flex",
                  alignItems: "center",
                  gap: "8px",
                }}
              >
                <span
                  style={{
                    width: "6px",
                    height: "6px",
                    borderRadius: "50%",
                    backgroundColor: "#10e396",
                  }}
                />
                SHUTTER ENGAGED // KINETIC SECURE
              </div>
            </div>
            <div
              style={{
                position: "absolute",
                bottom: 0,
                left: 0,
                right: 0,
                height: "50%",
                background:
                  "radial-gradient(circle at 50% 0%, #121824 0%, #06080d 100%)",
                borderTop: "2px solid #10e396",
                boxShadow: "0 -10px 35px rgba(16, 227, 150, 0.6)",
                zIndex: 40,
                display: "flex",
                alignItems: "flex-start",
                justifyContent: "center",
                paddingTop: "8px",
              }}
            >
              <div
                style={{
                  fontFamily: "monospace",
                  fontSize: "9px",
                  letterSpacing: "0.15em",
                  color: "rgba(16, 227, 150, 0.8)",
                }}
              >
                QUANTUM CRYPTOGRAPHIC PROTOCOL
              </div>
            </div>
          </>
        )}

        <div
          style={{
            width: "48px",
            height: "4px",
            borderRadius: "9999px",
            backgroundColor: "#00f0ff",
            boxShadow: "0 0 14px rgba(0, 240, 255, 0.85)",
            marginBottom: "28px",
            marginTop: "2px",
            position: "relative",
            zIndex: 10,
          }}
        />

        {!isUnlocked ? (
          <div
            style={{
              width: "100%",
              display: "flex",
              flexDirection: "column",
              alignItems: "center",
              position: "relative",
              zIndex: 10,
            }}
          >
            <div
              style={{
                display: "inline-flex",
                alignItems: "center",
                gap: "8px",
                padding: "4px 12px",
                borderRadius: "9999px",
                backgroundColor: "rgba(255, 255, 255, 0.04)",
                border: "1px solid rgba(255, 255, 255, 0.1)",
                marginBottom: "12px",
              }}
            >
              <span
                style={{
                  width: "6px",
                  height: "6px",
                  borderRadius: "9999px",
                  backgroundColor: "#00f0ff",
                  boxShadow: "0 0 8px #00f0ff",
                }}
              />
              <span
                style={{
                  fontFamily: "monospace",
                  fontSize: "11px",
                  fontWeight: "bold",
                  letterSpacing: "0.08em",
                  color: "#67e8f9",
                }}
              >
                SKINNY OTP // V4.8
              </span>
            </div>

            <h1
              style={{
                fontFamily: "'Newsreader', Georgia, serif",
                fontStyle: "italic",
                fontSize: "33px",
                fontWeight: "800",
                color: "#ffffff",
                letterSpacing: "-0.02em",
                marginBottom: "28px",
                lineHeight: 1.15,
                textShadow: "0 2px 14px rgba(255, 255, 255, 0.2)",
              }}
            >
              Desbloquear Bóveda
            </h1>

            <div
              style={{
                display: "grid",
                gridTemplateColumns: "repeat(4, 1fr)",
                gap: "16px",
                width: "100%",
                maxWidth: "380px",
                marginBottom: "28px",
                cursor: "pointer",
              }}
              onClick={() => inputRef.current?.focus()}
            >
              {[0, 1, 2, 3].map((idx) => {
                const isFilled = pin.length > idx;
                const isActive = pin.length === idx;

                return (
                  <div
                    key={idx}
                    style={{
                      height: "88px",
                      minHeight: "88px",
                      borderRadius: "22px",
                      display: "flex",
                      alignItems: "center",
                      justifyContent: "center",
                      position: "relative",
                      overflow: "hidden",
                      backgroundColor: isActive
                        ? "rgba(255, 255, 255, 0.05)"
                        : "rgba(255, 255, 255, 0.02)",
                      backdropFilter: "blur(10px)",
                      WebkitBackdropFilter: "blur(10px)",
                      border: isActive
                        ? "1.5px solid rgba(255, 255, 255, 0.35)"
                        : "1.5px solid rgba(255, 255, 255, 0.12)",
                      boxShadow: isActive
                        ? "0 0 20px rgba(255, 255, 255, 0.12), inset 0 2px 6px rgba(0, 0, 0, 0.75)"
                        : "inset 0 3px 6px rgba(0, 0, 0, 0.75), 0 4px 10px rgba(0, 0, 0, 0.35)",
                      transition: "all 0.2s ease",
                    }}
                  >
                    {isActive && (
                      <div
                        style={{
                          width: "3px",
                          height: "32px",
                          borderRadius: "9999px",
                          backgroundColor: "#00f0ff",
                          boxShadow: "0 0 12px #00f0ff, 0 0 24px #00f0ff",
                        }}
                      />
                    )}
                    {isFilled && (
                      <span
                        style={{
                          color: "#ffffff",
                          fontFamily: "monospace",
                          fontSize: "24px",
                          fontWeight: "bold",
                          textShadow: "0 0 12px rgba(0, 240, 255, 0.9)",
                        }}
                      >
                        ●
                      </span>
                    )}
                  </div>
                );
              })}
            </div>

            <footer style={{ paddingTop: "8px" }}>
              <button
                type="button"
                onClick={(e) => {
                  e.stopPropagation();
                  setIsResetOpen(true);
                }}
                style={{
                  display: "inline-flex",
                  alignItems: "center",
                  gap: "8px",
                  fontSize: "13px",
                  color: "#a1a1aa",
                  background: "transparent",
                  border: "none",
                  outline: "none",
                  cursor: "pointer",
                }}
              >
                <span
                  style={{
                    width: "14px",
                    height: "14px",
                    borderRadius: "50%",
                    border: "1.5px solid rgba(161, 161, 170, 0.7)",
                    display: "inline-block",
                    flexShrink: 0,
                  }}
                />
                <span>Restablecer Bóveda (Olvidé mi PIN)</span>
              </button>
            </footer>
          </div>
        ) : (
          <div
            style={{
              width: "100%",
              display: "flex",
              flexDirection: "column",
              alignItems: "center",
              justifyContent: "center",
              padding: "8px 0",
              position: "relative",
              zIndex: 10,
            }}
          >
            <div
              style={{
                width: "100px",
                height: "100px",
                position: "relative",
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                marginBottom: "16px",
              }}
            >
              <div
                style={{
                  position: "absolute",
                  inset: 0,
                  borderRadius: "50%",
                  border: "2px dashed rgba(52, 211, 153, 0.4)",
                }}
              />
              <div
                style={{
                  position: "absolute",
                  inset: "8px",
                  borderRadius: "50%",
                  border: "1px dotted rgba(6, 182, 212, 0.5)",
                }}
              />
              <div
                style={{
                  width: "72px",
                  height: "72px",
                  borderRadius: "50%",
                  backgroundColor: "rgba(6, 78, 59, 0.85)",
                  border: "2px solid #10e396",
                  boxShadow: "0 0 35px rgba(16, 227, 150, 0.6)",
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center",
                  zIndex: 2,
                }}
              >
                <svg
                  style={{ width: "36px", height: "36px" }}
                  fill="none"
                  stroke="#10e396"
                  strokeWidth="3"
                  viewBox="0 0 24 24"
                >
                  <path
                    d="M4.5 12.75l6 6 9-13.5"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  />
                </svg>
              </div>
            </div>

            <div
              style={{
                width: "100%",
                maxWidth: "280px",
                height: "8px",
                borderRadius: "9999px",
                backgroundColor: "rgba(255, 255, 255, 0.04)",
                border: "1px solid rgba(16, 227, 150, 0.3)",
                padding: "2px",
                marginBottom: "14px",
                overflow: "hidden",
              }}
            >
              <div
                style={{
                  height: "100%",
                  width: `${progressWidth}%`,
                  borderRadius: "9999px",
                  background:
                    "linear-gradient(to right, #00f0ff, #10e396, #6ee7b7)",
                  boxShadow: "0 0 12px #10e396",
                  transition: "width 0.7s ease",
                }}
              />
            </div>

            <div
              style={{
                display: "inline-flex",
                alignItems: "center",
                gap: "8px",
                padding: "4px 12px",
                borderRadius: "9999px",
                backgroundColor: "rgba(6, 78, 59, 0.8)",
                border: "1px solid rgba(16, 227, 150, 0.5)",
                color: "#6ee7b7",
                fontSize: "12px",
                fontFamily: "monospace",
                fontWeight: "bold",
                marginBottom: "8px",
                boxShadow: "0 0 16px rgba(16, 227, 150, 0.3)",
              }}
            >
              <span
                style={{
                  width: "8px",
                  height: "8px",
                  borderRadius: "50%",
                  backgroundColor: "#10e396",
                }}
              />
              AUTORIZACIÓN COMPLETA
            </div>

            <h2
              style={{
                fontSize: "26px",
                fontWeight: "800",
                color: "#ffffff",
                marginBottom: "20px",
                fontFamily: "'Newsreader', Georgia, serif",
                fontStyle: "italic",
                textShadow: "0 0 12px rgba(16, 227, 150, 0.3)",
              }}
            >
              ¡Bóveda Desbloqueada!
            </h2>

            <button
              type="button"
              onClick={resetVault}
              style={{
                width: "100%",
                maxWidth: "320px",
                padding: "14px 24px",
                borderRadius: "16px",
                background:
                  "linear-gradient(to right, #10e396, #2dd4bf, #10e396)",
                color: "#020617",
                fontWeight: "800",
                fontSize: "14px",
                boxShadow: "0 0 30px rgba(16, 227, 150, 0.5)",
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                gap: "8px",
                cursor: "pointer",
                border: "none",
                outline: "none",
              }}
            >
              <span>Continuar a la Bóveda</span>
              <svg
                style={{ width: "16px", height: "16px" }}
                fill="none"
                stroke="currentColor"
                strokeWidth="2.5"
                viewBox="0 0 24 24"
              >
                <path
                  d="M14 5l7 7m0 0l-7 7m7-7H3"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                />
              </svg>
            </button>
          </div>
        )}
      </div>

      {isResetOpen && (
        <div
          style={{
            position: "fixed",
            inset: 0,
            zIndex: 50,
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            padding: "16px",
            backgroundColor: "rgba(0, 0, 0, 0.75)",
            backdropFilter: "blur(20px)",
          }}
          onClick={() => setIsResetOpen(false)}
        >
          <div
            style={{
              maxWidth: "380px",
              width: "100%",
              borderRadius: "24px",
              padding: "28px",
              backgroundColor: "rgba(10, 15, 24, 0.95)",
              border: "1px solid rgba(255, 255, 255, 0.12)",
              boxShadow: "0 25px 60px rgba(0, 0, 0, 0.8)",
              textAlign: "left",
            }}
            onClick={(e) => e.stopPropagation()}
          >
            <div
              style={{
                width: "40px",
                height: "40px",
                borderRadius: "14px",
                backgroundColor: "rgba(0, 240, 255, 0.15)",
                border: "1px solid rgba(0, 240, 255, 0.3)",
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                color: "#00f0ff",
                marginBottom: "16px",
              }}
            >
              <svg
                style={{ width: "20px", height: "20px" }}
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
                viewBox="0 0 24 24"
              >
                <path
                  d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                />
              </svg>
            </div>

            <h3
              style={{
                fontSize: "18px",
                fontWeight: "bold",
                color: "#ffffff",
                marginBottom: "6px",
              }}
            >
              Recuperación de PIN
            </h3>
            <p
              style={{
                fontSize: "12px",
                color: "#a1a1aa",
                marginBottom: "16px",
                lineHeight: 1.5,
              }}
            >
              Para restaurar tu PIN maestro necesitas tu frase de respaldo de 12
              palabras o tu llave de seguridad hardware.
            </p>

            <button
              type="button"
              onClick={() => {
                setIsResetOpen(false);
                resetVault();
              }}
              style={{
                width: "100%",
                fontWeight: 600,
                padding: "10px 16px",
                borderRadius: "12px",
                backgroundColor: "rgba(255, 255, 255, 0.1)",
                color: "#ffffff",
                border: "1px solid rgba(255, 255, 255, 0.1)",
                display: "flex",
                alignItems: "center",
                justifyContent: "space-between",
                fontSize: "12px",
                cursor: "pointer",
                marginBottom: "10px",
              }}
            >
              <span>Usar Frase Semilla de 12 Palabras</span>
              <span>→</span>
            </button>

            <button
              type="button"
              onClick={() => {
                setIsResetOpen(false);
                inputRef.current?.focus();
              }}
              style={{
                width: "100%",
                padding: "10px 16px",
                borderRadius: "12px",
                backgroundColor: "transparent",
                color: "#a1a1aa",
                border: "none",
                fontSize: "12px",
                cursor: "pointer",
              }}
            >
              Regresar a Desbloqueo
            </button>
          </div>
        </div>
      )}
    </div>
  );
}

export { VaultUnlockCard };
License

MIT License
Published

10/20/2026
Similar components

Explore more

3D Element components46 3D Effect components83 3D Card components120 3D Animation components34
Dependencies

Tags

Newest

Popular

Shaders

Heros

Features

AI Chat Components

Calls to Action

Buttons

Testimonials

Pricing Sections

Text Components

Dependencies

Tags

OTP VERIFICATION

License

Published

Similar components

Explore more
