Creative tools are evolving, but no matter how powerful these tools get, they’re all limited by the same bottleneck, our direction.
The “Articulation Barrier” is the word we use in UX design to describe the difficulty of formalizing our complicated thoughts into succinct AI prompts. It’s a buzzword, sure. But the mechanisms are rooted in real neuroscience.
Your prefrontal cortex (hear me out) works like your inner-editor. It is filtering through the complex and imaginative thoughts in your brain and translating them for you. But often, it can over-analyze your ideas in real-time, creating a creative bottleneck. An ‘articulation barrier,’ if you will.
The reason you might struggle with prompting AI tools is the same reason you might tense up when you see another cursor hovering in your Figma file, it’s your inner-editor over-filtering your thoughts.
Calming that inner-editor and letting your creative thoughts pour out of you takes practice. Articulation is like a muscle, you need to train it, and freewriting is how you do just that. It forces you to turn off the filter and push through the barrier.
Building a freewriting app for normies
Not everyone is familiar with freewriting, so I want to be clear on what this app is and what it isn’t. It’s a freewriting app for your thoughts, think of it like a journal of the moment. It’s not for typing practice or prompt practice (but I guess you could do that too, if you really want to).
I knew this app had to accomplish 2 things
- no matter what other features or information the app has, you should be able to just start typing as soon as the page loads.
- this has to be the most satisfying typing experience possible
Some elements I’m proud of
This project was an exercise in sweating the details. At it’s core, a freewriting app is a really simple concept. I wanted to make something that felt like every detail was intentional and every interaction was considered.
Sound design
The ‘clack’ sound of the keyboard was actually pulled from a longer recording of someone typing on a mechanical keyboard. I used Audacity (a free audio editing tool), to clip 6 individual key sounds and saved each of them as click1.mp3-click6.mp3. Once I had the audio files it was really all about giving Figma Make a really polished prompt. I knew what was important to mention (low latency, random order, etc) but I didn’t know much about the best practices when it came to implementing it in the code. Naturally, I used Claude to help me create the perfect prompt for this and it worked in one shot (Version 49 in the Figma Make project), maybe you’ll find it useful:
Add satisfying keystroke "clack" sounds when the user types. I'm providing 6 short mp3 samples named click1.mp3 through click6.mp3. Keep everything else exactly as is. Core behavior: On each real user keystroke that adds a character, play one of the 6 click samples chosen at RANDOM. Random selection per keypress is important — it prevents the repetitive, robotic feel of the same sound every time. Add a small random pitch variation to each playback (roughly ±5%) on top of the random sample choice, for extra organic variation so no two keystrokes sound identical. Implementation — low latency and overlap are critical: Use the Web Audio API with pre-decoded audio buffers (decode all 6 samples once up front into buffers), NOT HTML <audio> elements. The sound must fire with near-zero latency on keypress so it feels connected to the finger. Each keystroke must spawn its own audio source node so sounds can overlap — a fast typist will trigger a new clack before the previous one finishes, and each should play fully without cutting off the last. Do not reuse/restart a single shared player. Reuse the existing AudioContext already used for the soundscape music (and the same first-interaction unlock), so keystroke sounds are also permitted to play from the first keystroke onward. Which keystrokes trigger it: Only REAL user typing triggers clacks. Auto-typed text (welcome message, onboarding demo) does NOT play clacks. [If you'd prefer clacks during the auto-typed demos too, say so — but default is real typing only.] Backspace does NOT play a clack sound (only character-adding keystrokes do). [Flag if you'd rather backspace get its own sound.] Mute control: Keystroke sounds respect the SAME mute toggle as the music. When the user toggles sound off, both the music AND the keystroke clacks are silenced. When on, both play. [If you'd rather have a separate toggle for clacks vs music, say so — default is one shared toggle.] Optionally give keystroke clacks their own volume level (independent of the music's peak volume) exposed as a named constant, so I can balance the clack loudness against the soundscape.
Gradients
One thing that usually surprises people is how simple the gradient animations in Lekta are behind the curtain. Every gradient you see is a vector shape. It’s 3 layers: an SVG, blur, and a noise texture overlayed on top
Once we have our vector shapes we just have to direct Figma Make to animate them. The beam in the Lekta logo was just alternating SVG’s between 2 positions. I just made a shape → duplicated it → moved it around a little → and finally fed that ‘before and after’ into the agent.
The typing mode aurora was only slightly more complicated. I used 2 overlapping circles and modulated them with sine harmonics. I had a lot of help from Claude in creating the prompt, and it did take a little bit of refining in Figma Make, but this was the original (Version 7):
Add a full-screen layer of 3 blurred squiggle rings centered on the viewport. The rings respond to typing state. The ring layer sits above all existing UI elements (text, caret, progress bar) but below the noise/grain texture, which must remain the topmost layer. Do not modify any existing text, layout, or functionality. Ring appearance: 3 concentric circle outlines, centered on screen, stroked at 64px with no fill. Colors cycle: #FF6600, #FFFFFF, #FF6600. Opacity 1.0. Apply a 51px gaussian blur to the entire ring layer. Background behind the rings: #CCC5B8. Each ring is a continuously morphing closed path — not a perfect circle. Its radius is modulated around the circumference by two overlapping sine harmonics (4-lobe primary at ±2% amplitude, 6-lobe secondary at ±1.2%), both drifting in phase over time so the shape undulates in a slow organic wave. Each ring drifts at a slightly different speed and direction so they never move in sync. This runs continuously as a looping animation regardless of typing state. Two states driven by typing:
Button logic
A small detail, but one of my favorites. You might’ve noticed when selecting a different timer that the direction the characters transition is relative to what amount of time they are transitioning to. It gives the impression that there is an order to the numbers behind what the user can see.
Taking this even further, the order of the timer options is also determined by what is currently selected. Whichever time is closest to the current selection is the next button down the line.
An absence of onboarding
This is more of a process note, but for about 80% of it’s lifespan, Lekta had an onboarding experience for first-time visitors. The most polished version of which was a dark mode screen where a freewriting ‘sample’ was auto-typed in front of you. This sample text was an explanation of freewriting and Lekta, and later evolved into the ‘about’ page I use in the current version of the app. You could, of course, skip this demo by pressing the ‘I’m impatient and no fun’ button that was regrettably scrapped along with the onboarding experience.
Now, this onboarding experience was obviously not great. But from this not-so-great UX design I learned so much about what the app really needed. First of all, dark mode didn’t exist until I watched this entire freewriting demo type itself across my screen for the 48th time. Second of all, the auto-typing text is actually really valuable for first time visitors to understand it’s a typing app, but this wasn’t the way to do it.
Final thoughts and Figma Files
This project was created for the @Figma #ConfigMakeathon on @contra, I plan to keep it live here: https://lekta.ryanmeyers.xyz
Figma Make: https://www.figma.com/community/file/1647801696515509709/lekta-a-freewriting-app
Figma Design: https://www.figma.com/community/file/1648751264044720600
Freewriting is a daily practice, I’ve made it a part of my routine and have seen the benefits compile. I hope you’ll give it a try, whether that’s here or elsewhere.
Research on these topics for nerds like me
Fluency development through freewriting and transfer to other more structured tasks (Raymond Yasuda, 2025 / Language Teaching Research) - Researchers in this study found that consistent freewriting resulted in a "cognitive transfer." Because the participants had automated the physical act of getting words out, their brains freed up working memory to focus on higher-level conceptual tasks—resulting in a statistically significant improvement in the global quality, logic, and structure of their actual ideas
Using Focused Freewriting to Stimulate Ideas and Foster Critical Thinking during Prewriting(Journal of English for Academic Purposes) - researchers proved that focused freewriting forces "inductive thinking." Instead of jumping to shallow, cliché, or hasty conclusions, the continuous flow of freewriting forced participants to dig deeper, analyze contradictions, and organize complex, multi-layered arguments before they began final production
Exploring the Use of Focused Freewriting in Developing Academic Writing (Journal of University Teaching & Learning Practice) - The study proved that freewriting functions as a powerful "writing-thinking-discovery" tool. Through the practice, writers developed a significantly higher level of self-awareness regarding their own creative process, enabling them to transition smoothly between creative (generating) and analytical (evaluating) modes of thinking
Training your brain to be more creative: brain functional and structural changes induced by divergent thinking training - Using fMRI scans, researchers proved that creative/divergent thinking training physically reshapes the brain. They observed a measurable increase in gray matter volume (GMV) in the dorsal anterior cingulate cortex (dACC), demonstrating that training the brain to generate ideas freely stimulates structural neuroplasticity
The War of Art by Steven Pressfield - Not directly related to freewriting but absolutely touches on all of these concepts. I would consider it an essential read for creatives. Pressfield writes about 'Resistance'—that internal, paralyzing force that blocks every creative from doing their best work and how to overcome it.