FLUX

FLUX is a concept website for a cross-chain crypto swap product. One chrome liquid tells the whole story as you scroll, from the first droplet to the final logo, across nine scenes: the opening, the hero, the transformation, routing, a swap simulator, six ecosystems, features, how it works and the finale.

Crypto websites tend to lean on the same visuals: floating coins, neon gradients, particle clouds and glassy card grids. I wanted to avoid all of that and find a clearer way to show what actually happens when value moves from one blockchain to another.

Digital value behaves like liquid. It takes the shape of whichever blockchain holds it, melts when it moves, and reforms when it arrives. So the whole site follows one rule: one continuous liquid from the first frame to the footer, with no cuts. An Ethereum-inspired form melts into a ribbon and folds into a Solana-inspired one, routes split into four streams, and in the finale every stream gathers and settles as the FLUX logo.

I called the direction "Liquid Electric, with restraint". A midnight background and deep slate panels let the chrome liquid carry the page. Electric cyan is kept only for primary actions and active selections, ultraviolet only adds depth to the liquid, and acid lime appears exactly once, on the winning route's "Best" tag. The type pairs Geist Sans with Geist Mono for numbers and labels, with one word in each headline set in Instrument Serif Italic.

I built FLUX in 16 stages with Next.js, TypeScript, three.js, custom shaders, GSAP and Lenis, then refined it in three extra passes: richer feature screens, a redesigned How it works section, and a colour refresh with left-aligned hero buttons. A single 3D canvas sits behind the page while a scroll "director" decides the liquid's shape at every point, so scrolling backward, jumping or reloading always shows the right shape. All the text stays as normal page content on top, readable and searchable, and the liquid drops to a lighter version on weaker phones.

The result is a live concept that tells a whole product story through one shape. The swap simulator is clearly labelled as a demo, with no wallet, no real money and no network requests. FLUX scored 100 in Lighthouse for accessibility, best practices and SEO, with zero issues in an automated accessibility check, full keyboard support, readability at 400% zoom, and a Reduce motion toggle that keeps the whole story without the animation.