Let’s talk

SELECTED WORK / SPORTS TECHNOLOGY

Mixl.

Baseball analytics and prediction markets

A data-first website for an MLB analytics product that puts plain-English stats answers and model prices beside live Kalshi markets.

Visit live website (opens in a new tab)Explore the project
Mixl homepage: “Ask the game anything” with a stats search box and a live market card
CLIENT
Mixl
INDUSTRY
Sports technology
OUR WORK
Website design & development
WEBSITE
trymixl.com

THE PROJECT

Ask the game anything.
Then check the work.

Mixl is a baseball research tool. People can ask a plain-English question about MLB games back to 2002, simulate a matchup thousands of times, follow the model’s picks and see how Kalshi’s prediction markets are pricing the same game.

We designed and built trymixl.com on Next.js. There is a technical product to explain, so explainer pages for how it works, the features, the Monte Carlo simulator, the FAQ and each planned app sit alongside the product’s sports search, markets, picks and public track record.

DESIGN STRATEGY

A data instrument,
not a betting app.

We gave Mixl a palette that reads like a working tool: a pale off-white base, near-black ink and a single lime accent, with green and red kept for prices moving up or down. Every color has a matching dark-theme value.

There is no stock photography. The product appears as itself: market cards with Yes and No prices, a sample answer with its game log underneath, and drawings of the planned apps built from the site’s own components and labelled as concepts. The copy keeps pointing at verification, from the game log under every answer to the public track record.

TYPOGRAPHY

Space Grotesk headlines, Hanken Grotesk body copy and Space Mono for the numbers.

COLOR

An off-white base, near-black ink and one lime accent, with green and red kept for moving prices.

MOTION

A trending-search ticker, a typed search prompt and word-by-word headline reveals, skipped for reduced motion.

HOW IT’S BUILT

Rendered fresh
on every request.

The site runs on Next.js 16 with the App Router and React 19, styled with Tailwind CSS 4 over Base UI and Radix primitives. GSAP and Framer Motion handle the animation.

Pages are rendered on every request on Railway behind a nonce-based Content Security Policy, and live updates arrive over a server-sent events stream.

FRAMEWORK
Next.js 16 (App Router) and React 19
STYLING
Tailwind CSS 4 with Base UI and Radix primitives
MOTION
GSAP and Framer Motion
LIVE DATA
A server-sent events stream
SECURITY
Nonce-based Content Security Policy
HOSTING
Railway

SEARCH, BUILT IN

A technical product,
explained page by page.

Mixl has a lot to explain, so every part of the product has a page that says what it does.

Each explainer page, from How it works to the Monte Carlo simulator, has its own title and meta description written around what the page covers.

The FAQ page carries FAQ structured data for all 20 of its questions on data, models, the simulator and billing.

Each planned app has its own address, title and description, linked from an apps overview page.

An XML sitemap lists the public pages, and robots.txt keeps the API routes out of crawling.

The Mixl homepage on a phone, with the stats search and a Get started free button

THE SAME WEBSITE. A SMALLER SCREEN.

PROJECT HIGHLIGHTS

The details
that make it work.

Featured mega menus

The Sports, Picks and Platform menus pair short, described links with one featured shortcut each, such as the simulator.

Concept app drawings

The apps pages draw all four planned apps from the site’s own interface components and label them as concepts rather than screenshots.

Light and dark themes

A header toggle switches the whole interface between light and dark, and the saved choice applies before the page paints.

KEEP EXPLORING

Learn more about the services behind our work.

YOUR NEXT WEBSITE

Planning a website
your customers will use?

Let’s talk about your business, your customers and what your website needs to do.

Let’s plan your website More of our work