Reads the font actually in effect — ascent, x-height, descenders,
line-height — and lays out gray blobs the way that font would really
wrap. Not a gray box sized to 1em.
Good documentation explains the why behind a decision, not just what the code does — the what is already visible in well-named identifiers and the diff itself.
<!-- pin to a tag, not @main, once you've published one -->
<script src="https://cdn.jsdelivr.net/gh/Syneris/text-skeleton@main/text-skeleton.js"></script>
<text-skeleton lines="3" connect="word" animated="sweep"></text-skeleton>
<text-skeleton inline chars="12" connect="word" animated="sweep"></text-skeleton>
<text-skeleton text="Same word count, same wrap as this exact string." connect="word" animated="sweep"></text-skeleton>
text="…" drives word lengths, per-letter ascender/descender shape, and glyph widths from a real string, so it wraps to the exact same line count as the text it's standing in for.connect="word" / connect="line" read as continuous ink instead of separate dashes, with corner cases (capitalized first letters, descenders at a word's edge) handled, not approximated.pulse, sweep, typing, or none — sweep and pulse dip toward transparent rather than peak toward opaque, so they stay visible even at high intensity.currentColor by default — a skeleton inside a dark button or a colored link just works, no per-instance override.<text-censor>, for the opposite job: hiding real content that's already in the DOM (redacted screenshots, screen recordings), composing <text-skeleton> rather than duplicating it.Zurich, Switzerland · Full-time
We're looking for an experienced engineer to help us build the next generation of our platform.
No build step, no dependencies, ~12 KB gzipped
(text-skeleton.js) / ~4 KB (text-censor.js).
Either copy the files into your project, or load them straight from
GitHub via jsDelivr's GitHub-source CDN — no npm publish required:
https://cdn.jsdelivr.net/gh/Syneris/text-skeleton@TAG/text-skeleton.js https://cdn.jsdelivr.net/gh/Syneris/text-skeleton@TAG/text-censor.js
Replace @TAG with a release tag (e.g. @v0.1.0)
once one exists — pinning to a tag means the file never changes under
you; @main floats with the branch.