Futuristic Textinput

by Sebastian Kay

HTML

<div class="input-wrapper">
  <textarea placeholder="Was möchten Sie ändern oder erstellen?"></textarea>

  <div class="actions">
    <button class="action" type="button">+</button>

    <button class="action" type="button">/</button>
  </div>
</div>

CSS

* {
     box-sizing: border-box;
}
 @property --angle {
     syntax: '<angle>';
     initial-value: 0deg;
     inherits: false;
}
 @property --glow-x {
     syntax: '<percentage>';
     initial-value: 20%;
     inherits: false;
}
 @property --glow-y {
     syntax: '<percentage>';
     initial-value: 15%;
     inherits: false;
}
 @property --glow2-x {
     syntax: '<percentage>';
     initial-value: 80%;
     inherits: false;
}
 @property --glow2-y {
     syntax: '<percentage>';
     initial-value: 85%;
     inherits: false;
}
 body {
     margin: 0;
     min-height: 100vh;
     display: flex;
     align-items: center;
     justify-content: center;
     background: radial-gradient( circle at 50% 35%, #151820 0%, #0c0e12 45%, #07080a 100% );
     font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
     color: white;
}
 .input-wrapper {
     position: relative;
     width: min(760px, 90vw);
     height: 190px;
     border-radius: 24px;
     isolation: isolate;
}
/* ======================== ANIMIERTER RAND ======================== */
 .input-wrapper::before {
     content: '';
     position: absolute;
     inset: 0;
     padding: 1px;
     border-radius: inherit;
     background: conic-gradient( from var(--angle), transparent 0deg, transparent 25deg, rgba(38, 160, 255, 0.05) 45deg, rgba(57, 181, 255, 0.95) 70deg, rgba(110, 130, 255, 1) 90deg, rgba(178, 80, 255, 1) 110deg, rgba(255, 90, 220, 0.75) 125deg, transparent 155deg, transparent 360deg );
     -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
     -webkit-mask-composite: xor;
     mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
     mask-composite: exclude;
     opacity: 0;
     pointer-events: none;
     transition: opacity 500ms ease;
     z-index: 10;
     animation: border-orbit 8s linear infinite;
}
/* ======================== INNERER...