4 ms·
I can’t imagine the way you build this website is the same way you build your static sites or a landing page. Is it WebGL? Looks extremely complex to be honest.
by pixelatedindex 2y ago
I can’t imagine the way you build this website is the same way you build your static sites or a landing page. Is it WebGL? Looks extremely complex to be honest.
- Onavo 2y agoThe trick is to use a game engine or something similar (not vanilla CSS/HTML). Flutter web would work well here, once Safari's WebAssembly GC support gets merged, you will have a lot of options.
- treflop 2y agoThis website can be written with vanilla JS, HTML and CSS on any framework or in a raw HTML file. If this was still 2004, you could have gone to DyanmicDrive.com and stolen some sample code. https://web.archive.org/web/20040117050039/http://dynamicdrive.com/ https://web.archive.org/web/20040117050039/http://dynamicdri...
- mafik 2y agoAuthor here :) There is no trick here actually. It's just HTML / JS / CSS. Browsers are pretty good at compositing CSS transforms - and know how to handle DOM updates coming from event handlers & requestAnimationFrame. There is one CSS hint that speeds it up a little "will-change: transform". Another important ingredient is to update the object position in the (pointermove) event handler - so that the responsiveness is low - physics engines also could do this, but it's usually an overkill. You can take a look at the script in the website's sources - it's inline.