Inspiration
The inspiration is to make text more dynamic and visually engaging in digital design. We noticed that while there are many tools for image editing, there are few that allow users to creatively warp and transform text in real time. Our goal was to bridge this gap and empower designers, artists, and anyone interested in typography to experiment with text effects easily.
What it does
TextWarp is an interactive tool that allows users to apply a variety of transformations and artistic effects to text.
How we built it
We built TextWarp using a modern frontend stack:
- React for component-based UI development
- opentype.js for font parsing and SVG path manipulation
- warp.js for advanced mesh and smudge warping
Challenges we ran into
- Baseline alignment: Achieving consistent baseline alignment for different fonts and warp effects was challenging, especially when mixing multiple lines or custom fonts.
- Complex math for effects: Some transformations required advanced mathematical calculations, to achieve smooth and visually pleasing results.
- Integration of third-party libraries: Adapting and integrating open-source libraries like warp.js for interactive mesh and smudge effects required careful study and debugging.
What we learned
Working as a team, we learned how to coordinate across design, development, and testing, leveraging each member’s strengths to deliver a cohesive product. By engaging with early users and stakeholders, we also gained valuable insights into real-world needs and pain points. Beyond just building features, we focused on creating a scalable, modular architecture that supports rapid iteration and future growth.
What's next for TextEffect
We already have a working product — so our focus now is to get it into users’ hands.
Here’s our 4‑week plan to ship and scale it: Week 1 – Polish the UI Refine font previews, slider interactions, and overall transitions. Week 2 – Testing & Compatibility Run cross-device, cross-browser testing, and fix layout issues on different screen sizes, especially mobile and tablet. Week 3 – Early Feedback & Store Prep Before launching, we’ll send a private test version to early users to gather feedback on usability, bugs, and missing features. Week 4 – Iterate, Launch, and Monitor We’ll apply the feedback, polish the experience, and go live publicly. After launch, we’ll track usage and keep iterating.
Built With
- add-on-sdk
- html
- javascript
- opentype.js
- react
- warp.js


Log in or sign up for Devpost to join the conversation.