What is Mixly?

Most of today's websites are built using good old HTML and CSS, which have worked phenomenally well and will continue to do so. Modern browsers support complex layouts and basic animated content. HTML and CSS provide great tools for arranging rectangular shapes into clean, readable content, which defines most of the web today.

However, traditional tools fall short when you want to build graphics that go beyond the rectangles in a layout, or when you want to create any kind of more complex animation or motion. There's a stark contrast between what's possible, for example, in the film or advertising industries and web graphics.

Traditionally, for any complex visual effect, you'd have to switch to WebGL. These technologies allow developers to harness the full power of GPUs. WebGL frees you from the DOM/HTML model and lets you go wild. Pretty much anything that can't be done with HTML markup can be done in WebGL.

However, there's a good reason why all those cool WebGL visuals are reserved for very few agencies and Awwwards winners: Making anything with WebGL content is hard. Extremely hard.

WebGL in its pure form requires you to understand intimate, low-level hardware details. It's a completely different world from what you're used to seeing when you work on normal web projects. Even if you get started, you're quickly bogged down by all the low-level details.

Mastering real-time graphics takes years. Understanding efficient CPU-to-GPU data management, or learning a completely new GLSL shading language just to render something on the screen is not for everyone—especially not for those more graphics design-minded.

WebGL in its current form is limited to those studios and agencies who can afford an expensive graphics programmer on their team. Mixly is on a mission to fix this!

Graphic design should be about creativity—not figuring out how to make something appear on screen!

Mixly aims to break this barrier between WebGL and web designers. Using WebGL and harnessing GPU power on the web shouldn't require you to know anything about shaders, transformation matrices, or 3D libraries. These are all barriers to creativity.

The idea of Mixly is to build an approachable, designer-first editor that looks and feels familiar to anyone who has worked with design tools before!

The tool aims to be the Figma or After Effects of interactive web content. It enables you to bring your vision to life using an intuitive web-based editor. Being a visual tool allows you to experiment. There's no back-and-forth between graphics programmer and designer.

What you see in the editor is what you'll end up with in the final product.

The Mixly editor looks unremarkable on purpose. It attempts to take the best parts of existing software. And therefore it looks and feels similar to the tools you're already using every day, like Figma, After Effects, Premiere, and Photoshop. The point is to hide all the extreme complexities of WebGL, shaders, and such from the designer. So you as a designer can concentrate on the content!

You build a project, see it in real-time in the editor, and end up with the same thing running on your website. That's it.

Once you're done editing, you export the project. Exported projects can be integrated into a website with a couple of lines of code. Alternatively, we offer a preview publish option. The most common method is copying an iFrame to quickly test your project.

We also offer an experimental Framer component that you can simply copy and paste into your project. In Framer, Mixly shows up as just another visual element, similar to an image

Mixly optimizes your project size as part of the export process. The exported project is first analyzed, and then an optimized runtime player for that particular project is built. This allows us to strip out any extra filters that are not being used. If you're familiar with JavaScript tree-shaking, think of this as a similar process tailored for each project.

Mixly is not limited to animation that runs linearly from A to B. Web content is inherently interactive, and users expect dynamic responses to their actions. Linear animation often doesn't meet these expectations.

This is why Mixly was designed from the ground up to support interactivity. It offers a no-code, node-based tool for building interactions.

You can already do tons with it. But the goal is to expand it significantly over time. There are exciting things planned in this regard. For example, we are aiming to have a no-code After Effects expression system in the future. You'll be able to drive parameters through expressions instead of traditional keyframes!

We are open to early testers. You can already sign up for free and try out the tool!

Mixly is a new tool in town, so any feedback is welcome. Once you've signed up, you can join our Discord to give your feedback, report bugs, ask for features, or just get help if you get stuck. All the examples on this post are available as quick templates! Feel free to try them out.

Mixly is built for you! Joining early is a great opportunity to have a significant impact on its future direction.