Fluid Input

A search field that widens into a full input when you click it. The whole thing runs off a single spring, with no CSS transitions, no timers and no measuring the DOM by hand. I saw a similar one in a few SaaS apps, where a search button turns into a full input. Nothing new here. I only wanted to add the animation. The full code is at the end.

What went wrong first

The detail that took me longest was the swap between the closed and open states. My first version was broken. When the field started to open, the Paste button did not leave the layout. It kept its space until its exit animation finished, so everything next to it was pushed around for a few frames before it settled. The fix was mode="popLayout"1 on the AnimatePresence components.

Here is what popLayout does. A normal exit keeps the element in the layout until the animation ends. In popLayout mode, the exiting element is set to position: absolute as soon as it starts to leave. Its siblings no longer count it, so they move into their new place right away, while the old element fades out. It needs two things from you. The parent must have a position other than static, because the exiting element is positioned against it. And the siblings should carry the layout prop, so they animate to their new place instead of jumping.

I use it on both swaps. The Search label and the input exchange places the same way, with a blur(4px) on exit and blur(0px) on enter. It reads as the old label pulling out of focus, rather than just dimming.

How it works

One MotionConfig sets the transition for everything inside it: { duration: 0.5, type: 'spring', bounce: 0.2 }. The container animates its width between the collapsed and expanded states, and it carries the layout prop. When the placeholder swaps out for the real input, Motion measures where things were and where they ended up, and moves them instead of letting the browser jump them. The bounce: 0.2 is what keeps it feeling like an object rather than a value being tweened. At 0 it slides to a dead stop, and much past 0.3 it starts wobbling like a toy.

Animating width is normally the thing you're told to avoid, since it touches layout on every frame. Here that's the whole point. The icon, the placeholder and the paste button all have to reflow as the container grows, and the reflow is the effect. The paste button runs on its own faster spring at 0.25s, so it snaps between its two widths slightly ahead of the container instead of dragging behind it.

If you're about to build one

Motion ignores prefers-reduced-motion unless you ask it not to.2 MotionConfig takes a reducedMotion prop that defaults to 'never'. Passing reducedMotion={'user'} is what makes it honour the OS setting. With that in place, the transform-driven motion switches off for anyone who has asked for less of it, and the field just changes between its two states. I like how it feels, but I wouldn't ship it in a production app. It is a nice interaction to show, and I would not use it for more than that.

The code

FluidInput.tsx

import { MagnifyingGlass, X } from '@phosphor-icons/react'
import { AnimatePresence, motion, MotionConfig } from 'motion/react'
import { useEffect, useRef, useState } from 'react'
import { useOnClickOutside } from 'usehooks-ts'

import { cn } from '@/src/utils'
import styles from './styles.module.css'

export function FluidInput() {
  const [input, setInput] = useState('')
  const [isActive, setIsActive] = useState(false)
  const ref = useRef<HTMLDivElement>(null)

  useOnClickOutside(ref, () => {
    setInput('')
    setIsActive(false)
  })

  useEffect(() => {
    function onKeyDown(event: KeyboardEvent) {
      if (event.key === 'Escape') {
        setInput('')
        setIsActive(false)
      }
    }

    window.addEventListener('keydown', onKeyDown)
    return () => window.removeEventListener('keydown', onKeyDown)
  }, [])

  return (
      <MotionConfig reducedMotion={'user'} transition={{ duration: 0.5, type: 'spring', bounce: 0.2 }}>
        <motion.div
          ref={ref}
          layout
          tabIndex={0}
          style={{ borderRadius: 16 }}
          onClick={() => setIsActive(true)}
          onFocus={() => setIsActive(true)}
          animate={{ width: isActive ? 300 : 116 }}
          className={cn(styles.container, { [styles.idle]: !isActive })}
        >
          <div className={styles.iconWrap}>
            <MagnifyingGlass size={18} className={styles.icon} />
          </div>

          <AnimatePresence initial={false} mode={'popLayout'}>
            {isActive ? (
              <motion.input
                type={'text'}
                spellCheck={false}
                autoComplete={'off'}
                animate={{ filter: 'blur(0px)' }}
                exit={{ filter: 'blur(4px)' }}
                style={{ borderRadius: 16 }}
                placeholder={'Username or tag'}
                value={input}
                autoFocus
                onChange={e => setInput(e.target.value)}
                className={styles.input}
              />
            ) : (
              <motion.p
                animate={{ filter: 'blur(0px)' }}
                exit={{ filter: 'blur(4px)' }}
                className={styles.label}
              >
                {'Search'}
              </motion.p>
            )}
          </AnimatePresence>

          <AnimatePresence initial={false} mode={'popLayout'}>
            {isActive && (
              <motion.div
                initial={{ opacity: 0, scale: 0.25, filter: 'blur(4px)' }}
                animate={{ opacity: 1, scale: 1, filter: 'blur(0px)' }}
                exit={{ opacity: 0, scale: 0.25, filter: 'blur(4px)' }}
                style={{ borderRadius: 9999 }}
                className={styles.actions}
              >
                <motion.button
                  type={'button'}
                  animate={{ width: input.length > 0 ? 20 : 56 }}
                  transition={{ duration: 0.25, type: 'spring', bounce: 0.2 }}
                  aria-label={input.length > 0 ? 'Clear input' : 'Paste from clipboard'}
                  onClick={() => {
                    if (input.length > 0) {
                      setInput('')
                    }
                  }}
                  className={cn(styles.action, {
                    [styles.actionPaste]: input.length === 0,
                    [styles.actionClear]: input.length > 0,
                  })}
                >
                  {input.length > 0 ? <X weight={'bold'} /> : 'Paste'}
                </motion.button>
              </motion.div>
            )}
          </AnimatePresence>
        </motion.div>
      </MotionConfig>
  )
}

styles.module.css

.container {
    position: relative;
    display: flex;
    align-items: center;
    width: fit-content;
    max-width: 384px;
    height: 40px;
    overflow: hidden;
    cursor: pointer;
    outline: none;
    background: var(--color-neutral-200, oklch(0.922 0 0));
}

.idle:hover {
    background: var(--color-neutral-300, oklch(0.87 0 0));
}

.iconWrap {
    position: absolute;
    left: 16px;
    display: flex;
    align-items: center;
    cursor: default;
    pointer-events: none;
}

.icon {
    color: var(--color-neutral-800, oklch(0.269 0 0));
}

.input {
    width: 100%;
    height: 100%;
    padding-inline: 48px;
    color: var(--color-neutral-950, oklch(0.145 0 0));
    font: inherit;
    background: transparent;
    border: none;
    outline: none;
}

.input::placeholder {
    color: var(--color-neutral-600, oklch(0.439 0 0));
}

.label {
    margin: 0 0 0 44px;
    padding-right: 16px;
    color: var(--color-neutral-600, oklch(0.439 0 0));
}

.actions {
    position: absolute;
    right: 16px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    overflow: hidden;
}

.action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    cursor: pointer;
    border: none;
}

.actionPaste {
    padding-inline: 8px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--color-neutral-50, oklch(0.985 0 0));
    background: var(--color-neutral-800, oklch(0.269 0 0));
}

.actionClear {
    padding: 4px;
    color: var(--color-neutral-50, oklch(0.985 0 0));
    background: var(--color-neutral-600, oklch(0.439 0 0));
}

@media (prefers-color-scheme: dark) {
    .container {
        background: var(--color-neutral-800, oklch(0.269 0 0));
    }

    .idle:hover {
        background: oklch(0.371 0 0 / 0.5);
    }

    .icon {
        color: oklch(1 0 0);
    }

    .input {
        color: oklch(1 0 0);
    }

    .input::placeholder {
        color: oklch(1 0 0 / 0.6);
    }

    .label {
        color: oklch(1 0 0 / 0.6);
    }

    .actionPaste {
        color: var(--color-neutral-800, oklch(0.269 0 0));
        background: var(--color-neutral-200, oklch(0.922 0 0));
    }
}

References

1.AnimatePresence · Motion
2.Accessibility · Motion