gmrchk / blobity Goto Github PK

^title

Is there any way to fix links from getting pulled/dragged when hovering over them? I can't seem to figure out even turning off magnetic doesn't seem to be working

Describe your issue:
When running Blobity on screens which support 120fps like new Macs, the blob animation is quicker than it should be due to the animation relying on the requestAnimationFrame, which can fire at different rates by default.

Before creating this issue, did you think of...:

• Have you checked closed issues for similar/related problems?
• Have you provided all helpful information available?
• Have you considered creating a demo repository, or a link to your running project where the problem is reproducible?

Describe your issue:
Can not get blobityInstance in vue
Demo: https://stackblitz.com/edit/vitejs-vite-qa3ezk?file=src%2FApp.vue

Blobity config or any additional relevant code used:

import useBlobity from 'blobity/lib/vue/useBlobity';
// blobityInstance is null.
const blobityInstance = useBlobity({
  zIndex: 1,
  // licenseKey: '...'
});

Before creating this issue, did you think of...:

• Have you checked closed issues for similar/related problems?
• Have you provided all helpful information available?
• Have you considered creating a demo repository, or a link to your running project where the problem is reproducible?

When content is switched out by react-router the blob gets stuck at (0,0) until the cursor hovers over another focusable element.

Try clicking 'Roster' followed by a name from the list on this react-router demo.
https://codepen.io/floop-the-pig/pen/abyrjvG

Have tried working around this with the focusElement and reset API methods but couldn't find anything that worked.

it would be so good to have support for svelte.js :)

I'm looking for the option to add images or videos inside the blob. This way they could show on hover in a similar way as the tooltips do. Is this something that might be possible

Describe your proposal:

• would be great to have data-blobity-tooltip-position="left-bottom" property on the focusable element.

What problem would it help to solve?

• using the tooltip on navigation links that are too close from each others**

How big the problem is from your point of view?

• bad for accessibility

Would you say it affect only your very specific use case?

• have multiple options is always good for any use case

Do you have any ideas on how to solve it?

• no for the moment

Before creating this issue, did you think of...:

• Have you checked closed issues for similar/related problems?
• Have you provided all helpful information available?
• Have you considered creating a demo repository, or a link to your running project where the limitation you are facing is reproducible?

first off, thanks so much for the amazing plugin!

https://codepen.io/handiworknyc/pen/RwxGGgm

See codepen. try hovering over some elements.

There should be an option to pass the [locoMotiveScrollInstance].scroll.instance.scroll.y to the blobity instance. The transform attributes of focused elements are not being factored in.

Thanks!

Describe your proposal:
When the text link to be focused by Blobity crosses two or more lines, the whole area is covered by the blob.

The idea is to split the blob into two or more in such cases, and focus on the test lines as separate elements.

Before creating this issue, did you think of...:

• Have you checked closed issues for similar/related problems?
• Have you provided all helpful information available?
• Have you considered creating a demo repository, or a link to your running project where the limitation you are facing is reproducible?

Describe your issue:

Hiding Hero Section Buttons in Main Website

Blobity config or any additional relevant code used:

Before creating this issue, did you think of...:

• Have you checked closed issues for similar/related problems?
• Have you provided all helpful information available?
• Have you considered creating a demo repository, or a link to your running project where the problem is reproducible?

First of all, WOW!!! Georgy, this library is awesome! And just found out you are also the creator of Swup 🤯

Is it possible to disable the re-shaping of the circle (morphing into a comet like cursor) when moving?
I'm pretty sure my client won't want that (it's awesome, but I'm doing an architect website, and everything need to be subtle).

Thanks!

Describe your proposal: I love this web addon and think it would be a MASSIVE hit for Mac users to have this on/within their desktop. Like an On-Prem version of this. That would take Blobity to the next level and generate good income off of this product!
What problem would it help to solve? This would make computer engagement more fun and tolerable
How big the problem is from your point of view? I've looked everywhere to make the mouse/cursor more enjoyable to use and I think I found it once I found your web add-on.
Would you say it affects only your very specific use case? No, this could affect many users of Mac/Apple.
Do you have any ideas on how to solve it? This seems like most of the legwork is done. Apple uses a very basic click/focus window approach and I believe they have a more solid platform to issue this one since the Apple apps are heavily regulated and MacOS is a very streamlined platform.

Describe your issue:
CDN not working

https://cdn.blobity.dev/by.js

Before creating this issue, did you think of...:

• [*] Have you checked closed issues for similar/related problems?
• [*] Have you provided all helpful information available?

I am scratching my head because I get two blobs after when I change the color of the blob or add a tooltip. Kindly help.
https://codepen.io/touseefcodes/pen/XWaRgmV

Describe your issue:

1. install nextjs with typescript
2. install blobity
3. add blobity with useBlobity with any config
4. add a button that routes user to another page
5. move cursor
6. blobity will lock to the top left corner of the screen

If you reload the page after the error fixes itself. Tested on mozilla and edge.

Minimally reproducable repo:
https://github.com/jamesie/blobity-bug

Blobity config or any additional relevant code used:

  const blobity = useBlobity({
    licenseKey: "opensource",
    magnetic: false,
    color: "#ffffff",
    focusableElementsOffsetX: 4,
    focusableElementsOffsetY: 4,
    zIndex: -1,
    radius: 10,
  });

Before creating this issue, did you think of...:

• [Y] Have you checked closed issues for similar/related problems?
• [Y] Have you provided all helpful information available?
• [Y] Have you considered creating a demo repository, or a link to your running project where the problem is reproducible?

Describe your proposal:
I am trying to use blobity with the view transitions API and was wondering if there was a way to prevent blobity from flickering slightly when the page animates.

You can check the example out on my portfolio on https://blaine.is-a.dev

Before creating this issue, did you think of...:

• Have you checked closed issues for similar/related problems?
• Have you provided all helpful information available?
• Have you considered creating a demo repository, or a link to your running project where the limitation you are facing is reproducible?

When setting high pixel values (like 100px for example, to try and get a round radius), the blob kind of breaks: it becomes a weird shape when hovering focusable elements.

Here's my config:

const blobity = new Blobity({
          color: "#FF0000",
          zIndex: 1,
          opacity: 1,
          size: 40,
          focusableElements: ".oj-c-Credits-btnContainer, .oj-c-Doom-tooltipContainer, .oj-c-Input, .oj-c-Btn",
          focusableElementsOffsetX: 10,
          focusableElementsOffsetY: 10,
          invert: false,
          dotColor: "#FFF",
          dotSize: 8,
          magnetic: true,
          mode: "normal", // normal, slow, bouncy
          radius: 100,
          font: "Space Grotesk, sans-serif",
          fontWeight: 700,
          fontSize: 40,
          fontColor: "#000",
          tooltipPadding: 12
});

The result: screen capture of the issue