10 ms·
Vanta.js: Animated 3D backgrounds for websites
- MartijnBraam 5y agoOr maybe don't
- pixelpoet 5y agoPretty sure the clouds one is a straight rip from one of Inigo Quilez's shaders: https://www.shadertoy.com/view/XslGRr https://www.shadertoy.com/view/XslGRr (note the licence at the top...)
- vmception 5y agoThey should have just stuck with Apache or GPL license, as now any derivative work nullifies that adamant license and requires no attribution ngmi
- user-the-name 5y agoApache or GPL do not allow you to ban selling or minting NFTs.
- vmception 5y agoWell! I suppose we are at an impasse! Jokes aside, pretty much no client side javascript allows this restriction. Its a tale as old as view source. My mantra is “do things worth suing over”. Prideful restrictive in line comments don't pass that bar for me.
- OldTimeCoffee 5y agoIt is based off it for sure, the credits are on the Github repository[0]. The CDN version has no comments, but the source JS file really should have the source in a comment. [0]: https://github.com/tengbao/vanta https://github.com/tengbao/vanta
- deleted 5y ago[deleted]
- q3k 5y agohttps://github.com/tengbao/vanta/blob/master/src/vanta.clouds.js https://github.com/tengbao/vanta/blob/master/src/vanta.cloud... Definitely getting some 'can I copy your homework' vibes. But then again, if you use the original shader to educate yourself on how to render volumetric clouds... this is the kind of code you'll end up writing afterwards. And pretty much everyone writing any shadercompo-style code ever ends up borrowing some techniques from iq :).
- dorkwood 5y agoThe birds look like this three.js example, too. https://threejs.org/examples/?q=bird#webgl_gpgpu_birds https://threejs.org/examples/?q=bird#webgl_gpgpu_birds
- deleted 5y ago[deleted]
- zappo2938 5y agoAh, yes. A good way to turn my phone into a heating pad on this cold winter morning.
- cakirh 5y agoIt is nice!!
- schnebbau 5y agoOh no... I suspect we're going to see this everywhere now.
- crate_barre 5y agoI’ll take this over the faux PowerPoint slide presentations that caught on the last few years. Repeat after me: It’s a website, not a power point presentation It’s a website, not a power point presentation It’s a website, not a power point presentation
- RivieraKid 5y agoDo you have an example?
- crate_barre 5y agohttps://www.apple.com/iphone-13-pro/ https://www.apple.com/iphone-13-pro/ And that’s supposed to be good version of this, so imagine all the copy cat knock offs.
- ARandomerDude 5y agohttps://revealjs.com/ https://revealjs.com/
- edmcnulty101 5y agoWhat if a website IS a PowerPoint presentation?
- deleted 5y ago[deleted]
- learc83 5y agoWhen I was in 10th grade, in the late 90s, our history teacher gave us a an assignment to “make a website.” It turned out that by make a website she meant create a power point presentation that she could upload to the internet.
- javajosh 5y agoBeautiful, but astoundingly wasteful of both network and (especially) compute resources. If you are going to spin your users' CPU/GPU, at least do it for something in the foreground!
- hansworst 5y agoThis looks great, but it requires all of ThreeJS, even for the backgrounds that are really just some shaders. You don't really need a complete 3D library to just render 2 triangles that fill the entire screen and apply a shader to them.
- edmcnulty101 5y agoif you have a direct fiber internet connection to your house page size doesn't even matter.
- bufferoverflow 5y agoI hope you're not a web developer. That's a very bad attitude.
- edmcnulty101 5y agoSorry haha I was being very sarcastic. It didn't covey well in text.
- Sohcahtoa82 5y agoAnd what if I'm on mobile with a spotty connection where I average < 1 mbps?
- stjohnswarts 5y agoMy rule on mobile is if it takes more than 5 seconds to load it's time to hit the X and go somewhere else (unless it's my bank's page or something that's actually necessary)
- noduerme 5y agoThreeJS is a fucking great library, though.
- calibas 5y ago
- ahoka 5y agoWhy would you want to drain your customer's batteries?
- dylan604 5y agoMaybe it's a marketing scheme for a business that provides battery replacement services?
- janci 5y agoWow, very smooth. Once I wanted to do a similar thing to the "Net" visualization with plain 2D canvas (without WebGL) and it was so slooow. Side-note to waste of battery/compute: it was not for a general purpose web page, but for a tablet device that is always plugged in to act as a idle animation.
- tartoran 5y agoIs there browser any blocker for background 3D yet?
- thesuitonym 5y agoNoJS
- stjohnswarts 5y agoActually I've never been to a page and seen a 3d active background start up. Do you know of any?
- tyingq 5y agoThey may be something other than 3d active, but have that appearance: https://www.crowdstrike.com/ https://www.crowdstrike.com/ https://www.bain.com/ https://www.bain.com/ https://www.accenture.com/us-en https://www.accenture.com/us-en That's with a few minutes of just searching various consulting type firms.
- noduerme 5y agoThis is nice stuff - I just wish it wasn't "for website backgrounds"...?! Can these just be screensavers? Please?
- cjnicholls 5y agoLively[1] does this with desktop wallpapers if that helps and is FOSS. Additional shaders can be found on shadertoy[2] and others. It can be a good way of turning your computer into a heater ;) [1] https://rocksdanister.github.io/lively/ https://rocksdanister.github.io/lively/ [2] https://www.shadertoy.com/ https://www.shadertoy.com/
- paxys 5y agoIt can be whatever you want it to be
- dawnerd 5y agoCrashed latest iOS safari. Something like this probably should be disabled on mobile anyways to be nice to visitors’ battery
- afavour 5y agoPeople will say “works fine for me” but I’ve experienced this with iOS Safari (and particularly webviews) repeatedly. Crashes are incredibly hard to pin down and replicate (maybe there’s also another tab dominating CPU? Maybe you’re on a lower end device like an iPhone 6? Maybe you’re on an older iOS version?). Some of the most frustrating user feedback to get.
- Mikeb85 5y agoI mean, it should be a given that when it comes to 3D stuff on the web that iOS browser(s since they're all forced to use Safari underneath) will crash. Anyhow, works fine with Chrome on Linux and on Android. And probably every other combo that's not Apple.
- gprasanth 5y agoIt's crazy how little memory browser tabs and webviews get on iOS. With the devices themselves having memory crunch, with hardly ~1gb of usable ram available, there's so much pressure on efficiency everywhere ~ modelling, loading, rendering.
- noduerme 5y ago
- hu3 5y agoNeat. This can run as a Windows background using https://github.com/rocksdanister/lively https://github.com/rocksdanister/lively
- stjohnswarts 5y agocheck your CPU/GPU usage before and after to make sure you want to pay that price
- deleted 5y ago[deleted]
- marban 5y agoSafari on top-spec M1 > entire system lags
- noduerme 5y agoMy top spec M1 max has to be restarted (windowserver) anytime anything goes full screen for a few minutes. *Nicest keyboard on a laptop I ever owned though.
- gpas 5y ago60fps with chromium on a 2012 thinkpad. I've heard good things about the m1...safari not so much
- asah 5y agoSounds like a safari problem: Android chrome is just fine.
- johnx123-up 5y agoFWIW, similar to https://github.com/VincentGarreau/particles.js/ https://github.com/VincentGarreau/particles.js/
- smrtinsert 5y agoPure svg can do very similar, minus the blobby gradient type stuff
- tacoluv 5y agoThe attitude in this thread is the exact opposite of constructive. It is a great library that the person is giving you for free. Yes it can be improved, yes it you should not use it everywhere, but can you at least appreciate the execution and the fact that there is a real person behind it who can read the entitled diarrhea y'all "hur dur the internet should be just html and usenet" ppl are spewing? HN has become one of the worst places to have one's work demonstrated at.
- dang 5y agoThis looks like a case of the contrarian dynamic [1]. Dismissive comments tend to appear first, not because they represent the community, but because they're the fastest to write. Often there's a wave of such comments objecting to the OP, followed by a second wave objecting to the objections with some variation of "I can't believe how negative the comments here are". The irony is that they're driven by the same impulse—to make objections—they're just objecting to different things. The second wave of objections tends (ironically!) to get upvoted to the top of the thread. Whether that's because people's minds are open to the creativity in the OP or because they enjoy disses of other people (i.e. the rest of the community) even more than they enjoy disses of someone's work, we can leave as an exercise to the reader. This impulse governs the internet but it isn't the greatest thing on a site that values intellectual curiosity [2], because it's essentially reflexive: people see something that activates a previously existing grievance (be it battery-draining websites, bad internet comments, or what have you), which generates irritation and therefore energy to produce a post, but the post is actually litigating the generic grievance rather than responding to anything interestingly new. To get the latter, one has to perceive the new information and digest it in a way that leads to a new response—that is, one must be reflective rather than reflexive [3]—and that is a much slower process. But we definitely want reflective comments here. [1] https://hn.algolia.com/?dateRange=all&page=0&prefix=true&sort=byDate&type=comment&query=%22contrarian%20dynamic%22%20objection%20by:dang https://hn.algolia.com/?dateRange=all&page=0&prefix=true&sor... [2] https://news.ycombinator.com/newsguidelines.html https://news.ycombinator.com/newsguidelines.html [3] https://hn.algolia.com/?dateRange=all&page=0&prefix=true&sort=byDate&type=comment&query=reflective%20reflex%20by:dang https://hn.algolia.com/?dateRange=all&page=0&prefix=true&sor... --- Edit: I'd like to add a response specifically to this: > HN has become one of the worst places to have one's work demonstrated at ... by pointing out that https://news.ycombinator.com/item?id=29786132 https://news.ycombinator.com/item?id=29786132 is currently at #1 on the front page. It's very much a question of which examples you notice and how much weight you put on them.
- StevePerkins 5y agoWon't even load in Brave on Mac.
- wiradikusuma 5y agoI can foresee the clouds will be used in some religion-related websites, and the "futuristic-looking" animations in crypto websites.
- jiril 5y agoSimilar background generator found here https://www.finisher.co/lab/header/ https://www.finisher.co/lab/header/
- mccorrinall 5y agoThanks for the link. I needed something like this a few months ago (I eventually built it using SVG). Very cool tool!
- xigoi 5y agoMore useless bloat on the web. Fantastic. Because everyone has 256 GB of RAM and an internet connection measured in GB/s, right?
- picsao 5y ago
- pmlnr 5y ago"Animated website backgrounds in a few lines of code." https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.m... - 631.12kB https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.m... - 15.20 kB Few lines where? That said, I love it, reminds me of the long gone http://www.dhteumeuleu.com/ http://www.dhteumeuleu.com/ projects. I would never, ever actually deploy it though, it's grindingly slow.
- tyingq 5y agoThat three.min.js is 128kb over the wire compressed, which isn't too terrible. It's hard to judge from the linked page, since it's showing all the available effects. But I imagine if you're using just one that it adds up to something smaller than the typical huge "hero images" on a lot of pages.
- pmlnr 5y agoThe over the wire argument is the most flawed of all, ever. It's the code executed, thst matters, when it comes to wasting cpu.
- tyingq 5y agoThe performance difference around download times and time-to-being-usable are quite obvious if I turn off gzip/deflate in the client, so I'm not sure it's "most flawed". I did also mention an unofficial builder where you can bundle just the parts of three.js you need in another comment.
- ciberado 5y agoAwesome job! The cloud one is going to be my new animated background in most of my OBS scenes from tomorrow :D
- RedBeetDeadpool 5y agoOoh! finally I can make one of those 3D network backgrounds so visitors will think my next crypto coin is the future of web 3.0.
- alphabet9000 5y agoThe "Why?" section on this site says things like 'it runs fast, can be customized to match branding, has a small filesize' etc.. But I'd like to know "Why?" as in "Why even add this supposed eye-candy to a web page in the first place?" I assume the answer is that it makes the page seem luxurious and opulent, which translates into the viewer believing that the page was probably time-consuming (and possibly expensive) to build, which translates into a sense of legitimacy and trustworthiness. That explanation might have made more sense a decade ago before these types of effects were ubiquitous on the web. Now, it's easier than ever for anyone to drag and drop one of these preset visual effects onto their webpage. There's nothing to it anymore, people have seen them, the shine has worn off: There's no longer anything 'special' about these special effects. Worse (as another commenter posted about always seeing these effects on 'crypto coin' sites) these effects are often used on sites engaging in confidence tricks - relying on dazzling the viewer with visual effects to convince them that their fraudulent scheme is legitimate. I associate stuff like this [0] with 'scam' [0] https://img.freepik.com/free-photo/gradient-dark-blue-futuristic-digital-grid-background_53876-129728.jpg https://img.freepik.com/free-photo/gradient-dark-blue-futuri...
- tweetle_beetle 5y agoIf you looked closely you would see that it has been developed by a company selling a site builder tool. So, yes, it is probably offered as a drop in piece of content in that context. You won't believe what the hoi polloi are allowed to do with themes and builders these days.