Product landing page · 2026
Folía
A 3D timple that comes apart as you scroll, and five strings you can actually play.
Demo hosted on this portfolio.
The project
Landing page for a fictional timple workshop in Gran Canaria. As you scroll, the 3D timple travels across the screen and comes apart: soundboard, staved back, neck and bridge, each with a pointer and its spec sheet. Then you can pluck the strings with the mouse or a finger and hear them tuned like a real timple, follow the nine-week build through self-drawing plans, compare the three models and send an order. Fictional brand, prices and testimonials.
What makes it stand out
A 3D model built entirely in code with React Three Fiber, with no files to download: wood grain, relief and gloss generated on canvas, a clearcoat finish, studio lighting from Lightformers and contact shadows. Each pointer follows a point on the part projected from 3D. The strings are synthesised with Karplus-Strong in Web Audio and vibrate with anime.js. It uses React Bits' BlurText, Threads and Magnet, Magic UI's Marquee and Number Ticker, and shadcn/ui's Tabs, Accordion, Dialog and Drawer.
Technology
- React
- Three.js
- React Three Fiber
- Web Audio
- anime.js
- Tailwind CSS
- React Bits
- Magic UI
- shadcn/ui
↓What it looks like as you scroll
