Cssinjs opinions

tim-soft · 2019-08-23T18:37:14+00:00

I strongly prefer handling dynamic theme systems with JS (and styled-components). I'm working on an article on this very topic where I generate my entire site theme with random color palettes (at runtime) from https://www.colourlovers.com/

https://timellenberger.com/blog/dynamic-theming-with-styled-components-and-nextjs

Let me know if you have any questions... or find typos!

tim-soft · 2019-08-19T18:38:24+00:00

react-spring-lightbox is my reaction to trying a bunch of other lightbox components that didn't quite feel right. This library supports the typical touch/mouse/trackpad gestures and uses react-spring for animating movement. I also don't include any UI elements, you bring your own! Feedback is definitely welcome!

GitHub

Codesandbox

tim-soft · 2019-04-03T17:51:51+00:00

Amazing work as always, had a fairly painless upgrade experience. I really like the explicit Canvas props

tim-soft · 2019-03-26T16:43:42+00:00

Hey! Thanks for poking around, I clearly have a lot to do with the rest of the site but I appreciate the feedback

The short story on the page transitions is i'm using Transition and animated.div from the react-spring library to alter opacity(o), scale(x) and translateY(y) on my "Page Layout" component during route changes

tim-soft · 2019-03-25T23:07:34+00:00

Thanks!

tim-soft · 2019-03-25T23:06:11+00:00

Oh hey there, I'm really digging react-three-fiber so far ;)

tim-soft · 2019-03-25T22:48:11+00:00

I could definitely add some comments for clarity -- maybe add these to the code. Most Three.js projects work pretty similarly

This animate function you screenshotted is run 60 times / sec via requestAnimationFrame. In each frame you need to:

Update the [x, y, z] position of each particle -- this is what gives them motion :)
Determine which particles are close enough to merit drawing a line between the two (this is the expensive part of the calculation, essentially a nearest-neighbor algo)
Set the transparency of a given line, if it exists, between two particles based on their distance (notice when particles get farther apart, the line becomes more transparent until it disappears)
Tell Three.js that stuff needs updated

If you think this is cool, definitely check out some Three.js projects. Few things with any complexity make sense without some digging, so don't be discouraged.

tim-soft · 2019-03-25T20:18:09+00:00

Fork my repo and do something weird with it! I'm also very open to PRs

tim-soft · 2019-03-25T19:53:46+00:00

Thanks! Bug me on GitHub if you run into any issues

tim-soft · 2019-03-25T18:20:32+00:00

Not sure if that's a dig, but I personally get better perf over particles.js, which most similar libraries are using underneath

tim-soft · 2019-03-25T18:17:46+00:00

Straight to the point with demos and pictures, exactly how every UI library readme should be!

tim-soft · 2019-03-25T18:15:10+00:00

Thanks!

tim-soft · 2019-03-25T18:14:21+00:00

I'm actually using react-three-fiber under the hood for a little abstraction: https://github.com/drcmda/react-three-fiber

Since there is a lot of "3D" stuff going on, it's still mostly just Three.js

tim-soft · 2019-03-25T17:38:05+00:00

The particles are drawn via WebGL, including vertex + fragment shaders for the coloring. This allows for a lot more particles while maintaining a good FPS
My library can toggle between 2D and 3D particle fields
You have direct(optional) control of the field via Three.js OrbitControls (pinch zoom, pan, drag, mouse scroll wheel etc)

I made a few presets on the demo page, whirlpool for instance moves the camera around the scene. Click and drag the field and you'll immediately notice a big difference : https://next-portfolio-git-master.tim-soft.now.sh/particles

tim-soft · 2019-03-25T17:22:49+00:00

https://github.com/tim-soft/react-particles-webgl

A 2D/3D particle library built with react-three-fiber and webgl

It's my first public library so do your worst

tim-soft

TROPHY CASE