THE STORY: FIGMA TO CODE WITH AI
the objective was to build a highly tactical, distraction-free environment for writers and creators. the visual direction blends digital brutalism with analog warmth—combining a global analog grain overlay, custom serif typography, and ultra-subtle glass panels to create a tactile paper-like feel inside the browser.
to translate this design system into a production-ready web app, the figma design was built in partnership with an agentic ai coding assistant. the ai implemented the core ui primitives, optimized layout responsiveness for mobile devices (ensuring 44px minimum touch targets and 100dvh viewport support), resolved cross-origin font rendering bugs during image exports, and integrated custom webgl shader backdrops that adapt dynamically to note themes.
TECH STACK
KEY FEATURES
Distraction-Free Canvas
tiptap-powered rich text editor featuring inline slash commands (`/` triggers list) for headings, lists, highlights, and local base64 image uploads.
Bento Grid Organization
an interactive, responsive dashboard bento grid layout mapping notes and bundles.
Adaptive Theme Overlays
customize note backgrounds with uploaded images, solid colors, and generative webgl backdrops. set blend modes and saturation filters directly inside the canvas.
High-Fidelity Exports
export clean raw markdown, print-optimized pdfs, or high-fidelity jpg custom canvas images with inlined fonts.
Secure Authentication
fully integrated supabase client auth supporting secure email accounts, anonymous guest trials, and google oauth logins.