Aceternity UI components
I'm attempting to replicate the Sparkles component from https://ui.aceternity.com/components/sparkles.
It uses @tsparticles, framer-motion (solid-motionone), and tailwind.
I haven't been able to figure out the particles. I'm seeing some warning which are probably informative to someone who's familiar with SolidJS.
I'm using a codesandbox so this can be viewed easily and forked to play with.
https://codesandbox.io/p/sandbox/solid-sparkles-y9gk2j
The totally effect should in
These can all be easily uncommented in
Any help would be appreciated.
It uses @tsparticles, framer-motion (solid-motionone), and tailwind.
I haven't been able to figure out the particles. I'm seeing some warning which are probably informative to someone who's familiar with SolidJS.
* You appear to have multiple instances of Solid. This can lead to unexpected behavior.
* computations created outside acreateRootorrenderwill never be disposed
* computations created outside acreateRootorrenderwill never be disposed
* cleanups created outside acreateRootorrenderwill never be run
* computations created outside acreateRootorrenderwill never be disposed
I'm using a codesandbox so this can be viewed easily and forked to play with.
https://codesandbox.io/p/sandbox/solid-sparkles-y9gk2j
The totally effect should in
src/components/SparklesPreview.tsx. I have the base sparkles component at src/components/Sparkles.tsx and I encapsulated the options config for Motion in src/components/sparkleOptions.ts since it's a long config. Finally, I have a basic test for tsparticles at src/components/BasicParticles.tsx . These can all be easily uncommented in
src/App.tsx to see how things are working individually. I see the above warning in all the setups, so probably something with tsparticles. Any help would be appreciated.
