Blog — Notes on design, motion, and the web

Building Page Transitions with the View Transition API

The full build of our page transition — the current page recedes into the dark, a white sheet rises over it, and the new content reveals on cue. No animation library, just the platform.

June 1, 2026

Dev Source

The Scroll-Reveal Engine — One Hook, Many Entrances

How we reveal headings word-by-word and lift blocks into view as you scroll — built on one tiny IntersectionObserver hook, with the motion living entirely in CSS.

May 31, 2026

Dev Source

Building a Custom Cursor That Earns Its Keep

A lerped follower that skews toward its travel, morphs into whatever you hover, parks itself when idle, and never leaves a stuck state. The full build of the cb-cursor.

May 30, 2026

Design Course

Building a Design System in Tailwind v4

One ink/paper palette, a responsive type ramp that steps down without a single breakpoint variant, and layout primitives that end the copy-pasted container. The system behind this site.

May 29, 2026

Design Course

The Craft of Negative Space

Whitespace isn't empty — it's the most active material in the layout. Here's how we use it to lead the eye.

May 28, 2026

Dev Source

Clean Architecture for a Frontend — Separation of Concerns That Sticks

One source of truth per concept, data out of components, semantic HTML by default. How we audit a frontend for drift and refactor it back to one clean shape.

May 27, 2026

Dev Source

A File-Based MDX Blog in Next.js — No CMS, No Database

How the post you're reading is built: an .mdx file with frontmatter, parsed by gray-matter, rendered by next-mdx-remote on the server, pre-built per slug, and shipped with full SEO.

May 26, 2026

Dev Source

Smooth Scroll Without the Second rAF Loop

Lenis gives you that weighted, eased scroll — but pair it with GSAP naively and you run two animation loops. Here's how to drive both from one ticker, and reset cleanly on navigation.

May 25, 2026

Motion

Timing — The Language of Motion

Easing curves are grammar. Get the timing right and an interface starts to feel alive instead of animated.

May 24, 2026

Dev Source

Deterministic Gradients as Identity

Every post and project on this site has a distinct cover before any artwork exists — a gradient hashed from its slug, so it's unique, stable between renders, and free.

May 23, 2026

Design Course

Typography as Architecture

One typeface, used with conviction, can carry an entire brand. Here's how we build structure from type alone.

May 19, 2026

Dev Source

Performance Is a Design Decision

Speed isn't something you bolt on at the end. It's a creative constraint that makes the work better.

May 14, 2026

Design Course

Designing the First Five Seconds

Most visitors decide whether to stay before they've read a word. Here's how we earn those first five seconds.

May 8, 2026

Design Course

How to Make UI/UX website // Frontend development

A practical walk through turning a UI/UX concept into a living, breathing frontend — from layout to motion.

October 23, 2024

Design Course

How to Cook an Emotional Site // Web Development

Emotion in a website isn't an accident — it's a recipe. Here's how we measure the ingredients.

October 21, 2024

Dev Source

Mouse Follower

A small custom cursor that blends, scales, and reacts — the open-source building block behind our interactions.

April 11, 2022