Study this site's motion for a new site with its own content.
Look and feel:
Funkhaus presents a near-black navy environment defined by a grainy WebGL field of broad, curved ribbons in pink, violet and white. The mood is sophisticated and technical, driven by the contrast between a light grotesk and an italic display serif in the headline. A frosted pill header floats above the content, while a giant white wordmark anchors the footer. The experience feels fluid and high-end, mixing smooth scroll mechanics with blur-to-sharp text reveals and sticky pinned sections that create a cinematic, layered depth.
Motion:
The page enters with a dark screen that fades into view, revealing the header pill and headline words which unblur and unclip individually. Simultaneously, the background WebGL ribbons begin a slow drift, and a media window at the bottom cycles through project clips to establish motion immediately. Scrolling feels weighted and smooth, with the hero window flattening into a wide card and introductory text sticking to the left as project images pass. Giant typography slides sideways with letters sharpening from a blur, leading into horizontal marquees and chrome objects that render in three dimensions. A custom follower cursor tracks movement, expanding to show media or text slots when hovering over work cards. Navigation links fade in opacity with a specific ease, and the logo shifts colour subtly, providing tactile feedback without disrupting the ambient flow. Page changes occur via client-side routing where the menu expands from a pill shape to cover the viewport with a frosted glass effect before revealing the next destination.
- Scroll (Scroll smoothing): Smooth scroll · lerp 0.07 · 95 % caught up in 710 ms (measured from 30 fps frames, ±0.003 % fit error; authoritative for scroll, viewport 1440)
- Scroll smoothing, time-based: a = 1 - Math.exp(-dtMs / 238) (measured; derived from the 238 ms time constant; stored lerp 0.07 is per 60 fps frame, so applying it once per animation frame changes the feel when the frame rate is not 60)
- Page transition: Client-side route change (estimate)
- Ambient: One canvas draws the grainy ribbon field behind the hero… (estimate)
- Hover and focus (CSS): 200 ms cubic-bezier(0.55, 0, 0.29, 1) on opacity
- Hover and focus (CSS): 450 ms cubic-bezier(0.1, 0, 0.2, 1) on transform, all
- Keyframe animation (CSS): 1283 ms linear
- Keyframe animation (CSS): 1283 ms linear
- Custom curves in the CSS: cubic-bezier(0.1, 0, 0.2, 1); cubic-bezier(0.165, 0.84, 0.44, 1); cubic-bezier(0.895, 0.03, 0.685, 0.22)
Libraries: GSAP, ScrollTrigger, Lenis, three.js and Nuxt.
Techniques: split-text line or word reveals, sticky or pinned sections, webgl canvas, background or inline video, blur-to-sharp entrances, frosted glass (backdrop-filter) and view transitions api.
The curator's notes on this site:
- Design: near-black navy with a grainy WebGL field of broad curved ribbons in pink, violet and white, under a headline that mixes a light grotesk with an italic display serif ("Pushing the boundaries of web technologies."). A frosted pill header and a giant white footer wordmark.
- Load: dark screen for a few seconds (about 3 s on phone, longer here), then the header pill fades in and headline words unblur and unclip one by one (per-word --blur and --clip variables), with the WebGL ribbons drifting slowly. The bottom media window swaps project clips about every 1–2 s.
- Hover and cursor: custom follower cursor (small dot, with media and text slots probably used over work cards); header links fade to 0.6 opacity in 200 ms cubic-bezier(0.55, 0, 0.29, 1); logo colours change over 500 ms on the same curve.
- Transitions: client-side (Nuxt).
- WebGL/canvas: one canvas draws the grainy ribbon field behind the hero (time-driven, slow drift); a second full-viewport canvas probably renders the 3D objects further down.
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.