Since the pandemic, the number of virtual events has doubled and nowadays around 35% of events are virtual and 5% hybrid (Source). At the same time, event websites often lack creativity, and web forms have barely evolved in over a decade, missing a human touch.

It’s time for a change. After 500+ iterations and dozens of rollbacks in the Framer workshop, I'm excited to share Evermark - an interactive component that lets visitors share handwritten notes, doodle pictures, and snap photo booth–style images, leaving behind a personal mark instead of a cold submission.

Whether you're hosting a virtual webinar, conference, mastermind, gallery opening, birthday party, reunion or wedding, Evermark could be for you. Adding personal message and polaroid style live snapshot brings in more engaging remote participation for your guests. Evermark can also be used as RSVP, starting set the mood already before the event.

For events, Evermark is a living gallery of memories. For company websites, it can transform boring forms into engaging experiences.

Preview here: https://evermark.framer.website/

The overall process was spread into 4 days next to my other tasks. As a developer, it was extremely tempting to go and change the code directly but as the rules said only Workshop is allowed, I decided to take this as a challenge and see how far I can actually get without writing code.

I have been thinking would be nice to sign the client contracts directly on my website to allow some customization so the idea started with simple Signature canvas. However, soon I realized I could add different type of strokes and after successfully creating the brush stroke the rabbit hole had begun.

After expanding the canvas with basic tools like brush/pen toggle and eraser, I felt like something was missing - the story. I started thinking how I could actually use this component in real life and came up with a guest book approach, making it look like a physical book on a website. Additionally, I added custom cursors and polaroid that triggers a photo booth mode to let people leave also a real-time photo of themselves.

In day 3, all base functionalities were kinda there that I wanted but pressing buttons didn't feel engaging enough.

Although all images are customizable in the component, I wanted to create some engaging example images with ChatGPT.

I also wanted to add some sound effects and background music and surprisingly Workshop did pretty good job there. All default audio is from Pixabay (CC0) but users of the component can customize all sounds themselves.

Let's face it, as a React developer, it was hard for me to not touch code and just try to prompt my way through it. However, there were things were I'd use workshop also in future.

Prototyping interactions and sounds was quite easy and may be even faster than typing the code. AI was also able to "read between the lines" from time to time adding e.g. prop UI inputs without needing to request it separately.

Inspiration: In some cases workshop came up with ideas that I was not thinking myself. In some cases, the ideas were not good but in some other cases I took some suggestions from the AI to help me on the creative exploration.

Creating the Framer component UI props with workshop is a breeze. Even you'd be a developer, you may not be familiar with the Framer code that generates the UI for no coders in React and prompting this works really well.

Hallucinations are real. Do not focus on pixel-perfect fine-tuning until the base functionality is working. I was hit by this several times and the rescue here was what I also do in actual frontend development: I start adding simple background colors like pink, green, and yellow into the main divs so that I can prompt directly referring to the color instead of trying to explain the AI which section I mean every time.

The amount of dead code left behind is big. Every single prompt generates something and if you later request to remove it, the AI usually removes just part of it. Always use rollback instead trying to revert the code via prompt.

Human language is not same as code language. While all code was generated by prompting in this challenge, I actively used technical terms like "div", "overflow", "flexbox", "grid", "offset" in the prompt to refer to the correct terms directly. Without knowing the technical language I believe the same tasks would have taken a lot more time so knowing basic CSS and HTML definitely helps.

Crashes happen. The first crash happened to me somewhere around v50 and I lost everything. Somewhere around V300 when I was trying to add some glitter in the book cover, I got this crash screen again and I was no longer able to open the workshop nor code at all. Luckily, learning from the first crash, I had taken a copy/paste of the whole component code every hour or so in my notepad "just in case". I took a hit maybe by 50 iterations but at least I did not need to start completely from scratch. Might be better to slice your component into smaller components and try to make AI use those sub components instead of trying to control everything in one file.

The current version of the EverMark component canvas is not yet connected to email system but the canvas and photo booth images could be downloaded, which I already tested successfully earlier via workshop. Last step would be to add FormSpree connection (I use this on my own website) that allows images as part of the form payload and send them to an email address but did not want to get spam from the hackathon so left it out for now.

I had not used workshop before this hackathon and I was genuinely surprised by the quality of code generation. However, I have one final request for the Framer team: Please add a view where I can open workshop next to code and the component preview. This would be a game changer for design engineers like myself because the real magic lies somewhere in between where we can control the overview of the AI assisted workflow both in design as well as in code. Thanks!