Hippogriff.

The challenge

The site needed to communicate ambitious web craft without making the experience slow, inaccessible, or dependent on a showreel. The original playful art direction also needed a more deliberate expression of the same brand.

The direction

Keep Hippogriff's orange and give it a warm, light canvas. Pair Space Grotesk with Instrument Serif and Geist. Let typography carry the message, then use a responsive canvas object to make the engineering tangible.

Under the surface

• Render first. Pages and their meaningful content render on the server. Motion is a progressive enhancement, so reading and navigation never depend on an animation completing.
• One scroll rhythm. Framer Motion connects entrance reveals, bounded parallax, and a services section that moves horizontally in response to the mouse. Touch and trackpad scrolling remain native.
• Responsive geometry. The canvas projects a parametric wireform, easing pointer input outside React's render cycle. Pixel density is capped, and rendering stops when off-screen or hidden.
• Built-in restraint. A persistent motion control and the device's reduced-motion preference disable continuous movement. Fixed canvas dimensions and font fallbacks reserve layout space.

In practice

This is the website you are using. Explore the live canvas on this page, navigate the case studies, or pause motion in the header to compare the static experience. Performance measurements and recordings accompany the submission package.