Moto Finance

Moto Finance's website makes the visitor want the card first and only then explains what it does. The Awwwards page says so plainly, describing the goal as making the card feel worth carrying before the visitor even applies. The body of the page therefore does almost nothing to persuade with numbers. The $2,500 fee appears only in the page's meta description, the short summary that shows up in search results, and the body mentions it only in a single question in the FAQ at the very end.

After the opening film, the visitor follows the card on a journey. The first stop is the Earth at night, with small notifications such as Hotel Booked and Jet Booked floating over its lit-up cities to say the card works anywhere in the world. One of those notifications reads Transaction Successfull, with an extra l, and because the Earth is the second screen a visitor sees after the first, the typo is hard to miss.

After the Earth, the card itself enters, surrounded by a ring of lifestyle photographs under the heading THE CARD IS ONLY THE BEGINNING. Further down, the page covers zero foreign exchange fees, a round-the-clock concierge service and partner hotels, restaurants and travel. Zero foreign exchange fees means the cardholder pays no extra charge for currency conversion when using the card abroad. The page ends with the FAQ and a closing line, A quieter way to move through the world.

The word quieter in that closing line also sets the tone for the whole site. The page has not a single sales-style sentence, and it has only one kind of call to action, Apply for Access, which opens a form asking only for an email address, a company name and two checkboxes. One FAQ asks whether you need to hold crypto to use Moto, which shows the card is connected to crypto assets, yet nowhere else on the site is this mentioned. From start to finish the visitor sees only a card and a way of life.

Black, white and grey are the only colours in the website's interface. The background is a near-black #080808, the text a slightly cool light grey #e1e5e5, and a few shades of grey sit between the two. The only real colour on the whole page comes from the Earth, with its pale blue atmosphere and warm yellow city lights.

These colours appear as whole blocks, and the page marks its chapters by switching the background between dark and light. Everything from the first screen to the card's entrance sits on black, the exchange section suddenly turns into a full screen of pale grey, and the concierge section returns to black. The partner and FAQ sections both sit on a light background before the footer goes back to black.

The type is held just as tightly as the colour, with a single typeface, Neue Montreal, used across the whole site. Headlines are set at 64 pixels in a medium weight, all in capitals, with the letter spacing tightened to about minus half a pixel, while body text and buttons use the same face at around 16 pixels. Apart from a few captions in the regular weight, nearly every word on the site is in the medium weight.

Properly Studio chose the photographs with the same restraint, and the ring around the card is almost entirely dark interiors and figures. The ring shows empty corridors, stone walls, a long lamp-lit dining table and a figure in a long coat seen from behind. The colour in these pictures is pushed so low that, seen together, they give away no hotel or restaurant brand.

The exchange section uses no photographs at all. Instead, Properly Studio set two columns of large currency amounts on pale grey, including ¥20,000, CHF 40.000, £15.000, ₩22.000 and €12.500. Some of the amounts are sharp while others are translucent or blurred, so they seem to float in the air at different distances. The headline 0 FX FEES BUILT IN sits above the two columns, and only three lines of small text sit between them.

The main piece of motion on the site is the card's entrance. As the visitor scrolls, the card starts edge-on to the camera, reduced to a thin bright line. It then turns around its vertical axis, first showing the back with the card number and then flipping to the front with the head emblem. The ring of photographs moves toward the camera as the card turns, so the visitor seems to be travelling down a tunnel lined with pictures.

The card and the photo tunnel are both drawn in a single three.js canvas. The card is a 3D model, and the photographs shift in perspective along with the camera, so they appear to be flat panels placed in the same 3D scene. The card's metallic look comes from a matcap texture, a technique that paints the lighting and reflections onto a sphere-shaped image in advance. Whatever angle the model turns to, it takes its colour from the matching spot on that image, so no lighting has to be calculated in real time.

The opening film on the first screen, by contrast, is an actual video rather than real-time 3D. The video runs for 11.4 seconds, starting from black and showing the Moto logo before a glowing light box comes down. The camera finally settles on the plinth and the card, and since the video plays only once, it stops on that last frame. The Earth that follows is rendered in real time, drawn frame by frame on a canvas by three.js.

Scrolling is handled by the smooth scrolling library Lenis, so the page glides on a little after the wheel stops. The animation in each section is driven by the animation library GSAP and its ScrollTrigger plugin according to scroll progress, so the animation advances exactly as far as the visitor scrolls. Scrolling the whole page continuously averages 59 to 60 frames per second, where 60 frames means about 16.7 milliseconds per frame. The only stall on the whole page is a single 86-millisecond frame on the first screen, roughly four or five dropped frames in a row, while the slowest frame in every other section stays under 24 milliseconds.

Properly Studio built the site on Webflow, a visual website builder in which pages and styles are laid out in an editor, and added hand-written scripts on top. GSAP, Lenis and three.js all load from public content delivery networks rather than being bundled into the site's own files.

The page has three canvases, one each for the Earth, the card and the currency amounts in the exchange section, and all three use three.js, though not with the same renderer. The Earth uses the renderer three.js provides for WebGPU, the newer graphics interface in browsers, while the card and the exchange section use the standard WebGL renderer. When a browser cannot use WebGPU, the WebGPU renderer falls back to the older WebGL2 interface, and on this site the Earth does in fact run on WebGL2. As a result the page has to download the code for both renderers, 165 KB for the WebGPU version and 84 KB for the standard one, plus a 98 KB core the two share.

Moto's home page downloads about 7.1 MB on a first visit, rising to 7.6 MB after scrolling the whole page. The opening video is a single 4.4 MB file, more than three fifths of the first download, and it plays only once. The next largest item is the set of three Earth textures, showing the land by day, the city lights by night and the clouds, which total about 1 MB, with the clouds the largest at 553 KB. The card's two textures come to about 400 KB. On top of these the page loads 173 KB of Google analytics script and a Cloudflare check that keeps bots away from the application form.

The first screen carries a 4.4 MB video, yet its text appears quickly. Both the first and the largest piece of content on the page are the headline on that screen, and the headline does not have to wait for the video. The server returns its first byte in 134 to 430 milliseconds, against a recommended 0.8 seconds from Google. The headline appears after 324 to 648 milliseconds, well within the 1.8 seconds Google recommends for the first content (FCP) and the 2.5 seconds it recommends for the largest content (LCP). The page barely moves while loading, with a layout shift score (CLS) of only 0.002 against Google's limit of 0.1. Loading also includes 6 long tasks, stretches of more than 50 milliseconds when a script keeps the browser too busy to respond to input, and the longest lasts about 0.3 seconds.

The site does too little for three groups of visitors, namely people bothered by motion, people browsing with a keyboard and people using screen readers. Operating systems offer a reduced motion setting for those who feel unwell when things move on screen, but the site's stylesheet has no rules for it. When keyboard users press Tab, the focus moves through the navigation and each button, but the outline marking it is a 1-pixel near-black line that almost disappears on the black background, so they can hardly tell where they are. On the application form at the end, the company field has no text label, so a screen reader cannot say what the field is for.

Moto Finance scored 7.30 out of 10 for its Awwwards Site of the Day. Of the four categories, Creativity was highest at 7.56 and Usability lowest at 7.19, with Content at 7.31 and Design at 7.25 in between. Less than 0.4 separates the four categories, so the jury rated the site fairly evenly across the board. The nineteen jurors' overall scores ranged from 6.1 to 8.7, with five votes at 8 or above.

Moto Finance's Developer Award comes from a separate Awwwards jury of developers who judge the technical build, and they gave it 7.20. Among the developer categories, Animations scored highest at 7.40, which fits the fact that the site puts most of its effort into scroll animation such as the card's turn and the photo tunnel. Markup, meaning how the page's code is written, scored lowest at 7.00, while Semantics, Accessibility and WPO (web performance optimisation) all scored 7.20.

This is Properly Studio's first Awwwards Site of the Day, after three Honorable Mentions (HM), a level of recognition one step below Site of the Day. Each of the three credited individuals has submitted only this one project to Awwwards. Their profiles indicate that Damian Denis and Natalia Parandyk handled the design. The 3D animation of the card, the Earth and the photo tunnel was most likely the work of the front-end developer Michał Laskus, since the specialities listed on his profile are exactly GSAP, three.js and Webflow.