Spatial Glass Windows

About this style

Spatial interfaces place app windows in the space around the viewer, as on mixed-reality headsets, rather than on a flat screen. Frosted, translucent materials let each window show a softened view of what is behind it, so people keep a sense of their surroundings, while depth comes from parallax, scale and light catching the edges. Concept films and flat interfaces now borrow the same glass panels and floating layers.

Make a 10-second spatial interface film: frosted glass app windows float in 3D over a dusk landscape, with parallax and depth, and one comes forward when focused.

<inputs>
If I don't give you something, use the default and don't ask.
- Product: default "Paneo" (a spatial workspace)
- Windows: default Notes (a "Trip ideas" checklist), Player ("Harbor Lights" by The Quiet Arcs, 2:14 of 3:48), Weather ("Port Aster", 14°, "Clear evening")
- Focused window: default the Player
- Headline: default "Room for every window."
- Length: default 10 seconds
</inputs>

<direction>
- Backdrop: paint once into a 4096×1024 CanvasTexture inside a far cylinder (radius 40, 140° arc): sky #1E1B3A → #6B4A7A → #F09A6E, a low sun #FFD9A8, three seeded hill silhouettes #2B2448, #3D2F5A, #5A3F6E and a still lake mirroring them. This contrasty horizon is what the glass blurs.
- Glass: RoundedBoxGeometry slabs 0.035 thick, radius 0.06 (Player 2.0 × 1.25, the others 1.2 × 1.4), MeshPhysicalMaterial with transmission 1, roughness 0.42, ior 1.4, clearcoat 0.6 and an envMap from PMREMGenerator.fromScene of the backdrop so rims catch the sunset. A HemisphereLight (#BBA9FF/#2A1E3A) and a warm key from the upper left.
- Content: each window's UI in its own CanvasTexture (1024 px per unit) on a plane 0.022 in front of the glass over a 10% #120E24 tint: Outfit 300–600, white at 95% and 68%, accent #FFC27A, line icons; body 0.056 units, at least 20px on screen.
- Camera: 30° field of view at (0, 0, 5), looking at (0, 0, −0.6). Drift through u(t) = t until 7s, then t − (t − 7)²/4 until 9s, then 8: x = 0.35·sin(2πu/9), y = 0.08·sin(2πu/7), plus a 0.3 dolly-in; windows bob ±0.015 on their own sines of u.
- Layout: Notes (−1.95, 0.1, −0.9) yawed +20°, Player (0, 0.05, −0.6), Weather (1.95, 0.1, −0.9) yawed −20°. Focused: the Player at (0, 0.2, 1.0) facing the camera; the others recede to z −1.6, x ±2.2, content dimmed to 55%, roughness 0.6.
- Motion: windows materialize scaling 0.9→1 and rising 0.12 (0.9s, cubic-bezier(0.22, 1, 0.36, 1)); a soft radial gaze highlight slides to targets in 0.4s; the focus move takes 1.1s on cubic-bezier(0.65, 0, 0.35, 1).
- Premium is real refraction: hills soften and shift inside the glass as the camera drifts, rims catch light, near windows slide past far ones. Cheap is flat translucent cards with a uniform blur and a drop shadow.
Banned: backdrop-filter or HTML cards posing as glass, opaque windows, neon outlines, bloom, lens flares, blurred text, real OS names, image files, emoji, anything flashing more than 3 times per second.
</direction>

<structure>
- 0.0–1.2: Black opens onto the dusk (exposure 0→1) as the camera dollies in.
- 1.2–2.8: Notes, Player and Weather materialize, 280ms apart.
- 2.8–4.6: The camera drifts; the hills slide through the frosted glass at a different rate from the windows.
- 4.6–6.1: The gaze highlight lands on the Player, which comes forward as the others recede and dim.
- 6.1–7.4: Press play: it turns to pause and progress runs on; a glass tab bar with four icons rises beneath.
- 7.4–8.6: The drift slows; "Paneo" fades in top-left and the headline (Outfit 300, 56px, HTML) fades up, centered on baseline y 970.
- 8.6–10.0: Hold; still from 9.0s.
For other lengths, stretch the drift before the focus and hold at least 1s.
</structure>

<build>
One self-contained index.html (inline CSS and JS), a 1920×1080 (16:9) stage scaled to fit the window, built for 60fps. Google Fonts via <link>, awaiting document.fonts.load() for each face before defining window.seek. three.js, needed for real refraction: an ES module pinned to three@0.160.0 via an import map on jsDelivr (three and three/addons/), preserveDrawingBuffer: true, ACESFilmic tone mapping, one render per seek. window.seek(t) (t in seconds) sets every visual from t alone, clamping past the end: no CSS transitions or animations, no setTimeout/setInterval, no state carried between frames, randomness only from a seeded PRNG. Without ?render in the URL, drive seek from requestAnimationFrame; with ?render, don't start that loop.
</build>

<check>
Before showing me, step through one frame per second (0–10s) and look at each. Fix overlaps, clipped or cramped text and anything off-style or Banned. Between 3s and 4s the hills behind the glass visibly shift and stay blurred; text stays sharp. Confirm seek(10) and seek(11) match.
</check>

Ours, and free to use under CC0: copy it, change it, ship it. No credit needed.

Similar prompts

Low-Poly Landscape Flyover

Made by us

A slow golden-hour glide down a faceted valley: flat-shaded ridges, a low sun, fog melting the far range into the horiz…

Keynote Product Reveal

Made by us

A device built in three.js rises out of total darkness while a softbox reflection glides along its titanium edge, then…

Isometric Miniature City

Made by us

A toy-like isometric city block that builds itself on a floating slab: bevelled buildings rise floor by floor, cars loo…

Extruded 3D Type

Made by us

Chunky two-tone 3D letters swing into place one by one on a seamless studio sweep, lit like a product shot with soft sh…