Loading video...

Video Failed to Load

Go Home

We outgrew static gradients. So we rebuilt everything. Grainient V2 is live. What started as a gradient library is now something else entirely: • Animated gradient videos • Real-time gradient shader tool • Textured, mesh, and AI-crafted backgrounds From downloading assets → to actually create and control them. So,...

129,482 views • 5 months ago •via X (Twitter)

55 Comments

Adam ☧'s profile picture
Adam ☧5 months ago

$300 for gradients lol

Basit A. Khan's profile picture
Basit A. Khan5 months ago

$300 lifetime for more than 1500 gradients and animated gradient videos? Yeah its too much 😅 you are right

Solutionb's profile picture
Solutionb5 months ago

everything is behind the paywall, collect are set to blurry😐

Saif Shaikh's profile picture
Saif Shaikh5 months ago

real time gradient shader tool is genuinely a game changer

Basit A. Khan's profile picture
Basit A. Khan5 months ago

Yeah

leif's profile picture
leif5 months ago

300 for gradients is too much

Basit A. Khan's profile picture
Basit A. Khan5 months ago

@TheBrand0nn For the lifetime? For more than 1500 gradients and more than 500 AI curated bgs and more than 100 gradient and 3D videos? Is it too much to ask? Wow

Joulse's profile picture
Joulse5 months ago

So clean 👌

Basit A. Khan's profile picture
Basit A. Khan5 months ago

Thanks Joluse

Vlad's profile picture
Vlad5 months ago

This is very cool. Congrats on the launch.

Basit A. Khan's profile picture
Basit A. Khan5 months ago

Thanks vlad

Zaki's profile picture
Zaki5 months ago

That gradient work is insane 🔥

Basit A. Khan's profile picture
Basit A. Khan5 months ago

@ZakiEdit Thanks zaki

Luca's profile picture
Luca5 months ago

I. LOVE. THIS.

Basit A. Khan's profile picture
Basit A. Khan5 months ago

I loved it too

Chaitrali's profile picture
Chaitrali5 months ago

damn 🔥 this is really cool

Basit A. Khan's profile picture
Basit A. Khan5 months ago

Thanks

adri's profile picture
adri5 months ago

wow I definitely need to use this!

Basit A. Khan's profile picture
Basit A. Khan5 months ago

🫶

Mootionive's profile picture
Mootionive5 months ago

Wow 👌🏻

Basit A. Khan's profile picture
Basit A. Khan5 months ago

🫶

roon's profile picture
roon5 months ago

just bought pro!

Basit A. Khan's profile picture
Basit A. Khan5 months ago

Appreciated mate 🙏🙏

Oft's profile picture
Oft5 months ago

Looks insane! How was the video made?

Basit A. Khan's profile picture
Basit A. Khan5 months ago

Created by @vedu_boi

Precious Cypher 🥇's profile picture
Precious Cypher 🥇5 months ago

Does it work with Ae or i download the videos ?

Basit A. Khan's profile picture
Basit A. Khan5 months ago

Yes you can simply download the videos

Precious Cypher 🥇's profile picture
Precious Cypher 🥇5 months ago

Ok

Vexx's profile picture
Vexx5 months ago

Basit what do you think of this ? I made it using skeumorphism and it's my first skeumorphic component, any suggestions ? any points to improve, I would appreciate some direction!

CREADEVS's profile picture
CREADEVS5 months ago

🔥

Bahjat's profile picture
Bahjat5 months ago

woah nice!! really needed more than static gradients!!!

Basit A. Khan's profile picture
Basit A. Khan5 months ago

Enjoy mate 🫶

Toms Stals's profile picture
Toms Stals5 months ago

amazing update Basit, looking forward to trying it out!

Basit A. Khan's profile picture
Basit A. Khan5 months ago

Goahead buddy

Sumit Kumar's profile picture
Sumit Kumar5 months ago

Great service but the video 😍😍! Who did this?

Basit A. Khan's profile picture
Basit A. Khan5 months ago

By @vedu_boi

SAVAGE ✰'s profile picture
SAVAGE ✰5 months ago

Let’s see

Basit A. Khan's profile picture
Basit A. Khan5 months ago

✌️

Upnishad's profile picture
Upnishad5 months ago

woah!! this is big

Basit A. Khan's profile picture
Basit A. Khan5 months ago

🙏

𝗕𝗮𝗻𝗱𝗶𝗻𝗼𝗽𝗹𝗮's profile picture
𝗕𝗮𝗻𝗱𝗶𝗻𝗼𝗽𝗹𝗮5 months ago

gradients... $299 and it is and offer from $759 for... gradients. What was the thought process? why you think people would pay that much for gradients? Maybe you are seeing a market that will emerge in the future?

islem.vfx's profile picture
islem.vfx5 months ago

Nicee

Basit A. Khan's profile picture
Basit A. Khan5 months ago

Appreciated

Crypter's profile picture
Crypter5 months ago

@basit_designs any plans to also add the cool unicorn video effects you did like the purple butterfly? :)

Basit A. Khan's profile picture
Basit A. Khan5 months ago

Yeah soon

Crypter's profile picture
Crypter5 months ago

@basit_designs so will you add that stuff also there? Because I‘m thinking to buy LTD and would love to have that stuff also because it looks amazing. I‘m möre into those designs instead of gradients. Thats why I ask :)

Basit A. Khan's profile picture
Basit A. Khan5 months ago

Yeah, we will add those ready made unicorn shaders with embedded codes and URL embed as component. This update will be live on next month. We are working on 100 different assets :)

G-Box Media's profile picture
G-Box Media3 months ago

real-time gradient shader is actually crazy. been using static gradients for everything and now i feel like i've been doing it wrong this whole time 😭

Mo's fav goat's profile picture
Mo's fav goat5 months ago

Does anybody know a free version of this or other alternatives?

robertus's profile picture
robertus5 months ago

shipping a shader tool inside what was billed as an asset library is the kind of scope creep founders pretend to apologize for. nobody is sorry. the library was just the trojan horse for the runtime

Brandon McConnell's profile picture
Brandon McConnell5 months ago

Congrats! This is huge

Basit A. Khan's profile picture
Basit A. Khan5 months ago

Thanks Brandon

ju's profile picture
ju4 months ago

help meee plsss

adeeb's profile picture
adeeb5 months ago

animated gradients is crazyy

Basit A. Khan's profile picture
Basit A. Khan5 months ago

New packs are coming man, just stay tuned

Related Videos

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

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!

Tom Yeh

961,451 views • 2 months ago

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!

Tom Yeh

17,011 views • 1 month ago