Awesome Static Tools

This project is a curated set of tiny, copy‑paste enhancements for static sites and 11ty. It exists to help you add useful interactions (search, tooltips, scroll effects, galleries, etc.) without heavy frameworks, build steps, or bloat—staying true to the JAMstack values of performance, accessibility, and simplicity.

On this page you’ll see inline demos of each tool, organized as small, reusable partials. Every demo shows the minimal markup and initialization you need. You can:

Skim the examples and copy what you need.
Explore categories like media, search, interactivity, typography, and sharing.
Read deeper in the docs linked from the repository for options and accessibility notes.

Tip: Use these as starting points—compose a few to create rich pages while keeping bundle size low.

Prefer reading? See all examples and guidance in the README. Tufte CSS is shown on a separate page due to custom fonts.

Reading Utilities

Reading Time

The JAMstack encourages performance and simplicity. Estimating reading time helps set user expectations.

Estimated reading time:

Reading Progress

Scroll this container to see the bar grow. The JAMstack emphasizes pre-rendering and progressive enhancement.

Demos

Rough Notation

Annotate elements with a hand‑drawn look using a single function call. Useful to draw attention to key terms or metrics.

JAMstack keeps things fast.

Mark.js

Type to highlight matches within the text.

The JAMstack empowers fast, scalable sites. Try highlighting words like fast or sites.

ez-tip (CSS Tooltips)

Fuse.js (Fuzzy Search)

Client‑side fuzzy search over small lists or JSON. Type to filter the list below by relevance.

Static site generators
Eleventy
JAMstack performance
Accessibility
Progressive enhancement
CSS tooltips
Scroll animations
Image galleries

Alpine.js

Small interactions without a build step.

AOS (Animate On Scroll)

Animate elements as they enter the viewport. Works well for subtle UI polish; avoid overuse.

Fade up

Zoom in

Flip left

Fade right

Sal.js

A tiny scroll animation library that uses the Intersection Observer. Declarative via data-sal attributes.

Slide up

Zoom in

Fade

Scroll-Out

Adds or removes classes as elements enter the viewport so you can animate with pure CSS. No heavyweight observers to write.

Reveal on scroll

Also reveals

And this one

medium-zoom

Click any image to open a distraction‑free zoom. Great for screenshots or diagrams.

PhotoSwipe

Responsive gallery with pinch‑zoom and swipe on touch devices. Click a thumbnail to open the lightbox. Captions use aria-label.

Prism.js

const msg = 'Hello JAMstack';
console.log(msg);

Mermaid

graph TD;
    A[Jamstack]-->B[Eleventy];
    A-->C[CDN];
    B-->D[Templates];

Lettering

JAMstack

Eleventy Image

Build-time image optimization. Demo requires server-side processing and is showcased in docs. Use this at build time to generate responsive images.