* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
}

body {
  overflow: hidden;
  font-family: Arial, Helvetica, sans-serif;
}

/* =========================
   SCENE
========================= */

.scene {
  width: 100vw;
  height: 100vh;

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

background:
    radial-gradient(
      circle at center,
      #272735 0%,
      #111119 45%,
      #050507 100%
    );

color: white;
}

/* =========================
   FACE / EYES
========================= */

.face {
  display: flex;
  align-items: center;

gap: 80px;
}

/* =========================
   EYE AREA
========================= */

.eye-area {
  position: relative;

width: 250px;
  height: 150px;
}

/* =========================
   EYEBROWS
========================= */

.eyebrow {
  position: absolute;

top: 0;
  left: 20px;

width: 210px;
  height: 22px;

border-radius: 50%;

background: #08080a;

transform-origin: center;

box-shadow:
    0 5px 12px rgba(0,0,0,.5);

animation: eyebrowMove 7s ease-in-out infinite;
}

.left-brow {
  transform: rotate(-4deg);
}

.right-brow {
  transform: rotate(4deg);
}

@keyframes eyebrowMove {

0%,
  65%,
  100% {
    translate: 0 0;
  }

72% {
    translate: 0 -7px;
  }

80% {
    translate: 0 -7px;
  }

}

/* =========================
   EYE
========================= */

.eye {
  position: absolute;

left: 0;
  bottom: 0;

width: 250px;
  height: 105px;

overflow: hidden;

border-radius:
    50% 50%
    48% 48% /
    60% 60%
    45% 45%;

background:
    radial-gradient(
      circle at 50% 45%,
      #ffffff 0%,
      #f7f7f4 55%,
      #d7d6d2 100%
    );

box-shadow:

inset 0 10px 15px rgba(0,0,0,.13),

inset 0 -7px 15px rgba(0,0,0,.12),

0 4px 8px rgba(0,0,0,.5);

}

/* Eye outline */

.eye::after {

content: "";

position: absolute;

inset: 0;

border-radius: inherit;

box-shadow:
    inset 0 0 0 3px rgba(0,0,0,.35);

pointer-events: none;
}

/* =========================
   IRIS
========================= */

.iris {

position: absolute;

left: 50%;
  top: 50%;

width: 88px;
  height: 88px;

border-radius: 50%;

transform:
    translate(-50%, -50%);

background:

repeating-radial-gradient(
      circle,
      transparent 0px,
      transparent 4px,
      rgba(0,0,0,.08) 5px,
      transparent 7px
    ),

radial-gradient(
      circle,
      #c5e8ff 0%,
      #63b6e6 35%,
      #2474a8 65%,
      #0b3859 100%
    );

box-shadow:

inset 0 0 15px rgba(0,0,0,.5),

0 0 5px rgba(0,0,0,.5);

animation:
    lookAround 9s ease-in-out infinite;
}

/* =========================
   PUPIL
========================= */

.pupil {

position: absolute;

left: 50%;
  top: 50%;

width: 36px;
  height: 36px;

transform:
    translate(-50%, -50%);

border-radius: 50%;

background: #030405;

box-shadow:
    0 0 8px rgba(0,0,0,.9);

}

/* =========================
   EYE HIGHLIGHTS
========================= */

.highlight {

position: absolute;

border-radius: 50%;

background: white;

}

.highlight.big {

width: 18px;
  height: 18px;

top: 17px;
  left: 20px;

opacity: .9;

}

.highlight.small {

width: 7px;
  height: 7px;

top: 38px;
  left: 42px;

opacity: .7;

}

/* =========================
   LOOK AROUND
========================= */

@keyframes lookAround {

0%,
  12% {

transform:
      translate(-50%, -50%)
      translateX(0);

}

22%,
  36% {

transform:
      translate(-50%, -50%)
      translateX(-45px);

}

46%,
  58% {

transform:
      translate(-50%, -50%)
      translateX(42px);

}

68%,
  77% {

transform:
      translate(-50%, -50%)
      translate(18px, 14px);

}

86%,
  100% {

transform:
      translate(-50%, -50%);

}

/* =========================
   EYELID
========================= */

.lid {

position: absolute;

z-index: 10;

left: -5%;

top: -105%;

width: 110%;
  height: 108%;

border-radius:
    0 0
    50% 50%;

background:
    linear-gradient(
      to bottom,
      #c98f76,
      #dba58c 70%,
      #b87560
    );

box-shadow:
    0 5px 10px rgba(0,0,0,.25);

animation:
    blink 6s infinite;

}

/* =========================
   BLINK
========================= */

@keyframes blink {

/* open */

0%,
  42% {

top: -105%;

}

/* blink */

44% {

top: 0;

}

46% {

top: -105%;

}

/* second quick blink */

48% {

top: 0;

}

50% {

top: -105%;

}

/* open */

50%,
  88% {

top: -105%;

}

/* another blink */

90% {

top: 0;

}

92% {

top: -105%;

}

100% {

top: -105%;

}

/* =========================
   TEXT
========================= */

.text {

margin-top: 70px;

font-size: 12px;

letter-spacing: 8px;

color: rgba(255,255,255,.35);

animation:
    textGlow 6s ease-in-out infinite;

}

@keyframes textGlow {

0%,
  100% {

color: rgba(255,255,255,.25);

text-shadow: none;

}

50% {

color: rgba(130,210,255,.7);

text-shadow:
      0 0 15px rgba(70,180,255,.5);

}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 700px) {

.face {

transform: scale(.65);

gap: 50px;

}

Liveweave: Generative AI Web Editor & HTML/CSS/JS Playground