Tuskin Coffee — production marketing site

TUSKIN COFFEE

(PRODUCTION MARKETING SITE)

2026

LIVE

A PRODUCTION MARKETING SITE FOR TUSKIN COFFEE, MUMBAI. FULL-SCREEN VIDEO HERO, INTERACTIVE STORE LOCATOR, TABBED MENU BROWSER WITH SWIPER CAROUSELS, LIVE INSTAGRAM FEED, AND A CUSTOM CURSOR — ALL BUILT IN NEXT.JS 14 WITH FRAMER MOTION ANIMATIONS.

DESIGNED AND ENGINEERED END-TO-END FOR A REAL CLIENT. THE STACK PRIORITISES VISUAL IMPACT AND CONTENT FRESHNESS — INSTAGRAM AND REVIEW INTEGRATIONS KEEP THE PAGE ALIVE WITHOUT CMS OVERHEAD.

ARCHITECTURE:

FRONTEND

NEXT.JS 14 · REACT 18 · TYPESCRIPT · TAILWIND CSS V3 · FRAMER MOTION

MAPS

MAPLIBRE GL JS · CUSTOM MAP STYLE · INTERACTIVE STORE LOCATOR PINS · POPUP OVERLAYS

MENU SYSTEM

TABBED CATEGORY NAVIGATOR · SWIPER CAROUSEL · LAZY-LOADED ITEM CARDS · RESPONSIVE GRID

MEDIA

FULL-SCREEN VIDEO HERO · AUTOPLAY MUTED LOOP · POSTER FALLBACK · MOBILE-OPTIMISED SIZING

INTEGRATIONS

INSTAGRAM FEED API · GOOGLE REVIEWS EMBED · THIRD-PARTY WIDGET ISOLATION

UX

CUSTOM CURSOR · SMOOTH SCROLL · SECTION-BASED NAVIGATION · ANIMATED TRANSITIONS

FEATURES:

INTERACTIVE STORE LOCATOR

MAPLIBRE GL JS POWERS A FULLY INTERACTIVE MAP WITH CUSTOM PIN MARKERS FOR EACH TUSKIN LOCATION. CLICKING A PIN OPENS A STYLED POPUP WITH ADDRESS AND HOURS — ALL WITHOUT GOOGLE MAPS OR A PAID TILE API.

FULL MENU BROWSER

A TABBED NAVIGATOR GROUPS MENU ITEMS BY CATEGORY. EACH TAB TRIGGERS A SWIPER CAROUSEL OF ITEM CARDS WITH IMAGES, DESCRIPTIONS, AND PRICING — LAZY-LOADED TO KEEP INITIAL PAGE WEIGHT LOW.

VIDEO HERO + APP CTA

THE LANDING SECTION USES A FULL-SCREEN AUTOPLAY VIDEO LOOP AS A BACKGROUND, MUTED AND POSTER-BACKED FOR FAST PAINT. AN APP DOWNLOAD CTA OVERLAYS THE VIDEO WITH FRAMER MOTION ENTRANCE ANIMATIONS.

INSTAGRAM LIVE FEED

THE LATEST POSTS FROM TUSKIN'S INSTAGRAM ARE PULLED VIA THE INSTAGRAM GRAPH API AND RENDERED IN A RESPONSIVE MASONRY-STYLE GRID — KEEPING THE PAGE CONTENT FRESH WITHOUT MANUAL UPDATES.

CUSTOM CURSOR

A BRANDED CURSOR REPLACES THE DEFAULT POINTER SITE-WIDE — SCALING UP ON HOVER OVER INTERACTIVE ELEMENTS AND BLENDING WITH THE DARK VISUAL LANGUAGE OF THE BRAND.

MULTI-SECTION SINGLE PAGE

THE ENTIRE SITE IS A SINGLE-PAGE APP WITH SMOOTH-SCROLLING SECTION NAVIGATION. FRAMER MOTION ORCHESTRATES ENTRANCE ANIMATIONS PER SECTION AS THEY ENTER THE VIEWPORT — GIVING THE PAGE A CINEMATIC FLOW.

STACK:

NEXT.JS 14 · REACT 18 · TYPESCRIPT · TAILWIND CSS · FRAMER MOTION · MAPLIBRE GL · SWIPER · HEADLESSUI · LUCIDE REACT · INSTAGRAM GRAPH API

***