spark-joy v1.0.0

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
• Louisa Barret on Color
• Erik Kennedy on Color/HSB

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://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://css-tricks.com/

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

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)
• Drop shadows: box-shadow: 10px 12px 0.5rem rgba(0,0,0,0.5);
• Expanding Search buton and text from Ana Tudor mentioned here
• XKCD chart https://timqian.com/chart.xkcd/
• Image editing/Export to SVG/Object Removal/Photoshop - Photopea
• Netflix slide-in menu - Codepen
• Peek Href on Links - 2min video
• Gooey Effect with SVG and Filters

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)

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: Easy to configure, lightweight, editable vector graphics in your react components.
• <Foldable> from 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)