Frutiger Aero

About this style

Frutiger Aero is a name coined online in the late 2010s for the glossy, optimistic look of consumer technology from roughly the mid-2000s to the early 2010s: aqua glass, bubbles, water, green grass, blue skies, lens flares and translucent interfaces. It takes its name from the humanist typeface Frutiger and from Aero, the glass interface of Windows Vista. The look filled operating systems, phone menus, adverts and stock wallpapers until flat design replaced it. Designers and online communities now revive it for its bright, wet-looking futurism.

Make a 10-second Frutiger Aero welcome screen: a glossy mid-2000s world of blue sky, wet grass, aqua glass orbs, bubbles and a goldfish, with translucent glossy panels that spring in and a button that gets clicked.

<inputs>
If I don't give you something, use the default and don't ask.
- Product: Brookfin (fictional), a photo, music and messaging suite.
- Welcome line: "Welcome to Brookfin"
- Line: "Your photos, music and friends, together in one bright place."
- Button: "Get started", which becomes "All set"
- Widgets: Now playing "Morning Tide" by Tidepool Static (fictional), 2:14 of 3:52 · Photo sync, 248 of 248 photos · Weather, Glassmere, 23°, Sunny
- Final line: "You're all set."
- Length: 10 seconds.
</inputs>

<direction>
- Look: the optimistic, glossy "Frutiger Aero" look of mid-2000s consumer tech: a saturated blue sky with soft clouds, a hill of wet, lush grass, glossy aqua glass orbs and bubbles, a goldfish, light rays and a gentle lens flare, and translucent glass panels with a bright gloss across their upper half. Everything looks clean, wet and sunlit.
- Palette: sky #0A6FD6 at the top through #3EA6F2 to #BFEBFF at the horizon; clouds #FFFFFF with soft #D7EEFF undersides; grass #2F9E2A in shade, #6CCB3A mid and #B4EE5C on sunlit tips; dew highlights #FFFFFF; aqua glass #5ED0FF with deep #0B8FD9 edges; button lime #7ED957 to #2F9A1E; goldfish #FF7A12 to #FFB547 with a #FFF4E6 belly; panel glass white at 38% with a 1px white border at 80% and a gloss band (white 70% fading to 8%) over the top half; text #0B3E6E, secondary #3C6E95.
- The scene, painted in Canvas layers back to front:
  1. the sky gradient with seven soft cumulus, each 12–20 overlapping radial-gradient puffs, drifting right at 6–14px/s;
  2. a sun at the upper left (300, 160): a white core in a #FFF6C8 halo, with 12 soft god rays (thin wedges at 6–10% white) that sway ±2°;
  3. two rolling hills, the far one #4FB83A hazed toward the sky, the near one lush grass;
  4. a foreground of 2,600 grass blades (tapered quadratic curves 40–140px long in the three greens by height, each with a lighter sunlit edge) swaying in a wind field made of two traveling sines along x, with 40 dew drops on blade tips (small spheres with a white highlight and a darker lower edge);
  5. 60 rising bubbles (12–48px): a thin aqua rim, a white crescent highlight at the upper left and a tiny glint at the lower right, wobbling as they rise;
  6. the glass orbs; 7. the lens flare; 8. the HTML panels on top.
- Glass orbs, the hero material. Draw the scene layers into one offscreen canvas first; then for each orb, inside its circle clip: the scene behind it redrawn flipped both ways and magnified 1.35× (a ball lens turns the world upside down, so the grass appears at its top and the sky at its bottom); an aqua tint #5ED0FF at 22%; a Fresnel rim (a radial gradient from clear to 65% white at the edge, a little thicker at the bottom, where it picks up the grass in green); a large soft crescent highlight at the upper left (white 85% to 0); a small sharp specular dot; and a bright aqua caustic crescent inside the lower-right edge. Four orbs: radius 70 at (1060, 200), 110 at (1660, 840), 95 at (1720, 260), and the aquarium orb; each bobs ±12px on its own slow sine (3–5 s).
- The aquarium orb at (1380, 520), radius 230, filled 70% with water: a meniscus ellipse at the waterline with a bright edge; below it the background refracts through a stronger aqua tint (#2FB8F0 at 35%); a few pastel gravel stones on its floor and a sprig of waterweed swaying. The goldfish: a fantail 150px long with a plump teardrop body shaded orange to gold over a white belly, scales as a faint lattice of arcs at 12%, a big glossy black eye with a white catchlight, a dorsal fin, two pectoral fins fluttering at 3 Hz, and a double fan tail of two translucent veils (40%) with radiating fin rays that ripple along their length. It swims a slow figure-eight inside the water on a closed-form Lissajous path, its body bending toward its heading and its tail lagging; at 6.8 s it turns to face the camera and puffs three bubbles that rise and pop at the surface (a pop is a ring that expands and fades).
- Lens flare: on the line from the sun through the frame center, five ghosts (hexagons and discs, 30–160px, aqua and lime tints at 6–12%) and a soft streak; they slide as the camera drifts and never sit on text.
- Camera: the layers parallax. It starts at grass level, the foreground blades filling the lower two-thirds of the frame, and cranes up to the final framing by 3.0 s on cubic-bezier(0.45, 0, 0.2, 1) (layers shift by up to 260px, near ones the most), then drifts 40px right across the rest; near layers move 1.6× as far as distant ones.
- Panels (HTML over the canvas, backdrop-filter: blur(16px) saturate(150%), 22px radius, a soft blue-tinted shadow 0 18px 40px rgba(10, 70, 140, 0.25)):
  - the welcome window, 760 × 440 at x 160–920, y 250–690: a glossy title strip with three round glassy window buttons (aqua, lime, sky, no symbols); the app icon at (200, 320), 88px: a glossy water drop over a green leaf (inline SVG, gradients and a gloss crescent); the welcome line at x 310 in Open Sans 600, 48px, #0B3E6E, with a white 1px emboss below it; the line in Open Sans 400, 24px, secondary, at most 570px wide; the "Get started" button at (310, 560), a 280 × 64 pill: lime gradient, a glossy top half (white 70% to 10%), a 1px #3E9A1E border and a soft inner glow at the bottom, its label in Open Sans 700, 24px, white with a dark green 1px shadow;
  - three widgets, 300 × 150 each at y 780–930, x 160, 490 and 820: Now playing (procedural album art of sky and a white wave, 100px; the title in Open Sans 700, 22px; the artist and the time in 20px; an aqua glossy progress bar that advances), Photo sync (a glossy aqua progress bar with diagonal candy stripes moving at 40px/s, counting "0 of 248" up to "248 of 248 photos", then a green check orb), Weather (a glossy sun-and-cloud icon in SVG, "23°" in Open Sans 300, 56px, and "Glassmere · Sunny" in 20px).
- Cursor: a white arrow with a soft shadow glides in on a curved path (easeInOutCubic) from off-screen right to the button by 7.0 s. On hover, the button brightens 12% and gains an aqua outer glow (0 0 24px #5ED0FF at 60%); the click at 7.2 s presses it (translateY 2px, the gloss dimming) for 0.12 s, and a soft 2px white ripple ring expands across the window (0 to 500px, fading over 0.6 s).
- Motion feel: everything floats and springs gently. Panels arrive on a damped spring (scale 0.92 to 1, translateY 30px to 0, damping ratio 0.6, about 0.7 s, 5% overshoot); orbs and bubbles bob; nothing snaps hard.
- Premium: real gloss and refraction (orbs that flip the world behind them, rims that pick up the grass, panels that blur what's behind them), saturated daylight color, a goldfish with translucent fins, gentle springs. Cheap: flat circles with a white dot, grey glassmorphism on a dark background, a stock-photo look.
Banned: dark mode or night, neon, flat design, grey or desaturated palettes, real operating system names, logos or window controls, real brands, emoji, photo textures, harsh drop shadows, anything flashing more than 3 times per second.
</direction>

<structure>
- 0.0–1.4s: low among the wet grass, blades swaying and dew catching the light; bubbles drift up through the frame; the camera begins to rise.
- 1.4–3.0s: the camera rises to the sky and the hill; the sun's rays sway; the three small orbs float up from behind the hill, and the aquarium orb rises into place at the right with the goldfish swimming.
- 3.0–4.4s: the welcome window springs in (3.0 s); its icon pops (3.3 s); the welcome line and the line rise 12px as they fade in (3.5 s); the button springs in (3.9 s).
- 4.4–6.0s: the three widgets spring in 0.2 s apart along the bottom; the photo sync fills with moving stripes and reaches 248 of 248 at 5.8 s, when its check orb pops; the music progress runs.
- 6.0–6.6s: the 6.0 s frame is a complete composition: window, widgets, orbs and the goldfish mid-turn.
- 6.6–7.6s: the cursor glides in to the button, hovers and clicks at 7.2 s: the press, the ripple; the goldfish turns to face us and puffs its three bubbles.
- 7.6–8.6s: the button becomes "All set" with a check; the line changes to "You're all set."; the camera drift ends and the lens flare settles.
- 8.6–10.0s: hold; only the grass, the bubbles and the goldfish's fins keep moving, at half speed.
For other lengths, stretch the widget beat; keep the springs and at least 1 s of hold.
</structure>

<build>
- One self-contained index.html (inline CSS and JS), a 1920×1080 (16:9) stage scaled to fit the window, designed for 60fps. No image, video, texture or model files: every shape and texture is generated in code.
- window.seek(t), t in seconds, computes every visual from t alone: no CSS transitions or CSS animations, no setTimeout/setInterval, no state carried between frames, randomness only from a seeded PRNG. Anything cumulative is solved analytically from t or precomputed once at load at a fixed step. Past the end, seek clamps to the last frame.
- Without ?render in the URL, drive seek from requestAnimationFrame so it plays in a browser (loop after a 1s end hold); with ?render, don't start that loop.
- Google Fonts via <link> are fine; await document.fonts.load() for each face before defining window.seek.
- Engine: Canvas 2D, repainting every frame from scratch, the backing store sized from CSS size × devicePixelRatio. Canvas won't fetch fonts itself, so the awaited loads matter.
- Grass blades, clouds, dew, bubble paths and the goldfish's path are seeded once at load; every frame repaints the scene into the offscreen canvas, then draws each orb's refraction from it. The panels, widgets, button and cursor are HTML over the canvas (backdrop-filter works over it), their transforms and opacity set from seek; springs are closed-form damped functions of the time since each element's start.
</build>

<check>
Before showing me, step through one frame per second (t = 0…10): screenshot each and look at it. Fix overlaps, clipped or cramped text, and anything off-style or Banned. Check every orb shows the inverted, magnified world inside it, a bright rim and a crescent highlight (never a flat circle with a dot), the goldfish reads as a fantail goldfish with translucent fins, the panels blur what's behind them and keep their gloss, all text reads at full contrast, the lens flare stays off the text, the 6.0 s and final frames are complete, and the sky stays saturated blue in every frame. Confirm seek(10) and seek(11) match, so the final frame holds.
</check>

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

Similar prompts

Gradient Mesh Brand Film

Made by us

A slow, ribbon-like gradient mesh flows in a skewed band behind sharp headline type, while white payment, API and chart…

Liquid Glass Interface

Made by us

Glass panels with real refraction float over vivid, striped color: their rims bend what's behind them, two buttons fuse…

Dark UI Precision Glow

Made by us

A dark-mode work tool drawn in hairlines and quiet radial glows: issue rows populate, ⌘K opens a command menu, a comman…

Bento Grid Feature Reveal

Made by us

Rounded tiles spring into a bento grid on warm paper, each acting out one feature in a small animation, then the tiles…