Section-by-Section Cursor Interaction Polish
Audit flat page sections and implement one restrained cursor effect per section, with touch and reduced-motion fallbacks.
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
The page works, but the story section feels dead and every card looks like the same template. This pass identifies where a cursor interaction would help, chooses one restrained effect for each selected section, and supplies implementation details that preserve readability and input behavior.
What it does
- Audits sections for visual flatness, existing motion, and whether another effect would actually help.
- Selects a single halo, glow, parallax, or pointer-triggered reveal for each section that merits treatment.
- Specifies movement limits, opacity, response lag, entry behavior, and exit behavior.
- Implements cursor tracking with section-relative coordinates, frame-based updates, and explicit cleanup.
- Keeps essential content available on touch devices, with a keyboard and reduced-motion baseline.
- Reviews neighboring sections and removes repetitive or excessive effects.
What you get
A focused recommendation for one section or a section-by-section plan, sized to your request. Implementation requests include a scoped patch or self-contained code, plus a verification checklist that distinguishes observed results from pending checks.
Best for
Frontend developers and UI designers polishing an already built landing page, especially when it feels static or existing cursor effects compete with the content.
SKILL.md preview
---
name: section-by-section-cursor-interaction-polish
description: >
Audit a built page section by section and implement one restrained cursor interaction in each section that needs it. Match the effect to the content, define its motion budget, and use bounded pointer tracking with touch and reduced-motion fallbacks. Use when the user says "this page feels flat", "the story section feels dead", "add a subtle cursor glow", "make this section feel more premium", "my cursor animation keeps jittering", "the hover effects are too busy", or "polish the interactions section by section".
---
# Section-by-Section Cursor Interaction Polish
… (sign up to view the full skill)More development skills
View all Development skills →Frontend Component UX and Accessibility Review
Severity-ranked fixes with code for UI components: states, keyboard, focus, ARIA, touch targets, contrast, and responsive breakage.
Three.js Click-to-Learn 3D Game Builder
Build click-to-learn 3D games in Three.js: TSL materials, reliable object picking, and an accessible quiz overlay fed by content data.
Angular Standalone Features and State Architecture
Build Angular standalone features with lazy routes, scoped state, safe RxJS flows, and targeted tests.
shadcn/ui Component Building and Theming
Build, theme, and debug shadcn/ui components the way the library is designed to work, with Tailwind v3 and v4 theming handled correctly.