Anatomy

The layout is a flex row with two flex children that wrap on narrow screens. The left column is a stacked list of job rows, each showing title, department badge, location and contract type. An arrow icon animates its opacity and x offset to signal the active row. The right column holds a sticky container with a single AnimatePresence slot: when active is non-null, a detail card renders with department label, job title, description paragraph, animated requirements list, and an apply anchor.

How it works

The entire interaction hinges on one piece of state: `const [active, setActive] = useState<number | null>(null)`. Each job row sets active on mouseEnter and toggles it on click (for touch users). The detail panel is wrapped in AnimatePresence with mode="wait", which drains the exiting element before mounting the next one. The panel itself enters with `{ opacity: 0, x: 30 }` and exits with the same values, so the transition reads as a lateral swap rather than a fade. Inside the panel, each requirement `<li>` staggered via a per-item delay (`delay: ri * 0.04`) so the list cascades in after the card settles.

How to build it in React

1. Set up the split layout and state

   Create a flex container with two children: a job list column (flex: 1 1 340px) and a detail column (flex: 1 1 380px). Declare `const [active, setActive] = useState<number | null>(null)` at the component root. This single integer drives every interactive part of the component.

   const [active, setActive] = useState<number | null>(null);

2. Build the job rows with hover and click handlers

   Map over your jobs array and render a motion.div for each entry. Attach `onMouseEnter={() => setActive(i)}` for desktop and `onClick={() => setActive(active === i ? null : i)}` to toggle the panel on touch devices. Animate the background from transparent to your alt-background color when the row is active.

   onMouseEnter={() => setActive(i)}
   onClick={() => setActive(active === i ? null : i)}

3. Wrap the detail panel in AnimatePresence

   Place AnimatePresence with mode="wait" in the right column. Inside it, conditionally render a motion.div keyed to `active`. Set initial/exit to `{ opacity: 0, x: 30 }` and animate to `{ opacity: 1, x: 0 }`. The key change forces AnimatePresence to exit the old panel and enter the new one whenever the active job changes.

   <AnimatePresence mode="wait">
     {active !== null && (
       <motion.div
         key={active}
         initial={{ opacity: 0, x: 30 }}
         animate={{ opacity: 1, x: 0 }}
         exit={{ opacity: 0, x: 30 }}
         transition={{ duration: 0.35, ease: [0.16, 1, 0.3, 1] }}
       >
         {/* job detail content */}
       </motion.div>
     )}
   </AnimatePresence>

4. Stagger the requirements list inside the panel

   Map requirements to `<motion.li>` elements. Give each one `initial={{ opacity: 0, x: -8 }}`, `animate={{ opacity: 1, x: 0 }}`, and a transition delay of `ri * 0.04` seconds. Because AnimatePresence remounts the panel on every active change, the stagger replays automatically for each new job.

   <motion.li
     key={ri}
     initial={{ opacity: 0, x: -8 }}
     animate={{ opacity: 1, x: 0 }}
     transition={{ duration: 0.25, delay: ri * 0.04 }}
   >

When to use it

Reach for this pattern when a company has 4 to 12 open roles and wants a dedicated careers section rather than a plain list page. It works well as a late-page section paired with a culture or perks block. Skip it if you have more than 20 roles, a filterable table or search interface scales better. On content-critical pages where every pixel matters, the sticky panel column costs half the viewport width on desktop.

Used by

• Notion, Uses a clean split-layout careers page where clicking a role reveals full details inline without a page navigation.
• Linear, Job listing with a minimal row design and contextual detail view that keeps the candidate focused on the list.
• Vercel, Roles grouped by department with inline expand behavior, keeping the browsing experience on a single page.
• Stripe, Split-panel job browser with department filters and a persistent detail column for the selected role.

FAQ