A website for a Navi Mumbai company that makes precision change parts and format tooling for pharmaceutical blister-packing machines. It looks industrial and makes no claims the client has not confirmed. The hero is a 3D punch-and-die set built entirely in code, and the client's own team keeps the catalogue up to date.
The Brief
The manufacturer needed to replace an older site with one that shows its range clearly and turns visits into enquiries that name the part. We set one rule at the start: nothing invented. That meant no testimonials, certifications, years-in-business figures or statistics the client had not confirmed. Anything still unconfirmed went on a checklist in the handover notes, not on the page as a placeholder.
Next, the client wanted people who are not developers to manage the page copy, search metadata and the parts catalogue, without a rebuild or a redeploy for every change.
What We Built
-
✦
A procedural 3D hero An interactive three.js punch-and-die set with no model file. The plates, the stadium-shaped pockets and the punches are all generated in code from a handful of format numbers, so changing the rows and columns redraws the whole tool. The page labels it as an illustration, not a customer part.
-
✦
3D that respects the visitor's device three.js is kept out of the initial download and loads only once the page is interactive. It never loads at all on browsers without WebGL, with Data Saver on, or on devices that report under 2 GB of memory; those visitors see a static panel instead. Screen resolution is capped, rendering stops when the scene is off-screen, reduced motion holds a fixed pose, and everything is cleaned up when the viewer closes.
-
✦
An engineering-drawing design language Sharp corners, hairline rules, a single red accent, and grid and 45° hatch backgrounds that move at different speeds as the page scrolls. All of this runs on one scroll listener updated once per frame, and only moves elements (it never triggers a layout recalculation). The back-to-top arrow steps up one notch at a time, like a blister web moving one pitch through a machine station.
-
✦
A catalogue from the shop floor Nine categories and about two dozen studio photographs of real parts, organised the way the client files them. 36.6 MB of originals became 1.84 MB of web images, served as AVIF. Product cards switch to a second view on hover, and each card links to the enquiry form with that part already filled in.
-
✦
An optional headless WordPress CMS The Next.js build can pull page copy and Yoast SEO fields from WordPress, refreshing every 60 seconds. If WordPress is unreachable, it falls back to copy bundled with the site, so an expired hosting plan cannot take the website down. Safeguards keep the CMS's own noindex setting away from the public site and keep the CMS address out of canonical links.
-
✦
A custom WordPress theme for editors The same design system ships as a WordPress theme with sixteen custom Elementor widgets. Parts have their own editor built for non-developers: photos reorder by drag and drop, and any photo missing alt text is flagged in the list. The 3D scene was rewritten in plain JavaScript so it runs without React, and Contact Form 7 now shows the client's original per-field error messages and fills in the requested part.
The Stack
Next.js 15 (App Router) with TypeScript, Tailwind CSS, Framer Motion and three.js, with fonts self-hosted through next/font. Organisation, local-business and breadcrumb structured data, a sitemap and robots rules. The headless mode uses WPGraphQL, Yoast and Advanced Custom Fields. The theme build uses the same Tailwind setup and bundles the 3D scene with esbuild. Local WordPress runs in Docker. A cPanel export script rewrites the site's domain locally before upload, because Elementor stores links in a format that an ordinary search-and-replace misses. Accessibility basics are covered: a skip link, one h1 per page, visible focus rings, WCAG AA contrast, and content that still appears when JavaScript is off.
The Outcome
The site is live. Empty image slots show as plain framed panels with no text, so the site reads as finished while the shop-floor photography is still being shot, and adding a photo takes one line. The handover README doubles as a manual: how to add a catalogue category, how to change the 3D format, how editing flows from WordPress to the live site, and which facts the client still needs to confirm.
Run a manufacturing business whose website undersells the work? Reach out. We build industrial sites that stay accurate and that your team can keep up to date.