I'm a beginner and I'm really interested in creating a website similar to this one: https://beanlette.net/. I find it fascinating how such websites are made, and I'm looking for guidance on what programs or techniques I should use to get started. Any tips on how to begin would be greatly appreciated!
5 Answers
For the technical side, it looks like they used TypeScript, CSS, and GLSL, with Vite to build it all. If you want those interactive visuals, learning about WebGL and GLSL would be super helpful. Libraries like Three.js and PixiJS can really simplify the process!
I’ve worked on similar projects using a 3D JavaScript library called Three.js. If you’re unsure about the tools they used, you can check out Builtwith.com. It may not always show everything, but it’s a good starting point to understand the tech behind it.
It’s definitely possible! What you’re seeing is a digital artist’s portfolio, and it looks like they may have built everything from scratch. If you want to create something like this, I suggest you take it apart piece by piece and search for tutorials on how to achieve specific features using CSS and JavaScript.
That site is impressive! It seems like they used a depth map along with a standard photo to create a depth effect as the mouse moves. You might want to look into how depth maps work for a similar effect.
Viewing it on my phone, I noticed it seems like there's an overlay effect with interactive clickable items. The underlying image moves at a slower rate to give a staggered illusion, which is quite cool! You could achieve this with JavaScript, perhaps using GSAP for animations. It definitely has a unique pixelated effect, too.
Related Questions
Cloudflare Origin SSL Certificate Setup Guide
How To Effectively Monetize A Site With Ads