Study this site's motion for a new site with its own content.
Look and feel:
Midlife Engineering presents a tactile, hardware-inspired interface set against a pale grey backdrop. The design is defined by a realistic sound machine overlaying giant, edge-to-edge typography, creating a mood of calm precision. It blends the aesthetic of physical audio equipment with digital fluidity, using smooth motion and soft shadows to ground the experience. The interplay between the static, industrial device and the flowing text creates a distinctive sense of engineered mindfulness.
Motion:
The entry sequence begins with a minimal logo splash that expands into a boot screen featuring vertical fader bars and a terminal log. This technical initialization dissolves via spring-based animations to reveal the main interface and wordmark. Scrolling feels weighted and smooth, causing the background typography to slide horizontally while the central device remains fixed. As the user progresses, the device eventually slides away to allow full-screen statements before returning to its central position. Interactive controls such as knobs and keys respond with a soft, glowing orange disc effect. Text links feature subtle underline transitions that adjust thickness and offset, reinforcing the precise, mechanical nature of the interface.
- Scroll (Scroll smoothing): Smooth scroll · lerp 0.287 · 95 % caught up in 170 ms (measured from 30 fps frames, ±0.003 % fit error; authoritative for scroll, viewport 1440)
- Scroll smoothing, time-based: a = 1 - Math.exp(-dtMs / 58) (measured; derived from the 58 ms time constant; stored lerp 0.287 is per 60 fps frame, so applying it once per animation frame changes the feel when the frame rate is not 60)
- Hover: Hover and transitions: cubic-bezier(0.44, 0, 0.56, 1) · 200 ms (estimate)
- Hover and focus (CSS): 200 ms cubic-bezier(0.44, 0, 0.56, 1) on color, text-decoration-color, text-decoration-thickness, text-underline-offset
- Transition (CSS): 100 ms ease-out on transform
- Keyframe animation (CSS): 1000 ms ease, looping
- Custom curves in the CSS: cubic-bezier(0.44, 0, 0.56, 1)
Libraries: Lenis, Framer and Motion.
Techniques: smooth (lerped) scroll, split-text line or word reveals, blur-to-sharp entrances, frosted glass (backdrop-filter) and blend-mode text or cursor.
The curator's notes on this site:
- Design: pale grey page with a giant "midlife / engineering" wordmark edge to edge and a realistic hardware sound machine built in HTML laid over it: speaker grille, a mono status screen ("SYSTEM STATUS: DORMANT … switch on the machine"), knobs, numbered keys and sound icons (bird, rain, fire, wind).
- Load: a centred orange-dot-and-wordmark splash (about 3–5 s), then a boot screen of nine vertical fader bars (charcoal to pale grey, white and orange markers) beside a terminal log ending "LAUNCH". Framer appear animations follow: an SVG (800 ms after 600 ms), blocks (1.4 s after 1 s), springy badges (2.4 s after 3 s).
- Idle: the status screen's cursor blinks (1 s CSS) and several slow linear loops (6–39 s, UL tracks) run, probably ticker text inside the device.
- Hover and transitions: the power knob and keys show a large orange glow disc on hover; the studio credit drops its underline (0.2 s, cubic-bezier(0.44, 0, 0.56, 1)). No internal link was found, so no transition. The keys are probably sound triggers (49 audio elements).
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.