Fixate: Attention prediction landing page template for Next.js.

$39one-time payment

Buy Fixate Live demo

Or get all 48 templates for $149

Next.js 16
CSS
TypeScript
13 sections
Light
No API keys
Palette
Updated Oct 28, 2026

hairlineui.com/demo/fixateLive demo

The first screen of the Fixate landing page template

01Overview

At a glance

A complete landing page for Fixate, a product that predicts where people look in the first three seconds of an ad, landing page or packshot, scores every area and says what to move before any money goes on media. The page behaves like the product: heat appears only where attention goes, a gaze path links the sections, and the last section shows visitors where they looked.

Made for

Attention prediction, eye-tracking and creative-testing products
Ad analytics, UX research and design-review tools
CRO and performance agencies that sell a measured, visual result

Heatmaps drawn live in canvas over real ad photos, plus the visitor's own pointer heat
A gaze path down the page margins, one numbered fixation ring per section
An A/B race over the first three seconds and a scroll-scrubbed landing-page timeline
A closing minimap of where the visitor looked, worked out in their browser

02The look

Its own palette and type

The colours and type it ships with. Tap a colour to copy it.

AaEpilogueIncluded with the template
The quick brown fox jumps over the lazy dog
0123456789
AaHanken GroteskIncluded with the template
The quick brown fox jumps over the lazy dog
0123456789

Epilogue at 800, set tight in sentence case, for display, with Hanken Grotesk for reading. The page is a cool grey table with white and ink sheets on it; each section's tab rises from its sheet with concave fillets and holds a fixation ring. The only colour is heat, one ramp from cobalt through sky, lemon and tangerine to red, and it only ever sits on a creative, a ring or a lit plan. Flat ink and light grey buttons and tiles, round shapes everywhere.

03Sections

13 sections, in page order

From the first screen to the footer.

01
Hero
A two-line headline beside the Halden serum ad: its predicted heatmap develops in three seconds while numbered fixations land in order, your pointer leaves its own heat, and the readout compares your first look with the prediction for 1,000 viewers.
02
Gaze path
A line through the page margins from section to section. Each stop is a fixation ring in the section's tab with its predicted dwell; the path draws as you read and each ring fills with heat when it's reached.
03
Proof
Three measured stats, each with a small lit fixation, then six customer wordmarks.
04
Manifesto
A sentence on the bare table whose words warm from grey to ink as you read, with two words boxed in heat.
05
How it works
The dark sheet: four kinds of input with their heat, the model in the middle, four results out, and heat pulses running along the wires.
06
Features
Predict, Score and Fix, each word boxed in its temperature beside a scored product photo whose heat develops as it scrolls in.
07
Compare
Two variants race over the first three seconds: heat builds on both, a meter tracks attention on the area that matters and the winner is called. Three tests: gaze cue, headline size and offer placement.
08
First three seconds
Pinned under the menu: scrolling plays seven fixations on a coffee landing page, with the clock, the order, the time to the button and the price, and what was never reached.
09
Integrations
Twelve tools in pearl tiles around the mark; a gaze visits them in turn and each tile warms and cools.
10
Customers, pricing and FAQ
Four quotes with a before and after figure, three plans with the featured one lit from below by heat, and questions beside a sticky head.
11
Closing
Here's where you looked: a minimap of the page with your own heat, time per section against the prediction, your longest stop and what you skipped. Nothing leaves the browser.
12
Footer
Link columns, then the wordmark across the sheet; heat shows inside its letters wherever the pointer rests.
13
Pages
A contact page with a working form, privacy and terms placeholders and a 404 whose heatmap never warms past blue.

04Make it yours

Where everything lives

Every heading, paragraph, plan and destination lives in site.config.ts. The creatives, their heat and the A/B tests are in data/creatives.ts, and npm run verify:content checks them and prints the shares each test will show.

Where to change each part of Fixate
To change	Edit
Brand, copy, stats, hub, features, integrations, quotes, plans, FAQ and links	site.config.ts
Creatives: photos, ad copy, heat, fixations and the A/B tests	data/creatives.ts
The landing page and fixations in First three seconds	data/landing.ts
The heat colours	lib/heat.ts → RAMP, styles/base.css
Sign-up, booking and contact endpoint	site.config.ts → links
Palette, type and the sheets	styles/base.css, app/layout.tsx
Photos	public/images/
Section order and the gaze path	app/page.tsx

Run it

$ npm install$ npm run dev

Node.js 20.9 or newer. No environment variables.

Before you go live

Replace the fictional company, customers, creatives and figures. Set links.signup, links.booking and links.contactEndpoint (or keep the email fallback), each plan's checkout links and site.url in site.config.ts, and swap in your own creatives and model output.

05Specifications

What’s under the hood

sections: 13
source files: 51
lines of code: ~6,400
dependencies: 3
API keys needed: 0

Stack

Framework: Next.js 16 (App Router), React 19
Language: TypeScript
Styling: CSS with design tokens and component styles
Dependencies: nextreactreact-dom

Design

Fonts: Epilogue, Hanken Grotesk, self-hosted with next/font
Images: Eleven photos made for the template, about 450 KB together as WebP: the serum ads, a creator video frame, four product shots and four portraits. The heatmaps, ad copy, landing page, gaze path, hub, wordmarks and icons are all drawn in code.
Colour scheme: Light
Responsive: Desktop, tablet and phone

Quality

Accessibility: Skip link, visible focus, keyboard navigation, reduced motion
API keys and environment variables: None
Node.js: 20.9 or newer

Shipping

Deploys to: Vercel, Netlify, Cloudflare Pages or any Node host
Codebase: 51 source files, about 6,400 lines
Last updated: Oct 28, 2026

06License

One license, no tiers

The full text ships as LICENSE.md in the download and is on the license page.

You can

Use it for your own products
Use it for any number of client projects
Change the code and design however you like
Deploy the result commercially

You can’t

Resell or share the files as a template, theme or UI kit
Publish the source as a template in a public repository

07Questions

Before you buy

What do I get when I buy Fixate?

The complete Fixate project as a download: the Next.js app, its config file, a README with setup and customisation notes, and the license. It’s added to your account’s library the moment payment goes through.

Can I use Fixate for client projects?

Yes. One purchase covers your own products and any number of client projects, and you can change the code however you like. What you can’t do is resell or share the template files themselves as a template or UI kit.

Do I need API keys, a database or a backend?

No. It runs with npm install and npm run dev and deploys to Vercel, Netlify or Cloudflare Pages without any environment variables.

What should I change before I launch?

Do I need to know Next.js?

Basic React helps, but most changes are text edits in site.config.ts. The README walks through colours, fonts and section order.

How do updates work?

Updates to Fixate are free. When a new version ships, download it again from your library.

Can I get a refund?

Yes. If Fixate isn’t right for you, email support@hairlineui.com within 14 days and you get your money back. No reason needed.

Should I buy all-access instead?

If you’ll use more than two templates, yes. All-access is $149 for all 48 templates, including Fixate and every template added later. Three single templates would cost $117.

08All-access