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.
- Overview
- The Problem
- Interaction Model
- Building the Stroke
- Feedback System
- Edge Cases
- Prototype
- Reflection
Overview
Wipe It started from a simple frustration: deleting text on mobile is graceless. Hunting for a small x, holding Delete while characters crawl away, triple-tapping and hoping the selection lands.
Every other common gesture has a physical equivalent. Swipe to delete. Pinch to zoom. Pull to refresh. Erasing text has none.
The Problem
Deleting a large block of text on mobile is genuinely awkward. The x is small, Delete is slow, and selection-by-tap is unreliable enough to feel like luck.
The deeper issue isn't speed. It's that the action has no physical weight. There's nothing to work against, no texture to the gesture, no sense of anything actually happening.
Interaction Model
Drag across a focused text field to erase. A brush stroke follows the finger. Cover enough ground and 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 at around 80px. A full paragraph needs ~900px across multiple strokes. The effort scales with what's being erased.
Building the Stroke
The brush went through several passes. Each iteration was about removing, not adding: stripping effects back until what remained felt like actual 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 |
Feedback System
There's no progress bar. Haptics and audio carry that job. They tell you how close you are without anything appearing on screen.
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.
Edge Cases
Five cases were defined and handled explicitly. Each one is a place where a sloppy implementation would break the user's trust in the gesture.
| 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. |
Prototype
Built in HTML, JS, and Web APIs. 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.
Reflection
The most important decisions were subtractive. Grit texture, blur effects, a stopwatch: each was added, then removed, because it competed with the gesture instead of serving it. The version that works is the one with the least in 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 |