01 Overview
From a flat carousel to a walkable 3D world.
- Role
- Creative direction, experience design, UX/UI and content. Development directed through prompts with Claude
- Tools
- Claude, three.js (WebGL), HTML, CSS and JavaScript, Netlify, Netlify Forms
- Collection
- Seven original digital illustrations by ISH L-V-L, made in Procreate, 2024–2025
- Redesign
- October 21–25, 2026
- Live at
- ishlvl.com ↗
Challenge. Version one presented the work in a CSS 3D carousel. It worked, but it didn’t feel interactive, immersive or three-dimensional, and it didn’t tell Rei’s story. The goal was to make the exhibition itself feel like Neo-Kyoto while keeping what already worked.
Outcome. A deployed WebGL exhibition with gated entry, a looping 3D gallery, an inspector with a magnifying lens and a dissolve view, a Collect showroom with the looping film on a 3D digital frame, email capture for access requests and sales sign-ups, and a new About section. It was refined through hands-on testing on iPhone 15, iPhone 17 Pro Max, iPad Pro (3rd generation) and Meta Quest 3.
02 The problem
Version one showed the art well but didn’t feel like a place.
Version one, built in Figma Make, had a landing film, a slide-to-enter gate, a seven-piece carousel with depth from CSS 3D transforms, an inspector with a magnifying lens, an About page and a gated Prints page. Its depth was an effect on flat cards, not a space you could move through, and on touch devices some of the 3D had to be simplified for stability.
My brief for version two:
- Make it interactive, immersive and truly 3D, in a futuristic direction that fits the story of Rei and Neo-Kyoto.
- Keep what already works: the type, the glass interface, bilingual labels, slide-to-enter, the magnifying lens and the ISH signature.
- Start from the live exhibition at ishlvl.com and the collection itself, not a generic gallery template.
This also answered an open question from the original concept brief: why should this be 3D instead of a conventional page? Because Rei is never one fixed image, a space where each piece is approached, entered and broken apart lets the visitor experience that idea, not just read it.
03 Creative direction
A walk through Neo-Kyoto at night.
The concept is a corridor of vermilion torii gates, drawn in light like the gate tunnels of Fushimi Inari, that never ends, because Rei is never finished.
| Story element | Design decision |
|---|
| Rei lives in Neo-Kyoto, where tradition meets futurism | Torii gates drawn as glowing vermilion lines; a night skyline with lit windows on the horizon; katakana from the titles falls down the sides |
| Graffiti was ISH’s first medium | Each canvas sprays into view as you approach, with a hot vermilion edge on the paint |
| Glitch aesthetics run through the collection | Hovering a canvas slices and offsets it; fast movement bends the canvases and splits their colour |
| Rei is never a fixed character | Dissolve breaks a portrait into thousands of points pushed into depth by brightness, which you can orbit |
| An infinite canvas | The corridor loops: after Rei Takamura, the walk returns to Nexus. A white gate marks the seam, and the rail ends in ∞ |
| Bilingual identity | Every title in English and Japanese, in the HUD and on caption plates beneath each canvas |
What I kept from version one: the Archivo, DM Mono, Manrope and Noto Sans JP type; the black-and-glass interface; slide-to-enter; the magnifying lens; the ISH signature; and the bilingual labels.
One deliberate risk: the warp entrance. Sliding to enter launches the camera through the gates with streaked, colour-split motion, so entering feels like crossing into another world rather than opening a page. Users with reduced motion turned on skip it.
04 Experience design
Entrance, gate, corridor, and three places to branch.
The visit runs entrance → gate → corridor, with three places to branch from the corridor: inspect a piece, visit Collect, or read About. The ISH signature returns you to the entrance from anywhere.
- Entrance. The title, a vertical Japanese title with a vermilion seal, and the corridor drifting behind it with the mouse or finger. Slide to enter.
- Private-viewing gate. “Exhibition not yet open.” Visitors enter the access password, or request one by email. A wrong password shakes the panel; the right one unlocks the lock icon and glitches the panel away into the warp. The gate asks every time someone enters.
- Corridor. Every way of moving reaches the same place, so visitors use what feels natural.
- Inspector. The camera flies square to the piece. The magnifying lens follows the cursor or finger, zoom runs from 100% to 400%, and drag pans. Dissolve turns the portrait into a field of points in depth that you can orbit.
| Input | What it does |
|---|
| Drag or swipe, sideways or up and down | Moves to the next or previous canvas, with momentum |
| Mouse wheel or trackpad | Glides between canvases, snapping to the nearest |
| Arrow keys, A and D | Steps one canvas |
| Rail of seven ticks, ← and → buttons | Jumps to a piece, or steps |
| Click or tap a canvas, or Step in | Opens the inspector |
Sound. Off until the visitor turns it on. The exhibition soundtrack plays when present; small tones mark steps, inspecting and entering.
05 Collect
A lit 3D showroom for the two editions.
Version one’s password-locked Prints page became Collect, a lit 3D showroom for the two editions going on sale: a digital frame with the film looping inside it, and a signed archival print.
Why it changed. I’ll be selling digital frames that loop the Infinite Canvas film, as well as prints. A flat product page couldn’t show a moving object, so each edition became a 3D model on a dark floor, under its own spotlight, with the corridor’s grid and particles.
- Digital frame. A clear acrylic block with four steel posts and a white screen, modelled on a photo of the real frame. The film plays on the screen; the photo itself is never shown.
- Archival print. A signed print on a black stand, made from a still of the film, with the ISH signature in pencil grey.
- Detail dots. Red pulsing dots on each piece open short notes: looping film, clear acrylic and steel posts on the frame; archival inks, signature and limited edition on the print.
- Tap to enlarge. Tapping a piece flies the camera square to it, so the whole object fills the screen with its detail dots still visible. Tap again or Close to fly back.
- Notify me. Edition sizes and pricing aren’t announced yet, so visitors can leave an email to hear when sales open. Each sign-up records which piece they were viewing.
Source film. The original was a 15-second, 11.6 MB HEVC (.mov) file, which Chrome and Firefox often can’t play. I had it converted to a 0.8 MB H.264 MP4, square at 720 pixels, with the sound removed, since the frame loops silently.
06 Development
Designed and directed through AI prompting.
I directed the build through conversation with Claude: I set the direction, judged each version on my own devices and asked for changes, and Claude wrote the code. “Designed and directed through AI prompting” is accurate; “developed” is not.
| Area | Detail |
|---|
| 3D engine | three.js (r128) on WebGL, replacing version one’s CSS 3D transforms |
| Custom shaders | Spray-paint reveal, hover glitch and ripple, colour split, the magnifying lens, the dissolve point cloud, the skyline, falling katakana, the floor grid, and a final pass for grain, scanlines and warp streaks |
| Page | One standalone HTML file with no build step; three.js bundled locally so the site depends on no outside server |
| Assets | Original artwork resized to 2,400 px wide, because some phones can’t load 5,400 px images; the film converted to H.264 |
| Gate | The password is stored as a SHA-256 hash, not as plain text, and checked in the browser |
| Forms | Password requests and sales sign-ups go to Netlify Forms, with a hidden honeypot field against spam |
| Deployment | Manual drag-and-drop deploy of one folder to Netlify, served at ishlvl.com |
| Preview | Each version was also published as a private Claude artifact for review before deploying |
How the direction worked. I described the experience and reacted to what I saw on real devices; each round of feedback became the next change. Most rounds were about mobile.
- I did not hand-write the code; I directed it.
- The gate runs in the browser, so it controls presentation, not security.
- Prices and edition sizes are not set, so Collect takes sign-ups and does not sell yet.
07 Testing and refinement
Hands-on and informal, on four devices.
Testing was hands-on and informal: I used the live site on four devices, reported what felt wrong, and each report became a fix. It was not a formal usability study.
| Device | Browser | Form factor |
|---|
| iPhone 15 | Safari | Phone, touch |
| iPhone 17 Pro Max | Safari | Large phone, touch |
| iPad Pro (3rd generation) | Safari | Tablet, touch |
| Meta Quest 3 | Meta Quest Browser | Headset, flat browser window, controllers or hand tracking |
On Meta Quest 3 the exhibition runs as a page in a floating browser window. It has no WebXR mode yet, so it is not a walk-in VR experience. Alongside my device testing, Claude rendered the build in a headless Chromium browser at desktop and iPhone sizes to check layout, tapping, the forms and the password gate. That is emulation, not a real device, and it can’t play the H.264 film.
Problems found and fixed. Most fixes were on phones, and all came from what I saw on the live site.
| Problem | Fix |
|---|
| The print didn’t enlarge the way the frame did | Framed the print’s close-up like the frame’s; taps on or just around the print now count |
| The close-up filled the whole screen and hid the frame’s edges and detail dots | Close-up now fits the whole object with its dots visible; notes near the right edge open to the left |
| Detail dots sat where people naturally tap, so a tap opened a note instead of enlarging | Moved the centre dots on the frame and print to their edges |
| The frame was too small on a phone to see the film move | Added tap-to-enlarge |
| Diagonal stripes flickered over the film on the frame’s screen | Merged the film and its white screen into one surface; full device sharpness and no grain in Collect |
| On phones the 3D frame sat behind the title and description | Fitted each piece between the top controls and the text; tightened the text on phones |
| The gate was skipped after the first unlock in a tab | The gate now asks for the password every time |
| Fixes didn’t appear on the live site | An older file had replaced the new one in the deploy folder; each deploy is now checked against the live site |
Not tested: formal usability sessions or task measurements; assistive-technology testing or an accessibility audit; performance measurement or frame-rate data; Android, Edge or Firefox; delivery of form submissions on the live site, which is not yet confirmed.
08 Content: the About section
The project’s whole history, in about 650 words.
I rewrote About to tell the project’s whole history, from the first illustrations to the tote, the sticker campaign, the exhibition and the editions. An edit pass cut it from about 1,150 words to about 650 without losing a fact. I wrote the draft, Claude reviewed it, and I approved each change before anything was built.
- Facts checked: pronouns (she), the tote’s debut at B&H Creators Presents: Content Chic on February 11, 2025, a private NYFW event sponsored by Canon; the sticker cities (New York, Toronto, Tokyo) and year (2025); and the name ISH L-V-L with Lashan Mitchell.
- Repetition cut: the idea that the work moves between forms appeared about six times, and “open to interpretation” three.
- Out-of-date copy fixed: the exhibition paragraph described version one; it now describes the corridor, the lens and Dissolve.
- Terms matched to the site: “signed archival prints in limited editions,” as in Collect.
On the page. A timeline strip runs 2024 → Feb 2025 NYFW → 2025 stickers → 2026 exhibition → Next, across on desktop and down on phones. The closing line, “The canvas was never intended to end at the edge of the image,” sits in large display type.
09 Outcome and next steps
A walkable exhibition that tells Rei’s story through space.
The redesign is live at ishlvl.com: a walkable 3D exhibition that tells Rei’s story through space, with gated entry, a showroom for the coming editions, and a full project history.
- A creative concept taken from a story to a working 3D experience, with each design choice tied to the narrative.
- An existing product rebuilt without losing what worked: type, glass interface, bilingual labels, slide-to-enter and the lens.
- Mobile refinement driven by real devices, with each problem and fix recorded.
- AI used as a build partner under clear creative direction, and described honestly.
Next steps I would take: a WebXR mode so the corridor can be walked inside the Meta Quest 3; stop the camera from passing through a canvas when swiping on narrow phones; confirm form submissions and set up email notifications in Netlify; add the exhibition soundtrack to the deploy; a small moderated usability test with set tasks on the four devices; an accessibility review, including keyboard-only use and reduced motion; then announce edition sizes and prices and open sales in Collect.
Visit the exhibition: ishlvl.com ↗