Robo Ramen

Artists with tier-one credits building their own NFT project. The site had to match the craft.

3,333 generative NFTs. Artists with Apple, Netflix, Disney credits. Terminal boot sequence, five build videos, 96 Lighthouse.

Design to Webflow
Terminal Aesthetic
Motion
Lighthouse

robo-ramen.webflow.ioVisit live website

The brief behind the build.

Five MP4 video assets. Seventeen-plus unique NFT images in two scrolling marquees. A CSS scan line effect. Multiple Webflow interactions running simultaneously. A custom font. Achieving 96 Lighthouse Performance with all of that active required every technique in the optimisation playbook working together.

The NFT market of 2023 had thousands of Solana collections launching every month. The ones that built communities were the ones where the site communicated that this project was different: more considered, more crafted, more real. The boot sequence loader alone set Robo Ramen apart before the page even revealed itself.

How we built it.

Explore the main parts of the build.

Visit robo-ramen.webflow.io

Boot sequence loader: terminal text before the page reveals

Timed Webflow interaction sequence with staggered text reveals. The visitor watches the robot boot up before the site appears. Storytelling through the loading experience itself.

Five build video sequences: shoulder, arm, leg, bowl, topping

Each component of the ramen robot has its own looping assembly video, lazy-loaded via intersection observer. The sequence turns the traits section into an assembly line.

NFT collection grid: 17+ unique collectibles in opposing marquees

Two CSS marquee rows moving in opposite directions, displaying the full range of generated Robo Ramen. The movement communicates collection depth without the visitor actively browsing.

CRT scan line overlay: CSS-only across the entire site

A repeating CSS gradient at 4px intervals creates the CRT monitor scan line aesthetic across every section. Zero image assets, zero JavaScript.

Workshop page explains the Houdini generative process in depth

A separate page detailing how each trait is individually modelled and how Houdini assembles them to ensure no clipping. Technical due diligence for the collector audience.

The decisions behind the website.

The details that shaped the finished build.

01
Boot sequence
Terminal text scrolls before the page reveals: timed Webflow interactions with staggered character-reveal delays. The visitor watches the robot boot up before the site appears. Storytelling through the loading experience itself.
02
Video strategy
Five build videos: each lazy-loaded with intersection observer. Each video loads only when it enters the viewport. The initial page load carries zero video weight.
03
CRT overlay
Scan line effect: pure CSS, zero image weight. A CSS repeating-linear-gradient at 4px intervals. No image asset, no JavaScript, no DOM overhead.
04
NFT marquee
Two rows in opposing directions communicate collection depth. 17+ unique collectibles scroll in two infinite CSS marquees. All images lazy-loaded, WebP format.
05
Typography
Monospace terminal font: subset, preloaded, no FOUT. The terminal typeface subset to the ASCII characters actually used, reducing file size by ~70%.
06
Free mint positioning
Conversion on value, not FOMO: no countdown timers. The site never uses urgency language. The conversion case is built entirely on the quality of the art and the credibility of the artists.

What changed.

The boot sequence alone set the project apart. Before the site loaded, the visitor was in the world. The terminal aesthetic, the ramen-robot fusion, the Houdini-built generative system. All of it communicated a level of craft investment that most generative projects couldn't match.

For the portfolio, Robo Ramen proves a range that most Webflow developers cannot demonstrate: from a precision-clean Danish SaaS landing page to a terminal-booting NFT experience with five embedded videos and a CRT overlay: both built to the same performance standard.

The terminal boot sequence, the video builds, the scan line overlay: every detail we designed was executed exactly as intended. The Lighthouse scores held through all of it.

ZAK StudioBerkawi & Ojee · Artists & Founders, Robo Ramen NFT

Have a similar project in mind?

Tell us about your business, what needs to change and what you liked about Robo Ramen. We will help you agree a scope and estimate before work starts.

You will speak directly with Muhammad Waleed Jamshed, who leads Al Kasib.

Meet the studio

View the contact page for project enquiries.