Heron AI

The product Heron sells has no physical form and is hard to capture in a photograph. It is an AI assistant that lives inside building design programs such as Revit, Rhino, ArchiCAD and SketchUp. It watches the architect model, points out where the design breaks the code, and once the architect agrees, makes the change directly in the model. With nothing to put on display, Bearplus turned the whole website into an architectural drawing and let visitors experience plan checking on the drawing itself.

Every visit starts with a loading screen that lasts about 8 seconds. On an off-white sheet, the lines of the house elevation draw themselves stroke by stroke while a percentage climbs beside a thin orange line. The lower left of the loading screen reads DESIGNED BY BEARPLUS, THE AWARD-WINNING DESIGN AGENCY. At the lower right sits a spec card that looks like the title block of a drawing, giving the company type, the founding year 2026, a focus on AI building code checking for architects and an address in Denver. Beside it run six numbered lines that read like a machine boot log, from INITIALIZE CORE SYSTEM to OPTIMIZE INFERENCE ENGINE. Once the lines are finished, pencil shading fills in, and only then do the headline and menu of the first screen appear.

That elevation is the first screen, ready for the visitor to drag boxes over in search of violations. The house hides two red dots, one for a handrail rule and one for a guardrail rule, and when the visitor circles both, two orange cards hang side by side on the house. The headline reads AN AI AGENT THAT WORKS INSIDE YOUR DESIGN TOOLS, and a ticker below it repeats faster iterations, fewer mistakes and less busywork.

Below the first screen, the page sets out a complete problem and answer. It opens with a statement and a row of client logos, noting that Heron works directly inside Revit, Rhino, ArchiCAD and SketchUp. Four cards then list an architect's four frustrations, every change made by hand, generic AI tools that cannot see the model, nobody watching for problems, and small tasks piling up into lost days. Next the page pauses to tell a short story, three captions appear in turn, and a floor plan assembles itself from scattered pieces of wall. Red dots then appear on the plan, and clicking one opens a code note about exit travel distance.

Only after the story does the page introduce the product itself. Heron comes as two products, a chat window that floats over the design program and a dashboard that gathers every change and approval. Further down, the words Observe, Advise, Act and Learn split its way of working into four steps. The page ends with a list of eight kinds of users, from architects, interior designers and landscape architects to drafters and small firms, followed by a button to book a demo. Beyond the home page, the site has two product pages, a pricing page, a resource library, an about page and a contact page, and the pricing page's headline promises that you pay for the hours you get back.

Heron's site draws everything onto a single sheet of paper. The background is an off-white with a faint paper grain, and small crosshair marks sit at the corners of the screen and where grid lines meet, like the registration marks on a drawing. Thin lines divide the layout into cells, with the menu in the cells along the top and the description in a cell at the lower right, so the whole page reads like a laid-out construction drawing.

The building illustrations on the home page all have the texture of pencil and charcoal. The house on the first screen, the tall apartment block on the second and the brutalist buildings further down are all shaded with fine hatching, often with an orange-red disc hanging behind them like a setting sun. This style makes an AI product look like an architecture practice's own sketches rather than a technology company's promotional art.

Heron's home page palette holds only the paper colour, charcoal and one orange-red. The orange-red is reserved for the places that need the visitor's attention, including the violation cards, the selection box, the red dots on the plan, the progress line during loading and CONTACT US at the top right. The rest of the layout is black, white and grey, so whenever orange-red appears it pulls the eye, and what it marks is usually a problem or a button to press.

The type speaks in two voices, one for headlines and one for small prompts. Headlines are set in the heavy sans-serif BT Grotesk in capitals, like the titles on a drawing. Descriptions, numbers and prompts use the monospaced Geist Mono at a small size, often wrapped in square brackets such as [01], [SCROLL TO CONTINUE] and [CLICK ON VIOLATION], which read like status messages in a software interface. Bearplus also treats the code clause numbers themselves as part of the layout, printing numbers like IBC 1017.2 and ICC A117.1 at the top of each card, where they catch the eye before the title does.

The footer draws the company name as a type construction drawing that has not yet been inked. The letters of HERON AI are only outlines, marked with dimension ticks and centre points. On the left the footer also holds a subscription box whose text promises more cool websites like this one to people who sign up for updates from Bearplus. The footer therefore also recruits readers for the agency that built the site.

The site turns the visitor's cursor into a drafting tool. As it moves over the first screen, it drags a horizontal and a vertical guide line across the whole sheet, and the X and Y coordinates beside it change as it goes, much like the snapping crosshair in architecture software. When the visitor holds the mouse button and drags, a translucent orange selection box stretches out behind the crosshair. On release the box disappears and a violation card opens on any red dot that was inside it. Once open, a card stays hanging on the house and never closes on its own.

The floor plan sequence is driven entirely by scrolling. When the visitor reaches it, the page holds still, pieces of wall fly in from every direction and lock together into a complete house plan, and dimension lines and furniture are then drawn in. A small black label below changes its caption with each stretch of scrolling, asking the visitor to keep going, until its text finally switches to click on violation and the red dots appear on the plan.

The small animations on the page also imitate the act of drawing. The line icons on the four problem cards redraw themselves when the mouse moves over them. The hollow letters in the footer get inked by the cursor, as if the spots it passes over were soaked through. When the visitor opens the about page, a hexagonal floor plan is drawn first and its rooms fill with orange one after another, and only after about three and a half seconds does the cube-shaped company logo appear.

Heron's page holds steady while the visitor scrolls from top to bottom. It holds 60 frames per second all the way from the first screen to the footer, and the slowest frame takes only 22 milliseconds. Smooth scrolling is handled by Lenis, and the page also loads the animation library GSAP together with its scroll-trigger, text-splitting and typing plugins.

Bearplus built the layout in Webflow and took the animation and smooth scrolling from ready-made libraries on public servers, GSAP, Lenis, the page transition library Barba and the carousel library Swiper. The site's own script is 290 KB and hosted separately, and it has been obfuscated, with its variable names and the order of its steps scrambled so that others will find it hard to read or copy.

The whole site downloads very little data, only about 1.7 MB when the home page opens and about 3.9 MB after scrolling all the way to the bottom. The largest group of files is the set of illustrations for the eight kinds of users in the list, 125 to 327 KB each and about 1.7 MB together. Most of the graphics on the page are line drawings stored as vector images, and the hundred and forty-odd of them add up to less than 0.2 MB.

Nearly all of the visitor's waiting happens on the loading screen. The server returns its first byte in 35 milliseconds, and both the first contentful paint (FCP) and the largest contentful paint (LCP) arrive within 0.3 seconds. Both numbers, however, measure the headline and illustration hidden under the loading screen, and the visitor waits about 8 seconds, until the lines are drawn and the shading is in, before seeing the first screen. Every time the visitor returns to the home page, the loading screen draws the house again from the beginning. Cumulative layout shift (CLS) is 0.12, a little above Google's recommended limit of 0.1, but the shift happens about half a second after opening, under the loading screen, where the visitor cannot see it.

The two most interesting interactions on the site can only be done with a mouse. The red dots on the first screen and on the floor plan are not buttons and Tab cannot reach them, so a visitor using only a keyboard can neither drag a box nor open a violation card. The rest of the site is reasonably friendly to the keyboard. Links and buttons keep the browser's default focus ring, and when focus reaches Product or Resources at the top, the dropdown menu opens by itself. The two logo links at the top have no names, however, so a screen reader announces only that there is a link. The subscription field in the footer has only placeholder text, its submit button has no name either, and five images lack alt text.

The reduce motion setting reaches only a few small corners. The style sheets contain two rules for it, covering the hover animations on the problem cards and in the section on how Heron works, while the loading screen still draws the entire house.

Heron AI scored 83 points on FWA from 31 votes and was filed under Architecture & Design and Commercial/Corporate. The team's description on FWA runs to just three short sentences. Heron is an assistant that works inside your design tools, it watches your model and suggests fixes, makes the edits itself once you approve, and is built by architects. All three actions can be found on the page, as the Observe, Advise and Act steps. A month earlier, the site had already received an Honorable Mention on Awwwards.

The award records of Bearplus and Kenny Ho overlap almost completely. All six works Kenny Ho lists on Awwwards, including United Carriers, Kanak Naturals and CargoKite, also appear in Bearplus's portfolio, so he appears to be the company's regular lead designer. Each has six awards on FWA, and on 6 September their next project, United Carriers, won Site of the Day on Awwwards.