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

Show HN: ztext.js – JavaScript library that makes any font 3D(bennettfeely.com)

257 points by bennettfeely 5 years ago | 35 comments

tomcam 5 years ago |

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

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.

tomcam 5 years ago | | |

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.

pkphilip 5 years ago | | |

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.

Budabellly 5 years ago |

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

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 5 years ago | | |

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/

breakfastduck 5 years ago | |

That is incredible

enhdless 5 years ago |

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

godot 5 years ago |

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

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

akx 5 years ago | |

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

emaro 5 years ago |

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 |

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 |

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 |

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 |

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 |

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

bennettfeely 5 years ago | |

Awesome! Would love to see it.

breakfastduck 5 years ago |

Very simple, looks great.

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

beachy 5 years ago |

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 |

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 |

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

shadeslayer_ 5 years ago |

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

shanehoban 5 years ago |

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

Waterluvian 5 years ago |

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

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

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 5 years ago | | |

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 5 years ago |

Long live Word Art!

pkphilip 5 years ago |

Very cool project!

shannifin 5 years ago |

Very nice!

Joyfield 5 years ago |

kb != kB.