Consolesque marqueeish text
<div class="console">
<div class="name">ROBROBROBROBROBROB</div>
<div class="name">ROBROBROBROBROBROB</div>
<div class="name">ROBROBROBROBROBROB</div>
</div> @font-face {
font-family: LimeLight;
src: url("Limelight-Regular.ttf");
font-display: swap;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
:root {
--cols: 3;
--animation-len: 12s;
}
@media screen and (min-width: 800px) {
:root {
--animation-len: 16s;
}
}
body {
width: 100dvw;
margin: 0;
}
.console {
width: 100%;
height: 100dvh;
display: grid;
grid-template-columns: repeat(3, 1fr);
background-color: hsl(140, 50%, 10%);
overflow: hidden;
cursor: default;
}
.name {
color: transparent;
-webkit-text-stroke-color: hsl(140, 100%, 70%);
-webkit-text-stroke-width: 2px;
font-family: Limelight, sans-serif;
font-size: calc(90dvw / var(--cols));
line-height: 1;
text-transform: uppercase;
writing-mode: vertical-lr;
text-orientation: mixed;
filter: drop-shadow(0 0 2px hsl(140, 100%, 70%));
}
.name:nth-of-type(even) {
animation: scroll-up;
animation-duration: var(--animation-len);
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.name:nth-of-type(odd) {
transform: rotate(-180deg) translateY(33.33%);
animation: scroll-down;
animation-duration: var(--animation-len);
animation-iteration-count: infinite;
animation-fill-mode: forwards;
animation-timing-function: linear;
}
@keyframes scroll-up {
to {
transform: translateY(-33.33%);
}
}
@keyframes scroll-down {
to {
transform: rotate(-180deg) translateY(0);
}
} Description
I wanted to play with the idea of showcasing my name within a console. I went for columns of scrolling text similar to what the HTML element marquee did, but hopefully in a tasteful way!