route study

Route Transition Study

Navigation feels calmer when identity stays still and only the lower content changes.

minwook shindesign engineerI design and build interfaces for AI-native products.

/workstable intro, changing content

atlascapstone in progress
sentinelnative ios mvp
portfolio aiai intake website

the starting point

The usual page change makes the whole screen feel replaced. On a small portfolio, that is too much motion for switching between work and studies.

setting up the structure

The identity and navigation stay in place. The URL still changes for sharing, but the lower content is the only moving zone.

This makes the route feel like a section change instead of a full restart.

polishing the transition

The content reveal uses a short opacity and y movement. Blur can help bridge the first frame, but it should disappear quickly.

## Route Change Contract

User changes section
├── Identity changed?
│   ├── Yes -> full route transition
│   └── No  -> keep intro and nav fixed
│
├── URL changed?
│   ├── Yes -> preserve shareable path
│   └── No  -> update local state only
│
└── Content changed?
    ├── Yes -> reveal lower panel
    └── No  -> do nothing

The page feels calmer when only the part that actually changed is allowed to move.

rules I keep

stable zone identity + nav does not animate between sections

moving zone content panel small opacity and y movement

duration 180ms uses the fast motion token for content swaps

final code

<header>
  <a href="/work">minwook shin</a>
  <nav aria-label="sections">
    <a data-active={section === "work"} href="/work">work</a>
    <a data-active={section === "studies"} href="/studies">studies</a>
  </nav>
</header>

<AnimatePresence initial={false}>
  <motion.ul
    key={section}
    initial={{ opacity: 0, y: 7, filter: "blur(4px)" }}
    animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
    exit={{ opacity: 0, y: -4, filter: "blur(3px)" }}
    transition={{ duration: 0.18, ease: [0.22, 1, 0.36, 1] }}
  />
</AnimatePresence>