Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/krasivaya/spark-joy


https://github.com/krasivaya/spark-joy

Last synced: about 10 hours ago
JSON representation

Awesome Lists containing this project

README 

        
# spark-joy



easy ways to add design flair, user delight, and whimsy to your product.



## Typography



- https://www.typewolf.com/

- Free fonts that are great with examples

  - Chivo https://www.latinxswhodesign.com/

  - Proxima Nova https://a16z.com/



## Color Picking



- https://color.adobe.com/create

- https://palettte.app/ (advanced tool; try importing the default paletttes)

- http://colours.neilorangepeel.com/category/red/

- https://www.colorbox.io (by Lyft Design https://design.lyft.com/)



Color knowledge (not tools but still important so here they are)



- [Sarah Drasner on Color](https://css-tricks.com/nerds-guide-color-web/)

- [Louisa Barret on Color](https://www.youtube.com/watch?v=NdKAUXAvt8E)

- [Erik Kennedy on Color/HSB](https://learnui.design/blog/the-hsb-color-system-practicioners-primer.html)



## Font picking



- https://muffingroup.com/blog/best-free-fonts/



## Pure CSS



MAKE SURE TO CHECK OUT https://components.ai



### Pure CSS Tricks



- https://twitter.com/JoshWComeau/status/1170358024319492097?s=20

- CSS Secrets https://twitter.com/swyx/status/982786353216843776?s=20



### SVG/Canvas Masking



- Transparent fill SVG and color in on Hover - [Codepen](https://codepen.io/m4r1vs/pen/qVReQz)

- https://speckyboy.com/css-svg-canvas-masks/

- https://www.blobmaker.app/

- https://getwaves.io/

- text effects https://css-tricks.com/animate-blob-text-with-svg-text-clipping/

- animate an existing svg https://svgartista.net/



### Background Gradients and Patterns



- https://leaverou.github.io/css3patterns/

- https://uigradients.com/#Petrichor

- https://coolbackgrounds.io/

- ANIMATED GRADIENTS https://www.gradient-animator.com/

- CSS Doodle https://css-doodle.com/

- this guy https://twitter.com/yuanchuan23



In particular, applying gradients and background images to text is super underrated. Examples:



- [https://philcoffman.com/](https://user-images.githubusercontent.com/6764957/64589989-7985f500-d374-11e9-9d8a-2a8888df6981.png)

- [https://css-tricks.com/](https://user-images.githubusercontent.com/6764957/64590103-beaa2700-d374-11e9-8a84-95ab4826a577.png)



### Spinners



- web components https://wc-spinners.cjennings.dev/

- Spinners https://tobiasahlin.com/spinkit/

- Buttons, hover, inputs, and loaders https://cssfx.dev

- Conic gradient loader in CSS - [Codepen](https://codepen.io/keithclark/pen/aEbEoo)



### Animations & Transitions



- Buttons, hover, inputs, and loaders https://cssfx.dev

- general http://animista.net

  - animate an existing svg https://svgartista.net/ (by the same people as animista)

- general https://daneden.github.io/animate.css/

- general https://ianlunn.github.io/Hover/

- Burgers https://march08.github.io/animated-burgers/

- Burgers http://negomi.github.io/react-burger-menu/

- Layout https://github.com/aholachek/react-flip-toolkit

- Hover and loaders: https://www.csswand.dev/



### Icons



- https://iconmonstr.com/

- https://thenounproject.com/

- https://icomoon.io/

- https://orioniconlibrary.com/ has customizable colors and packs eg for ecommerce

- animated icons http://www.transformicons.com/builder.html



### Graphics and SVG Illustrations



- https://undraw.co/

- https://www.humaaans.com/ diverse, customizable human svgs

- https://www.freepik.com/

- https://gallery.manypixels.co/



### Animating Individual Elements



- links https://cssanimation.rocks/animating-links/

- tooltips on hover https://kazzkiq.github.io/balloon.css/



### Styling Forms



- Accessible Styled Forms https://github.com/scottaohara/a11y_styled_form_controls

- WTF Forms: Nicer Forms eg Radio Buttons with pure CSS https://github.com/mdo/wtf-forms

- Output-inspired form: https://twitter.com/steveschoger/status/1171429842442522625



### Misc Weird fun stuff



- Perspective stairstep text effects https://codepen.io/jamc92/details/KaMLvY (in action: http://tennentbrown.co.nz)

- Duotone blend modes: https://jmperezperez.com/duotone-using-css-blend-modes/

- Decovar Font with Text shadows: https://codepen.io/mandymichael/details/dJZQaz (and other [Variable Fonts by Mandy](https://variablefonts.dev/))

- Drop shadows: `box-shadow: 10px 12px 0.5rem rgba(0,0,0,0.5);`

- Expanding Search buton and text from Ana Tudor [mentioned here](https://dev.to/chriscoyier/learn-about-css-custom-properties-through-clever-uses-of-them-2fjo)

- XKCD chart https://timqian.com/chart.xkcd/

- Image editing/Export to SVG/Object Removal/Photoshop - [Photopea](https://www.photopea.com/)

- Netflix slide-in menu - [Codepen](https://codepen.io/FlorinPop17/pen/KKPBgeQ)

- Peek Href on Links - [2min video](https://www.youtube.com/watch?v=zMZckWl_B4c&feature=youtu.be)

- [Gooey Effect with SVG and Filters](https://css-tricks.com/gooey-effect/)



## Canvas



- Trianglify http://qrohlf.com/trianglify/

- generative artistry https://generativeartistry.com/

- Canvas Cards https://canvas-cards.glitch.me/

- Open Processing https://www.openprocessing.org/



## Page Transitions



- swup https://github.com/swup/swup ([css tricks](https://css-tricks.com/page-transitions-for-everyone/))



## React



### Simple Animation



- https://react-simple-animate.now.sh/

- https://yubabajs.com



### Page transitions



- https://github.com/joerez/react-transitions/



### Nice React Components



- https://react-smooth-range-input.now.sh/

- React Physics Dragger https://react-physics-dragger-demo.netlify.com/

- [React-Designer](http://react-designer.github.io/react-designer/): Easy to configure, lightweight, editable vector graphics in your react components.

- `` from [Folding the DOM](https://www.joshwcomeau.com/posts/folding-the-dom/)

- Spinners

  - https://github.com/tienpham94/react-awesome-spinners

  - https://github.com/davidhu2000/react-spinners

  - https://github.com/JoshK2/react-spinners-css

  - https://github.com/jameygleason/aperitif

  - https://github.com/JoshK2/react-spinners-css



### Toasting



- https://cogoport.github.io/cogo-toast

- https://fkhadra.github.io/react-toastify/



### Gamification



- https://github.com/thedevelobear/react-rewards

- React Confetti https://alampros.github.io/react-confetti/

- React DOM Confetti https://daniel-lundin.github.io/react-dom-confetti/



### Icons



- https://github.com/miukimiu/react-kawaii

- https://react-icons.netlify.com/#/icons/fa (typically fontawesome)