speedtag

by joplomacedo

HTML

<div class="block">
<div class="logo">
  <svg data-v-2a183b29="" width="40" height="41" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg" class="atom-logo logo"><path data-v-2a183b29="" d="M6.88855 40.5449L9.21561 31.8516C9.26657 31.6597 9.15277 31.4609 8.96083 31.41L0.267488 29.0795C-0.0433524 28.9963 -0.0977087 28.5801 0.180859 28.4188L8.47333 23.6305C9.5927 22.985 10.9719 22.985 12.0913 23.6305L24.2107 30.6286C24.4502 30.7679 24.4502 31.1144 24.2107 31.2537L7.41682 40.9509C7.13995 41.1106 6.80702 40.8558 6.88855 40.5449Z" fill="url(#paint0_linear)"></path> <path data-v-2a183b29="" d="M6.887 0.45504L9.21404 9.14838C9.265 9.34032 9.1512 9.53905 8.95926 9.59001L0.269319 11.9205C-0.0415214 12.0037 -0.0958776 12.4199 0.18269 12.5812L28.1872 28.7466C28.2993 28.8112 28.4369 28.8112 28.5473 28.7466L37.4088 23.6322C39.8208 22.2394 39.8208 18.759 37.4088 17.3661L7.41525 0.0490816C7.13669 -0.110585 6.80377 0.144199 6.887 0.45504Z" fill="url(#paint1_linear)"></path> <defs data-v-2a183b29=""><linearGradient data-v-2a183b29="" id="paint0_linear" x1="3.48618" y1="34.8655" x2="20.9065" y2="24.8078" gradientUnits="userSpaceOnUse"><stop data-v-2a183b29="" stop-color="#FFC800"></stop> <stop data-v-2a183b29="" offset="1" stop-color="#FF9600"></stop></linearGradient> <linearGradient data-v-2a183b29="" id="paint1_linear" x1="3.48514" y1="6.1342" x2="36.9297" y2="25.4434" gradientUnits="userSpaceOnUse"><stop data-v-2a183b29="" stop-color="#C832FF"></stop> <stop data-v-2a183b29="" offset="1" stop-color="#9632FF"></stop></linearGradient></defs></svg>
</div>
<div class="text">
  Double-tap _T_ to open SpeedTag
  </div>
</div>


<div class="key">
  <div class="key__letter">
  T
  </div>
</div>

CSS

.block {
  margin: 5em;
  display: flex;
  	font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	font-size: 16px;
  font-weight: 600;
	line-height: 1.5;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
  animation: animation 700ms linear both;
}

.logo {
  width: 1.5em;
  margin-top: -.15rem;
}

.text{
  border-left: 1px solid #aaa;
  padding-left: 1rem;
  margin-left: 1rem;
  width: 10em;
  line-height: 1.2;
}

/* Generated with Bounce.js. Edit at http://bouncejs.com#%7Bs%3A%5B%7BT%3A%22t%22%2Ce%3A%22b%22%2Cd%3A600%2CD%3A0%2Cf%3A%7Bx%3A-300%2Cy%3A0%7D%2Ct%3A%7Bx%3A0%2Cy%3A0%7D%2Cs%3A4%2Cb%3A4%7D%2C%7BT%3A%22c%22%2Ce%3A%22s%22%2Cd%3A300%2CD%3A30%2Cf%3A%7Bx%3A1%2Cy%3A1%7D%2Ct%3A%7Bx%3A5%2Cy%3A1%7D%2Cs%3A3%2Cb%3A4%7D%5D%7D */

@keyframes animation { 
  0% { opacity: 0; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -300, 0, 0, 1); }
  4.2% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -135.218, 0, 0, 1); }
  4.9% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -113.552, 0, 0, 1); }
  5% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -110.596, 0, 0, 1); }
  6.6% { transform: matrix3d(2.061, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -68.65, 0, 0, 1); }
  8.2% { transform: matrix3d(2.321, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -36.551, 0, 0, 1); }
  8.31% { transform: matrix3d(2.32, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -34.768, 0, 0, 1); }
  11.36% { transform: matrix3d(1.85, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 2.008, 0, 0, 1); }
  12.51% { transform: matrix3d(1.61, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 9.646, 0, 0, 1); }
  14.46% { transform: matrix3d(1.276, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 16.853, 0, 0, 1); }
  16.62% { transform: matrix3d(1.052, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 18.992, 0, 0, 1); }
  17.61% {...