The Prompt

Heatmap looks awesome … I wanna play with a design idea … something made up of elements that look like the heatmap at the bottom of the page … full width … 14 rows of box that are 1/2 the width & height of the real heatmap … no text … no controls … just a grid of individual elements that look like the heat map … on page load … PAUL PETTY is spelled out by squares turning from no bg color to the darkest (organge) color from the heatmap … like a pixel art drawing … put this into a new blog post … eventually this will become the replacement header on the site … the idea is that the navigation (blog / work) stays where it is but the whole header is much taler on page load … then on scrolling down the grid cells pack together & get slightly smaller so that eventually you still see PAUL PETTY … maybe a little distorted … but condensed into the same size the transparent header is today … I want the blog prototype to do all of this in full width & show the scrolling condensed outcome … similar to last post a heading for The Prompt … and a heading for The Results.

The Results

The box above is a stand-in for a whole page: the mock header sticks to its top, and the gray lines are the page underneath. Scroll inside it to watch the header condense, and use Replay the intro to draw the name again.

How it works

• The grid is 14 rows of squares at half the size of the heatmap at the bottom of this page, with the same empty gray and the same darkest orange. It’s built about twice as wide as the window and centered, so in the tall state it runs off both edges, and when it’s squeezed on scroll it still fills the whole width.
• The name is a tiny pixel font. On a wide screen it’s 5×7 pixels per letter on one line; on a narrower one it drops to 3×5; on a phone it stacks PAUL over PETTY so it still fits.
• On load, the letter squares turn orange one after another, left to right and a little down each column, so the name looks drawn in.
• On scroll, the header height goes from the tall grid to today’s 64px over the first 240px of scrolling. The grid is squeezed along with it, more in height than in width, so the squares pack together, get smaller, and the name ends up squat and a little distorted but still readable. The “blog / work” navigation stays put at the top right the whole time.

Making it the real header

Turning this into the site’s header would mean rendering the grid in Header.astro in place of the “PaulPetty.com” wordmark, driving the condense from the page’s own scroll instead of the box’s, and keeping the header’s existing frosted-glass background. A couple of things to decide first: whether the intro should play on every page or only the first visit, and how the tall header pushes the content down without a jump when it condenses.

The Follow Up Prompts

Ok, back to the header … As a user scrolls down the page on Desktop only, for every 33% or so of vertical height scrolled shift the letters in PAUL PETTY to the left by 1 block … but in a randomized way where each pixel fades fades out & back in at slightly different intervals. The reverse would happen when scrolling up …

scrolling judgement call: ok as is … actually really good. One additional change: an intentional random flicker & “lights out” effect … while scrolling use different shades of the orange for a random 5 - 10% of pixels. Even when not scrolling leave some dimmed. This is intended to be whimsical, and not too distracting …

Ok, for the original blog post about this, can you retain the previous version related to the original The Prompt & The Results … Then add a new sections where the current post ends … The first new section is The Follow Up Prompts with all of the prompts here including and since the one that starts “Ok, back to the header …” … then a new The Results that includes a demo of where the header is now with those changes. Then start the implementation to replace the site’s current header with this …

The Results

Same box as above, with the two additions. Scroll down inside it on a desktop browser and the name creeps left, shimmering as it goes; scroll back up and it creeps back.

• One column per third. Every time the box scrolls another 33% of its own height, the name’s target position moves one square to the left. Scrolling up walks the same steps in reverse. Only the squares that change move: each fades out or in on its own slightly random delay and length, so a shift dissolves across rather than snapping.
• Flicker. While you scroll, a random 5–10% of the lit squares sit at one of the heatmap’s lighter oranges, and one in ten of those goes out altogether, re-rolled every tenth of a second or so. Half a second after you stop it settles to a couple of dimmed squares that swap out every second or two, so the name is never quite perfect.
• Desktop only. The drift runs when the window is at least 768px wide and the browser reports a fine pointer that can hover. On a phone the header still condenses on scroll, but the name stays put.

And the header at the top of this page is now the real thing. It’s the same engine as the box above, driven by the page’s own scroll instead of the box’s: tall on load, drawn in, condensed to the old 64px bar over the first bit of scrolling, and flickering a little all the while. One difference: the real header doesn’t drift. The name stays put, and instead every third of the window scrolled sets off a short burst of flicker. The squares are a link home. The blog / work navigation stayed in the header at first and has since moved to the footer, next to the copyright.