
Show HN: ztext.js – JavaScript library that makes any font 3D - bennettfeely
https://bennettfeely.com/ztext/
======
tomcam
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
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/](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.

~~~
tomcam
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.

------
Budabellly
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](https://codepen.io/airnan/details/JbOrbV)

~~~
dgellow
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?!).

~~~
Budabellly
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](https://animography.net/products/mobilo)
[2] [https://aescripts.com/bodymovin/](https://aescripts.com/bodymovin/)

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

------
godot
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...](https://www.amazon.com/3D-Font-Creator-by-
Expert/dp/B000E48J28)

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

------
emaro
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
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
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
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
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
Love it. Going to try it out in a subtle place on our site soon. Will send a
link if it hits production :)

~~~
bennettfeely
Awesome! Would love to see it.

------
breakfastduck
Very simple, looks great.

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

------
abraae
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
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
Reminds me of YTMND. The good old days...

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

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

------
Waterluvian
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.

~~~
jedimastert
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

~~~
1f60c
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>
    

.)

------
pgt
Long live Word Art!

------
pkphilip
Very cool project!

------
shannifin
Very nice!

------
Joyfield
kb != kB.

