Seamless: Web3 Banking Landing

A self-directed demo built to practice AI-native delivery. Not a real product or client project.

Overview

Seamless is a two-section landing for a fictional crypto bank. The hero splits into two rounded panes, with the headline and call to action on the left and a Visa card that rotates once over a mountain video on the right. The second section holds three feature cards, each carrying its own artwork - a key on a machined plate, a globe with a dot travelling an arc between two labels, and a card orbited by a glass badge.

Both sections sit on a fixed 1685x1073 artboard that scales to fill whatever viewport it gets, so the desktop layout is pixel-identical at any size. One wheel gesture plays the swap between them: the hero lifts and fades over 800ms while the nav pills slide to centre, then ten separate properties bring the feature cards in over the next 2.6 seconds.

Stack & what's notable

One index.html with inline style and script. No framework, no build step, and no libraries, so the whole page is 47 KB before assets.

The transition is hand-written rather than driven by a library. A requestAnimationFrame loop paints custom properties that CSS reads, an exponential ease carries the exit travel, and a cubic-bezier is solved with Newton iterations to move the nav pills. Below 1200px all of it switches off and the page becomes an ordinary scrolling document with a fixed top bar and a burger menu.

The assets went from 40.1 MB to 1.70 MB, which is most of what makes it usable. Nothing was re-authored - the originals were simply 3 to 20 times larger than the size they render at, so a 2.1 MB image behind a 301px-wide card is now 41 KB, and Cloudinary picks the format per browser.