Skip to content
Templates

Business & teamsStudio operations

Stint

Studio projects, team capacity and client reviews

Stint

Video preview

Recorded from the actual template. The 4 animated views are included in the source.

Category
Studio operations
Dashboard
Views
4
animated
Interface
Light
theme
Stack
Next.js
16 · React 19
License
Unlimited
projects
Delivery
ZIP
by email

About

A sculpted studio workspace with coral rings, a capacity gauge and a person-by-week planning board. Project tasks, team workloads and client review rounds share one local model.

  • Best forDevelopers building operations tools for design studios, creative agencies and project-delivery teams.

Included views

4 views
  • Studio overview

    Inspect the selected project, hours planned and delivered, team capacity, launch countdown, delivery rings and activity. Weekly controls and local studio-pulse answers share the current context.

  • Projects

    Explore project owners, hours, deadlines, risk and client-access state. The selected project has a detailed card, week tasks and nested rings for budget, planned and delivered work.

  • Team capacity

    Compare two planning weeks, review suggested moves and drag or menu-move tasks between people and weeks. Capacity, overload, project risk and the board update together after validation.

  • Client reviews

    Inspect client decision rounds, feedback readiness, local client-access controls and the review queue. Record approvals or changes and follow the selected round's checklist and project status.

Animations and interactions

  • Capacity that follows the work

    Move a task to another teammate or planning week and workloads, hours left, project risk and activity change together. Started tasks, closed weeks and moves beyond a deadline are refused with a reason.

  • A board with pointer and keyboard paths

    The person-by-week planning board supports dragging, a task move menu and suggested moves. Its cells are mounted progressively, with no per-row layout animation required to move work.

  • Projects and delivery in context

    Sculpted project cards, nested coral delivery rings, hours charts and a launch countdown describe the selected week's work. Filters, search and selection persist when moving between views.

  • Local client-review rounds

    Check feedback points, record that a round was sent and log approval or requested changes. A final approved round updates project delivery; the session keeps a local Undo history and exact Reset.

  • Choreographed views and accessible controls

    Sculpted studio cards assemble in a short sequence while gauges, delivery rings and chart lines replay. The planning board remains one block with progressively mounted cells. 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.

Demo data and what to connect

Fictional studio data and a fixed demo date run in browser memory. This is not a connected time tracker: task delivery, client access, sending review rounds and recording client decisions are local simulations. Nothing is published, emailed or synced; reload or Reset restores the seed.

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

What’s in the ZIP

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

Explore the source files
stint/
    • globals.css
    • layout.tsx
    • page.tsx
      • PlanningBoard.tsx
      • TeamCapacity.tsx
    • App.tsx
    • motion.tsx
    • engine.ts
    • hours.ts
    • invariants.ts
    • model.ts
    • reduced-motion.ts
    • seed.ts
    • selectors.ts
    • store.tsx
    • use-media.ts
    • selftest.ts
  • .gitignore
  • LICENSE.md
  • next.config.ts
  • package-lock.json
  • package.json
  • postcss.config.mjs
  • README.md
  • tsconfig.json

Price, license and delivery

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

$9one-time

USD · Tax included

Buy · $9