TUSKIN COFFEE
(PRODUCTION MARKETING SITE)
2026
LIVEA 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:
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
***
TUSKIN COFFEE
(PRODUCTION MARKETING SITE)
2026
LIVEA 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