QuantoCard.
Where visual design meets engineering
Bringing design and engineering together through a custom business card builder, with flexible visual composition and image generation.
QuantoCard is an experiment in building a custom visual design environment for creating business cards directly in the browser.
The project explores interactive composition, positioning, zooming, preview rendering, and exporting finished designs as images.
It brings together frontend engineering and visual design, with an emphasis on building the editing experience from scratch.
Designing a design tool
Creating a business card is a relatively simple task. Building the tool that allows someone to design one is a much more interesting engineering challenge.
QuantoCard explores how interactive design software works beneath its interface, from managing visual elements to translating an editable composition into a finished image.
What the builder explores
- Interactive visual composition
- Element positioning and manipulation
- Canvas zooming and panning
- Design preview rendering
- Image export and local saving
- Responsive editing interfaces
- Progressive Web App capabilities
From editor to exported image
An interactive editor and a final exported image have different requirements. The editor needs to support manipulation and visual feedback, while the export must accurately represent the completed design.
QuantoCard explores how to keep those two representations consistent while maintaining a smooth editing experience.
Building the interaction model
Zooming, panning, and positioning are deceptively complex when several coordinate systems interact.
The project includes work on viewport transformations, preview positioning, and the relationship between the editor's visible state and the final rendered result.
“A design tool should make creativity feel simple, even when the engineering behind it is anything but.