How this was built.

The Drape

The page transition. A dark (#1C1C1A) curtain that wipes up to cover the screen on exit, then retracts from the top on enter. Built with Framer Motion AnimatePresence and a custom TransitionLink component that intercepts all internal navigation. The key detail: the animation completes before the URL changes. Most page transitions fire simultaneously with navigation — they feel cheap because the new page flashes through before the curtain closes. This one does not. Easing: cubic-bezier(0.76, 0, 0.24, 1). Duration: 500ms each way. Total transition time: about 1.2 seconds. Worth it.

The Texture

The grain overlay. A fixed-position full-screen div with an SVG feTurbulence filter applied at 4% opacity with mix-blend-mode: overlay. The filter is defined once in the root layout as invisible infrastructure. The overlay references it through CSS. Why 4%? Below 3% it disappears. Above 5% it becomes a filter rather than a texture. At 4% it becomes a physical property of the surface. Try it yourself on the /playground page.

The Ghost

The custom cursor. Two elements: a small ink dot (8px) that follows the mouse exactly, and a larger ring (32px) that follows with a spring lag through Framer Motion useSpring. On hover targets the dot scales to zero and the ring fills. On dark surfaces the colors invert through CSS blend logic. The system cursor is hidden globally. The Ghost takes over entirely.

The Badge

The Badge · inline hero element · SVG textPath circular text · CSS rotate animation · image with radial gradient fallback · spin duration changes on hover via CSS custom property

Stellar Background

A full-section HTML5 canvas starfield with a gradient mask layered above it. Eighty stars are generated once with a mulberry32 seeded PRNG (seed: 42), then only the first forty render on mobile with reduced opacity and no constellation lines. Five simple constellations are hard-positioned into the right side of the canvas, each fading independently on distinct 15–30 second cycles through slow opacity interpolation. Tablet pushes those constellations upward; mobile compresses them toward the upper center-right. The lower stars never hard-cut. They fade into the background through the mask.

The Rail

Horizontal scrolling project cards on /work. CSS scroll-snap-type: x mandatory with scroll-snap-align: start on each card. The scrollbar is hidden through scrollbar-width: none in Firefox and ::-webkit-scrollbar in Chromium and Safari. No JavaScript. No library. The browser handles all momentum, snapping, and touch behavior natively. The hint text says drag or scroll to explore. It means what it says.

Emergence

Scroll-triggered section reveals across the site. Framer Motion whileInView with initial opacity 0 and y: 20px, animating to opacity 1 and y: 0. Triggered once rather than every time the element re-enters the viewport. The threshold is 0.1. Small stagger delays between sibling elements create a cascade without tipping into slideshow territory.

The Lift

Project card hover state on /work. translateY: -6px with box-shadow: 0 30px 80px rgba(0,0,0,0.1). Transition: 400ms cubic-bezier(0.16, 1, 0.3, 1), which feels physical rather than mechanical. The arrow shifts 4px right at the same time. It is a small motion. Small motions matter more because they happen often.

#EFEFED

#E8E8E6

#C4C4C2

#9A9A98

#0A0A0A