Elevated Theater.

One motion voice for Macy's Inc. Premium, cinematic, measured. Motion should feel curated and confident, never frantic. The difference between completing a transaction and feeling something while doing it.

Principles

  • Intentional

    Refined, measured, deliberate. Motion arrives with a reason and settles with restraint. It reads as curation, never decoration.

  • Responsive

    Feedback is immediate and assured. A tap answers at once with elegant confidence. Quick, but never frantic or snappy for its own sake.

  • Continuous

    Screens flow like a gallery walk. One space eases into the next without a hard cut, so browsing feels like a single continuous surface.

  • Signature

    The one or two moments only Macy's does. A hero dissolves and a headline lifts, theatrical and unhurried. This is the authored move the brand can own.

  • Restrained

    The most elevated decision is often not to move. When everything animates, nothing matters. Restraint is what lets the one considered moment read as considered.

  • Accessible

    Every animation ships a reduced-motion variant. Flip the switch in the header and transforms give way to a calm fade. Nothing is lost. Respect is built in, not bolted on.

Volume of motion

Motion has volume. A toggle flips at a whisper; a signature moment fills the room. Every bar below travels the same distance, so what you feel is the pace: state crosses it in a blink, signature takes its time. In product the louder recipes cover bigger elements and longer distances, which is why they get more time - the speed stays believable while the feeling changes. Play the scale, or tap a bar to feel one on its own.

The ingredients

Volume is mixed from two things: the pace, which is duration, and the shape of the arrival, which is easing. The recipes combine them so you never pick them separately, but each is worth feeling on its own.

  • state entercubic-bezier(0.45, 0, 0.15, 1)

    Entering curve for in-place state changes. Standard - neutral in and out, crisp.

    td.motion.state.enter
  • state exitcubic-bezier(0.45, 0, 0.15, 1)

    Exiting curve for in-place state changes. Standard - symmetric with its enter.

    td.motion.state.exit
  • reveal entercubic-bezier(0.22, 1, 0.36, 1)

    Entering curve for small reveals. Decelerates to a stop - fast arrival, feels responsive.

    td.motion.reveal.enter
  • reveal exitcubic-bezier(0.4, 0, 1, 1)

    Exiting curve for small reveals. Accelerates away - brisk dismissal.

    td.motion.reveal.exit
  • panel entercubic-bezier(0.22, 1, 0.36, 1)

    Entering curve for panels. Long gentle deceleration - glides in.

    td.motion.panel.enter
  • panel exitcubic-bezier(0.65, 0, 0.35, 1)

    Exiting curve for panels. Unhurried departure.

    td.motion.panel.exit
  • page entercubic-bezier(0.22, 1, 0.36, 1)

    Entering curve for full-screen changes. Glides in with weight.

    td.motion.page.enter
  • page exitcubic-bezier(0.65, 0, 0.35, 1)

    Exiting curve for full-screen changes.

    td.motion.page.exit
  • signature entercubic-bezier(0.19, 1, 0.01, 1)

    Entering curve for brand moments. The signature curve - ceremonial, near stillness at the finish. Shared by Macy's and Bloomingdale's.

    td.motion.signature.enter
  • signature exitcubic-bezier(0.65, 0, 0.35, 1)

    Exiting curve for brand moments. Deliberately NOT signature - a ceremonial dismissal reads as lag, not luxury.

    td.motion.signature.exit