Creative Front-End Developer: WebGL, SVG, Canvas, GSAP, Three.js, Shaders, d3.js, etc. Open to freelance projects (I delete this line when unavailable)
It's October, my dudes!
I've redone one of my fav old works. The updates:
- transparent background
- no extra libs so just <15kb of code
- parameters that are easy to change without going through the shader
Live demo & source code:
Hosted on
@CodePen
Rube Goldberg HTML form!
Tbh I spent way too much time on this one haha. As fun as it is useless :)
Live demo & source code:
Hosted on
@CodePen
Made with
#GSAP
@greensock
If I had to choose one thing to do, it would be just coding WebGL flowers
It's a GLSL shader, a full-screen plane, and 2 render targets to swap on each frame
Live demo & source code:
Made with
@threejs
Hosted on
@CodePen
Special thanks to
@bookofshaders
This glass configurator has no custom shaders or geometries. Just MeshPhysicalMaterial and a bunch of standard geometries with rendering order set manually. Not 100% realistic but super simple
Live demo & source code:
Made with
@threejs
Hosted on
@CodePen
Another minimal JS animation here!
Interactive (and damn satisfying) cursor animation made with only 3kb of pure JS. Not sure how to use it yet – maybe as a base for some shader?.. Anyway, it's fun already :)
Live demo & source code:
Hosted on
@CodePen
What's the most common project in my Three.js practice? Spinning globe, of course! I've made quite a few of them lol
Live demo & source code:
Made with
@threejs
and
#gsap
(
@greensock
)
Hosted on
@CodePen
If you've ever faced this, you know what I'm talking about. It's quite a challenge to build a gradient along an SVG path. Here is a GSAP solution.
Final demo:
Tutorial:
Made with
@greensock
, hosed on
@CodePen
and
@ThePracticalDev
New
#WebGL
pattern!
A Voronoi diagram (love it) with eyes calculated over the polar coordinates of each cell. No images or graphic libs here, just a
#GLSL
shader wrapped with JS
Live demo & source code:
Hosted on
@CodePen
Special thx to
@bookofshaders
Evolving the idea of on-scroll
#WebGL
fire, and it's coming together🤞
Not the most visually realistic, but great performance, small size, and easy to use
Live demo & source code:
Made with GSAP ScrollTrigger
@greensock
Hosted on
@CodePen
Everybody likes
#gooey
, gooey is fun
Here is a responsive, cross-browser WebGL gooey navbar. It's done with JS & GLSL shader because SVG/CSS things still don't really work in Safari
Live demo & source code:
Made with GSAP (
@greensock
)
Hosted on
@CodePen
The new globe animation with interactive SVG map over it (since we all need spinning globes, ha)
I had a few performance challenges with dynamic texture. Tutorial may be?
Live demo & source code:
Made with
@threejs
and GSAP
@greensock
Hosted on
@CodePen
Learning the basic walk cycle animation and having fun exploring its
#GSAP
implementation
Live demo & source code:
Made with GSAP (
@greensock
)
Hosted on
@CodePen
In 2022 I published a
@codrops
tutorial on how to code an on-scroll folding cardboard box
Since then, I’ve made a few commercial projects with box configurators, and it's always so fun!
I'm using
@threejs
&
@greensock
, sometimes r3f (on the video)
Packaging people, call me! 📞
✏️ To see if the XYZ coordinate is inside the closed mesh, we can just cast a ray from XYZ in any direction and check if the number of intersections is odd
Full explanation in the thread 🧵
Live demo & source code:
Made with
@threejs
Hosted on
@CodePen
It's slime time!
On-scroll gooey overlay based on
#GLSL
shader and controlled with
#GSAP
#ScrollTrigger
. Easy to customise and (I'm proud to say it 😎) responsive
Live demo & source code:
Made with GSAP ScrollTrigger
@greensock
Hosted on
@CodePen
Here's a
#glb
laptop model, optimised to 642KB and rendered with
@threejs
It's all set to be animated
+ comes with a screen plane to map *any* texture on
+ some
#GSAP
(
@greensock
) timelines I created already
Live demo & source code:
Hosted on
@CodePen
New favorite noise function!
I had lots of fun tweaking the
@zozuar
shader and ended up using it as a semi-transparent overlay
With color changing on scroll and slight cursor response, the total code size is still <9 kb 🫣
Live demo & source code:
WebGL experiment: fBm noise in polar coordinates It's done with pure JS/GLSL (so ~10kb of code in total) but I should probably port the shader to
#threejs
for more hype haha
Live demo & source code:
Hosted on
@CodePen
Special thanks to
@bookofshaders
Back to the flowers business!🌺
Exploring aquarelle style by playing with Simplex noise today. And absolutely love the results tbh
Live demo & source code:
Made with
@threejs
Hosted on
@CodePen
As always, cheers to
@bookofshaders
#webgl
#shader
#glsl
Go home apple, you're drunk
The mesh and texture here are loaded as .glb. Then, 3d Perlin noise is applied to the mesh geometry and normals get recalculated
Live demo & source code:
Apple model by
@sanforgestudio
Made with
@threejs
Hosted on
@CodePen
Ever thought of burning some annoying pop-ups to hell? I made a sketch to apply a GLSL shader to the DOM element to do so :)
Live demo & source code:
Made with
@threejs
Hosted on
@CodePen
Special thanks to
@bookofshaders
Feel free to ask questions!
Playing with 3D physics today
In my taste, the page size is way too big. But it's crazy how easy simulations like this can be done (quick explanation in thread)
Live demo & source code:
Made with
@threejs
and
#cannones
by
@pmndrs
Hosted on
@CodePen
I made a fun gooey (blobby? 🤔) button with
#WebGL
As before, it's a tiny piece of vanilla JS + GLSL code. Thinking about wrapping it into a lib or maybe Framer component?
Live demo & source code:
Hosted on
@CodePen
You people like this cursor + it's actually easy to code + it's easy to turn into some other beauty...
so I thought it would be good to have a step-by-step tutorial
Tutorial:
Original demo:
Hosted on
@CodePen
and
@ThePracticalDev
Another minimal JS animation here!
Interactive (and damn satisfying) cursor animation made with only 3kb of pure JS. Not sure how to use it yet – maybe as a base for some shader?.. Anyway, it's fun already :)
Live demo & source code:
Hosted on
@CodePen
One more addition to the WebGL patterns collection: lighten tiles that respond to the cursor + a couple of parameters to set up
Pure JS / GLSL code (no extra libs), minimal code size and very good performance
Live demo & source code:
Hosted on
@CodePen
Another re-do of an old work. Before we rolled the dice and checked the top side of each one. Now you can just preset the final result, my sneaky friends 😏
Live demo & source code:
Made with
@threejs
and cannon-es
Hosted on
@CodePen
There're few other
GLSL fire shader based on Simplex noise with a static SVG overlay. No interactivity this time, just sketching on Saturday night ¯\_(ツ)_/¯
Live demo & source code:
Made with
@threejs
Hosted on
@CodePen
Flowerssss (this time, interactive pattern)
In a nutshell, it's a Voronoi diagram ➡️ polar coordinates within each cell ➡️ flower shape made using distance fields
Live demo & source code:
Hosted on
@CodePen
Couldn't happen without
@bookofshaders
It's watermelon season here 🍉so I made a watermelon with GLSL
This new WebGL toy was just a fragment shader with a couple of params to tweak. No JS libs except lil-gui so the total code size is around 12kb :)
Live demo & source code:
Hosted on
@CodePen
Can you guess what this little pleasing thing is?
Just a TorusKnotGeometry(1, 0.4, 200, 50, 2, 1) with MeshNormalMaterial() spinning around the axis with OrbitControls. Linear rotation only!
Live demo & source code:
Made with
@threejs
Hosted on
@CodePen
"Gradients Along SVG Path" by Ksenia Kondrashova
(You can't set a gradient-along-a-<path> in SVG really, so instead GSAP is cleverly used here to set <circle>s along a path which can simulate that gradient effect, and much more!)
"LIQUID CONTENT REVEAL" by Ksenia Kondrashova
(So cool! In the video, I fork it and add "Knobs" to adjust some of the const values that make it all work, so they can be adjusted right from the preview itself.)
This year I had the pleasure of creating some SVG animations for the amazing
@TimescaleDB
team. Check out their new website to see this waves and other animations live!
And of course, cheers to
@greensock
to be my fav tool for SVG animations :)
Messing around with jelly shapes 👀
The blobs are moving around randomly and reacting to each other and the cursor speed. The animation is done with GLSL shaders and JS. A total code size of about 15kb
Live demo & source code:
Hosted on
@CodePen
Minimal wave animation on HTML5 Canvas - only 2kb (!) of vanilla JS code
All we have here is a linear interpolation from one random sine wave to the next one. Check out the code and feel free to ask questions!
Live demo & source code:
Hosted on
@CodePen
Interactive gears!
Design and development work I did for one of my oldest clients (hey Justin!)
Pure
#JS
on
#canvas
, 9kb total code size, although no codepen link for this one
I was smart enough to delete this tweet (but thank you for such a nice feedback <3 )
Sketch
#1
: On-Scroll WebGL Fire
GLSL shader based on Simplex noise rendered with
@threejs
and animated by
@greensock
ScrollTrigger
Hosted on
@CodePen
Quick video tutorial on a tiny (1.5kb!) SVG animation. It gives the illusion of blobs morphing randomly but it's much easier than it seems
Text version:
Live demo & source code:
Youtube:
Hosted on
@CodePen
Roll the dice on your next dev project with this in-depth tutorial on creating a
#threejs
3D dice roller! Follow along with
@uuuuuulala
for a step-by-step guide to bring your game to life 🎲🎉
#javascript
#coding
#frontenddev
Thank you, Ksenia! 🙏💙
The last visual to publish in this thread. This time we have mouse repel effect instead of scroll bind + controls to play with color and speed.
Sketch
#3
: Interactive Abstract WebGL Noise
Made with
@threejs
Hosted on
@CodePen
Look mom they call me artist!
The eye pattern shader was selected to be presented at both
#gitnation
and
#c3fest
events this year! 🥳
You can see it live in Amsterdam in June (and it may look back on you lol)
Shader demo:
Event:
New
#WebGL
pattern!
A Voronoi diagram (love it) with eyes calculated over the polar coordinates of each cell. No images or graphic libs here, just a
#GLSL
shader wrapped with JS
Live demo & source code:
Hosted on
@CodePen
Special thx to
@bookofshaders
Following the Fire 🔥 animation with Water 🌊shader. Same GLSL noise with different parameters.
Sketch
#2
: On-Scroll WebGL Water
Made with
@threejs
and
@greensock
Hosted on
@CodePen
The tiniest animation I've ever created: only 750 bytes (!) to define shapes, colours and motion
There is no practical benefit to such a minimal size. But it's still dope
Source code and demo:
Hosted on
@CodePen
#svg
#svganimation
Today is the first day of the
@thejsnation
Conference in Amsterdam. I'm not attending the event in person this year, but my 🌸WebGL Flower Cursor🌸 is!
This lovely piece was selected as part of the
#JSNation
digital exhibition. If you spot it on the screen today, let me know!
Alright my dear 12 followers. It's time to use this account for self-promotion. I make JavaScript beauties for money and I'm open to freelance work. Gonna showcase some projects here, please don't hate me
I didn't mention it in the original tweet, but you guys might find these 2 links useful:
1) Super detailed tutorial on how this project was developed (cheers to
@codrops
):
2) The codepen with a single dice and params to play with:
#11
Satisfying curly cursor (3kb of vanilla JS on canvas)
Such a great feeling to be 11th haha
But seriously, I'm super happy this one was so greatly recognized by the community
Thank you, everybody -`♡´-
@th_ebenezer
@CodePen
@bookofshaders
Thank youuuu, it's really nice to hear ^^
I think I'm forever traumatised with my past experience of programming for MCUs aka "fit 16kb of program memory or go fck yourself"
@AntonyAdhiban
@threejs
@greensock
@CodePen
There is no compression, just clean up over the meshes and right export settings 😉
I'll do a tutorial, seems there is a demand (which makes me very happy)
@keaukraine
@CodePen
@bookofshaders
Really? The eye itself is literally a logo of shadertoy + there is an iconic tutorial by
@iquilezles
that helped many people to get into shaders :) But I never saw it to be used with voronoi or something similar.. I'm curious nw! Please lmk if you find it
#95
: WebGL Flower Cursor
#83
WebGL On-Click Flowers
I made these two with
#threejs
but plan to rewrite them with pure JS, optimize the code, and add GUI controls in 2024. Stay tuned!
⬇️
#49
WebGL Ghost Cursor (2023 update)
This is a remake of the Ghost I made back in 2022. The code has been optimized a lot + the new ghost is even cuter :)
It's actually a lot of joy to see how many things I can improve in just a year
⬇️
► the outer box is created using Three.js EdgesGeometry + 6 cannon-es planes
► in the physics world, we set gravity force and default material properties such as friction and restitution. On each frame, position and rotation of "physical" boxes is applied to visible objects
⬇️
@ivanpopelyshev
@zozuar
Yep it’s MIT license so you can do whatever
But also wtf man? Voluntarily having those emoji next to your name in 2024? What kind of statement it is?
Saying as Russian to Russian, go to hell! Not interested in any collaboration whatsoever
#54
3D Globe Three.js with location pointer
Quite a useful pen, it appears :) I saw some really nice visuals based on my Globe. Thanks for sharing and mentioning me!
⬇️