💡 TextWarp: Creative Text Effects for Adobe Express

Inspiration

We wanted to make text feel as alive and expressive as imagery in digital design. While designers have endless options for editing photos, there are very few tools that let you warp, bend, and sculpt letterforms in real time.

TextWarp bridges that gap. Our goal was to empower designers, artists, and typography nerds with a playground where they can experiment with expressive text effects without complex tooling or offline workflows.

What It Does

TextWarp is an interactive tool that lets users twist, bend, and stylize text through a catalog of presets plus hands-on mesh and smudge controls. Every change renders instantly so you can iterate quickly and save your favorite typographic explorations.

It ships as an Adobe Express add-on, so warped text can be pushed straight onto the canvas—perfect for quick pitch decks, social posts, or illustrative typography moments.

How We Built It

We kept the stack lightweight but powerful so that every interaction feels responsive:

• React for component-driven UI and state orchestration.
• opentype.js to parse fonts and extract glyph outlines.
• warp.js to power mesh, smudge, and custom warp algorithms.

SVG paths are manipulated in the browser so designers see true, vector perfect previews before sending assets to the Adobe Express canvas.

Challenges We Ran Into

• Baseline alignment across multiple fonts and multiline blocks while warping shapes.
• Complex math to keep distortion smooth and visually pleasing across every preset.
• Adapting third-party libraries like warp.js into the Adobe Express add-on sandbox.

What We Learned

Coordinating across design, graphics engineering, and QA forced us to build a modular architecture that supports rapid iteration. Early user sessions shaped the controls, presets, and even defaults for warp intensity.

We also learned how to evaluate open-source math libraries quickly, customize them for Express, and ship them as a secure add-on—despite the project not winning the hackathon, Adobe Fund for Design believed in the concept and backed further development.