Relay

A panoramic support workspace with a yellow response-time signal, dot-matrix service modules and an attention-ordered inbox. Conversation ownership and teammate capacity stay connected through one local model.

• Best forDevelopers building customer-support workspaces, service dashboards and conversation-routing products.

• Service overview

  Explore response time, SLA compliance, satisfaction and a wide arrivals/response chart. Dot-matrix modules show conversations, current workload, at-risk items, team score and notes.

• Inbox

  Search and filter conversations in attention order, inspect their SLA deadline and customer context, then choose an available assignee. Thread, internal notes and local reply drafts stay attached to the conversation.

• Customer detail

  Explore fictional customer accounts with yearly figures, conversation history, weekly activity ticks and account notes. Open a related conversation without losing the customer context.

• Team performance

  Inspect agent status, load, response measures, SLA performance and ratings. Explore an agent's activity, open conversations, hourly rota and shared team notes.

• Catch and route an SLA risk

  Open an at-risk conversation and choose a teammate from a load-aware picker. Covered status, remaining at-risk items, available-agent count and the agent's open workload update together.

• A signal with explicit measures

  The wide chart separates arrival ticks from response-time percentiles, with attached bucket details. SLA compliance keeps its met/due denominator and satisfaction keeps its rating base.

• An inbox that preserves context

  Attention ordering, search and filters keep urgent work visible. The attached conversation panel combines the thread, customer details, ownership, internal notes and a draft that is never sent.

• Customer and teammate workspaces

  Account history, team capacity, agent status and period performance share the same conversation data. Assignment changes have local Undo, and Reset restores the fixed demonstration state.

• Choreographed views and accessible controls

  Overview modules, queue and conversation context assemble in coordinated stages. The yellow chart signal and dot histograms replay when entering their views. Phone layouts, keyboard navigation and initial or late reduced-motion preferences are supported; state stays shared across all four views.

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

A fixed demo clock and fictional conversations drive every figure. Assignments, agent status, notes and reply drafts are local browser simulations; no support platform, messaging service, AI, backend or persistent storage is connected, and no message is sent. Assigning an agent does not count as replying.

• 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.