Index

Morphing Inputs

Most chat interfaces have this awkward moment. You type something, press send, and the text vanishes from the input field. A beat later it appears in the message list above. The input and the message are treated as separate things even though they're fundamentally the same content.

iOS Messages handles this beautifully. The text you type visually becomes the sent message. There's no disappearing act — just a smooth transformation from one state to another.

The interaction

Type a message and send it. Watch how the input morphs into a bubble.

The trick is that there are actually two copies of your text: one in the input field (visible), and one behind it (the preview, slightly transparent). When you hit send, the preview animates up to the message list while the input clears.

Layout animations

The morphing effect relies on Framer Motion's layoutId. Two completely separate DOM elements can share an identity, and Motion will interpolate between their positions, sizes, and styles:

// The preview behind the input
<motion.div
  layoutId={`container-[${messages.length}]`}
  className="input-morph-preview"
>
  {newMessage}
</motion.div>
 
// The message that appears in the list
<motion.div
  layoutId={`container-[${messages.length - 1}]`}
  className="input-morph-bubble"
>
  {message.text}
</motion.div>

When the message is created, it takes over the layout ID that the preview was using. Motion calculates the delta between the preview's position (in the input area) and the message's position (in the list), then animates the transition.

The timing

The animation uses an ease-out timing function rather than a spring:

const transitionDebug = {
  type: "easeOut",
  duration: 0.2,
};

200ms is quick enough to feel responsive but slow enough to perceive the motion. Ease-out means it starts fast and decelerates — the message accelerates away from your finger and settles gently into place.

Springs would work too, but they can overshoot. For something as frequent as sending messages, a clean ease feels more appropriate. You want the motion to communicate where the message went, not to be entertaining in itself.

This pattern generalizes well. Anywhere you have an input that creates something — a form that produces a card, a draft that becomes a post, an item that moves to a cart — the morphing metaphor makes the relationship tangible.

The input is the output, just in a different form.

"use client";
 
import { useState } from "react";
import { AnimatePresence, motion } from "motion/react";
 
const transitionDebug = {
  type: "easeOut",
  duration: 0.2,
};
 
interface Message {
  id: number;
  text: string;
}
 
export function InputMorphMessage() {
  const [messages, setMessages] = useState<Message[]>([]);
  const [newMessage, setNewMessage] = useState("");
 
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (newMessage.trim()) {
      const timestamp = Date.now();
      setMessages([...messages, { id: timestamp, text: newMessage }]);
      setNewMessage("");
    }
  };
 
  const hasText = newMessage.trim().length > 0;
 
  return (
    <div className="input-morph-container">
      <div className="input-morph-messages">
        <AnimatePresence mode="wait">
          {messages.map((message) => (
            <motion.div
              key={message.id}
              layout="position"
              className="input-morph-bubble"
              layoutId={`container-[${messages.length - 1}]`}
              transition={transitionDebug}
            >
              <div className="input-morph-text">{message.text}</div>
            </motion.div>
          ))}
        </AnimatePresence>
      </div>
 
      <div className="input-morph-form-wrapper">
        <form onSubmit={handleSubmit} className="input-morph-form">
          <input
            type="text"
            onChange={(e) => setNewMessage(e.target.value)}
            value={newMessage}
            className="input-morph-input"
            placeholder="Type your message"
          />
          <motion.div
            key={messages.length}
            layout="position"
            className="input-morph-preview"
            layoutId={`container-[${messages.length}]`}
            transition={transitionDebug}
            initial={{ opacity: 0.6, zIndex: -1 }}
            animate={{ opacity: 0.6, zIndex: -1 }}
            exit={{ opacity: 1, zIndex: 1 }}
          >
            <div className="input-morph-preview-text">{newMessage}</div>
          </motion.div>
          <button
            type="submit"
            className={`input-morph-button ${hasText ? "has-text" : ""}`}
          >
            <ArrowIcon />
          </button>
        </form>
      </div>
    </div>
  );
}