@mfranz_on @threejs @MixlyDesign Cheers, thanks! 🙂It's a web app/editor.
Once your project is ready you can export it as a standalone WebGL module and add to your website. Or import it directly into Framer.
English
pixm
157 posts
pixm
@PixlyMix
Graphics programmer and ex game developer. I'm on a mission to make WebGL more approachable for designers and devs. Check out @MixlyDesign for more
Присоединился Şubat 2011
223 Подписки97 Подписчики
English
Dear algorithm, show this only to people interested in @threejs and physics simulations?
English
@mfranz_on @threejs It worked! :)
I'm building @MixlyDesign in an attempt to make WebGL more accessible to non-programmers. It's kind of like Figma, but for realtime WebGL animations and interactions.
English
@imadetheseworks Awesome, will do! Thanks for sharing this.
I didn't realize the squircle benefits and I hate the corner issues with rects. I even tried to smooth them with a brute force blur pass but it doesn't look right, and is of course slow.
This looks really promising as an alternative.
English
Fun Tidbit: Liquid Glass is where Apple's squircles really shine!
This is a debug visulization of the curvature for my #FlutterDev shader. You can see that the standard rounded rectangle would create ugly artefacts in the refraction, whereas the squircle is smooth all over.
English
@fidotano_ @framer @MixlyDesign Thankss, and yes, absolutely! It uses WebGL to render, which should run on almost any web browser.
There should be two automatically playing live web browser versions in the link. I wonder if those showed up for you.
They may look like videos, but are interactive animations.
English
English
@fidotano_ @framer @MixlyDesign You mean to the live version? Sure!
It' s live here: final-video-888657.framer.app
The demo reacts to the mouse so the interaction works better with a pc.
It can take a few seconds to load (you get a white screen initially)
English
English
@jh3yy WebGL to the rescue.
Gets difficult with the default web filter
x.com/TeemuVaisanen/…
pixm@PixlyMix
@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
English
hint: this is not just CSS backdrop-filter: blur()
the trained eyes notice all the extra details 🧑🍳
plus, backdrop-filter: url() doesn't have full cross browser support for custom filters, and that's before tackling text displacement 🥲
hello webgl 👋
Ben South@bnj
Alright web devs, it's time to cook
English
@bnj Hear hear!
My WebGL attempt to follow the trend x.com/TeemuVaisanen/…
pixm@PixlyMix
@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
English
@framer @MixlyDesign The page can take a few seconds to load.
It loads quite a few images and compiles multiple projects worth of shaders. Unfortunately I didn't have a chance to add a preloader.
English
@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
English
very nice raytraced cubes by @AndrewEncharm, right inside normal #threejs scene, with physics, done with #glsl. Happy to be part of project.
Kadir@iamkadir
🚀 @Continuous_VC new website! 🚀 🔗continuous.vc Massive shoutout to @granite_digital and our 3D wizard @AndrewEncharm , with the support of @akella — for crafting an incredible #threejs #raytracing #webgl experience. Vote Now @awwwards awwwards.com/sites/continuo…
English
pixm ретвитнул
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
English
Do you have #WebGL effect you'd like to have on your website? I'd be happy to build it for you! (If it's doable)
I'm updating Mixly tutorials and it'd be lovely to build something that web designers want/need 🙂
This mouse cursor was an effect someone was asking on Reddit
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👇
English
pixm ретвитнул
pixm ретвитнул
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
English
Quick and dirty real-time fluted glass in @MixlyDesign
The procedural texture generators are quite handy for this kind of stuff.
#webdesign #webgl
English
pixm ретвитнул
As a longtime Max Payne fan and admirer of the @remedygames I created this web-based tribute demoscene (link in the comments). I’d be grateful if you could check it out, any feedback or a repost would be greatly appreciated. Thank you!
English