Mixly.app

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

@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.

Learn motion design. Products with motion always perform better. It does two things: First, it creates meaning, draws attention to the right things, and explains concepts better than static screens. Second, it adds delight. That dopamine hit makes users want to come back. If you're not learning it, time to start considering it.

#WWDC25 Liquid glass made in Mixly and running in browser final-video-888657.framer.app 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

@framer My take final-video-888657.framer.app 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

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

Tutorial youtu.be/-JdzUWxjFJY?si…

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

Tutorial: youtu.be/eVE5PkV_xoo?si…

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👇

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

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 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

@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

@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

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

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

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.

I'm a sucker for these WebGL mouse interactions! Made using the animation editor I built: @MixlyDesign ✨ ↓↓ Live version below ↓↓ #WebDesign #creativecoding

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

It has been a while since worked on a webgl project so I decided to do a little demo, hope you all enjoy! #threejs #creativecoding #webgl #graphicsprogramming hperigo.github.io/monstera

Silly little example with spherical distortion filter. #webgl #webdesign

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

Test.52 🧪 by @hieuvudesign