:tada: Add a cute click effect to your mouse in your vuepress!

Related tags

Effect plugin effects cursor vuepress
Overview

vuepress-plugin-cursor-effects

🎉 Add a cute click effect to your mouse in your vuepress!

npm GitHub stars downloads downloads GitHub license

Install

yarn add vuepress-plugin-cursor-effects -D
# or use npm
npm i vuepress-plugin-cursor-effects -D

Usage

module.exports = {
   plugins: ['cursor-effects'],
}

Options

module.exports = {
   plugins: [
      [
         'cursor-effects',
         {
            size: 2, // size of the particle, default: 2
            shape: ['star' | 'circle'], // shape of the particle, default: 'star'
            zIndex: 999999999, // z-index property of the canvas, default: 999999999
         },
      ],
   ],
}

Thanks

Comments
  • Configure Renovate

    Configure Renovate

    WhiteSource Renovate

    Welcome to Renovate! This is an onboarding PR to help you understand and configure settings before regular Pull Requests begin.

    🚦 To activate Renovate, merge this Pull Request. To disable Renovate, simply close this Pull Request unmerged.

    Detected Package Files

    • .github/workflows/prettify-code.yml (github-actions)
    • package.json (npm)

    Configuration

    🔡 Renovate has detected a custom config for this PR. Feel free to ask for help if you have any doubts and would like it reviewed.

    Important: Now that this branch is edited, Renovate can't rebase it from the base branch any more. If you make changes to the base branch that could impact this onboarding PR, please merge them manually.

    What to Expect

    With your current configuration, Renovate will create 1 Pull Request:

    Update creyD/prettier_action action to v4
    • Schedule: ["at any time"]
    • Branch name: renovate/creyd-prettier_action-4.x
    • Merge into: main
    • Upgrade creyD/prettier_action to v4.2

    ❓ Got questions? Check out Renovate's Docs, particularly the Getting Started section. If you need any further assistance then you can also request help here.

    This PR has been generated by WhiteSource Renovate. View repository job log here.

    opened by renovate[bot] 1
  • Uncaught TypeError: Shape is not a constructor

    Uncaught TypeError: Shape is not a constructor

    Plug in usage error: Uncaught TypeError: Shape is not a constructor image image This may be the reason why there are mouse effects inside. How should it be solved?

    opened by lightflyyan 1
  • ⬆️ deps: Update actions/checkout action to v3

    ⬆️ deps: Update actions/checkout action to v3

    WhiteSource Renovate

    This PR contains the following updates:

    | Package | Type | Update | Change | |---|---|---|---| | actions/checkout | action | major | v2 -> v3 |

    Release Notes

    actions/checkout

    v3

    Compare Source

    Configuration

    📅 Schedule: At any time (no schedule defined).

    🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

    ♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

    🔕 Ignore: Close this PR and you won't be reminded about this update again.

    • [ ] If you want to rebase/retry this PR, click this checkbox.

    This PR has been generated by WhiteSource Renovate. View repository job log here.

    dependencies 
    opened by renovate[bot] 0
  • Dependency Dashboard

    Dependency Dashboard

    This issue provides visibility into Renovate updates and their statuses. Learn more

    This repository currently has no open or pending branches.

    • [ ] Check this box to trigger a request for Renovate to run again on this repository
    opened by renovate[bot] 0
  • ⬆️ deps: Update creyD/prettier_action action to v4

    ⬆️ deps: Update creyD/prettier_action action to v4

    WhiteSource Renovate

    This PR contains the following updates:

    | Package | Type | Update | Change | |---|---|---|---| | creyD/prettier_action | action | major | v3.3 -> v4.2 |

    Release Notes

    creyD/prettier_action

    v4.2

    Compare Source

    Full Changelog: https://github.com/creyD/prettier_action/compare/v4.1.1...v4.2

    v4.1

    Compare Source

    • Added working_directory parameter
    • Changed term "master" in readme to the new GitHub default convention (Thanks to @​JLHasson)
    • package-lock.json now doesn't get deleted anymore (Thanks to @​AndyA)
    • Added commit-description parameter (Thanks to @​insyri)
    • Fixed a bug with spaces in file names (Thanks to @​sksat)

    Full Changelog: https://github.com/creyD/prettier_action/compare/v4.0...v4.1

    v4.0

    Compare Source

    Configuration

    📅 Schedule: At any time (no schedule defined).

    🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

    ♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

    🔕 Ignore: Close this PR and you won't be reminded about this update again.

    • [ ] If you want to rebase/retry this PR, click this checkbox.

    This PR has been generated by WhiteSource Renovate. View repository job log here.

    dependencies 
    opened by renovate[bot] 0
  • ☑️ Dependency Dashboard

    ☑️ Dependency Dashboard

    This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

    This repository currently has no open or pending branches.

    Detected dependencies

    github-actions
    .github/workflows/prettify-code.yml
    • actions/checkout v3
    • creyD/prettier_action v4.2
    npm
    package.json
    • @moefy-canvas/theme-popper ^0.5.2
    • [ ] Check this box to trigger a request for Renovate to run again on this repository
    opened by renovate[bot] 0
Owner
让世界更可爱～
null
GitHub https://moefyit.github.io/moefy-vuepress/
small/cute/fun projects that don't need their own repo

experiments Hi! This repository is where I'm going to put short fun things I made that are probably never going to be touched again. cursed-k8s-x86 A

Nikhil Jha 20 Jun 15, 2022
A mouse particle effect react component

react-mouse-particles A mouse particle effect react component A very fun react library that can be used to create mouse particle effects, which are as

lindelof 92 Dec 17, 2022
Demo of the tutorial on how to craft a fullscreen SVG crosshair mouse cursor with a special distortion effect on hover.

Crosshair Mouse Cursor Distortion Demo of the tutorial on how to craft a fullscreen SVG crosshair mouse cursor with a special distortion effect on hov

Codrops 33 Sep 23, 2022
A subtle tilt effect for images. The idea is to move and rotate semi-transparent copies with the same background image in order to create a subtle motion or depth effect.

Image Tilt Effect A subtle tilt effect for images. The idea is to move and rotate semi-transparent copies with the same background image in order to c

Codrops 571 Nov 21, 2022
Only 90's kids remember... well not really, but these beloved effects that would follow your mouse around will always be classic reminders of the old, beloved internet.

90's Cursor Effects "Knowing the codes" used to be all the rage, I want to bring a few back. A repo of the old effects that inspired creativity and th

Tim Holman 2.6k Jan 9, 2023
A set of effects for mouse-following image trails that show a random series of images.

Image Trail Effects A set of effects for mouse-following image trails that show a random series of images. Inspired by the effect seen on VLNC Studio.

Codrops 177 Dec 28, 2022
Add a water ripple effect to your background using WebGL.

jQuery Ripples Plugin By the powers of WebGL, add a layer of water to your HTML elements which will ripple by cursor interaction! Important: this plug

Pim Schreurs 976 Dec 30, 2022
Add a retro/vintage effect to images using the HTML5 canvas element

vintageJS Add a retro/vintage effect to images using the HTML5 canvas element. Installation $ npm install vintagejs How to use vintagejs is a functio

Robert Fleischmann 829 Dec 25, 2022
❄️ Add a live frosted glass blur effect over any type of web content, including text.

Frosted Glass ❄️ Add a live frosted glass blur effect over any type of web content, including text. ️️ Demos Install npm install frosted-glass --save

Adrian Carriger 63 Nov 10, 2022
A decorative website background effect where SVG shapes morph and transform on scroll.

Morphing Background Shapes A decorative website background effect where SVG shapes morph and transform on scroll. Article on Codrops Demo This demo is

Codrops 351 Dec 26, 2022
Background image segment effect as seen on [Filippo Bello's Portfolio](http://www.filippobello.com/portfolio).

Segment Effect Background image segment effect as seen on Filippo Bello's Portfolio. Article on Codrops Demo License Integrate or build upon it for fr

Codrops 526 Nov 29, 2022
Switch the background-image with using effect.

jQuery.BgSwitcher Switch the background image with using effect. Demo http://rewish.github.io/jquery-bgswitcher/ Usage <div class="box"> <p>Lorem ip

rewish 195 Dec 30, 2022
Recreation of the background scale hover effect seen on the DDD Hotel website using CSS clip paths.

Background Scale Hover Effect Recreation of the background scale hover effect seen on the DDD Hotel menu using CSS clip paths. Article on Codrops Demo

Codrops 98 Dec 6, 2022
A motion hover effect for a background grid of images.

Image Grid Motion Effect A motion hover effect for a background grid of images. Article on Codrops Demo Installation Install dependencies: npm install

Codrops 118 Dec 31, 2022
fixed-background-effect

Fixed Background Effect A simple template that takes advantage of the background-attachment CSS property to create a fixed background effect. Article

CodyHouse 50 Oct 28, 2022
Warp drive is a lightweight jQuery plugin that helps you create a cool, interactive, configurable, HTML5 canvas based warp drive/starfield effect.

Warp drive jQuery plugin (jquery-warpdrive-plugin) Preview Description Warp drive is a lightweight jQuery plugin that helps you create a cool, interac

Niklas 51 Nov 15, 2022
Demos for the tutorial on how to achieve an interactive mouseover/hover effect

Interactive Hover Effects with Three.js A simple tutorial on how to achieve an interactive mouseover/hover effect on images in some easy steps. Articl

Yuri Artiukh 246 Dec 27, 2022
magneticHover lets you trigger hover effect on the element when the cursor is near it, but not over it yet

magneticHover magneticHover lets you trigger hover effect on the element when the cursor is near it, but not over it yet. Examples https://codesandbox

Halo Lab 35 Nov 30, 2022
👓 Parallax tilt hover effect for React JS - tilt.js

React.js - Tilt.js React version of tilt.js Demo https://vx-demo.now.sh/gallery Install yarn: yarn add react-tilt npm: npm install --save react-tilt U

Jon 340 Dec 23, 2022