Drop the "Engine". It's Cleaner.

"Drop the 'The'. Just 'Facebook'. It's cleaner."

Delve is a developer collective. There are four of us, Michał, Rafał, Patryk and me, and we build AI products. Our latest one is Superseller, which you can learn about here: superseller.pl.

We needed a rebrand. Initially, the collective was created for a hackathon. So, in similar fashion to all other hackathon projects, our name and logo came out of a single brainstorm, and nobody ever went back to question them. Names do that. You say one out loud once, and suddenly it's on the website.

But over time we decided to work on more stuff. Create more projects and ideas together. So a proper rebrand was way past due.

"Delve" was the half that always meant something. To delve is to dig deeper, past the first obvious answer, to go above and beyond. That's how we work.

So a new name was set. A new name deserves a new mark and a new site. As always, I designed both and built the frontend.

The mark

Before any code, I filled two pages of grid paper with arrows. Arrows pointing right, arrows in circles, arrows made of letters, and a few "d"s pretending to be arrows. I like to think the paper had fun too.

I ruled out a lone "d" early. It's a fine monogram, it just doesn't go anywhere. At first I also planned the symbol and the word as two separate things, similarly to Superseller. After playing with rectangles in Affinity, the arrow moved in with the word, and they've been one logo ever since. It just clicked.

Where it landed is the word in lowercase, followed by an arrow pointing up and to the right. It stands for progress, and for going deeper than the obvious answer. And its sitting right after the name subtly mentions how we are one step ahead. A stretch? Probably, but I'm unreasonably proud of it either way.

It won because it was the quietest sketch on the page. It reads as the corner of a frame first and an arrow second, so it points somewhere without turning into a road sign. It sits after the word like it was always there. And it still reads as a tiny favicon in a browser tab.

On its own, the mark sits in a square. Its box is dead center, but its weight leans up and to the right, so even standing still it looks like it's on its way up. On brand, as always.

The wordmark and the site are set in Inter. Yes, Inter again. I'll stop using it when it stops being good.

The orange started life as Superseller's. I needed a color, Superseller had a very good one, and borrowing from your own product doesn't count as stealing. Now it's officially the team's color.

The background tunnel

Superseller's site is calm and practical, because sellers trust it with their stores. After all that restraint, I wanted the Delve website to be fun. Properly fun, with GPUs doing the heavy lifting.

I designed the whole page around the arrow. The tunnel in the hero is built out of it. The statement after it explains it. The footer ends on it, in glass. If you spot a shape anywhere on this site, it's probably the arrow.

Each frame of the tunnel is one arrow from the logo. Every other one is flipped, so two arrows close into a square, and the squares stack into a tunnel with a warm light at the bottom. Scrolling moves you down it.

Then I spent a day improving it. I made the arrows properly 3D. I pointed them all the same way, which looked gorgeous, honestly. I tilted the camera. Then I went back to the very first version, because it was better than all of them. Sometimes the first take is the take.

The first take still got some finishing. The frames read a bit like paper cutouts, so they got what makes paper look solid. The edges facing the light catch it, there's a soft shadow where pieces meet, and the glow from the bottom spills over the inner edges. Then I pulled the two arrows in each square slightly apart, so you see two arrows instead of one square. In an arrow tunnel, the arrows should get the credit.

A few ideas came and went. The camera used to follow the cursor, which made the hero feel like it was trying to read your mind. For a while the arrows also grew as you scrolled, until they filled the screen, like diving into the logo. It was a lot of diving. Now the tunnel just rolls a little as you go down, so it feels like corkscrewing in.

Always a step ahead

Right after the hero, the tunnel keeps pulling you in. The next title lights up word by word as you scroll. I had so many bookmarks with CSS snippets for this kind of animation.

Four co-founders

Our portraits sit inside glass slabs, each tilted its own way, floating in space. Hover one and it turns to face you. Phones can't hover, so there the slabs turn as you scroll past instead.

The photos started as orange duotones with a dot pattern. Over a few rounds the dots went from a lot, to a little, to none. Faces won over texture. It covered too much. Now the photos are in color with a light warm tint, so they still belong to the page.

The footer

At the end of the page the arrow comes back, made of glass. It bends the warm glow behind it, turns into place as you arrive and leans slightly toward your cursor. The glass idea lost the hero but won the ending, which is a fair trade.

The same glow became our business card.

The logo, moving

The mark also got an animation. The arrow drops in from the top right, overshoots a little and settles. Then "delve" slides in from the bottom left, bumps into it and pushes it slightly out of place, and both wobble back like jelly.

I didn't draw the easing curves by hand. It's a tiny physics simulation, with springs pulling each piece home and one collision between them, so the bounce and the bump come out of the motion itself.

On phones

On a phone the tunnel fills the screen, the statement wraps to two lines and the founder cards turn as you scroll. Nothing important hides behind a hover.

How it's built

Three words: hand-written WebGL shaders. No 3D library. The tunnel isn't a 3D model. It's flat logo shapes drawn front to back, with the light worked out per pixel. That's why it stays smooth even on a big screen.

My favorite fix is one you'll never notice. There are six glass and tunnel scenes on the page, and each one only builds itself when it's about to scroll into view. Simple fix, great performance benefits. A phone opening the page doesn't have to prepare the footer before you've even seen the hero.

Finishing notes

The engine? It's still in there. You just have to scroll to find it.