Anatomy

The section has three parts stacked vertically. First, a header block (max-width 640px) with an h2 and a subtitle paragraph, revealed as a single unit. Second, a CSS grid with 2 equal columns and a 1.5rem gap; each card has padding, a rounded border, a card background, and a decorative blurred circle in the top-right corner at 5% opacity. Inside each card: a 48×48px icon container with accent-subtle background, then an h3 title, then a muted paragraph. Third, a flex row with accent background holding an open-positions count on the left and a pill-shaped CTA link on the right.

How it works

Every animated element uses Framer Motion's whileInView with viewport={{ once: true }} so the animation fires once when the element enters the screen and never replays on scroll-up. The header animates as a single block (opacity 0→1, y 20→0, duration 0.6s). Each value card delays by `0.08 + i * 0.06` seconds, creating a natural left-to-right stagger across the grid columns. The CTA bar waits 0.3s, entering after the last card. All transitions share the same custom ease `[0.16, 1, 0.3, 1]`, a fast ease-out that reads as responsive rather than bouncy.

How to build it in React

1. Define the Value interface and icon map

   Each value object carries an icon key (string), a title, a description, and a color hex used for the decorative background blob. Resolve icon strings to actual Lucide components at the top of the file with a Record lookup so the component prop API stays serializable.

   const ICON_MAP: Record<string, LucideIcon> = {
     shield: Shield,
     zap: Zap,
     heart: Heart,
     "book-open": BookOpen,
   };

2. Animate the header as one block

   Wrap the h2 + subtitle in a single motion.div with initial={{ opacity: 0, y: 20 }} and whileInView={{ opacity: 1, y: 0 }}. Set viewport={{ once: true }} to prevent replays. A 0.6s duration with the custom ease is enough, no stagger needed here, the block is small.

   <motion.div
     initial={{ opacity: 0, y: 20 }}
     whileInView={{ opacity: 1, y: 0 }}
     viewport={{ once: true }}
     transition={{ duration: 0.6, ease: [0.16, 1, 0.3, 1] }}
   >

3. Stagger the value cards

   Map over the values array and give each motion.div a delay of `0.08 + i * 0.06`. With 4 cards this spreads the entrance over ~0.3s total, which reads as fluid without feeling slow. The decorative blob is a 100px div with borderRadius 50%, positioned absolute at top:-20 right:-20, using the value's color at 5% opacity.

   transition={{ duration: 0.5, delay: 0.08 + i * 0.06, ease: EASE }}

4. Build the accent CTA bar

   Render a motion.div with display:flex, the accent background, and a 0.3s delay so it enters last. Inside, a flex row holds a left text block (open positions count + tagline) and a pill link on the right with the background color as its own background, creating an inverted button from the section's accent.

   <motion.div
     initial={{ opacity: 0, y: 12 }}
     whileInView={{ opacity: 1, y: 0 }}
     viewport={{ once: true }}
     transition={{ duration: 0.5, delay: 0.3, ease: EASE }}
     style={{ background: "var(--color-accent)" }}
   >

When to use it

Use this section at the top of a careers or about page when culture is a differentiator, SaaS companies, agencies, and startups competing for talent on values rather than salary. Place it before the job listings so visitors read why before what. Skip it on transactional job boards or pages where time-to-apply is the priority; in those contexts the extra scroll depth costs conversions.

Used by

• Stripe, Leads its careers page with operating principles before listing open roles, establishing culture before opportunity.
• Linear, Values and working style section precedes the job board, emphasizing how the team works over what the roles are.
• Notion, Displays core values with icons and short descriptions above the open positions list on its careers landing.

FAQ