Scrollable Mosaic of 3D Glass Tiles with Three.js
200 USDWe need a web page featuring multiple interactive "glass tiles" built with Three.js. Each tile should have a clickable link to a different page and customizable background color and text. The overall page should look like a mosaic of these glass tiles, each tile interactive with text inside. (Examples of the overall page design are provided in the attached images)
TILE DESIGN:
- Each tile should look like one visible side of a translucent 3D glass cube, inspired by this example: https://codesandbox.io/p/devbox/meshtransmissionmaterial-forked-tcy35y
- The tile is not a full cube — just a flat face that has realistic glass effects such as gentle wobble, subtle distortion, and light refraction.
- There should be no base or bottom; these are tiles, not jelly cubes.
INTERACTIVITY:
- Each tile is clickable and links to a customizable URL.
- Text is displayed inside the tile, clearly visible and easy to read against the glass effect. We should be able to customize font as well.
- The text content should be customizable per tile.
CUSTOMIZATION:
- Background color or tint for each tile can be set individually.
- All tiles are the same in size and arranged in a vertical scrollable mosaic layout.
- Tiles have minimal spacing
PERFORMANCE:
- Wobble and distortion animations should be smooth, subtle, and not distracting.
- The layout and tiles should work well on mobile and desktop screen sizes.
WHAT WE EXPECT:
A customizable React + Three.js component (<GlassTile />) and a working web page displaying the scrollable mosaic of tiles.
PLEASE WRITE 3D MASTER IN YOUR PROPOSAL IF YOU ARE A REAL PERSON
We need a web page featuring multiple interactive "glass tiles" built with Three.js. Each tile should have a clickable link to a different page and customizable background color and text. The overall page should look like a mosaic of these glass tiles, each tile interactive with text inside. (Examples of the overall page design are provided in the attached images)
TILE DESIGN:
- Each tile should look like one visible side of a translucent 3D glass cube, inspired by this example: https://codesandbox.io/p/devbox/meshtransmissionmaterial-forked-tcy35y
- The tile is not a full cube — just a flat face that has realistic glass effects such as gentle wobble, subtle distortion, and light refraction.
- There should be no base or bottom; these are tiles, not jelly cubes.
INTERACTIVITY & CUSTOMIZATION:
- Each tile is clickable and links to a customizable URL.
- Text is displayed inside the tile, clearly visible and easy to read against the glass effect. We should be able to customize font as well.
- The text content should be customizable per tile.
- We should be able to place an image inside the tile, and it should also appear under the glass effect.
- Background color or tint for each tile can be set individually.
- All tiles are the same in size and arranged in a vertical scrollable mosaic layout.
- Tiles have minimal spacing
PERFORMANCE:
- Wobble and distortion animations should be smooth, subtle, and not distracting.
- The layout and tiles should work well on mobile and desktop screen sizes.
WHAT WE EXPECT:
A customizable React + Three.js component (<GlassTile />) and a working web page displaying the scrollable mosaic of tiles.
PLEASE WRITE 3D MASTER IN YOUR PROPOSAL IF YOU ARE A REAL PERSON
We need a web page featuring multiple interactive "glass tiles" built with Three.js. Each tile should have a clickable link to a different page and customizable background color and text. The overall page should look like a mosaic of these glass tiles, each tile interactive with text inside. (Examples of the overall page design are provided in the attached images)
TILE DESIGN:
- Each tile should look like one visible side of a translucent 3D glass cube, inspired by this example: https://codesandbox.io/p/devbox/meshtransmissionmaterial-forked-tcy35y
- The tile is not a full cube — just a flat face that has realistic glass effects such as gentle wobble, subtle distortion, and light refraction.
- There should be no base or bottom; these are tiles, not jelly cubes.
INTERACTIVITY & CUSTOMIZATION:
- Each tile is clickable and links to a customizable URL.
- Text is displayed inside the tile, clearly visible and easy to read against the glass effect. We should be able to customize font as well.
- The text content should be customizable per tile.
- We should be able to place an image inside the tile, and it should also appear under the glass effect.
- Background color or tint for each tile can be set individually.
- All tiles are the same in size and arranged in a vertical scrollable mosaic layout.
- Tiles have minimal spacing
PERFORMANCE:
- Wobble and distortion animations should be smooth, subtle, and not distracting.
- The layout and tiles should work well on mobile and desktop screen sizes.
WHAT WE EXPECT:
A customizable Three.js component and a working web page displaying the scrollable mosaic of tiles.
Deadline: 1.5 weeks
PLEASE WRITE "3D" IN YOUR PROPOSAL IF YOU ARE A REAL PERSON
Applications 4
-
8 days650 USD8 days650 USD
Hello Nazar,
3D. I have carefully reviewed your detailed project for the interactive 3D glass tile mosaic. This is an exciting front-end challenge that combines my expertise in React with the creative possibilities of Three.js.
I am confident I can deliver the customizable component you require, ensuring it meets all your specifications:
Glass Effect: I will use MeshTransmissionMaterial and custom shaders, as inspired by your example, to create the realistic translucent glass effect with subtle wobbles and distortion.
Interactivity & Customization: Each tile will be a fully interactive component with a clickable link, and easily customizable props for its text, internal image, and background color.
Performance: The animations will be optimized for smooth performance, and the entire mosaic will be fully responsive for both mobile and desktop views.
… As a full-stack developer with a strong focus on high-quality front-end experiences, I can ensure the final product is not only visually impressive but also well-structured and performant. You can view my portfolio here: www.revazgoguadze.com.
I am ready to bring this engaging 3D concept to life.
-
10 days200 USD
146 10 days200 USDHello Nazar,
I read through your project details for the interactive glass tiles. This is a fascinating task because the real challenge isn't just implementing a 3D effect, but making it feel tactile, performant, and truly customizable.
I've worked with MeshTransmissionMaterial from your CodeSandbox example before. The key to getting that beautiful, realistic glass look is in the fine-tuning of its properties (thickness, ior, roughness) and the lighting setup. To ensure it runs smoothly, especially on mobile, my focus would be on keeping the geometry simple and optimizing the React component to prevent unnecessary re-renders.
To show you my approach, I can quickly create a new, private CodeSandbox for you with a single, working component. I can set a custom color or text you provide. This way, you can see the quality of my code and the visual result firsthand, with no commitment required from your side.
This method is similar to how I built the interactive 3D viewer in my portfolio, which you can see live here:
… https://cgma-9tyz.onrender.com
(there's an "Enter as a guest" button, so you can skip the registration process)
Let me know if you'd like me to set up that CodeSandbox for you.
Best regards,
Semetei
-
1 day200 USD
2656 40 0 1 day200 USDHello. I will do it. Write, I will be glad to cooperate
Hello. I will do it. Write, I will be glad to cooperate
-
1 day300 USD
86 1 day300 USDHello!
I am a front-end developer focused on React and Three.js, and I fully understand your task.
I have already worked with MeshTransmissionMaterial, glass effects, and I know how to implement such tiles with smooth animation, realistic refractions, and soft distortions. Your example on CodeSandbox is familiar, and I can recreate the same style, adapting it to your needs:
🔹 Clickable tiles with links
🔹 Customizable background, text, and font
🔹 Ability to insert an image inside
🔹 Responsive design and smooth-scroll mosaic
… 🔹 Optimization for mobile and desktop
🔹 Reusable component with props for customization
I will also ensure:
✔️ High-performance and clean code
✔️ Smooth animations without overload
✔️ Support and assistance with publishing
I can show a prototype within the first 2–3 days.
Ready to start immediately and discuss details.
Thank you for the interesting task — I look forward to working on this visually beautiful project!
Best regards,
Maria
-
5 days555 USD
198 5 days555 USDHello! 3D MASTER
I have experience working with Three.js and React — I will create a component for you with the desired interactivity, customizable parameters, and visual effects, as in the example. I will adapt it for mobile devices, make everything smooth and efficient.
Ready to discuss details and get started — write to me!
-
10 days500 USD
7575 13 0 10 days500 USD3D
Hello, I understand how to implement this and have extensive experience with React. To be honest, I've worked more with Pixi.js, but if Three.js is essential, I'm confident it won't be a problem. I'd be happy to discuss the details and work with you.
-
10 days450 USD
1551 15 0 10 days450 USD3D
Hello
I am interested in your project, but I am not confident in treejs
Can we communicate personally
I often create webm, gif, and simple 3D models for websites for integration and interactivity
-
15 days1500 USD
916 3 0 15 days1500 USDHi!
3D MASTER.
I have rich experience in MERN and Three.js.
I wanna discuss more in private.
Thanks.
-
які саме 3д-моделі потрібно зробити в рамках цього проекту? і кількість
-
а також технічні вимоги до моделей
-
Current freelance projects in the category Web Programming
I want to learn how to create websites for CS:GO/CS2I need a mentor who will teach me how to create a CS2/CS:GO server. I want to go through step by step via Discord/Zoom: hosting/VPS, server.cfg, maps, plugins, admin panel, ban system, Discord, website, and statistics. Language: Ukrainian or Russian. HTML & CSS, Web Programming ∙ 1 hour 11 minutes back ∙ 7 proposals |
Development of the web service "Interactive Veterinary Dental Map"Project essence: a web application where doctors can maintain interactive dental charts for patients (cats and dogs) The interface design and all jaw elements are already fully prepared in Figma (vector SVG with separation by individual teeth) Required functionality:… Databases & SQL, Web Programming ∙ 1 hour 41 minutes back ∙ 29 proposals |
Looking for a programmer or vibe coding Automation scraping data 2https://drive.google.com/file/d/14tP5XWJB9acV4gn_cJrFwMpihUj3EbQz/view?usp=sharing I accidentally sent that link Web Programming, Data Parsing ∙ 4 hours 9 minutes back ∙ 23 proposals |
Comprehensive audit and development of a website on WordPress/WooCommerceComprehensive Audit and Development of a WordPress/WooCommerce Site Website: https://www.vashstatus.com.ua/ We are engaged in the sale of entrance and interior doors. The main task of the website is to attract customers to the offline showroom, as well as to receive applications… Content Management Systems, Web Programming ∙ 5 hours 22 minutes back ∙ 33 proposals |
Industrial Sewing Equipment Store
490 USD
It is necessary to create a turnkey online store for the sale of industrial sewing equipment. A user-friendly store with convenient functionality. Content Management Systems, Web Programming ∙ 5 hours 52 minutes back ∙ 74 proposals |
Gainesville