Showcase · build demonstration
Three dependencies, no framework, no external requests.
Meridian is a build demonstration, not a product and not a client engagement. The site it recreates is for a fictional company, and its testimonials, logos and customer studies are illustrative placeholders — so this page is about construction only.
It is a clean-room recreation of a commercial landing page, built from the public visual presentation and containing none of the original's source. It is on this site because of what it proves about execution: a marketing site of real complexity — intro video, parallax console, animated counters, drag-and-keyboard carousel — delivered with three runtime dependencies and nothing loaded from another origin.
- Property
- meridian.intlo.com — a build demonstration, not a commercial product
- Subject
- A fictional observability product; all names, quotes and studies are placeholders
- Provenance
- Clean-room implementation from the public visual presentation; no original source
- Role
- Design implementation, interaction engineering, accessibility and theming
The build
What it costs the browser.
These four are properties of the repository and the served page rather than claims about an audience, which is the only kind of figure this entry is entitled to make.
- runtime dependencies
3
runtime dependencies
next, react, react-dom — the whole list
- external requests
0
external requests
no webfonts, no analytics, no third-party origins
- CSS frameworks
0
CSS frameworks
plain CSS with custom properties for tokens
- widths verified with no horizontal overflow
8
widths verified with no horizontal overflow
1440 down to 320
01 · What it is
A recreation, and the page says so.
The distinction between this and the other two entries is not a detail — it decides what the page is allowed to claim.
The original is a commercial template. This is a clean-room implementation built from its public visual presentation and local reference material, containing none of its proprietary source. Saying that plainly is the difference between showing craft and implying authorship of someone else's design.
The product it advertises does not exist. The logo wall, the testimonial quotes and the three customer studies are illustrative placeholders for a fictional company — which is why no figure, quote or customer name from that site appears anywhere on this page. What is being shown is the construction: the same page rebuilt to production standards, and the standards are the interesting part.
02 · What it demonstrates
The parts that are hard, done properly.
A marketing page is easy to make look right in one browser at one width, with a stack of libraries doing the work. Each of these is where that approach usually fails.
Two complete themes, applied before first paint
Dark is the default and light is a full theme rather than an inversion. The choice is stored locally and applied by an inline script in the head, so a returning light-mode reader never sees a dark flash, and the browser theme colour follows the active one.
Reduced motion that withholds nothing
The preference is honoured in CSS and in JavaScript: the intro is skipped, auto-cycling stops, scroll drift freezes, and counters render their final values. A reader who asks for less motion loses the animation and none of the content — which is the part usually got wrong.
Interaction built on real controls
Every interactive row is a real button, so hover-only affordances are reachable by keyboard. The mobile menu carries correct aria-expanded and aria-controls, traps body scroll and closes on Escape, and form validation is announced through a live region.
Server components by default
Only the parts that need browser state are client components. The comparison table, the pricing tickets, the alert bulletin and the footer render entirely on the server.
Every graphic drawn, not fetched
Icons, charts, logo marks and decorative artwork are inline SVG, and imagery is local. Nothing on the page reaches another origin, which is why the external-request count is zero rather than low.
Motion with a purpose per section
An intro splash that hands off when its clip ends, a perspective console with pointer parallax on fine-pointer devices only, counters that start when scrolled into view, cards that drift with scroll progress, and a carousel driven by buttons, dots, pointer drag and arrow keys.
03 · Stack
What it is built on.
The short list is the claim. Everything the page does, it does with these.
| Layer | Choice | Why |
|---|---|---|
| Framework | Next.js 16 · React 19 | App Router, server components by default |
| Language | TypeScript, strict | No implicit any anywhere in the tree |
| Styling | Plain CSS | Custom properties as design tokens; no framework, no build-time CSS-in-JS |
| Graphics | Inline SVG | Every icon, chart and mark drawn in the document |
| Runtime deps | Three | next, react, react-dom — nothing else ships to the browser |
Why it is on this site
The front end is where most AI projects are judged.
A system that reasons well behind an interface nobody can use is a system nobody adopts. The other two entries here argue about data, agents and running cost; this one is about the surface those things arrive through, and it is the part a buyer forms an opinion about in the first ten seconds.
It is deliberately the least commercial page in this section. Nothing on it was sold to anyone and nothing on it is claimed as an outcome — it is the standard the front end of a real engagement is held to, shown on something whose fiction is stated openly so the standard is the only thing on offer.
The property
Open it, and read it in both themes.
Everything is public and there is no account. Worth doing on a phone as well as a desktop, and worth toggling the theme — the two things a build like this most often gets wrong are the second theme and the narrow width.
It is a demonstration build, published on the INTLO Labs domain: meridian.intlo.com (opens in a new tab)
Hold your front end to this standard.
Bring us the interface your system is judged on. We will show you what it takes to make it behave this way.
Book a Discovery Call