Procedural Shader Gallery

A cinematic product gallery with a procedural shader hero and an oversized hover-reveal index that opens detail pages. Copy the prompt to build your own.

Try Kimi Build

Loading preview...

Start with this prompt

Generate a shader-driven cinematic product gallery

Coffee Brand Swap

Retheme the gallery around a specialty coffee line.

Try Kimi Build

Build a cinematic showroom website for a fictional EV brand, Nexus Automotive. The hero is a fullscreen procedural fragment shader — light flowing in real time — behind two lines of oversized serif type and a short tagline, followed by a brand manifesto section on scroll. The core is a model index: four vehicles (a flagship sedan, a touring SUV, a performance supercar and a compact city car) listed as huge typographic rows. Hovering a row reveals that car's image beside the list and dims the other entries; clicking opens a dedicated detail page with a positioning intro and three text chapters (form, cabin, performance), plus a way back to the list. Add a brand-experience video section and a contact footer with the experience-center address and opening hours. Keep the palette near-monochrome, pair a serif display face with a mono label font, and use smooth scrolling with gentle parallax and fade transitions. Deliver a static site that runs directly in the browser — scrolling, hover reveals and page navigation must all genuinely work. Swap the showcased content for a specialty coffee brand: five product lines become five single-origin beans, the shader hero shifts to warm-brown steam and coffee-bean particles, and each detail page adds origin, process, flavor notes, and brewing tips.

Add Inquiry Form

Add an inquiry form at the bottom of detail pages.

Try Kimi Build

Build a cinematic showroom website for a fictional EV brand, Nexus Automotive. The hero is a fullscreen procedural fragment shader — light flowing in real time — behind two lines of oversized serif type and a short tagline, followed by a brand manifesto section on scroll. The core is a model index: four vehicles (a flagship sedan, a touring SUV, a performance supercar and a compact city car) listed as huge typographic rows. Hovering a row reveals that car's image beside the list and dims the other entries; clicking opens a dedicated detail page with a positioning intro and three text chapters (form, cabin, performance), plus a way back to the list. Add a brand-experience video section and a contact footer with the experience-center address and opening hours. Keep the palette near-monochrome, pair a serif display face with a mono label font, and use smooth scrolling with gentle parallax and fade transitions. Deliver a static site that runs directly in the browser — scrolling, hover reveals and page navigation must all genuinely work. Add an inquiry form at the bottom of every detail page with name, email, and message fields plus a success state on submit. Add a persistent "Inquire" button to the navbar that smooth-scrolls to the form.

English Version

Switch all copy to English for overseas visitors.

Try Kimi Build

Build a cinematic showroom website for a fictional EV brand, Nexus Automotive. The hero is a fullscreen procedural fragment shader — light flowing in real time — behind two lines of oversized serif type and a short tagline, followed by a brand manifesto section on scroll. The core is a model index: four vehicles (a flagship sedan, a touring SUV, a performance supercar and a compact city car) listed as huge typographic rows. Hovering a row reveals that car's image beside the list and dims the other entries; clicking opens a dedicated detail page with a positioning intro and three text chapters (form, cabin, performance), plus a way back to the list. Add a brand-experience video section and a contact footer with the experience-center address and opening hours. Keep the palette near-monochrome, pair a serif display face with a mono label font, and use smooth scrolling with gentle parallax and fade transitions. Deliver a static site that runs directly in the browser — scrolling, hover reveals and page navigation must all genuinely work. Switch all site copy to English, including the oversized index, detail-page body text, and navigation. Re-tune font sizes and line heights for English while keeping the shader visuals and hover interactions unchanged.