Study this site's motion for a new site with its own content.
Look and feel:
The Start establishes a distinct digital atmosphere through a deep black void populated by a dithered particle sphere and floating three-dimensional objects. This surreal, cosmic composition contrasts sharply with bold, light sans-serif statements anchored in the bottom-left corner. The aesthetic balances playful, eclectic imagery—ranging from vintage computers to human heads—with a rigorous, monospace-tagged interface. The mood is immersive and avant-garde, creating a sense of depth and motion that feels both technical and organic.
Motion:
The page entry sequence features the gradual assembly of the central particle sphere and surrounding objects, which drift into position before settling into their idle animation. This introduction sets the stage for the immersive environment, allowing the viewer to orient themselves within the three-dimensional space before interaction begins. Navigation feels weightless and fluid due to smooth scrolling that decouples the viewport from the native scroll bar. As the user moves down, the initial dark scene dissolves via clip-path reveals into bright white content sections, creating a seamless transition between the abstract header and the concrete portfolio work below. Interactive elements such as buttons and links respond with subtle shifts in opacity and colour, maintaining the site's understated elegance. The cursor interacts with the interface cleanly, highlighting navigation items without triggering excessive movement that would distract from the background animations. Page changes are executed through a circular wipe effect that expands from the centre, momentarily obscuring the view before revealing the new layout. This geometric transition maintains visual continuity, bridging the gap between the dark homepage and subsequent white interior pages with a single, cohesive motion.
- Scroll (Scroll smoothing): Smooth scroll · lerp 0.176 · 95 % caught up in 280 ms (measured from 30 fps frames, ±0.002 % fit error; authoritative for scroll, viewport 1440)
- Scroll smoothing, time-based: a = 1 - Math.exp(-dtMs / 95) (measured; derived from the 95 ms time constant; stored lerp 0.176 is per 60 fps frame, so applying it once per animation frame changes the feel when the frame rate is not 60)
- Hover and focus (CSS): 150 ms cubic-bezier(0.4, 0, 0.2, 1) on color, background-color, border-color, text-decoration-color
- Hover and focus (CSS): 200 ms cubic-bezier(0.4, 0, 0.2, 1) on opacity
- Transition (CSS): 300 ms cubic-bezier(0.4, 0, 0.2, 1) on all
- Transition (CSS): 300 ms cubic-bezier(0, 0, 0.2, 1) on all, transform, padding
- Custom curves in the CSS: cubic-bezier(0.4, 0, 0.2, 1); cubic-bezier(0, 0, 0.2, 1); cubic-bezier(0.95, -0.01, 0.24, 1.1)
- Anchor scrolling: scroll-behavior: smooth
- Reduced motion: ships a prefers-reduced-motion stylesheet
Libraries: Lenis, three.js, Swup, WordPress, GSAP (bundled only), ScrollTrigger (bundled only), SplitText (bundled only), ScrollSmoother (bundled only) and Shopify (bundled only).
Techniques: smooth (lerped) scroll, sticky or pinned sections, webgl canvas, background or inline video, clip-path reveals and wipes, blend-mode text or cursor, view transitions api, page transitions (barba or swup) and a prefers-reduced-motion stylesheet.
The curator's notes on this site:
- Design: black page with a dithered particle sphere circled by floating 3D objects (heads, trophies, springs), a large light sans statement bottom-left, a monospace tagline and an "Ask us anything" input in the header.
Constraints:
- Recreate the feel, not the site: write your own copy and use your own images, icons and logo; do not copy its code, fonts or assets.
- Animate transform and opacity (clip-path or filter only where the reference clearly does); list exact properties, never "transition: all".
- Honour prefers-reduced-motion: keep opacity and colour fades, drop movement and smooth scrolling.
- Values marked (estimate) were drafted from notes, not measured: tune them by eye against the reference.
- Also request the 390 px phone clips: get_media with viewport 390, not only 1440. A null lite field, or small_screen_url, is a lightweight rendition of a clip, not proof that the phone clip is missing.