Campus

A learner interface with an animated lesson player, course progress, a skill-tree constellation and a weekly leaderboard.

• Best forDevelopers building student portals and online-course learning interfaces.

• Courses

  Filter fictional courses, resume a lesson and explore the animated course cover, daily goal and compact skill constellation.

• Lesson

  Control an animated SVG lesson scene, seek between chapters, add timestamped notes and complete a local checkpoint quiz.

• Progress

  Select skills in a canvas constellation and inspect study streaks, XP ranges and fictional certificates.

• Leaderboard

  Switch league, friends or cohort rankings, replay the podium animation and cheer fictional classmates.

• Skill constellation

  Skills form a canvas night sky, with prerequisite links, ignition sequences, hover details and selectable stars.

• Lesson controls

  Play, pause, seek, change speed, toggle captions and jump to chapter or note timestamps in the simulated scene.

• Local learning interactions

  Add timestamped notes, answer a checkpoint quiz and watch its local XP reward update the interface.

• Course and progress views

  Course filters, study streaks and XP-range switches demonstrate common student-portal patterns.

• League rankings

  League, friends and cohort filters re-rank fictional learners and replay the podium animation.

• Editable learning data

  Course records, lessons, notes, skills and learner data live in lib/data.ts. Supply your own LMS and video services.

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

Courses, learners, XP and certificates are fictional. The lesson player is an animated SVG scene, not hosted video; no LMS, authentication, certificate-verification or payment service 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
• FontsUnbounded, Figtree
• 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.