Wipe It - A gesture-based approach to clearing text fields
A scrub gesture that makes erasing feel as natural as crossing something out on paper.
Wipe It started from a simple frustration: deleting text on mobile is graceless. You hunt for a tiny x, hold down Delete and watch characters crawl away, or triple-tap and hope your selection lands right.
Every other fundamental gesture has a real-world equivalent. Swipe to delete. Pinch to zoom. Pull to refresh. Erasing text has none.
Have you ever had to delete a large body of text on mobile? Hunt for a tiny x icon buried in a corner? Hold down Delete while watching characters disappear one by one?
The problem is not that it is slow - it is that it feels like nothing. The action has no physical weight, no texture, no sense of working against something.
Drag across a focused text field to erase. A brush stroke follows your finger. When you have covered enough ground - it clears.
The threshold scales with text length. Short text clears in one swipe. A paragraph needs sustained scrubbing.
The formula: threshold = clamp(text.length × 8px, min: 70px, max: 900px)
"John" clears in ~80px. A full paragraph needs ~900px - multiple strokes. The effort is proportional to what is being erased.
The brush went through several passes. Each iteration was about removing, not adding - stripping back effects until what remained was a stroke that felt like erasure.
| What was tried | What shipped |
|---|---|
| Multi-layer gritty charcoal - noise, blur, scatter | Single clean stroke - quadratic curves through midpoints |
| Dashed line gaps - simulated texture | Round caps and joins |
| Blurred lower edge - fake feathering | Warm light grey - rgba(210,210,210,0.85) |
| Radial gradient dabs - realistic smudge | Width shrink on release - not a fade |
The gesture has no progress bar. The feedback IS the progress indicator - haptics and audio tell you how close you are without any visible UI overlay.
Haptics
A 3ms buzz fires on a repeating timer while the finger moves. The interval compresses as progress builds: interval = 90ms - (progress × 45ms). Slow and textured at the start. Faster and more urgent near the end.
| Moment | Pattern | Why |
|---|---|---|
| Scrub active | 3ms pulse, 90-45ms interval | Continuous texture - maps to friction |
| Clear | 14ms single snap | Definitive. Like something breaking off |
| Missed erase | [8ms, 60ms gap, 8ms] | "Not quite" - only fires above 5% progress |
| Restore | 4ms tick | Quiet confirm, no sound |
Audio
All sounds are synthesized - short sine and triangle bursts, fast attack, exponential decay. A soft low pop on scrub start, a snappy double-hit on clear, a muted thud for a missed erase. Restore has no sound. Silence communicates undo better than any tone could.
Five edge cases were defined and handled explicitly - each one a place where a careless implementation would break trust with the user.
| Case | Behaviour |
|---|---|
| Empty field | Gesture does not arm. Nothing to lose, nothing to resist. |
| Tap vs. drag | Tap focuses. Drag wipes. A 10px buffer separates the two before any logic runs. |
| Unfocused field | First tap focuses. Second interaction can wipe. Prevents accidental clears while scrolling past. |
| Scroll conflict | e.preventDefault() fires once isWiping is true. Normal scroll preserved before that threshold. |
| Re-wipe after clear | isCleared gates all wipe logic. Only Restore is available. |
The prototype is fully functional - built in HTML, JS, and Web APIs. Try it below. Focus the field first, then drag across it to erase.
This interaction is best experienced on a phone. Touch input and haptic feedback are central to how it works - most of that is lost on a laptop. Scan to open on your device.
The most important decisions were all subtractive. Every time something was added - grit texture, blur effects, a stopwatch - it was later removed because it competed with the gesture rather than served it.
| What worked | What is next |
|---|---|
| Threshold scaling - made it feel intelligent | Word-level erasure - erase only what you scrub over |
| Continuous haptic rumble - analog, not event-driven | Velocity-weighted threshold - fast scrubs feel lighter |
| Text stays visible during wipe - opacity unchanged | Accessibility mode - long-press to clear |
| Width-shrink exit - more physical than a fade | |
| Restore silence - right call every time |