Project · 2026Live

WebsiteA tile and sanitaryware showroom

Every slab shown like it's already on your wall, and every path ends at the showroom.

Explore the site ↗
Role
Design + build
The showroom's homepage on a desktop: a room with its lights on, and the slabs to pick from.
The same homepage on a phone.

The workThe design, the look, the site.

02The build ↓

Warm dark, never black.

The site is the showroom at night: a warm wall, cream words, brass frames and one pool of light.

  • Wall#14110DWarm, with a brown undertone. Never black.
  • Cream#F5F0E4Every word. Never pure white.
  • Brass#C7A158Frames, plinths and rules.
  • Sepia#C99863The spotlight's warm pool.
  • Amber#F4BD2DThe mark's pillar. Used sparingly.

TANNOUS

MarcellusEvery Latin word, like the footer's inscription

כל חלל מתחילבאריח אחד

IBM Plex Sans HebrewEvery Hebrew word, like the homepage's headlineEvery space starts with one tile.

143 product pages. No prices.

Nothing on the site can be bought. It has one job: get you to the showroom.

Every path ends with a personWhatsAppA call or a messageA visit to the showroom

The door

The showroom's mark draws itself when you arrive. Once per visit, and it can never hang.

A first visit to the site: its gold mark draws itself on a dark wall, then the wall lifts onto the homepage.
  1. The mark draws itself
  2. The wall lifts
First visitOpen it live ↗

Lights on

Every slab opens the same way: where it comes from, a dark room, then the lights come on.

The homepage banner from its first frame: where a slab comes from, then a dark room, then its lights coming on; a second slab is picked and its own room does the same.
  1. Where the slab comes from
  2. A dark room
  3. Lights on
  4. Another slab, its own room
HomeOpen it live ↗

Five looks

Slabs open as five looks, not a grid. Pick one and the collection filters to it.

The slabs page from its arrival: five looks to pick from; one is picked and the collection underneath is filtered to it.
  1. Five looks
  2. One is picked
  3. The collection, filtered to it

Marmo · Pietra · Terrazzo · Cemento · Legno

SlabsOpen it live ↗

On the wall

Pick a tile and the same bathroom wall is re-tiled with it. You've seen it on a wall before you leave the sofa.

The wall tiles banner with its tile picker: three tiles are picked, and the wall of the same bathroom is re-tiled each time.
  1. The bathroom wall with the tile it opens with.
  2. The same wall, re-tiled with the first tile picked.
  3. The same wall, re-tiled with the second tile picked.
  4. The same wall, re-tiled with the third tile picked.

One wall, four tiles

Wall tilesOpen it live ↗

Ask

No prices, so the next step is a person. The WhatsApp button already knows which slab you mean.

One slab's own page from its arrival: the slab whole, its name and size, and two buttons, WhatsApp and arrange a visit.
The showroom's WhatsApp
Nothing yet
A slab's pageOpen it live ↗

Go

The map says if the showroom is open right now, and one tap opens Waze.

The visit page from its arrival: the streets around the showroom draw themselves in, the main roads last and in brass, then a pin pulses on the showroom, above a card that says whether it is open.
  1. The streets draw themselves
  2. The main roads, in brass
  3. The pin lands on the showroom

Drawn in the site's own ink, not an embedded map

Look closer
Visit usOpen it live ↗

The buildThe code, the stack, the checks.

01The work ↑

How it's made.

What the site runs on, what it's written in, and the rules it keeps.

Shipped
ceramica.co.ilLive
  • TypeScript67.6%
  • CSS32.4%
package.json
  • Next.js16.2.6
  • React19.2.4
  • TypeScript5.9.3
  • Tailwind4.3.0
  • GSAP3.15.0
  • Lenis1.3.23
Product pages

143product pages, a square each. Tap one to see which.

Each square is one of its pages.

The site's gateiPhone's engine

461 passed0 failed

The wall tiles page

Before9,294 KB

After2,065 KB

The opening
2.8 s

The longest the opening mark can take, however slow the page.

README.md

The rules it was built on

  • No invented facts A product's facts come from the showroom. Where one is missing, it stays blank.
  • The message knows the page On a slab's page it names the slab. On the slabs page, the slabs. On the visit page it asks for a visit.
  • Its own design on phones Not the desktop, shrunk. The five looks are bands on a phone and standing slabs on a desktop.
  • Every slab, whole On its own page a slab is shown whole, in its own frame.
src/app
Samir Tannous
Designed and built by
Shadi Daoud
Made for
A tile and sanitaryware showroom · 2026