top | item 24286335

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

257 points| bennettfeely | 5 years ago |bennettfeely.com

35 comments

order
[+] tomcam|5 years ago|reply
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?

[+] bennettfeely|5 years ago|reply
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.

[+] Budabellly|5 years ago|reply
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

[+] dgellow|5 years ago|reply
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?!).
[+] godot|5 years ago|reply
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...

[+] sriku|5 years ago|reply
I recall another tool called "Harvard Graphics" using which 3d-ish text could be printed using a dot-matrix printer.
[+] akx|5 years ago|reply
I think I have the CD somewhere still. Should probably send an image textfiles.org way...
[+] emaro|5 years ago|reply
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.
[+] mmastrac|5 years ago|reply
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?)
[+] djbeadle|5 years ago|reply
This is pretty fun! I appreciate that accessibility was addressed as well (although I'm unqualified to assess how well it works in practice).
[+] rajangdavis|5 years ago|reply
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...
[+] preya2k|5 years ago|reply
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 :(

[+] somishere|5 years ago|reply
Love it. Going to try it out in a subtle place on our site soon. Will send a link if it hits production :)
[+] breakfastduck|5 years ago|reply
Very simple, looks great.

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

[+] beachy|5 years ago|reply
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!
[+] slmjkdbtl|5 years ago|reply
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
[+] bitwize|5 years ago|reply
Reminds me of YTMND. The good old days...
[+] shadeslayer_|5 years ago|reply
This is a brilliant library, Bennett. Very fluent documentation too. Congratulations on the release!
[+] shanehoban|5 years ago|reply
One of the coolest little (well probably big) projects I've seen in ages! Great job!
[+] Waterluvian|5 years ago|reply
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.

[+] danbolt|5 years ago|reply
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...

[+] jedimastert|5 years ago|reply
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

[+] flingo|5 years ago|reply
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.

[+] t0astbread|5 years ago|reply
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.

[+] pgt|5 years ago|reply
Long live Word Art!