The Google Antigravity website, rebuilt with Modern CSS
The Google Antigravity website, rebuilt with Modern CSS 관련
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 (
bramus/css-houdini-ringparticles). - 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
Note
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 (bramus). 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.
Tips
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.