Manu Arora

@mannupaaji • 43,165 subscribers

Creator of https://t.co/4eCBc4SSJt • https://t.co/NPJalHkrux I run a web dev studio @aceternitylabs. Teaching Design engineering & Taste → https://t.co/3OQiOSxJvC

Shorts

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

107,537 views

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

93,396 views

Us rohit bhai us

2,193,514 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

65,637 views

What you see when sam altman wants to acquire your startup

242,192 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

52,351 views

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

372,167 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

14,068 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

55,350 views

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

551,185 views

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!

46,641 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 🤯🤯

66,428 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

28,212 views

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

31,783 views

If your multi-step buttons jump between states, motion’s layout prop gives you clean, automatic animations

19,413 views

Built this with the new shadcn CLI MCP + Namespaced registry and Claude Code in around 5 minutes

30,417 views

Me getting claude and cursor max to build a todo app

11,880 views

New login page dropping at Aceternity UI Sound on 🔊

12,135 views

Videos

LIVE

1.2k

Anya Rossi

sweetdream.ai

SweetDream.ai•Sponsored•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

Current Status

Live

Private Show

Join now for exclusive access

Free preview available • Premium content