Technology Stack
Next.js 16 (App Router), React 19.2, TypeScript strict, Tailwind CSS v4, shadcn/ui, Base UI, Motion, three.js, HugeIcons Pro, class-variance-authority, tailwind-merge, ESLint 9, Prettier, sharp, Docker, Vercel
Overview
Duration: 8/2026
CleanProxies sells ISP subnets, rotating residential proxies, bare metal, and VPS to teams scraping and monitoring at scale — a technical, price-sensitive buyer who is comparing vendors in adjacent tabs and will decide on two things: what the product does, and what it costs at their volume.
The site is built around that decision. Pricing is not a downstream page, it is the centre of the product surface, and it is modelled properly per product line rather than flattened into three plan cards. Everything else — the network visualisation, the navigation, the content — exists to get a buyer to that configurator with enough confidence to use it.
The build was delivered from an approved design system to pixel fidelity, and the codebase is structured so the visual language survives future work: a full token layer, six self-hosted typefaces, and component variants driven by configuration rather than one-off overrides.
Pricing: Five Configurators, One Route
Five products, and the obvious shape is five routes. This is one route with a tab bar, because a buyer comparing ISP against residential should not have to pay a page navigation for the comparison.
- Switching is instant — state is client-side only, never a server round-trip
- The URL still reflects the selection, but written in a way that does not stack history entries, so the back button returns the visitor to where they came from rather than walking them through every tab they tried
- The configurators are embeddable — an opt-out flag lets the same components appear on market and product pages without touching the address bar
- Selection is validated server-side, so a malformed or hand-edited URL falls back cleanly instead of rendering an empty state
Each configurator models its own product, because the units genuinely differ. ISP prices per IP across nine volume tiers, with custom quantities resolved to the best tier they qualify for and the input sanitised whether the number is typed, pasted, or dropped. VPS derives memory from the core count and prices per core, so the configuration and the quote can never disagree.
Per-tab accent colour is handled without a theme provider: each configurator declares its own accent as scoped CSS variables, so shared brand utilities resolve to that product's colour inside that product's subtree only. Adding a sixth product means adding a configurator and its accent — nothing global changes.
The Network Globe
The homepage centrepiece is a custom WebGL globe: a rotating dotted earth with live arcs between regions, built directly on three.js rather than pulled from a component library, and re-themed to the brand palette.
Three engineering decisions carry it:
- Fitted, not fullscreen — camera distance is derived from the container's aspect ratio, so the globe stays correctly framed in both the desktop column and the short mobile strip instead of being cropped at one breakpoint
- Time-based, not frame-based — every animation runs on real elapsed time. Frame-counted animation silently assumes 60 Hz and runs up to two and a half times too fast on a 120 or 144 Hz display, which is exactly the hardware this audience uses
- Composited for a light surface — the arcs carry their contrast in colour rather than additive glow, which only reads correctly against near-black and washes out entirely on this section's light card
The loading strategy is the more transferable part. three.js is the heaviest thing the homepage could pull in, for a decorative element most of the way down the page — so it is dynamically imported with SSR disabled, and the chunk is only requested when the section is roughly a screen away. Static artwork acts as the poster: it renders on the server, holds the frame until the canvas paints, and remains for anyone who never gets one — reduced-motion visitors and devices without a WebGL context, which requires no special-casing at all.
Navigation & Layout Engineering
The header is glass over the dark hero and solid once past it, and the transition is driven by measuring the hero's real bottom edge rather than a fixed scroll threshold. That matters in practice: adding a promotional banner moves the bar down, and any hardcoded number is then wrong in one direction or the other depending on viewport height. Measuring is correct at every height and survives layout changes.
Sticky behaviour needed matching care — a sticky grid item only sticks within its own grid area, so the header's placement and span are declared explicitly to give it the whole page as its range.
The five mega menus share one panel with two independent motion springs, one for the shell resizing and one for the content sliding directionally. The panel measures its own content rather than relying on a lookup table, stays centred because the menus range widely in width and the largest would otherwise run off-screen, and collapses to an inline accordion on mobile. The gap between the nav and the panel is internal padding rather than real space, so the hitbox is continuous and a slow mouse travelling down through it never lands in a dead zone that closes the menu.
Metadata & Delivery
Every route's metadata goes through a single helper, for a concrete reason: framework metadata merges shallowly, so the moment a page declares its own social object the root configuration is replaced wholesale, preview images included. Hand-writing a partial object on one page is the fastest way to silently ship a blank link preview, so the helper always re-supplies the full set.
The canonical origin resolves from the deployment environment rather than a hardcoded host, so link previews and canonical URLs are correct on preview deployments and start working on the production domain the moment it is attached — no code change, no redeploy required.
Alongside it:
- A blog table of contents with true scroll spy that locks to its destination during smooth scrolling and releases on settle, so the highlight does not race through every heading the page passes on the way down
- Shared data isolated from client components, a deliberate boundary that keeps server-rendered data server-rendered
- AVIF throughout, with a scripted favicon and icon pipeline
- Six self-hosted typefaces behind design tokens, keeping the type off third-party origins on the critical path
- Containerised builds for dev and production alongside the Vercel deployment
What this build demonstrates is control of a wide commercial surface without it fragmenting: pricing modelled as data per product, brand expressed as tokens rather than inline values, and the heaviest visual element on the page costing nothing until a visitor actually reaches it.