<div class="container" style="font-size:40px">
<span class="scrabble animate" style="--n:5"><span>Hello</span></span>
</div>
<div class="container" style="font-size:25px">
<span class="scrabble"><span>I</span></span>
  <span class="scrabble"><span>am</span></span>
<span class="scrabble animate" style="--n:4"><span>Afif</span></span>
</div>

<div class="container" style="font-size:20px">
<span class="scrabble"><span>A</span></span>
  <span class="scrabble"><span>CSS</span></span>
<span class="scrabble animate" style="--n:6"><span>Hacker</span></span>
</div>

.scrabble {
  display: inline-flex;
  text-transform:uppercase;
  position:relative;
  font-weight:bold;
  border: 5px solid;
  border-width: 0 5px 5px 0;
  border-image: linear-gradient(45deg,#0000 6px,#d0cfcd 0 calc(100% - 0.707*(1ch + 4px + 1em)),#b1b1b1 0 calc(100% - 6px),#0000 0) 5;
}
.scrabble + .scrabble {
  margin-left: calc(1ch + 1em - 7px)
}
.scrabble span {
  position:relative;
  white-space:nowrap;
  overflow:hidden;
  line-height: calc(1ch + 1em);
  clip-path: inset(0 calc(.5em - 2px) 0 0);
  margin-right: calc(2px - .5em);
  letter-spacing: 1em;
  background: 
    linear-gradient(#dedddb 0 0) bottom/100% 2px no-repeat,
    conic-gradient(from 90deg at 2px 2px,#0000 90deg,#dedddb 0) 
    0 0/calc(1ch + 1em) 100%,
    #f6f4f0;
  padding-left: .5em;
}

.scrabble span:before {
  content: "1 2 4 3 1 1 4 3 2 1 4 6 2 1 3 2 2 7 1 1";
  position: absolute;
  bottom: 9px;
  left: calc((1ch + 1em)/.35 - 1.5ch);
  letter-spacing: calc(1ch + 1.08em);
  font-size: 0.35em;
  line-height: 0;
  color: #848484;
}
.animate span{
  animation:t calc(.5s*var(--n)) steps(var(--n)) forwards;
  width:calc(var(--n)*(1ch + 1em));
}

.scrabble.animate:before {
  content: "";
  position: absolute;
  top:50%;
  transform:translateY(-60%);
  width: calc(1ch + 1.2em);
  height: calc(1ch + 1.8em);
  background: 
      linear-gradient(#000 0 0) 18% 45%/1.5px 20%,
      radial-gradient(circle closest-side,#fff 98%,#0000) 0 50%/30% 50%,       
      radial-gradient(circle closest-side,#fff 98%,#0000) 25% -3%/20% 50%,     
      radial-gradient(circle closest-side,#fff 98%,#0000) 50% 10%/20% 50%,     
      radial-gradient(circle closest-side,#fff 98%,#0000) 75% 27%/20% 50%,     
      radial-gradient(circle closest-side,#fff 98%,#0000) 100% 48%/20% 50%,     
      linear-gradient(#fff 0 0) 25% 100%/21% 75%,     
      linear-gradient(#fff 0 0) 50% 100%/21% 69%,     
      linear-gradient(#fff 0 0) 75% 100%/21% 60%,     
      linear-gradient(#fff 0 0) 0 65%/100% 21%,
      linear-gradient(to bottom right,#fff 50%,#0000 0) 100% 100%/22% 29%,
      linear-gradient(to bottom left,#fff 50%,#0000 0) 0 100%/21% 29%;
  background-repeat: no-repeat;
  z-index: 1;
  left:100%;
  animation:d .5s calc(.5s*var(--n)) forwards;
  filter: drop-shadow(0px 0px 1px black) drop-shadow(0px 0px 1px black) drop-shadow(0px 0px 1px black) drop-shadow(0px 0px 1px black) drop-shadow(0px 0px 1px black);
}

@keyframes t {
  from {width:0}
}
@keyframes d {
  to {opacity:0}
}

.container {
  font-size: 45px;
  display:flex;
  margin:5px;
  font-family: monospace;
  padding:calc(1ch + 1em - 5px) calc(1ch + 1em - 5px);
  background:conic-gradient(from 90deg at 2px 2px,#0000 90deg,#fff 0) 
    0 0/calc(1ch + 1em) calc(1ch + 1em) #e8e1ce
}

body {
  margin:0;
}