🌊 Wave Snippets

Create gorgeous animated snippets to share with the world.

Go to App

Wave Snippets lets you create beautiful, animated snippets of your code to help you illustrate complex concepts through motion. It allows you to create a series of code steps and describe the code as you go. Once you're finished, a high quality gif and video file is delivered straight to your inbox for you to share with the world!

Features

• 💯 Over 30 supported languages
• 💅 8 different themes to choose from
• 😎 GIF and Video Export
• 🌊 No login necessary
• 🙏 Auth to save your snippet library
• ✏️ Annotate your code with titles and descriptions
• 📸 Customize the appearance of the background and window
• 🔮 4 different physics based animations
• 💰 Line number support
• 📍 99.4% TypeScript
• 💡 Dark mode support

How Does it Work?

1. Add your code step by step.
2. Add titles and descriptions for each step.
3. Customize the look and feel.
4. Export when you're ready.
5. We take care of the animations, GIF building, video encoding, and everything else!

Examples

Roadmap

There's a ton of things I want to add!

• Snippet embeds
• A snippet gallery of the most liked snippets
• Typing effects for a snippet
• Terminal mode effects
• Snippet storage
• One click shares to Twitter and Github
• Export customization

Want to help or add something else? Open an issue.

Contributing

PRs are welcome! If you find a bug or have a feature request please file a Github issue. If you'd like to PR some changes, do the following:

1. Fork this repository to your own GitHub account and then clone it to your local device
2. Go to the repo and run yarn install && yarn bootstrap. This project runs on a particular version of yarn and npm so you will need to have the same versions as mentioned in the package.json. I suggest using nvm and yvm.
3. Setup a Firebase project on your personal account
4. Create a .env.local file and fill in the following fields

REACT_APP_CLOUD_FUNCTIONS_URL
REACT_APP_FIREBASE_API_KEY
REACT_APP_FIREBASE_AUTH_DOMAIN
REACT_APP_FIREBASE_DATABASE_URL
REACT_APP_FIREBASE_PROJECT_ID
REACT_APP_FIREBASE_STORAGE_BUCKET
REACT_APP_FIREBASE_MESSAGING_SENDER_ID
REACT_APP_FIREBASE_APP_ID
REACT_APP_FIREBASE_MEASUREMENT_ID

3. Run the app with yarn dev:client.
4. Make your changes.
5. Submit a PR with your changes.

If you are making changes to the Cloud Functions you will need to create your own Firebase project and deploy it unfortunately. At the time of writing, there is no emulator for Google Storage, and event functions like when a user signs up. Reach out to the maintainer for help setting this up.

A Big Thank You To...

Carbon: Carbon was a big inspiration for me to take this project on an all the snippets made from it has made me and a bunch of other people better developers.

Rodrigo Pombo: The author code surfer and another big inspiration to try to make this work. His open source work is great and saved the day with thinking ahead to break out the core of Code Surfer into its own package for me to stumble upon.

Tungs: The author of Timecut and Timesnap. Who would have guessed how difficult building gifs and videos in the browser would be. I was just about ready to give up on this project until I stumbled across this medium post and decided to give it a try.

Paul Henschel: The author of React Spring. Discovering his library a couple years ago was a gamechanger for seeing what animations on the web could be. This project uses React Spring under the hood to animate between the steps.

Chakra UI: This was my first app using Chakra UI as the design system framework and it was a huge relief. Their TS support is good, components work great, and it never got in my way like most of design system frameworks do. Highly recommend.

Made by Marcus Wood