Show HN: ztext.js – JavaScript library that makes any font 3D | Hacker News Reader

Show HN: ztext.js – JavaScript library that makes any font 3D

bennettfeely.com

257 pointsbennettfeely35 comments

Thank you. I don't need it but I donated because I think it's very well presented. Love the idea of a single, focused, tightly documented lib that does its one thing well and avoids scope creep.

I appreciated your putting the suggested tip amount right up front. Are you finding that to be as effective as you hoped? Have you tried other more/less in-you-face techniques?

Thanks Tom! I just released thing all yesterday so you're the first person to donate. I was originally going to do some sort of licensing like Flickity (https://flickity.metafizzy.co/) but it seemed like too much work and I'd be totally lost in all the legalese.

The other option would be to put a single ad on the site like I have with other side projects I've made but I thought I'd try a donate button instead. I hope it's not too in your face, it's really targeted toward anyone using ztext in a commercial site or maybe if they're using it in a website for a client. Personal use or just playing around with the library it's not requested to tip anything.

Congratulations on the release, and it is definitely not too in your face as I may have implied. I am a strong believer in paying for good stuff and I don’t care if people complain about your approach. They aren’t the creators.

I really liked the way you have put up the donation button right up front. Nice and it immediately offers people the option of donating.

Super cool. I really appreciate gadgets like this to add a little flare to existing elements on the page.

This would be really awesome to combine with animography somehow: https://codepen.io/airnan/details/JbOrbV

Wow, WHAT IS THIS! Those animations are just so impressive, it's incredible what people do nowadays with SVG animations (that's SVG animation, right?!).

It's basically an after effects vector animation for each letter of the alphabet[1], which is rendered as SVG (JSON really) with bodymovin[2], and played back (maybe with lottie?) with key bindings.

[1] https://animography.net/products/mobilo [2] https://aescripts.com/bodymovin/

That is incredible

Cool! A while ago I was experimenting with something like this but using CSS text-shadow instead: https://codepen.io/enhdless/pen/NYMpEw

In the 90s I bought a copy of a small software called 3D Font Creator (Fun fact - I was able to find it on Amazon [1] now...) , that did something like this. I used it to create cool little logos for my personal homepage and such. Just a bit amusing how far we've come in web technologies that this is all JS and CSS now.

1: https://www.amazon.com/3D-Font-Creator-by-Expert/dp/B000E48J...

I recall another tool called "Harvard Graphics" using which 3d-ish text could be printed using a dot-matrix printer.

I think I have the CD somewhere still. Should probably send an image textfiles.org way...

Nice! 3D is not exactly my taste, but I like this. It's all text, you can still select it. That was a good surprise for me, since it's not very common when you see any advanced visual effect on text in the web.

That's a clever and beautiful "hack" (in the positive sense of the word). I could see this being useful for adding to the CSS spec (text shaders, perhaps?)

This is pretty fun! I appreciate that accessibility was addressed as well (although I'm unqualified to assess how well it works in practice).

This is very cool! Would be a lot of fun to combine this with an animation library and do lyric videos for songs but with pure js...

Looks very nice! You mind me asking why you’re not creating a separate GitHub-Repository for this (or your other projects)?

I use GitHub stars as a kind of bookmark for interesting libraries that I’d love to try out at some time in the future, so I’d love to give yours a star, but it’s not a standalone repo :(

Love it. Going to try it out in a subtle place on our site soon. Will send a link if it hits production :)

Awesome! Would love to see it.

Very simple, looks great.

The kind of thing that instantly feels like it should be part of standard CSS.

Having spent some time wrangling colors recently, I'd love to know how you came up with the palette used for the letters in the top title. Any clues welcomed!

Very nice presentation, saw the title thought it's a WebGL lib with text vectorization and extrusion though.. Glad it's achievable by this method

Reminds me of YTMND. The good old days...

This is a brilliant library, Bennett. Very fluent documentation too. Congratulations on the release!

One of the coolest little (well probably big) projects I've seen in ages! Great job!

How popular is “download this minified file and use it!” Vs. Package management?

I feel like that’s an instant turn off. I don’t want to manually manage all my stuff.

Or is there some middle ground where people just put a URL to the download in their package manager solution, whatever it is.

For me, the middle ground is minified/gzipped CDN hosted. Just a simple `<script src="..."></script>` for me.

Presumably you could do that here too, but I don't know how this host feels about hot-linking

You can use jsDelivr:

  <script src="https://cdn.jsdelivr.net/gh/bennettfeely/bennett@master/ztext/js/ztext.min.js"></script>

(You should probably link to a specific commit, though, like:

  <script src="https://cdn.jsdelivr.net/gh/bennettfeely/bennett@24f27b0f902821147ef726735b2717f27335c282/ztext/js/ztext.min.js"></script>

I don't write JavaScript professionally (outside of embedding into C++ applications), but I do make small single-page browser games on my spare time.

I only really use npm packages for Electron; I usually have the libraries locally stored and don't do any soft preprocessing/packaging. Being able to "drop in" the source much like a C/C++ library ends up being comfortable for me for these smaller things. [1]

[1] https://github.com/danbolt/switch-compo/blob/820ce5fb4944e57...

I do this nowadays when the app I'm building isn't too complex yet. I download the latest Preact bundle from unpkg, commit it into git (I know it feels wrong but really, it's fine) maybe add htm and write my stuff as static unprocessed files.

Of course, it's good to have the freedom to go both with and without a package manager and build tools, since this doesn't scale at all.

Does npm or whatever package manager is in vogue not have a hack to make a "package" out of a URL pointing to some javascript? (even if someone has to write some automation to package every version from github, as it comes out.)

Although, this point is moot as soon as someone packages it for whatever package manager you use. No matter how hackily they do it. e.g. if there were a npm package called "auto-import-arbitrary-or-versioned-file-from-git-repo-or-http-url" that consolidated _all_ of your random single-file imports, that'd count IMO.

Long live Word Art!

Very cool project!

Very nice!

kb != kB.

Reply on news.ycombinator.com