Tech

Gemini 3.1 Pro: A Quick Spin With Google’s Latest AI in the IPE

We tested the new planning and dynamic visualization features by building Cinematic Hover Previews for Stark Insider. Here's how it went

BY —

Google today announced Gemini 3.1 Pro, the latest version of its frontier AI LLM (Large Language Model). The new AI assistant is immediately available.

If you’re an Antigravity IDE user you likely saw the small popup announcing the release. Interestingly, both previous 3.0 Pro models (High and Low) are no longer available, so the latest will be your only option (at least in Antigravity).

The release appears relatively most, as to be expected for a dot release. If you use planning mode a lot like me (probably almost 20:1 ratio of planning to execution) then this release should be interesting to try as that’s one of the core areas Google has been working on with 3.1.

Here are the headline features in Gemini 3.1 Pro as enumerated over on the blog announcement, which all fall under the umbrella of “Advanced Reasoning for Complex Workflows:

  • Robust planning: Mapping out a complete architectural plan before touching a single line of code.
  • Code-based animation: Generate website-ready animated SVGs from a text prompt built to scale in pure code rather than pixels.
  • Navigating long-horizon tasks across entire codebases while maintaining perfect context.
  • Dynamic visualization: Turning high-level concepts into interactive UI components and dynamic data visualizations that improve your user experience.

I gave 3.1 Pro a quick spin in Antigravity (excellent IDE) and asked it to brainstorm some creative uses of dynamic visualizations (that fourth bullet above) for this web site, Stark Insider. About half a dozen examples were returned, many quite interesting and exotic. However, I settled on Cinematic Hover Previews. According to Gemini this would provide a Netflix or YouTube-like experience when hovering over video embeds. Sounds interesting, and it would serve as a good use case for this article. I flipped on plan mode and below is the output:

Google 3.1 Pro Planning Example:
Cinematic Hover Previews

Goal Description

Implement Cinematic Hover Previews (Dynamic Video Backgrounds) for article thumbnails in the grid/masonry view of the velvet theme. This feature will allow editors to add a short looping video (MP4/WebM) to a post, which will silently play and fade in when a user hovers over the article thumbnail on the front-end grid, similar to Netflix or YouTube previews.

User Review Required

NOTE

We will need to decide where to store the custom field for the video URL. If Stark Insider uses Advanced Custom Fields (ACF), we can create a new field group there. Alternatively, we can use the starkinsider-toolkit plugin or velvet theme’s

functions.php to register a standard native WordPress meta box. The plan below assumes a native meta box for zero dependencies, but this can be adjusted.

WARNING

Please confirm if the Staging VM is currently running and accessible (i.e. if I should SSH into it directly during execution, or if we are building the code locally on mulholland and deploying to it). I will write the code locally and then we can determine the deployment method to the VM.

Proposed Changes

velvet Theme (Frontend & Logic)

[MODIFY]

functions.php (or a dedicated inc/ file)

  • What will change: Register a custom meta box for posts called “Cinematic Hover Video”.
  • Details: Add a text input field to save the video URL (MP4 or WebM) to post meta (e.g., _si_cinematic_video_url).

[MODIFY] template-parts/ (Grid Item Template, e.g., content.php or content-grid.php)

  • What will change: Modify the thumbnail output.
  • Details: If _si_cinematic_video_url exists for the post, output a <video class="si-cinematic-preview" muted loop playsinline preload="none"> element positioned absolutely over the <img> thumbnail. The src attribute will be populated dynamically via data attributes to prevent loading until hover, saving bandwidth.

[MODIFY] assets/css/ (or style.css)

  • What will change: Add styling for the hover video.
  • Details: Style .si-cinematic-preview to be absolute, object-fit: cover, opacity: 0, and transition: opacity 0.3s ease. On parent container hover, set opacity: 1 and z-index above the image.

[MODIFY] assets/js/ (or scripts/)

  • What will change: Add vanilla JavaScript for hover interactions.
  • Details: Add event listeners for mouseenter and mouseleave on the grid items.
    • On mouseenter: Set the video src (if lazy loaded), call video.play(), and fade it in.
    • On mouseleave: Call video.pause(), reset time to 0, and fade it out.

Verification Plan

Automated Tests

  • Review PHP error logs on the staging server after adding the meta box to ensure no fatal errors or warnings.
  • Review JavaScript console dynamically using the browser DevTools (via Antigravity browser tools if available on staging URL).

Manual Verification

  1. Open the WordPress Admin dashboard on the chosen Staging VM.
  2. Edit a post and add a sample MP4 URL to the new “Cinematic Hover Video” custom field.
  3. Visit the frontend homepage/grid view.
  4. Hover over the modified post’s thumbnail to verify:
    • The video seamlessly fades in and starts playing.
    • The video is muted and loops correctly.
  5. Move the mouse away to verify the video fades out and stops playing.
  6. Verify network payload (ensure videos are only downloaded upon hover/interaction to preserve LCP/PageSpeed scores).

Normally, for trickier or more complex coding projects, I would hand off the plan to Claude Code (Opus 4.6), Codex (GPT -5.3 Codex Extra High and Composer (1.5) and do at least three planning cycles, or at least as many as is needed to get the green light from all four AI assistants with no major blockers. True, this burns a massive amount of tokens, but I find the final, resulting code to be much higher quality and is ultimately worth it for critical projects (less so for standard scripting and sysadmin work).

Screenshot of Gemini 3.1 Pro AI planning output in Google Antigravity IDE showing Cinematic Hover Previews feature implementation for Stark Insider Velvet WordPress theme with 6 files changed
Gemini 3.1 Pro generated a full implementation plan and code for Cinematic Hover Previews in a single pass using Google’s Antigravity IDE — 6 files, zero errors.

With my AI team and IPE at hand “I’ve” created a bunch of stuff including a WordPress Image Optimization plugin, various script and features for Stark Insider, as well as for updating our Theme and overall look and feel. This, plus a bunch of non-related life stuff, all within what I now refer to as the Integrated Productivity Environment (IPE). With Cursor or Antigravity or VS Code connected to the server, the workflow is a dream come true.

In any case, all that to say: I ran the above plan without my usual token smoking workflow to see how Gemini 3.1 Pro would handle the task.

Meantime, Gemini is crunching away on the code, and I will test soon on staging, and if all goes to plan I will deploy to starkinsider.com. Well, I might. Or might not. I am all about lightweight pages and speed so I’m not so sure the cinematic hover effect will help me there. Still, it’s a decent and small project to see what 3.1 can do with a scoped planning project.

Of course, Gemini is capable of far more than this simple example, but it was a quick test of its capabilities on day one launch. No question, all the synthetic test results are already making the rounds on social media. A safe bet: all scores have improved over Gemini 3 Pro. LLM release cadence seems to be settling down lately, with major models seeing releases every 6 months or so, with major ones coming in around 12 to 18 months.

© Copyright 2005-2026 BLG Media LLC. v2.19.0