Arcs

Living things don't move in straight lines. Your hand doesn't travel from your lap to your coffee in a perfect line; it follows an arc, because your joints pivot. Planets orbit; thrown objects follow parabolas; dancers turn in circles. Straight-line motion in UI reads as mechanical, because in the physical world almost nothing moves that way. Arcs are how you make digital motion feel biological.

#The idea

Motion along curves is one of Disney's 12 principles, but its application in UI is narrower than in character animation. In flat interfaces, the question isn't whether a character's arm swings on a joint. It's whether UI elements that change position should travel in straight lines or along subtle curves.

The rule: motion between two distant points on the screen usually looks better along an arc. A notification popping up from the bottom right and moving to the center looks mechanical if it travels in a straight diagonal. Give it even a 5% curve (a slight bulge toward the top of the path) and it reads as natural.

Arcs matter most for:

• Icon transitions: an icon morphing from one shape to another often travels through a curved path.
• Pop-out hints: a badge or notification emerging from one corner and settling in another.
• Repositioning: when elements rearrange (lesson 10), they often follow arcs as they cross other elements.

The curvature should be subtle. Most real-world arcs (a thrown baseball, a pendulum swing) deviate from a straight path by only 5-15% of the total travel distance. More than that, and the motion looks performative.

#When it applies

• Long-distance motion: elements traveling more than half the viewport width. The farther the distance, the more arcs help.
• Object-like UI: notifications, badges, icons that behave like physical things.
• Hand-off between contexts: dragging an item from a list into a tray, a file into a folder icon.
• Celebratory or thematic moments: the iOS App Store download arc, confetti, gamified rewards.

#When it doesn't

• Alignment-critical UI: tooltips aligning to their triggers, modals centering on the screen. Straight motion is more precise here.
• Charts and data visualizations: arcs would misrepresent data. Linear interpolation is a requirement.
• Text and rigid grids: arcs on a form field repositioning look strange because the grid itself is rectilinear.
• Very short distances: under 50-100px, an arc isn't perceptible and just adds implementation complexity.

#Implementation

Arc paths in Motion are easiest via keyframes. Define a midpoint that's not on the straight line:

// Straight: boring
<motion.div animate={{ x: 300, y: 200 }} />
 
// With a subtle arc via midpoint
<motion.div
  animate={{
    x: [0, 100, 300],
    y: [0, 60, 200],   // midpoint y is "too high" - creates an arc
  }}
  transition={{ duration: 0.6, ease: "easeOut" }}
/>

For precise arcs, compute points along a quadratic bezier:

// Generate 30 points along a quadratic bezier
const arcPoints = Array.from({ length: 30 }, (_, i) => {
  const t = i / 29
  const x = (1 - t) ** 2 * startX + 2 * (1 - t) * t * controlX + t ** 2 * endX
  const y = (1 - t) ** 2 * startY + 2 * (1 - t) * t * controlY + t ** 2 * endY
  return { x, y }
})
 
<motion.div
  animate={{
    x: arcPoints.map((p) => p.x),
    y: arcPoints.map((p) => p.y),
  }}
  transition={{ duration: 0.6, ease: "easeInOut" }}
/>

• The control point is what defines the arc's shape. Place it above the midpoint of start and end for an upward arc.
• This is exactly how Moro's arc-motion demo is implemented.

#Craft notes

• Arc height should be 10-20% of travel distance. Much more and the motion reads as cartoonish.
• Upward arcs feel light; downward arcs feel heavy. Use upward for positive actions (send, confirm) and downward for dismissals or deletions.
• Arcs must pair with ease-in-out, usually. Ease-out plus an arc reads as a dart; the motion peaks too early relative to the curve.
• Don't arc alignment. A tooltip arcing to its trigger looks wrong because the brain expects the tooltip's stem to stay visually connected throughout.

#Exercises

1. Compare straight vs arc. Build two versions of a long-distance motion: one straight-line, one with a 15% arc. Which feels more natural?
2. Find arc motion in messaging. Observe how WhatsApp, iMessage, Messenger, and Telegram each handle "send message" animations. Which use arcs? Which don't? Does it change how the interaction feels?
3. Reverse the arc. Take a good upward arc and flip it to a downward arc. The same motion now feels dismissive. Why?

#Study this in the wild

• iOS iMessage send. Subtle upward arc as the bubble launches. Perfect calibration.
• Apple Mail: archive animation. An archived email flies off-screen along a gentle downward arc, reinforcing the act of filing.
• Figma: component drop. Dragging a component from the library arcs as it lands. Subtle, but present.

#Further reading

• Raphael Salaja: Arcs in UI animation.
• Disney: The Illusion of Life (chapter on Arcs).