Paul Faivret, Jakub Krehel
September 1, 2026
·
Craft
Rebuilding a website is never easy, especially when you’re also defining the visual identity for an early-stage company that’s still relatively unknown. We did a week-long sprint to figure out how we wanted Interfere to look and feel.
There were a lot of interesting discussions, explorations and iterations during that week, and we distilled some of them into this post.
We started with the visual identity. We had very little to go off of, so we explored dozens of completely different directions in Figma until one of them clicked: a clean and minimalist look that is unmistakably Interfere.
These explorations ranged from ethereal to very technical to see what Interfere could feel like. They gave us the two signature details the site is built on: the Interfere gradient and a pixelated final word in the headline that echoes the logo.
The gradient shows up throughout the website. It’s in a quote, behind graphics, in the cmd+K menu and in many other places. It’s a nice visual thread that ties seemingly unrelated elements together and makes the website feel cohesive.
For the homepage graphics, we wanted to find the right level of transparency, one that would let the gradient show through while still blending with the main container.
You can see in the examples above that example number one uses a plain background, which doesn’t connect well with the gradient behind it.
Example number two is too dark and makes the navigation icons almost invisible.
Example number three is almost there, but the top of the navigation sidebar sits too close to the pure white used in the main container, making the overall structure harder to understand.
We settled on the semi-transparent grey in example number four, the only option that met all criteria.
An extra challenge we had to deal with was the different rendering of the same color between Figma and the browser. Figma automatically renders shadows behind transparent fills; browsers don’t. The result is two visibly different outputs from the same value, which made it hard to use Figma as a testing ground for color.
We put a lot of effort into every little detail of the product, but sometimes showing the actual product as is can introduce unnecessary noise and clutter and take away from what you’re trying to communicate.
We decided to simplify the graphics by using skeleton UI for unimportant pieces of the UI, which helps us show exactly what we want in every asset.
We put a lot of effort into animating parts of the website too. On a landing page, you can generally be a bit more creative and playful than you can in the product.
We still wanted the animations to be performant and tasteful and we didn’t want to animate things just for the sake of animating. Most of the animations we built give you a glimpse into how the product works.
The first animation we built was the staggered hero sequence. The only properties animated here are blur, opacity and translateY. Blur goes from 10px to 0px, opacity from 0 to 1 and translateY from 20% to 0%.
The elements are grouped by kind. The main title animates by word, while the description and buttons each animate as a single block. The stagger timing is also slightly different for each group so the animation doesn’t feel robotic.
The second part of the hero animation is the timeline sequence. With this animation, we wanted to show how the product works on the homepage.
We are big fans of websites where the marketing page is the product, and while this wasn’t realistic for us, we wanted to do something similar.
It animates a lot of the same properties and values as the hero sequence. Every item runs the same three steps in order. The line draws down, the marker animates in, and then the content animates in. As soon as one line finishes drawing, the next one begins. It mirrors how new events enter the timeline in the product.
The animation is quite heavy and lengthy, so we only play it the first time you land on the page. Navigating to the homepage after that doesn’t replay it because it would become annoying quickly.
There are other, subtler animations too. Below the hero section there’s a loop that consists of three steps that explain how Interfere works. There’s no product like Interfere on the market, so we feel it’s important to explain how it works clearly.
These animations are intentionally much subtler than the hero ones. The page is already heavily animated and we didn’t want to make it overwhelming. Over-animation is a real thing, especially now that it’s very easy to animate anything.
The other subtle animation is the text reveal on scroll in the testimonial block. As you scroll down, the words animate in using blur and opacity. The words are grouped in threes. If you slow the animation down, you’ll see there are three words animating at all times. If we animated them one by one, the animation would feel quite robotic.
After launching the homepage, we realized we needed dedicated product pages for different personas, since each one has different needs. We decided to make each hero distinct and animate it in a different way.
The engineering hero is an animated diagram explaining how Interfere works, built out of SVG paths. The animation is a single CSS keyframe that runs in a loop and animates stroke-dashoffset to -5 over 0.7s.
The design hero is an animated stack of session replay previews. It’s a simple animation that animates blur, opacity and scale as the stack cycles through.
The GTM hero is a stack of company cards tied to a problem through a dotted pattern. Initially, we tried to use an SVG for the dot pattern, but rendering thousands of DOM nodes was a big performance drain, so we opted for a canvas instead.
The product manager hero section isn’t animated, but we built the asset fully in code and then applied transform to give it an isometric look.
Every asset on the website is built in code, with a few exceptions where it wasn’t possible. It’s significantly more work this way, but we weren’t willing to compromise or take shortcuts.
A landing page with assets built in code feels very different from one that uses images. Obviously, using images is sometimes inevitable, and some things are incredibly difficult to build in code, but images weren’t even a consideration when it came to assets, especially the product ones.
In addition to that, it’s a big performance win because even when images are heavily optimized, good code is always more performant.
We originally built the website with Next.js. Since then, we’ve migrated to TanStack Start and Vite for both the marketing pages and the product. We use Tailwind CSS for styles, Radix for colors, Motion for animation and Base UI for primitives.
The first one isn’t really an easter egg, but it’s a nice quality-of-life detail. Right-clicking the logo in the navigation lets you copy it or download the brand assets.
The other one is a bit more hidden. Clicking the plus in the list of active users in the hero section takes you to our careers page. We’d been waiting for someone to find it, and luckily a user shared it on X recently.
If you like what you’ve read and you care deeply about craft and quality, we’re always looking for exceptional people to join us.
We’re a small team based in NYC building software that helps engineers, product managers and designers understand how their products work in production, find problems, and fix them before their users do.
Check out our careers page to see if there’s a role that might be a good fit. And even if there isn’t, we’re always happy to chat.