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.

* You appear to have multiple instances of Solid. This can lead to unexpected behavior.
* computations created outside a
createRoot
createRoot
or
render
render
will never be disposed
* computations created outside a
createRoot
createRoot
or
render
render
will never be disposed
* cleanups created outside a
createRoot
createRoot
or
render
render
will never be run
* computations created outside a
createRoot
createRoot
or
render
render
will 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

src/components/SparklesPreview.tsx

. I have the base sparkles component at

src/components/Sparkles.tsx

src/components/Sparkles.tsx

and I encapsulated the options config for Motion in

src/components/sparkleOptions.ts

src/components/sparkleOptions.ts

since it's a long config. Finally, I have a basic test for tsparticles at

src/components/BasicParticles.tsx

src/components/BasicParticles.tsx

.

These can all be easily uncommented in

src/App.tsx

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.

SolidJS•2y ago•

58 replies

agentsmith

Aceternity UI components

* You appear to have multiple instances of Solid. This can lead to unexpected behavior.
* computations created outside a
createRoot
createRoot
or
render
render
will never be disposed
* computations created outside a
createRoot
createRoot
or
render
render
will never be disposed
* cleanups created outside a
createRoot
createRoot
or
render
render
will never be run
* computations created outside a
createRoot
createRoot
or
render
render
will 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

src/components/SparklesPreview.tsx

. I have the base sparkles component at

src/components/Sparkles.tsx

src/components/Sparkles.tsx

and I encapsulated the options config for Motion in

src/components/sparkleOptions.ts

src/components/sparkleOptions.ts

since it's a long config. Finally, I have a basic test for tsparticles at

src/components/BasicParticles.tsx

src/components/BasicParticles.tsx

.

These can all be easily uncommented in

src/App.tsx

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.

Aceternity UI components

Similar Threads

Aceternity UI components

Similar Threads

Similar Threads

Similar Threads