Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                - var code1 = ".retro { @mixin theme($color) { }\r\n.tower { width: calculate-width(3); }\r\n\r\n.tower { background: linear-gradient(to }\r\n.tower { right, $startColor, $endColor); }\r\n.hack-the-planet { font-size: 1.2rem; }\r\n\r\n.hack-the-planet { width: calculate-width(3); }\r\n\r\n.hack-the-planet { }\r\n\r\n.kode { margin: 0 auto; }\r\n.tower { @function calculate-width($size) { }\r\n.retro { width: calculate-width(3); }\r\n.synthwave { width: calculate-width(3); }\r\ndiv { margin: 0 auto; }\r\n\r\n.retro { @include theme(red); }\r\n.synthwave { height: calculate-width(2); }\r\n\r\n.kode { height: auto; }\r\n\r\n.retro { padding: 20px; }\r\n\r\ndiv { width: calculate-width(3); }\r\n.kode { @include theme(red); }\r\n.tower { color: $color; }\r\n\r\n.hack-the-planet { @include theme(red); }\r\n\r\n.synthwave { color: $color; }\r\n.hack-the-planet { background: }\r\n.hack-the-planet { linear-gradient(to right, $\r\nstartColor, $endColor); }\r\n.hack-the-planet { height: auto; }\r\n\r\n.kode { color: $color; }\r\n.tower { padding: 20px; }\r\n\r\n.retro { background: linear-gradient(to }\r\n\r\n.retro { right, $startColor, $endColor); }\r\n\r\n.synthwave { width: calculate-width(3); }\r\ndiv { height: auto; }\r\n\r\n.tower { height: auto; }\r\ndiv { @function calculate-width($size) { }\r\n\r\n.hack-the-planet { padding: 20px; }\r\n.synthwave { padding: 20px; }\r\n\r\ndiv { box-shadow: 0px 0px 15px }\r\n\r\ndiv { rgba(0,0,0,0.5); }\r\n\r\n.kode { box-shadow: 0px 0px 15px }\r\n\r\n.kode { rgba(0,0,0,0.5); }\r\n\r\ndiv { width: calculate-width(3); }\r\n.kode { width: calculate-width(3); }\r\n\r\n.synthwave { @include theme(red); }\r\n.hack-the-planet { @mixin theme($color) { }\r\n\r\n.tower { color: $color; }\r\n\r\n.retro { height: calculate-width(2); }\r\n.retro { margin: 0 auto; }\r\n\r\n.retro { font-size: 1.2rem; }\r\n\r\n.hack-the-planet { color: $color; }\r\n.synthwave { @function calculate-width($size) }\r\n.synthwave { { }\r\n.kode { padding: 20px; }\r\n\r\n.hack-the-planet { height: calculate-width(2); }\r\n\r\n.hack-the-planet { width: 100%; }\r\ndiv { @function calculate-width($size) { }\r\n\r\n.retro { height: calculate-width(2); }\r\ndiv { background: linear-gradient(to right, }\r\ndiv { $startColor, $endColor); }\r\n.hack-the-planet { height: }\r\n\r\n.hack-the-"
- var code2 = ".synthwave { @include gradient(#000, #fff); }\r\n\r\n.retro { @function scale($value, $factor) { }\r\n\r\n.kode { height: scale(1, 3); }\r\n\r\ndiv { height: scale(1, 3); }\r\n\r\ndiv { width: scale(1, 2); }\r\n\r\n.synthwave { box-shadow: 0 0 10px }\r\n.synthwave { rgba(0,0,0,0.3); }\r\ndiv { font-size: 1rem; }\r\n\r\n.kode { margin: 5px 10px; }\r\n.tower { @mixin gradient($from, $to) { }\r\n.kode { background: radial-gradient(circle, }\r\n\r\n.kode { $start, $end); }\r\n\r\n.synthwave { background: }\r\n.synthwave { radial-gradient(circle, $start, $\r\nend); }\r\n.retro { width: scale(1, 2); }\r\ndiv { padding: 15px; }\r\n.retro { @mixin gradient($from, $to) { }\r\n\r\ndiv { margin: 5px 10px; }\r\n\r\n.kode { height: scale(1, 3); }\r\n.tower { @include gradient(#000, #fff); }\r\ndiv { height: vh($value); }\r\n\r\n.kode { height: vh($value); }\r\n.retro { @mixin gradient($from, $to) { }\r\n.tower { width: percentage($fraction); }\r\n\r\n.retro { @mixin gradient($from, $to) { }\r\n\r\n.hack-the-planet { width: scale(1, 2); }\r\n\r\n.synthwave { color: adjust-hue($color, 15%); }\r\ndiv { width: scale(1, 2); }\r\n\r\n.hack-the-planet { height: vh($value); }\r\n\r\n.retro { height: scale(1, 3); }\r\n\r\n.hack-the-planet { box-shadow: 0 0 10px }\r\n\r\n.hack-the-planet { rgba(0,0,0,0.3); }\r\n\r\ndiv { padding: 15px; }\r\n\r\n.hack-the-planet { @include gradient(#000, }\r\n\r\n.hack-the-planet { #fff); }\r\n\r\n.retro { @function scale($value, $factor) { }\r\n.kode { margin: 5px 10px; }\r\n.tower { margin: 5px 10px; }\r\n.tower { background: radial-gradient(circle, }\r\n.tower { $start, $end); }\r\n.retro { width: percentage($fraction); }\r\n.hack-the-planet { margin: 5px 10px; }\r\ndiv { font-size: 1rem; }\r\ndiv { @include gradient(#000, #fff); }\r\n\r\ndiv { width: percentage($fraction); }\r\n.synthwave { box-shadow: 0 0 10px }\r\n.synthwave { rgba(0,0,0,0.3); }\r\n.tower { height: scale(1, 3); }\r\n\r\n.retro { height: vh($value); }\r\n.hack-the-planet { width: }\r\n\r\n.hack-the-planet { percentage($fraction); }\r\n\r\n.kode { background: radial-gradient(circle, }\r\n\r\n.kode { $start, $end); }\r\n\r\n.hack-the-planet { color: adjust-hue($color, }\r\n\r\n.hack-the-planet { 15%); }\r\n\r\n.tower { height: scale(1, 3); }\r\n\r\ndiv { @function scale($value, $factor) { }\r\n\r\n.kode { width: scale(1, 2); }\r\n.tower { width: scale(1, 2); }\r\ndiv { margin: 5px 10px; }\r\n.retro { color: adjust-hue($color, 15%); }\r\n.retro { @function scale($value, &#8203;``【oaicite:0】``&#8203;"
- var code3 = "synthwave(data)\r\nkode('param')\r\nretro(value=42)\r\nretro(value=42)\r\nsynthwave('param')\r\nretro('param')\r\nkode('param')\r\n\r\nretro(value=42)\r\nhack_the_planet(value=42)\r\nsynthwave('param')\r\nretro()\r\nkode()\r\nsynthwave(data)\r\nkode('param')\r\nhack_the_planet('param')\r\nhack_the_planet(data)\r\nsynthwave()\r\nhack_the_planet()\r\nretro(data)\r\n\r\nretro(data)\r\nkode()\r\nretro(data)\r\nhack_the_planet(value=42)\r\nhack_the_planet(data)\r\nkode(data)\r\nsynthwave(value=42)\r\n\r\nsynthwave(value=42)\r\n\r\nhack_the_planet()\r\n\r\nsynthwave('param')\r\nsynthwave('param')\r\nretro(data)\r\nretro(value=42)\r\nhack_the_planet()\r\nhack_the_planet(data)\r\n\r\nretro(data)\r\nsynthwave(data)\r\n\r\nsynthwave('param')\r\nsynthwave()\r\nkode(data)\r\nhack_the_planet(data)\r\nretro()\r\nkode()\r\nkode(data)\r\n\r\nsynthwave()\r\nretro(value=42)\r\nsynthwave(value=42)\r\n\r\nkode('param')\r\nretro(data)\r\nretro()\r\nretro(data)\r\nhack_the_planet(data)\r\n\r\nretro('param')\r\nretro('param')\r\nkode(value=42)\r\nhack_the_planet(data)\r\n\r\nsynthwave()\r\nhack_the_planet('param')\r\n\r\nretro(data)\r\nretro(dat synthwave(data)\r\nkode('param')\r\nretro(value=42)\r\nretro(value=42)\r\nsynthwave('param')\r\nretro('param')\r\nkode('param')\r\n\r\nretro(value=42)\r\nhack_the_planet(value=42)\r\nsynthwave('param')\r\nretro()\r\nkode()\r\nsynthwave(data)\r\nkode('param')\r\nhack_the_planet('param')\r\nhack_the_planet(data)\r\nsynthwave()\r\nhack_the_planet()\r\nretro(data)\r\n\r\nretro(data)\r\nkode()\r\nretro(data)\r\nhack_the_planet(value=42)\r\nhack_the_planet(data)\r\nkode(data)\r\nsynthwave(value=42)\r\n\r\nsynthwave(value=42)\r\n\r\nhack_the_planet()\r\n\r\nsynthwave('param')\r\nsynthwave('param')\r\nretro(data)\r\nretro(value=42)\r\nhack_the_planet()\r\nhack_the_planet(data)\r\n\r\nretro(data)\r\nsynthwave(data)\r\n\r\nsynthwave('param')\r\nsynthwave()\r\nkode(data)\r\nhack_the_planet(data)\r\nretro()\r\nkode()\r\nkode(data)\r\n\r\nsynthwave()\r\nretro(value=42)\r\nsynthwave(value=42)\r\n\r\nkode('param')\r\nretro(data)\r\nretro()\r\nretro(data)\r\nhack_the_planet(data)\r\n\r\nretro('param')\r\nretro('param')\r\nkode(value=42)\r\nhack_the_planet(data)\r\n\r\nsynthwave()\r\nhack_the_planet('param')\r\n\r\nretro(data)\r\nretro(dat"
- var code4 = "hack_the_planet(data)\r\nretro('param')\r\nretro('param')\r\nkode(value=42)\r\nhack_the_planet(data)\r\nsynthwave()\r\nhack_the_planet('param')\r\nretro(data)\r\nretro(data)\r\nsynthwave('param')\r\nhack_the_planet('param')\r\nretro(value=42)\r\nretro('param')\r\nretro('param')\r\nhack_the_planet('param')\r\n\r\nretro(value=42)\r\nhack_the_planet('param')\r\n\r\nhack_the_planet(value=42)\r\n\r\nretro(data)\r\nsynthwave('param')\r\nretro('param')\r\nhack_the_planet()\r\nkode(data)\r\n\r\nhack_the_planet(data)\r\nsynthwave()\r\nretro(value=42)\r\n\r\nkode()\r\n\r\nhack_the_planet(value=42)\r\n\r\nretro()\r\nkode(value=42)\r\nretro(value=42)\r\nsynthwave('param')\r\n\r\nkode(data)\r\nhack_the_planet(value=42)\r\nretro(value=42)\r\nretro(value=42)\r\n\r\nsynthwave(data)\r\nsynthwave('param')\r\nhack_the_planet()\r\nkode(data)\r\nhack_the_planet(data)\r\nsynthwave('param')\r\n\r\nretro()\r\nretro()\r\nhack_the_planet('param')\r\nkode()\r\nkode(value=42)\r\nretro()\r\nretro(data)\r\nretro(value=42)\r\nsynthwave()\r\nhack_the_planet(data)\r\nkode('param')\r\n\r\nhack_the_planet(value=42)\r\nkode(data)\r\nretro(value=42)\r\nhack_the_planet(data)\r\nretro('param')\r\nretro('param')\r\nkode(value=42)\r\nhack_the_planet(data)\r\nsynthwave()\r\nhack_the_planet('param')\r\nretro(data)\r\nretro(data)\r\nsynthwave('param')\r\nhack_the_planet('param')\r\nretro(value=42)\r\nretro('param')\r\nretro('param')\r\nhack_the_planet('param')\r\n\r\nretro(value=42)\r\nhack_the_planet('param')\r\n\r\nhack_the_planet(value=42)\r\n\r\nretro(data)\r\nsynthwave('param')\r\nretro('param')\r\nhack_the_planet()\r\nkode(data)\r\n\r\nhack_the_planet(data)\r\nsynthwave()\r\nretro(value=42)\r\n\r\nkode()\r\n\r\nhack_the_planet(value=42)\r\n\r\nretro()\r\nkode(value=42)\r\nretro(value=42)\r\nsynthwave('param')\r\n\r\nkode(data)\r\nhack_the_planet(value=42)\r\nretro(value=42)\r\nretro(value=42)\r\n\r\nsynthwave(data)\r\nsynthwave('param')\r\nhack_the_planet()\r\nkode(data)\r\nhack_the_planet(data)\r\nsynthwave('param')\r\n\r\nretro()\r\nretro()\r\nhack_the_planet('param')\r\nkode()\r\nkode(value=42)\r\nretro()\r\nretro(data)\r\nretro(value=42)\r\nsynthwave()\r\nhack_the_planet(data)\r\nkode('param')\r\n\r\nhack_the_planet(value=42)\r\nkode(data)\r\nretro(value=42)\r\n"
- var code5 = "█▀▀▀▀▀█ ▀▄▄▀▀ ▀ ▄ █▀▀▀▀▀█\r\n█ ███ █   ▀ ██▀ █ █ ███ █\r\n█ ▀▀▀ █  ▀▄▀▄▀█ █ █ ▀▀▀ █\r\n▀▀▀▀▀▀▀ █ █▄▀▄▀▄█ ▀▀▀▀▀▀▀\r\n▀▀▄▀█▄▀ ▄█▀▀█▄▄▄█▄▀▄▄▄▄▄▀\r\n▀█▄█ ▀▀█ ▄█▀█▀▄█▄ ▀▄▀█▄▄█\r\n▄██▄▄ ▀▄▄▀ ▄  ▄█▄ ▀ ▄  ▄▀\r\n█▀███▄▀▄█ ▀▄█  ▀ ▄▄▄▀██▀█\r\n▀ ▀ ▀▀▀▀▄▀▀▀ ▀ ▀█▀▀▀█ ██ \r\n█▀▀▀▀▀█  ██▀ █▄▄█ ▀ █  ▄▀\r\n█ ███ █ █ ▀▄▀ █▀███▀▀  ▄▄\r\n█ ▀▀▀ █ ▄▀ ▀▀ ▄▄  ▄▄█▀███\r\n▀▀▀▀▀▀▀ ▀ ▀ ▀   ▀▀▀  ▀  ▀"
- var list = [code1, code2, code3, code4]
- var t = 0
- var towerCount = 16
.scene
    while t < towerCount
        - t++
        .tower
            .face.top=code5
            .face.left(style="--face-delay: " + (Math.floor(Math.random() * 10) + 1))
                .content(style="--delay: " + (Math.floor(Math.random() * 5) + 1))
                    .c1=list[Math.floor(Math.random() * list.length)]
                    .c2=list[Math.floor(Math.random() * list.length)]
            .face.right(style="--face-delay: " + (Math.floor(Math.random() * 10) + 1))
                .content(style="--delay: 0")
                    .c1=list[Math.floor(Math.random() * list.length)]
                    //.c2=list[Math.floor(Math.random() * list.length)]
                    if t == 2
                        .c3
                            | @kdenerz 😎
            .face.front(style="--face-delay: " + (Math.floor(Math.random() * 10) + 1))
                .content(style="--delay: " + (Math.floor(Math.random() * 4) + 1))
                    .c1=list[Math.floor(Math.random() * list.length)]
                    .c2=list[Math.floor(Math.random() * list.length)]
            .face.back(style="--face-delay: " + (Math.floor(Math.random() * 10) + 1))
                .content(style="--delay: " + (Math.floor(Math.random() * 2) + 1))
                    .c1=list[Math.floor(Math.random() * list.length)]
                    .c2=list[Math.floor(Math.random() * list.length)]
            .face.bottom
    .light1
    .light2
    .light3
    .floor

              
            
!

CSS

              
                @use 'sass:math';

:root {
  --color-primary: #58C6A2;
  --color-secondary: #ee75d2;
  --color-tertiary: #deee75;
  --color-quaternary: #9375ee;
  --color-surface: black;

  --color-floor: #210c39;

  --color-axes-x: #deee75;
  --color-axes-y: #9375ee;
  --font-size: .1625rem; // todo move to settings
}


:root {
  --tp-base-background-color: var(--color-surface);
  --tp-base-shadow-color: hsla(0, 0%, 0%, 0.2);
  --tp-button-background-color: var(--color-secondary);
  --tp-button-background-color-active: hsla(230, 7%, 85%, 1.00);
  --tp-button-background-color-focus: hsla(230, 7%, 80%, 1.00);
  --tp-button-background-color-hover: hsla(230, 7%, 75%, 1.00);
  --tp-button-foreground-color: hsla(230, 7%, 17%, 1.00);
  --tp-container-background-color: hsla(230, 7%, 75%, 0.10);
  --tp-container-background-color-active: hsla(230, 7%, 75%, 0.25);
  --tp-container-background-color-focus: hsla(230, 7%, 75%, 0.20);
  --tp-container-background-color-hover: hsla(230, 7%, 75%, 0.15);
  --tp-container-foreground-color: hsla(230, 7%, 75%, 1.00);
  --tp-groove-foreground-color: hsla(230, 7%, 75%, 0.10);
  --tp-input-background-color: hsla(230, 7%, 75%, 0.10);
  --tp-input-background-color-active: hsla(230, 7%, 75%, 0.25);
  --tp-input-background-color-focus: hsla(230, 7%, 75%, 0.20);
  --tp-input-background-color-hover: hsla(230, 7%, 75%, 0.15);
  --tp-input-foreground-color: var(--color-primary);
  --tp-label-foreground-color: hsla(230, 7%, 75%, 0.70);
  --tp-monitor-background-color: hsla(230, 7%, 0%, 0.20);
  --tp-monitor-foreground-color: hsla(230, 7%, 75%, 0.70);
}

@property --scene-rotate-x {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}

@property --scene-rotate-y {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}

@property --scene-rotate-z {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}

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

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

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

.scene {
  display: grid;
  place-items: center;
  position: absolute;
  inset: 0;
  transform: rotateX(var(--scene-rotate-x, 0deg)) rotateY(var(--scene-rotate-y, 360deg)) rotateZ(var(--scene-rotate-z, 0deg)) translateX(var(--scene-translate-x, 0))  translateY(var(--scene-translate-y, 0)) translateZ(var(--scene-translate-z, 0));
  transform-style: preserve-3d;
  animation: fly var(--scene-animation-duration) infinite linear;
  pointer-events: none;
}


@keyframes fly {
  from {
    --scene-translate-x: 0;
    --scene-translate-y: 0;
    --scene-translate-z: 0;
  }

  1% {

    --scene-translate-y: -6.5000rem;
    --scene-translate-z: 4.000rem;
  }


  2% {
    --scene-rotate-x: -13deg;
    --scene-rotate-z: -6deg;
    --scene-translate-y: -5.5000rem;
    --scene-translate-z: 24.000rem;
  }

  3% {
    --scene-rotate-x: -13deg;
    --scene-rotate-z: -12deg;
    --scene-rotate-y: 0deg;
    --scene-translate-x: 0rem;
    --scene-translate-y: -5.5000rem;
    --scene-translate-z: 40.000rem;
  }

  4% {
    --scene-rotate-x: -15deg;
    --scene-rotate-y: -23deg;
    --scene-rotate-z: 15deg;
    --scene-translate-x: 15.5000rem;
    --scene-translate-y: -10.5000rem;
    --scene-translate-z: 43.500rem;
  }

  5% {
    --scene-rotate-x: -15.65deg;
    --scene-rotate-y: -93.91deg;
    --scene-rotate-z: -7.83deg;
    --scene-translate-x: 64.375rem;
    --scene-translate-y: 2.1875rem;
    --scene-translate-z: -2.1875rem;
  }

  5.1% {
    --scene-rotate-x: -15.65deg;
    --scene-rotate-y: -93.91deg;
    --scene-rotate-z: -7.83deg;
    --scene-translate-x: 69.375rem;
    --scene-translate-y: -2.1875rem;
    --scene-translate-z: -2.1875rem;
  }

  7%{
    --scene-rotate-x: 0deg;
    --scene-rotate-y: -281.91deg;
    --scene-rotate-z: -46.83deg;
    --scene-translate-x: 17.375rem;
    --scene-translate-y: -23.1875rem;
    --scene-translate-z: 10.1875rem;
  }

  8% {
    --scene-rotate-x: -15.65deg;
    --scene-rotate-y: -273.26deg;
    --scene-rotate-z: 0deg;
    --scene-translate-x: -32.375rem;
    --scene-translate-y: -6.75rem;
    --scene-translate-z: 2.12rem;
  }


  to {
    --scene-translate-x: 0;
    --scene-translate-y: 0;
    --scene-translate-z: 0;
  }
}

$count: 16;
@property --mask-size {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}


.face {
  display: grid;
  place-items: center;
  position: absolute;
  inset: 0;
  width: var(--tower-width);
  height: var(--tower-height);
  background: radial-gradient(at center, color-mix(in srgb, var(--color-primary), transparent 40%), rgba(0, 0, 0, .2));
  --border-color: color-mix(in srgb, var(--color-primary), transparent 60%);
  box-shadow: -1px -1px 1px var(--border-color);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, .5);
  overflow: clip;
  padding: .2rem;


  .content {
    line-height: calc(var(--font-size) * 2);
    text-shadow: none;
    position: absolute;
    inset: .2rem;

    .c1, .c2 {
      white-space: pre;
      position: absolute;
      inset: .25rem;
      animation: scroll-text calc(var(--delay) * 1s) linear infinite;
      clip-path: polygon(0% 0%, 100% 0%, 100% var(--mask-size), 0% var(--mask-size));
    }

    .c2 {
      animation-delay: calc(var(--delay) * .5s);
    }

    .c3 {
      position: absolute;
      left: 1.25rem;
      display: grid;
      place-items: center;
      color: color-mix(in srgb, var(--color-primary), white 50%);
      font-size: 0.2rem;
      top: 2.8rem;
      filter: saturate(0);
      transform: scaleX(-1);
    }

    &:after {
      content: '';
      position: absolute;
      left: -1rem;
      right: -1rem;
      top: 0;
      height: .125rem;
      opacity: 0;
      background: var(--color-primary);
      box-shadow: 0 0 .625rem rgba(255, 255, 255, .5);
      animation: move-bottom-top 3s ease infinite;
      animation-delay: calc(var(--face-delay) * .5s);
    }
  }

  @keyframes move-bottom-top {
    from {
      transform: translateY(1rem);
      opacity: 0;
    }
    50% {
      transform: translateY(var(--tower-height));
      opacity: 1;
    }
    to {
      transform: translateY(0);
      opacity: 0;
    }
  }

  @keyframes scroll-text {
    from {
      --mask-size: 50%;
    }
    50% {
      --mask-size: 100%;
    }
    51% {
      --mask-size: 0%;
    }

    to {
      --mask-size: 0%;
    }
  }

  &.front {
    transform: translateZ(var(--width-half));
  }

  &.back {
    transform: translateZ(var(--width-half-negative)) rotateY(180deg);
  }

  &.top {
    height: var(--tower-width);
    transform: translateY(var(--width-half-negative)) rotateX(90deg);
    white-space: pre;
    font-family: monospace;
  }

  &.bottom {
    height: var(--tower-width);
    transform: translateY(var(--tower-height)) translateZ(var(--width-half)) rotateX(-90deg);
    box-shadow: 0 0 10rem color-mix(in srgb, var(--color-primary), rgba(255, 255, 255, .5) 20%),
    0 0 1rem color-mix(in srgb, var(--color-primary), rgba(255, 255, 255, .5) 20%),
    0 0 4rem color-mix(in srgb, var(--color-primary), transparent 80%);
    background: transparent;
    transform-origin: top;
  }

  &.right {
    transform: translateX(var(--width-half)) rotateY(90deg);
  }

  &.left {
    transform: translateX(var(--width-half-negative)) rotateY(-90deg);
  }
}

.face {
  font-size: var(--font-size);
}

@keyframes fade-in-out {
  from {
    opacity: 1;
  }
  50% {
    opacity: .8;
  }
  51% {
    opacity: 0;
  }
  to {
    opacity: 0;
  }
}

@keyframes fade-in-out-2 {
  from {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  55% {
    opacity: .8;
  }
  to {
    opacity: 1;
  }
}


.tower {
  --width-half: calc(var(--tower-width) / 2);
  --height-half: calc(var(--tower-height) / 2);
  --width-half-negative: calc(var(--width-half) * -1);
  --height-half-negative: calc(var(--height-half) * -1);
  transform-style: preserve-3d;
  transform: translateX(var(--x)) translateY(calc(var(--tower-height) * -1)) translateZ(calc(var(--y) + var(--width-half)));
  pointer-events: all;
  position: absolute;
  $i: 0;
  $half: $count / 4;
  $quarter: $half / 2;
  @for $x from 0 through $half - 1 {
    @for $y from 0 through $half - 1 {
      &:nth-child(#{$i + 1}) {
        --i: #{$i};
        --x: calc((#{$x - ($half / 2)}) * var(--tower-width) - (var(--tower-gap) * #{$quarter}) + (var(--tower-gap) / 2) + (var(--tower-gap) * #{$x}));
        --y: calc((#{$y - ($half / 2)}) * var(--tower-width) - (var(--tower-gap) * #{$quarter}) + (var(--tower-gap) / 2) + (var(--tower-gap) * #{$y}));
      }
      $i: $i + 1;
    }
  }
}


@function floor-grid($color, $thickness) {
  @return repeating-linear-gradient(0deg, $color 0, $color $thickness, transparent $thickness, transparent var(--floor-tile-size, 1rem)),
  repeating-linear-gradient(90deg, $color 0, $color $thickness, transparent $thickness, transparent var(--floor-tile-size, 1rem)),
}

@function floor-spotlight($color: black) {
  @return radial-gradient(at center, transparent, $color var(--floor-spotlight, 60%));
}


@function axe-x($color: white) {
  @return linear-gradient(to right, $color, $color) no-repeat center calc(50% - var(--axes-width) / 2) / auto var(--axes-width);
}

@function axe-z($color: white) {
  @return linear-gradient(to bottom, $color, $color) no-repeat center calc(50% - var(--axes-width) / 2) / var(--axes-width) auto;
}

@function axe-y($color: white) {
  @return axe-x($color);
}

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


@mixin light_base {
  position: absolute;
  --glow: color-mix(in srgb, var(--color-primary), rgba(255,255,255,.2) 70%);
  background: var(--color-primary);
  box-shadow: -2px -2px 5px var(--glow),0 0 15px var(--glow), 2px 2px 5px var(--glow);
  border-radius: 100%;
  transform-style: preserve-3d;
  opacity: 0;
  animation: light 4s ease infinite;
}

.light1 {
  @include light_base;
  height: 6rem;
  width: .25rem;
  transform: translateX(1rem) translateY(calc(var(--floor-translate-y, 0rem) - .1rem)) translateZ(calc(-20rem + var(--light))) rotateX(90deg);
}

.light2 {
  @include light_base;
  height: .15rem;
  width: 3rem;
  transform: translateX(calc(-20rem + var(--light))) translateY(calc(var(--floor-translate-y, 0rem) - .1rem)) translateZ(12rem) rotateX(90deg);
  animation-delay: 1s;
  animation-duration: 5s;
  --max: 55rem;
}

.light3 {
  @include light_base;
  height: .15rem;
  width: 4rem;
  transform: translateX(calc(-20rem + var(--light))) translateY(calc(var(--floor-translate-y, 0rem) - .1rem)) translateZ(-1rem) rotateX(90deg);
  animation-delay: .2s;
  animation-duration: 6s;
  --max: 65rem;
}


@keyframes light {
  from {
    --light: 0;
    opacity: 0;
  }
  2% {
    opacity: 1;
  }

  10% {
    --light: var(--max, 40rem);
    opacity: 0;
  }
  11% {
    opacity: 0;
  }

  to {
    opacity: 0;
    --light: var(--max, 40rem);
  }
}



.floor {
  position: absolute;
  inset: var(--floor-size, -50rem);
  background: axe-x(var(--color-axes-x)), axe-z(var(--color-axes-z)), floor-spotlight(), floor-grid(var(--color-floor), .2rem);
  transform-style: preserve-3d;
  transform: rotateX(var(--floor-rotate-x, 90deg)) translateZ(var(--floor-translate-y, 0rem));
  pointer-events: all;

  &:after {
    pointer-events: none;
    content: '';
    position: absolute;
    inset: 0;
    background: axe-y(var(--color-axes-y, 1px));
    backface-visibility: visible;
    transform: rotateZ(90deg) rotateY(90deg);
    transform-style: preserve-3d;
    animation: rotate-axe-y var(--scene-animation-duration) infinite linear;
    @keyframes rotate-axe-y {
      to {
        transform: rotateZ(360deg) rotateY(90deg);
      }
    }
  }
}


body {
  width: 100vw;
  height: 100vh;
  display: grid;
  place-items: center;
  background: var(--color-surface);
  margin: 0;
  color: var(--color-primary);
  perspective: var(--perspective, 800px);
  font-family: Silkscreen, 'SF Mono', 'Courier New', 'monospace';
  overflow: clip;
  pointer-events: all;
  user-select: none;
  &:after {
    content: "";
    position: absolute;
    background: url(https://assets.codepen.io/907471/noise.svg);
    mix-blend-mode: lighten;
    inset: 0;
    pointer-events: none;
    opacity: .5;
    filter: invert(1) brightness(0.1);
    z-index: var(--labs-sys-z-noise);
  }
}

a.labs-follow-me-twitter {
  position: absolute;
  left: auto;
  right: auto;
  display: grid;
  place-items: center;
  top: unset;
  bottom: 4rem;
  backdrop-filter: blur(1rem);
}

* {
  box-sizing: border-box;
}

              
            
!

JS

              
                import {Pane} from 'https://cdn.skypack.dev/tweakpane';

// https://tweakpane.github.io/docs/quick-tour/
const pane = new Pane({title: "Debug", expanded: false});

const config = {
    global: {
        colorPrimary: '#58C6A2',
        colorSecondary: '#ee75d2',
        colorSurface: '#000000',
    },
    scene: {
        perspective: 50,
        speed: 220,
        play: true,
        rotateX: -24,
        rotateY: 0,
        rotateZ: 0,
        translateX: 0,
        translateY: 0,
        translateZ: 0,
        axesWidth: 0.125,
        axes: false,
        xAxe: '#deee75',
        yAxe: '#9375ee',
        zAxe: '#ee75ec',
    },
    floor: {
        rotateX: 90,
        translateY: 0,
        gap: 0.455,
        spotlight: 42,
        size: 4
    },
    tower: {
        height: 10,
        width: 4,
        gap: 7.6250
    }
}

const prop = (name, value) => {
    document.documentElement.style.setProperty(`--${name}`, value);
}

const global = pane.addFolder({title: 'Global', expanded: false});
global.addBinding(config.global, 'colorPrimary').on('change', ({value}) => prop('color-primary', value));
global.addBinding(config.global, 'colorSecondary').on('change', ({value}) => prop('color-secondary', value));
global.addBinding(config.global, 'colorSurface').on('change', ({value}) => prop('color-surface', value));
const scene = pane.addFolder({title: 'Scene', expanded: false});

scene.addBinding(config.scene, 'play')
    .on('change', ({value}) => prop('scene-animation-duration', value ? `${config.scene.speed}s` : '0'));
scene.addBinding(config.scene, 'perspective', {min: 0, max: 75, step: 0.0625})
    .on('change', ({value, target}) => prop(target.key, `${value}rem`));
scene.addBinding(config.scene, 'speed', {min: 0, max: 240, step: 1})
    .on('change', ({value}) => prop('scene-animation-duration', config.scene.play ? `${value}s` : '0'));
scene.addBinding(config.scene, 'rotateX', {min: -360, max: 360, step: .01})
    .on('change', ({value}) => prop('scene-rotate-x', `${value}deg`));
scene.addBinding(config.scene, 'rotateY', {min: -360, max: 360, step: .01})
    .on('change', ({value}) => prop('scene-rotate-y', `${value}deg`));
scene.addBinding(config.scene, 'rotateZ', {min: -360, max: 360, step: .01})
    .on('change', ({value}) => prop('scene-rotate-z', `${value}deg`));

scene.addBinding(config.scene, 'translateX', {min: -100, max: 100, step: .0625})
    .on('change', ({value}) => prop('scene-translate-x', `${value}rem`));
scene.addBinding(config.scene, 'translateY', {min: -100, max: 100, step: .0625})
    .on('change', ({value}) => prop('scene-translate-y', `${value}rem`));
scene.addBinding(config.scene, 'translateZ', {min: -100, max: 100, step: .0625})
    .on('change', ({value}) => prop('scene-translate-z', `${value}rem`));


scene.addBinding(config.scene, 'axesWidth', {min: 0, max: .625, step: .0625})
    .on('change', ({value}) => prop('axes-width', `${value}rem`));
scene.addBinding(config.scene, 'xAxe').on('change', ({value}) => prop('color-axes-x', config.scene.axes ? value : 'transparent'));
scene.addBinding(config.scene, 'yAxe').on('change', ({value}) => prop('color-axes-y', config.scene.axes ? value : 'transparent'));
scene.addBinding(config.scene, 'zAxe').on('change', ({value}) => prop('color-axes-z', config.scene.axes ? value : 'transparent'));

scene.addBinding(config.scene, 'axes')
    .on('change', ({value}) => {
        prop('color-axes-x', value ? config.scene.xAxe : 'transparent');
        prop('color-axes-y', value ? config.scene.yAxe : 'transparent');
        prop('color-axes-z', value ? config.scene.zAxe : 'transparent');
    });

const floor = pane.addFolder({title: 'Floor', expanded: false});

// floor
floor.addBinding(config.floor, 'rotateX', {min: -360, max: 360, step: 1})
    .on('change', ({value}) => prop('floor-rotate-x', `${value}deg`));
floor.addBinding(config.floor, 'translateY', {min: -20, max: 20, step: .5})
    .on('change', ({value}) => prop('floor-translate-y', `${value}rem`));
floor.addBinding(config.floor, 'gap', {min: 0, max: 20, step: .065})
    .on('change', ({value}) => prop('floor-tile-size', `${value}rem`));
floor.addBinding(config.floor, 'spotlight', {min: 0, max: 100, step: 1})
    .on('change', ({value}) => prop('floor-spotlight', `${value}%`));
floor.addBinding(config.floor, 'size', {min: -100, max: 100, step: 1})
    .on('change', ({value}) => prop('floor-size', `-${value}rem`));

// tower
const tower = pane.addFolder({title: 'Tower', expanded: false});
tower.addBinding(config.tower, 'height', {min: 0, max: 50, step: .0625})
    .on('change', ({value}) => prop('tower-height', `${value}rem`));
tower.addBinding(config.tower, 'width', {min: 0, max: 50, step: .0625})
    .on('change', ({value}) => prop('tower-width', `${value}rem`));
tower.addBinding(config.tower, 'gap', {min: 0, max: 50, step: .0625})
    .on('change', ({value}) => prop('tower-gap', `${value}rem`));


// apply values from config
Object.keys(config).forEach(section => {
    Object.keys(config[section]).forEach(key => {
        const value = config[section][key];
        config[section][key] = undefined;
        pane.refresh();
        config[section][key] = value;
    });
});

pane.refresh();

              
            
!
999px

Console