Manu Arora's banner
Manu Arora's profile picture

Manu Arora

@mannupaaji • 43,427 subscribers

Building UI at https://t.co/4eCBc4SSJt Web dev studio at https://t.co/NPJalHkrux Teaching Design engineering & Taste at https://t.co/3OQiOSxJvC

Shorts

Us rohit bhai us

Us rohit bhai us

2,194,162 views

you can create a sticky navbar that morphs when you scroll with pure CSS, no JS or animation libraries required 𝚑𝚎𝚊𝚍𝚎𝚛 { 𝚌𝚘𝚗𝚝𝚊𝚒𝚗𝚎𝚛-𝚝𝚢𝚙𝚎: 𝚜𝚌𝚛𝚘𝚕𝚕-𝚜𝚝𝚊𝚝𝚎; 𝚙𝚘𝚜𝚒𝚝𝚒𝚘𝚗: 𝚜𝚝𝚒𝚌𝚔𝚢; 𝚝𝚘𝚙: 𝟶; } @𝚌𝚘𝚗𝚝𝚊𝚒𝚗𝚎𝚛 𝚜𝚌𝚛𝚘𝚕𝚕-𝚜𝚝𝚊𝚝𝚎(𝚜𝚝𝚞𝚌𝚔: 𝚝𝚘𝚙) { .𝚗𝚊𝚟-𝚋𝚊𝚛 { 𝚖𝚊𝚡-𝚠𝚒𝚍𝚝𝚑: 𝟻𝟼𝚛𝚎𝚖; 𝚋𝚘𝚛𝚍𝚎𝚛-𝚛𝚊𝚍𝚒𝚞𝚜: 𝟶.𝟽𝟻𝚛𝚎𝚖; 𝚋𝚊𝚌𝚔𝚐𝚛𝚘𝚞𝚗𝚍: 𝚛𝚐𝚋(𝟸𝟻𝟻 𝟸𝟻𝟻 𝟸𝟻𝟻 / 𝟶.𝟿𝟸); } } the browser now knows when a sticky element is stuck, all triggered by one container query available only in chromium browsers only, no firefox or safari which is a shame

you can create a sticky navbar that morphs when you scroll with pure CSS, no JS or animation libraries required 𝚑𝚎𝚊𝚍𝚎𝚛 { 𝚌𝚘𝚗𝚝𝚊𝚒𝚗𝚎𝚛-𝚝𝚢𝚙𝚎: 𝚜𝚌𝚛𝚘𝚕𝚕-𝚜𝚝𝚊𝚝𝚎; 𝚙𝚘𝚜𝚒𝚝𝚒𝚘𝚗: 𝚜𝚝𝚒𝚌𝚔𝚢; 𝚝𝚘𝚙: 𝟶; } @𝚌𝚘𝚗𝚝𝚊𝚒𝚗𝚎𝚛 𝚜𝚌𝚛𝚘𝚕𝚕-𝚜𝚝𝚊𝚝𝚎(𝚜𝚝𝚞𝚌𝚔: 𝚝𝚘𝚙) { .𝚗𝚊𝚟-𝚋𝚊𝚛 { 𝚖𝚊𝚡-𝚠𝚒𝚍𝚝𝚑: 𝟻𝟼𝚛𝚎𝚖; 𝚋𝚘𝚛𝚍𝚎𝚛-𝚛𝚊𝚍𝚒𝚞𝚜: 𝟶.𝟽𝟻𝚛𝚎𝚖; 𝚋𝚊𝚌𝚔𝚐𝚛𝚘𝚞𝚗𝚍: 𝚛𝚐𝚋(𝟸𝟻𝟻 𝟸𝟻𝟻 𝟸𝟻𝟻 / 𝟶.𝟿𝟸); } } the browser now knows when a sticky element is stuck, all triggered by one container query available only in chromium browsers only, no firefox or safari which is a shame

112,131 views

What you see when sam altman wants to acquire your startup

What you see when sam altman wants to acquire your startup

242,192 views

use `𝚏𝚘𝚌𝚞𝚜:𝚛𝚒𝚗𝚐-𝟸` instead of `𝚏𝚘𝚌𝚞𝚜:𝚋𝚘𝚛𝚍𝚎𝚛` to avoid layout shifts when you click a button

use `𝚏𝚘𝚌𝚞𝚜:𝚛𝚒𝚗𝚐-𝟸` instead of `𝚏𝚘𝚌𝚞𝚜:𝚋𝚘𝚛𝚍𝚎𝚛` to avoid layout shifts when you click a button

93,759 views

Haris Rauf and last moment sixes are a match made in heaven

Haris Rauf and last moment sixes are a match made in heaven

372,178 views

You can pin a chat scroller to the bottom with CSS 𝚘𝚟𝚎𝚛𝚏𝚕𝚘𝚠-𝚊𝚗𝚌𝚑𝚘𝚛, without having to use MutationObserver or 𝚜𝚌𝚛𝚘𝚕𝚕𝚃𝚘() functions ... ... #𝚜𝚌𝚛𝚘𝚕𝚕𝚎𝚛 * { 𝚘𝚟𝚎𝚛𝚏𝚕𝚘𝚠-𝚊𝚗𝚌𝚑𝚘𝚛: 𝚗𝚘𝚗𝚎; } #𝚊𝚗𝚌𝚑𝚘𝚛 { 𝚘𝚟𝚎𝚛𝚏𝚕𝚘𝚠-𝚊𝚗𝚌𝚑𝚘𝚛: 𝚊𝚞𝚝𝚘; 𝚑𝚎𝚒𝚐𝚑𝚝: 𝟷𝚙𝚡; } Browsers run scroll anchoring by default to prevent layout shifts Disable it on children, re-enable it on a 1px anchor at the end and the scroll follows new content down on its own

You can pin a chat scroller to the bottom with CSS 𝚘𝚟𝚎𝚛𝚏𝚕𝚘𝚠-𝚊𝚗𝚌𝚑𝚘𝚛, without having to use MutationObserver or 𝚜𝚌𝚛𝚘𝚕𝚕𝚃𝚘() functions ... ... #𝚜𝚌𝚛𝚘𝚕𝚕𝚎𝚛 * { 𝚘𝚟𝚎𝚛𝚏𝚕𝚘𝚠-𝚊𝚗𝚌𝚑𝚘𝚛: 𝚗𝚘𝚗𝚎; } #𝚊𝚗𝚌𝚑𝚘𝚛 { 𝚘𝚟𝚎𝚛𝚏𝚕𝚘𝚠-𝚊𝚗𝚌𝚑𝚘𝚛: 𝚊𝚞𝚝𝚘; 𝚑𝚎𝚒𝚐𝚑𝚝: 𝟷𝚙𝚡; } Browsers run scroll anchoring by default to prevent layout shifts Disable it on children, re-enable it on a 1px anchor at the end and the scroll follows new content down on its own

66,823 views

I made it open for all 👀 Make your landing pages awesome ✨

I made it open for all 👀 Make your landing pages awesome ✨

560,253 views

Use 𝚟𝚒𝚎𝚠-𝚝𝚛𝚊𝚗𝚜𝚒𝚝𝚒𝚘𝚗𝚜 and 𝚌𝚕𝚒𝚙-𝚙𝚊𝚝𝚑 to animate theme switches instead of flipping them with a transition 𝚍𝚘𝚌𝚞𝚖𝚎𝚗𝚝.𝚍𝚘𝚌𝚞𝚖𝚎𝚗𝚝𝙴𝚕𝚎𝚖𝚎𝚗𝚝.𝚊𝚗𝚒𝚖𝚊𝚝𝚎( { 𝚌𝚕𝚒𝚙𝙿𝚊𝚝𝚑: ["𝚒𝚗𝚜𝚎𝚝(𝟶 𝟶 𝟷𝟶𝟶% 𝟶)", "𝚒𝚗𝚜𝚎𝚝(𝟶)"] }, { 𝚙𝚜𝚎𝚞𝚍𝚘𝙴𝚕𝚎𝚖𝚎𝚗𝚝: "::𝚟𝚒𝚎𝚠-𝚝𝚛𝚊𝚗𝚜𝚒𝚝𝚒𝚘𝚗-𝚗𝚎𝚠(𝚛𝚘𝚘𝚝)", 𝚍𝚞𝚛𝚊𝚝𝚒𝚘𝚗: 𝟼𝟶𝟶 }, ), ::𝚟𝚒𝚎𝚠-𝚝𝚛𝚊𝚗𝚜𝚒𝚝𝚒𝚘𝚗-𝚗𝚎𝚠(𝚛𝚘𝚘𝚝) { 𝚊𝚗𝚒𝚖𝚊𝚝𝚒𝚘𝚗: 𝚗𝚘𝚗𝚎; 𝚖𝚒𝚡-𝚋𝚕𝚎𝚗𝚍-𝚖𝚘𝚍𝚎: 𝚗𝚘𝚛𝚖𝚊𝚕; } Here the clipPath ensures the transition happens from top to bottom

Use 𝚟𝚒𝚎𝚠-𝚝𝚛𝚊𝚗𝚜𝚒𝚝𝚒𝚘𝚗𝚜 and 𝚌𝚕𝚒𝚙-𝚙𝚊𝚝𝚑 to animate theme switches instead of flipping them with a transition 𝚍𝚘𝚌𝚞𝚖𝚎𝚗𝚝.𝚍𝚘𝚌𝚞𝚖𝚎𝚗𝚝𝙴𝚕𝚎𝚖𝚎𝚗𝚝.𝚊𝚗𝚒𝚖𝚊𝚝𝚎( { 𝚌𝚕𝚒𝚙𝙿𝚊𝚝𝚑: ["𝚒𝚗𝚜𝚎𝚝(𝟶 𝟶 𝟷𝟶𝟶% 𝟶)", "𝚒𝚗𝚜𝚎𝚝(𝟶)"] }, { 𝚙𝚜𝚎𝚞𝚍𝚘𝙴𝚕𝚎𝚖𝚎𝚗𝚝: "::𝚟𝚒𝚎𝚠-𝚝𝚛𝚊𝚗𝚜𝚒𝚝𝚒𝚘𝚗-𝚗𝚎𝚠(𝚛𝚘𝚘𝚝)", 𝚍𝚞𝚛𝚊𝚝𝚒𝚘𝚗: 𝟼𝟶𝟶 }, ), ::𝚟𝚒𝚎𝚠-𝚝𝚛𝚊𝚗𝚜𝚒𝚝𝚒𝚘𝚗-𝚗𝚎𝚠(𝚛𝚘𝚘𝚝) { 𝚊𝚗𝚒𝚖𝚊𝚝𝚒𝚘𝚗: 𝚗𝚘𝚗𝚎; 𝚖𝚒𝚡-𝚋𝚕𝚎𝚗𝚍-𝚖𝚘𝚍𝚎: 𝚗𝚘𝚛𝚖𝚊𝚕; } Here the clipPath ensures the transition happens from top to bottom

53,624 views

you can create a CSS only carousel with CSS `𝚜𝚌𝚛𝚘𝚕𝚕-𝚜𝚗𝚊𝚙` .𝚜𝚌𝚛𝚘𝚕𝚕𝚎𝚛 { 𝚘𝚟𝚎𝚛𝚏𝚕𝚘𝚠-𝚡: 𝚊𝚞𝚝𝚘; 𝚜𝚌𝚛𝚘𝚕𝚕-𝚜𝚗𝚊𝚙-𝚝𝚢𝚙𝚎: 𝚡 𝚖𝚊𝚗𝚍𝚊𝚝𝚘𝚛𝚢; 𝚜𝚌𝚛𝚘𝚕𝚕-𝚙𝚊𝚍𝚍𝚒𝚗𝚐-𝚒𝚗𝚕𝚒𝚗𝚎: 𝟷.𝟻𝚛𝚎𝚖; /* 𝚖𝚊𝚝𝚌𝚑𝚎𝚜 𝚢𝚘𝚞𝚛 𝚜𝚌𝚛𝚘𝚕𝚕-𝚙𝚕/𝚙𝚛 */ } .𝚌𝚊𝚛𝚍 { 𝚜𝚌𝚛𝚘𝚕𝚕-𝚜𝚗𝚊𝚙-𝚊𝚕𝚒𝚐𝚗: 𝚌𝚎𝚗𝚝𝚎𝚛; 𝚏𝚕𝚎𝚡-𝚜𝚑𝚛𝚒𝚗𝚔: 𝟶; } When you scroll, it snaps exactly in the center of the card Super fun to use, easy to implement, no javascript required

you can create a CSS only carousel with CSS `𝚜𝚌𝚛𝚘𝚕𝚕-𝚜𝚗𝚊𝚙` .𝚜𝚌𝚛𝚘𝚕𝚕𝚎𝚛 { 𝚘𝚟𝚎𝚛𝚏𝚕𝚘𝚠-𝚡: 𝚊𝚞𝚝𝚘; 𝚜𝚌𝚛𝚘𝚕𝚕-𝚜𝚗𝚊𝚙-𝚝𝚢𝚙𝚎: 𝚡 𝚖𝚊𝚗𝚍𝚊𝚝𝚘𝚛𝚢; 𝚜𝚌𝚛𝚘𝚕𝚕-𝚙𝚊𝚍𝚍𝚒𝚗𝚐-𝚒𝚗𝚕𝚒𝚗𝚎: 𝟷.𝟻𝚛𝚎𝚖; /* 𝚖𝚊𝚝𝚌𝚑𝚎𝚜 𝚢𝚘𝚞𝚛 𝚜𝚌𝚛𝚘𝚕𝚕-𝚙𝚕/𝚙𝚛 */ } .𝚌𝚊𝚛𝚍 { 𝚜𝚌𝚛𝚘𝚕𝚕-𝚜𝚗𝚊𝚙-𝚊𝚕𝚒𝚐𝚗: 𝚌𝚎𝚗𝚝𝚎𝚛; 𝚏𝚕𝚎𝚡-𝚜𝚑𝚛𝚒𝚗𝚔: 𝟶; } When you scroll, it snaps exactly in the center of the card Super fun to use, easy to implement, no javascript required

56,137 views

Smooth Edges for Marquees with CSS Mask 𝚖𝚊𝚜𝚔-𝚕-𝚏𝚛𝚘𝚖-𝟾𝟶% 𝚖𝚊𝚜𝚔-𝚛-𝚏𝚛𝚘𝚖-𝟾𝟶% Can be used on card skeletons, marquees, or anywhere you want to smooth out the edges.

Smooth Edges for Marquees with CSS Mask 𝚖𝚊𝚜𝚔-𝚕-𝚏𝚛𝚘𝚖-𝟾𝟶% 𝚖𝚊𝚜𝚔-𝚛-𝚏𝚛𝚘𝚖-𝟾𝟶% Can be used on card skeletons, marquees, or anywhere you want to smooth out the edges.

58,395 views

One of my favourites latest CSS property is 𝚊𝚗𝚌𝚑𝚘𝚛 𝚙𝚘𝚜𝚒𝚝𝚒𝚘𝚗𝚒𝚗𝚐 .𝚝𝚛𝚒𝚐𝚐𝚎𝚛 { 𝚊𝚗𝚌𝚑𝚘𝚛-𝚗𝚊𝚖𝚎: --𝚝𝚒𝚙; } .𝚝𝚘𝚘𝚕𝚝𝚒𝚙 { 𝚙𝚘𝚜𝚒𝚝𝚒𝚘𝚗: 𝚏𝚒𝚡𝚎𝚍; 𝚙𝚘𝚜𝚒𝚝𝚒𝚘𝚗-𝚊𝚗𝚌𝚑𝚘𝚛: --𝚝𝚒𝚙; 𝚙𝚘𝚜𝚒𝚝𝚒𝚘𝚗-𝚊𝚛𝚎𝚊: 𝚝𝚘𝚙 𝚌𝚎𝚗𝚝𝚎𝚛; 𝚙𝚘𝚜𝚒𝚝𝚒𝚘𝚗-𝚝𝚛𝚢-𝚏𝚊𝚕𝚕𝚋𝚊𝚌𝚔𝚜: 𝚏𝚕𝚒𝚙-𝚋𝚕𝚘𝚌𝚔; } Eliminates complex javascript logic or positioning, improved performance. Best part is the smart repositioning to avoid overflow Simple, clean solution!

One of my favourites latest CSS property is 𝚊𝚗𝚌𝚑𝚘𝚛 𝚙𝚘𝚜𝚒𝚝𝚒𝚘𝚗𝚒𝚗𝚐 .𝚝𝚛𝚒𝚐𝚐𝚎𝚛 { 𝚊𝚗𝚌𝚑𝚘𝚛-𝚗𝚊𝚖𝚎: --𝚝𝚒𝚙; } .𝚝𝚘𝚘𝚕𝚝𝚒𝚙 { 𝚙𝚘𝚜𝚒𝚝𝚒𝚘𝚗: 𝚏𝚒𝚡𝚎𝚍; 𝚙𝚘𝚜𝚒𝚝𝚒𝚘𝚗-𝚊𝚗𝚌𝚑𝚘𝚛: --𝚝𝚒𝚙; 𝚙𝚘𝚜𝚒𝚝𝚒𝚘𝚗-𝚊𝚛𝚎𝚊: 𝚝𝚘𝚙 𝚌𝚎𝚗𝚝𝚎𝚛; 𝚙𝚘𝚜𝚒𝚝𝚒𝚘𝚗-𝚝𝚛𝚢-𝚏𝚊𝚕𝚕𝚋𝚊𝚌𝚔𝚜: 𝚏𝚕𝚒𝚙-𝚋𝚕𝚘𝚌𝚔; } Eliminates complex javascript logic or positioning, improved performance. Best part is the smart repositioning to avoid overflow Simple, clean solution!

47,091 views

I asked OpenClaw to play Forza Horizon for me and it DID As you can see, the keyboard and mouse are in front of me, so it's the bot who's playing, trust me Now I can go back to coding while the AI can have fun playing games Its just perfectttt, CRAZYYY!!!!!!!111111 🤯🤯

I asked OpenClaw to play Forza Horizon for me and it DID As you can see, the keyboard and mouse are in front of me, so it's the bot who's playing, trust me Now I can go back to coding while the AI can have fun playing games Its just perfectttt, CRAZYYY!!!!!!!111111 🤯🤯

66,428 views

Use CSS @𝚙𝚛𝚘𝚙𝚎𝚛𝚝𝚢 to unlock things like > Animated conic gradients > Rotating borders, loaders > Hover transition on gradient stops the regular --𝚊𝚗𝚐𝚕𝚎 variable doesn't work with animating gradient stops because CSS has to idea how to interpolate it @𝚙𝚛𝚘𝚙𝚎𝚛𝚝𝚢 fixes that with , and more @𝚙𝚛𝚘𝚙𝚎𝚛𝚝𝚢 --𝚊𝚗𝚐𝚕𝚎 { 𝚜𝚢𝚗𝚝𝚊𝚡: ' '; 𝚒𝚗𝚑𝚎𝚛𝚒𝚝𝚜: 𝚏𝚊𝚕𝚜𝚎; 𝚒𝚗𝚒𝚝𝚒𝚊𝚕-𝚟𝚊𝚕𝚞𝚎: 𝟶𝚍𝚎𝚐; } .𝚌𝚊𝚛𝚍 { --𝚊𝚗𝚐𝚕𝚎: 𝟶𝚍𝚎𝚐; 𝚋𝚊𝚌𝚔𝚐𝚛𝚘𝚞𝚗𝚍: 𝚕𝚒𝚗𝚎𝚊𝚛-𝚐𝚛𝚊𝚍𝚒𝚎𝚗𝚝( 𝚟𝚊𝚛(--𝚊𝚗𝚐𝚕𝚎), #𝟹𝟾𝚋𝚍𝚏𝟾, #𝟶𝚎𝚊𝟻𝚎𝟿, #𝟸𝟻𝟼𝟹𝚎𝚋, #𝟷𝚎𝟺𝟶𝚊𝚏 ); 𝚝𝚛𝚊𝚗𝚜𝚒𝚝𝚒𝚘𝚗: --𝚊𝚗𝚐𝚕𝚎 𝟶.𝟾𝚜 𝚎𝚊𝚜𝚎; } .𝚌𝚊𝚛𝚍:𝚑𝚘𝚟𝚎𝚛 { --𝚊𝚗𝚐𝚕𝚎: 𝟺𝟻𝚍𝚎𝚐; } Defaults to initial value so you don't have to set them everytime

Use CSS @𝚙𝚛𝚘𝚙𝚎𝚛𝚝𝚢 to unlock things like > Animated conic gradients > Rotating borders, loaders > Hover transition on gradient stops the regular --𝚊𝚗𝚐𝚕𝚎 variable doesn't work with animating gradient stops because CSS has to idea how to interpolate it @𝚙𝚛𝚘𝚙𝚎𝚛𝚝𝚢 fixes that with , and more @𝚙𝚛𝚘𝚙𝚎𝚛𝚝𝚢 --𝚊𝚗𝚐𝚕𝚎 { 𝚜𝚢𝚗𝚝𝚊𝚡: ' '; 𝚒𝚗𝚑𝚎𝚛𝚒𝚝𝚜: 𝚏𝚊𝚕𝚜𝚎; 𝚒𝚗𝚒𝚝𝚒𝚊𝚕-𝚟𝚊𝚕𝚞𝚎: 𝟶𝚍𝚎𝚐; } .𝚌𝚊𝚛𝚍 { --𝚊𝚗𝚐𝚕𝚎: 𝟶𝚍𝚎𝚐; 𝚋𝚊𝚌𝚔𝚐𝚛𝚘𝚞𝚗𝚍: 𝚕𝚒𝚗𝚎𝚊𝚛-𝚐𝚛𝚊𝚍𝚒𝚎𝚗𝚝( 𝚟𝚊𝚛(--𝚊𝚗𝚐𝚕𝚎), #𝟹𝟾𝚋𝚍𝚏𝟾, #𝟶𝚎𝚊𝟻𝚎𝟿, #𝟸𝟻𝟼𝟹𝚎𝚋, #𝟷𝚎𝟺𝟶𝚊𝚏 ); 𝚝𝚛𝚊𝚗𝚜𝚒𝚝𝚒𝚘𝚗: --𝚊𝚗𝚐𝚕𝚎 𝟶.𝟾𝚜 𝚎𝚊𝚜𝚎; } .𝚌𝚊𝚛𝚍:𝚑𝚘𝚟𝚎𝚛 { --𝚊𝚗𝚐𝚕𝚎: 𝟺𝟻𝚍𝚎𝚐; } Defaults to initial value so you don't have to set them everytime

23,868 views

I don't know what a vestaboard is here's a component that flips characters - Pass in an array of messages / a single message to display - Import via shadcn CLI or Open in v0 - Light and dark mode - Mobile responsive Built with Claude Opus 4.6 High + Composer 2 in around an hour, 40 minutes out of which were spent on detailing of individual box and their colors

I don't know what a vestaboard is here's a component that flips characters - Pass in an array of messages / a single message to display - Import via shadcn CLI or Open in v0 - Light and dark mode - Mobile responsive Built with Claude Opus 4.6 High + Composer 2 in around an hour, 40 minutes out of which were spent on detailing of individual box and their colors

32,300 views

Use 𝚜𝚒𝚋𝚕𝚒𝚗𝚐-𝚒𝚗𝚍𝚎𝚡() to stagger children of a parent without having to manually track a using --𝚒 𝚟𝚊𝚛𝚒𝚊𝚋𝚕𝚎𝚜 or having to use an animation library .𝚒𝚝𝚎𝚖 { 𝚊𝚗𝚒𝚖𝚊𝚝𝚒𝚘𝚗: 𝚎𝚗𝚝𝚎𝚛 𝟶.𝟺𝟻𝚜 𝚌𝚞𝚋𝚒𝚌-𝚋𝚎𝚣𝚒𝚎𝚛(𝟶.𝟸𝟸, 𝟷, 𝟶.𝟹𝟼, 𝟷) 𝚋𝚘𝚝𝚑; 𝚊𝚗𝚒𝚖𝚊𝚝𝚒𝚘𝚗-𝚍𝚎𝚕𝚊𝚢: 𝚌𝚊𝚕𝚌(𝟶.𝟷𝟸𝚜 * (𝚜𝚒𝚋𝚕𝚒𝚗𝚐-𝚒𝚗𝚍𝚎𝚡() - 𝟷)); } @𝚔𝚎𝚢𝚏𝚛𝚊𝚖𝚎𝚜 𝚎𝚗𝚝𝚎𝚛 { 𝚏𝚛𝚘𝚖 { 𝚘𝚙𝚊𝚌𝚒𝚝𝚢: 𝟶; 𝚝𝚛𝚊𝚗𝚜𝚏𝚘𝚛𝚖: 𝚝𝚛𝚊𝚗𝚜𝚕𝚊𝚝𝚎𝚈(𝟼𝚙𝚡); } 𝚝𝚘 { 𝚘𝚙𝚊𝚌𝚒𝚝𝚢: 𝟷; 𝚝𝚛𝚊𝚗𝚜𝚏𝚘𝚛𝚖: 𝚝𝚛𝚊𝚗𝚜𝚕𝚊𝚝𝚎𝚈(𝟶); } } Clean and minimal approach for stagger animations

Use 𝚜𝚒𝚋𝚕𝚒𝚗𝚐-𝚒𝚗𝚍𝚎𝚡() to stagger children of a parent without having to manually track a using --𝚒 𝚟𝚊𝚛𝚒𝚊𝚋𝚕𝚎𝚜 or having to use an animation library .𝚒𝚝𝚎𝚖 { 𝚊𝚗𝚒𝚖𝚊𝚝𝚒𝚘𝚗: 𝚎𝚗𝚝𝚎𝚛 𝟶.𝟺𝟻𝚜 𝚌𝚞𝚋𝚒𝚌-𝚋𝚎𝚣𝚒𝚎𝚛(𝟶.𝟸𝟸, 𝟷, 𝟶.𝟹𝟼, 𝟷) 𝚋𝚘𝚝𝚑; 𝚊𝚗𝚒𝚖𝚊𝚝𝚒𝚘𝚗-𝚍𝚎𝚕𝚊𝚢: 𝚌𝚊𝚕𝚌(𝟶.𝟷𝟸𝚜 * (𝚜𝚒𝚋𝚕𝚒𝚗𝚐-𝚒𝚗𝚍𝚎𝚡() - 𝟷)); } @𝚔𝚎𝚢𝚏𝚛𝚊𝚖𝚎𝚜 𝚎𝚗𝚝𝚎𝚛 { 𝚏𝚛𝚘𝚖 { 𝚘𝚙𝚊𝚌𝚒𝚝𝚢: 𝟶; 𝚝𝚛𝚊𝚗𝚜𝚏𝚘𝚛𝚖: 𝚝𝚛𝚊𝚗𝚜𝚕𝚊𝚝𝚎𝚈(𝟼𝚙𝚡); } 𝚝𝚘 { 𝚘𝚙𝚊𝚌𝚒𝚝𝚢: 𝟷; 𝚝𝚛𝚊𝚗𝚜𝚏𝚘𝚛𝚖: 𝚝𝚛𝚊𝚗𝚜𝚕𝚊𝚝𝚎𝚈(𝟶); } } Clean and minimal approach for stagger animations

28,431 views

i had to recreate this animation from because of how cool it is - stagger animation on entry - hover to reveal card contents - masked gradient on text on hover

i had to recreate this animation from because of how cool it is - stagger animation on entry - hover to reveal card contents - masked gradient on text on hover

12,010 views

your modal scrolls. your page scrolls too. that’s scroll chaining. put 𝚘𝚟𝚎𝚛𝚜𝚌𝚛𝚘𝚕𝚕-𝚌𝚘𝚗𝚝𝚊𝚒𝚗 on the scrollable part of the modal and the background won't scroll with your modal

your modal scrolls. your page scrolls too. that’s scroll chaining. put 𝚘𝚟𝚎𝚛𝚜𝚌𝚛𝚘𝚕𝚕-𝚌𝚘𝚗𝚝𝚊𝚒𝚗 on the scrollable part of the modal and the background won't scroll with your modal

14,398 views

Create image reveal effects with CSS 𝚌𝚕𝚒𝚙-𝚙𝚊𝚝𝚑 .𝚛𝚎𝚟𝚎𝚊𝚕 { 𝚌𝚕𝚒𝚙-𝚙𝚊𝚝𝚑: 𝚒𝚗𝚜𝚎𝚝(𝟶 𝟷𝟶𝟶% 𝟶 𝟶); 𝚊𝚗𝚒𝚖𝚊𝚝𝚒𝚘𝚗: 𝚜𝚑𝚘𝚠-𝚒𝚖𝚊𝚐𝚎 𝟷𝚜 𝚏𝚘𝚛𝚠𝚊𝚛𝚍𝚜 𝚕𝚒𝚗𝚎𝚊𝚛; } @𝚔𝚎𝚢𝚏𝚛𝚊𝚖𝚎𝚜 𝚜𝚑𝚘𝚠-𝚒𝚖𝚊𝚐𝚎 { 𝚝𝚘 { 𝚌𝚕𝚒𝚙-𝚙𝚊𝚝𝚑: 𝚒𝚗𝚜𝚎𝚝(𝟶 𝟶 𝟶 𝟶); } } Perfect for reveal effects, easy to implement

Create image reveal effects with CSS 𝚌𝚕𝚒𝚙-𝚙𝚊𝚝𝚑 .𝚛𝚎𝚟𝚎𝚊𝚕 { 𝚌𝚕𝚒𝚙-𝚙𝚊𝚝𝚑: 𝚒𝚗𝚜𝚎𝚝(𝟶 𝟷𝟶𝟶% 𝟶 𝟶); 𝚊𝚗𝚒𝚖𝚊𝚝𝚒𝚘𝚗: 𝚜𝚑𝚘𝚠-𝚒𝚖𝚊𝚐𝚎 𝟷𝚜 𝚏𝚘𝚛𝚠𝚊𝚛𝚍𝚜 𝚕𝚒𝚗𝚎𝚊𝚛; } @𝚔𝚎𝚢𝚏𝚛𝚊𝚖𝚎𝚜 𝚜𝚑𝚘𝚠-𝚒𝚖𝚊𝚐𝚎 { 𝚝𝚘 { 𝚌𝚕𝚒𝚙-𝚙𝚊𝚝𝚑: 𝚒𝚗𝚜𝚎𝚝(𝟶 𝟶 𝟶 𝟶); } } Perfect for reveal effects, easy to implement

22,836 views

I don't think its usable but it was a fun little experiment built with Three.js Motion Tailwind CSS and Next.js

I don't think its usable but it was a fun little experiment built with Three.js Motion Tailwind CSS and Next.js

25,757 views

That unpaid intern after the final push to prod

That unpaid intern after the final push to prod

31,783 views

Videos

LIVE
1.2k

Anya Rossi

sweetdream.ai

SweetDream.aiSponsored•Livecam
Streaming Now

Watch Anya Live

Anya is streaming live right now! Join her private show and enjoy exclusive content.

HD live stream
Exclusive private shows
1.2k viewers online

Free preview available • Premium content

Hello folks at @x this is how you can fix this layout shift happening on icon hover :)
0:40
mannupaaji's profile picture

Hello folks at @x this is how you can fix this layout shift happening on icon hover :)

Manu Arora

107,484 views • 2 months ago

since i don't have a PS5 and cant really play the game, i went on the GTA VI preorder site and noticed their hero animation it was soo cool i had to recreate it with Motion they're rendering images on a canvas (all of the poster images are separate pngs) and once the animation is done, they remove it from the DOM i went ahead with a far simpler implementation code below ↓
0:20
mannupaaji's profile picture

since i don't have a PS5 and cant really play the game, i went on the GTA VI preorder site and noticed their hero animation it was soo cool i had to recreate it with Motion they're rendering images on a canvas (all of the poster images are separate pngs) and once the animation is done, they remove it from the DOM i went ahead with a far simpler implementation code below ↓

Manu Arora

17,922 views • 23 days ago

With and without frontend-design skill
0:34
mannupaaji's profile picture

With and without frontend-design skill

Manu Arora

75,102 views • 5 months ago

experimenting with the new `𝚊𝚛𝚌` API by Motion i'm still in awe that i have to just add `𝚝𝚛𝚊𝚗𝚜𝚒𝚝𝚒𝚘𝚗={{𝚙𝚊𝚝𝚑: 𝚊𝚛𝚌()}}` to a motion div and call it a day 😌
0:22
mannupaaji's profile picture

experimenting with the new `𝚊𝚛𝚌` API by Motion i'm still in awe that i have to just add `𝚝𝚛𝚊𝚗𝚜𝚒𝚝𝚒𝚘𝚗={{𝚙𝚊𝚝𝚑: 𝚊𝚛𝚌()}}` to a motion div and call it a day 😌

Manu Arora

14,906 views • 29 days ago

tried recreating the dropdown from Aave 's liquid glass component page i was not able to nail the exact 𝚌𝚕𝚒𝚙𝙿𝚊𝚝𝚑 animation but implemented a few interesting details - svg filter for gooey dropdown transition (gaussian blue + color-matrix) - CSS clip-path 𝚜𝚑𝚊𝚙𝚎() morphing a rounded rect into the panel tinker with it here ↓
0:24
mannupaaji's profile picture

tried recreating the dropdown from Aave 's liquid glass component page i was not able to nail the exact 𝚌𝚕𝚒𝚙𝙿𝚊𝚝𝚑 animation but implemented a few interesting details - svg filter for gooey dropdown transition (gaussian blue + color-matrix) - CSS clip-path 𝚜𝚑𝚊𝚙𝚎() morphing a rounded rect into the panel tinker with it here ↓

Manu Arora

15,160 views • 1 month ago

Best way to practice DSA on Leetcode
0:27
mannupaaji's profile picture

Best way to practice DSA on Leetcode

Manu Arora

78,873 views • 1 year ago

Introducing the 𝚃𝙴𝚁𝙼𝙸𝙽𝙰𝙻 component - Completely customizable, pass in inputs and outputs - Enable and disable keystroke sounds - Syntax highlighting - Blip cursor - Sequential animation execution Available for free at Aceternity UI
0:29
mannupaaji's profile picture

Introducing the 𝚃𝙴𝚁𝙼𝙸𝙽𝙰𝙻 component - Completely customizable, pass in inputs and outputs - Enable and disable keystroke sounds - Syntax highlighting - Blip cursor - Sequential animation execution Available for free at Aceternity UI

Manu Arora

27,497 views • 4 months ago

New set of illustrations at Aceternity UI
0:21
mannupaaji's profile picture

New set of illustrations at Aceternity UI

Manu Arora

16,261 views • 4 months ago

Coming veryyyy soooooon! 🔥
1:11
mannupaaji's profile picture

Coming veryyyy soooooon! 🔥

Manu Arora

48,509 views • 1 year ago

Skills >>>>>>>>>
2:07
mannupaaji's profile picture

Skills >>>>>>>>>

Manu Arora

44,554 views • 1 year ago

Such a beautiful implementation of Aceternity components ✨ Looks fire, amazing work by the team at Dukaan® Subhash Choudhary Suumit Shah
0:30
mannupaaji's profile picture

Such a beautiful implementation of Aceternity components ✨ Looks fire, amazing work by the team at Dukaan® Subhash Choudhary Suumit Shah

Manu Arora

34,205 views • 1 year ago

Skills over anything
0:54
mannupaaji's profile picture

Skills over anything

Manu Arora

14,537 views • 6 months ago

Day in the life of a tech entrepreneur
1:29
mannupaaji's profile picture

Day in the life of a tech entrepreneur

Manu Arora

14,217 views • 6 months ago

Beautiful landing page by Sarvam
0:26
mannupaaji's profile picture

Beautiful landing page by Sarvam

Manu Arora

11,090 views • 5 months ago

Indian streets and roads are vibe coded.
0:24
mannupaaji's profile picture

Indian streets and roads are vibe coded.

Manu Arora

19,414 views • 11 months ago

How to get a remote job / any job ✨
1:29
mannupaaji's profile picture

How to get a remote job / any job ✨

Manu Arora

18,812 views • 1 year ago

Little joys of life. ❤️
0:24
mannupaaji's profile picture

Little joys of life. ❤️

Manu Arora

15,015 views • 1 year ago

🎉 Introducing Portfolio Template A clean, minimal portfolio website that focuses on your projects and experience
0:57
mannupaaji's profile picture

🎉 Introducing Portfolio Template A clean, minimal portfolio website that focuses on your projects and experience

Manu Arora

10,373 views • 1 year ago

The official demo app for Strapi, powered by Aceternity ✨ Here's a peek at what the website looks like.
1:02
mannupaaji's profile picture

The official demo app for Strapi, powered by Aceternity ✨ Here's a peek at what the website looks like.

Manu Arora

11,945 views • 1 year ago