Glowing Input Animation with CSS

glowing-input.css

@property --rotation {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@property --pos-x {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

.animate {
  animation: glow-movement 6s linear infinite;
}

.container {
  position: relative;
  border-radius: 1000px;
  transform: translateZ(0);
  background: rgba(205, 205, 205, 0.05);
  backdrop-filter: blur(3px);
  font-size: 18px;
}

.border {
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 1000px;
  pointer-events: none;
  background: conic-gradient(
      from calc(var(--rotation) - 80deg) at var(--pos-x) 50%,
      transparent 0,
      #b2a7e9 20%,
      transparent 25%
    ),
    rgba(205, 205, 205, 0.2);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  transition: all 0.2s ease;
}

.inner {
  display: flex;
  height: 48px;
  flex-wrap: nowrap;
  align-items: center;
  font-size: 16px;
  font-weight: 500;
  border-radius: 1000px;
  padding-right: 4px;
  position: relative;
}

.input {
  flex: 1;
  width: 100%;
  height: 100%;
  background: none;
  border: none;
  outline: none;
  padding-inline-start: 1rem;
  border-radius: 1000px;
  color: #d8d9e8;
  font-family: inherit;

  &::placeholder {
    opacity: 0.7;
  }
}

.button {
  height: calc(100% - 8px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1000px;
  font-family: inherit;

  &:hover {
    background: rgba(255, 255, 255, 0.1);
  }
}

@keyframes glow-movement {
  0% {
    --pos-x: 5%;
    --rotation: 0deg;
  }
  41% {
    --pos-x: 95%;
    --rotation: 0deg;
  }
  50% {
    --pos-x: 95%;
    --rotation: 180deg;
  }
  91% {
    --pos-x: 5%;
    --rotation: 180deg;
  }
  100% {
    --pos-x: 5%;
    --rotation: 360deg;
  }
}

glowing-input.tsx

import { cn } from "@/app/_lib/utils";
import styles from "./subscription_input.module.css";

export function SubscriptionInput({ className }: { className?: string }) {
  return (
    <div className={cn(styles.container, className)}>
      <div className={cn(styles.border, styles.animate)} />
      <div className={styles.inner}>
        <input
          type="text"
          placeholder="Your email address"
          className={cn(styles.input, "font-light")}
        />
        <button className={styles.button}>Subscribe</button>
      </div>
    </div>
  );
}

How it looks like:

demo.mp4