Our own site, built as the proof
flarewebdesign.com is the first piece of our work a prospective client sees, and usually the only one before they decide whether to call. So we built it the way we build for clients, and made it prove the pitch instead of describe it.
Heat view on the homepage, from test visits recorded before launch.
- 7Disciplines on one site, from brand identity to realtime engineering
- 100Lighthouse accessibility score on every page, the Lab’s heat field and live cursors included
- 100Lighthouse SEO score on every page
- 100Lighthouse best-practices score on every page
The challenge
A small studio has no sales team. The people choosing between us and an agency, usually a marketing lead, an IT lead and whoever holds the budget, decide from the site before anyone calls. It had to be remembered among dozens of others, answer each of them in their own terms, and tell us what they read without adding the tracking we would refuse to put on a client’s site.
Brand identity · Motion design · Interactive graphics
A brand drawn from one idea
Flare means heat and light, so we drew the brand the way a thermal camera sees: hard bands of color, cool where little is happening, white-hot where it gathers. Every effect on the site follows that rule, so the hundredth page still looks like the first. The Lab opens on it at full strength: a heat simulation that warms wherever the pointer goes.
The brand, as a system
Three rules every page follows: the mark, the scale every attention map is colored by, and the one phrase per page that runs hot.
- The mark
- Hard bands radiating from the spark, the way a thermal camera draws heat.
- The scale
- Rarely readMost read
- Cool where few people look, white-hot where attention pools. Every attention map on the site runs this way.
- The emphasis
Made to be seen.
- One phrase per page warms toward its end: the words we most want read.
UX strategy · Information design · Interactive demos
A working demo for every team that signs off
A large project is approved by marketing, IT and operations, and each asks different questions. So How we build has a track for each, and every answer on it is something that works rather than a promise: thirteen demos in all.
One of the thirteen: the security demo, from IT’s track
Bots try the addresses attackers try on every site and are stopped at the wall, with this site’s real answers. Now and then a real visitor walks through.
Seen in thermal: Bots looking for a way in, turned away Real visitors, let in
Tried on this site/wp-login.php 403 · /wp-content/plugins/ 403 · /phpmyadmin/ 403 · /.env 404 · /.git/config 404
Every response carriesstrict-transport-security · x-content-type-options · referrer-policy · x-frame-options · permissions-policy
Marketing wants speed and easy edits. So the page measures its own speed in your browser as it loads, and an editor publishes to the page as you type.
IT wants to know who owns what, and what breaks. So the track maps every part of a platform and who runs it, and walks one change through every check before it goes live.
Operations wants the cost and the date. So the track lays out both before you sign, and shows what your team gets to run the site without us.
Privacy-safe analytics · Data visualization
An attention map that tracks no one
We wanted to see what visitors actually read on each page without recording sessions or following anyone. So we built our own attention map. Switch on heat view and any page on this site shows where attention gathered over the past month, drawn in the brand’s own heat.
Contact, from test visits before launch. 
A case study, from test visits before launch.
On your site
The map can run on your platform too, showing which parts of your pages, listings or articles get read, with the data kept on your own platform. If a free tool like Microsoft Clarity is all you need, we’ll say so and set it up.
Counts, not people. It records which part of which page held a pointer, on a rough grid, and how often. No cookies, no IDs, no recordings.
Do not track means do not track. Browsers that send Global Privacy Control or Do Not Track are never counted. The browser checks, and so does the server.
Gone in about a month. Counts are kept by the week, and each week deletes itself about five weeks later.
Planning something like this?
Websites start at $20k, with a fixed quote after a call.
Realtime features · Motion design
A site with people on it
A founder-led studio shouldn’t feel like an empty brochure. When other visitors are on the same page, you see their cursors, each labeled with a city, and anyone can leave a short note for the next person. At the foot of every page, the studio’s own Design and Engineering cursors build the call to action in front of you.
Design and Engineering building the call to action at the foot of the homepage, recorded on this site.
On your site
The same live layer suits products people use together: a team reviewing one page, or buyers watching the same listing.
A city, not an address. The city comes from the rough location the host sees for each visit, and it isn’t stored. A cursor shares its spot, a random name and that city, and nothing else.
Notes that tidy themselves. A note holds up to 120 characters, is checked for links and bad language, and disappears after 12 hours. Each visitor can keep three at a time.
Performance · Accessibility
Built to step down
None of this could make the site slow or fragile. Each heavy effect checks what the device can do and steps down when it has to, so everyone gets a working page and capable devices get the full show. The Lab’s heat field, three ways.
Drawn on the graphics card: sharp contour bands. 
Without graphics support: a simpler, softened version. 
With reduced motion: still, changing only where you point.
Loaded only where it runs well. The live features load after the page. The 3D logo loads only on devices that run it smoothly, and the heat field pauses whenever it scrolls out of view.
Under the hood
The short version, for whoever signs off on it.
- FoundationNext.js, React and TypeScript, hosted on Vercel.
- PhonesCursors load only with a mouse, and notes only on larger screens. On a phone, the page is just the page.
- Live featuresCursors and notes travel over a hosted realtime service. A visitor’s pass to it lasts an hour.
- InquiriesIf our email fails to send, the visitor is told and can try again, rather than thanked for a message nobody got. The same inquiry sent twice in a day is caught.
- SearchEvery page has its own title, description and share image, and search engines and AI assistants are welcome by name.
- ReleasesThe site’s automated checks run before every release, from prices to page titles. If one fails, nothing goes out and the live site stays as it was.