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 viewsStudio 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 devOpen localhost:3000. The README covers the data, colors, fonts and animations.
Explore the source files
- 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.
USD · Tax included