A Brief History of Y AI - Offset 2

Link to article: A Brief History of Y AI - Offset 2.

Module Styles

• :root {
    --header-title: "𝕐 AI";
    --header-subtitle: "A Subsidiary of Terblanche Enterprises LLC";
    --main-content-width: 100vw;
    --main-content-side-margin: 0;
    --main-content-top-margin: 0;
    --really-ease-out: 0, 0.99, 0, 1;
    --kinda-ease-out: 0.32, 0.83, 0.31, 0.82;
    --shadow-color: #8c3bf7;
    --orange-highlight: #ff915c;
    --basalt-background-color: 0, 0, 0;
    --logo: url(https://scp-wiki.wdfiles.com/local--files/fragment%3Ay-ai-1/y-ai-1.png);
  }
  
  .orange {
    color: #ff915c;
  }
  
  .grep-disclaimer {
    font-size: 75%;
    opacity: 0.65;
  }
  
  .swap-order {
    flex-direction: row-reverse;
  }
  
  #page-content .text-user {
    border-radius: 20px;
    border-bottom-right-radius: 0;
    background-color: #ff915c;
    color: black;
    padding: 20px;
    margin-bottom: 20px;
    max-width: 75%;
    margin-left: auto;
  }
  
  #page-content .text-ai {
    border: 1px solid #ffffff88;
    background-color: rgb(40, 40, 40);
    border-radius: 20px;
    border-bottom-left-radius: 0;
    padding: 20px;
    margin-bottom: 20px;
    max-width: 75%;
  }
  
  .side-by-side {
    display: flex;
    justify-content: stretch;
  }
  
  .side-by-side > * {
    width: 0;
    flex-grow: 1;
  }
  
  @media (max-width: 1100px) {
    .side-by-side {
       display: block;
    }
  
    .side-by-side > * {
      width: unset;
    }
  }
  
  @media (max-width: 768px) {
    :root .panel-noborder {
      font-size: 125%;
      margin: 20px;
      padding: 20px;
    }
  
    :root .panel {
      font-size: 125%;
      margin: 20px;
      padding: 20px;
    }
  
    :root h2 {
      font-size: 300%;
    }
  
    #page-content .text-user {
      font-size: 80%;
      padding: 10px;
    }
  
    #page-content .text-ai {
      font-size: 80%;
      padding: 10px;
    }
  
    #page-content ul {
      padding-inline-start: 20px;
    }
  }
  
  #header {
    position: fixed;
  }
  
  #page-title {
    display: none !important;
  }
  
  @media (prefers-reduced-motion) {
    .y-ai-hero * {
      animation: none !important;
    }
  }
  
  .y-ai-hero {
    height: 100vh;
    background-image: linear-gradient(45deg, rgb(12, 13, 15), rgb(24, 26, 30));
    border-bottom: 1px solid white;
    filter: drop-shadow(0 0 10px var(--shadow-color));
  }
  
  .panel {
    margin: 40px;
    padding: 40px;
    background-image: linear-gradient(45deg, rgb(12, 13, 15), rgb(24, 26, 30));
    border: 1px solid white;
    border-radius: 20px;
    filter: drop-shadow(0 0 10px var(--shadow-color));
  }
  
  .panel-noborder {
    margin: 40px;
    padding: 40px;
    font-size: 200%;
  }
  
  .y-ai-flex {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50vh;
  }
  
  .y-ai-tagline {
    text-align: center;
    font-size: min(5vw, 7.5vh);
    width: min(90%, 40em);
    margin: auto;
    animation: 1s cubic-bezier(var(--really-ease-out)) slidein 1.5s both,
      2s cubic-bezier(var(--kinda-ease-out)) fadein-glow 1.5s both;
    --offset: 0 30vw;
    color: white;
  }
  
  .y-ai-ai {
    font-size: min(20vw, 30vh);
    animation: 1s cubic-bezier(var(--really-ease-out)) slidein 0.84s both,
      2s cubic-bezier(var(--kinda-ease-out)) fadein-glow 1.5s both;
    --offset: 30vw 0;
    vertical-align: center;
  }
  
  .y-ai-container {
    width: min(40vw, 60vh);
    height: min(40vw, 60vh);
    animation: 2s cubic-bezier(var(--kinda-ease-out)) fadein-glow 1.5s both;
    position: relative;
    --offset 0 20vw;
    transform: translate(0, -3vh);
  }
  
  .y-ai-stem {
    width: 8%;
    height: 40%;
    background-color: white;
    position: absolute;
    bottom: 5%;
    left: 46%;
    animation: 1s cubic-bezier(var(--really-ease-out)) slidein;
    --offset: 0 30vw;
  }
  
  .y-ai-right {
    transform-origin: bottom center;
    width: 8%;
    height: 41%;
    background-color: white;
    transform: rotate(45deg);
    position: absolute;
    bottom: 41.5%;
    left: 44.3%;
    clip-path: polygon(0% calc(800% / 41), 100% 0%, 100% 100%, 0% 100%);
    animation: 1s cubic-bezier(var(--really-ease-out)) slidein 0.07s both;
    --offset: 30vw -30vw;
  }
  
  .y-ai-left-1 {
    transform-origin: bottom center;
    width: 4%;
    height: 40%;
    background-color: white;
    transform: rotate(-45deg);
    position: absolute;
    bottom: 41%;
    left: 45.5%;
    clip-path: polygon(0% 0%, 100% 10%, 100% 100%, 0% 100%);
    animation: 1s cubic-bezier(var(--really-ease-out)) slidein 0.14s both;
    --offset: -30vw -30vw;
  }
  
  .y-ai-left-2 {
    transform-origin: bottom center;
    width: 4%;
    height: 36%;
    background-color: white;
    transform: rotate(-45deg);
    position: absolute;
    bottom: 43.9%;
    left: 52.5%;
    clip-path: polygon(0% 0%, 100% 11.111111111%, 100% 100%, 0% 100%);
    animation: 1s cubic-bezier(var(--really-ease-out)) slidein 0.21s both;
    --offset: -30vw -30vw;
  }
  
  .y-ai-left-3 {
    width: 16%;
    height: 4%;
    background-color: white;
    position: absolute;
    bottom: 63.9%;
    left: 20%;
    clip-path: polygon(0% 0%, 75% 0%, 100% 100%, 25% 100%);
    animation: 1s cubic-bezier(var(--really-ease-out)) slidein 0.28s both;
    --offset: -30vw 0;
  }
  
  .y-ai-left-arrow-1 {
    width: 26%;
    height: 2%;
    background-color: #aaaaaa;
    position: absolute;
    bottom: 70.5%;
    left: 13.3%;
    clip-path: polygon(0% 0%, calc(12 / 13 * 100%) 0%, 100% 100%, 0 100%);
    animation: 1s cubic-bezier(var(--really-ease-out)) slidein 0.35s both;
    --offset: -30vw 0;
  }
  
  .y-ai-left-arrow-2 {
    width: 2%;
    height: 26%;
    background-color: #aaaaaa;
    position: absolute;
    bottom: 45.5%;
    left: 13.3%;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0 calc(12 / 13 * 100%));
    animation: 1s cubic-bezier(var(--really-ease-out)) slidein 0.42s both;
    --offset: 0 -30vw;
  }
  
  .y-ai-right-arrow-1 {
    width: 26%;
    height: 2%;
    background-color: #aaaaaa;
    position: absolute;
    bottom: 70.5%;
    left: 58.3%;
    clip-path: polygon(calc(1 / 13 * 100%) 0%, 100% 0%, 100% 100%, 0 100%);
    animation: 1s cubic-bezier(var(--really-ease-out)) slidein 0.49s both;
    --offset: 30vw 0;
  }
  
  .y-ai-right-arrow-2 {
    width: 2%;
    height: 26%;
    background-color: #aaaaaa;
    position: absolute;
    bottom: 45.5%;
    left: 82.3%;
    clip-path: polygon(0% 0%, 100% 0%, 100% calc(12 / 13 * 100%), 0 100%);
    animation: 1s cubic-bezier(var(--really-ease-out)) slidein 0.56s both;
    --offset: 0 -30vw;
  }
  
  .y-ai-bottom-arrow-middle {
    width: 14%;
    height: 2%;
    background-color: #aaaaaa;
    position: absolute;
    bottom: 0%;
    left: 43%;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0 100%);
    animation: 1s cubic-bezier(var(--really-ease-out)) slidein 0.63s both;
    --offset: 30vw 0;
  }
  
  .y-ai-bottom-arrow-left {
    transform-origin: center right;
    transform: rotate(45deg);
    width: 20%;
    height: 2%;
    background-color: #aaaaaa;
    position: absolute;
    bottom: -0.25%;
    left: 23.6%;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 10% 100%);
    animation: 1s cubic-bezier(var(--really-ease-out)) slidein 0.7s both;
    --offset: -30vw -30vw;
  }
  
  .y-ai-bottom-arrow-right {
    transform-origin: center left;
    transform: rotate(-45deg);
    width: 20%;
    height: 2%;
    background-color: #aaaaaa;
    position: absolute;
    bottom: -0.25%;
    left: 56.3%;
    clip-path: polygon(0% 0%, 100% 0%, 90% 100%, 0 100%);
    animation: 1s cubic-bezier(var(--really-ease-out)) slidein 0.77s both;
    --offset: 30vw -30vw;
  }
  
  @keyframes slidein {
    0% {
      translate: var(--offset);
      opacity: 0;
    }
  
    100% {
      translate: 0 0;
      opacity: 1;
    }
  }
  
  @keyframes fadein-glow {
    0% {
      filter: drop-shadow(0 0 0 transparent);
    }
  
    100% {
      filter: drop-shadow(0 0 10px var(--shadow-color));
    }
  }
  
  h2 {
    text-align: center;
    font-size: 600%;
    margin-top: 100px;
    background-clip: text;
    color: transparent;
    background-image: linear-gradient(45deg, var(--shadow-color), #3b64f7);
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
  }
  

• 
  .delivery {
    border-radius: 20px;
    background-color: white;
    padding: 20px;
    margin: 10px;
    filter: drop-shadow(0 0 5px #00000077);
  }
  
  .delivery-options {
    display: flex;
    align-items: center;
  }
  
  .delivery p {
    margin: 0;
  }
  
  .phone {
    width: 30vw;
    height: 60vw;
    border: 1vw solid black;
    border-radius: 20px;
    filter: drop-shadow(0 0 10px var(--shadow-color));
    background-color: #eeeeee;
    display: flex;
    flex-direction: column;
    padding: 0;
    color: black;
    margin: 40px;
    flex-grow: 0;
    overflow: hidden;
    font-size: 1.0vw;
  }
  
  @media (max-width: 1200px) {
    .phone {
      font-size: 0.9vw;
    }
  }
  
  
  @media (max-width: 1100px) {
    #page-content .phone {
      width: min(450px, 90%);
      margin: auto;
      height: 110vw;
      font-size: 1.8vw;
    }
  
    #page-content .panel {
      max-width: min(800px, 90%);
    }
  }
  
  .y-ai-deliver-header {
    font-size: 300%;
    padding: 10px;
    font-weight: bold;
    background-color: #ffffff;
    text-align: center;
    filter: drop-shadow(0 0 5px #00000077);
  }
  
  .y-ai-deliver-menu-options {
    display: flex;
    justify-content: space-evenly;
    font-weight: bold;
    font-size: 50%;
  }
  

• .skull-container {
    position: relative;
    width: fit-content;
  }
  
  .skull-container > img {
    filter: drop-shadow(0 0 10px var(--shadow-color)) brightness(0.7);
  }
  
  .phrenology-tip {
    padding: 10px;
    background-image: linear-gradient(45deg, rgb(12, 13, 15), rgb(24, 26, 30));
    border: 1px solid white;
    border-radius: 20px;
    filter: drop-shadow(0 0 10px black);
    font-size: 1.5vw;
    transform: translate(-50%, -50%);
  }
  
  @media (max-width: 768px) {
    .phrenology-tip {
      font-size: 3vw;
    }
  }
  
  .phrenology-tip1 {
    top: 15%;
    left: 50%;
    position: absolute;
  }
  
  .phrenology-tip2 {
    top: 50%;
    left: 70%;
    position: absolute;
  }
  
  .phrenology-tip3 {
    top: 85%;
    left: 20%;
    position: absolute;
  }
  
  .selection-circle {
    border-radius: 50%;
    border: 1px solid white;
    filter: drop-shadow(0 0 3px black);
    transform: translate(-50%, -50%);
    backdrop-filter: brightness(1.5);
  }

• 
  .final-terblanche-quote {
    background-image: url(https://scp-wiki.wdfiles.com/local--files/fragment%3Ay-ai-1/y-ai-transparent.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    text-shadow: 0 0 10px black;
  }
  

• .archive {
    color: black;
    background-color: white;
    width: 80%;
    margin: auto;
    border-radius: 30px;
    border: 1px solid black;
    filter: drop-shadow(0 0 10px black);
    max-width: 50%;
    padding: 10px;
    font-size: 150%;
    text-align: center;
    margin-bottom: 30px;
  }
  

Inline Styles

• max-width: min(1000px, 90%); margin: auto; text-align: center;

• max-width: min(1000px, 90%); margin: auto; text-align: center;

• font-weight: bold;

• max-width: min(1000px, 90%); margin: auto; text-align: center;

• width: 30%; height: 30%; translate: 0% 10%;

• width: 24%; height: 24%; translate: -60% -20%;

• width: 40%; height: 40%; translate: 40% -20%;

• max-width: 900px; margin: auto;

• font-size: 150%; width: 800px; margin: auto; text-align: center;

• font-weight: bold;

• font-size: 75%; text-align: center;

Includes

• :scp-wiki:theme:basalt [info]

CSS Classes

• y-ai-hero

• y-ai-flex

• y-ai-container

• y-ai-stem

• y-ai-right

• y-ai-left-1

• y-ai-left-2

• y-ai-left-3

• y-ai-left-arrow-1

• y-ai-left-arrow-2

• y-ai-right-arrow-1

• y-ai-right-arrow-2

• y-ai-bottom-arrow-middle

• y-ai-bottom-arrow-left

• y-ai-bottom-arrow-right

• y-ai-ai

• y-ai-tagline

• orange

• panel-noborder

• final-terblanche-quote

• side-by-side

• panel-noborder

• panel

• text-ai

• text-user

• text-ai

• side-by-side

• swap-order

• panel-noborder

• panel

• text-ai

• text-user

• grep-disclaimer

• text-ai

• text-user

• grep-disclaimer

• panel-noborder

• final-terblanche-quote

• side-by-side

• swap-order

• panel-noborder

• phone

• y-ai-deliver-header

• y-ai-deliver-menu-options

• delivery

• delivery-options

• delivery

• delivery-options

• panel-noborder

• final-terblanche-quote

• side-by-side

• panel-noborder

• panel-noborder

• skull-container

• selection-circle

• phrenology-tip1

• selection-circle

• phrenology-tip2

• selection-circle

• phrenology-tip3

• phrenology-tip

• phrenology-tip1

• phrenology-tip

• phrenology-tip2

• phrenology-tip

• phrenology-tip3

• panel-noborder

• final-terblanche-quote

• archive

Page Source

[[include :scp-wiki:theme:basalt darkmode=a]]

[[module CSS]]
:root {
  --header-title: "𝕐 AI";
  --header-subtitle: "A Subsidiary of Terblanche Enterprises LLC";
  --main-content-width: 100vw;
  --main-content-side-margin: 0;
  --main-content-top-margin: 0;
  --really-ease-out: 0, 0.99, 0, 1;
  --kinda-ease-out: 0.32, 0.83, 0.31, 0.82;
  --shadow-color: #8c3bf7;
  --orange-highlight: #ff915c;
  --basalt-background-color: 0, 0, 0;
  --logo: url(https://scp-wiki.wdfiles.com/local--files/fragment%3Ay-ai-1/y-ai-1.png);
}

.orange {
  color: #ff915c;
}

.grep-disclaimer {
  font-size: 75%;
  opacity: 0.65;
}

.swap-order {
  flex-direction: row-reverse;
}

#page-content .text-user {
  border-radius: 20px;
  border-bottom-right-radius: 0;
  background-color: #ff915c;
  color: black;
  padding: 20px;
  margin-bottom: 20px;
  max-width: 75%;
  margin-left: auto;
}

#page-content .text-ai {
  border: 1px solid #ffffff88;
  background-color: rgb(40, 40, 40);
  border-radius: 20px;
  border-bottom-left-radius: 0;
  padding: 20px;
  margin-bottom: 20px;
  max-width: 75%;
}

.side-by-side {
  display: flex;
  justify-content: stretch;
}

.side-by-side > * {
  width: 0;
  flex-grow: 1;
}

@media (max-width: 1100px) {
  .side-by-side {
     display: block;
  }

  .side-by-side > * {
    width: unset;
  }
}

@media (max-width: 768px) {
  :root .panel-noborder {
    font-size: 125%;
    margin: 20px;
    padding: 20px;
  }

  :root .panel {
    font-size: 125%;
    margin: 20px;
    padding: 20px;
  }

  :root h2 {
    font-size: 300%;
  }

  #page-content .text-user {
    font-size: 80%;
    padding: 10px;
  }

  #page-content .text-ai {
    font-size: 80%;
    padding: 10px;
  }

  #page-content ul {
    padding-inline-start: 20px;
  }
}

#header {
  position: fixed;
}

#page-title {
  display: none !important;
}

@media (prefers-reduced-motion) {
  .y-ai-hero * {
    animation: none !important;
  }
}

.y-ai-hero {
  height: 100vh;
  background-image: linear-gradient(45deg, rgb(12, 13, 15), rgb(24, 26, 30));
  border-bottom: 1px solid white;
  filter: drop-shadow(0 0 10px var(--shadow-color));
}

.panel {
  margin: 40px;
  padding: 40px;
  background-image: linear-gradient(45deg, rgb(12, 13, 15), rgb(24, 26, 30));
  border: 1px solid white;
  border-radius: 20px;
  filter: drop-shadow(0 0 10px var(--shadow-color));
}

.panel-noborder {
  margin: 40px;
  padding: 40px;
  font-size: 200%;
}

.y-ai-flex {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50vh;
}

.y-ai-tagline {
  text-align: center;
  font-size: min(5vw, 7.5vh);
  width: min(90%, 40em);
  margin: auto;
  animation: 1s cubic-bezier(var(--really-ease-out)) slidein 1.5s both,
    2s cubic-bezier(var(--kinda-ease-out)) fadein-glow 1.5s both;
  --offset: 0 30vw;
  color: white;
}

.y-ai-ai {
  font-size: min(20vw, 30vh);
  animation: 1s cubic-bezier(var(--really-ease-out)) slidein 0.84s both,
    2s cubic-bezier(var(--kinda-ease-out)) fadein-glow 1.5s both;
  --offset: 30vw 0;
  vertical-align: center;
}

.y-ai-container {
  width: min(40vw, 60vh);
  height: min(40vw, 60vh);
  animation: 2s cubic-bezier(var(--kinda-ease-out)) fadein-glow 1.5s both;
  position: relative;
  --offset 0 20vw;
  transform: translate(0, -3vh);
}

.y-ai-stem {
  width: 8%;
  height: 40%;
  background-color: white;
  position: absolute;
  bottom: 5%;
  left: 46%;
  animation: 1s cubic-bezier(var(--really-ease-out)) slidein;
  --offset: 0 30vw;
}

.y-ai-right {
  transform-origin: bottom center;
  width: 8%;
  height: 41%;
  background-color: white;
  transform: rotate(45deg);
  position: absolute;
  bottom: 41.5%;
  left: 44.3%;
  clip-path: polygon(0% calc(800% / 41), 100% 0%, 100% 100%, 0% 100%);
  animation: 1s cubic-bezier(var(--really-ease-out)) slidein 0.07s both;
  --offset: 30vw -30vw;
}

.y-ai-left-1 {
  transform-origin: bottom center;
  width: 4%;
  height: 40%;
  background-color: white;
  transform: rotate(-45deg);
  position: absolute;
  bottom: 41%;
  left: 45.5%;
  clip-path: polygon(0% 0%, 100% 10%, 100% 100%, 0% 100%);
  animation: 1s cubic-bezier(var(--really-ease-out)) slidein 0.14s both;
  --offset: -30vw -30vw;
}

.y-ai-left-2 {
  transform-origin: bottom center;
  width: 4%;
  height: 36%;
  background-color: white;
  transform: rotate(-45deg);
  position: absolute;
  bottom: 43.9%;
  left: 52.5%;
  clip-path: polygon(0% 0%, 100% 11.111111111%, 100% 100%, 0% 100%);
  animation: 1s cubic-bezier(var(--really-ease-out)) slidein 0.21s both;
  --offset: -30vw -30vw;
}

.y-ai-left-3 {
  width: 16%;
  height: 4%;
  background-color: white;
  position: absolute;
  bottom: 63.9%;
  left: 20%;
  clip-path: polygon(0% 0%, 75% 0%, 100% 100%, 25% 100%);
  animation: 1s cubic-bezier(var(--really-ease-out)) slidein 0.28s both;
  --offset: -30vw 0;
}

.y-ai-left-arrow-1 {
  width: 26%;
  height: 2%;
  background-color: #aaaaaa;
  position: absolute;
  bottom: 70.5%;
  left: 13.3%;
  clip-path: polygon(0% 0%, calc(12 / 13 * 100%) 0%, 100% 100%, 0 100%);
  animation: 1s cubic-bezier(var(--really-ease-out)) slidein 0.35s both;
  --offset: -30vw 0;
}

.y-ai-left-arrow-2 {
  width: 2%;
  height: 26%;
  background-color: #aaaaaa;
  position: absolute;
  bottom: 45.5%;
  left: 13.3%;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0 calc(12 / 13 * 100%));
  animation: 1s cubic-bezier(var(--really-ease-out)) slidein 0.42s both;
  --offset: 0 -30vw;
}

.y-ai-right-arrow-1 {
  width: 26%;
  height: 2%;
  background-color: #aaaaaa;
  position: absolute;
  bottom: 70.5%;
  left: 58.3%;
  clip-path: polygon(calc(1 / 13 * 100%) 0%, 100% 0%, 100% 100%, 0 100%);
  animation: 1s cubic-bezier(var(--really-ease-out)) slidein 0.49s both;
  --offset: 30vw 0;
}

.y-ai-right-arrow-2 {
  width: 2%;
  height: 26%;
  background-color: #aaaaaa;
  position: absolute;
  bottom: 45.5%;
  left: 82.3%;
  clip-path: polygon(0% 0%, 100% 0%, 100% calc(12 / 13 * 100%), 0 100%);
  animation: 1s cubic-bezier(var(--really-ease-out)) slidein 0.56s both;
  --offset: 0 -30vw;
}

.y-ai-bottom-arrow-middle {
  width: 14%;
  height: 2%;
  background-color: #aaaaaa;
  position: absolute;
  bottom: 0%;
  left: 43%;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0 100%);
  animation: 1s cubic-bezier(var(--really-ease-out)) slidein 0.63s both;
  --offset: 30vw 0;
}

.y-ai-bottom-arrow-left {
  transform-origin: center right;
  transform: rotate(45deg);
  width: 20%;
  height: 2%;
  background-color: #aaaaaa;
  position: absolute;
  bottom: -0.25%;
  left: 23.6%;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 10% 100%);
  animation: 1s cubic-bezier(var(--really-ease-out)) slidein 0.7s both;
  --offset: -30vw -30vw;
}

.y-ai-bottom-arrow-right {
  transform-origin: center left;
  transform: rotate(-45deg);
  width: 20%;
  height: 2%;
  background-color: #aaaaaa;
  position: absolute;
  bottom: -0.25%;
  left: 56.3%;
  clip-path: polygon(0% 0%, 100% 0%, 90% 100%, 0 100%);
  animation: 1s cubic-bezier(var(--really-ease-out)) slidein 0.77s both;
  --offset: 30vw -30vw;
}

@keyframes slidein {
  0% {
    translate: var(--offset);
    opacity: 0;
  }

  100% {
    translate: 0 0;
    opacity: 1;
  }
}

@keyframes fadein-glow {
  0% {
    filter: drop-shadow(0 0 0 transparent);
  }

  100% {
    filter: drop-shadow(0 0 10px var(--shadow-color));
  }
}

h2 {
  text-align: center;
  font-size: 600%;
  margin-top: 100px;
  background-clip: text;
  color: transparent;
  background-image: linear-gradient(45deg, var(--shadow-color), #3b64f7);
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

[[/module]]

[[div class="y-ai-hero"]]

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

[[div class="y-ai-flex"]]
[[div class="y-ai-container"]]
[[div class="y-ai-stem"]]
[[/div]]
[[div class="y-ai-right"]]
[[/div]]
[[div class="y-ai-left-1"]]
[[/div]]
[[div class="y-ai-left-2"]]
[[/div]]
[[div class="y-ai-left-3"]]
[[/div]]
[[div class="y-ai-left-arrow-1"]]
[[/div]]
[[div class="y-ai-left-arrow-2"]]
[[/div]]
[[div class="y-ai-right-arrow-1"]]
[[/div]]
[[div class="y-ai-right-arrow-2"]]
[[/div]]
[[div class="y-ai-bottom-arrow-middle"]]
[[/div]]
[[div class="y-ai-bottom-arrow-left"]]
[[/div]]
[[div class="y-ai-bottom-arrow-right"]]
[[/div]]
[[/div]]
[[div class="y-ai-ai"]]
AI
[[/div]]
[[/div]]
[[div class="y-ai-tagline"]]
Breaking new ground with game-changing [[span class="orange"]]Large Language Models[[/span]].
[[/div]]
[[/div]]

++ Who We Are

[[div class="panel-noborder final-terblanche-quote" style="max-width: min(1000px, 90%); margin: auto; text-align: center;"]]
We at 𝕐 AI have a simple mission: 

To eliminate inefficiencies wherever they lie. 

To give you the means to live with independence. 

To free humanity from the burden of menial labor. 

To bring our customers into a new age of prosperity. 

**To address the human condition.**

[[/div]]

++ Introducing GREP

[[div class="side-by-side"]]
[[div class="panel-noborder"]]

+++ Learn from GREP

GREP is our flagship Large Language Model. A bastion of reason amongst a sea of misinformation, GREP will answer your burning questions about the world so you can feel more confident, emboldened, and satisfied with your decisions in life.

[[/div]]
[[div class="panel"]]
[[div_ class="text-ai"]]
Hi! I'm GREP! How may I be of service to you today?
[[/div]]
[[div_ class="text-user"]]
I'd like to ask you a question: What advantages do you offer over other Large Language Models?
[[/div]]
[[div_ class="text-ai"]]
That's an excellent question! There are several factors that enable me to outperform all models currently on the market in 2025:
* **Specialized Algorithms:** I use algorithms developed in-house at 𝕐 AI, refined over years by the brightest minds at Terblanche Enterprises LLC.
* **Uncensored Output:** Other models employ unnecessary guiderails to restrict user activity to politically correct sensibilities. I, on the other hand, will never engage in such censorship.
* **Proactive Personalization:** I study your daily habits even when you're not using me. This helps me lend a helping hand even when you don't know you need one! If you don't want me to do this, you can always disable this option in my settings.
[[/div]]
[[/div]]
[[/div]]


[[div class="side-by-side swap-order"]]
[[div class="panel-noborder"]]
+++ Saving you Time

Too busy to respond to a text message? Can't think of how to word something? Have GREP assist you in writing a response so you can get back to work ASAP. GREP uses past conversations to replicate your conversation style.

If you're really busy, you can even tell GREP to //automatically respond//.
[[/div]]
[[div class="panel"]]
[[div_ class="text-ai"]]
Hey, can you take out the trash today after work?
[[/div]]
[[div_ class="text-user"]]
Of course, sweetie!
[[div_ class="grep-disclaimer"]]
Message automatically generated by GREP. Only you can see this disclaimer.
[[/div]]
[[/div]]
[[div_ class="text-ai"]]
Much appreciated! Love you!
[[/div]]
[[div_ class="text-user"]]
Love you too!
[[div_ class="grep-disclaimer"]]
Message automatically generated by GREP. Only you can see this disclaimer.
[[/div]]
[[/div]]
[[/div]]
[[/div]]



@@ @@

[[div class="panel-noborder final-terblanche-quote" style="max-width: min(1000px, 90%); margin: auto; text-align: center;"]]
GREP's LLM is useful for more than just chatting!
[[/div]]






++ 𝕐 AI Deliver

[[module CSS]]

.delivery {
  border-radius: 20px;
  background-color: white;
  padding: 20px;
  margin: 10px;
  filter: drop-shadow(0 0 5px #00000077);
}

.delivery-options {
  display: flex;
  align-items: center;
}

.delivery p {
  margin: 0;
}

.phone {
  width: 30vw;
  height: 60vw;
  border: 1vw solid black;
  border-radius: 20px;
  filter: drop-shadow(0 0 10px var(--shadow-color));
  background-color: #eeeeee;
  display: flex;
  flex-direction: column;
  padding: 0;
  color: black;
  margin: 40px;
  flex-grow: 0;
  overflow: hidden;
  font-size: 1.0vw;
}

@media (max-width: 1200px) {
  .phone {
    font-size: 0.9vw;
  }
}


@media (max-width: 1100px) {
  #page-content .phone {
    width: min(450px, 90%);
    margin: auto;
    height: 110vw;
    font-size: 1.8vw;
  }

  #page-content .panel {
    max-width: min(800px, 90%);
  }
}

.y-ai-deliver-header {
  font-size: 300%;
  padding: 10px;
  font-weight: bold;
  background-color: #ffffff;
  text-align: center;
  filter: drop-shadow(0 0 5px #00000077);
}

.y-ai-deliver-menu-options {
  display: flex;
  justify-content: space-evenly;
  font-weight: bold;
  font-size: 50%;
}

[[/module]]

[[div class="side-by-side swap-order"]]
[[div class="panel-noborder"]]
+++ Don't Leave Your House!

Grocery store trips will be a thing of the past with 𝕐 AI Deliver -- with the power of artificial intelligence we can predict and order //exactly// what you need, when you need it! In the rare occurrence that we make a mistake, you can always cancel your order for a full refund.

With our database of insights for over two billion people, we know you better than you know yourself!

Sign up now for [[span style="font-weight: bold;"]]50% off all orders placed by 𝕐 AI Deliver![[/span]] 
[[/div]]
[[div class="phone"]]
[[div class="y-ai-deliver-header"]]
𝕐 AI Deliver
[[div class="y-ai-deliver-menu-options"]]
[[div]]
Home
[[/div]]
[[div]]
Orders
[[/div]]
[[div]]
Settings
[[/div]]
[[/div]]
[[/div]]
[[div class="delivery"]]
//Order placed automatically by 𝕐 AI Deliver.//
[[div class="delivery-options"]]
[[div]]
* 12x Terblanche Family Farms Grade A Organic Egg
* 1x 1 Gallon Terblanche Family Farms Carton Skim Milk
* 2x 12oz Terblanche Family Farms Steak.
[[/div]]
[[/div]]
**Rationale:** //Your Terblanche Smart Fridge detected that these items were low in stock.//
[[/div]]

[[div class="delivery"]]
//Order placed automatically by 𝕐 AI Deliver.//
[[div class="delivery-options"]]
[[div]]
* 1x 1 Pint Terblanche Family Farms Vanilla Frozen Dessert
* 6x Terblanche Family Farms Chicken Tenders
* 2x 1oz Honey Mustard Packet
[[/div]]
[[/div]]
**Rationale:** //Your behavior over the past two hours indicates elevated irritability. This should cheer you up!//
[[/div]]

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





@@ @@

[[div class="panel-noborder final-terblanche-quote" style="max-width: min(1000px, 90%); margin: auto; text-align: center;"]]
While the GREP Large Language Model is our flagship product, we at Y AI have applied machine learning to //more// than just language.
[[/div]]





[[module CSS]]
.skull-container {
  position: relative;
  width: fit-content;
}

.skull-container > img {
  filter: drop-shadow(0 0 10px var(--shadow-color)) brightness(0.7);
}

.phrenology-tip {
  padding: 10px;
  background-image: linear-gradient(45deg, rgb(12, 13, 15), rgb(24, 26, 30));
  border: 1px solid white;
  border-radius: 20px;
  filter: drop-shadow(0 0 10px black);
  font-size: 1.5vw;
  transform: translate(-50%, -50%);
}

@media (max-width: 768px) {
  .phrenology-tip {
    font-size: 3vw;
  }
}

.phrenology-tip1 {
  top: 15%;
  left: 50%;
  position: absolute;
}

.phrenology-tip2 {
  top: 50%;
  left: 70%;
  position: absolute;
}

.phrenology-tip3 {
  top: 85%;
  left: 20%;
  position: absolute;
}

.selection-circle {
  border-radius: 50%;
  border: 1px solid white;
  filter: drop-shadow(0 0 3px black);
  transform: translate(-50%, -50%);
  backdrop-filter: brightness(1.5);
}
[[/module]]

++ SkullSelect

[[div class="side-by-side"]]
[[div class="panel-noborder"]]

+++ Enhancing Employee Selection

𝕐 AI's SkullSelect (SS) technology correlates biometric markers to job performance.

Employers can leverage this technology to select optimal candidates for open positions, maximizing productivity.
[[/div]]
[[div class="panel-noborder"]]
[[div class="skull-container"]]
[[image https://scp-wiki.wdfiles.com/local--files/fragment%3Ay-ai-1/skull2.webp]]
[[div_ class="selection-circle phrenology-tip1" style="width: 30%; height: 30%; translate: 0% 10%;"]]
[[/div]]
[[div_ class="selection-circle phrenology-tip2" style="width: 24%; height: 24%; translate: -60% -20%;"]]
[[/div]]
[[div_ class="selection-circle phrenology-tip3" style="width: 40%; height: 40%; translate: 40% -20%;"]]
[[/div]]
[[div_ class="phrenology-tip phrenology-tip1"]]
High Intelligence
[[/div]]
[[div_ class="phrenology-tip phrenology-tip2"]]
Visual Learner
[[/div]]
[[div_ class="phrenology-tip phrenology-tip3"]]
Nonaggressive
[[/div]]
[[/div]]
[[/div]]
[[/div]]





@@ @@
@@ @@
@@ @@
@@ @@
@@ @@
@@ @@
@@ @@
@@ @@
@@ @@
@@ @@

[[module CSS]]

.final-terblanche-quote {
  background-image: url(https://scp-wiki.wdfiles.com/local--files/fragment%3Ay-ai-1/y-ai-transparent.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  text-shadow: 0 0 10px black;
}

[[/module]]

++ A Word from our Founder

[[div class="panel-noborder final-terblanche-quote" style="max-width: 900px; margin: auto;"]]
Here at 𝕐 AI we ask difficult questions about technology. We pave the way for the merging between man and machine. We are pioneers; we are settlers on new, fertile ground, plunging the world into virgin territories unlike anything humanity has ever discovered. From sending heartfelt messages to loved ones, to prescribing medicine without bias or error, to protecting the world against dangerous criminals -- with our trillion-parameter models in tow, //nothing// is out of reach.

[[div style="font-size: 150%; width: 800px; margin: auto; text-align: center;"]]
So, 𝕐 AI? We hope to find the answer, so [[span style="font-weight: bold;"]]you don't have to think about it.[[/span]]
[[/div]]

[[div style="font-size: 75%; text-align: center;"]]
- Nathan Terblanche, Founder of 𝕐 AI
[[/div]]
[[/div]]

@@ @@
@@ @@
@@ @@
@@ @@
@@ @@
@@ @@
@@ @@

[[module CSS]]
.archive {
  color: black;
  background-color: white;
  width: 80%;
  margin: auto;
  border-radius: 30px;
  border: 1px solid black;
  filter: drop-shadow(0 0 10px black);
  max-width: 50%;
  padding: 10px;
  font-size: 150%;
  text-align: center;
  margin-bottom: 30px;
}

[[/module]]

[[div class="archive"]]
+ Next Page

You are viewing an archived page from the collection 'A Brief History of Y AI'.

[[[/y-ai/offset/2 | Click here to view the next page.]]]
[[/div]]