skills.rest
shiqkuangsan
shiqkuangsanCOMMUNITY
Explore all skills by this author →
GitHub

tooyoung:blobity-cursor

Implement a canvas-based custom cursor with spring physics for web pages.

17|4|Updated Jan 25, 2026
Search Tags:#landing page#javascript#animation#ux#cursor#effect
One-click install
npx skills add https://github.com/shiqkuangsan/oh-my-daily-skills --skill tooyoung-blobity-cursor
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tooyoung:blobity-cursor
Source: https://github.com/shiqkuangsan/oh-my-daily-skills/tree/main/skills/blobity-cursor
Command: npx skills add https://github.com/shiqkuangsan/oh-my-daily-skills --skill tooyoung-blobity-cursor

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill enhances user engagement on landing pages by replacing the default cursor with a dynamic, visually appealing canvas-based effect that reacts to user interaction.

Core Features & Use Cases

  • Interactive Cursor: A canvas-based cursor that follows the mouse with spring physics.
  • Element Interaction: Expands to wrap around focusable elements like links and buttons.
  • Color Inversion: Utilizes mix-blend-mode: difference for a unique visual effect, especially on dark backgrounds.
  • Tooltip Mode: Displays custom text labels when hovering over specific elements.
  • Theme Adaptation: Supports light and dark modes with configurable colors.

Quick Start

Add a canvas-based custom cursor effect to any landing page by including the provided script in your HTML.

Frequently Asked Questions about tooyoung:blobity-cursor

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add a custom cursor effect to a landing page?▼

To add a custom cursor effect to a landing page, include a canvas-based script that replaces the default cursor and follows the mouse using spring physics for dynamic interaction.

Does the custom cursor effect work with React and Vue3 frameworks?▼

Yes, the custom cursor effect works with React and Vue3 frameworks, alongside HTML and Vue2, allowing you to wrap focusable elements and configure options across different stacks.

What is mix-blend-mode difference for cursor color inversion?▼

Mix-blend-mode difference is a CSS feature used by the cursor effect to invert colors dynamically, ensuring the custom cursor remains visually distinct against dark backgrounds.

Can I display tooltip labels when hovering over interactive elements?▼

Yes, you can display tooltip labels when hovering over interactive elements, as the custom cursor effect includes a tooltip mode that shows custom text labels for those focusable areas.

How do I configure cursor themes and colors for light and dark modes?▼

You can configure cursor themes and colors for light and dark modes using configurable options provided by the effect, ensuring the dynamic cursor adapts visually to your landing page environment.

Related Skills

Explore More Design & Creative Skills→
officechbusinessservices-creatorofficechbusinessservices-creator

json-canvas

Create and edit JSON Canvas files with nodes, edges, and validation.

Community
Intermediate
zunyiqingfeng-codezunyiqingfeng-code
2

web-design-engineer

Create HTML/CSS/JavaScript/React web artifacts with design-system coherence.

Community
Advanced
yonetim258852yonetim258852

web3d-integration-patterns

Architect multi-library 3D web apps integrating Three.js, GSAP, React Three Fiber, Motion, and React Spring.

Community
Advanced
ArnavPuriArnavPuri
3

image-treatment

Apply CSS and SVG filters, blend modes, and masks to images.

Community
Intermediate