TUSKIN COFFEE

(WEBSITE FOR TUSKIN COFFEE)

2026

PRODUCTION MARKETING SITE FOR TUSKIN COFFEE — A REAL MUMBAI COFFEE CHAIN WITH THREE LOCATIONS. FULL-VIEWPORT VIDEO HERO, AN INTERACTIVE MAPLIBRE STORE LOCATOR, A BROWSABLE 50+ SKU MENU, LIVE INSTAGRAM FEED, AND APP STORE CTAs — ALL ON A SINGLE POLISHED SCROLL.

BUILT FOR A REAL CLIENT AND LIVE IN PRODUCTION. EVERY COMPONENT — CUSTOM CURSOR, CANVAS MAP MARKERS, ANIMATED DROPDOWNS — IS HANDWRITTEN WITHOUT UI KITS. PERFORMANCE-FIRST: VIDEO STREAMING, NEXT/IMAGE OPTIMISATION, AND API-PROXIED THIRD-PARTY FEEDS.

INTERACTIVE STORE LOCATOR

MAPLIBRE GL-POWERED MAP WITH THREE MUMBAI LOCATIONS (BANDRA, POWAI, ANDHERI). CUSTOM CANVAS-RENDERED LOGO MARKERS WITH ACTIVE GLOW STATES. CLICKING A LOCATION FLIES THE MAP TO THAT PIN AND REVEALS ADDRESS, HOURS, AND A GOOGLE MAPS DEEP LINK.

FULL MENU BROWSER

BEVERAGES, FOOD, AND BEST SELLERS ACROSS TABBED CATEGORIES AND SWIPER-SCROLLABLE SUBCATEGORY RAILS. EACH PRODUCT CARD SHOWS NAME, VOLUME, LIVE PRICE, AND STRUCK-OUT MRP — PULLING FROM A TYPED STATIC CATALOGUE OF 50+ SKUs.

VIDEO HERO + APP CTA

FULL-VIEWPORT AUTOPLAY VIDEO BACKGROUND WITH A DARK OVERLAY, BRAND LOGO, AND ANIMATED GOOGLE PLAY DOWNLOAD BUTTON. ORDER-NOW CTA SECTION SURFACES BOTH PLAY STORE AND APP STORE LINKS VIA AN ANIMATED FRAMER MOTION DROPDOWN.

INSTAGRAM LIVE FEED

NEXT.JS API ROUTE FETCHES AND PROXIES THE INSTAGRAM GRAPH API, RENDERING A 12-ITEM GRID WITH SKELETON LOADERS. HANDLES LOADING, SUCCESS, AND ERROR STATES — FALLS BACK GRACEFULLY IF THE FEED IS UNAVAILABLE.

CUSTOM CURSOR

A BRANDED BLUE (#326295) CIRCULAR CURSOR THAT TRACKS MOUSE POSITION VIA EVENT LISTENERS AND SHRINKS ON HOVER OVER ANY INTERACTIVE ELEMENT (A, BUTTON, [ROLE='BUTTON']) — NO LIBRARY, PURE REACT STATE.

MULTI-SECTION SINGLE PAGE

HERO → ABOUT → MENU → LOCATIONS — ALL ON ONE SCROLL. NAVBAR ANCHORS SMOOTH-SCROLL TO EACH SECTION. ABOUT SECTION PULLS LIVE INSTAGRAM POSTS. LOCATION SECTION AND STORE LOCATOR ARE SEPARATE INTERACTIVE VIEWS OF THE SAME DATA.