
ZENARA Mall
A shopping-mall site you play with: a cut-away 3D mall, a claw machine for coupons, and a bag you pack your day into.
The hero is a cut-away 3D model of the mall, like an architect's doll's house: three floors of lit shopfronts around a glass-domed atrium, escalators, a fountain and people with shopping bags. Your shopper walks wherever your cursor goes, and the floors slide out like drawers when you point at them, lighting up shop by shop. Click to grab a bag, hold to start a mall-wide sale, and flip to night to watch the dome's string lights come on. Further down you can scratch foil cards for real offer codes, drag stores into a swinging paper bag to plan a route, play a 3D claw machine where every capsule is a coupon, and tear off a parking ticket. It's a full mall template: store directory with filters, store pages, an interactive floor map with walking routes, dining, cinema and play, offers, events, visit, guest services, leasing, advertising, about, careers, contact, FAQ and legal pages, WhatsApp and webhook enquiries, plus 35 photos.
Build "ZENARA Mall", a premium Indian shopping-mall website (placeholder brand, Baner, Pune) that people play with instead of just scroll. It is a paid template, so it ships the full page set. Next.js 16 (App Router, Cache Components) + raw three.js + GSAP ScrollTrigger/SplitText + Lenis + Tailwind v4. Same play-first approach as the AAKAAR university site: a character follows the cursor and the page is full of tactile toys.
Hero (src/scene/mall.ts): a cut-away "doll's house" mall on a round terracotta plinth, like an architect's sales-gallery model. It's a horseshoe of three floors (ground: fashion & beauty, L1: home, tech & kids, L2: food & fun) around a glass-domed atrium, sliced open at the front. Each floor has 16 shopfronts: glass fronts, ivory pilasters, a fascia sign from a canvas atlas (store names in their own lettering), and a back wall painted per category from a second canvas atlas (clothes rails, perfume shelves, necklaces on busts, sneaker walls, screens, ceramics shelves, rainbow kids' walls, produce bins, menu boards with pendant lamps, cinema posters, neon arcade, brass lift doors, "coming soon" hoarding stripes). Slabs are extruded annular sectors with terracotta cut faces. There's a ribbon-window facade texture on the outside of the drum, ivory columns with brass collars, glass balustrades with brass handrails, two crossing escalators with animated steps, a sectioned glass dome with brass ribs, a fountain with parametric water-drop particles, benches, food-court tables, planters, and a teal-and-brass ZENARA monument on the terrazzo forecourt (canvas terrazzo with brass inlay rings).
- Quaternius CC0 characters (two rigs, clips matched by suffix, SkeletonUtils clones for extra people). Your shopper (gold halo) walks to the cursor's ground point inside a clamped walkable area (atrium, ground corridor, forecourt; kept out of the fountain and the escalator foot). Head bone look-at in world space. People hold shopping bags that hang from the Wrist/Palm bone each frame. Seated diners are offset for the sitting clip. People on upper floors lean on the railings and look down at your shopper when you pass.
- Hover a floor (static invisible hit volumes): the floor slides out toward the camera like a drawer, the floors above lift, its shops light up one by one (per-instance aGlow attribute in an onBeforeCompile shader), and an HTML label follows the cursor. Click navigates. Touch: the first tap shows the label, the second goes.
- Click the floor: a bag drops out of the air into the shopper's hand (up to 4), with a bag counter in the hint chip. Hold for 650 ms: "Weekend sale is on!". Confetti falls from the dome and lands on the right floor, everyone claps or jumps, signs flash.
- Day/night toggle (auto after 6 pm): a CSS sky crossfade with stars, lights dim, shop windows and facade ribbon windows glow, string lights appear along the dome ribs, the fountain ring lights up.
- Camera: on desktop the model sits right of centre, with the headline on the left. On phones it fits the drum below the headline. Pointer parallax; it rises as the hero scrolls away.
Loader: a revolving door (four CSS-3D glass wings with brass trim) that turns 1.5 revolutions as the models load, with a counter, then lifts.
Home sections: manifesto words light up on scroll, plus count-up stats and a photo pair → a floor guide (hover rows swap the photo and show the floor's store logos) → scratch & save (teal, three foil scratch cards revealing real offer codes, copy button) → pack your day (drag store logo tiles into an SVG paper bag that swings on a spring and bulges as it fills; it builds a floor-ordered route → /map?route=… or WhatsApp) → dining strip (teal, horizontal snap scroller with veg badges and price levels) → the claw machine (ink + neon; a 3D cabinet that loads when near: gantry, cable, three-prong chrome claw, 40 two-tone capsules in a hex pile, acrylic prize chute; aim with the pointer, arrows/WASD or the joystick, then drop; the grab holds or slips depending on how centred you are; the coupon pops up; 5 tries per session) → events (date stamps) → visit (hours, directions, and a parking-ticket machine: press to print a ticket stamped with the time and a suggested bay, drag the stub to tear it off) → leasing band (ink).
Pages: /stores (search + floor + category in the URL), /stores/[slug] (logo, photo, unit, hours, offers, cinema showtimes, neighbours, JSON-LD), /map (SVG plans from the same layout data, floor tabs, search, animated dashed walking routes from the entrance or escalator), /dine, /entertainment, /offers (all scratch cards, filter, "skip the scratching"), /events (Event JSON-LD), /visit, /services, /leasing, /advertise, /about, /careers, /contact, /faq (FAQPage JSON-LD), /privacy, /terms, 404 ("This store has moved out"), sitemap, robots, manifest, OG image. One LeadForm posts to /api/enquiry (forwards to ENQUIRY_WEBHOOK_URL) and opens WhatsApp.
Palette: ivory #f5efe6, ink #15141a, terracotta #c4532f, deep teal #12454a, brass #c9a14a, blush #f2c6b4, neon #ff4f7b (arcade only). Type: Syne (display), Manrope (body), Instrument Serif italic accents, JetBrains Mono eyebrows. Store logos are typographic badges sized with container-query units.

