Mr. Ads - In-Restaurant Digital Signage Network
Mr. Ads operates an in-restaurant digital signage network across Bengaluru. The network publishes coverage across eight venue types — 2,400+ screens in restaurants and bistros, 1,100+ in residential apartments, 420+ in corporate tech parks, 310+ in fitness centres, 180+ in PG and student hostels, 85+ mall properties and 60+ play zones, roughly 4,555 screens in total. RECNOS built the network's public site as a statically-rendered Next.js application covering all eight environments.
Digital ad network operating high-definition display hardware in dining venues across Bengaluru with scheduled content rotation.
Last updated: · By The RECNOS Engineering Team
Impact
High-density venue visibility network
Challenge
A media network with eight distinct venue types needed a single public site that could present each environment credibly — different screen sizes, different dwell times, different audiences — while giving advertisers a way to build a media plan and reach the sales team. The site also had to stay fast and legible on the phones that prospective advertisers actually browse on, and it had to run without a CMS or a database.
Approach
We built it as a statically-rendered Next.js App Router site, so every route ships as pre-rendered HTML with no runtime data layer to operate. Venue coverage, screen specifications and pricing bands are modelled as typed data modules rather than hardcoded into markup, which keeps the eight venue environments consistent across pages and makes the figures auditable in one place. The interaction layer is hand-built: a scroll-reveal engine and a number-animation component, both written directly against IntersectionObserver rather than pulled from an animation library, with a prefers-reduced-motion path in both the CSS and the JavaScript so the site degrades properly for visitors who ask for less motion. The media-plan builder on the pricing page collects campaign parameters client-side and hands them to the contact page through URL parameters — a deliberate choice that keeps the flow working with no backend.
Outcome
The network publishes its own venue coverage: 2,400+ screens in restaurants and bistros, 1,100+ in residential apartments, 420+ corporate tech parks, 310+ fitness centres, 180+ PG and student hostels, 85+ mall properties and 60+ play zones, across 8 ad environments. Source: mr-ads.in (retrieved 15 Oct 2026). mr-ads.in
Stack
- Framework
- Next.js 15.5 (App Router)
- UI
- React 19.0.3 + TypeScript 5
- Styling
- Tailwind CSS 3.4
- Rendering
- Static pre-render, no runtime data layer
- Animation
- Hand-written CSS keyframes + IntersectionObserver
- Hosting
- Self-hosted Node on nginx, PM2-managed
Engineering
Scroll-reveal engine written against IntersectionObserver
A 173-line reveal component that tracks which edge an element left the viewport by and re-arms with the opposite entry vector, so content animates correctly whether you scroll up or down. Six variants, compound stagger delays, and a reduced-motion short-circuit that skips the animation entirely.
Number animation that survives real formatting
The count-up component splits a display string into prefix, number and suffix with a regex before animating, so a figure like "2,400+" counts up correctly and keeps its comma grouping and trailing plus. Driven by requestAnimationFrame with cubic ease-out, triggered on scroll into view.
Motion accessibility handled in two layers
A prefers-reduced-motion block in the stylesheet disables fourteen animation classes, and both interactive components independently check the same media query in JavaScript. Visitors who request reduced motion get a static page, not a broken one.
Typed content model for eight venue environments
Venue coverage, screen specifications, slot durations and pricing bands live in typed data modules consumed by the page components. The eight environments stay consistent across pages, and every published figure can be traced to one file.
Font and structured-data setup
Self-hosted font loading through next/font with display swap, plus LocalBusiness structured data emitted from the root layout so search engines and answer engines can read the network's name, contact details and service area.
Pages
10 routes in the shipped product.
| Route | What it does |
|---|---|
| / | Homepage — hero with network trust figures, venue presence grid, advantages, digital signage detail, closing call to action. |
| /locations | The eight venue environments with placement detail and a network-coverage stat grid. |
| /solutions | Service pillars with per-service metrics and feature detail. |
| /pricing | Interactive media-plan builder: channel selection, duration and budget bands, handed to contact as URL parameters. |
| /contact | Lead form with reference generation and prefill from the media-plan builder. |
| /digital | Digital signage service page. |
| /offline-print | Offline and print advertising service page. |
| /print-creative | Print creative production service page. |
| /advertising-on-the-move | Transit and moving-media advertising service page. |
| /about | Company background. |