5 Free Web Design Tools to Save for Future Projects (Motion, Fonts, and AI Agents)

Cover slide: five websites designers should save for future projects. Carousel by @noahelhadedy.

Every few weeks a new web tool appears that quietly removes an entire afternoon of manual work from a design project. The problem is finding them before the project starts, not during it. This carousel by @noahelhadedy collects five websites worth bookmarking today: tools for motion showcase, motion tokens, handwriting animation, agent-ready design systems, and custom fonts. Here is what each one actually does and when to reach for it.

1. Animos: showcase your designs in motion

animos.app turns static designs into motion showcase pieces. Pick a template, drop in your images or videos, tweak the settings, and export an MP4 straight from your browser. No installs, no After Effects timeline, no render queue.

Use it when a portfolio piece looks flat as a still frame but deserves a reel-ready clip, or when a client presentation needs the hero section to actually move. It lives in the browser, so it works the same on a locked-down work laptop as on a studio machine.

2. Springs: motion tokens that survive the handoff

Springs Studio generates easings and semantic motion tokens, previewed on real UI, and structured so you can start a project and hand the values to an engineering agent. It shows named easing curves (subtle and friends) with concrete durations for enter, exit, list stagger, and dropdown or tooltip motion, for example 260ms enter with a 140ms exit on standard elements.

This solves a genuinely common gap: teams tokenize color and spacing, then leave motion as per-screen magic numbers. With Springs, motion duration and easing become named decisions a developer or an AI coding agent can consume like any other design token.

3. Tegaki: handwriting animation for any font

Tegaki (Japanese for "handwriting") animates any font stroke by stroke, over real selectable text. It extracts each glyph's strokes, their order, and their width, then draws them on a canvas. It ships with presets across scripts including English, Japanese, Korean, Arabic, and Hebrew, and installs as a simple npm package: npm i tegaki.

Reach for it when a landing page headline needs a human, hand-drawn feel without the pain of masking video footage of someone writing on paper.

4. Balsa: design systems built for agents

Balsa establishes a contract between your design system and a UI library, built for an agent-assisted workflow. Its registry delivers the source code your AI agent can read, extend, and evolve, and it hooks into a project with npx balsa-ui@latest init.

The pitch is the direction tooling is heading in 2026: your design system is no longer just a Figma library humans copy from, it is machine-readable source that coding agents consume directly. If you maintain a system, an agent-friendly registry is worth evaluating.

5. Meshfont: create your own fonts in the browser

meshfont.com lets you create your own fonts right in the browser, including warp and distortion controls, then export them. Instead of licensing a fifth near-identical geometric sans, you can bend one into something genuinely yours.

Use it for brand projects that need a distinctive display face, or for wordmark experiments that would otherwise require a type design tool and a type designer's retainer.

A quick note on adopting new tools

The failure mode with lists like this is bookmarking all five and using none of them. A more reliable pattern is to pick the one that matches your next real deadline: exporting a reel for a portfolio refresh means Animos gets 20 minutes today, while the other four stay parked. Browser tools have essentially zero switching cost, so trial and error is cheaper than deliberation.

It is also worth timing the evaluation to the start of a project, not the middle. Motion tokens from Springs or a font from Meshfont slot into a design system cleanly on day one. Retrofitting them into a project that is 80 percent done usually lands in the backlog forever, which is how good tools end up as unused bookmarks.

When to use which

A quick decision frame for the five:

1. Portfolio or pitch needs motion polish: Animos.
2. Product needs consistent, documented animation: Springs.
3. Headline needs a hand-drawn feel: Tegaki.
4. Design system needs to feed AI coding agents: Balsa.
5. Brand needs a one-of-a-kind typeface: Meshfont.

All five are browser-first, which is the quiet theme of the list: the tool gap between "I saw it on Twitter" and "I already exported the file" keeps shrinking.

Want to build something with these instead of just designing it? Turn these assets into a working app in an afternoon with Base44.

---

Carousel by @noahelhadedy (originally posted on Instagram, via @dailywebdesign). Images used with the original post attached.

Related on NewForm

• 15 Font Pairings for Designers That Actually Work (Rendered With the Real Fonts, 2026)
• 3 Display Fonts to Try in Your Next Web Mockup: Moralana, Medino and Aurora
• My Everyday Figma Tools That Actually Save Time