This content originally appeared on Bram.us and was authored by Bramus!
I recreated the Google Antigravity website with Modern CSS.
~
Recently, Google Antigravity was released along with a website with info about it. The thing that caught my eye immediately when browsing that site, is that the scrolling felt uncanny. One DevTools session later and I found out that the site is using scroll-jacking and does not use any of the Modern CSS feature.
~
Being a CSS/UI DevRel for Chrome, I nerd sniped myself into recreating the website using Modern CSS Features:
- CSS
@starting-style - A Houdini PaintWorklet for the ring particles.
- Size Container Queries
- CSS
@scope - CSS Anchor Positioning
- CSS Carousels
overscroll-behavior: contain;on a non-scrollable scroll containerscroll-state(scrolled: …)scroll queries to create a hidey bar- CSS Scroll-Triggered Animations (which is admittedly a bit buggy in Chrome Canary right now)
- CSS
sibling-index()(would have loved to userandom()but that’s not available in Chrome) - CSS Scroll-Driven Animations
(Not included in this list are things I consider basic nowadays: Responsive Design, Cascade Layers, CSS Nesting, Custom Properties, …)
The only bit of JavaScript used is the registration of the PaintWorklet, and a tad of JS to sync the cursor’s position to two custom properties for the CSS to use.
~
You can check out the recreation on CodePen. You must use Chrome Canary to see the latest niceties in action.
If you are not using Google Chrome Canary (or not using Chrome at all) don’t worry: the site was built with Progressive Enhancement in mind and everything – except @scope 😔 – is feature-detected with @supports. So even if your browser understands only a fragment of the Modern CSS that is used, everything can be viewed perfectly fine 🙂
The rest of the CSS is admittedly a bit messy, as I quickly threw this together during some late night coding sessions. I also didn’t code up all parts of the site (like the mega menu or the footer) as this is merely an after-hours POC.
CodePen: “Google Antigravity with Modern CSS” →
TIP: To force this “basic” view, try disabling the @layer named moderncss. The easiest way to do so, is to change @layer moderncss to @slayer moderncss and you’re done.
~
🔥 Like what you see? Want to stay in the loop? Here's how:
I can also be found on 𝕏 Twitter and 🐘 Mastodon but only post there sporadically.
This content originally appeared on Bram.us and was authored by Bramus!
Bramus! | Sciencx (2025-12-02T21:22:04+00:00) The Google Antigravity website, rebuilt with Modern CSS. Retrieved from https://www.scien.cx/2025/12/02/the-google-antigravity-website-rebuilt-with-modern-css/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.