akella
@akella
Followers
21K
Following
9K
Media
1K
Statuses
14K
Yuri Artiukh(he) πΊπ¦,everything frontend: html/css/webgl, livecoding on Sundays https://t.co/19De0s22J3
Joined November 2007
πͺ CSS Blending Decompilation πͺ.Here is how @linear created a cool animated component with 10 (!) blending functions and just a couple lines of JS. π¨π»βπ»Codepen to play: Enjoy original at #css #animation #linear
20
167
1K
#threejsbits Did you know #threejs actually has a lot of different RENDERERS, not only WebGLRenderer. Most underestimated is CSS3DRenderer, which renders, well, HTML π
. Here is how it works and what is possible. 1/6 β¬οΈ
14
77
931
πͺ WebGL breakdownπͺ.Use @threejs and shaders to create amazing transition from website. Made by @yuichiroharaiEN from @homuculu agency. 41 seconds tutorial β‘οΈ. There is a text version too:
8
81
694
β¨WebGL reconstructionβ¨. Magical transparent video technique. Featuring recent @awwwards SOTD by amazing @active_theory. How to create it with @threejs and shaders. 40 seconds tutorial. β‘οΈ. Also enjoy the original website: π₯
7
65
594
14
55
530
π§βπ» video transparency tutorial π§βπ». How to create and compress transparent videos for all browsers. How to use them in WebGL (to compress even more). How to avoid transparent videos.
2
47
474
π€Ήπ½ββοΈ WebGL recipeπ€Ήπ½ββοΈ.Use #threejs and shaders to create cool curvy carousel!.Basic shader knowledge required. 36 seconds tutorial! β‘οΈ. π on @CodePen . Inspired by @zander_supafast & @jh3yy tweets π
8
57
473
new stream: recreating beautiful slider from with #pixijs, bezier curves and shaders. #allyourhtml
5
31
399
thank you for support! β€οΈπ.1) My family is safe, they are in occupied 8 years ago Crimea π€.2) I'm in Kyiv, alive, volunteer-driver, help to evacuate people and deliver stuff. Staying. 3) Waking up with artillery/bombs is a new normal now. 4) Support
22
37
357
new stream, cutting and animating plane with #threejs, constructive geometry and shaders, #allyourhtml
3
28
360
when i just started learning graphics, this story happened to me, with love, math, differential equations and loops, hope you will like it, inspired by @beesandbombs gif, text:
5
34
362
i learn from beautiful websites everyday, check out this one .β³ by it is the smoothest scrolling animation i ever saw. Want to know how? .1500 images sequence. Yes, 1500!!1π€― But hey, it works! Now you know that too.
4
25
332
#threejsbits Did you know #threejs has a module to add hover & click events to 3D objects β just like in the DOM? .Itβs called InteractiveGroup, and itβs super easy to use. Mouse events and even XR interactions β all handled.
7
26
346
new stream: supernice gradients, lava lamp effect with #threejs and just a vertex shader #allyourhtml #s05e12
5
19
317
new stream: recreating beautiful by @RefokusAgency, #threejs instancing, baked AO, and using fragment shader for vertex animation
5
18
285
π¦ CSS animation π¦.I love this old crazy unobvious idea from Google. CSS animation with a little JS preparation, and no WebGL. Codepen: Original preserved here: (click gauntlet image).#css #transition #google
3
32
281
new stream, animating triangles with #threejs, with shadows, inspired by but turned out something different π
DEMO: VIDEO: #allyourhtml
5
24
276
1/14, here is a short thread with coding techniques you can learn from recent beautiful @awwwards #SOTD by @makemepulse: CSS, WebGL, KTX2, Shaders, Image formats
6
39
279
#threejs doodle, inspired by @matthen2 and @etiennejcb tweets. I just can't walk past anything with exponent. π
5
18
261
inspired by todays @beesandbombs gif, and something i think i've seen some time ago #threejs #canvassketch,
0
30
237
ππ»you can now claim this tank with sunflowersπ»π, i made it interactive NFT, 1 tez, 100% goes to support Ukraine, or just enjoy demo. Made with @threejs @Polycam3D
5
30
234
new stream, enhanced DOM slider for "encoding files" from by @NevFlynn with some nice #threejs particle techniques #allyourhtml
4
22
236
new stream, ascii effect with WebGPU, TSL and #threejs, inspired by @luluixixix artistic gifs
1
18
237
new stream, cool reflective grid with energy waves from by @uns__nstudio, created with @threejs and shaders #allyourhtml
3
14
217
diving into #reactspring, so i did a demo using react-three-fiber and #threejs, thanks to @0xca0a and community for help! It's amazing what is possible with such concise code now. Push red ball.
3
23
216
new stream: circlular loop of interactive particles with #threejs, shaders and FBO simulation technique, from by @wearekuva & @Toy_Fight video:
3
20
220
i got inspired by @bruno_simon mesmerising #photogrammetry and tried it myself near my home #rusanivka, while we have poplar fluff #threejs #3dfzephyr
7
20
213
new stream, recreating supercool checkerboard transition effect for text from by @Immersive_g with @threejs glsl and MSDF. #allyourhtml
1
15
208
ΠΊΠ°ΠΊ Ρ ΡΠ»ΡΡΠ°Ρ ΠΌΡΠ·ΡΠΊΡ Π²ΠΎ Π²ΡΠ΅ΠΌΡ ΡΠ°Π±ΠΎΡΡ: ΠΎΠ΄Π΅Π» Π½Π°ΡΡΠ½ΠΈΠΊΠΈ ΡΡ
ΠΎΠ΄Ρ, ΠΈ ΡΠΏΡΡΡΡ ΡΡΠΈ ΡΠ°ΡΠ° ΡΠ°Π±ΠΎΡΡ ΠΏΠΎΠ½ΡΠ» ΡΡΠΎ Π½Π΅ Π²ΠΊΠ»ΡΡΠΈΠ» ΠΌΡΠ·ΡΠΊΡ.
20
19
208
i am safe, in Kyiv, but this is fucking insane and very very sad. If you want to support Ukraine and its army there is a fund we all trust
18
32
202
#threejsbits Did you know #threejs supports multiple types of real-time shadows?.β’ Basic shadow maps.β’ PCFSoftShadowMap (default blur).β’ VSMShadowMap (Variance).β’ And even Cascaded Shadow Maps for huge scenes!
3
13
209
#threejsbits Did you know #threejs has built-in environment lighting setups β with _no_ HDR/EXR files needed? .Normally youβd need heavy HDR textures, but for prototyping or debugging these are perfect. β¬οΈ
6
14
202
new stream: decompiling beautiful by @oblioio studio, and replicating it one more time with post-processing and #threejs #allyourhtml /cc @UrSchweinKaraus
5
25
173
1/15 here is some interesting WebGL/frontend stuff about by @active_theory, or, basically, how to create and multiply Adam Driver π€·ββοΈ π§΅
2
14
172
i hope all my friends in Belarus will be alright! #belarus #belarusianlivesmatter #ΠΠΈΠ²Π΅ΠΠ΅Π»Π°ΡΡΡΡ #threejs #canvassketch
1
19
170
1/n what we can learn from today's @awwwards site of the day: beautiful by @Dogstudio & @DeptAgency, WebGL tricks, html5 video tech, particles, images, curves β¬οΈ
4
20
172
new stream, recreating amazing brain animation from by @uns__nstudio with React Three Fiber and some shaders #r3f #threejs
6
10
165
3
9
165