
AAKAAR University
A university site you play with: a student follows your cursor, and you cut the ribbon to open admissions.
The hero is a floating low-poly campus where a student walks wherever your cursor goes and turns their head to follow it. Classmates sit on benches, chat and wave as you pass. Buildings light up window by window on hover, a click tosses a graduation cap, and holding the mouse down sets off a whole-class convocation with confetti. Further down: pull books off a library shelf, wipe a chalkboard to reveal the teaching method, scratch three foil cards for your programme and scholarship, swing your own student ID on a lanyard, then take scissors to a satin ribbon to open admissions. It's a full university template: programmes with filters, programme detail pages, admissions with fees and scholarships, campus, faculty, about, contact and legal pages, WhatsApp enquiries, and 22 photos of faculty, campus and studios.
Build "AAKAAR University", a modern Indian private university website (placeholder brand, Pune) that people play with instead of just scroll. Next.js 16 + raw three.js + GSAP ScrollTrigger/SplitText + Lenis + Tailwind v4. The brief: a student follows the cursor in the hero, buildings react on hover, plus a scratch effect and a scissors / ribbon-cutting feeling.
Hero (src/scene/campus.ts): a floating low-poly island campus on the cream page (lawn disc with mown stripes, soil skirt, jagged rock cone, soft shadow far below). Procedural buildings: clock tower with a live canvas clock face, columned library with pediment, maker lab with glass band and observatory dome, sawtooth-roof design studios, a hostel block. Fountain plaza, paths, trees, benches, a picnic blanket, lamp posts with swaying bunting. Quaternius CC0 characters (young adults, not chibi — two rigs: the modular one with Idle/Walk/Run/Wave/Interact, the older one with Sitting/Clapping/Jump; clips matched by suffix, trimmed + meshopt-compressed by scripts/optimize-models.mjs), scaled to 2.0 units:
- The main student walks or sprints to the cursor's ground point (ray onto y=0, clamped to a walkable ellipse, pushed out of the fountain and away from classmates). They turn before moving, and flowers bloom in their footsteps. The head bone tracks the cursor, the hovered building, or the viewer when the cursor is away (rotation applied in world space after mixer.update, so it works with FBX bone axes). A gold halo marks your student. After 9s of no input they wander to a building.
- Classmates: a chatting pair, one pinning a note on the board, a walker, a professor outside the lab, two on benches (sitting clip offset so hips land on the seat), one by the fountain. They wave and look at the student when the student passes.
- Hover a building: invisible hit box → windows (InstancedMesh, per-instance colour) light up one by one with a flicker, the building breathes up, and an HTML label is projected above it every frame. Click to navigate.
- Click the lawn: the student waves and tosses a mortarboard (physics, spin, bounce, settles on the grass, fades after 14s), with a confetti burst at the apex. Hold 650ms: convocation — everyone tosses caps (sitters clap), with big confetti and a "Class of 2031!" toast.
- Camera: the whole island framed low on desktop with the title above it; cropped in on phones. Pointer parallax; it rises and orbits as the hero scrolls away (stage.hero). NeutralToneMapping, soft PCF shadows, RoomEnvironment at low intensity.
Sections:
1. Intro: a manifesto whose words light up on scroll, count-up stats, approval chips.
2. Library shelf: CSS-3D books, one per school (spine colour = school). Hover lifts the book with a shine sweep, neighbours lean away, an "Open" tag appears. Click: a hardcover lands on the desk and its cover swings open onto a two-page spread (chapter + dean on the left, programmes as a dotted-leader contents page, facts and a handwritten margin note on the right).
3. Chalkboard (page goes ink-dark): a canvas full of grainy chalk scribbles (glyphs rasterised then re-stamped as chalk dabs, axes, a curve, a boxed E=mc², tally marks). A felt duster (destination-out) wipes it, and a faint "ghost lesson" underneath (the 3-step method) grows clearer the more you wipe. A chalk tool draws, with dust particles; buttons to clean or make it messy again.
4. Scratch cards: pick an interest chip, then scratch three foil cards (gold / silver / rose, brushed noise, "SCRATCH HERE") with a coin cursor. They reveal a programme, a scholarship and the first-year project. Mouse users can scratch by just hovering; foil flakes fall; alpha sampling auto-reveals at 55%; each card has a Reveal button.
5. Campus life (green): your student ID hangs from a brass peg on a red AAKAAR lanyard (12-segment Verlet rope, SVG strap with textPath lettering) — the card is a rigid two-point body, heavier than the strap, so it swings as a pendulum; grabbing applies a spring at the grabbed spot that the rope pulls against; velocities are capped. Drag and throw it, scroll velocity sways it, click or Enter flips it (stats on the back), type your name to print it. A grid of life cards beside it.
6. Admissions finale (dark stage): a satin ribbon (Verlet cloth strip, MeshPhysical sheen, canvas print "ADMISSIONS OPEN ✺ 2027", gold borders) between two brass stanchions. The cursor becomes scissors whose blades close on press. A click / touchpad tap snips straight through the column under the scissors' red-dot hotspot. Each drag segment is tested against the projected horizontal cloth edges; crossed cells hide their triangles and drop their constraints, with a WebAudio snip. Once a stroke crosses 40% of the rows the cut finishes cleanly through one column, the halves fall and pool at the posts, 2D confetti bursts from the cut point, and "We're open." and the CTAs appear. Touch gets its own cut zone around the ribbon (touch-action none) so the page still scrolls; "Cut it for me" and "Tie a new ribbon" buttons.
Pages: /programmes (filter by school and level, plus search; useSearchParams inside Suspense), /programmes/[slug] (school-coloured header, facts, year path, highlights, first-year project, careers, a mentor, WhatsApp enquiry form, JSON-LD Course; params awaited inside Suspense for Partial Prefetching), /admissions (steps, dates, fee table, scholarships, enquiry, FAQ with JSON-LD), /campus, /faculty, /about, /contact (visit booking), /privacy, /terms, a 404 ("This page skipped class"), sitemap, robots, manifest, OG image.
Chrome: a floating pill nav (active link in a Suspense leaf because of usePathname under Cache Components), a red "Apply" CTA, a circular-reveal mobile menu, a dot+ring cursor plus tool cursors (scissors / coin / chalk / duster) switched by data-cursor, paper grain, and a loader counter that chases the real model-loading progress.
Palette: paper #f4efe6, ink #16161d, campus green #1f4d3a, ribbon red #d7263d, gold #f2c14e, brick #c65a3a, navy #24305e, board #22322a. Type: Bricolage Grotesque (tight, condensed display), Instrument Serif italic accents, JetBrains Mono eyebrows, Caveat chalk.

