Skip to main content
Your motion-graphics terminal piece from Level 1 already named one of these — vfx-shatter, for the beat where the terminal breaks apart. This chapter is the rest of that showy end of the catalog: 3D device mockups, frosted-glass Apple UI, and cinematic moments where HTML shatters or gets sucked through a portal. Two groups do the work — the HTML-in-Canvas blocks (real WebGL, live HTML rendered as GPU textures) and the Effects components (lightweight CSS polish). Knowing which is which is the difference between an effect that renders and one that surprises you. All of it slots into the one-shot skeleton at the “technique” step.

​
Device mockups

To put your product UI inside a real phone or laptop, name vfx-iphone-device — real GLTF iPhone 15 Pro Max and MacBook Pro models with live HTML-in-Canvas screen content, a product-review camera choreography, and a 360° turntable. For a styled iOS/macOS environment (home screen, desktop, dock) rather than a bare device, reach for the liquid-glass system blocks below.
/product-launch-video 15-second 1920x1080 video. Our dashboard UI lives on the screen of a real iPhone 15 Pro Max that turntables slowly under product-review lighting, then a MacBook Pro slides in beside it showing the same UI wider. Use the vfx-iphone-device registry block. No narration.
Rendered from the prompt above (the block’s demo UI on screen), unedited. Ask for the device and what’s on its screen. The block renders live HTML into the screen but ships with its own demo UI — describing your UI (or pointing at screenshots/paths) is what makes the agent replace the block’s screen content instead of shipping the demo.
  • ❌ show my app on an iPhone (you’ll get the block’s built-in demo UI)
  • ✅ our dashboard UI (screenshots in assets/ui/) on the screen of the iPhone 15 Pro Max, turntabling

​
Liquid-glass UI treatments

The liquid-glass blocks are frosted-glass Apple-style UI floating over an aurora shader background. Pick by the surface you want: The four liquid-glass-* panel blocks share the aurora-shader stage, so they compose cleanly into one scene; ios26-liquid-glass and macos-tahoe-liquid-glass are complete device environments and generally stand alone.
/motion-graphics 8-second 1920x1080 video. Frosted glass notification cards drift in and stack over an aurora shader background, each reading a fake alert (“Build passed”, “Deploy live”, “0 incidents”). Real translucency — the aurora must be visible through each card. Smoke the glass enough to keep white text above 3:1 against the brightest part of the aurora. No audio.
Rendered from the prompt above, unedited — CSS backdrop-filter glass over a Three.js aurora.
The liquid-glass-notification block needs a GPU and fails quietly without one. It is marked stability: experimental and tagged webgpu because its frosted surface is painted through drawElementImage with refraction computed by a WebGPU renderer. Validating this chapter, navigator.gpu.requestAdapter() returned null in every headless and headful Chrome tried — with --enable-unsafe-webgpu, --use-angle=metal, and hardware GPU mode — and the block’s init simply bails. The failure mode is not an error: you get no cards at all, just the text floating on the background.So for a render you need to be able to reproduce, ask for the effect — “real translucency, the background visible through the card” — and let the agent build it with CSS backdrop-filter, which renders anywhere. That’s what the video above is. Reach for the WebGPU block only when you have confirmed a working adapter in your render environment and you specifically want refraction, specular, and chromatic aberration, which CSS cannot do.
“Liquid glass” means the block, not a filter you’re describing. These are complete WebGL stages; asking for “a glassy blur on my div” gets you a CSS backdrop-filter, not this look.
  • ❌ add a liquid glass effect over my text
  • ✅ use the liquid-glass-widgets registry block for the stat cards

​
Shatter, portal, magnetic, and cursor moments

The vfx-* blocks are single cinematic beats — spend them on a transition or a reveal, not a whole video:
/motion-graphics 8-second 1920x1080 video. Beat 1 (0-4s): a landing-page hero holds under directional light. Beat 2 (4-6s): the whole page shatters into glass fragments that scatter. Beat 3 (6-8s): bold white text slams in on black. Use the vfx-shatter registry block; the final beat reads “HTML IS VIDEO”. No narration, no image or media files.
Rendered from the prompt above, unedited. Name the exact effect — “explode,” “break,” “burst” don’t map. Each block is a specific simulation.
  • ❌ make the UI explode
  • ✅ the page shatters into glass fragments → vfx-shatter, or gets pulled through a portal → vfx-portal

​
Ambient polish

The Effects components are lightweight, pure-CSS finishing passes you layer on top of a finished scene — grain, vignette, a light sweep, a subtle push: These are the ambient layer of the motion grammar: grain and a slow parallax-zoom keep a “held” beat alive instead of freezing. Never write “holds motionless” — a still final second is the biggest cheap-motion tell; let a grain overlay and a 2% push carry the hold.
/motion-graphics 6-second 1920x1080 video. A wordmark logo — “HYPERFRAMES” in platinum on near-black — settles center-frame, then holds — but keep it alive with a film grain overlay and a slow 3% push-in, plus one shimmer sweep across the wordmark at 4s. Use the grain-overlay, parallax-zoom, and shimmer-sweep registry components. No audio.
Rendered from the prompt above, unedited — the “hold” stays alive on grain, a 3% push, and one shimmer pass. Reach for grain over a literal freeze. The engine holds the final state exactly as written.
  • ❌ logo appears and holds still to the end
  • ✅ logo settles, then a grain overlay and slow push keep the hold breathing (see ambient idle)

​
When an effect needs the canvas pipeline

The distinction that trips people up: the HTML-in-Canvas blocks are not CSS. The device mockups, liquid-glass stages, and vfx-* blocks render live DOM into WebGL textures via the experimental drawElementImage API — which needs a Chrome flag. The HTML-in-Canvas guide documents the real behavior:
  • Rendering enables CanvasDrawElement automatically (--enable-features=CanvasDrawElement), including inside Docker. That is enough for CanvasDrawElement-only blocks. Liquid-glass blocks that combine it with WebGPU still need a compatible browser such as Brave or Chrome Canary configured through PRODUCER_HEADLESS_SHELL_PATH; the bundled headless shell cannot run that combination.
  • Live preview in the Studio needs the flag turned on manually (chrome://flags/#canvas-draw-element → Enabled → restart). Without it, these blocks fall back rather than showing the effect in preview.
  • The blocks feature-detect and degrade gracefully, so a browser without the flag won’t crash — it just won’t show the WebGL treatment.
The Effects components above have none of this — they’re plain CSS and animate everywhere, preview included. So if you need something visible in Studio preview today with zero setup, prefer the CSS Effects; the HTML-in-Canvas group is where the flag caveat lives.
Don’t promise a stakeholder a live Studio preview of a liquid-glass or device block without confirming the Chrome flag is enabled on that machine — the rendered MP4 is unaffected, but the in-browser preview may fall back. See the HTML-in-Canvas guide.

​
Where to go next

Capstone thread — the Level 7 film’s Surface region floats its inspector panels on the brand’s glass tokens — translucent white over real backdrop blur, the mural visibly smearing through each panel (cut from the film, below).
This is the clause in the full capstone prompt that buys the piece — prompt language you can lift for your own video:
Inside: frosted-glass inspector panels (real translucency — blur over what’s behind; the product’s Studio design language) hover above the wire carrying live values (ease: power3.out, a color token, an fps readout) […] Glass surfaces use the file’s --glass-* tokens with real backdrop blur.
That clause, rendered — the region cut from the finished film. Next: Runtimes and 3D — picking GSAP, Three.js, or Lottie by what the moment actually needs, including the real depth these effects render on.