Animated Operating Model
A transparent animated explanation of how fragmented People Operations becomes coordinated work.
- Next.js
- GSAP
- Motion
Under the hood
Technical architecture
A browser-rendered conceptual explanation. Its diagrams do not represent live HR systems or employee data.
Page composition
Next.js · React
Places the portrait, explanatory copy and drawings directly in the section.
Drawing
SVG · CSS
Provides crisp, transparent technical strokes and responsive layouts without a raster canvas.
Choreography
GSAP · Motion
Sequences the automatic explanation and transitions the contextual details.
Interaction
Pointer · touch · keyboard
Reveals related detail and links to dedicated explanation pages. Offscreen and hidden-tab animation pauses; reduced motion keeps the final explanation visible.
Failure and fallback path
Reduced motion presents completed drawings immediately. SVG keeps the illustration available without a WebGL dependency.
One request, end to end
- A section becomes visible and begins its drawing sequence.
- Coordinated paths explain the handoffs without requiring input.
- Interaction reveals context and navigation to a fuller explanation.
Why it is built this way
- Motion explains a relationship instead of serving as decoration.
- Phone layouts stack the explanation rather than shrink the desktop drawing.
- The narrative remains visible when animation pauses.