Crew

A people-operations interface for a fictional company, covering its organisation, leave requests, hiring pipeline and payroll views.

• Best forDevelopers building HR and people-operations dashboards.

• People

  Explore the employee constellation or org chart, focus on departments and inspect fictional teammate profiles.

• Time off

  Inspect the leave calendar and capacity ribbon, select teammate balances and approve or decline sample requests locally.

• Hiring

  Filter the sample candidate board by role and compare hiring stages through an animated pipeline tunnel.

• Payroll

  Explore sample employer costs, a gross-to-net waterfall or trend chart and local payment-approval controls.

• Organisation constellation

  Explore fictional teammates as a rotating network grouped by department, or switch to a conventional organisation chart. Drag to rotate, inspect profiles and highlight reporting lines or a selected department.

• Capacity and hiring visuals

  A three-dimensional ribbon illustrates daily capacity above the leave calendar. Hiring stages form an animated pipeline tunnel, with role filters and candidate cards driven by the sample company data.

• Local approval workflows

  Approve or decline sample leave requests to update calendar bars and pending counts. Payroll approval controls change local statuses only; the template does not process payroll or transfer money.

• Two-level navigation

  The primary rail selects People, Time off, Hiring or Payroll, and a secondary panel exposes section links. Animated indicators track the selected section, with a compact view switcher on mobile.

• Editable data and motion

  Company, leave, hiring and payroll examples are defined in data modules, with theme tokens and shared motion components kept separate. Reduced-motion preferences simplify animation, and canvas loops pause off screen or in hidden tabs.

Responsive layouts, keyboard-accessible navigation and reduced-motion support.

Employees, candidates, leave and payroll figures are fictional. Approvals change local UI state only; no HR system, statutory payroll calculation or money transfer is included.

• IncludedFictional demonstration data and local interactions, ready to edit. The included README identifies the data files and model.
• Not includedBackend, database, authentication, payments or AI services. Features that look connected are simulated; connect your own services when you adapt the code.

• Complete Next.js project
• 4 animated views
• Source files and project assets
• README with setup and customization
• LICENSE.md

Stack and requirements

• StackNext.js 16, React 19, TypeScript, Tailwind CSS v4, Framer Motion, Lucide icons
• FontsFigtree
• RequiresNode.js 20.9 or later, npm, and working knowledge of React and Next.js

Run it locally

Extract the ZIP, open a terminal in the project folder, then run:

npm install
npm run dev

Open localhost:3000. The README covers the data, colors, fonts and animations.

• Price$9 USD, one-time payment. No subscription or renewal.
• TaxesApplicable VAT and sales tax are included in the price. The total is shown before you pay.
• LicenseUnlimited personal and client projects. No resale or redistribution of the source. Read the license
• DeliveryAfter payment, Polar emails your receipt and a download link for the ZIP.
• RefundsIf the files don’t install or run as described and can’t be fixed within 7 days, you get a full refund. Refund policy
• Supporthello@buildindex.dev for the template as delivered.

Secure checkout by Polar. More answers in the questions.