Animated Form Inputs

Three opinionated floating-label input animations — Outlined Notch (Material 3 outlined input where the border notches around the label as it floats up), Underline Slide (a Material classic where the bottom border thickens + brightens on focus while the label slides), and Glow Border (a gradient border that ignites on focus with a soft halo). Each one keeps the visible label accessible — :placeholder-shown + :focus-within drive the float without JavaScript.

floating-labelform-inputoutlined-notchunderlineglow-border

Floating-label · :placeholder-shown + :focus-within

Animated Form Inputs

Three opinionated floating-label inputs — Outlined Notch (Material 3 outlined input where the border notches around the label as it floats up), Underline Slide (Material classic where the bottom border thickens + brightens on focus and the label slides), and Glow Border (a gradient border that ignites on focus with a soft halo). Stage cards auto-cycle the focus state every 2.6s so the float motion plays without input; inspector preview is fully interactive.

Material 3 · border notches around the label

Outlined Notch

A Material 3 outlined input. The border is a single rounded rectangle; on focus or when the field has a value, the label floats up and the top edge of the border notches around it (legend trick). Active accent stains the border + label.

Material classic · bottom bar grows

Underline Slide

A Material classic underline input. A thin baseline sits at the bottom; on focus an accent bar grows across it from 0 → 100% width. The label translates Y up + scales 0.78 + tints to the accent. No outer border at all — minimal, dense form rhythm.

Premium · gradient border ignites

Glow Border

A premium-feel input where the border is a soft multi-stop gradient (cyan → magenta → amber) that brightens on focus. The whole field gains a coloured halo via box-shadow, the label floats up and the gradient saturates from a desaturated rest state.

Outlined · M3

Float duration0.22s

/* Material 3 outlined: border with a notched gap around the floating label. */
.fl-field {
  position: relative;
  padding-top: 6px;
}

.fl-input {
  width: 100%;
  padding: 14px 14px 12px;
  border: 1.5px solid rgba(248, 250, 252, 0.18);
  border-radius: 10px;
  background: transparent;
  color: inherit;
  outline: none;
  transition: border-color 0.22s ease;
}

.fl-input:focus { border-color: #7dd3fc; }

.fl-label {
  position: absolute;
  top: 16px;
  left: 12px;
  padding: 0 4px;
  background: var(--page-bg);   /* notch trick — match the page background */
  pointer-events: none;
  transition: transform 0.22s ease, color 0.22s ease;
}

/* Float when the field has focus OR a value (use :placeholder-shown
   inverted so a placeholder=" " input always trips the rule). */
.fl-input:focus + .fl-label,
.fl-input:not(:placeholder-shown) + .fl-label {
  transform: translateY(-22px) scale(0.85);
  color: #7dd3fc;
}