Cursor Micro-Interaction Polish Pass
Section-by-section polish pass: find the flat sections and give Claude one specific cursor interaction or animation per section, restrained not busy.
Before & after
Same prompt, same agent — the only difference is the skill.
Adding micro-interactions can bring a site to life. Here are some ideas: - **Hover effects** on buttons and cards — subtle scale or shadow changes - **Scroll animations** — fade elements in as they enter the viewport - **Parallax** on hero images for depth - **Loading states** with skeleton screens - **Cursor effects** — custom cursors or trailing elements - **Transitions** between pages Libraries like Framer Motion or GSAP make these easier to implement. The key is subtlety — too many animations can feel overwhelming and hurt performance. Would you like help implementing any of these?
Scrolled the site. Four sections read flat. One motion each — that's the
whole discipline, and it's what separates polish from a site that feels
like a demo reel.
SECTION AUDIT
HERO — not flat. Leave it alone.
The video already carries it. Adding motion here competes.
RESERVE A TABLE — flat ✗
→ Ember glow follows the cursor across the section background.
Warm radial, 240px, opacity 0.12, 120ms ease-out lag.
Why here: it's the conversion section. Warmth at the exact moment
of hesitation. Ref: 21st.dev spotlight-cursor.
OUR STORY — flat ✗
→ Soft candle-light halo trails the cursor with deliberate lag —
~180ms, slower than feels natural. The lag is the point: it reads
as candlelight rather than as a cursor effect.
Opacity 0.08. If a visitor notices the effect, it's too strong.
MENU — flat ✗
→ Dish rows only: the row lifts 2px and the price fades from
--muted to --ink on hover. No image zoom, no card shadow.
One property, one row.
HOURS / LOCATION — flat, and it should stay flat ✓
Utility content. Someone here is checking whether you're open.
Motion is friction.
THE RULES THIS FOLLOWS
One motion per section. A second one doesn't add polish, it adds
noise, and the eye stops trusting any of them.
Nothing above 0.15 opacity on ambient effects.
Every effect gated on (hover: hover) and
prefers-reduced-motion: no-preference. Cursor effects on touch are
dead weight that still ships and still costs.
WHAT I'D CUT IF YOU ONLY DO ONE
The reserve-a-table ember. It's the section where feeling changes
behavior. The other three are refinement.About this skill
name: cursor-microinteraction-polish-pass description: Section-by-section polish pass: find the flat sections and give Claude one specific cursor interaction or animation per section, restrained not busy.
Cursor Micro-Interaction Polish Pass
What This Does
The creator scrolls the site by hand, finds sections that feel static, and gives Claude one interaction per section, always restrained. Ember glow follows the cursor in the reserve-a-table section, a soft candle-light halo trails behind the cursor in the story section with a subtle lag.
What You Get
- Section-flat-feel audit
- one-motion-per-section discipline
- cursor-follow micro interactions
- 21st.dev component references
- restraint-first rewrite loop
Customize
- sections: which page regions to audit
- motion_type: parallax, halo, glow, or word-reveal
- lag_amount: how much motion trails the cursor
- component_source: 21st.dev name or a custom prompt
- restraint_bias: default to more subtle
Sample Output
The story section gets a subtle candle-light halo that lags behind the cursor and elevates the whole page from professional to expensive.
Target Audience
UI designers who want the last 20 percent that makes a site feel premium
SKILL.md preview
---
name: cursor-microinteraction-polish-pass
description: Use this skill when a built site feels flat and needs a targeted pass of restrained cursor-driven interactions, one per section.
version: 1.0.0
category: Web/UI
author: AgentVolt
license: proprietary
tags:
- web
- ui
- standard
---
# Cursor Micro-Interaction Polish Pass
Walks a live site section by section and assigns exactly one restrained cursor interaction to each flat section, instead of blanketing the page in motion.
## When to use
… (sign up to view the full skill)More development skills
View all Development skills →SEO Multi-Page Site Builder
Have Claude replicate your existing homepage design across three new SEO-optimized pages with structured data, canonicals, and a full audit report.
10K Website Checklist Grader
Paste the 10K website checklist into Claude and grade any AI-generated site against point-of-view, typography, color, hierarchy, imagery, motion, mobile, and felt-quality.
Nano Banana Scroll-Stop Website Hero
Use the Nano Banana 2 asset-generation skill plus a scroll-stop prompter to produce two paired images and a transition video, then wire them into a website hero.
Business Automation Stack
A connected set of agents that handle the repetitive ops work — follow-ups, summaries, and handoffs.