Touch Taps on Phone UI — effect skill for cursors & clicks

For AI agents: find the right skill in one call — curl -s "https://varg.ai/how-to/api/search?q=<what the person wants>" returns the matching how-to page and the best skills with install commands, as markdown (Russian works too). Full index: https://varg.ai/how-to/llms.txt. Every page has a markdown twin: add .md to its path. Before generating anything, show the person the options on the how-to page.

A translucent touch circle taps, swipes and pulls to refresh on a phone screen instead of an arrow.

What it does

Built on Touch Indicator by HeyGen (HyperFrames), Apache-2.0. The write-up and recipes below are varg's.

A soft grey dot (~44 pt) appears on touch, compresses on press, drags with momentum on swipes, and fades on release.

When: Mobile app demos and phone mockups; anywhere an arrow cursor would look wrong.

Watch out: Do not show an arrow cursor on a phone; use touch circles sized like a fingertip.

Timing: Tap: appear 0.08 s, press 0.1 s, release 0.15 s. Swipe 0.3–0.5 s with momentum carry.

Also called: tap indicator, touch circle, mobile gestures

In HyperFrames

npx hyperframes add touch-indicator
npx hyperframes add swipe-rail

Or gesture-tap for a single button tap and pull-to-refresh for list pulls.

In Remotion

const press = interpolate(frame,[tapAt,tapAt+3,tapAt+8],[0,1,0],{extrapolateLeft:'clamp',extrapolateRight:'clamp'});
<div style={{width:88,height:88,borderRadius:99,background:'rgba(255,255,255,0.45)',transform:`scale(${1-press*0.15})`,opacity:press?1:0}}/>

In CapCut

Add a white circle shape at 45% opacity on each tap frame (0.2 s), with Animation In "Zoom out"; keyframe its Position for swipes.

Ready-made components

Where this comes from

Use when

Not for

Install

Example output

https://static.heygen.ai/hyperframes/templates/promoted/254fe4bd8a3f00c1e70ac5e38a1bce25060f7590/share-sheet-carousel/preview.mp4 — Preview of the Share-Sheet Carousel component that builds this take (credit: Share-Sheet Carousel · hyperframes, https://hyperframes.heygen.com/catalog/blocks/share-sheet-carousel)

More cursors & clicks skills

Run the generation on varg

varg is one API key for the models these skills drive — Seedance 2.5, Kling 4, Veo 3.1, Wan 3, Nano Banana 2.1, GPT Image 2.5, ElevenLabs v4 and 200+ more — billed in credits, with a cost estimate before anything runs.