Creative code: animation, 3D, and generative tools

Creative code on the web covers more ground than one tool can: animated 3D scenes, SVG animation, ASCII and dithering effects, and music written as code in a browser tab. This set has eight picks across those areas, and each one links to its own page in the directory.

Three.js is the 3D anchor, Annnimate and Ripplix cover motion, and Strudel handles the music. The rest are learning material, a demo showcase and one outlier for building editors.

3D and visual effects

Three.js is a JavaScript library for creating and displaying animated 3D graphics on the web using WebGL. It takes care of the low-level WebGL details so you can build scenes out of objects, lighting and textures. Since it is a library, you write the scene in code.

Efecto works on the output side. It applies ASCII art and dithering effects to 3D models, videos and images in real time, and the listing says it is free. It also describes itself as LLM-ready, so it is aimed at AI projects as well as plain creative ones.

If you would rather see what people have built than read docs, Codrops Creative Hub is a growing showcase of open source web demos, design experiments and interactive concepts. It lists GSAP and Three.js as platforms, and it mixes original work from Codrops contributors with standout projects from around the web. Open source means you can read how each demo was put together.

Animation for the web

Interactive SVG Animations is a mini-course by Nanda Syahrasyad, and it is interactive, so you work through the ideas hands-on. It is the pick here for learning how SVG animation works before reaching for a library.

Ripplix is described as a modern motion and animation library for building smooth, high-performance UI experiences in modern web applications. It is tagged as a gallery in the directory, so expect to browse examples as well as install something.

Annnimate sits at the other end of the effort scale. It is listed for Webflow, and the pitch is animations you can add to a site in seconds with no coding needed. The "award-winning" label comes from Annnimate's own description of what it makes.

[Corey: which of these animation options would you reach for first on a client site, and why?]

Generative and live-coded music

Strudel REPL is a music live coding environment that runs in the browser. It ports the TidalCycles pattern language to JavaScript, so you type patterns and hear them.

It is a different kind of creative code from the visual picks above. The output is audio, and the language is built around patterns rather than frames or scenes.

Building visual editors

Puck is the outlier. It is a library for developers who want to build visual editing experiences into their own React applications. That makes it relevant if the creative thing you are making is a page editor or a content tool, rather than an animation or a scene.

[Corey: where does Puck fit for you in a creative code workflow?]

FAQ

What is the best tool for 3D on the web?

Of these eight, Three.js is the one built for it. It is a JavaScript library that uses WebGL to display animated 3D graphics, with support for objects, lighting and textures.

Can I add web animation without writing code?

Annnimate is listed for Webflow and describes itself as needing no coding. If you do want to write the animation, Interactive SVG Animations and Ripplix are the two to look at.

Can I make music with code in the browser?

Yes. Strudel REPL is a browser-based live coding environment that brings the TidalCycles pattern language to JavaScript.

Where can I find creative code examples to learn from?

Codrops Creative Hub collects open source demos and design experiments, and it lists GSAP and Three.js as platforms.