Did you happen to figure it out or found an alternative?

Hi, you can make it responsive by using the below code for hook. useEffect(() => { const container = '.tagcloud'; let radii; const texts = [ 'HTML', 'CSS', 'SASS', 'JavaScript', 'React', 'Vue', 'Nuxt', 'NodeJS', 'Shopify', 'Jquery', 'ES6', 'GIT', 'GITHUB', ]; function radiusValue() { if (window.screen.width <= 778) { radii = 150; } else { radii = 290; } return radii; } const options = { radius: radiusValue(), maxSpeed: 'normal', initSpeed: 'normal', keep: true, }; TagCloud(container, texts, options); }, []);

Did you ever solve it? I just encountered the same issue

If you are facing problem after deployment, try using below code for hook : useEffect(() => { const container = '.tagcloud'; const texts = [ 'HTML', 'CSS', 'SASS', 'JavaScript', 'React', 'Vue', 'Nuxt', 'NodeJS', 'Shopify', 'Jquery', 'ES6', 'GIT', 'GITHUB', ]; const options = { radius: 300 , maxSpeed: 'normal', initSpeed: 'normal', keep: true, }; TagCloud(container, texts, options); }, []);

You can use the below source code for adding responsiveness (only you need to Call a function and set sphere radius depending on screen width). <script> const Texts = [ "HTML", "CSS", "JAVASCRIPT", "SWIFT", "MONGOOSE", "REACT", "PYTHON", "SASS", "DJANGO", "NODEJS", "MONGODB", "EXPRESS", "MYSQL", "JQUERY", "JAVA" ]; function radiusValue() { if (window.screen.width <= 778) { radii = 150; } else { radii = 290; } return radii; } var tagCloud = TagCloud(".Sphere", Texts, { // Sphere radius in px radius: radiusValue(), // animation speed // slow, normal, fast maxSpeed: "normal", initSpeed: "fast", // Rolling direction [0 (top) , 90 (left), 135 (right-bottom)] direction: 135, // interaction with mouse or not [Default true (decelerate to rolling init speed, and keep rolling with mouse).] keep: true }); // Giving color to each text in sphere var color = "#FF5733 "; document.querySelector(".Sphere").style.color = color; </script>

@@codemmit07 you are a legend Sir , thank you so much!!

you can deploy it on netlify and go to Forms tab, there you can manage forms and submissions without any server-side code.

@@codemmit07 thank you so much !

Hi, you can make it responsive by using the below code for hook. useEffect(() => { const container = '.tagcloud'; let radii; const texts = [ 'HTML', 'CSS', 'SASS', 'JavaScript', 'React', 'Vue', 'Nuxt', 'NodeJS', 'Shopify', 'Jquery', 'ES6', 'GIT', 'GITHUB', ]; function radiusValue() { if (window.screen.width <= 778) { radii = 150; } else { radii = 290; } return radii; } const options = { radius: radiusValue(), maxSpeed: 'normal', initSpeed: 'normal', keep: true, }; TagCloud(container, texts, options); }, []);

AGREED! His mouse trail is freaking awesome and I don't think anyone has been able to do it 😁

can you explain this please? How does setting a variable to radii change anything?

@MegaDubstepmixes No need of it here, you can remove it. But if you want to make it responsive you can use below code: useEffect(() => { const container = '.tagcloud'; let radii; const texts = [ 'HTML', 'CSS', 'SASS', 'JavaScript', 'React', 'Vue', 'Nuxt', 'NodeJS', 'Shopify', 'Jquery', 'ES6', 'GIT', 'GITHUB', ]; function radiusValue() { if (window.screen.width <= 778) { radii = 150; } else { radii = 290; } return radii; } const options = { radius: radiusValue(), maxSpeed: 'normal', initSpeed: 'normal', keep: true, }; TagCloud(container, texts, options); }, []);

@@codemmit07 it isn't deploying to netlify still, any ideas?

@@codemmit07 it fixed it. I love you with all my heart xxx

@MegaDubstepmixes I have deployed it on netlify, it works for me. Use the source code and take reference from video, make sure to install and import TagCloud, it should work.

Same with me Did you resolved it???

@@navpreetsingh3007 yes i have done

Its also show on netlify when I deploy

has this been fixed? i'm struggling with same error

@@helloworld3196 please how did you solve it ?

import React, { useEffect, useRef } from "react"; import TagCloud from "TagCloud"; import "./TextSphere.css"; const TextSphere = () => { const containerRef = useRef(null); useEffect(() => { const container = containerRef.current; const texts = [ "HTML", "CSS", "JavaScript", "NodeJs", "React", "MongoDb", "MySql", "Git", "MUI", "Express", "GitHub", "AI", ]; const options = { radius: 300, maxSpeed: "normal", initSpeed: "normal", keep: true, loop: true, lockX: true, lockY: true, }; TagCloud(container, texts, options); return () => { TagCloud(container, [], {}); }; }, []); return ( <div className="text-sphere"> <span className="tagcloud" ref={containerRef}></span> </div> ); }; export default TextSphere;

Try this way, it worked for me.

What do you mean?

@@quinojuan2 it repeating sphere's

Expected ‘none’, URL, or filter function but found ‘alpha(’. Error in parsing value for ‘filter’. Declaration dropped.

ya even I have the problem how to solve?

Disable StrictMode in your index,js. It's provided by react when you install using npx create react app.

You can checkout its implementation in React as well here : ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-5jlDHSqjZcc.html

"i would love to get that code.", - of course you would😁, can you even imagine how much time you need to spend to write something similar 🤷😂????

@Edward yes

@@codemmit07 can i get source code in react

@saikiranannam1866 sure, will update you soon.

just create a div with a text-align: centered property