Demos – Editor de codigo – Produce tu Pasión

abril 2025
L	M	X	J	V	S	D
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

Bienvenido a las demos del editor de codigo de produce tu pasión.

Se han creado 3 demos basados en la perspectiva de la juventud de como visualizan a cada uno de los candidatos aspirantes a la presidencia de México, además, estas 3 demos son de nivel avanzado con la intención de que se pueda probar el nivel y capacidad del editor/interprete de código de Produce tu Pasión.

Cheinbaum

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  background-color: #1c1c1c;
  font-family: system-ui, sans-serif;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

:root {
  --bg: #1c1c1c;
  --text-height: 300px;
}

.sparkle {
  width: 600px;
  height: var(--text-height);
  font-size: 50px;
  text-align: center;
  line-height: var(--text-height);
  color: white;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 5px;
  z-index: 100;
  position: relative;
  text-shadow: 0px 0px 10px black;
}


.star {
  --star-size: 50px;
  --star-life: 5s;
  
  --start-left: 0px;
  --start-top: 0px;
  
  --end-left: 0px;
  --end-top: 0px;
  
  --star-color: #f1c40f;
  
  width: var(--star-size);
  height: var(--star-size);
  left: var(--end-left);
  top: var(--end-top);
  background: var(--star-color);
  position: absolute;
  mix-blend-mode: lighten;
  animation: slide var(--star-life) ease-in forwards;
}

.star:after {
  display: block;
  content: "";
  width: var(--star-size);
  height: var(--star-size);
  background-color: var(--bg);
  border-radius: 100%;
  position: relative;
  top: calc(var(--star-size) / 2 * -1);
  left: calc(var(--star-size) / 2 * -1);
  box-shadow: var(--star-size) var(--star-size) var(--bg),
    var(--star-size) 0px var(--bg),
    0px var(--star-size) var(--bg);
}

@keyframes slide {
  0%{
    left: var(--start-left);
    top: var(--start-top);
    transform: rotate(0deg);
    opacity: 0;
  }
  100%{
    left: var(--end-left);
    top: var(--end-top);
    transform: rotate(calc(180deg * var(--star-life-num))) scale(0.5);
    opacity: 1;
  }
}
</style>
</head>
<body>
<div class="sparkle">
  Cheinbaum
</div>
<script>
const sparkle = document.querySelector(".sparkle");

var current_star_count = 0;

const MAX_STARS = 60;
const STAR_INTERVAL = 16;

const MAX_STAR_LIFE = 3;
const MIN_STAR_LIFE = 1;

const MAX_STAR_SIZE = 70;
const MIN_STAR_SIZE = 30;

const MIN_STAR_TRAVEL_X = 100;
const MIN_STAR_TRAVEL_Y = 100;

const Star = class {
  constructor() {
    this.size = this.random(MAX_STAR_SIZE, MIN_STAR_SIZE);

    this.x = this.random(
      sparkle.offsetWidth * 0.75,
      sparkle.offsetWidth * 0.25
    );
    this.y = sparkle.offsetHeight / 2 - this.size / 2;

    this.x_dir = this.randomMinus();
    this.y_dir = this.randomMinus();

    this.x_max_travel =
      this.x_dir === -1 ? this.x : sparkle.offsetWidth - this.x - this.size;
    this.y_max_travel = sparkle.offsetHeight / 2 - this.size;

    this.x_travel_dist = this.random(this.x_max_travel, MIN_STAR_TRAVEL_X);
    this.y_travel_dist = this.random(this.y_max_travel, MIN_STAR_TRAVEL_Y);

    this.x_end = this.x + this.x_travel_dist * this.x_dir;
    this.y_end = this.y + this.y_travel_dist * this.y_dir;

    this.life = this.random(MAX_STAR_LIFE, MIN_STAR_LIFE);

    this.star = document.createElement("div");
    this.star.classList.add("star");

    this.star.style.setProperty("--start-left", this.x + "px");
    this.star.style.setProperty("--start-top", this.y + "px");

    this.star.style.setProperty("--end-left", this.x_end + "px");
    this.star.style.setProperty("--end-top", this.y_end + "px");

    this.star.style.setProperty("--star-life", this.life + "s");
    this.star.style.setProperty("--star-life-num", this.life);

    this.star.style.setProperty("--star-size", this.size + "px");
    this.star.style.setProperty("--star-color", this.randomRainbowColor());
  }

  draw() {
    sparkle.appendChild(this.star);
  }

  pop() {
    sparkle.removeChild(this.star);
  }

  random(max, min) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }
  
  randomRainbowColor(){
    return "hsla("+this.random(360,0)+", 100%, 50%, 1)";
  }

  randomMinus() {
    return Math.random() > 0.5 ? 1 : -1;
  }
};

setInterval(() => {
  if (current_star_count >= MAX_STARS) {
    return;
  }

  current_star_count++;

  var newStar = new Star();

  newStar.draw();

  setTimeout(() => {
    current_star_count--;

    newStar.pop();
  }, newStar.life * 1000);
}, STAR_INTERVAL);
</script>
</body>
</html>

Chochil

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
:root {
	--primary: #80e36b;
	--secondary: #50bc37;
	--bubble: #dc7f94;
	--blush: #ee9a96;

	--sizeMultiplicator: 1;

	@media (max-width: 700px), (max-height: 500px) {
		--sizeMultiplicator: 0.5;
	}

	@media (max-width: 350px), (max-height: 250px) {
		--sizeMultiplicator: 0.3;
	}
}

* {
	box-sizing: border-box;
}

body {
	overflow: hidden;
}

#main {
	scale: var(--sizeMultiplicator);
	transform-origin: 91% 91%;
	bottom: 0;
	right: 0;
	position: absolute;
	padding: 65px 65px 0 0;
	margin: 0 -50px -50px 0;
}

#head {
	width: 500px;
	aspect-ratio: 1;
	background-color: var(--primary);
	border-radius: 100%;
	border: 10px solid black;
}

#eyes {
	position: absolute;
	top: 300px;
	left: 50px;
	width: 300px;
	height: 50px;
	display: flex;
	justify-content: space-between;
	z-index: 1;
	align-items: center;

	.eye,
	.blush {
		width: 50px;
		height: 50px;
		border-radius: 100%;
	}

	.eye {
		background-color: black;
		animation: blink 10s linear infinite;
	}

	.blush {
		position: absolute;
		background-color: var(--blush);
		z-index: -1;
		top: 24px;
	}

	#blush-0 {
		left: -26px;
	}

	#blush-1 {
		right: -26px;
	}
}

@keyframes blink {
	50% {
		height: 50px;
	}
	50.1% {
		height: 10px;
	}
	50.7% {
		height: 50px;
	}
	70% {
		height: 50px;
	}
	71% {
		height: 10px;
	}
	72% {
		height: 50px;
	}
	73% {
		height: 50px;
	}
	74% {
		height: 10px;
	}
	75% {
		height: 50px;
	}
}

#mouth {
	position: absolute;
	top: 310px;
	left: 190px;

	.lip {
		width: 25px;
		aspect-ratio: 1;
		border: 5px solid black;
		border-radius: 100%;
	}
}

#lip-1 {
	margin-top: -6px;
	position: relative;
	visibility: hidden;
	animation: mouth-show 10s infinite linear;

	&:after {
		content: "";
		position: absolute;
		left: 5px;
		top: -100%;
		height: 25px;
		width: 20px;
		border-radius: 40%;
		background-color: var(--primary);
	}
}

@keyframes mouth-show {
	0% {
		visibility: visible;
	}
	50% {
		visibility: hidden;
	}
}

.hair {
	background-color: var(--secondary);
	position: absolute;
	border: 10px solid black;
	z-index: -1;
	border-radius: 50%;
}

#hair-0 {
	top: 0px;
	left: 220px;
	width: 110px;
	height: 230px;
	rotate: 10deg;
}

#hair-1 {
	top: 70px;
	left: 350px;
	width: 110px;
	height: 210px;
	rotate: 40deg;
}

#hair-2 {
	top: 200px;
	left: 400px;
	width: 100px;
	height: 190px;
	rotate: 80deg;
}

#hair-3 {
	top: 320px;
	left: 380px;
	width: 90px;
	height: 190px;
	rotate: 110deg;
}

#bubble {
	aspect-ratio: 1;
	position: absolute;
	top: 59%;
	right: 65%;
	border-radius: 100%;
	transform: translateY(-50%);
	animation: bubbleSize 10s infinite ease-out;
	visibility: hidden;
	z-index: 2;

	&:before {
		content: "";
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: var(--bubble);
		border-radius: 100%;
		animation: bubbleOpacity 10s infinite ease-out;
	}

	&:after {
		content: "";
		position: absolute;
		border: 5px solid var(--bubble);
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		border-radius: 100%;
	}
}

#highlight {
	aspect-ratio: 1;
	position: absolute;
	width: 100%;
	animation: highlightOpacity 10s infinite ease-out;

	&:before,
	&:after {
		content: "";
		background-color: white;
		border-radius: 100%;
		position: absolute;
	}

	&:before {
		width: 7%;
		height: 12%;
		top: 10%;
		left: 26%;
		rotate: 45deg;
	}

	&:after {
		width: 6%;
		height: 8%;
		top: 26%;
		left: 14%;
		rotate: 33deg;
	}
}

@keyframes bubbleSize {
	0% {
		width: 10px;
		visibility: visible;
	}
	50% {
		visibility: hidden;
	}
	55% {
		width: 350px;
	}
	100% {
	}
}

@keyframes bubbleOpacity {
	0% {
		opacity: 0.9;
	}
	50% {
		opacity: 0.5;
	}
}

@keyframes highlightOpacity {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 0.9;
	}
}

#popped {
	background-color: var(--bubble);
	opacity: 0.6;
	width: 200px;
	height: 200px;
	scale: 2.8;
	transform-origin: 0 0;
	left: -24px;
	position: absolute;
	top: 41px;
	z-index: 2;
	clip-path: path(
		"M135.6,42.4C146.6,44.6,156.3,53.3,162.7,63.9C169,74.6,172.1,87.3,169.7,98.6C167.3,109.9,159.3,119.8,153.8,131.9C148.2,144,145.1,158.4,136.6,163.6C128,168.9,114,164.9,101.1,163C88.2,161,76.5,161.1,66.4,156.7C56.2,152.4,47.7,143.8,38.5,133.6C29.2,123.4,19.3,111.7,18.3,99.4C17.4,87.2,25.4,74.4,33.1,61.5C40.7,48.6,48.1,35.7,59.2,33.6C70.3,31.4,85.1,40,98.7,42.2C112.3,44.4,124.7,40.2,135.6,42.4Z"
	);
	visibility: hidden;
	animation: popped 10s infinite;
}

@keyframes popped {
	50% {
		visibility: hidden;
	}
	100% {
		visibility: visible;
	}
}

#shock {
	position: absolute;
	width: 200px;
	height: 200px;
	background-color: yellow;
	top: 160px;
	left: -170px;
	clip-path: polygon(
		50% 0%,
		62% 29%,
		98% 35%,
		71% 41%,
		89% 63%,
		47% 52%,
		31% 84%,
		29% 42%,
		9% 31%,
		43% 22%
	);

	visibility: hidden;
	animation: shock 10s infinite;
}

@keyframes shock {
	49.7% {
		visibility: hidden;
	}
	50.3% {
		visibility: visible;
	}
	50.4% {
		visibility: hidden;
	}
}
</style>
</head>
<body>
<div id="main">
  <div id="head">
    <div id="eyes">
      <div class="eye">
        <div class="blush" id="blush-0"></div>
      </div>
      <div class="eye">
        <div class="blush" id="blush-1"></div>
      </div>
    </div>
    <div id="mouth">
      <div class="lip" id="lip-0"></div>
      <div class="lip" id="lip-1"></div>
    </div>
    <div id="popped"></div>
  </div>
  <div id="hair">
    <div class="hair" id="hair-0"></div>
    <div class="hair" id="hair-1"></div>
    <div class="hair" id="hair-2"></div>
    <div class="hair" id="hair-3"></div>
  </div>
  <div id="bubble">
    <div id="highlight"></div>
  </div>
  <div id="shock"></div>
</div>
</body>
</html>

Maynes

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@use 'sass:math';

@layer tokens {
  :root {
    --color-primary: rgba(220, 219, 219, 0.78);
    --color-surface: #242425;
    --time: 24s;
  }
}

@property --shadow-color {
  syntax: "<color>";
  initial-value: transparent;
  inherits: true;
}

@layer stars {
  .stars {
    position: absolute;
    width: 100vmax;
    height: 100vmax;

    &:before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      filter: url(#stars) saturate(0) brightness(1.5);
      mix-blend-mode: overlay;
      opacity: 0.15;
      animation: stars-animation 20s ease-in-out infinite;
    }
  }

  .stars-highlights {
    position: absolute;
    width: 100vw;
    height: 100vh;
    opacity: 0.6;

    &:before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      filter: url(#stars-highlights) saturate(0) brightness(1.5);
      mix-blend-mode: lighten;
      opacity: 0.2;
      animation: stars-animation-2 20s ease-in-out infinite;
    }
  }

  @keyframes stars-animation {
    from {
      translate: 1vmin 2vmin;
      rotate: 0deg;
    }
    30% {
      translate: 1vmin -2vmin;
    }
    50% {
      translate: -1vmin 2vmin;
      rotate: 10deg;
    }
    to {
      translate: 1vmin 2vmin;
      rotate: 0deg;
    }
  }

  @keyframes stars-animation-2 {
    from {
      translate: 1vmin -2vmin;
    }
    30% {
      translate: -1vmin -2vmin;
    }
    50% {
      translate: 1vmin -2vmin;
    }
    to {
      translate: 1vmin -2vmin;
    }
  }

  .startails {
    position: absolute;
    inset: 0;
    opacity: 0.6;

    > div {
      --distance: 20vmax;
      border-radius: 50%;
      width: 0.55vmax;
      aspect-ratio: 3 / 1;
      background: white;
      translate: calc(var(--x) * 100vw) calc(var(--y) * 100vh);
      opacity: 0;
      animation: startails-animation 10s calc(var(--delay) * var(--time) * 6)
        linear infinite;
      box-shadow: 0 0 0.2vmax white;
    }

    @for $i from 0 through 200 {
      > div:nth-of-type(#{$i + 1}) {
        --x: #{math.random()};
        --y: #{math.random()};
        --x2: #{math.random() - 0.5};
        --y2: #{math.random() - 0.5};
        --delay: #{math.random()};
      }
    }
  }

  @keyframes startails-animation {
    from {
      opacity: 1;
      translate: calc(var(--x) * 100vw) calc(var(--y) * 100vh);
      scale: 0.9;
    }
    2% {
      scale: 0.4;
    }
    5% {
      translate: calc(var(--x) * 100vw + var(--y2) * var(--distance))
        calc(var(--y) * 100vh + var(--x2) * var(--distance));
      opacity: 0;
      scale: 1;
    }

    to {
      translate: calc(var(--x) * 100vw + var(--y2) * var(--distance))
        calc(var(--y) * 100vh + var(--x2) * var(--distance));

      scale: 1;
      opacity: 0;
    }
  }
}

@layer scene {
  .scene {
    display: grid;
    place-items: center;
    position: absolute;
    animation: scene-zoom-in-out var(--time) ease-in-out infinite;
    transform-style: preserve-3d;
  }

  @keyframes scene-zoom-in-out {
    from {
      transform: scale(0.9);
    }
    50% {
      transform: scale(1);
    }
    to {
      transform: scale(0.9);
    }
  }
}

@property --space {
  syntax: "<length>";
  initial-value: 0;
  inherits: true;
}

@layer cuboid {
  .cuboid {
    position: absolute;
    transform-style: preserve-3d;
    transform: rotateY(312deg) rotateX(350deg) rotateZ(10deg) translateY(20vh);
    --size: 8vmax;
    --size-h: calc(var(--size) / 2);
    --size-h-n: calc(var(--size) / -2);

    .top {
      width: var(--size);
      aspect-ratio: 1;
      background: linear-gradient(135deg, #e8dbdd, #989699);
      transform-style: preserve-3d;
      transform: rotateX(90deg) translateZ(var(--size-h-n));
      opacity: 0.9;
    }

    .front {
      width: var(--size);
      aspect-ratio: 1 / 2;
      background: linear-gradient(#5f595d, transparent 60%);
      opacity: 0.5;
      transform: translateZ(var(--size-h));
      position: absolute;
    }

    .right {
      width: var(--size);
      aspect-ratio: 1 / 2;
      background: linear-gradient(#5f595d 10%, transparent 90%);
      transform: translate3d(var(--size-h), 0, 0) rotateY(90deg);
      position: absolute;
      opacity: 0.7;
      mask: radial-gradient(150% 120% at 0% 0%, black, transparent);
    }

    .outline {
      --space: 0vmax;
      --space-h: calc(var(--size) / 2);
      position: absolute;
      width: var(--size);
      aspect-ratio: 1;
      border: 0.0125vmax solid white;
      transition: all 3s ease-in-out;
      translate: calc(-50% + var(--space-h)) calc(-50% + var(--space-h));
      padding: var(--space);
      --duration: 16s;
      animation: outline-animation var(--duration) 0s
        cubic-bezier(0.68, 0.27, 0.26, 0.91) infinite;
      opacity: 0;
      box-shadow: inset 0 0 0.5vmax rgba(255, 255, 255, 0.4),
        0 0 0.5vmax rgba(255, 255, 255, 0.4);
      --initial-space: var(--size-h);

      &:nth-of-type(2) {
        animation-delay: calc(var(--duration) / 4);
      }

      &:nth-of-type(3) {
        animation-delay: calc(var(--duration) / 4 * 2);
      }

      &:nth-of-type(4) {
        animation-delay: calc(var(--duration) / 4 * 3);
      }
    }
  }

  @keyframes outline-animation {
    from {
      --space: var(--initial-space, 0vmax);
      opacity: 0;
      filter: blur(0vmax);
    }
    5% {
      opacity: 0.2;
    }
    40% {
      opacity: 0.5;
    }
    60% {
      opacity: 0.05;
      filter: blur(0vmax);
    }
    80% {
      opacity: 0;
    }
    to {
      --space: calc(var(--initial-space, 0vmax) + 25vmax);
      opacity: 0;
      filter: blur(0.6vmax);
    }
  }
}

@layer planets {
  @property --moon-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: true;
  }

  @keyframes moon-animation {
    from {
      --moon-angle: 180deg;
    }
    50% {
      --moon-angle: 200deg;
    }
    to {
      --moon-angle: 180deg;
    }
  }

  .sun {
    border-radius: 50%;
    width: 25vmax;
    aspect-ratio: 1;
    background: radial-gradient(circle at 60% 60%, #f6f6f6, #e8dbdd, #d9d9d9);
    position: absolute;
    transform: translateY(-20vmax);
    box-shadow: 0 0 14vmax rgba(255, 255, 255, 0.5),
      0 0 22vmax rgba(255, 255, 255, 0.05), 0 0 42vmax rgba(255, 255, 255, 0.4);
    transform-style: preserve-3d;
  }

  .planet {
    border-radius: 50%;
    width: 17vmax;
    aspect-ratio: 1;
    background: radial-gradient(
        90% 90% at 60% 55%,
        #252525,
        #2a2f33 52%,
        #ede9ea 62%
      ),
      #ede9ea;
    position: absolute;
    --r: 15vmax;
    --y: calc(-10vmax + sin(var(--moon-angle)) * var(--r));
    --z: calc(cos(var(--moon-angle)) * var(--r) * -1);
    transform: translateY(var(--y)) translateX(10vmax) translateZ(var(--z));
    animation: moon-animation var(--time) ease-in-out infinite;
    box-shadow: 0 0 2.5vmax rgba(255, 255, 255, 0.12);
    filter: blur(0.05vmax);
    transform-style: preserve-3d;
  }

  .planet-2 {
    transform-style: preserve-3d;
    border-radius: 50%;
    width: 13vmax;
    aspect-ratio: 1;
    background: radial-gradient(
      90% 90% at 60% 55%,
      #e3e3e3,
      #d2c6c8 52%,
      #212528 62%,
      transparent 82%
    );
    position: absolute;
    --r: 2vmax;
    --y: calc(-35vmax + sin(var(--moon-angle)) * var(--r));
    --z: calc(cos(var(--moon-angle)) * var(--r) * 1);
    transform: translateY(var(--y)) translateX(-20vmax) translateZ(var(--z));
    animation: moon-animation var(--time) ease-in-out infinite;
  }

  .planet-3 {
    transform-style: preserve-3d;
    border-radius: 50%;
    width: 2vmax;
    aspect-ratio: 1;
    background: radial-gradient(
      90% 90% at 70% 50%,
      #eeeeee 16%,
      #b7aeb0 38%,
      #3c4144 52%,
      #2d3134 60%,
      transparent 82%
    );
    position: absolute;
    transform: translateY(-10vmax) translateX(-20vmax);
    opacity: 0.6;
  }

  .planet-4 {
    transform-style: preserve-3d;
    border-radius: 50%;
    width: 1vmax;
    aspect-ratio: 1;
    background: radial-gradient(
      90% 90% at 70% 50%,
      #d0d0d0,
      #b7aeb0 38%,
      #121415 52%,
      #131617 60%,
      transparent 82%
    );
    position: absolute;
    transform: translateY(-11vmax) translateX(-22vmax);
    opacity: 0.5;
  }

  .planet-5 {
    transform-style: preserve-3d;
    border-radius: 50%;
    width: 10vmax;
    aspect-ratio: 1;
    background: radial-gradient(
      90% 90% at 30% 55%,
      #797777,
      #515051 52%,
      #212528 62%,
      transparent 82%
    );
    position: absolute;
    --r: 5vmax;
    --y: calc(-35vmax + sin(var(--moon-angle)) * var(--r));
    --z: calc(cos(var(--moon-angle)) * var(--r) * 1);
    transform: translateY(var(--y)) translateX(18vmax) translateZ(var(--z));
    clip-path: circle();
    animation: moon-animation var(--time) ease-in-out infinite;

    --animation: move-to-left calc(var(--time) * 6) ease-in-out infinite;

    .structure-1 {
      position: absolute;
      inset: -20vmax;
      filter: url(#planet-structure) saturate(0);
      mix-blend-mode: lighten;
      opacity: 0.4;
      transform: scale(4) translateX(1vmax);
      animation: var(--animation);
    }

    .structure-2 {
      position: absolute;
      inset: -20vmax;
      filter: url(#planet-structure) saturate(0);
      mix-blend-mode: lighten;
      opacity: 0.5;
      transform: scale(7.5);
      animation: var(--animation);
    }

    .structure-3 {
      position: absolute;
      inset: -20vmax;
      filter: url(#planet-structure) saturate(0);
      mix-blend-mode: lighten;
      opacity: 0.1;
      transform: scale(0.2) translateX(1vmax);
      animation: var(--animation);
    }

    &::after {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(
        circle at 5% 20%,
        transparent 30%,
        #171a1c 60%
      );
    }
  }

  @keyframes move-to-left {
    from {
      translate: 0 0;
    }

    50% {
      translate: -100% 0;
    }

    to {
      translate: 0 0;
    }
  }

  .planet-6 {
    transform-style: preserve-3d;
    border-radius: 50%;
    width: 7vmax;
    aspect-ratio: 1;
    background: radial-gradient(
      90% 90% at 30% 55%,
      #f3ecec,
      #7a7a7a 52%,
      #212528 72%,
      transparent
    );
    position: absolute;
    --r: 6vmax;
    --y: calc(-39.6vmax + sin(var(--moon-angle)) * var(--r));
    --z: calc(cos(var(--moon-angle)) * var(--r) * 1);
    transform: translateY(var(--y)) translateX(23vmax) translateZ(var(--z));
    animation: moon-animation var(--time) ease-in-out infinite;
    display: grid;
    place-items: center;

    &::before {
      content: "";
      position: absolute;
      border-radius: 50%;
      width: 12vmax;
      height: 1vmax;
      border: 1vmax solid #5e5e5e;
      box-shadow: inset 0 0 1rem black;
      transform: rotate(25deg);
      mask: radial-gradient(circle at 50% -20%, transparent 30%, black);
      clip-path: ellipse(47% 22% at 50% 50%);
      filter: blur(0.5vmax);
    }

    &::after {
      content: "";
      position: absolute;
      border-radius: 50%;
      width: 12vmax;
      height: 1vmax;
      border: 2.6vmax solid #43484c;
      box-shadow: inset 0 0 1rem black;
      transform: rotate(25deg);
      mask: radial-gradient(circle at 50% -20%, transparent 30%, black);
      clip-path: ellipse(47% 22% at 50% 50%);
    }
  }

  .planets,
  .planets-2 {
    position: absolute;
    inset: 0;

    > div {
      --distance: 20vmax;
      border-radius: 50%;
      width: 1.6vmax;
      aspect-ratio: 1;
      background: radial-gradient(
        90% 90% at 70% 50%,
        #bbbaba,
        #888586 38%,
        #121415 52%,
        #131617 60%,
        transparent 82%
      );
      opacity: 0.5;
      filter: blur(0.1rem);
      translate: calc(var(--x) * 100vw) calc(var(--y) * 100vh);
    }

    @for $i from 0 through 50 {
      > div:nth-of-type(#{$i + 1}) {
        --x: #{math.random()};
        --y: #{math.random()};
        --x2: #{math.random() - 0.5};
        --y2: #{math.random() - 0.5};
        --delay: #{math.random()};
      }
    }
  }

  .planets-2 {
    > div {
      width: 0.5vmax;
      opacity: 0.6;
      filter: unset;
    }
  }
}
@layer object {
  .object {
    position: absolute;
    display: grid;
    display: none;
    place-items: center;
    transform: rotateY(45deg) translateZ(6vmax);
    translate: 5vmax 5vmax;

    .body {
      position: absolute;
      display: grid;
      place-items: center;
      --content: "🏄‍♂️";
      --content: "🐋";
      //--content: '🐬';
      //--content: '🐚';
      //--content: '🕊️';
      //--content: '🌴';
      font-size: 6vmax;
      color: initial;
      z-index: 1111;

      &:before {
        content: var(--content);
        transform: scaleX(-1);
        filter: saturate(0) brightness(1.1)
          drop-shadow(0 0 1vmax rgba(0, 0, 0, 0.4));
        z-index: 1111;
      }

      &:after {
        content: var(--content);
        transform: scaleX(-1) scaleY(-1) translateY(2.5vmax);
        filter: saturate(0) brightness(0);
        mask: linear-gradient(to bottom, transparent 60%, black 80%);
        z-index: 115;
      }
    }
  }
}

@layer human {
  .human {
    position: absolute;
    display: grid;
    place-items: center;
    //border: 1px solid red;
    width: 6vmax;
    height: 14vmax;
    translate: 0 17vh;
    z-index: 111;

    &:not(.shadow) {
      filter: invert(0.04) drop-shadow(0 0 1.5vmax rgba(250, 250, 250, 0.6));
    }

    > div {
      position: absolute;
    }

    .head {
      background: white;
      width: 1.5vmax;
      height: 1.6vmax;
      border-radius: 50%;
      translate: 0.2vmax -6.2vmax;
      rotate: 355deg;

      &:before {
        content: ""; // nose
        position: absolute;
        background: white;
        width: 0.27vmax;
        height: 0.7vmax;
        border-radius: 50%;
        translate: 1.19vmax 0.5vmin;
        rotate: 136deg;
        animation: head-nose calc(var(--time) / 4) ease-in-out infinite;
        @keyframes head-nose {
          from {
            translate: 1.19vmax 0.5vmin;
          }
          50% {
            translate: 1.06vmax 0.5vmin;
          }
          to {
            translate: 1.19vmax 0.5vmin;
          }
        }
      }

      &:after {
        content: ""; // chin
        position: absolute;
        background: white;
        width: 1.1vmax;
        height: 0.9vmax;
        border-radius: 50%;

        translate: 0.45vmax 0.66vmax;
        rotate: 45deg;
        animation: head-chin calc(var(--time) / 4) ease-in-out infinite;
        @keyframes head-chin {
          from {
            translate: 0.45vmax 0.66vmax;
          }
          50% {
            translate: 0.2vmax 0.66vmax;
          }
          to {
            translate: 0.45vmax 0.66vmax;
          }
        }
      }
    }

    .neck {
      background: white;
      width: 0.8vmax;
      height: 1.5vmax;
      border-radius: 50%;
      translate: 0.2vmax -5.4vmax;

      &:before {
        content: ""; // right
        position: absolute;
        width: 0.3vmax;
        height: 1.5vmax;
        background: white;
        border-radius: 50%;
        translate: 0.6vmax 0.4vmax;
        rotate: 352deg;
      }
    }

    .body {
      z-index: 11;

      > div {
        position: absolute;
      }

      .shoulder {
        &:before {
          content: "";
          position: absolute;
          width: 1.3vmax;
          height: 0.5vmax;
          background: white;
          border-radius: 50%;
          translate: -1.1vmax -5vmax;
          rotate: 330deg;
        }

        &:after {
          content: "";
          position: absolute;
          width: 1.3vmax;
          height: 0.5vmax;
          background: white;
          border-radius: 50%;
          translate: 0.4vmax -4.9vmax;
          rotate: 24deg;
        }
      }

      .back {
        width: 1.3vmax;
        height: 4.1vmax;
        background: rgb(250, 250, 250);
        border-radius: 20%;
        translate: -0.2vmax -4.9vmax;
        rotate: 357deg;

        &:before {
          content: "";
          position: absolute;
          width: 2.9vmax;
          height: 1.5vmax;
          background: rgb(250, 250, 250);
          border-radius: 50%;
          translate: -1.4vmax 0.7vmax;
          rotate: 69deg;
          z-index: -1;
        }

        &:after {
          content: "";
          position: absolute;
          width: 2.6vmax;
          height: 1vmax;
          background: rgb(250, 250, 250);
          border-radius: 50%;
          translate: 0.1vmax 1.1vmax;
          rotate: 96deg;
        }
      }

      .hip {
        .center {
          position: absolute;
          width: 1.6vmax;
          height: 1.8vmax;
          background: radial-gradient(white, #f5f5f5);
          border-radius: 39.6%;
          translate: -0.3vmax -3vmax;
          rotate: 267deg;
          display: grid;
        }

        &:before {
          content: ""; // left
          position: absolute;
          width: 1.6vmax;
          height: 2.2vmax;
          background: radial-gradient(white, #e7e4e4);
          border-radius: 46.5%;
          translate: -0.6vmax -2.5vmax;
          rotate: 8deg;
        }

        &:after {
          content: ""; // right
          position: absolute;
          width: 1.3vmax;
          height: 2.2vmax;
          background: radial-gradient(white, #f6f5f5);
          border-radius: 41.1%;
          translate: 0.3vmax -2.2vmax;
          rotate: 161deg;
        }
      }
    }

    .leg {
      &.right {
        width: 1.1vmax;
        height: 2.9vmax;
        background: white;
        border-radius: 50%;
        translate: 1.2vmax 0.4vmax;
        rotate: 348deg;

        &:after {
          content: "";
          position: absolute;
          width: 0.7vmax;
          height: 2.9vmax;
          background: white;
          border-radius: 50%;
          translate: 0.5vmax 0.2vmax;
          rotate: 13deg;
        }

        .knee {
          position: absolute;
          height: 1.7vmax;
          width: 0.75vmax;
          background: white;
          border-radius: 39.6%;
          translate: 0vmax 2.2vmax;
          rotate: 15deg;
        }

        .lower {
          position: absolute;
          height: 3.2vmax;
          width: 0.8vmax;
          background: white;
          border-radius: 50%;
          translate: -0.3vmax 2.4vmax;
          rotate: 15deg;

          &:before {
            content: "";
            position: absolute;
            width: 0.5vmax;
            height: 1.5vmax;
            background: white;
            border-radius: 67.8%;
            translate: 0.5vmax 2.6vmax;
            rotate: 66deg;
          }

          &:after {
            content: "";
            position: absolute;
            width: 0.5vmax;
            height: 1.5vmax;
            background: white;
            border-radius: 27.8%;
            translate: 0.1vmax 2.3vmax;
            rotate: 0deg;
          }
        }
      }

      &.left {
        width: 1.1vmax;
        height: 2.9vmax;
        background: #f4efef;
        border-radius: 50%;
        translate: -0.3vmax 0.4vmax;
        rotate: 2deg;
        filter: invert(0.04);
        z-index: -1;

        &:after {
          content: "";
          position: absolute;
          width: 0.7vmax;
          height: 2.9vmax;
          background: #f4efef;
          border-radius: 50%;
          translate: 0.5vmax 0.2vmax;
          rotate: 13deg;
        }

        .knee {
          position: absolute;
          height: 1.7vmax;
          width: 0.75vmax;
          background: #e7e4e4;
          border-radius: 39.6%;
          translate: 0vmax 2.2vmax;
          rotate: 5deg;
        }

        .lower {
          position: absolute;
          height: 3.2vmax;
          width: 0.8vmax;
          background: #eae6e6;
          border-radius: 50%;
          translate: -0.1vmax 1.9vmax;
          rotate: 5deg;

          &:before {
            content: "";
            position: absolute;
            width: 0.5vmax;
            height: 1.5vmax;
            background: #e7e4e4;
            border-radius: 67.8%;
            translate: 0.5vmax 2.6vmax;
            rotate: 47deg;
          }

          &:after {
            content: "";
            position: absolute;
            width: 0.5vmax;
            height: 1.55vmax;
            background: #e7e4e4;
            border-radius: 27.8%;
            translate: 0.1vmax 2.3vmax;
            rotate: 0deg;
          }
        }
      }
    }

    .arm {
      &.right {
        position: absolute;
        width: 0.7vmax;
        height: 2.9vmax;
        background: white;
        border-radius: 27.8%;
        translate: 1.6vmax -3.1vmax;
        rotate: 346deg;
        animation: arm-right calc(var(--time) / 4) ease-in-out infinite;
        @keyframes arm-right {
          from {
            rotate: 346deg;
          }
          50% {
            rotate: 350deg;
          }

          to {
            rotate: 346deg;
          }
        }

        &:before {
          content: "";
          position: absolute;
          width: 0.3vmax;
          height: 2.45vmax;
          background: white;
          border-radius: 27.8%;
          translate: 0.3vmax 2.1vmax;
          rotate: 6deg;
        }

        &:after {
          content: "";
          position: absolute;
          width: 0.4vmax;
          height: 2.15vmax;
          background: white;
          border-radius: 27.8%;
          translate: 0.1vmax 2.1vmax;
          rotate: 351deg;
        }

        .hand {
          position: absolute;
          width: 0.3vmax;
          height: 0.85vmax;
          background: white;
          border-radius: 27.8%;
          translate: 0.3vmax 3.7vmax;
          rotate: 353deg;

          &:after {
            content: "";
            position: absolute;
            width: 0.5vmax;
            height: 0.55vmax;
            background: white;
            border-radius: 39.2%;
            translate: -0.2vmax 0.6vmax;
            rotate: 65deg;
          }
        }
      }

      &.left {
        width: 0.7vmax;
        height: 2.5vmax;
        background: white;
        border-radius: 59.8%;
        translate: -0.9vmax -3.4vmax;
        rotate: 359deg;
        filter: invert(0.1);
        z-index: -2;
        animation: arm-left calc(var(--time) / 4) ease-in-out infinite;
        @keyframes arm-left {
          from {
            rotate: 359deg;
          }
          50% {
            rotate: 364deg;
          }

          to {
            rotate: 359deg;
          }
        }

        &:before {
          content: "";
          position: absolute;
          width: 0.3vmax;
          height: 2.45vmax;
          background: white;
          border-radius: 27.8%;
          translate: 0.3vmax 1.8vmax;
          rotate: 6deg;
        }

        &:after {
          content: "";
          position: absolute;
          width: 0.4vmax;
          height: 2.15vmax;
          background: white;
          border-radius: 27.8%;
          translate: 0.2vmax 2.1vmax;
          rotate: 351deg;
        }

        .hand {
          position: absolute;
          width: 0.3vmax;
          height: 0.85vmax;
          background: white;
          border-radius: 27.8%;
          translate: 0.3vmax 3.7vmax;
          rotate: 353deg;

          &:after {
            content: "";
            position: absolute;
            width: 0.5vmax;
            height: 0.55vmax;
            background: white;
            border-radius: 39.2%;
            translate: -0.1vmax 0.2vmax;
            rotate: 65deg;
          }
        }
      }
    }

    &.shadow {
      transform: scaleY(-1) translateY(-9vmax);
      filter: invert(0.2);
      opacity: 0.5;
      z-index: 0;
      mask: linear-gradient(to top, black 25%, transparent 35%);

      .leg.left {
        .lower {
          &:before {
            rotate: 102deg;
          }
        }
      }

      .leg.right {
        .lower {
          &:before {
            rotate: 102deg;
          }
        }
      }
    }
  }
}

.highlight {
  position: absolute;
  height: 100vh;
  width: 100vw;
  background: radial-gradient(
      50vmin 70vmin at 70% 70%,
      rgba(255, 255, 255, 0.12),
      transparent
    ),
    radial-gradient(
      40vmin 30vmin at 70% 70%,
      rgba(255, 255, 255, 0.12),
      transparent
    ),
    radial-gradient(
      40vmin 60vmin at 10% 70%,
      rgba(255, 255, 255, 0.14),
      transparent
    ),
    radial-gradient(
      80vmin 100vh at 30% 70%,
      rgba(255, 255, 255, 0.1),
      transparent
    );
  filter: blur(5vmin);
  pointer-events: none;
}

.color-filter {
  position: absolute;
  height: 100vh;
  width: 100vw;
  background: conic-gradient(
    at 50% 60%,
    rgb(50 56 92 / 27%),
    rgb(152 75 132 / 7%),
    rgb(150 75 152 / 4%),
    rgb(50 56 92 / 27%)
  );
  mix-blend-mode: color;
  pointer-events: none;
}

.audio-icon-button {
  border: 0.0625rem white solid;
  padding: 0.5rem;
  width: 2.265rem;
  height: 2.265rem;
  border-radius: 50%;
  background: transparent;
  position: fixed;
  right: 2rem;
  top: 2rem;
  z-index: 4200;

  aspect-ratio: 1;
  display: flex;
  gap: 0.125rem;
  align-items: center;
  justify-content: center;
  opacity: 0.5;
  transition: opacity 0.3s ease;

  @media (hover) {
    cursor: pointer;
    &:hover {
      opacity: 1;
    }
  }

  .bar {
    background: white;
    height: 1.5rem;
    width: 0.0825rem;

    &:nth-of-type(1),
    &:nth-of-type(5) {
      height: 0.5rem;
    }

    &:nth-of-type(2),
    &:nth-of-type(4) {
      height: 1rem;
    }
  }
}

@layer global {
  body {
    width: 100vw;
    height: 100vh;
    display: grid;
    place-items: center;
    background-color: var(--color-surface);
    color: var(--color-primary);
    position: absolute;
    inset: 0;
    perspective: 80vmax;
    margin: 0;
    overflow: hidden;

    &:before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 111;
      pointer-events: none;
      background: rgba(0, 0, 0, 0.1);
      mask: linear-gradient(
        black 10%,
        transparent 30%,
        transparent 70%,
        black 80%
      );
      backdrop-filter: blur(5vmin) invert(0);
    }
  }

  * {
    box-sizing: border-box;
  }
}

// center at bottom
a.labs-follow-me {
  left: 2rem;
  right: 2rem;
  bottom: 1rem;
  top: unset;
  text-align: center;
}
</style>
</head>
<body>
<div class="stars"></div>
<div class="stars-highlights"></div>
<div class="planets">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<div class="planets-2">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<div class="startails">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<div class="scene">
  <div class="sun"></div>
  <div class="planet"></div>
  <div class="planet-2"></div>
  <div class="planet-3"></div>
  <div class="planet-4"></div>
  <div class="planet-6"></div>
  <div class="planet-5">
    <div class="structure-1"></div>
    <div class="structure-2"></div>
    <div class="structure-3"></div>
  </div>
  <div class="human">
    <div class="neck"></div>
    <div class="head"></div>
    <div class="body">
      <div class="shoulder"></div>
      <div class="back"></div>
      <div class="hip">
        <div class="center"></div>
      </div>
    </div>
    <div class="leg left">
      <div class="knee"></div>
      <div class="lower"></div>
    </div>
    <div class="leg right">
      <div class="knee"></div>
      <div class="lower"></div>
    </div>
    <div class="arm left">
      <div class="hand"></div>
    </div>
    <div class="arm right">
      <div class="hand"></div>
    </div>
  </div>
  <div class="human shadow">
    <div class="neck"></div>
    <div class="head"></div>
    <div class="body">
      <div class="shoulder"></div>
      <div class="back"></div>
      <div class="hip">
        <div class="center"></div>
      </div>
    </div>
    <div class="leg left">
      <div class="knee"></div>
      <div class="lower"></div>
    </div>
    <div class="leg right">
      <div class="knee"></div>
      <div class="lower"></div>
    </div>
    <div class="arm left">
      <div class="hand"></div>
    </div>
    <div class="arm right">
      <div class="hand"></div>
    </div>
  </div>
  <div class="cuboid">
    <div class="object">
      <div class="body"></div>
    </div>
    <div class="top">
      <div class="outline"></div>
      <div class="outline"></div>
      <div class="outline"></div>
      <div class="outline"></div>
    </div>
    <div class="front"></div>
    <div class="right"></div>
  </div>
</div>
<button id="audiobutton" class="audio-icon-button">
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
</button>
<audio id="audio" loop src="https://www.learningandpracticing.com/wp-content/uploads/2024/05/No-child-left-behind.m4a"></audio>
<div class="highlight"></div>
<div class="color-filter"></div>
<svg class=filter xmlns="http://www.w3.org/2000/svg">
  <filter id="stars">
    <feTurbulence baseFrequency="0.275" />
    <feColorMatrix values="0 0 0 9 -5
                               0 0 0 9 -4
                               0 0 0 9 -5
                               0 0 0 0 1" />
  </filter>
  <filter id="stars-highlights">
    <feTurbulence baseFrequency="0.675" />
    <feColorMatrix values="0 0 0 9 -5
                               0 0 0 9 -4
                               0 0 0 9 -5
                               0 0 0 0 1" />
  </filter>

  <filter id="planet-structure">
    <feTurbulence baseFrequency="0.195" />
    <feColorMatrix values="0 0 0 1 -9
                               0 0 0 9 -1.5
                               0 0 0 2 -6
                               0 0 0 0 1" />
  </filter>
</svg>

<script>
  (() => {
    window.audiobutton.addEventListener('click', () => {
      if (window.audio.paused) {
        window.audio.play();
      } else {
        window.audio.pause();
      }
    });
  })();
</script>
</body>
</html>

Mi primer titulo

Mi segundo titulo

Mi tercer titulo