Ksenia Kondrashova's banner
Ksenia Kondrashova's profile picture

Ksenia Kondrashova

@uuuuuulala8,788 subscribers

making shaders for @paper

Shorts

Sometimes we also wonder how people do things in Paper haha Not quite a tutorial but here is what I did: - grabbed a screenshot from video - asked chatgpt to get me a b/w svg image with frame and dots - saved the pic - opened the Heatmap shader on - replaced the default input shape with my svg - tweaked the colors It's not accurate but gives you the idea!

Sometimes we also wonder how people do things in Paper haha Not quite a tutorial but here is what I did: - grabbed a screenshot from video - asked chatgpt to get me a b/w svg image with frame and dots - saved the pic - opened the Heatmap shader on - replaced the default input shape with my svg - tweaked the colors It's not accurate but gives you the idea!

236,907 Aufrufe

I'm making a bunch of fun things for Paper these days - sharing soon But for now, here’s a little toy we made to give your logo that Apple-style look! live: repo: #AppleLaunch

I'm making a bunch of fun things for Paper these days - sharing soon But for now, here’s a little toy we made to give your logo that Apple-style look! live: repo: #AppleLaunch

217,061 Aufrufe

Paper blog is here! We explore retro print aesthetics with our new HalftoneCMYK shader. I break down the tech tricks behind it, and Agu Seguí shows how to use it Plenty of interactive illustrations (and plenty of banana pictures). Enjoy! read: paper app: shader docs:

Paper blog is here! We explore retro print aesthetics with our new HalftoneCMYK shader. I break down the tech tricks behind it, and Agu Seguí shows how to use it Plenty of interactive illustrations (and plenty of banana pictures). Enjoy! read: paper app: shader docs:

39,345 Aufrufe

It’s time to start sharing the shaders I’ve been making for Paper! DotOrbit is the first one shaders demo & docs: paper: If you run into a bug or have a suggestion, feel free to dm

It’s time to start sharing the shaders I’ve been making for Paper! DotOrbit is the first one shaders demo & docs: paper: If you run into a bug or have a suggestion, feel free to dm

51,068 Aufrufe

Little Christmas tutorial🎄 Here's how you make all those liquid metal buttons: 1. open 2. choose one of the predefined shapes or upload your own image 3. polish the look using the sliders 4. copy it as a React component docs:

Little Christmas tutorial🎄 Here's how you make all those liquid metal buttons: 1. open 2. choose one of the predefined shapes or upload your own image 3. polish the look using the sliders 4. copy it as a React component docs:

40,605 Aufrufe

Oops, we did it again! Turn your logo into an Apple-like animation, play with controls, export as a React component or video file Try Paper, no invite needed🤫 live: all paper shaders: #AppleLaunch

Oops, we did it again! Turn your logo into an Apple-like animation, play with controls, export as a React component or video file Try Paper, no invite needed🤫 live: all paper shaders: #AppleLaunch

46,102 Aufrufe

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

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

99,480 Aufrufe

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.IO Made with #GSAP GSAP

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.IO Made with #GSAP GSAP

65,318 Aufrufe

Voronoi diagram with perfect cell boundaries <Voronoi /> is another React component from our Paper-design/shaders package All glory to inigo quilez for original algo (such a big fan I am!) shaders demo & docs: paper app:

Voronoi diagram with perfect cell boundaries <Voronoi /> is another React component from our Paper-design/shaders package All glory to inigo quilez for original algo (such a big fan I am!) shaders demo & docs: paper app:

25,459 Aufrufe

I wanted to create a broken glass effect with WebGL for a long time! Here it is: interactive, lightweight (around 10KB of GLSL + vanilla JS), and easy to customise (find more controls on codepen) Live demo & source code: Hosted on CodePen.IO

I wanted to create a broken glass effect with WebGL for a long time! Here it is: interactive, lightweight (around 10KB of GLSL + vanilla JS), and easy to customise (find more controls on codepen) Live demo & source code: Hosted on CodePen.IO

43,711 Aufrufe

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 Three.js Hosted on CodePen.IO

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 Three.js Hosted on CodePen.IO

59,771 Aufrufe

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

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

52,889 Aufrufe

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 Three.js Hosted on CodePen.IO Special thanks to The Book of Shaders

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 Three.js Hosted on CodePen.IO Special thanks to The Book of Shaders

51,837 Aufrufe

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.IO Special thx to The Book of Shaders

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.IO Special thx to The Book of Shaders

35,396 Aufrufe

Draw GLSL flowers with your cursor! 🌺 One full-screen plane, two render targets, and a bit of shader magic Live demo & source code: Made with Three.js Hosted on CodePen.IO Special thanks to The Book of Shaders #webgl #glsl #threejs #shader #drawingtool

Draw GLSL flowers with your cursor! 🌺 One full-screen plane, two render targets, and a bit of shader magic Live demo & source code: Made with Three.js Hosted on CodePen.IO Special thanks to The Book of Shaders #webgl #glsl #threejs #shader #drawingtool

28,620 Aufrufe

New favorite noise function! I had lots of fun tweaking the yonatan 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: Original algorithm:

New favorite noise function! I had lots of fun tweaking the yonatan 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: Original algorithm:

20,374 Aufrufe

GLSL fire shader based on Simplex noise with a static SVG overlay. No interactivity this time, just sketching on Saturday night ¯\_(ツ)_/¯ Live demo &amp; source code: Made with Three.js Hosted on CodePen.IO

GLSL fire shader based on Simplex noise with a static SVG overlay. No interactivity this time, just sketching on Saturday night ¯\_(ツ)_/¯ Live demo &amp; source code: Made with Three.js Hosted on CodePen.IO

16,008 Aufrufe

Videos

Keine weiteren Inhalte verfügbar