Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

I've added a function to propagate a gradient across the mesh (it follows the curvature of the hair), and then copy that gradient to the Windows clipboard as a transparent picture, for use as a selection mask in the image editor

Haï~

13,587 subscribers

13,311 views • 1 year ago •via X (Twitter)

Science & Technology Education

Anya Rossi• Live Now

Private livecam show

5 Comments

TouchMe1 year ago

Can this be used to created pathing maps for poiyomi? As there hasn’t really been a good way to do that prior.

Haï~1 year ago

I managed to build a Poiyomi "Merged Channels" path map with this

vaizor1 year ago

you never miss i stg

zSkull1621 year ago

that’s nuts. i didn’t know editor scripting can do so much

Xirael1 year ago

How reliant is it on each strand being its own island or mesh?

Related Videos

I've added a function to copy selected UV islands to the Windows clipboard as a transparent picture, for use as a selection mask in Photoshop (still need to figure out UV margins)

I've added a function to copy selected UV islands to the Windows clipboard as a transparent picture, for use as a selection mask in Photoshop (still need to figure out UV margins)

Haï~

118,872 views • 1 year ago

CSS Trick! ⭐️ You can create this sparkly backdrop with a single element using mask-composite whilst animating the mask-position 😷 .canvas { background: var(--gradient); mask: var(--dots), var(--noise); mask-composite: intersect /* source-in, xor */; animation: flicker; } @keyframes flicker { to { mask-position: 50% 50% , 0 50%; } } The trick is to layer the masks and then use the intersect value on the mask-composite ✨ Intersect works as it would in SVG by combining the masks and taking their intersection. The dots mask is a basic radial-gradient that is repeated across the element: mask: radial-gradient(circle at 50% 50%, white 2px, transparent 2.5px) 50% 50% / 40px 40px; The noise mask is a generated image of Perlin Noise (h/t to JohnPhamous for finding the site for that). That becomes the second mask: mask: url("noise.png") 50% 50% / 256px 256px; Once they are intersected. The last piece is to animate the mask-position as shown above 👆 Have a play with the demo and see what you think! CodePen.IO link below! 👇

CSS Trick! ⭐️ You can create this sparkly backdrop with a single element using mask-composite whilst animating the mask-position 😷 .canvas { background: var(--gradient); mask: var(--dots), var(--noise); mask-composite: intersect /* source-in, xor */; animation: flicker; } @keyframes flicker { to { mask-position: 50% 50% , 0 50%; } } The trick is to layer the masks and then use the intersect value on the mask-composite ✨ Intersect works as it would in SVG by combining the masks and taking their intersection. The dots mask is a basic radial-gradient that is repeated across the element: mask: radial-gradient(circle at 50% 50%, white 2px, transparent 2.5px) 50% 50% / 40px 40px; The noise mask is a generated image of Perlin Noise (h/t to JohnPhamous for finding the site for that). That becomes the second mask: mask: url("noise.png") 50% 50% / 256px 256px; Once they are intersected. The last piece is to animate the mask-position as shown above 👆 Have a play with the demo and see what you think! CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

279,699 views • 2 years ago

CSS Trick! 🤙 You can create gradient borders on translucent elements using mask-clip and mask-composite with a pseudo-element 🔥 .gradient-border::after { mask-clip: padding-box, border-box; mask-composite: intersect; mask: linear-gradient(transparent, transparent), linear-gradient(white, white); } It's the same "Transparent border trick" from before. But, now you apply it to a pseudo-element 😎 The trick is to create a pseudo-element with a gradient background and then mask it so we only see the part we want, the border ✨ mask-clip defines the area affected by a mask. Similar to how you can define background-size. Using padding-box and border-box constrains the two masks. mask-composite is the magic part ✨ It defines a compositing operation for stacked mask layers. Using intersect means that the parts that overlap get replaced. And this seems to work in all browsers 🙌 As for the rest of the styles... – Make sure you set pointer-events: none on the pseudo-element – Make sure it fills the parent element. You can use position: absolute and inset: 0 – Make sure the background fills the space including the border-width. You can use calc to achieve that: --bg-size: calc(100% + (2px * var(--border))); background: var(--gradient) center center / var(--bg-size) var(--bg-size); That's it! 🚀 Gradient borders on translucent elements. You can set all the backdrop-filter: blur() you like! 😅 CodePen.IO link below! 👇

CSS Trick! 🤙 You can create gradient borders on translucent elements using mask-clip and mask-composite with a pseudo-element 🔥 .gradient-border::after { mask-clip: padding-box, border-box; mask-composite: intersect; mask: linear-gradient(transparent, transparent), linear-gradient(white, white); } It's the same "Transparent border trick" from before. But, now you apply it to a pseudo-element 😎 The trick is to create a pseudo-element with a gradient background and then mask it so we only see the part we want, the border ✨ mask-clip defines the area affected by a mask. Similar to how you can define background-size. Using padding-box and border-box constrains the two masks. mask-composite is the magic part ✨ It defines a compositing operation for stacked mask layers. Using intersect means that the parts that overlap get replaced. And this seems to work in all browsers 🙌 As for the rest of the styles... – Make sure you set pointer-events: none on the pseudo-element – Make sure it fills the parent element. You can use position: absolute and inset: 0 – Make sure the background fills the space including the border-width. You can use calc to achieve that: --bg-size: calc(100% + (2px * var(--border))); background: var(--gradient) center center / var(--bg-size) var(--bg-size); That's it! 🚀 Gradient borders on translucent elements. You can set all the backdrop-filter: blur() you like! 😅 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

269,847 views • 2 years ago

Using CSS mask-image you can truncate texts with a smooth fade effect. It looks clean and it's a great alternative to text ellipsis. .text-container { overflow: hidden; white-space: nowrap; -webkit-mask-image: linear-gradient( to right, black 50%, transparent); mask-image: linear-gradient( to right, black 50%, transparent); } } If you found this one useful, follow for more! ❤️

Using CSS mask-image you can truncate texts with a smooth fade effect. It looks clean and it's a great alternative to text ellipsis. .text-container { overflow: hidden; white-space: nowrap; -webkit-mask-image: linear-gradient( to right, black 50%, transparent); mask-image: linear-gradient( to right, black 50%, transparent); } } If you found this one useful, follow for more! ❤️

Ali

13,705 views • 2 months ago

$CSS Tip! 🤙 You can use mask-composite and some JavaScript to create this pointer proximity following glow border ✨ .glow { mask-composite: intersect; mask-clip: padding-box, border-box; mask: linear-gradient(#0000, #0000), conic-gradient(#0000 0deg, #fff, #0000 45deg); } The trick is to mask a background-image with a combination of mask layers. mask-composite: intersect; means the mask used will be the intersection of the layers 🔥 use source-in, xor; in browsers that don't support intersect; In this demo, you can use pseudoelements and rely on scoped custom properties to do a lot of the heavy lifting for you 🙌 Once you've masked the background, you need to update the starting angle of the conic-gradient on pointermove 👆 You can work that out by getting the center point of each card and then calculating the angle between that and the pointer with Math.atan2 🤓 let ANGLE = Math.atan2( event?.y - CARD_CENTER[1], event?.x - CARD_CENTER[0] ) * 180 / Math.PI ANGLE = ANGLE < 0 ? ANGLE + 360 : ANGLE; CARD.style.setProperty('--start', ANGLE + 90) You plug that into your conic-gradient mask as a custom property accounting for --spread ⚡️ conic-gradient(from calc((var(--angle) - (var(--spread) * 0.5)) * 1deg), #000 0deg, #fff, #0000 calc(var(--spread) * 1deg)); To get the blur, you apply a blur to the glow container on each card 🤙 .glows { filter: blur(calc(var(--blur) * 1px); } That's it! Layers of masks that are clipped and composited before being blurred 😎 The added trick is to fade each one in when the pointer is in the defined proximity of the card. For example, don't show unless within 100px of a card. You can see that in the video. Check out the JavaScript code for that 🫶 Couldn't resist making this one 😁 CodePen.IO link below! 👇$

CSS Tip! 🤙 You can use mask-composite and some JavaScript to create this pointer proximity following glow border ✨ .glow { mask-composite: intersect; mask-clip: padding-box, border-box; mask: linear-gradient(#0000, #0000), conic-gradient(#0000 0deg, #fff, #0000 45deg); } The trick is to mask a background-image with a combination of mask layers. mask-composite: intersect; means the mask used will be the intersection of the layers 🔥 use source-in, xor; in browsers that don't support intersect; In this demo, you can use pseudoelements and rely on scoped custom properties to do a lot of the heavy lifting for you 🙌 Once you've masked the background, you need to update the starting angle of the conic-gradient on pointermove 👆 You can work that out by getting the center point of each card and then calculating the angle between that and the pointer with Math.atan2 🤓 let ANGLE = Math.atan2( event?.y - CARD_CENTER[1], event?.x - CARD_CENTER[0] ) * 180 / Math.PI ANGLE = ANGLE < 0 ? ANGLE + 360 : ANGLE; CARD.style.setProperty('--start', ANGLE + 90) You plug that into your conic-gradient mask as a custom property accounting for --spread ⚡️ conic-gradient(from calc((var(--angle) - (var(--spread) * 0.5)) * 1deg), #000 0deg, #fff, #0000 calc(var(--spread) * 1deg)); To get the blur, you apply a blur to the glow container on each card 🤙 .glows { filter: blur(calc(var(--blur) * 1px); } That's it! Layers of masks that are clipped and composited before being blurred 😎 The added trick is to fade each one in when the pointer is in the defined proximity of the card. For example, don't show unless within 100px of a card. You can see that in the video. Check out the JavaScript code for that 🫶 Couldn't resist making this one 😁 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

1,180,253 views • 2 years ago

This is a (kind of messy) example of how I do it! Basically you make a copy of the piece (in this case the sleeve) and then put it in the shirt deformer. Then pose the model and adjust the glue as needed! I use a shortcut to hide the mesh/glue display to paint glue easier~

This is a (kind of messy) example of how I do it! Basically you make a copy of the piece (in this case the sleeve) and then put it in the shirt deformer. Then pose the model and adjust the glue as needed! I use a shortcut to hide the mesh/glue display to paint glue easier~

cillia ☆

54,141 views • 2 years ago

Quick way to start a pixel art cloudscape. Use the gradient tool, then color pick from the lighter colors and draw shapes into the darker colors. In the end the gradient wont even be visible #pixelart

Quick way to start a pixel art cloudscape. Use the gradient tool, then color pick from the lighter colors and draw shapes into the darker colors. In the end the gradient wont even be visible #pixelart

Pixel Art Journey

41,452 views • 3 months ago

CSS Tip! ✨ It's 2024 and you have a new way to make animated borders 🚀 .glow::after { offset-path: rect(0 100% 100% 0 round var(--radius)); animation: loop; } @keyframes loop { to { offset-distance: 100%; }} Using the offset-* properties you can animate elements along the perimeter of others 😍 The rect() value gained support in Safari 17.2 🙌 To start, you create an element and put it inside your main element. For example, you put a span inside the button 🤙 Click me! Make the element fill its parent with absolute positioning and inset [data-glow] { position: absolute; inset: 0; } Now the good part, you use a pseudoelement on that element and define an offset-path [data-glow]::after { content: ""; offset-path: rect(0 auto auto 0 round var(--radius)); animation: loop 2.6s infinite linear; } With the rect value, you are saying the path fills the parent container: top: 0 right: auto || 100% bottom: auto || 100% left: 0 Then you can use round to make sure the path uses the same radius as whatever the parent has The @keyframes animation merely animates the offset-distance of that pseudoelement to 100% @keyframes loop { to { offset-distance: 100%; }} You can see this more clearly in the video 🫶 The offset-* properties also include an offset-anchor property. This allows you to dictate which point of the element follows the path. For example: anchor-offset: 100% 50%; This means that the "right, center" of the element will follow the perimeter of the parent element 🤙 Lastly, the visuals 🎨 For color, you can use a gradient such as a linear gradient to fill the pseudo-element. [data-glow]::after { background: radial-gradient( circle at right, hsl(320 90% 100%), transparent 50% ); } Then clip away everything so you only have the border and can still have translucent backgrounds, etc. Use a mask with mask-composite ✨ A little transparent border trick: [data-glow] { border: 2px solid transparent; mask: linear-gradient(transparent, transparent), linear-gradient(white, white); mask-clip: padding-box, border-box; mask-composite: intersect; } Bit of a long one. Hope you find it useful 🙏 CodePen.IO link below 👇

CSS Tip! ✨ It's 2024 and you have a new way to make animated borders 🚀 .glow::after { offset-path: rect(0 100% 100% 0 round var(--radius)); animation: loop; } @keyframes loop { to { offset-distance: 100%; }} Using the offset-* properties you can animate elements along the perimeter of others 😍 The rect() value gained support in Safari 17.2 🙌 To start, you create an element and put it inside your main element. For example, you put a span inside the button 🤙 Click me! Make the element fill its parent with absolute positioning and inset [data-glow] { position: absolute; inset: 0; } Now the good part, you use a pseudoelement on that element and define an offset-path [data-glow]::after { content: ""; offset-path: rect(0 auto auto 0 round var(--radius)); animation: loop 2.6s infinite linear; } With the rect value, you are saying the path fills the parent container: top: 0 right: auto || 100% bottom: auto || 100% left: 0 Then you can use round to make sure the path uses the same radius as whatever the parent has The @keyframes animation merely animates the offset-distance of that pseudoelement to 100% @keyframes loop { to { offset-distance: 100%; }} You can see this more clearly in the video 🫶 The offset-* properties also include an offset-anchor property. This allows you to dictate which point of the element follows the path. For example: anchor-offset: 100% 50%; This means that the "right, center" of the element will follow the perimeter of the parent element 🤙 Lastly, the visuals 🎨 For color, you can use a gradient such as a linear gradient to fill the pseudo-element. [data-glow]::after { background: radial-gradient( circle at right, hsl(320 90% 100%), transparent 50% ); } Then clip away everything so you only have the border and can still have translucent backgrounds, etc. Use a mask with mask-composite ✨ A little transparent border trick: [data-glow] { border: 2px solid transparent; mask: linear-gradient(transparent, transparent), linear-gradient(white, white); mask-clip: padding-box, border-box; mask-composite: intersect; } Bit of a long one. Hope you find it useful 🙏 CodePen.IO link below 👇

jhey ʕ•ᴥ•ʔ

283,498 views • 2 years ago

Quick tip for my graphic designers, In Ps, drop in your photo. Filter ➔ Camera Raw Filter. (Color) -100 Saturation. (Effects) Clarity +40, Texture +55. Gradient map— choose a color. Click the gradient layer mask. Select, Color Range, and click around. Gradient Mesh.

Quick tip for my graphic designers, In Ps, drop in your photo. Filter ➔ Camera Raw Filter. (Color) -100 Saturation. (Effects) Clarity +40, Texture +55. Gradient map— choose a color. Click the gradient layer mask. Select, Color Range, and click around. Gradient Mesh.

Seso

182,088 views • 2 years ago

This Thursday - $GRAY on Gradient. Open to the public for the first time ever, this marks the start of a new phase for the Gradient.

This Thursday - $GRAY on Gradient. Open to the public for the first time ever, this marks the start of a new phase for the Gradient.

Gradient

51,290 views • 11 months ago

CSS Trick! ⚡️ You can create gradient borders by using transparent borders 👀 No extra elements 🤙 article { background: // layer them up with different origin! linear-gradient(var(--bg), var(--bg)) padding-box, var(--gradient) border-box; border: 4px solid transparent; } The trick is to layer background images using different background-origin ⭐️ Then use a transparent border to define how thick the border is! padding-box positions a background relative to an element's padding. border-box positions a background relative to the border-box 🔥 The ✨magic✨ part? You get that nested radius for free 😅 Check out the exploded view in the video and have a play with different values in the demo 🎞️ CodePen.IO link below! 👇

CSS Trick! ⚡️ You can create gradient borders by using transparent borders 👀 No extra elements 🤙 article { background: // layer them up with different origin! linear-gradient(var(--bg), var(--bg)) padding-box, var(--gradient) border-box; border: 4px solid transparent; } The trick is to layer background images using different background-origin ⭐️ Then use a transparent border to define how thick the border is! padding-box positions a background relative to an element's padding. border-box positions a background relative to the border-box 🔥 The ✨magic✨ part? You get that nested radius for free 😅 Check out the exploded view in the video and have a play with different values in the demo 🎞️ CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

647,266 views • 2 years ago

This was a fun one to implement because I've also (afai consciously know) never seen "gradient" selections like this. The ::selection pseudo element doesn't support anything other than flat color so, on selection we sample the height the selected element is sitting at against the matching current state of the noise gradient on the right. We then relight that color down in lightness with oklab for better contrast in light/dark modes. This gets recalculated on scroll.y for a nice effect as you scroll the page up/down that makes the whole thing feel like its living the mood shift. Here's a video of this all playing out in the debug tooling we made:

This was a fun one to implement because I've also (afai consciously know) never seen "gradient" selections like this. The ::selection pseudo element doesn't support anything other than flat color so, on selection we sample the height the selected element is sitting at against the matching current state of the noise gradient on the right. We then relight that color down in lightness with oklab for better contrast in light/dark modes. This gets recalculated on scroll.y for a nice effect as you scroll the page up/down that makes the whole thing feel like its living the mood shift. Here's a video of this all playing out in the debug tooling we made:

almonk

41,687 views • 13 days ago

Andrej Karpathy summarizes how neural networks function, including the process of using a loss function in training and applying backpropagation for optimizing the network parameters through gradient descent.

Andrej Karpathy summarizes how neural networks function, including the process of using a loss function in training and applying backpropagation for optimizing the network parameters through gradient descent.

tetsuo

142,508 views • 9 months ago

🎓Learn how to create a powerful Dynamic Embers smart material in a matter of seconds, in my latest video series (AAA) Pro Tips! This smart material can be used on virtually any 3D asset. ___________________________________________________ In this video, the steps are as follows: 1. Create a fill layer to then apply the base maps for our asset into it. 2. Bake out the world space, AO, Curvature, and Position maps. These maps will be crucial for the smart material to function. Also, be sure to add an emissive channel to the project. 3. Next, create another fill layer labeled (Fire animation gradient) with a black mask and inside the mask apply a paint layer. Select the paint layer and paint a simple pill shape using a soft brush. Add an anchorpoint to the mask and disable all channels in this fill layer. 4. Create a folder labeled (embers smart material) and set it to pass through. Add a paint layer inside this folder and set it to pass through as well followed by an anchorpoint. 5. Create another fill layer and apply the paint layers anchorpoint information into its color channel. From here an HSL filter should be added to desaturate and darken the colors. 6. Next, create an additional fill layer with an orange-colored emissive channel. Add a black mask to this fill layer and inside its mask apply a dirt generator. This will give us the illusion of the embers glowing from inside the charred tree. Duplicate this fill layer and tweak its emissive color to a yellowish hue and reduce its mask amount. Do this a second time but with a white-colored emissive channel. This will now create an effect of the embers appearing brighter the deeper they are inside the tree. 7. Lastly, add these layers into a folder with a black mask and apply the (Fire Animation Gradient) anchorpoint into its mask via a fill layer. Now we have a charred embers effect wherever we paint using the paint layer created inside the gradient mask! This gradient mask can also be exported into Unreal engine to create some stunning real-time dynamic animations or the new material can simply be used for in-engine vertex painting. ____________________________________________________ More AAA Game Dev Tips can be found on my YouTube channel here: Stay tuned for more weekly Tips! Happy Texturing!💚 #gamedev #gameart #3dmodeling #texturing #madewithsubstance #ue5 #unrealengine #unity #vfx

🎓Learn how to create a powerful Dynamic Embers smart material in a matter of seconds, in my latest video series (AAA) Pro Tips! This smart material can be used on virtually any 3D asset. _ In this video, the steps are as follows: 1. Create a fill layer to then apply the base maps for our asset into it. 2. Bake out the world space, AO, Curvature, and Position maps. These maps will be crucial for the smart material to function. Also, be sure to add an emissive channel to the project. 3. Next, create another fill layer labeled (Fire animation gradient) with a black mask and inside the mask apply a paint layer. Select the paint layer and paint a simple pill shape using a soft brush. Add an anchorpoint to the mask and disable all channels in this fill layer. 4. Create a folder labeled (embers smart material) and set it to pass through. Add a paint layer inside this folder and set it to pass through as well followed by an anchorpoint. 5. Create another fill layer and apply the paint layers anchorpoint information into its color channel. From here an HSL filter should be added to desaturate and darken the colors. 6. Next, create an additional fill layer with an orange-colored emissive channel. Add a black mask to this fill layer and inside its mask apply a dirt generator. This will give us the illusion of the embers glowing from inside the charred tree. Duplicate this fill layer and tweak its emissive color to a yellowish hue and reduce its mask amount. Do this a second time but with a white-colored emissive channel. This will now create an effect of the embers appearing brighter the deeper they are inside the tree. 7. Lastly, add these layers into a folder with a black mask and apply the (Fire Animation Gradient) anchorpoint into its mask via a fill layer. Now we have a charred embers effect wherever we paint using the paint layer created inside the gradient mask! This gradient mask can also be exported into Unreal engine to create some stunning real-time dynamic animations or the new material can simply be used for in-engine vertex painting. __ More AAA Game Dev Tips can be found on my YouTube channel here: Stay tuned for more weekly Tips! Happy Texturing!💚 #gamedev #gameart #3dmodeling #texturing #madewithsubstance #ue5 #unrealengine #unity #vfx

Cohen Brawley

46,031 views • 2 years ago

CSS Trick! ⭐️ You can animate your gradient borders by defining types for your custom properties with @ property 🔥 1. Define a property @ property --angle { syntax: ' '; /* 👈 type angle*/ inherits: true; initial-value: 0deg; } 2. Animate the value article { animation: rotate 2s infinite linear paused; } @ keyframes rotate { to { --angle: 360deg; } } 3. Use the value in your conic-gradient background. article { --gradient: conic-gradient(from var(--angle), ...); background: linear-gradient(var(--bg), var(--bg)) padding-box, var(--gradient) border-box; border: 4px solid transparent; } 4. Change the play state to running on :hover, etc. article:is(:hover, :focus-within) { animation-play-state: running; } That's it! 🤙 As soon as Firefox 120 lands, this one will work in all browsers! 🙌 Until then, it's a progressive enhancement. You will still get the brightening of the border on hover, etc. That's handled with a pseudo-element ✨ CodePen.IO link below! 👇

CSS Trick! ⭐️ You can animate your gradient borders by defining types for your custom properties with @ property 🔥 1. Define a property @ property --angle { syntax: ' '; /* 👈 type angle*/ inherits: true; initial-value: 0deg; } 2. Animate the value article { animation: rotate 2s infinite linear paused; } @ keyframes rotate { to { --angle: 360deg; } } 3. Use the value in your conic-gradient background. article { --gradient: conic-gradient(from var(--angle), ...); background: linear-gradient(var(--bg), var(--bg)) padding-box, var(--gradient) border-box; border: 4px solid transparent; } 4. Change the play state to running on :hover, etc. article:is(:hover, :focus-within) { animation-play-state: running; } That's it! 🤙 As soon as Firefox 120 lands, this one will work in all browsers! 🙌 Until then, it's a progressive enhancement. You will still get the brightening of the border on hover, etc. That's handled with a pseudo-element ✨ CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

258,704 views • 2 years ago

I built a new mesh gradient tool that can create beautiful gradients from photographs. The results are often dreamlike and capture a general vibe. I'm calling it Photo Gradient, it's free on web and soon a Figma plugin, link below

I built a new mesh gradient tool that can create beautiful gradients from photographs. The results are often dreamlike and capture a general vibe. I'm calling it Photo Gradient, it's free on web and soon a Figma plugin, link below

Daniel Destefanis

103,132 views • 2 years ago

You can also use the Gradient layer type in Toolbag to make planar knurling like for this pistol grip panel 😎 Adding a sync point above the layer lets you use the effect with smart mats and generators as well.

You can also use the Gradient layer type in Toolbag to make planar knurling like for this pistol grip panel 😎 Adding a sync point above the layer lets you use the effect with smart mats and generators as well.

Jordan Cain

12,004 views • 7 months ago

Playing around with 'use cache' for a new guide I'm working on. Put together some basic examples at the route, component, and function level. Also gave the playground a glow-up: tweaked the design, added Geist and images, and the gradient borders are finally out, sooo 2022 💁‍♀️

Playing around with 'use cache' for a new guide I'm working on. Put together some basic examples at the route, component, and function level. Also gave the playground a glow-up: tweaked the design, added Geist and images, and the gradient borders are finally out, sooo 2022 💁‍♀️

Delba

16,939 views • 1 year ago

Tip: To alpha clip a layer, you can use the alpha of another image layer as a mask. #ucupaint #b3d

Tip: To alpha clip a layer, you can use the alpha of another image layer as a mask. #ucupaint #b3d

Ucupaint 🔶

23,593 views • 1 year ago