Rebuilding Google Antigravity: An Experiment with Modern CSS

This article details an experimental recreation of the Google Antigravity website, leveraging Modern CSS to explore its capabilities.

Upon the release of the Google Antigravity application and its accompanying website, an initial observation was its visually appealing design, contrasted with an "off" scrolling experience. Investigation using DevTools confirmed the presence of scroll-jacking, resulting in an uncanny user interaction.

Screenshot of the Google Antigravity Website Recreation

Further analysis revealed that the original Google Antigravity site did not utilize many of the latest Modern CSS features, despite its design patterns being highly amenable to contemporary CSS implementations. While the choice to avoid cutting-edge CSS for a marketing website—ensuring consistent visual and behavioral fidelity across all browsers—is understandable, it presented an opportunity for a development experiment from a CSS/UI perspective.

Inspired by this, the decision was made to embark on a personal challenge: to recreate the website using Modern CSS features. The primary objective was not to produce an exact replica but to assess the robustness and applicability of Modern CSS throughout the development process.

The reconstruction heavily relied on a suite of Modern CSS features, including:

• @starting-style
• A Houdini PaintWorklet for ring particles
• Container Queries
• Scroll Snapping
• @scope
• Anchor Positioning
• Carousels
• overscroll-behavior: contain; on a non-scrollable scroll container
• scroll-state(scrolled: …) scroll queries to create a hidey bar
• Scroll-Triggered Animations (noted as buggy in Chrome Canary at the time)
• sibling-index() (with random() being unavailable in Chrome)
• Scroll-Driven Animations

It's worth noting that fundamental concepts like Responsive Design, Cascade Layers, CSS Nesting, and Custom Properties were considered foundational and are not explicitly listed as "Modern CSS features" for this experiment.

Minimal JavaScript was employed, primarily for PaintWorklet registration and syncing cursor positions to two custom properties for CSS usage.

The recreation is available for review on CodePen. For optimal viewing of the latest features, Chrome Canary is recommended.

For users not running Chrome Canary (or not using Chrome at all), the site was developed with Progressive Enhancement in mind. All features, with the exception of @scope, are feature-detected using @supports. This ensures that the site remains perfectly viewable and functional, even if only a subset of the Modern CSS features is supported by the browser.

The CSS codebase for this project is acknowledged to be somewhat unstructured, a result of rapid development during late-night coding sessions. Areas like the grid implementation could be significantly improved. Furthermore, not all components of the original site (e.g., the mega menu or footer) were fully implemented, as this was primarily an after-hours Proof of Concept (POC).

Tip: To view the site in its "basic" state, disable the @layer named moderncss in the stylesheet. This can be easily done by changing @layer moderncss to @slayer moderncss.

Overall, Modern CSS demonstrated strong capabilities during this recreation. However, several areas presented challenges or highlighted potential improvements:

• @scope Detection: Implementing @scope progressively is difficult due to the lack of feature detection. An at-rule() capability would be highly beneficial.
• Flexible Gap Property: A more granular gap property, such as gap: inline-gap block-gap, would be useful for defining different row and column gaps in flex or grid layouts.
• Native Pointer Position: Obtaining an element's pointer X and Y position should ideally be achievable without JavaScript. A long-standing proposal exists for this (w3c/csswg-drafts#6733).
• Scroll Snapping Edges: When using scroll-snapping, particularly for horizontal scrolling to the center, the first item often cannot snap precisely to the leading edge. This currently necessitates manual calculation and the addition of virtual padding.
• Scroll Snapped State Query: The CSS snapped state query appears to trigger prematurely during active scrolling, requiring the introduction of a "magic number" delay for entry transitions to achieve proper synchronization.
• Mobile Menu Toggle: The current mobile menu uses the "checkbox hack." A native toggleable button, perhaps updating aria-pressed without JavaScript, would be a more semantically correct and accessible solution.
• CSS Carousels Wrapper: CSS Carousels lack a wrapper around the ::scroll-button()s, which required diverging from the original design.
• Grid Layout Quirks: Occasional "Grid blowouts" and subgrid complexities were encountered, though these were likely user errors (PEBKAC).
• Cascade Layer Control: There is no direct method to disable an entire cascade layer; a workaround like 'slayering' is required.
• Animation Speed Control: A property similar to animation-speed would be valuable for controlling animation rates based on distance (e.g., "100px per 0.1s"), allowing for automatic adjustments rather than manual time-based media queries (w3c/csswg-drafts#5091 (comment)).

Despite these minor rough edges, the majority of the development process proceeded smoothly.

For a deeper dive, explore "Google Antigravity with Modern CSS" on CodePen.