Scrollable Mosaic of 3D Glass Tiles with Three.js
Budget: $30 – $250 USD
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:
- 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
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