Drag a Card Across Columns — effect skill for cursors & clicks
For AI agents: find the right skill in one call —
curl -s "https://skills.varg.ai/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://skills.varg.ai/llms.txt. Every page has a markdown twin: add.mdto its path. Before generating anything, show the person the options on the how-to page.
The cursor grabs a card, lifts and tilts it while carrying, and drops it into a new column with a settle.
- Type: Effect · Cursors & clicks
- Slug:
drag-card-across - Status: live
- Publisher: HeyGen (community)
- License: Apache-2.0
- Source: https://github.com/heygen-com/hyperframes/tree/main/registry/components/cursor-drag-drop
- Works in: Claude Code, Claude.ai, Codex, Cursor, OpenClaw, Gemini CLI, Any MCP client, varg Studio
- Requires: HyperFrames (npx hyperframes), Remotion, CapCut (by hand)
- Cost: Free — the take renders locally; generated footage, if any, bills by the model
What it does
Built on Drag and Drop Cursor by HeyGen (HyperFrames), Apache-2.0. The write-up and recipes below are varg's.
Card scales to 1.04, tilts ~3° in the direction of travel and gains shadow; on drop it straightens and neighbors shuffle.
When: Task boards, file managers, builders — anything where drag is the core action.
Watch out: Do not move the card at linear speed; drag should accelerate and decelerate like a hand.
Timing: Lift 0.15 s, carry 0.6–0.9 s power2.inOut, drop settle 0.25 s back.out(1.4).
Also called: drag and drop, kanban drag, move task
In HyperFrames
npx hyperframes add cursor-drag-drop
In Remotion
// npx shadcn@latest add @remocn/cursor (drag waypoint)
const p = interpolate(frame,[10,34],[0,1],{extrapolateLeft:'clamp',extrapolateRight:'clamp',easing:Easing.inOut(Easing.quad)});
const tilt = Math.sin(p*Math.PI)*3;
In CapCut
Overlay a card screenshot, keyframe Position and Rotation (0° → 3° → 0°) with a cursor sticker parented by matching keyframes.
Ready-made components
- Drag and Drop Cursor (hyperframes): npx hyperframes add cursor-drag-drop
- UI Cursor (remocn): npx shadcn@latest add @remocn/cursor
- Keyframe Scrub Stack (hyperframes): npx hyperframes add keyframe-scrub-stack
Where this comes from
- Consensus: 5 tips to record the best product video
- HyperFrames skill: oversized cursor motion conventions
Use when
- Task boards, file managers, builders — anything where drag is the core action.
Not for
- Do not move the card at linear speed; drag should accelerate and decelerate like a hand.
Install
- Claude Code:
claude plugin marketplace add vargHQ/skills && claude plugin install varg@varg - Codex:
npx skills add vargHQ/skills --skill varg-video-edit-library -a codex -y - Cursor:
npx skills add vargHQ/skills --skill varg-video-edit-library -a cursor -y
Example output
https://s3.varg.ai/how-to/previews/67b4e79061c2/take-drag-card-across.mp4 — The Drag and Drop Cursor component rendered as installed (npx hyperframes add cursor-drag-drop), defaults only (credit: Rendered by varg · HyperFrames Drag and Drop Cursor, https://hyperframes.heygen.com/catalog/components/cursor-drag-drop)
More cursors & clicks skills
- Auto Zoom on Every Click: The camera eases in toward each upcoming click, trails the cursor on a spring, and eases out after.
- Oversized Look-Here Cursor: A macOS arrow at ~3–4× normal size glides in and lands its tip on what matters.
- Click Ripple and Button Press: Every click shows a quiet expanding ring while the clicked button presses in and responds.
- Shortcut Keycaps Overlay: Physical-looking keycaps rise at the bottom of the frame and press in the real order when a shortcut is used.
- Named Agent Cursor: A cursor with an accent name tag ("Claude", "Agent") moves and clicks on its own, typing each step.
- Multiplayer Cursors Drift In: Several labeled cursors in different colors drift in from the edges and gather on the canvas.
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.
- Claude Code:
claude plugin marketplace add vargHQ/skills && claude plugin install varg@varg(skill + hosted MCP) - Codex, Cursor, Gemini CLI, OpenClaw:
npx skills add vargHQ/skills --skill varg-ai -a <agent> -y - Grok and any agent that reads SKILL.md:
npx skills add vargHQ/skills --skill varg-ai, or point it at the skill's SKILL.md - Claude.ai, ChatGPT, any MCP client: connect
https://mcp.varg.ai/mcp - API key: https://varg.ai/dashboard/api · Model specs: https://varg.ai/models/llms.txt