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
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:
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
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:
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
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
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
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:
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
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
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
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
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
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
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:
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 & source code: Made with Three.js Hosted on CodePen.IO