Mixly.app

Mixly is a motion composition tool for web designers!
Compose real-time effects for your web sites using a visual editor.

[Mixly.app @MixlyDesign]

WebGL made easy!
Build your #webgl projects in an intuitive #figma -like editor. Add advanced effects, bloom, true variable blur, distortion effect... Once done, export as a small optimized js project to your website, or perhaps directly to #framer
#webdesign #webdev

[Mixly.app @MixlyDesign]

@chalaska This is so true! Platforms, like the web have pretty limited tools for more advanced motion effects. WebGL is there and has tons of potential, but the tools are not designer friendly.
This is why Mixly was originally started. To fill the gap between programming and design.

[Mixly.app @MixlyDesign]

#WWDC25 Liquid glass made in Mixly and running in browser
https://t.co/kMVADm0mbg

All the bells and whistles, refraction, lighting, melting to each other etc.
Zero shader knowledge needed! Just use the editor to build these. Then export to web or directly to @framer

#webgl

[pixm @PixlyMix]

@framer My take https://t.co/tpnHzx9zTy

WebGL, RGB distortion/refraction, light reacts to mouse and picks up ambient color from the background.
Shapes are liquid and melt to each other. Tunable variable blur for edges. Editable in Framer.

Made with @MixlyDesign editor that I'm building

[Mixly.app @MixlyDesign]

Ryannnnn on #Framer Discord needed a progress bar effect.

Here's the version we built for him. It's fully editable inside Framer, reacts to scroll position and animates when it becomes visible.

Try out the free template. Reply if you want some other #WebGL effect on your site

[Mixly.app @MixlyDesign]

Tutorial
https://t.co/DgqtRSUurv

[Mixly.app @MixlyDesign]

Let's build a cool #WebGL color reveal glass effect to your website. No code required!
The video explains how to build the project in the editor and export it to #Framer. Works on normal HTML websites as well.

Check the full Youtube video below👇
#WebDevelopment

[Mixly.app @MixlyDesign]

Tutorial:
https://t.co/m9LRqy1OF0

[Mixly.app @MixlyDesign]

Want a cool #WebGL mouse cursor effects on your website?
Here's a video tutorial how to make them in Mixly and then use it in your #Framer project.

No coding knowledge needed! :)
Check the link below👇

[Mixly.app @MixlyDesign]

Quick Mixly test project running in #Framer.
Mouse follow helper and HTML element matching makes it easy to build this kind interactive things.

#webdev #webdesign #webgl

[Mixly.app @MixlyDesign]

The video is a quick ~5 min demonstration. It adds a bloom, distortion and frost blur on a <div> element inside #framer. We didn't spend weeks to write an optimized glsl code and low level webgl to get the result.
It was built in Mixly, exported, and used in #framer

~5 mins

[Mixly.app @MixlyDesign]

Mixly is to be the bridge between what's possible in #WebGL and traditional web development.
It is the no-code glue between both of those worlds: Build the effect you need, and then use it on your normal HTML, or tools like #framer, #webflow, #wix, etc.
#webdesign #webdev

[Mixly.app @MixlyDesign]

@framer @learnframer This was just a quick 5 min demo.
Imagine having the power of WebGL and advanced effects without having to write shader code. But still being able to use familiar tools like Html or Framer to build the site itself.

Best of both worlds! Mixly is here to enable that

[Mixly.app @MixlyDesign]

WebGL made easy!
Build your #webgl projects in an intuitive #figma -like editor. Add advanced effects, bloom, true variable blur, distortion effect... Once done, export as a small optimized js project to your website, or perhaps directly to #framer
#webdesign #webdev

[Mixly.app @MixlyDesign]

@framer @learnframer Mixly may interest you!
Mixly exports directly into #framer as a custom code component. Copy from Mixly and then paste into Framer custom code.
We even have html matching, so Mixly can add a WebGL effect on top of Framer elements like in the quick video demo

[pixm @PixlyMix]

Quick and dirty real-time fluted glass in @MixlyDesign
The procedural texture generators are quite handy for this kind of stuff.

#webdesign #webgl

[pixm @PixlyMix]

WIP abstract background WebGL element for Mixly's website. Uses progressive blur, liquid shapes and distortion filters.
The effect is available as a template if you want to have something similar :)
These are super fast to pull off with the visual editor.

[pixm @PixlyMix]

I'm a sucker for these WebGL mouse interactions! Made using the animation editor I built: @MixlyDesign ✨

↓↓ Live version below ↓↓

#WebDesign #creativecoding

[Mixly.app @MixlyDesign]

@H_perigo Really nice! Are the plants actual 3d models or images? Looks very realistic with the lighting.

[Mixly.app @MixlyDesign]

Silly little example with spherical distortion filter.

#webgl #webdesign

[Mixly.app @MixlyDesign]

@LayersKeyframes @hieuvudesign This looks great. Love the anticipation and pacing! :)