Visualyrc Sketch

• 

  film canvas

• 

  film hook

• 

  film graph

• 

  course week04

• 

  course exam

• 

  course graph

Inspiration

• While making videos in my own editor, Visualyrc Studio (hopefully coming soon!), I wanted a place to organize plans and references, and I saw a need for it.
• I used the hackathon to practice building a small app and finishing it.
• I asked an AI for naming ideas, got the name “Visualyrc Sketch”, and worked out the features from there.

What it does

Visualyrc Sketch runs in the browser. It has no login and no server.

• Saezutter is a feed for quick capture. Post a thought or an image, then place it on any page.
• Pages each have their own canvas. A note placed on two pages is one note. Edit it on either page and both update, while each placement keeps its own position and size.
• Graph shows every note and image in the project. Drag from a dot on one card to a dot on another to link them. Cards grow with their text and can be resized. Open in page jumps back to where an idea sits.
• Audio sections turn a song into a timeline. Load a WAV or MP3 and each page becomes a section of it. Play a section, drag its edges to trim it, or drag pages to reorder them.
• Notes accept Markdown and Mermaid diagrams.
• Projects save to the browser’s IndexedDB. Export a .vsketch file to back up a project or move it to another browser, with its media.

It also works for study. Make one page per lecture and link related ideas in Graph. Before an exam, Graph shows which ideas from Week 1 come back in Week 4.

How we built it

I followed the Devpost Learn Skill Pack from scope to the build checklist. The approved scope.md, prd.mdand spec.md are in devpost/. The app uses React, TypeScript and Vite, with React Flow for the canvas and Graph, Dexie for IndexedDB, fflate for the .vsketch archive, and Zod to validate every project before it is saved or imported.

Codex and Claude Code wrote the code under my direction. I reviewed real screens and decided the design.

I made the demo video in Visualyrc Studio, a separate motion graphics app of mine. It is not part of this project’s code. The repository contains no audio or video.

Challenges we ran into

• Keeping one source of truth for a note that appears on several pages, while deleting a placement never deletes the note.
• Importing untrusted .vsketch files safely. The importer checks the schema, references, ZIP directory, CRC and real inflated sizes before it writes anything.
• Fitting song sections of very different lengths into a narrow rail. A three-second section now drops its page number and time range so the title stays readable.
• Hands-on review found bugs the tests had missed: blank lines in Markdown cards, Graph cards that cut off long notes, and a duplicate link that failed with an error.

Accomplishments that we're proud of

• I learned about this hackathon only a week before the deadline and decided to enter on impulse. From the first commit on October 19 to the public release, I finished the ideation, design spec, implementation, testing, demo video, and public repository in seven days.
• It was a sprint driven by dopamine rather than domain-driven design, but I kept the scope tight enough to ship a clean, working product.
• I produced the entire showcase video using Visualyrc Studio, my own in-development tool.

What we learned

Writing the scope, PRD and spec first made the build faster. Most of the bugs I found came from looking at real screens, not from the 37 unit tests.

What's next for Visualyrc Sketch

• Seamless export and handoff into Visualyrc Studio once it launches.
• Performance optimizations and layout helpers for large graphs with dozens of linked notes.
• Support for more audio formats and richer timeline trimming controls.

Built With

• claude-code
• codex
• devpostlearnskillpack
• dexie.js
• eslint
• fflate
• indexeddb
• lucide
• mermaid
• ponytail
• pstack
• react
• react-flow
• react-markdown
• typescript
• vite
• vitest
• zod