Introducing Better Gradient, a collaboration between Plugin Play and... Ravie "The Gradient Guys" .co Now available at - Save gradient presets - Customize your color interpolation with graph easing - Significantly improved color rendering to get rid of the gross grays AE typically produces between color stops. - Animate gradients along paths with shadows - and so much more! Effortlessly blend colors into mesmerizing kaleidoscopes of gradient joy. Mapping, paths, you name it, you can gradient it. Launch video direction, design, and animation from Sam Essanoussi and Justin De Leon.show more

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! 👇show more

Future CSS Tip! 🍏 You can combine scroll-driven animations... with background-clip to create gradient text reveals 😍 p { animation-name: move-bg, fade-in; animation-fill-mode: both; animation-timing-function: linear; animation-timeline: scroll(root); animation-range: 0 100vh, 40vh 100vh; } /* Multiple animations with shared timeline and different ranges 👀 */ keyframes move-bg { to { background-position: 50% 100%; } } keyframes fade-in { 0% { opacity: 0; } } The trick here is creating a large background with a radial gradient and using background-clip: text on the element with color: transparent ✨ p { background: radial-gradient(50% 100% at 50% 100%, hsl(var(--accent, 10) 90% 95%), hsl(var(--accent, 10) 90% 50%), transparent 50%); background-size: 400% 600%; -webkit-background-clip: text; background-position: 50% 0; } Then we animate the background-position to reveal the colorful part that reveal the text 😎 Another #AppleEvent related scrolling demo coming tomorrow 😅 CodePen.IO link below! 👇show more

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 👇show more

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! 👇show more

Claude Code is terrible at UI design and everyone... knows it so this guy fixed it by building an MCP that gives Claude its own AI design tool instead of going back and forth between a design platform and your code editor, Claude now creates the designs itself and drops them straight into your codebase the MCP has full context of your existing design system and project so everything it generates actually matches what you already have. one command to set up and it installs the MCP and skill files so Claude instantly knows how to use it if you're tired of the same Inter font, purple gradient, card grid layout on every project, this is definitely worth tryingshow more

okay so I'm having way too much fun with... my personal website, i've made a few tools for designers to use, Glass Studio, Riso/Paper/Slice, ASCII_GEN, Stamp Press, Gradient Gen, Flow Field, Glyph Forge, and Type Playground (so far) and then also made it so you can play PONG in the computer as well. love the sound design as well, especially that "go back" button on the bottom of every design tool page, try it out: would love to see what you create ❤️show more

Variational Autoencoder by hand ✍️ ~ 11 steps walkthrough... below A VAE learns the structure of your data, the mean and variance of its hidden features, and then generates new data from that structure. A GAN only learns to fool a discriminator. It can make convincing fakes without ever knowing what the data is really made of. That is the difference, and it is the whole reason VAEs matter. In 2024 ICLR gave its first ever Test of Time Award to the VAE paper, "Auto-Encoding Variational Bayes" by Diederik Kingma and Max Welling, ten years on. How does it work? Goal: encode three inputs into a distribution, sample from it, decode it back, and read every loss gradient off the page. = 1. Given = Three training examples X1, X2, X3, copied to the bottom as their own targets. Reconstructing your own input is what puts the "auto", meaning self, in autoencoder. = 2. Encoder, layer 1 = Let us multiply the inputs by weights and biases, then apply ReLU, crossing out every negative. = 3. Mean and standard deviation = We multiply the features by two more weight sets. The first predicts the means μ of the latent distributions, the second their standard deviations σ. = 4. A random offset = Let us sample ε from a standard normal, mean 0 and variance 1, and multiply it by σ. This is a random step away from the mean, scaled by how uncertain each feature is. = 5. Mean plus offset = We add the offset back onto μ, and these become the decoder's inputs. Keeping the randomness out in ε is the reparameterization trick: it lets gradients flow straight through the sampling. = 6. Decoder, layer 1 = Let us multiply by weights and biases and apply ReLU again. Here -4 is crossed out. = 7. Decoder, layer 2 = We multiply once more. The output Y is the decoder's attempt to rebuild X from the sampled distribution. = 8. Gradient for the mean = Let us push μ toward 0. A lot of math, the SGVB estimator, collapses the KL gradient to simply μ itself. = 9. Gradient for the standard deviation = We want σ to approach 1. = 10. And its formula = That same math simplifies the gradient to σ minus 1/σ. = 11. Reconstruction gradient = We want the reconstruction Y to match the input X. Mean squared error simplifies its gradient to Y minus X. Takeaway: the two gradients you just calculated each sit at the heart of a modern method, so one VAE teaches you both. The KL divergence is the penalty RLHF like GRPO uses to keep a fine-tuned model from drifting off its base. The reconstruction loss, plain mean squared error, is exactly what trains a diffusion model to denoise. Draw one VAE by hand and you have quietly learned the core of both. 💾 Save this post!show more

Backpropagation by hand ✍️ ~ 11 steps walkthrough below... Backpropagation is the algorithm that actually trains a neural network, and it is where most people stop following along. It is not calculus you cannot do. It is matrix multiplication, working backward, one layer at a time. So I drew and calculated one entirely by hand. Goal: push the loss gradient back through a 3-layer network and land on a new value for every weight and bias. = 1. Given = A 3-layer perceptron, an input X, predictions Ypred = [0.5, 0.5, 0], and the truth Ytarget = [0, 1, 0]. = 2. Backprop gradient cells = Let us draw empty cells for every gradient we are about to compute. The shape of the answer comes first. = 3. Layer 3 softmax = We get dL/dz3 straight from Ypred minus Ytarget = [0.5, -0.5, 0]. No chain rule needed, and that shortcut is the whole reason softmax and cross-entropy are paired. = 4. Layer 3 weights and biases = Let us multiply dL/dz3 by [a2 | 1]. One multiplication gives the gradient for W3 and b3 together. = 5. Layer 2 activations = We multiply dL/dz3 by W3 to get dL/da2. The gradient moves back across a layer the same way the signal moved forward. = 6. Layer 2 ReLU = Let us pass it through the gate: keep the gradient where the activation was positive, zero it everywhere else. = 7. Layer 2 weights and biases = We multiply dL/dz2 by [a1 | 1]. The same figure as step 4, one layer up. = 8. Layer 1 activations = Let us multiply dL/dz2 by W2. = 9. Layer 1 ReLU = We apply the same gate again, now on a1. = 10. Layer 1 weights and biases = Let us multiply dL/dz1 by [x | 1], and every weight in the network now has a gradient. = 11. Update = We subtract, and the network has learned. In practice a learning rate scales this step. The gradients: dL/dz3 = [0.5, -0.5, 0] dL/da1 = [1, -2, 2, -1] dL/dz1 = [0, -2, 2, -1] The takeaway: matrix multiplication is all you need. Just like the forward pass, backpropagation is matrix multiplications end to end. You can do every one by hand, slowly and imperfectly, which is exactly why a GPU's ability to do them fast mattered so much to deep learning. 💾 Save this post!show more

CSS Tip! ⭐️ You can use the lh (line-height)... unit on background layers to emphasize multiple lines of text responsively without extra elements! ⚡️ h1 { background: linear-gradient(white, white), grey; background-size: 100% calc(var(--lines) * 1lh), 100% 100%; background-clip: text; color: transparent; } Here you emphasize the first two lines of the heading with white using a sized background-image layer It has a size of 2lh ✨ Then the rest of the element is colored with whatever other colors you want to use as layers. If you watch the video, you can see different colors used for different lines and then fade it out if you wish. You could do whatever you like with it 😎 Neat part is that it's responsive. The font-size is set with a clamp and you can resize the viewport or the element and the number of lines emphasized will remain 🤙 Last but not least, make sure to use background-clip: text and color: transparent so the background shines through 🔥 Also, note that if you're only looking to highlight the first line, you can still use the :first-line pseudo 🫶 Have a play with it and see what you can come up with! CodePen.IO link below! 👇show more

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! 👇show more

CSS Trick 📜 You can trigger text highlights on... scroll with scroll-driven animations 😎 mark { animation: highlight; animation-timeline: view(); } @​keyframes highlight { to { --lit: 1; }} mark span { background-position: calc(var(--lit) * -110%) 0; transition: background 1s; } The trick is using a scroll-driven animation to flip a custom property on a element 🎚️ You flip the value between 0 and 1, and that transitions the background position of the element mark { --lit: 0; animation: highlight steps(1) both; animation-timeline: view(); animation-range: entry 100% cover 10%; } The background has to be applied on a child of the mark to see the change in the custom property 👀 mark span { background: linear-gradient( 120deg, yellow 50%, transparent 50%) 110% 0 / 220% 100% no-repeat; background-position: calc(var(--lit) * 110%) 0; transition: background-position 1s; } The trick is to set the background-size so that it's bigger than the element and then split the background-color in the middle using a linear-gradient 🤙 And the property flips fills in the color 🫶 That's it! If there isn't support for scroll-driven animations, use JavaScript's IntersectionObserver API. The code for this is in the demo 😎 Cool example of using CSS as an IntersectionObserver! CodePen.IO link below 👇show more

DOGFIGHTING WORKS!!!! You can now shoot at other people... Sorry I procrastinated on this cause I thought it was very hard but again it took 5 seconds in Cursor It just tracks collisions of the projectiles with planes near you, and then adds score Next is broadcasting the hits to the server who will then affect the health so people will actually fall out of the sky :D I thought nice to show the health from green->yellow->red->black gradient as other player plane color, so you know who is almost dead That score label very annoying in the center, I'll move it elsewhere!show more

🎓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 #vfxshow more

After Effects Script 1.2.0 Global Release Finish complex compositing... with a one click! 🔗 AutoCompositing color-corrects your characters to match the colors of your background. It also includes finely adjustable effect presets, color presets, and many more features built for post-production. [ 💸Price ] $56.99 → $38.99 Sale runs until October 3. Sign-up bonus: New PointZero members get a $3 discount coupon (ongoing). Thank you so much to everyone who waited for the global release!show more

✈️ Dogfighting works and other people's planes now explode... if you hit them enough and their health goes to 0%, very fun :D "I thought nice to show the health from green->yellow->red->black gradient as other player plane color, so you know who is almost dead" ✅ Done "That score label very annoying in the center, I'll move it elsewhere!" ✅ Done "Next is broadcasting the hits to the server who will then affect the health so people will actually fall out of the sky :D" Now need to broadcast health of all players so you actually die when YOU get shot tooshow more

CSS Tip! 💫 You can create this responsive perspective... warp animation with 3D CSS and container queries ✨ (Video reveals trick 👀) .warp { container-type: size; perspective: 100px; transform-style: preserve-3d; resize: both; overflow: hidden; } Couple of tricks in this one 🤓 The main idea is to create a tunnel (an open-ended cube). On each side of the tunnel, use linear-gradient to create the grid lines ✨ .side { background: linear-gradient(#​fff 0 1px, transparent 1px 5%) 50% 0 / 5% 5%, linear-gradient(90deg, #​fff 0 1px, transparent 1px 5%) 50% 50% / 5% 5%; } To position each side, you rotate on the x-axis by 90deg. Each side would become invisible at this point. So you give the scene perspective 😉 .warp__side--top { width: 100cqi; height: 100cqmax; transform-origin: 50% 0%; transform: rotateX(-90deg); } The cool part here is that you want to make each side the same height. But the container is responsive. So you can use a container query and make sure each side is 100cqmax tall 🫶 Then the "beams". Each side contains "beams". They have different colors, sizes, and positions, and move at different speeds ⚡️ We can control that through scoped custom properties. .beam { width: 5%; position: absolute; top: 0; left: calc(var(--x, 0) * 5%); aspect-ratio: 1 / 2; background: linear-gradient( hsl(var(--hue) 80% 60%), transparent ); translate: 0 100%; animation: warp calc(var(--speed, 0) * 1s) calc(var(--delay, 0) * -1s) infinite linear; } The magic here is though that a beam's animation is as basic as translating it from the top of the side to the bottom. And you can get that distance with a container query again 🔥 @​keyframes warp { 0% { translate: -50% 100cqmax; } 100% { translate: -50% -100%; } } And that is pretty much it! A cool warp animation effect using 3D CSS and container queries ⚡️ If you have any questions, let me know ᵔᴥᵔ CodePen.IO link below! 👇show more

The Hidden Flow Inside Schrödinger’s Equation Once you define... ρ = |ψ|² and differentiate it, Schrödinger equation rearranges into a continuity law, ∂ρ/∂t + ∇·j = 0, with j = (1/m)Im(ψ*∇ψ). Which means that probability is not just sitting there, it flows. Write ψ = r e^(iθ), and the current becomes j = (ρ/m)∇θ. So, the phase gradient is the steering field. When the phase winds by 2πn around a loop, the circulation is quantized, and the cores appear where ρ collapses so the phase can go undefined. In the animation, the ribbons trace that current, the color field shows phase, and the curls in the streamlines mark quantized vortex defects.show more

Can GPT-4 teach a robot hand to do pen... spinning tricks better than you do? I'm excited to announce Eureka, an open-ended agent that designs reward functions for robot dexterity at super-human level. It’s like Voyager in the space of a physics simulator API! Eureka bridges the gap between high-level reasoning (coding) and low-level motor control. It is a “hybrid-gradient architecture”: a black box, inference-only LLM instructs a white box, learnable neural network. The outer loop runs GPT-4 to refine the reward function (gradient-free), while the inner loop runs reinforcement learning to train a robot controller (gradient-based). We are able to scale up Eureka thanks to IsaacGym, a GPU-accelerated physics simulator that speeds up reality by 1000x. On a benchmark suite of 29 tasks across 10 robots, Eureka rewards outperform expert human-written ones on 83% of the tasks by 52% improvement margin on average. We are surprised that Eureka is able to learn pen spinning tricks, which are very difficult even for CGI artists to animate frame by frame! Eureka also enables a new form of in-context RLHF, which is able to incorporate a human operator’s feedback in natural language to steer and align the reward functions. It can serve as a powerful co-pilot for robot engineers to design sophisticated motor behaviors. As usual, we open-source everything! Welcome you all to check out our video gallery and try the codebase today: Paper: Code: Deep dive with me: 🧵show more

CSS variables are live and they are POWERFUL. Now... Live on Product Hunt 🚀 ➡️ Create a design system "So you can stay consistent and build much quicker." Define global styles like colors, gradients, sizes, and box shadows. ➡️ Use your variables everywhere "So you never have to manually enter a border color again." You're not limited to just sizes, colors, and font families. Use variables in gradients, box shadows, transforms, and more! ➡️ Start with libraries like Open Props, expertly crafted CSS variables "So you can use a tried and true system, and so we can standardize our Projects." Because there are no abstractions, you can use existing CSS variable libraries like Open Props, an expertly crafted library of CSS variables, and the recommended starting point in Webstudio. ➡️ Create complex micro-interactions "So when you hover a link, you can change any children's styles." CSS variables go beyond reusability! You can define variables anywhere in the navigator, such as on a link, and modify the variables on hover. Then, you can use those variables on the children to create complex micro-interactions! ➡️ Design and build simultaneously "So when deciding that perfect border color, you can arrow through all your options." Experimenting on the canvas just got a whole lot better. Now, you can arrow through your variables and see them rendered on the canvas to see which works best. ➡️ Change variable by breakpoint "So you can make the variables look great, no matter the screen size." CSS variables in Webstudio use the same UI as the rest of your styles, enabling breakpoints to work the same way. ✨ Building with design systems gives a HUGE boost in speed, consistency, and maintainability.show more

🎉vHand is available on Steam! Launch Sale Ends 25... October! Make sure to grab a copy! It's available for Windows and Desktop Mac users! For both right and left handed artists 💜 I've put together a tutorial on how to set it up in OBS, check out our Steam discussion page! For those of you who already got it, THANK YOU SO SO MUCH, these past few days have been overwhelmingly positive, thank YOU for trusting my product, I'm so happy to see you all enjoy the app so far 💜 Your feedback is very precious, feel free to drop any suggestions, I'm all ears! Upcoming Updates Include: -Full arm for furries -Stripes for furry arm -Rings -Gradient Color for normal hand #vhand #streamer #twitch #twitchstreamer #drawing #ASMR #artshow more