Glitch Elements

Link to article: Glitch Elements.

Module Styles

• 
  @import url("https://nu-scptheme.github.io/Black-Highlighter/stable/styles/normalize.min.css");
  @import url("https://nu-scptheme.github.io/Black-Highlighter/stable/styles/black-highlighter.min.css");
  

• 
  @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Audiowide&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=DotGothic16&display=swap');
  
  :root {
    /*Link Style Variables*/
    --style01-link-deco: inherit;
    --style01-link-color: inherit;
  
    --style02-link-deco: none;
    --style02-link-color: green;
  
    --style03-link-deco: none;
    --style03-link-color: inherit;
  
    --style04-link-deco: none;
    --style04-link-color: inherit;
  
    --style05-link-deco: none;
    --style05-link-color: inherit;
  
  
  
    /*Plaintext Style Variables*/
    --style01-plain-font: inherit;
    --style01-plain-weight: inherit;
    --style01-plain-size: inherit;
    --style01-plain-color: inherit;
    --style01-plain-bgcolor: inherit;
  
    --style02-plain-font:  'Orbitron', sans-serif;
    --style02-plain-weight: inherit;
    --style02-plain-size: inherit;
    --style02-plain-color: inherit;
    --style02-plain-bgcolor: inherit;
  
    --style03-plain-font: "Audiowide", sans-serif;
    --style03-plain-weight: inherit;
    --style03-plain-size: inherit;
    --style03-plain-color: inherit;
    --style03-plain-bgcolor: inherit;
  
    --style04-plain-font: "Press Start 2P", system-ui;
    --style04-plain-weight: 700;
    --style04-plain-size: inherit;
    --style04-plain-color: inherit;
    --style04-plain-bgcolor: inherit;
  
    --style05-plain-font: "DotGothic16", sans-serif;
    --style05-plain-weight: bold;
    --style05-plain-size: inherit;
    --style05-plain-color: inherit;
    --style05-plain-bgcolor: inherit;
  
  
  
    /*Animation Style Variables ("mult" = multipliers to the base values)*/
    --anim01-duration-mult: 1;
    --anim01-before-duration-mult: 1;
    --anim01-after-duration-mult: 1;
    --anim01-translate-mult: 1;
  
    --anim02-base-duration-mult: 1;
    --anim02-before-duration-mult: 1;
    --anim02-after-duration-mult: 1;
    --anim02-translate-mult: 1;
  
    --anim03-base-duration-mult: 1;
    --anim03-before-duration-mult: 1;
    --anim03-after-duration-mult: 1;
    --anim03-before-color: #e0287d;
    --anim03-after-color: #1bc7fb;
  
    --anim04-before-duration-mult: 1;
    --anim04-after-duration-mult: 1;
    --anim04-translate-mult: 1;
  
    --anim05-duration-mult: 1;
  }
  
  
  /*===================================*/
  
  
  .style01-link:link, .style01-link:visited, .style01-link:hover, .style01-link:active {
    text-decoration: var(--style01-link-deco);  
    color: var(--style01-link-color);
  }
  
  .style02-link:link, .style02-link:visited, .style02-link:hover, .style02-link:active {
    text-decoration: var(--style02-link-deco);  
    color: var(--style02-link-color);
  }
  
  .style03-link:link, .style03-link:visited, .style03-link:hover, .style03-link:active {
    text-decoration: var(--style03-link-deco);  
    color: var(--style03-link-color);
  }
  
  .style04-link:link, .style04-link:visited, .style04-link:hover, .style04-link:active {
    text-decoration: var(--style04-link-deco);  
    color: var(--style04-link-color);
  }
  
  .style05-link:link, .style05-link:visited, .style05-link:hover, .style05-link:active {
    text-decoration: var(--style05-link-deco);  
    color: var(--style05-link-color);
  }
  
  
  /*===================================*/
  
  
  .style01-plaintext {
    font-family: var(--style01-plain-font);
    font-weight: var(--style01-plain-weight);
    font-size: var(--style01-plain-size);
    color: var(--style01-plain-color);
  
    padding-left: 0.0ch;
    padding-right: 0.0ch;
  }
  
  .style02-plaintext {
    font-family: var(--style02-plain-font);
    font-weight: var(--style02-plain-weight);
    font-size: var(--style02-plain-size);
    color: var(--style02-plain-color);
  
    padding-left: 0.0ch;
    padding-right: 0.0ch;
  }
  
  .style03-plaintext {
    font-family: var(--style03-plain-font);
    font-weight: var(--style03-plain-weight);
    font-size: var(--style03-plain-size);
    color: var(--style03-plain-color);
  
    padding-left: 0.0ch;
    padding-right: 0.0ch;
  }
  
  .style04-plaintext {
    font-family: var(--style04-plain-font);
    font-weight: var(--style04-plain-weight);
    font-size: var(--style04-plain-size);
    color: var(--style04-plain-color);
  
    padding-left: 0.0ch;
    padding-right: 0.0ch;
  }
  
  .style05-plaintext {
    font-family: var(--style05-plain-font);
    font-weight: var(--style05-plain-weight);
    font-size: var(--style05-plain-size);
    color: var(--style05-plain-color);
  
    padding-left: 0.0ch;
    padding-right: 0.0ch;
  }
  
  
  /*===================================*/
  
  
  span.style01-plaintext { background: var(--style01-plain-bgcolor); }
  span.style02-plaintext { background: var(--style02-plain-bgcolor); }
  span.style03-plaintext { background: var(--style03-plain-bgcolor); }
  span.style04-plaintext { background: var(--style04-plain-bgcolor); }
  span.style05-plaintext { background: var(--style05-plain-bgcolor); }
  
  
  
  
  
  
  
  .animation01, .animation01-hover:hover,
  .animation02, .animation02-hover:hover,
  .animation03, .animation03-hover:hover,
  .animation04, .animation04-hover:hover {
    position: relative;
    white-space: nowrap;
    display: inline-block;  
  }
  
  .animation01::before, .animation01::after, .animation01-hover:hover::before, .animation01-hover:hover::after,
  .animation02::before, .animation02::after, .animation02-hover:hover::before, .animation02-hover:hover::after,
  .animation03::before, .animation03::after, .animation03-hover:hover::before, .animation03-hover:hover::after,
  .animation04::before, .animation04::after, .animation04-hover:hover::before, .animation04-hover:hover::after {
    content: var(--content);
    position: absolute;
    bottom: 0rem;
    left: 0;  
  }
  
  
  /*===================================*/
  
  
  .animation01, .animation01-hover:hover {}
  
  .animation01::before, .animation01-hover:hover::before {
      clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
  }
  
  .animation01::after, .animation01-hover:hover::after {
      clip-path: polygon(0 68%, 100% 68%, 100% 100%, 0 100%);
  }
  
  .animation01::before, .animation01::after, .animation01-hover:hover::before, .animation01-hover:hover::after {}
  
  
  /*===================================*/
  
  
  .animation02, .animation02-hover:hover {}
  
  .animation02::before, .animation02-hover:hover::before {
    clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
    opacity: 0.8;
  
    transform: translate(
      calc(-0.025em * var(--anim02-translate-mod)), 
      calc(-0.0125em * 1)
    );
  }
  
  .animation02::after, .animation02-hover:hover::after {
    clip-path: polygon(0 80%, 100% 20%, 100% 100%, 0 100%);
    opacity: 0.8;
  
    transform: translate(
      calc(0.0125em * var(--anim02-translate-mod)), 
      calc(0.025em * 1)
    );
  }
  
  .animation02::before, .animation02::after, .animation02-hover:hover::before, .animation02-hover:hover::after {}
  
  
  /*===================================*/
  
  
  .animation03, .animation03-hover:hover {}
  
  .animation03::before, .animation03-hover:hover::before {
    top: 10px;
    left: 15px;
    color: var(--anim03-before-color);
  }
  
  .animation03::after, .animation03-hover:hover::after {
    top: 5px;
    left: -10px;
    color: var(--anim03-after-color);
  }
  
  .animation03::before, .animation03::after,
  .animation03-hover:hover::before, .animation03-hover:hover::after {
    width: 110%;
    z-index: -1;  
  }
  
  
  /*===================================*/
  
  
  .animation04, .animation04-hover:hover {}
  
  .animation04::before, .animation04-hover:hover::before {
    left: 2px;
    color: #192941;
    text-shadow: -1px 0 #0ff;
    clip: rect(0, 400%, 0, 0);
  }
  
  .animation04::after, .animation04-hover:hover::after {
    left: -2px;
    color: darken(#01A8FF, 33%);
    text-shadow: 3px 0 #FF28D7;
    clip: rect(0, 400%, 0, 0);
  }
  
  .animation04::before, .animation04::after, .animation04-hover:hover::before, .animation04-hover:hover::after {}
  
  
  /*===================================*/
  
  
  .animation05, .animation05-hover:hover {
    position: relative;
    display: inline-block;  
  }
  
  .animation05::before, .animation05-hover:hover::before {}
  
  .animation05::after, .animation05-hover:hover::after {}
  
  .animation05::before, .animation05::after,
  .animation05-hover:hover::before, .animation05-hover:hover::after {}
  
  
  
  
  
  @media not (prefers-reduced-motion) {
  
    .animation01, .animation01-hover:hover {
      animation: ge-anim01-base calc(300ms * var(--anim01-duration-mult)) linear infinite;
    }
  
    .animation01::before, .animation01-hover:hover::before {
      animation: ge-anim01-top calc(1s * var(--anim01-before-duration-mult)) linear infinite;
    }
  
    .animation01::after, .animation01-hover:hover::after {
      animation: ge-anim01-bottom calc(1s * var(--anim01-after-duration-mult)) linear infinite;
    }
  
  
  /*===================================*/
  
  
    .animation02, .animation02-hover:hover {
      animation: ge-anim02 calc(500ms * var(--anim02-base-duration-mult)) infinite;
    }
  
    .animation02::before, .animation02-hover:hover::before {
      animation: ge-anim02 calc(650ms * var(--anim02-before-duration-mult)) infinite;
    }
  
    .animation02::after, .animation02-hover:hover::after {
      animation: ge-anim02 calc(375ms * var(--anim02-after-duration-mult)) infinite;
    }
  
  
  /*===================================*/
  
  
    .animation03, .animation03-hover:hover {
      animation: ge-anim03-paths calc(5s * var(--anim03-base-duration-mult)) step-end infinite;
    }
  
    .animation03::before, .animation03-hover:hover::before {
      animation:
        ge-anim03-paths calc(5s * var(--anim03-before-duration-mult)) step-end infinite,
        ge-anim03-opacity calc(5s * var(--anim03-before-duration-mult)) step-end infinite,
        ge-anim03-font calc(8s * var(--anim03-before-duration-mult)) step-end infinite,
        ge-anim03-movement calc(10s * var(--anim03-before-duration-mult)) step-end infinite;
    }
  
    .animation03::after, .animation03-hover:hover::after {
      animation:
        ge-anim03-paths calc(5s * var(--anim03-after-duration-mult)) step-end infinite,
        ge-anim03-opacity calc(5s * var(--anim03-after-duration-mult)) step-end infinite,
        ge-anim03-font calc(7s * var(--anim03-after-duration-mult)) step-end infinite,
        ge-anim03-movement calc(8s * var(--anim03-after-duration-mult)) step-end infinite;
    }
  
  
  /*===================================*/
  
  
    .animation04::before, .animation04-hover:hover::before {
      animation: ge-anim04-1 calc(4s * var(--anim04-before-duration-mult)) linear alternate-reverse infinite;
    }
  
    .animation04::after, .animation04-hover:hover::after {
      animation: ge-anim04-2 calc(2s * var(--anim04-after-duration-mult)) linear alternate-reverse infinite .2s;
    }
  
  
  /*===================================*/
  
  
    .animation05, .animation05-hover:hover {
      animation: ge-anim05 calc(5s * var(--anim05-duration-mult)) step-end infinite;
    }
  
  }
  
  
  @media (prefers-reduced-motion) {
  
    .animation01, .animation01-hover:hover {
      transform: translate(calc(-0.025em * var(--anim01-translate-mod)), calc(-0.025em * var(--anim01-translate-mod))) skew(0deg); 
    }
  
    .animation01::before, .animation01-hover:hover::before {
      transform: translate(calc(15% * var(--anim01-translate-mod)), calc(0.5% * var(--anim01-translate-mod))) skew(-15deg);
    }
  
    .animation01::after, .animation01-hover:hover::after {
      transform: translate(calc(-10% * var(--anim01-translate-mod)), calc(1% * var(--anim01-translate-mod))) skew(35deg);
    }
  
  
  /*===================================*/
  
  
    .animation02, .animation02-hover:hover {}
  
    .animation02::before, .animation02-hover:hover::before {
      text-shadow:
        0.025em 0.05em 0 rgba(255, 0, 0, 0.75),
        0.05em 0 0 rgba(0, 255, 0, 0.75),
        0 -0.05em 0 rgba(0, 0, 255, 0.75);
    }
  
    .animation02::after, .animation02-hover:hover::after {
      text-shadow:
        0.025em 0.05em 0 rgba(255, 0, 0, 0.75),
        0.05em 0 0 rgba(0, 255, 0, 0.75),
        0 -0.05em 0 rgba(0, 0, 255, 0.75);
    }
  
  
  /*===================================*/
  
  
    .animation03, .animation03-hover:hover {}
  
    .animation03::before, .animation03-hover:hover::before {
      clip-path: polygon(0% 26%, 15% 26%, 15% 73%, 72% 73%, 72% 70%, 77% 70%, 77% 75%, 8% 75%, 8% 42%, 4% 42%, 4% 61%, 17% 61%, 17% 12%, 26% 12%, 26% 63%, 73% 63%, 73% 43%, 90% 43%, 90% 67%, 50% 67%, 50% 41%, 42% 41%, 42% 46%, 50% 46%, 50% 84%, 96% 84%, 96% 78%, 49% 78%, 49% 25%, 63% 25%, 63% 14%);
  
      opacity: 0.7;
  
      font-weight: 100; color: #e0287d; filter: blur(3px);
    }
  
    .animation03::after, .animation03-hover:hover::after {
      clip-path: polygon(0% 26%, 15% 26%, 15% 73%, 72% 73%, 72% 70%, 77% 70%, 77% 75%, 8% 75%, 8% 42%, 4% 42%, 4% 61%, 17% 61%, 17% 12%, 26% 12%, 26% 63%, 73% 63%, 73% 43%, 90% 43%, 90% 67%, 50% 67%, 50% 41%, 42% 41%, 42% 46%, 50% 46%, 50% 84%, 96% 84%, 96% 78%, 49% 78%, 49% 25%, 63% 25%, 63% 14%);
  
      opacity: 0.7;
  
      font-weight: 100; color: #e0287d; filter: blur(3px);
    }
  
  
  /*===================================*/
  
  
    .animation04::before, .animation04-hover:hover::before {
      opacity: 1;
      transform: translate3d(calc(-1 * var(--gap-horizontal)),0,0);
      -webkit-clip-path: polygon(0 25%, 100% 25%, 100% 45%, 0 45%);
      clip-path: polygon(0 25%, 100% 25%, 100% 45%, 0 45%);
    }
  
    .animation04::after, .animation04-hover:hover::after {
      opacity: 1;
      transform: translate3d(calc(-1 * var(--gap-horizontal)),0,0);
      -webkit-clip-path: polygon(0 25%, 100% 25%, 100% 45%, 0 45%);
      clip-path: polygon(0 25%, 100% 25%, 100% 45%, 0 45%);
    }
  
  
  /*===================================*/
  
  
    .animation05, .animation05-hover:hover {
      clip-path: polygon(81% 79%, 25% 5%, 84% 4%, 40% 54%, 81% 17%, 88% 88%, 30% 25%, 46% 6%, 11% 90%, 7% 47%, 67% 2%, 92% 91%, 12% 33%, 76% 75%, 14% 92%, 91% 6%, 85% 60%, 36% 84%, 58% 50%, 43% 53%, 19% 71%, 5% 84%, 83% 11%, 70% 62%, 1% 34%, 87% 11%, 45% 32%, 53% 0%, 73% 6%, 35% 53%, 71% 42%, 12% 51%, 22% 79%, 79% 84%, 3% 7%, 84% 16%, 16% 52%, 81% 92%, 12% 66%, 12% 65%, 43% 89%, 48% 63%, 32% 75%, 1% 40%, 49% 1%, 32% 68%, 42% 33%, 62% 93%, 98% 73%, 46% 48%);
    }
  
  }
  
  
  
  
  
  
  
  
  
  
  
  
  @keyframes ge-anim01-base {
    0%    { 
      transform: translate(
        calc(-0.05em * var(--anim01-translate-mult)), 
        calc(-0.025em * var(--anim01-translate-mult))
      ) skew(0deg); 
    }
    14%   { 
      transform: translate(
        calc(-0.05em * var(--anim01-translate-mult)), 
        calc(-0.025em * var(--anim01-translate-mult))
      ) skew(0deg); 
    }
    15%   { 
      transform: translate(
        calc(0.025em * var(--anim01-translate-mult)), 
        calc(0.025em * var(--anim01-translate-mult))
      ) skew(0deg); 
    }
    49%   { 
      transform: translate(
        calc(0.025em * var(--anim01-translate-mult)), 
        calc(0.025em * var(--anim01-translate-mult))
      ) skew(5deg); 
    }
    50%   { 
      transform: translate(
        calc(0.05em * var(--anim01-translate-mult)), 
        0
      ) skew(5deg); 
    }
    99%   { 
      transform: translate(
        calc(0.05em * var(--anim01-translate-mult)), 
        0
      ) skew(0deg); 
    }
    100%  { 
      transform: translate(
        calc(-0.025em * var(--anim01-translate-mult)), 
        calc(-0.025em * var(--anim01-translate-mult))
      ) skew(0deg); 
    }
  }
  
  @keyframes ge-anim01-top {
    2%, 64% { 
      transform: translate(
        calc(-1% * var(--anim01-translate-mult)), 
        calc(-1% * var(--anim01-translate-mult))
      ); 
    }
    4%, 60% { 
      transform: translate(
        calc(1% * var(--anim01-translate-mult)), 
        calc(-1% * var(--anim01-translate-mult))
      ); 
    }
    62% { 
      transform: translate(
        calc(15% * var(--anim01-translate-mult)), 
        calc(0.5% * var(--anim01-translate-mult))
      ) skew(-15deg); 
    }
  }
  
  @keyframes ge-anim01-bottom {
    2%, 64% {  
      transform: translate(calc(-1% * var(--anim01-translate-mult)), 0); 
    }
    4%, 60% {  
      transform: translate(calc(-1% * var(--anim01-translate-mult)), 0); 
    }
    62% {  
      transform: translate(
        calc(-10% * var(--anim01-translate-mult)),
        calc(1% * var(--anim01-translate-mult))
      ) skew(35deg); 
    }
  }
  
  
  /*===================================*/
  
  
  @keyframes ge-anim02 {
    0% { 
      text-shadow:
        0.05em 0 0 rgba(255, 0, 0, 0.75),
        -0.05em -0.025em 0 rgba(0, 255, 0, 0.75),
        -0.025em 0.05em 0 rgba(0, 0, 255, 0.75);
    }
    14% { 
      text-shadow:
        0.05em 0 0 rgba(255, 0, 0, 0.75),
        -0.05em -0.025em 0 rgba(0, 255, 0, 0.75),
        -0.025em 0.05em 0 rgba(0, 0, 255, 0.75);
    }
    15% {  
      text-shadow:
        -0.05em -0.025em 0 rgba(255, 0, 0, 0.75),
        0.025em 0.025em 0 rgba(0, 255, 0, 0.75),
        -0.05em -0.05em 0 rgba(0, 0, 255, 0.75);
    }
    49% {  
      text-shadow:
        -0.05em -0.025em 0 rgba(255, 0, 0, 0.75),
        0.025em 0.025em 0 rgba(0, 255, 0, 0.75),
        -0.05em -0.05em 0 rgba(0, 0, 255, 0.75);
    }
    50% {  
      text-shadow:
        0.025em 0.05em 0 rgba(255, 0, 0, 0.75),
        0.05em 0 0 rgba(0, 255, 0, 0.75),
        0 -0.05em 0 rgba(0, 0, 255, 0.75);
    }
    99% {  
      text-shadow:
        0.025em 0.05em 0 rgba(255, 0, 0, 0.75),
        0.05em 0 0 rgba(0, 255, 0, 0.75),
        0 -0.05em 0 rgba(0, 0, 255, 0.75);
    }
    100% {  
      text-shadow:
        -0.025em 0 0 rgba(255, 0, 0, 0.75),
        -0.025em -0.025em 0 rgba(0, 255, 0, 0.75),
        -0.025em -0.05em 0 rgba(0, 0, 255, 0.75);
    }
  }
  
  
  /*===================================*/
  
  
  @keyframes ge-anim03-paths {
    0% { 
      clip-path: polygon(0%  43%, 83% 43%, 83% 22%, 23% 22%, 23% 24%, 91% 24%, 91% 26%, 18% 26%, 18% 83%, 29% 83%, 29% 17%, 41% 17%, 41% 39%, 18% 39%, 18% 82%, 54% 82%, 54% 88%, 19% 88%, 19% 4%, 39%  4%, 39% 14%, 76% 14%, 76% 52%, 23% 52%, 23% 35%, 19% 35%, 19%  8%, 36%  8%, 36% 31%, 73% 31%, 73% 16%,  1% 16%, 1% 56%, 50% 56%, 50%  8%); 
    }
  
    5% { 
      clip-path: polygon(0% 29%, 44% 29%, 44% 83%, 94% 83%, 94% 56%, 11% 56%, 11% 64%, 94% 64%, 94% 70%, 88% 70%, 88% 32%, 18% 32%, 18% 96%, 10% 96%, 10% 62%, 9% 62%, 9% 84%, 68% 84%, 68% 50%, 52% 50%, 52% 55%, 35% 55%, 35% 87%, 25% 87%, 25% 39%, 15% 39%, 15% 88%, 52% 88%); 
    }
  
    30% { 
      clip-path: polygon(0% 53%, 93% 53%, 93% 62%, 68% 62%, 68% 37%, 97% 37%, 97% 89%, 13% 89%, 13% 45%, 51% 45%, 51% 88%, 17% 88%, 17% 54%, 81% 54%, 81% 75%, 79% 75%, 79% 76%, 38% 76%, 38% 28%, 61% 28%, 61% 12%, 55% 12%, 55% 62%, 68% 62%, 68% 51%, 0% 51%,  0% 92%, 63% 92%, 63%  4%, 65%  4%); 
    }
  
    45% { 
      clip-path: polygon(0% 33%, 2% 33%, 2% 69%, 58% 69%, 58% 94%, 55% 94%, 55% 25%, 33% 25%, 33% 85%, 16% 85%, 16% 19%, 5% 19%, 5% 20%, 79% 20%, 79% 96%, 93% 96%, 93% 50%, 5% 50%, 5% 74%, 55% 74%, 55% 57%, 96% 57%, 96% 59%, 87% 59%, 87% 65%, 82% 65%, 82% 39%, 63% 39%, 63% 92%, 4% 92%, 4% 36%, 24% 36%, 24% 70%, 1% 70%, 1% 43%, 15% 43%, 15% 28%, 23% 28%, 23% 71%, 90% 71%, 90% 86%, 97% 86%, 97% 1%, 60% 1%, 60% 67%, 71% 67%, 71% 91%, 17% 91%, 17% 14%, 39% 14%, 39% 30%, 58% 30%, 58% 11%, 52% 11%, 52% 83%, 68% 83%); 
    }
  
    76% { 
      clip-path: polygon(0% 26%, 15% 26%, 15% 73%, 72% 73%, 72% 70%, 77% 70%, 77% 75%, 8% 75%, 8% 42%, 4% 42%, 4% 61%, 17% 61%, 17% 12%, 26% 12%, 26% 63%, 73% 63%, 73% 43%, 90% 43%, 90% 67%, 50% 67%, 50% 41%, 42% 41%, 42% 46%, 50% 46%, 50% 84%, 96% 84%, 96% 78%, 49% 78%, 49% 25%, 63% 25%, 63% 14%); 
    }
  
    90% { 
      clip-path: polygon(0% 41%, 13% 41%, 13%  6%, 87%  6%, 87% 93%, 10% 93%, 10% 13%, 89% 13%, 89%  6%, 3%  6%, 3%  8%, 16%  8%, 16% 79%, 0% 79%, 0% 99%, 92% 99%, 92% 90%,  5% 90%, 5% 60%, 0% 60%, 0% 48%, 89% 48%, 89% 13%, 80% 13%, 80% 43%, 95% 43%, 95% 19%, 80% 19%, 80% 85%, 38% 85%, 38% 62%); 
    }
  
    1%, 7%, 33%, 47%, 78%, 93% { clip-path: none; }
  }
  
  @keyframes ge-anim03-movement {
    0%   { top: 0px; left: -20px; }
    15%  { top: 10px; left: 10px; }
    60%  { top: 5px; left: -10px; }
    75%  { top: -5px; left: 20px; }
    100% { top: 10px; left: 5px;  }
  }
  
  @keyframes ge-anim03-opacity {
    0%  { opacity: 0.1; }
    5%  { opacity: 0.7; }
    30% { opacity: 0.4; }
    45% { opacity: 0.6; }
    76% { opacity: 0.4; }
    90% { opacity: 0.8; }
  
    1%, 7%, 33%, 47%, 78%, 93% { opacity: 0; }
  }
  
  @keyframes ge-anim03-font {
    0% { font-weight: 100; color: #e0287d; filter: blur(3px); }
    20% { font-weight: 500; color: #fff; filter: blur(0); }
    50% { font-weight: 300; color: #1bc7fb; filter: blur(2px); }
    60% { font-weight: 700; color: #fff; filter: blur(0); }
    90% { font-weight: 500; color: #e0287d; filter: blur(6px); }
  }
  
  
  /*===================================*/
  
  
  @keyframes ge-anim04-1 {
    0% {
      opacity: 1;
      transform: translate3d(0,0,0);
      -webkit-clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
      clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
    }
    2% {
      -webkit-clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
      clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
    }
    4% {
      -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
      clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
    }
    6% {
      -webkit-clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
      clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
    }
    8% {
      -webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
      clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
    }
    10% {
      -webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
      clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
    }
    12% {
      -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
      clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
    }
    14% {
      -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
      clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
    }
    16% {
      -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
      clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
    }
    18% {
      -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
      clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
    }
    20% {
      -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
      clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
    }
    21.9% {
      opacity: 1;
       transform: translate3d(0,0,0);
    }
    22%, 100% {
      opacity: 0;
      transform: translate3d(0,0,0);
      -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
      clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    }
  }
  
  @keyframes ge-anim04-2 {
    0% {
      opacity: 1;
      transform: translate3d(-1,0,0);
      -webkit-clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%);
      clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%);
    }
    3% {
      -webkit-clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);
      clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);
    }
    5% {
      -webkit-clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%);
      clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%);
    }
    7% {
      -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
      clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
    }
    9% {
      -webkit-clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%);
      clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%);
    }
    11% {
      -webkit-clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%);
      clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%);
    }
    13% {
      -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
      clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
    }
    15% {
      -webkit-clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%);
      clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%);
    }
    17% {
      -webkit-clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%);
      clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%);
    }
    19% {
      -webkit-clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%);
      clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%);
    }
    20% {
      -webkit-clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%);
      clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%);
    }
    21.9% {
      opacity: 1;
      transform: translate3d(-1,0,0);
    }
    22%, 100% {
      opacity: 0;
      transform: translate3d(0,0,0);
      -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
      clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    }
  }
  
  
  /*===================================*/
  
  
  @keyframes ge-anim05 {
    0%, 13%, 29.5%, 49%, 72.25%, 84% {
      clip-path: none;
      text-shadow: 0 0 10px white;
    }
  
    9.2%, 27.7%, 45.7%, 69%, 82% {
      text-shadow: 0 0 10px white, 10px 10px 0px #ff88ffff, 3px -4px 0px #88ff88ff;
    }
  
    9.2% {  
      clip-path: polygon(89% 21%, 50% 31%, 30% 29%, 90% 7%, 79% 46%, 17% 42%, 21% 60%, 31% 53%, 77% 39%, 2% 88%, 48% 2%, 18% 76%, 2% 64%, 87% 90%, 32% 20%, 53% 97%, 19% 86%, 80% 73%, 69% 88%, 76% 68%, 91% 91%, 12% 80%, 77% 15%, 54% 12%, 78% 58%, 93% 18%, 88% 24%, 90% 30%, 67% 76%, 89% 54%, 18% 52%, 96% 49%, 35% 19%, 22% 52%, 38% 7%, 78% 80%, 28% 24%, 78% 58%, 43% 99%, 55% 95%, 80% 85%, 49% 83%, 77% 66%, 23% 49%, 97% 37%, 66% 40%, 61% 8%, 40% 49%, 14% 89%, 56% 10%); 
    }
  
    27.7% {  
      clip-path: polygon(73% 38%, 53% 27%, 50% 22%, 49% 93%, 83% 7%, 40% 45%, 49% 62%, 0% 17%, 33% 56%, 71% 36%, 59% 86%, 99% 92%, 43% 9%, 48% 62%, 8% 55%, 16% 9%, 58% 1%, 16% 89%, 17% 61%, 98% 91%, 92% 87%, 52% 97%, 29% 95%, 12% 74%, 40% 35%, 83% 96%, 0% 21%, 51% 17%, 86% 24%, 8% 85%, 82% 84%, 60% 70%, 64% 78%, 43% 13%, 2% 98%, 6% 16%, 15% 33%, 42% 64%, 84% 3%, 56% 55%, 42% 12%, 98% 81%, 14% 69%, 1% 96%, 89% 18%, 46% 34%, 65% 0%, 8% 17%, 91% 36%, 21% 24%); 
    }
  
    45.7% {  
      clip-path: polygon(81% 79%, 25% 5%, 84% 4%, 40% 54%, 81% 17%, 88% 88%, 30% 25%, 46% 6%, 11% 90%, 7% 47%, 67% 2%, 92% 91%, 12% 33%, 76% 75%, 14% 92%, 91% 6%, 85% 60%, 36% 84%, 58% 50%, 43% 53%, 19% 71%, 5% 84%, 83% 11%, 70% 62%, 1% 34%, 87% 11%, 45% 32%, 53% 0%, 73% 6%, 35% 53%, 71% 42%, 12% 51%, 22% 79%, 79% 84%, 3% 7%, 84% 16%, 16% 52%, 81% 92%, 12% 66%, 12% 65%, 43% 89%, 48% 63%, 32% 75%, 1% 40%, 49% 1%, 32% 68%, 42% 33%, 62% 93%, 98% 73%, 46% 48%); 
    }
  
    69% {  
      clip-path: polygon(89% 82%, 44% 73%, 87% 45%, 77% 4%, 33% 15%, 68% 65%, 87% 48%, 87% 14%, 64% 6%, 60% 70%, 2% 50%, 46% 82%, 97% 43%, 30% 54%, 87% 12%, 85% 3%, 34% 99%, 88% 18%, 84% 74%, 95% 26%, 26% 0%, 81% 86%, 97% 14%, 17% 90%, 15% 11%, 29% 13%, 1% 88%, 88% 21%, 29% 13%, 24% 16%, 45% 25%, 69% 39%, 94% 27%, 41% 77%, 23% 46%, 34% 42%, 77% 12%, 19% 53%, 15% 83%, 95% 24%, 47% 82%, 99% 22%, 53% 60%, 47% 7%, 65% 75%, 51% 3%, 85% 32%, 87% 54%, 31% 99%, 90% 51%); 
    }
  
    82% { 
      clip-path: polygon(64% 61%, 32% 7%, 33% 69%, 48% 3%, 3% 54%, 18% 3%, 88% 12%, 54% 7%, 75% 18%, 32% 72%, 45% 87%, 68% 57%, 46% 39%, 27% 39%, 9% 27%, 82% 95%, 31% 24%, 75% 99%, 36% 4%, 31% 21%, 0% 55%, 79% 45%, 14% 38%, 12% 70%, 22% 30%, 96% 2%, 32% 7%, 53% 99%, 9% 4%, 10% 58%, 64% 85%, 73% 2%, 75% 71%, 53% 85%, 40% 58%, 21% 0%, 65% 77%, 22% 73%, 53% 61%, 4% 14%, 81% 0%, 65% 58%, 5% 36%, 96% 41%, 71% 30%, 1% 51%, 78% 9%, 11% 23%, 29% 43%, 10% 10%); 
    }
  }
  
  

Inline Styles

• --content: 'Synopsis'; font-size: 2rem;

• --content: 'Animations!';

• --content: 'secrets';

• --content: 

• --content: 

• --content: 

• --content: 

• --content: 

• --style05-glitch-size: 1rem; padding-left: 5.0ch; padding-right: 5.0ch;

• --content: 

• --content: 

• --content: 

• --content: 

• --content: 

• --content: 

• --content: 

• --content: 

• --content: 

• --content: 

• --content: 

• --content: 

• --content: 

• --content: 'More Details'; font-size: 2rem;

• font-size:2rem; --content: 

• font-size:2rem; --content: 

• font-size:2rem; --content: 

• font-size:2rem; --content: 

• font-size:2rem; --content: 

• font-size:2rem; --content: 

• font-size:2rem; --content: 

• font-size:2rem; --content: 

• font-size:2rem; --content: 

• font-size:2rem; --content: 

• font-size:2rem; --content: 

• font-size:2rem; --content: 

• font-size:2rem; --content: 

• font-size:2rem; --content: 

• font-size:2rem; --content: 

• --content: 'secrets';

• --content: 'secrets';

• --content: 'secrets';

Includes

• (none)

CSS Classes

• style03-plaintext

• animation03

• style05-plaintext

• style01-plaintext

• animation01

• style03-link

• style03-plaintext

• animation03

• style01-plaintext

• animation01

• style02-plaintext

• animation02

• style03-plaintext

• animation03

• style04-plaintext

• animation04

• style05-plaintext

• animation05

• style05-plaintext

• animation05

• blockquote

• blockquote

• style03-plaintext

• animation03

• style03-plaintext

• animation03

• @@**{style-class}**

• **{animation-class}**@@

• style01-plaintext

• animation01

• style01-plaintext

• animation01

• style02-plaintext

• animation02

• style02-plaintext  animation02

• style03-plaintext

• animation03

• style03-plaintext

• animation03

• style04-plaintext

• animation04

• style04-plaintext

• animation04

• style05-plaintext

• animation05

• style05-plaintext

• animation05

• style01-plaintext

• animation01

• blockquote

• style05-plaintext

• animation05

• style05-plaintext

• animation05

• style05-plaintext

• animation05

• style05-plaintext

• animation05

• style05-plaintext

• animation05

• style05-plaintext

• animation05

• style05-plaintext

• animation05

• style05-plaintext

• animation05

• style05-plaintext

• animation05

• style05-plaintext

• animation05

• style05-plaintext

• animation05

• style05-plaintext

• animation05

• style05-plaintext

• animation05

• style05-plaintext

• animation05

• style05-plaintext

• animation05

• blockquote

• animation05

• animation05

• blockquote

• style03-link

• style03-plaintext

• animation03

• style03-link

• style03-plaintext

• animation03

• style03-link

• style03-plaintext

• animation03

• blockquote

• blockquote

Page Source

[[iftags +component]]

[[module css]]

@import url("https://nu-scptheme.github.io/Black-Highlighter/stable/styles/normalize.min.css");
@import url("https://nu-scptheme.github.io/Black-Highlighter/stable/styles/black-highlighter.min.css");

[[/module]]

[[>]]
[[module Rate]]
[[/>]]

[[=]]
[[span class="style03-plaintext animation03" style="--content: 'Synopsis'; font-size: 2rem;"]]Synopsis[[/span]]
[[/=]]

This component consists of 5 different elements that be used alongside each other for really cool effects:
* A plaintext element ([[span class="style05-plaintext"]]allows more complex stylizations than wikidot formatting[[/span]])
* A "Glitch Text" element that can have text styles applied like the plaintext element and [[span class="style01-plaintext animation01" style="--content: 'Animations!';"]]Animations![[/span]]
* Glitch text that can have a link attached to it so it sends readers somewhere when they click it (for [[a class="style03-link" href="https://scp-wiki.wikidot.com" target="_parent"]][[span class="style03-plaintext animation03" style="--content: 'secrets';"]]secrets[[/span]][[/a]])
* One, as in a single, animated div element (It's explained further down why there's only one)




[[=]]
[[collapsible show="Show Super Cool Stuff" hide="Hide Super Cool Stuff"]]

[[<]]

[[=]]
[[span class="style01-plaintext animation01" style="--content: "We Die in the Darkness";"]]We Die in the Darkness[[/span]]

[[span class="style02-plaintext animation02" style="--content: "So You Can Live in the Light";"]]So You Can Live in the Light[[/span]]

[[span class="style03-plaintext animation03" style="--content: "IS THAT THE BREACH ALARM?";"]]IS THAT THE BREACH ALARM?[[/span]]

[[span class="style04-plaintext animation04" style="--content: "Never mind";"]]Never mind[[/span]]

[[span class="style05-plaintext animation05" style="--content: "It was just the microwave";"]]It was just the microwave[[/span]]

[[/=]]

------

[[=]]
[[div class="style05-plaintext animation05" style="--style05-glitch-size: 1rem; padding-left: 5.0ch; padding-right: 5.0ch;"]]

What have we here? This is interesting now...

The uses I could fathom for this one. Pair it with some fun stylization like     too    man-y             spaces, a-l-l-l-l-l to make itititititit sEem MORe G-LIT-CHE--D!

[[/div]]
[[/=]]

[[/<]]

[[/collapsible]]
[[/=]]

------

++++ Step 1 - Include Argument:
[[div class="blockquote"]]
@@[[include :scp-wiki:component:glitch-elements]]@@
[[/div]]

This is what adds all of the relevant code from this component to your page. Nothing will work if you don't add this.

It's best to place this include argument AFTER any include arguments for themes or components that change the pages contents like "croqstyle".

++++ Step 2 - A Basic Span:

This component doesn't have it's own elements per say, it's really just a collection of premade styles and animations that you can apply to HTML objects (mostly just spans). Like So:

[[div class="blockquote"]]
++++++ Example:
@@[[span class="style03-plaintext animation03" style="--content: "We Die in the Darkness";"]]We Die in the Darkness[[/span]]@@

++++++ Result:
[[span class="style03-plaintext animation03" style="--content: "We Die in the Darkness";"]]We Die in the Darkness[[/span]]

++++++ Template:
@@[[span class="@@**{style-class}** **{animation-class}**@@" style="--content: "@@**{Text Content}**@@";"]]@@**{Text Content}**@@[[/span]]@@
[[/div]]

You'll notice the bolded bits in the template above; those are the main field's you'll have on almost every span you use this component on:
* The "**{style-class}**" is what determines things like font color, size, etc. 
* The "**{animation-class}**" is self-explanatory; it's what applies a given animation to the element.
 * Two versions of the animation class exists - "animation0#" which plays the animations at all times, and "animation0#-hover" which only plays the animation once the span is being hovered by a cursor.
* The "**{Text Content}**" content field appears in two places. Both "fields" must contain the same text as the "@@--@@content" variable which is what allows animations to have multiple layers to animate.

++++ Step 3 - Your Options:

As shown in the step above, there's two types of "classes" that you can apply to an element; the "text-style" & "animation" classes. Here's a table showing them off!

||~ Plaintext Style ||~ Animation Style ||~ All Together Now ||
|| [[span class="style01-plaintext"]]Text Style 1[[/span]] || [[span class="animation01" style="--content: "Animation 1";"]]Animation 1[[/span]] || [[span class="style01-plaintext animation01" style="--content: "Together 1";"]]Together 1[[/span]] ||
|| [[span class="style02-plaintext"]]Text Style 2[[/span]] || [[span class="animation02" style="--content: "Animation 2";"]]Animation 2[[/span]] || [[span class="style02-plaintext  animation02" style="--content: "Together 2";"]]Together 2[[/span]] ||
|| [[span class="style03-plaintext"]]Text Style 3[[/span]] || [[span class="animation03" style="--content: "Animation 3";"]]Animation 3[[/span]] || [[span class="style03-plaintext animation03" style="--content: "Together 3";"]]Together 3[[/span]] ||
|| [[span class="style04-plaintext"]]Text Style 4[[/span]] || [[span class="animation04" style="--content: "Animation 4";"]]Animation 4[[/span]] || [[span class="style04-plaintext animation04" style="--content: "Together 4";"]]Together 4[[/span]] ||
|| [[span class="style05-plaintext"]]Text Style 5[[/span]] || [[span class="animation05" style="--content: "Animation 5";"]]Animation 5[[/span]] || [[span class="style05-plaintext animation05" style="--content: "Together 5";"]]Together 5[[/span]] ||



------
------



[[=]]
[[span class="style01-plaintext animation01" style="--content: 'More Details'; font-size: 2rem;"]]More Details[[/span]]
[[/=]]

This sections is meant to provide details for specific use-cases, or to answer Frequently-Asked-Questions; this section of the page is likely to update over time as people use this component.

[[=]]
[[collapsible show="Why Won't Animated Text Word-Wrap?" hide="Why Won't Animated Text Word-Wrap"]]

[[<]]

Unfortunately, due to how the animations are made using ::before & ::after pseudo-elements, word-wrapping was affecting the placement of those layers over the original text in unsightly ways. For long phrases, this can result in text running off the screen for smaller screens which isn't the best thing.

So, word-wrapping was disabled for all elements with the below animation classes applied to them:
* "animation01"
* "animation02"
* "animation03"
* "animation04"

This specifically excludes "animation05", as it doesn't use those pseudo-elements to animation as it only used text-shadows for it's animation.
> This opens up some fun things such as applying the animation to an entire div element and the text inside it having the animation.

------

How can this be dealt with if you want a long line of text, or a paragraph? The only way to have long lines of text with animations 1-4, is to break a phrase/sentence/paragraph up into multiple spans. This can get a bit confusing not because it's difficult, but because the result is "code spaghetti".

An easy way of dealing with the spaghetti is to follow the steps below:

[[div class="blockquote"]]

**Make up a the multiple spans on separate lines first for readability:**

@@[[span class="style05-plaintext animation05" style="font-size:2rem; --content: "We ";"]]We [[/span]]@@
@@[[span class="style05-plaintext animation05" style="font-size:2rem; --content: "Die ";"]]Die [[/span]]@@
@@[[span class="style05-plaintext animation05" style="font-size:2rem; --content: "In ";"]]In [[/span]]@@
@@[[span class="style05-plaintext animation05" style="font-size:2rem; --content: "The ";"]]The [[/span]]@@
@@[[span class="style05-plaintext animation05" style="font-size:2rem; --content: "Darkness";"]]Darkness[[/span]]@@

**Only then, remove the line-breaks between each span for it to work:**

@@[[span class="style05-plaintext animation05" style="font-size:2rem; --content: "We ";"]]We [[/span]][[span class="style05-plaintext animation05" style="font-size:2rem; --content: "Die ";"]]Die [[/span]][[span class="style05-plaintext animation05" style="font-size:2rem; --content: "In ";"]]In [[/span]][[span class="style05-plaintext animation05" style="font-size:2rem; --content: "The ";"]]The [[/span]][[span class="style05-plaintext animation05" style="font-size:2rem; --content: "Darkness";"]]Darkness[[/span]]@@

**Result that now supports smaller screen sizes:**

[[span class="style05-plaintext animation05" style="font-size:2rem; --content: "We ";"]]We [[/span]][[span class="style05-plaintext animation05" style="font-size:2rem; --content: "Die ";"]]Die [[/span]][[span class="style05-plaintext animation05" style="font-size:2rem; --content: "In ";"]]In [[/span]][[span class="style05-plaintext animation05" style="font-size:2rem; --content: "The ";"]]The [[/span]][[span class="style05-plaintext animation05" style="font-size:2rem; --content: "Darkness";"]]Darkness[[/span]]

[[/div]]

[[/<]]

[[/collapsible]]
[[/=]]



[[=]]
[[collapsible show="Animating a WHOLE Div Element?" hide="Animating a WHOLE Div Element?"]]

[[<]]

Due to "animation05" not using the ::before & ::after pseudo-elements to provide overlapping layers for it's animation, it can be applied to large lines of text or even paragraphs and still be affected by word-wrapping.

The simplest way of doing this is by making a div, putting text in it, and applying the "animation05" class to the div like so:

[[div class="blockquote"]]

@@[[div class="animation05"]]@@
@@Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.@@ 
@@[[/div]]@@

[[div class="animation05"]]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
[[/div]]

[[/div]]

[[/<]]

[[/collapsible]]
[[/=]]



[[=]]
[[collapsible show="'Hidden' Links?" hide="'Hidden' Links?"]]

[[<]]

An example of this was shown in the bullet-list at the top of the page, with the "hidden link" just sending you to the SCP-Wiki Mainpage. Ultimately, this is just using an "@@[[a href="link..."]][[/a]]@@" element as a wrapper for the interior span containing text.

Now, one class that wasn't shown in the basic usage steps above the FAQ section was the "style0#-link" classes, which apply stylizations to the "@@[[a href="link..."]][[/a]]@@" wrapper.

All of the existing link classes have the same style rules, with the only reason for there to be multiple is to allow customization using the variables this component provides, which is shown in another FAQ collapsible.

Here's an example of this being done:

[[div class="blockquote"]]

**Broken apart for clarity:**
@@[[a class="style03-link" href="https://scp-wiki.wikidot.com" target="_parent"]]@@
@@[[span class="style03-plaintext animation03" style="--content: 'secrets';"]]secrets[[/span]]@@
@@[[/a]]@@

**Put back together:**
@@[[a class="style03-link" href="https://scp-wiki.wikidot.com" target="_parent"]][[span class="style03-plaintext animation03" style="--content: 'secrets';"]]secrets[[/span]][[/a]]@@

**Result:**
[[a class="style03-link" href="https://scp-wiki.wikidot.com" target="_parent"]][[span class="style03-plaintext animation03" style="--content: 'secrets';"]]secrets[[/span]][[/a]]

[[/div]]

[[/<]]

[[/collapsible]]
[[/=]]



[[=]]
[[collapsible show="Rendering Bug (BHL + Firefox)" hide="Rendering Bug (BHL + Firefox)"]]

[[<]]

I was made aware of an issue where a specific animation from this component appeared to be bugged on the Firefox browser. After some investigation with much help from someone in the community, it was made clear that Firefox wasn't the whole issue. It turned out that BHL was messing with the font-weight of the ::before & ::after pseudo-elements used by the animations, changing their font-weight to 400 while the spans remained 700. This issue wasn't apparent when this component was posted due to the font-weight only becoming an issue when Firefox was used, which takes font-weight into account when calculating letter-spacing.

This is a screenshot from testing this specific bug for you to compare in the case you have this issue: 
[[image http://scp-wiki.wikidot.com/local--files/component:glitch-elements/Glitch%20Elements%20BHL%20Bug.png]] 

Here's an example of this being done:

[[div class="blockquote"]]

@@[[module css]]@@
@@.animation01, .animation01-hover:hover,@@
@@.animation02, .animation02-hover:hover,@@
@@.animation03, .animation03-hover:hover,@@
@@.animation04, .animation04-hover:hover {@@
  @@  font-weight: 700;@@ **OR a Variable Like** @@ font-weight: var(--style04-plain-weight);@@
@@}@@

@@.animation01::before, .animation01::after, @@
@@.animation01-hover:hover::before, .animation01-hover:hover::after,@@
@@.animation02::before, .animation02::after, @@
@@.animation02-hover:hover::before, .animation02-hover:hover::after,@@
@@.animation03::before, .animation03::after, @@
@@.animation03-hover:hover::before, .animation03-hover:hover::after,@@
@@.animation04::before, .animation04::after, @@
@@.animation04-hover:hover::before, .animation04-hover:hover::after {@@
  @@  font-weight: 700;@@ **OR a Variable Like** @@ font-weight: var(--style04-plain-weight);@@
@@}@@
@@[[/module]]@@

[[/div]]

As shown in the block above, you can just set a static value for the font-weight of every animation class, or you can make it one of the text-style variables so you don't have to match it in the case you're using both text-styles and animations on the same element.

You can also only apply this fix to a single animation class by breaking up the selectors like so:

[[div class="blockquote"]]

@@[[module css]]@@
@@.animation01, .animation01-hover:hover {@@
  @@  font-weight: 700;@@ **OR a Variable Like** @@ font-weight: var(--style04-plain-weight);@@
@@}@@

@@.animation01::before, .animation01::after, @@
@@.animation01-hover:hover::before, .animation01-hover:hover::after {@@
  @@  font-weight: 700;@@ **OR a Variable Like** @@ font-weight: var(--style04-plain-weight);@@
@@}@@
@@[[/module]]@@

[[/div]]

[[/<]]

[[/collapsible]]
[[/=]]


[[/iftags]]






[[module css]]

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Audiowide&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DotGothic16&display=swap');

:root {
  /*Link Style Variables*/
  --style01-link-deco: inherit;
  --style01-link-color: inherit;

  --style02-link-deco: none;
  --style02-link-color: green;

  --style03-link-deco: none;
  --style03-link-color: inherit;

  --style04-link-deco: none;
  --style04-link-color: inherit;

  --style05-link-deco: none;
  --style05-link-color: inherit;



  /*Plaintext Style Variables*/
  --style01-plain-font: inherit;
  --style01-plain-weight: inherit;
  --style01-plain-size: inherit;
  --style01-plain-color: inherit;
  --style01-plain-bgcolor: inherit;

  --style02-plain-font:  'Orbitron', sans-serif;
  --style02-plain-weight: inherit;
  --style02-plain-size: inherit;
  --style02-plain-color: inherit;
  --style02-plain-bgcolor: inherit;

  --style03-plain-font: "Audiowide", sans-serif;
  --style03-plain-weight: inherit;
  --style03-plain-size: inherit;
  --style03-plain-color: inherit;
  --style03-plain-bgcolor: inherit;

  --style04-plain-font: "Press Start 2P", system-ui;
  --style04-plain-weight: 700;
  --style04-plain-size: inherit;
  --style04-plain-color: inherit;
  --style04-plain-bgcolor: inherit;

  --style05-plain-font: "DotGothic16", sans-serif;
  --style05-plain-weight: bold;
  --style05-plain-size: inherit;
  --style05-plain-color: inherit;
  --style05-plain-bgcolor: inherit;



  /*Animation Style Variables ("mult" = multipliers to the base values)*/
  --anim01-duration-mult: 1;
  --anim01-before-duration-mult: 1;
  --anim01-after-duration-mult: 1;
  --anim01-translate-mult: 1;

  --anim02-base-duration-mult: 1;
  --anim02-before-duration-mult: 1;
  --anim02-after-duration-mult: 1;
  --anim02-translate-mult: 1;

  --anim03-base-duration-mult: 1;
  --anim03-before-duration-mult: 1;
  --anim03-after-duration-mult: 1;
  --anim03-before-color: #e0287d;
  --anim03-after-color: #1bc7fb;

  --anim04-before-duration-mult: 1;
  --anim04-after-duration-mult: 1;
  --anim04-translate-mult: 1;

  --anim05-duration-mult: 1;
}


/*===================================*/


.style01-link:link, .style01-link:visited, .style01-link:hover, .style01-link:active {
  text-decoration: var(--style01-link-deco);  
  color: var(--style01-link-color);
}

.style02-link:link, .style02-link:visited, .style02-link:hover, .style02-link:active {
  text-decoration: var(--style02-link-deco);  
  color: var(--style02-link-color);
}

.style03-link:link, .style03-link:visited, .style03-link:hover, .style03-link:active {
  text-decoration: var(--style03-link-deco);  
  color: var(--style03-link-color);
}

.style04-link:link, .style04-link:visited, .style04-link:hover, .style04-link:active {
  text-decoration: var(--style04-link-deco);  
  color: var(--style04-link-color);
}

.style05-link:link, .style05-link:visited, .style05-link:hover, .style05-link:active {
  text-decoration: var(--style05-link-deco);  
  color: var(--style05-link-color);
}


/*===================================*/


.style01-plaintext {
  font-family: var(--style01-plain-font);
  font-weight: var(--style01-plain-weight);
  font-size: var(--style01-plain-size);
  color: var(--style01-plain-color);

  padding-left: 0.0ch;
  padding-right: 0.0ch;
}

.style02-plaintext {
  font-family: var(--style02-plain-font);
  font-weight: var(--style02-plain-weight);
  font-size: var(--style02-plain-size);
  color: var(--style02-plain-color);

  padding-left: 0.0ch;
  padding-right: 0.0ch;
}

.style03-plaintext {
  font-family: var(--style03-plain-font);
  font-weight: var(--style03-plain-weight);
  font-size: var(--style03-plain-size);
  color: var(--style03-plain-color);

  padding-left: 0.0ch;
  padding-right: 0.0ch;
}

.style04-plaintext {
  font-family: var(--style04-plain-font);
  font-weight: var(--style04-plain-weight);
  font-size: var(--style04-plain-size);
  color: var(--style04-plain-color);

  padding-left: 0.0ch;
  padding-right: 0.0ch;
}

.style05-plaintext {
  font-family: var(--style05-plain-font);
  font-weight: var(--style05-plain-weight);
  font-size: var(--style05-plain-size);
  color: var(--style05-plain-color);

  padding-left: 0.0ch;
  padding-right: 0.0ch;
}


/*===================================*/


span.style01-plaintext { background: var(--style01-plain-bgcolor); }
span.style02-plaintext { background: var(--style02-plain-bgcolor); }
span.style03-plaintext { background: var(--style03-plain-bgcolor); }
span.style04-plaintext { background: var(--style04-plain-bgcolor); }
span.style05-plaintext { background: var(--style05-plain-bgcolor); }







.animation01, .animation01-hover:hover,
.animation02, .animation02-hover:hover,
.animation03, .animation03-hover:hover,
.animation04, .animation04-hover:hover {
  position: relative;
  white-space: nowrap;
  display: inline-block;  
}

.animation01::before, .animation01::after, .animation01-hover:hover::before, .animation01-hover:hover::after,
.animation02::before, .animation02::after, .animation02-hover:hover::before, .animation02-hover:hover::after,
.animation03::before, .animation03::after, .animation03-hover:hover::before, .animation03-hover:hover::after,
.animation04::before, .animation04::after, .animation04-hover:hover::before, .animation04-hover:hover::after {
  content: var(--content);
  position: absolute;
  bottom: 0rem;
  left: 0;  
}


/*===================================*/


.animation01, .animation01-hover:hover {}

.animation01::before, .animation01-hover:hover::before {
    clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
}

.animation01::after, .animation01-hover:hover::after {
    clip-path: polygon(0 68%, 100% 68%, 100% 100%, 0 100%);
}

.animation01::before, .animation01::after, .animation01-hover:hover::before, .animation01-hover:hover::after {}


/*===================================*/


.animation02, .animation02-hover:hover {}

.animation02::before, .animation02-hover:hover::before {
  clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
  opacity: 0.8;

  transform: translate(
    calc(-0.025em * var(--anim02-translate-mod)), 
    calc(-0.0125em * 1)
  );
}

.animation02::after, .animation02-hover:hover::after {
  clip-path: polygon(0 80%, 100% 20%, 100% 100%, 0 100%);
  opacity: 0.8;

  transform: translate(
    calc(0.0125em * var(--anim02-translate-mod)), 
    calc(0.025em * 1)
  );
}

.animation02::before, .animation02::after, .animation02-hover:hover::before, .animation02-hover:hover::after {}


/*===================================*/


.animation03, .animation03-hover:hover {}

.animation03::before, .animation03-hover:hover::before {
  top: 10px;
  left: 15px;
  color: var(--anim03-before-color);
}

.animation03::after, .animation03-hover:hover::after {
  top: 5px;
  left: -10px;
  color: var(--anim03-after-color);
}

.animation03::before, .animation03::after,
.animation03-hover:hover::before, .animation03-hover:hover::after {
  width: 110%;
  z-index: -1;  
}


/*===================================*/


.animation04, .animation04-hover:hover {}

.animation04::before, .animation04-hover:hover::before {
  left: 2px;
  color: #192941;
  text-shadow: -1px 0 #0ff;
  clip: rect(0, 400%, 0, 0);
}

.animation04::after, .animation04-hover:hover::after {
  left: -2px;
  color: darken(#01A8FF, 33%);
  text-shadow: 3px 0 #FF28D7;
  clip: rect(0, 400%, 0, 0);
}

.animation04::before, .animation04::after, .animation04-hover:hover::before, .animation04-hover:hover::after {}


/*===================================*/


.animation05, .animation05-hover:hover {
  position: relative;
  display: inline-block;  
}

.animation05::before, .animation05-hover:hover::before {}

.animation05::after, .animation05-hover:hover::after {}

.animation05::before, .animation05::after,
.animation05-hover:hover::before, .animation05-hover:hover::after {}





@media not (prefers-reduced-motion) {

  .animation01, .animation01-hover:hover {
    animation: ge-anim01-base calc(300ms * var(--anim01-duration-mult)) linear infinite;
  }

  .animation01::before, .animation01-hover:hover::before {
    animation: ge-anim01-top calc(1s * var(--anim01-before-duration-mult)) linear infinite;
  }

  .animation01::after, .animation01-hover:hover::after {
    animation: ge-anim01-bottom calc(1s * var(--anim01-after-duration-mult)) linear infinite;
  }


/*===================================*/


  .animation02, .animation02-hover:hover {
    animation: ge-anim02 calc(500ms * var(--anim02-base-duration-mult)) infinite;
  }

  .animation02::before, .animation02-hover:hover::before {
    animation: ge-anim02 calc(650ms * var(--anim02-before-duration-mult)) infinite;
  }

  .animation02::after, .animation02-hover:hover::after {
    animation: ge-anim02 calc(375ms * var(--anim02-after-duration-mult)) infinite;
  }


/*===================================*/


  .animation03, .animation03-hover:hover {
    animation: ge-anim03-paths calc(5s * var(--anim03-base-duration-mult)) step-end infinite;
  }

  .animation03::before, .animation03-hover:hover::before {
    animation:
      ge-anim03-paths calc(5s * var(--anim03-before-duration-mult)) step-end infinite,
      ge-anim03-opacity calc(5s * var(--anim03-before-duration-mult)) step-end infinite,
      ge-anim03-font calc(8s * var(--anim03-before-duration-mult)) step-end infinite,
      ge-anim03-movement calc(10s * var(--anim03-before-duration-mult)) step-end infinite;
  }

  .animation03::after, .animation03-hover:hover::after {
    animation:
      ge-anim03-paths calc(5s * var(--anim03-after-duration-mult)) step-end infinite,
      ge-anim03-opacity calc(5s * var(--anim03-after-duration-mult)) step-end infinite,
      ge-anim03-font calc(7s * var(--anim03-after-duration-mult)) step-end infinite,
      ge-anim03-movement calc(8s * var(--anim03-after-duration-mult)) step-end infinite;
  }


/*===================================*/


  .animation04::before, .animation04-hover:hover::before {
    animation: ge-anim04-1 calc(4s * var(--anim04-before-duration-mult)) linear alternate-reverse infinite;
  }

  .animation04::after, .animation04-hover:hover::after {
    animation: ge-anim04-2 calc(2s * var(--anim04-after-duration-mult)) linear alternate-reverse infinite .2s;
  }


/*===================================*/


  .animation05, .animation05-hover:hover {
    animation: ge-anim05 calc(5s * var(--anim05-duration-mult)) step-end infinite;
  }

}


@media (prefers-reduced-motion) {

  .animation01, .animation01-hover:hover {
    transform: translate(calc(-0.025em * var(--anim01-translate-mod)), calc(-0.025em * var(--anim01-translate-mod))) skew(0deg); 
  }

  .animation01::before, .animation01-hover:hover::before {
    transform: translate(calc(15% * var(--anim01-translate-mod)), calc(0.5% * var(--anim01-translate-mod))) skew(-15deg);
  }

  .animation01::after, .animation01-hover:hover::after {
    transform: translate(calc(-10% * var(--anim01-translate-mod)), calc(1% * var(--anim01-translate-mod))) skew(35deg);
  }


/*===================================*/


  .animation02, .animation02-hover:hover {}

  .animation02::before, .animation02-hover:hover::before {
    text-shadow:
      0.025em 0.05em 0 rgba(255, 0, 0, 0.75),
      0.05em 0 0 rgba(0, 255, 0, 0.75),
      0 -0.05em 0 rgba(0, 0, 255, 0.75);
  }

  .animation02::after, .animation02-hover:hover::after {
    text-shadow:
      0.025em 0.05em 0 rgba(255, 0, 0, 0.75),
      0.05em 0 0 rgba(0, 255, 0, 0.75),
      0 -0.05em 0 rgba(0, 0, 255, 0.75);
  }


/*===================================*/


  .animation03, .animation03-hover:hover {}

  .animation03::before, .animation03-hover:hover::before {
    clip-path: polygon(0% 26%, 15% 26%, 15% 73%, 72% 73%, 72% 70%, 77% 70%, 77% 75%, 8% 75%, 8% 42%, 4% 42%, 4% 61%, 17% 61%, 17% 12%, 26% 12%, 26% 63%, 73% 63%, 73% 43%, 90% 43%, 90% 67%, 50% 67%, 50% 41%, 42% 41%, 42% 46%, 50% 46%, 50% 84%, 96% 84%, 96% 78%, 49% 78%, 49% 25%, 63% 25%, 63% 14%);

    opacity: 0.7;

    font-weight: 100; color: #e0287d; filter: blur(3px);
  }

  .animation03::after, .animation03-hover:hover::after {
    clip-path: polygon(0% 26%, 15% 26%, 15% 73%, 72% 73%, 72% 70%, 77% 70%, 77% 75%, 8% 75%, 8% 42%, 4% 42%, 4% 61%, 17% 61%, 17% 12%, 26% 12%, 26% 63%, 73% 63%, 73% 43%, 90% 43%, 90% 67%, 50% 67%, 50% 41%, 42% 41%, 42% 46%, 50% 46%, 50% 84%, 96% 84%, 96% 78%, 49% 78%, 49% 25%, 63% 25%, 63% 14%);

    opacity: 0.7;

    font-weight: 100; color: #e0287d; filter: blur(3px);
  }


/*===================================*/


  .animation04::before, .animation04-hover:hover::before {
    opacity: 1;
    transform: translate3d(calc(-1 * var(--gap-horizontal)),0,0);
    -webkit-clip-path: polygon(0 25%, 100% 25%, 100% 45%, 0 45%);
    clip-path: polygon(0 25%, 100% 25%, 100% 45%, 0 45%);
  }

  .animation04::after, .animation04-hover:hover::after {
    opacity: 1;
    transform: translate3d(calc(-1 * var(--gap-horizontal)),0,0);
    -webkit-clip-path: polygon(0 25%, 100% 25%, 100% 45%, 0 45%);
    clip-path: polygon(0 25%, 100% 25%, 100% 45%, 0 45%);
  }


/*===================================*/


  .animation05, .animation05-hover:hover {
    clip-path: polygon(81% 79%, 25% 5%, 84% 4%, 40% 54%, 81% 17%, 88% 88%, 30% 25%, 46% 6%, 11% 90%, 7% 47%, 67% 2%, 92% 91%, 12% 33%, 76% 75%, 14% 92%, 91% 6%, 85% 60%, 36% 84%, 58% 50%, 43% 53%, 19% 71%, 5% 84%, 83% 11%, 70% 62%, 1% 34%, 87% 11%, 45% 32%, 53% 0%, 73% 6%, 35% 53%, 71% 42%, 12% 51%, 22% 79%, 79% 84%, 3% 7%, 84% 16%, 16% 52%, 81% 92%, 12% 66%, 12% 65%, 43% 89%, 48% 63%, 32% 75%, 1% 40%, 49% 1%, 32% 68%, 42% 33%, 62% 93%, 98% 73%, 46% 48%);
  }

}












@keyframes ge-anim01-base {
  0%    { 
    transform: translate(
      calc(-0.05em * var(--anim01-translate-mult)), 
      calc(-0.025em * var(--anim01-translate-mult))
    ) skew(0deg); 
  }
  14%   { 
    transform: translate(
      calc(-0.05em * var(--anim01-translate-mult)), 
      calc(-0.025em * var(--anim01-translate-mult))
    ) skew(0deg); 
  }
  15%   { 
    transform: translate(
      calc(0.025em * var(--anim01-translate-mult)), 
      calc(0.025em * var(--anim01-translate-mult))
    ) skew(0deg); 
  }
  49%   { 
    transform: translate(
      calc(0.025em * var(--anim01-translate-mult)), 
      calc(0.025em * var(--anim01-translate-mult))
    ) skew(5deg); 
  }
  50%   { 
    transform: translate(
      calc(0.05em * var(--anim01-translate-mult)), 
      0
    ) skew(5deg); 
  }
  99%   { 
    transform: translate(
      calc(0.05em * var(--anim01-translate-mult)), 
      0
    ) skew(0deg); 
  }
  100%  { 
    transform: translate(
      calc(-0.025em * var(--anim01-translate-mult)), 
      calc(-0.025em * var(--anim01-translate-mult))
    ) skew(0deg); 
  }
}

@keyframes ge-anim01-top {
  2%, 64% { 
    transform: translate(
      calc(-1% * var(--anim01-translate-mult)), 
      calc(-1% * var(--anim01-translate-mult))
    ); 
  }
  4%, 60% { 
    transform: translate(
      calc(1% * var(--anim01-translate-mult)), 
      calc(-1% * var(--anim01-translate-mult))
    ); 
  }
  62% { 
    transform: translate(
      calc(15% * var(--anim01-translate-mult)), 
      calc(0.5% * var(--anim01-translate-mult))
    ) skew(-15deg); 
  }
}

@keyframes ge-anim01-bottom {
  2%, 64% {  
    transform: translate(calc(-1% * var(--anim01-translate-mult)), 0); 
  }
  4%, 60% {  
    transform: translate(calc(-1% * var(--anim01-translate-mult)), 0); 
  }
  62% {  
    transform: translate(
      calc(-10% * var(--anim01-translate-mult)),
      calc(1% * var(--anim01-translate-mult))
    ) skew(35deg); 
  }
}


/*===================================*/


@keyframes ge-anim02 {
  0% { 
    text-shadow:
      0.05em 0 0 rgba(255, 0, 0, 0.75),
      -0.05em -0.025em 0 rgba(0, 255, 0, 0.75),
      -0.025em 0.05em 0 rgba(0, 0, 255, 0.75);
  }
  14% { 
    text-shadow:
      0.05em 0 0 rgba(255, 0, 0, 0.75),
      -0.05em -0.025em 0 rgba(0, 255, 0, 0.75),
      -0.025em 0.05em 0 rgba(0, 0, 255, 0.75);
  }
  15% {  
    text-shadow:
      -0.05em -0.025em 0 rgba(255, 0, 0, 0.75),
      0.025em 0.025em 0 rgba(0, 255, 0, 0.75),
      -0.05em -0.05em 0 rgba(0, 0, 255, 0.75);
  }
  49% {  
    text-shadow:
      -0.05em -0.025em 0 rgba(255, 0, 0, 0.75),
      0.025em 0.025em 0 rgba(0, 255, 0, 0.75),
      -0.05em -0.05em 0 rgba(0, 0, 255, 0.75);
  }
  50% {  
    text-shadow:
      0.025em 0.05em 0 rgba(255, 0, 0, 0.75),
      0.05em 0 0 rgba(0, 255, 0, 0.75),
      0 -0.05em 0 rgba(0, 0, 255, 0.75);
  }
  99% {  
    text-shadow:
      0.025em 0.05em 0 rgba(255, 0, 0, 0.75),
      0.05em 0 0 rgba(0, 255, 0, 0.75),
      0 -0.05em 0 rgba(0, 0, 255, 0.75);
  }
  100% {  
    text-shadow:
      -0.025em 0 0 rgba(255, 0, 0, 0.75),
      -0.025em -0.025em 0 rgba(0, 255, 0, 0.75),
      -0.025em -0.05em 0 rgba(0, 0, 255, 0.75);
  }
}


/*===================================*/


@keyframes ge-anim03-paths {
  0% { 
    clip-path: polygon(0%  43%, 83% 43%, 83% 22%, 23% 22%, 23% 24%, 91% 24%, 91% 26%, 18% 26%, 18% 83%, 29% 83%, 29% 17%, 41% 17%, 41% 39%, 18% 39%, 18% 82%, 54% 82%, 54% 88%, 19% 88%, 19% 4%, 39%  4%, 39% 14%, 76% 14%, 76% 52%, 23% 52%, 23% 35%, 19% 35%, 19%  8%, 36%  8%, 36% 31%, 73% 31%, 73% 16%,  1% 16%, 1% 56%, 50% 56%, 50%  8%); 
  }

  5% { 
    clip-path: polygon(0% 29%, 44% 29%, 44% 83%, 94% 83%, 94% 56%, 11% 56%, 11% 64%, 94% 64%, 94% 70%, 88% 70%, 88% 32%, 18% 32%, 18% 96%, 10% 96%, 10% 62%, 9% 62%, 9% 84%, 68% 84%, 68% 50%, 52% 50%, 52% 55%, 35% 55%, 35% 87%, 25% 87%, 25% 39%, 15% 39%, 15% 88%, 52% 88%); 
  }

  30% { 
    clip-path: polygon(0% 53%, 93% 53%, 93% 62%, 68% 62%, 68% 37%, 97% 37%, 97% 89%, 13% 89%, 13% 45%, 51% 45%, 51% 88%, 17% 88%, 17% 54%, 81% 54%, 81% 75%, 79% 75%, 79% 76%, 38% 76%, 38% 28%, 61% 28%, 61% 12%, 55% 12%, 55% 62%, 68% 62%, 68% 51%, 0% 51%,  0% 92%, 63% 92%, 63%  4%, 65%  4%); 
  }

  45% { 
    clip-path: polygon(0% 33%, 2% 33%, 2% 69%, 58% 69%, 58% 94%, 55% 94%, 55% 25%, 33% 25%, 33% 85%, 16% 85%, 16% 19%, 5% 19%, 5% 20%, 79% 20%, 79% 96%, 93% 96%, 93% 50%, 5% 50%, 5% 74%, 55% 74%, 55% 57%, 96% 57%, 96% 59%, 87% 59%, 87% 65%, 82% 65%, 82% 39%, 63% 39%, 63% 92%, 4% 92%, 4% 36%, 24% 36%, 24% 70%, 1% 70%, 1% 43%, 15% 43%, 15% 28%, 23% 28%, 23% 71%, 90% 71%, 90% 86%, 97% 86%, 97% 1%, 60% 1%, 60% 67%, 71% 67%, 71% 91%, 17% 91%, 17% 14%, 39% 14%, 39% 30%, 58% 30%, 58% 11%, 52% 11%, 52% 83%, 68% 83%); 
  }

  76% { 
    clip-path: polygon(0% 26%, 15% 26%, 15% 73%, 72% 73%, 72% 70%, 77% 70%, 77% 75%, 8% 75%, 8% 42%, 4% 42%, 4% 61%, 17% 61%, 17% 12%, 26% 12%, 26% 63%, 73% 63%, 73% 43%, 90% 43%, 90% 67%, 50% 67%, 50% 41%, 42% 41%, 42% 46%, 50% 46%, 50% 84%, 96% 84%, 96% 78%, 49% 78%, 49% 25%, 63% 25%, 63% 14%); 
  }

  90% { 
    clip-path: polygon(0% 41%, 13% 41%, 13%  6%, 87%  6%, 87% 93%, 10% 93%, 10% 13%, 89% 13%, 89%  6%, 3%  6%, 3%  8%, 16%  8%, 16% 79%, 0% 79%, 0% 99%, 92% 99%, 92% 90%,  5% 90%, 5% 60%, 0% 60%, 0% 48%, 89% 48%, 89% 13%, 80% 13%, 80% 43%, 95% 43%, 95% 19%, 80% 19%, 80% 85%, 38% 85%, 38% 62%); 
  }

  1%, 7%, 33%, 47%, 78%, 93% { clip-path: none; }
}

@keyframes ge-anim03-movement {
  0%   { top: 0px; left: -20px; }
  15%  { top: 10px; left: 10px; }
  60%  { top: 5px; left: -10px; }
  75%  { top: -5px; left: 20px; }
  100% { top: 10px; left: 5px;  }
}

@keyframes ge-anim03-opacity {
  0%  { opacity: 0.1; }
  5%  { opacity: 0.7; }
  30% { opacity: 0.4; }
  45% { opacity: 0.6; }
  76% { opacity: 0.4; }
  90% { opacity: 0.8; }

  1%, 7%, 33%, 47%, 78%, 93% { opacity: 0; }
}

@keyframes ge-anim03-font {
  0% { font-weight: 100; color: #e0287d; filter: blur(3px); }
  20% { font-weight: 500; color: #fff; filter: blur(0); }
  50% { font-weight: 300; color: #1bc7fb; filter: blur(2px); }
  60% { font-weight: 700; color: #fff; filter: blur(0); }
  90% { font-weight: 500; color: #e0287d; filter: blur(6px); }
}


/*===================================*/


@keyframes ge-anim04-1 {
  0% {
    opacity: 1;
    transform: translate3d(0,0,0);
    -webkit-clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
    clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
  }
  2% {
    -webkit-clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
    clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
  }
  4% {
    -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
    clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
  }
  6% {
    -webkit-clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
    clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
  }
  8% {
    -webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
    clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
  }
  10% {
    -webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
    clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
  }
  12% {
    -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
    clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
  }
  14% {
    -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
    clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
  }
  16% {
    -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
    clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
  }
  18% {
    -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
    clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
  }
  20% {
    -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
    clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
  }
  21.9% {
    opacity: 1;
     transform: translate3d(0,0,0);
  }
  22%, 100% {
    opacity: 0;
    transform: translate3d(0,0,0);
    -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    clip-path: polygon(0 0, 0 0, 0 0, 0 0);
  }
}

@keyframes ge-anim04-2 {
  0% {
    opacity: 1;
    transform: translate3d(-1,0,0);
    -webkit-clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%);
    clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%);
  }
  3% {
    -webkit-clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);
    clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);
  }
  5% {
    -webkit-clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%);
    clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%);
  }
  7% {
    -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
    clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
  }
  9% {
    -webkit-clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%);
    clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%);
  }
  11% {
    -webkit-clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%);
    clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%);
  }
  13% {
    -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
    clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
  }
  15% {
    -webkit-clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%);
    clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%);
  }
  17% {
    -webkit-clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%);
    clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%);
  }
  19% {
    -webkit-clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%);
    clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%);
  }
  20% {
    -webkit-clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%);
    clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%);
  }
  21.9% {
    opacity: 1;
    transform: translate3d(-1,0,0);
  }
  22%, 100% {
    opacity: 0;
    transform: translate3d(0,0,0);
    -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    clip-path: polygon(0 0, 0 0, 0 0, 0 0);
  }
}


/*===================================*/


@keyframes ge-anim05 {
  0%, 13%, 29.5%, 49%, 72.25%, 84% {
    clip-path: none;
    text-shadow: 0 0 10px white;
  }

  9.2%, 27.7%, 45.7%, 69%, 82% {
    text-shadow: 0 0 10px white, 10px 10px 0px #ff88ffff, 3px -4px 0px #88ff88ff;
  }

  9.2% {  
    clip-path: polygon(89% 21%, 50% 31%, 30% 29%, 90% 7%, 79% 46%, 17% 42%, 21% 60%, 31% 53%, 77% 39%, 2% 88%, 48% 2%, 18% 76%, 2% 64%, 87% 90%, 32% 20%, 53% 97%, 19% 86%, 80% 73%, 69% 88%, 76% 68%, 91% 91%, 12% 80%, 77% 15%, 54% 12%, 78% 58%, 93% 18%, 88% 24%, 90% 30%, 67% 76%, 89% 54%, 18% 52%, 96% 49%, 35% 19%, 22% 52%, 38% 7%, 78% 80%, 28% 24%, 78% 58%, 43% 99%, 55% 95%, 80% 85%, 49% 83%, 77% 66%, 23% 49%, 97% 37%, 66% 40%, 61% 8%, 40% 49%, 14% 89%, 56% 10%); 
  }

  27.7% {  
    clip-path: polygon(73% 38%, 53% 27%, 50% 22%, 49% 93%, 83% 7%, 40% 45%, 49% 62%, 0% 17%, 33% 56%, 71% 36%, 59% 86%, 99% 92%, 43% 9%, 48% 62%, 8% 55%, 16% 9%, 58% 1%, 16% 89%, 17% 61%, 98% 91%, 92% 87%, 52% 97%, 29% 95%, 12% 74%, 40% 35%, 83% 96%, 0% 21%, 51% 17%, 86% 24%, 8% 85%, 82% 84%, 60% 70%, 64% 78%, 43% 13%, 2% 98%, 6% 16%, 15% 33%, 42% 64%, 84% 3%, 56% 55%, 42% 12%, 98% 81%, 14% 69%, 1% 96%, 89% 18%, 46% 34%, 65% 0%, 8% 17%, 91% 36%, 21% 24%); 
  }

  45.7% {  
    clip-path: polygon(81% 79%, 25% 5%, 84% 4%, 40% 54%, 81% 17%, 88% 88%, 30% 25%, 46% 6%, 11% 90%, 7% 47%, 67% 2%, 92% 91%, 12% 33%, 76% 75%, 14% 92%, 91% 6%, 85% 60%, 36% 84%, 58% 50%, 43% 53%, 19% 71%, 5% 84%, 83% 11%, 70% 62%, 1% 34%, 87% 11%, 45% 32%, 53% 0%, 73% 6%, 35% 53%, 71% 42%, 12% 51%, 22% 79%, 79% 84%, 3% 7%, 84% 16%, 16% 52%, 81% 92%, 12% 66%, 12% 65%, 43% 89%, 48% 63%, 32% 75%, 1% 40%, 49% 1%, 32% 68%, 42% 33%, 62% 93%, 98% 73%, 46% 48%); 
  }

  69% {  
    clip-path: polygon(89% 82%, 44% 73%, 87% 45%, 77% 4%, 33% 15%, 68% 65%, 87% 48%, 87% 14%, 64% 6%, 60% 70%, 2% 50%, 46% 82%, 97% 43%, 30% 54%, 87% 12%, 85% 3%, 34% 99%, 88% 18%, 84% 74%, 95% 26%, 26% 0%, 81% 86%, 97% 14%, 17% 90%, 15% 11%, 29% 13%, 1% 88%, 88% 21%, 29% 13%, 24% 16%, 45% 25%, 69% 39%, 94% 27%, 41% 77%, 23% 46%, 34% 42%, 77% 12%, 19% 53%, 15% 83%, 95% 24%, 47% 82%, 99% 22%, 53% 60%, 47% 7%, 65% 75%, 51% 3%, 85% 32%, 87% 54%, 31% 99%, 90% 51%); 
  }

  82% { 
    clip-path: polygon(64% 61%, 32% 7%, 33% 69%, 48% 3%, 3% 54%, 18% 3%, 88% 12%, 54% 7%, 75% 18%, 32% 72%, 45% 87%, 68% 57%, 46% 39%, 27% 39%, 9% 27%, 82% 95%, 31% 24%, 75% 99%, 36% 4%, 31% 21%, 0% 55%, 79% 45%, 14% 38%, 12% 70%, 22% 30%, 96% 2%, 32% 7%, 53% 99%, 9% 4%, 10% 58%, 64% 85%, 73% 2%, 75% 71%, 53% 85%, 40% 58%, 21% 0%, 65% 77%, 22% 73%, 53% 61%, 4% 14%, 81% 0%, 65% 58%, 5% 36%, 96% 41%, 71% 30%, 1% 51%, 78% 9%, 11% 23%, 29% 43%, 10% 10%); 
  }
}


[[/module]]