4 ms·

This style of website will be rife soon - there’s more and more popping up. Even yesterday, I was looking at https://comancheindians.tilda.ws/en https://comanch

This style of website will be rife soon - there’s more and more popping up. Even yesterday, I was looking at https://comancheindians.tilda.ws/en https://comancheindians.tilda.ws/en These websites would have been super hard to resource the assets, but now with Gen AI it’s simple.

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 ago
  The 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 ago
    This 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 ago
  Author 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.
Karawebnetwork 2y ago
When I was at university, Flash was very popular. Websites like this were our main projects. It was easy to make them team projects, they asked us to split between programmer and designer. The designer had to create the assets. We had a photo lab and the designer was sent into town to take photos. We weren't allowed to use stock images, which would have speeded up the process. However, it was still relatively simple for young adults to create the elements. AI is cool, and yes, it will make everything faster. But I don't think the wall here was feasibility, it's more that the skeuomorphism trends ended and the market was saturated with highly dynamic interactive websites thanks to Flash making them easy to manage. So the trends stopped. It's nice to see it coming back, it was a lot of fun creating them.
- falloon 2y ago
  Why is this formatted like one of those wanky linkedin posts?
  - derefr 2y ago
    The wrapped monospace text in HN's comment textarea, on a narrow mobile display, tends to look imposingly long. If each sentence renders as four "lines" long in the textarea, then some people get the feeling that they should put a paragraph break after each sentence. Even when their text takes hardly any space at all once it's rendered in non-monospace (let alone on non-mobile.)
    - Karawebnetwork 2y ago
      Bingo! I use a vertical screen.
- treflop 2y ago
  A lot of people’s personal sites are still like this. The trend never really bucked for that. Although it’s more the websites for designers and artists rather than developers. There are also websites that showcase these types of websites, although I don’t know any anymore. I have to say, building these kind of websites is more fun now in HTML than Flash because you aren’t constrained to a fixed viewport. And HTML has surpassed in Flash in features and you have WebGL and WebAssembly and other fun things… well, except a nice IDE with a timeline.
deleted 2y ago
[deleted]
bhhaskin 2y ago
It's really not that hard to do. The big trade off here would be SEO and performance. So although they are good art projects or infographic type sites it's fairly useless for other things.
- creativenolo 2y ago
  Ok so hard is a subjective quantifier. I should have said time consuming. Look at the link I shared. With Gen AI the amount of time involved would be a fraction compared to doing it without. I’d bet 1% when including things like concept development and look development.

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 ago
The 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 ago
  This 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 ago
Author 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.

Karawebnetwork 2y ago

When I was at university, Flash was very popular. Websites like this were our main projects. It was easy to make them team projects, they asked us to split between programmer and designer. The designer had to create the assets. We had a photo lab and the designer was sent into town to take photos. We weren't allowed to use stock images, which would have speeded up the process. However, it was still relatively simple for young adults to create the elements. AI is cool, and yes, it will make everything faster. But I don't think the wall here was feasibility, it's more that the skeuomorphism trends ended and the market was saturated with highly dynamic interactive websites thanks to Flash making them easy to manage. So the trends stopped. It's nice to see it coming back, it was a lot of fun creating them.

falloon 2y ago
Why is this formatted like one of those wanky linkedin posts?
- derefr 2y ago
  The wrapped monospace text in HN's comment textarea, on a narrow mobile display, tends to look imposingly long. If each sentence renders as four "lines" long in the textarea, then some people get the feeling that they should put a paragraph break after each sentence. Even when their text takes hardly any space at all once it's rendered in non-monospace (let alone on non-mobile.)
  - Karawebnetwork 2y ago
    Bingo! I use a vertical screen.
treflop 2y ago
A lot of people’s personal sites are still like this. The trend never really bucked for that. Although it’s more the websites for designers and artists rather than developers. There are also websites that showcase these types of websites, although I don’t know any anymore. I have to say, building these kind of websites is more fun now in HTML than Flash because you aren’t constrained to a fixed viewport. And HTML has surpassed in Flash in features and you have WebGL and WebAssembly and other fun things… well, except a nice IDE with a timeline.

deleted 2y ago

[deleted]

bhhaskin 2y ago

It's really not that hard to do. The big trade off here would be SEO and performance. So although they are good art projects or infographic type sites it's fairly useless for other things.

creativenolo 2y ago
Ok so hard is a subjective quantifier. I should have said time consuming. Look at the link I shared. With Gen AI the amount of time involved would be a fraction compared to doing it without. I’d bet 1% when including things like concept development and look development.