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 次观看
use `𝚏𝚘𝚌𝚞𝚜:𝚛𝚒𝚗𝚐-𝟸` instead of `𝚏𝚘𝚌𝚞𝚜:𝚋𝚘𝚛𝚍𝚎𝚛` to avoid layout shifts when you click a button
93,396 次观看
Us rohit bhai us
2,193,514 次观看
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 次观看
What you see when sam altman wants to acquire your startup
242,192 次观看
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 次观看
Haris Rauf and last moment sixes are a match made in heaven
372,167 次观看
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 次观看
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 次观看
I made it open for all 👀 Make your landing pages awesome ✨
551,185 次观看
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 次观看
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 次观看
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 次观看
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 次观看
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 次观看
That unpaid intern after the final push to prod
31,783 次观看
If your multi-step buttons jump between states, motion’s layout prop gives you clean, automatic animations
19,413 次观看
Built this with the new shadcn CLI MCP + Namespaced registry and Claude Code in around 5 minutes
30,417 次观看
Me getting claude and cursor max to build a todo app
11,880 次观看
New login page dropping at Aceternity UI Sound on 🔊