The first ten seconds

A visitor decides very quickly whether a site is worth their time. So before designing the home page, I decided what its first seconds had to do, and in what order: say who this is, say what I do, show there’s a person behind it, then get out of the way.

Everything on the home page waits its turn for that. Nothing appears just because it’s ready; it appears when it’s the next thing worth reading.

Below is the home page in miniature, arriving at the real timings. Each row of the timeline is one area of the page; drag along it to stop on any moment, or switch on reduced motion to see what changes for visitors who ask for less.

The first ten seconds, at the real timings

Drag along the timeline

sujoykh.vercel.app/

Sujoy Kr. HaldarSujoy Kr. HaldarHello & welcomeI’m Sujoy Kr. Haldarui/ux Designer & Design Engineer.Sujoy Kr. Haldar

0.0scontent from 4.2s · still by 9.6s

• Signature
• Hero
• Navbar
• Background
• Music

0s2s4s6s8s10s

A blank page, for a breath.

Reduced motion

The page itself takes about five seconds to build once the intro hands over. Most of that is overlap: the hero, the navbar and the background all move at once, each starting a fraction later than the last, so it reads as one arrival rather than a queue.

The navbar’s chrome is the one thing held back on purpose. The music island fades in 0.8 seconds after the intro, the scroll ruler at 1.0 and the islands at 1.2, so they arrive just after my name has started to appear, never before it. A menu that lands first is the first thing read.

The intro is three numbers: a breath before the pen starts, the writing, and a short hold so the finished signature registers before it moves.

const SIGN_DELAY = 0.4; // seconds before the pen touches the paper
const SIGN_DURATION = 3.2; // seconds to write the whole signature
const HOLD_DURATION = 600; // ms to hold the finished signature before it moves

When the hold is over, the overlay calls finishIntro(), which sets a single flag, introDone. That flag is the starting gun. The hero’s parts don’t know about the intro at all: each is wrapped in Reveal, which waits for the flag, then starts its blur-in after a delay set by its place in the reading order.

// Seconds after the intro ends (while the logo is still flying to the navbar)
const REVEAL_START = 0.5;
const STAGGER = 0.12;
const EASE = [0.22, 1, 0.36, 1];

/** When the `index`-th item in a stagger starts revealing (s after it's allowed to) */
export const revealDelay = (index) => REVEAL_START + index * STAGGER;

The navbar’s islands use the same flag with their own delay, so they come in after the name rather than with it.

initial={{ opacity: 0 }}
animate={{ opacity: introDone ? 1 : 0 }}
transition={{ duration: 0.6, delay: introDone ? 1.2 : 0 }}

The first thing most visitors do once the page is still is scroll. So the hero isn’t flat: it’s five layers, and each one moves at its own speed. The glow behind everything lags furthest behind, the giant name a little less, the text scrolls normally, and the portrait runs slightly ahead. The eye reads the slower layers as further away, so a flat page gains depth.

Below is the hero from two angles. From the front it’s the page you see. Pull the layers apart and it’s five planes, each labelled with how fast it moves; scroll it, then switch the parallax off to watch them all move as one.

The home page, front and apart

Scroll it, then pull the layers apart

Glow · 0.6×0.6×

Sujoy Kr. Haldar

Name, red copy · 0.77×0.77×

Sujoy Kr. Haldar

Name, outline · 0.8×0.8×

Hello & welcomeI’m Sujoy Kr. Haldarui/ux Designer & Design Engineer.About meI’m a designer who codes. I care about the space between an idea and the screen.

Text · 1×1×

Portrait · 1.1×1.1×

Scroll

• Portrait1.1×1.1×
• Text1×1×
• Name, outline0.8×0.8×
• Name, red copy0.77×0.77×
• Glow0.6×0.6×

FrontLayers

Parallax

Each layer is moved by one small hook. It takes the page’s scroll as a motion value and returns a y that’s a fraction of it, so nothing re-renders as you scroll; only the transforms change. A positive speed moves the layer down as the page goes up, so it lags behind; a negative one moves it ahead.

/**
 * Returns a `y` motion value that moves by `speed` × the page scroll distance:
 * positive speeds lag behind (feel further away), negative move ahead (feel closer).
 * Returns undefined when there's no parallax or the visitor prefers reduced motion.
 */
export function useParallax(speed) {
  const reduceMotion = useReducedMotion();
  const { scrollY } = useScroll();
  const y = useTransform(scrollY, (scroll) => scroll * speed);
  return speed && !reduceMotion ? y : undefined;
}

The speeds are kept small on purpose. The furthest layer moves at six tenths of the page, the nearest at eleven tenths: enough to feel, not enough to notice as an effect. And for visitors who ask for reduced motion there’s no parallax at all; every layer scrolls with the page.

The cost is plain: a visitor waits a little over four seconds before any content shows. For a portfolio that’s a real price, and I chose to pay it for three reasons.

• The signature is the brand. It’s the first thing that says this site was made by hand, and it doesn’t vanish: it becomes the logo you’ll see on every page.
• It plays once per visit, not once per page. Only a full page load runs the intro. Moving around the site, the page transitions take over instead.
• It gets out of the way when asked. With reduced motion the pen doesn’t write: the signature is simply there, and the page starts at 0.6 seconds.

The music follows the same rule of offering rather than insisting. The site tries to start it, but most browsers block sound until a visitor has interacted, so a few seconds after the page settles the music island opens once to offer a song, then tucks itself away.

What I’d still change: a returning visitor watches the intro again every time, and there’s no way to skip it. Next on my list: play it once per session, and let a click or a key skip straight to the page.

• Decide what the first seconds must say, and in what order, before designing how anything moves.
• Let one signal start everything, and give each part a place in the order rather than its own clock.
• If a moment of delight costs the visitor time, make it earn its place: reuse it, play it once, and let people skip it.