A block of stone that turns in the browser, eleven finishes on the surface and a drive through three quarries
- Industry
- Quarrying and processing of architectural stone
- Location
- Plano near Trogir, Croatia
- Type
- Custom website, 3D stone, HR and EN
- Duration
- 6 weeks to launch
The brief
Two kinds of stone from their own quarries, three quarries and a plant, an archive of three hundred project photographs from Frankfurt to Dugi otok. The site had to show the stone the way an architect sees it in the hand: colour, grain, the marks of the diamond wire and every finish, in Croatian and English, fast, and on a phone.
How we solved it
The Plano block on the homepage is real, scanned from photographs of a sawn block: three faces were rectified from the frames and assembled into one texture, colour taken from the wet face because dry limestone washes out the pattern, relief from the dry face because that is where the micro-shadow shows. The block turns in the browser with a mouse or a finger, so the wire arcs and fossil grains come through. Dolit has its own scan, with its own grain and seams. Each of the eleven finishes, from polished to bush-hammered, is rendered on an eighty-centimetre surface with two lights, one low for relief and one for gloss, the way a slab is photographed for a catalogue. A scroll-driven drive leads through each quarry, assembled from a hundred and more frames, with markers that lead to projects. The map of three quarries and the plant clusters points that are too close and zooms before you choose. The palette was measured from photographs of their stone and the sea, with no black anywhere, and the headings are set in a face modelled on Roman inscriptional capitals. The technical data comes from a laboratory report, with petrography, and every address of the old site redirects to the new one.
Numbers from the project
If you need something similar
- Timeline for a similar scope
- 5 to 8 weeks
Depends on the number of pages and languages and how many products need scanning and showing in 3D. How the price climbs by add-on is on the pricing page.
The price is set by your specific requirements. The real price is defined after a conversation and the technical documentation of the project, before you pay anything.
What the client had to prepare
- Photographs of a block of each stone, wet and dry, from the same frame
- Project and quarry photographs at original resolution
- The laboratory report on the stone
- An hour a week to review what was finished
Technology
- Next.js
- React
- TypeScript
- Tailwind CSS
- Three.js
- GSAP
- Hetzner
What is built in
- The block scan: three rectified faces in one atlas, colour from the wet face and relief from the dry one, two atlases of the same geometry.
- On a phone the block gets half the texture and fewer triangles, so it draws at 60 frames a second without draining the battery.
- Finishes: 80 cm of stone per finish, two lights, AVIF and WebP, one loaded per click.
- Quarry drives show the sharp frame first and fetch the rest as you scroll.
- Images prepared at build time in five widths, three text sizes across the whole site, analytics only after consent.
- Hreflang, sitemap and structured data for both languages, old addresses redirected with no links lost.
What we would tell you before you start
- Stone is not sold with a flat patch of colour. Show the grain and the cut, from a real photograph, not a generated texture.
- A phone does not get the same scene as a laptop. Half the texture and fewer triangles the eye cannot see; the battery and the data plan can.
- Verify every figure about the product at the source before publishing, and only then design around it.
Other projects
Tell us what you need. Within 24 hours you get a rough price and timeline.
A few sentences are enough: what you sell, which ERP you use and what costs you the most time today. If it is urgent, call.
Weekdays, 9 to 17. We reply within 24 hours.