Skip to contact form

Web guides

Web development

Practical React, Next.js, interaction design, data, and interface engineering from the work itself.

These are implementation notes, not detached tutorials. Each guide takes apart a real interaction or engineering decision and includes the detail that made it work in production.

Use them as a technical reference, or as a way to see how Bothmade approaches motion, accessibility, component boundaries, and durable web architecture before hiring the studio.

Explore web development →

Guides in Web development

Engineering4 min read

A button that leans toward you

Making every call-to-action on the site pull toward the cursor, without touching anyone on a touchscreen.

Engineering3 min read

Text that develops like film

The scroll-scrubbed paragraph on our homepage, and why it's driven by scroll position instead of time.

Engineering5 min read

Four worlds, one scrollbar

How the homepage presents Web, iOS, macOS, and Vision Pro as physical sheets stacking on top of each other — try it below.

Engineering4 min read

The seam is the whole idea

The draggable line down the middle of our homepage isn't decoration — it's the entire pitch, made touchable. Drag it below.

Engineering3 min read

A cursor with a half-second memory

The dot and the ring that follow your pointer around the site aren't the same speed on purpose. Move your mouse in the box below.

Engineering3 min read

A wordmark that plays along

Every letter of our logo secretly knows which half of the name it belongs to. Hover one below and watch it switch sides.

Engineering5 min read

The details nobody asks for

Three small effects—a number odometer, scroll bar, and reading-line focus—explained with live demos.

Engineering3 min read

The seam follows you everywhere

The hero has a draggable seam. The footer has a splitting wordmark. It turns out there's a third one, quietly running on every single page.

Engineering4 min read

A two-axis stagger animation, explained

How to stagger a grid of items by both column and position with one small formula — the technique behind the tech-stack chips on our service pages.

Design4 min read

We deleted the empty box

Why we removed empty image placeholders instead of replacing missing project screenshots with stock photography.

Design2 min read

Even our 404 page is a pun

How a branded 404 page can keep its joke, return the right HTTP status, and stay out of search results.

Engineering4 min read

A 403 is not a loading problem

Nine pages told a new colleague that a deliberate permission refusal was a temporary glitch, and offered a retry button that could never work.

Engineering4 min read

Stripe will send that event twice

Redelivery is ordinary traffic, not an edge case — and a customer billed once and recorded twice is worse than one not recorded at all.

Engineering4 min read

Our funnel was counting backwards

Nine boxes across the top of a dashboard, each showing the number of people who got that far and stopped — arranged to look like a funnel.