Manu Arora's banner

Manu Arora

@mannupaaji • 43,813 subscribers

Making the web a little less boring https://t.co/4eCBc4SkTV https://t.co/c4SvbdO3wY https://t.co/0jrp6s2bTB https://t.co/NPJalHjTEZ Studio → https://t.co/NPJalHjTEZ YT → https://t.co/IXzMzzymx4

Shorts

Presenting the Mahindra Thar Roadster, built for crossing toll booths.

Presenting the Mahindra Thar Roadster, built for crossing toll booths.

101,553 просмотров

Us rohit bhai us

Us rohit bhai us

2,195,541 просмотров

Im at PVR jaipur and they paused the movie MID SCENE for an interval lmao Peak OTT experience

Im at PVR jaipur and they paused the movie MID SCENE for an interval lmao Peak OTT experience

128,924 просмотров

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,205 просмотров

What you see when sam altman wants to acquire your startup

What you see when sam altman wants to acquire your startup

242,464 просмотров

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

113,976 просмотров

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

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

572,726 просмотров

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

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

94,317 просмотров

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

67,828 просмотров

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

54,263 просмотров

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,635 просмотров

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 просмотров

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,470 просмотров

These blocks work really well with as well can't believe it was just a single prompt and i get THIS!! thankyou so much for this Simon Le Marchant

These blocks work really well with as well can't believe it was just a single prompt and i get THIS!! thankyou so much for this Simon Le Marchant

28,572 просмотров

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,244 просмотров

Introducing 𝙲𝚕𝚘𝚞𝚍 𝚂𝚑𝚊𝚍𝚎𝚛 on Aceternity UI and - Realistic clouds, 100% customizable - Change colors, shape, size, number, pretty much everything - The video is one such example of the usage 100% free, available on

Introducing 𝙲𝚕𝚘𝚞𝚍 𝚂𝚑𝚊𝚍𝚎𝚛 on Aceternity UI and - Realistic clouds, 100% customizable - Change colors, shape, size, number, pretty much everything - The video is one such example of the usage 100% free, available on

16,722 просмотров

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 просмотров

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,615 просмотров

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 просмотров

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 просмотров

Videos

Anya Rossi

sweetdream.ai

SweetDream.ai•Sponsored•Livecam

Watch Anya Live

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

Exclusive private shows

1.2k viewers online

Private Show

Join now for exclusive access

Free preview available • Premium content

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

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

107,662 просмотров • 5 месяцев назад

With and without frontend-design skill

With and without frontend-design skill

75,102 просмотров • 8 месяцев назад

Best way to practice DSA on Leetcode

Best way to practice DSA on Leetcode

79,091 просмотров • 1 год назад

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 ↓

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 ↓

17,922 просмотров • 3 месяцев назад

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

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

27,585 просмотров • 7 месяцев назад

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 ↓

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 ↓

15,969 просмотров • 4 месяцев назад

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 😌

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 😌

14,906 просмотров • 4 месяцев назад

Coming veryyyy soooooon! 🔥

Coming veryyyy soooooon! 🔥

48,525 просмотров • 1 год назад

Skills >>>>>>>>>

Skills >>>>>>>>>

44,666 просмотров • 1 год назад

recreated this animation using 𝚜𝚟𝚐 𝚙𝚊𝚝𝚑 𝚖𝚘𝚛𝚙𝚑𝚒𝚗𝚐 built both icons from the same 4-point shapes to morph a pause icon → play icon, i split the triangle into 2 halves, matching the 2 bars motion morphs the svg paths smoothly 𝚌𝚘𝚗𝚜𝚝 𝙿𝙰𝚄𝚂𝙴 = { 𝚕𝚎𝚏𝚝: "𝙼𝟻 𝟻𝙻𝟿 𝟻𝙻𝟿 𝟷𝟿𝙻𝟻 𝟷𝟿𝚉", 𝚛𝚒𝚐𝚑𝚝: "𝙼𝟷𝟻 𝟻𝙻𝟷𝟿 𝟻𝙻𝟷𝟿 𝟷𝟿𝙻𝟷𝟻 𝟷𝟿𝚉" }; 𝚌𝚘𝚗𝚜𝚝 𝙿𝙻𝙰𝚈 = { 𝚕𝚎𝚏𝚝: "𝙼𝟽 𝟻𝙻𝟷𝟹 𝟾.𝟻𝙻𝟷𝟹 𝟷𝟻.𝟻𝙻𝟽 𝟷𝟿𝚉", 𝚛𝚒𝚐𝚑𝚝: "𝙼𝟷𝟹 𝟾.𝟻𝙻𝟷𝟿 𝟷𝟸𝙻𝟷𝟿 𝟷𝟸𝙻𝟷𝟹 𝟷𝟻.𝟻𝚉" }; code below if you'd like to play with it

recreated this animation using 𝚜𝚟𝚐 𝚙𝚊𝚝𝚑 𝚖𝚘𝚛𝚙𝚑𝚒𝚗𝚐 built both icons from the same 4-point shapes to morph a pause icon → play icon, i split the triangle into 2 halves, matching the 2 bars motion morphs the svg paths smoothly 𝚌𝚘𝚗𝚜𝚝 𝙿𝙰𝚄𝚂𝙴 = { 𝚕𝚎𝚏𝚝: "𝙼𝟻 𝟻𝙻𝟿 𝟻𝙻𝟿 𝟷𝟿𝙻𝟻 𝟷𝟿𝚉", 𝚛𝚒𝚐𝚑𝚝: "𝙼𝟷𝟻 𝟻𝙻𝟷𝟿 𝟻𝙻𝟷𝟿 𝟷𝟿𝙻𝟷𝟻 𝟷𝟿𝚉" }; 𝚌𝚘𝚗𝚜𝚝 𝙿𝙻𝙰𝚈 = { 𝚕𝚎𝚏𝚝: "𝙼𝟽 𝟻𝙻𝟷𝟹 𝟾.𝟻𝙻𝟷𝟹 𝟷𝟻.𝟻𝙻𝟽 𝟷𝟿𝚉", 𝚛𝚒𝚐𝚑𝚝: "𝙼𝟷𝟹 𝟾.𝟻𝙻𝟷𝟿 𝟷𝟸𝙻𝟷𝟿 𝟷𝟸𝙻𝟷𝟹 𝟷𝟻.𝟻𝚉" }; code below if you'd like to play with it

10,606 просмотров • 4 месяцев назад

New set of illustrations at Aceternity UI

New set of illustrations at Aceternity UI

16,261 просмотров • 7 месяцев назад

Skills over anything

Skills over anything

14,537 просмотров • 9 месяцев назад

Indian streets and roads are vibe coded.

Indian streets and roads are vibe coded.

19,414 просмотров • 1 год назад

Day in the life of a tech entrepreneur

Day in the life of a tech entrepreneur

14,224 просмотров • 10 месяцев назад

Beautiful landing page by Sarvam

Beautiful landing page by Sarvam

11,090 просмотров • 8 месяцев назад

How to get a remote job / any job ✨

How to get a remote job / any job ✨

18,812 просмотров • 1 год назад