gmrchk / blobity Goto Github PK
View Code? Open in Web Editor NEWThe cursor is the heart of any interaction with the web. Why not take it to the next level? ๐
Home Page: https://blobity.dev/
License: Other
The cursor is the heart of any interaction with the web. Why not take it to the next level? ๐
Home Page: https://blobity.dev/
License: Other
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
Describe your issue:
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...:
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...:
it would be so good to have support for svelte.js :)
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...:
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
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:
CDN not working
Before creating this issue, did you think of...:
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 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...:
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...:
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.
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.
^title
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...:
Describe your proposal:
What problem would it help to solve?
How big the problem is from your point of view?
Would you say it affect only your very specific use case?
Do you have any ideas on how to solve it?
Before creating this issue, did you think of...:
If this agreement is under the GPL license, does that mean that if I download it to my local machine and embed it into my website and projects without making any changes to the source code, does my project then have to be open source? As I recall, GPL has a strong contagious nature. Thank you for your work. I hope to receive a response. Thank you.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.