From 2e8121d8b95aabe0d39ecaaf87f6579e42a9d682 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=9B=B7=E7=94=B5=E8=8A=BD=E8=A1=A3?= Date: Tue, 7 Jul 2026 23:16:56 -0400 Subject: [PATCH] Give product screenshots a painterly atmospheric stage MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Float each screenshot over an ambient wash painted from its own colours (a tiny blurred thumbnail), layered with the aurora, a designed green->teal gradient, and fine film grain — the "based on our real product screenshot" treatment. - ui/art-stage: reusable atmospheric stage (ambient LQIP + aurora + grain + a floating shot with depth) - hero + bento: swap the flat frames for ArtStage - public/images/ambient: per-screenshot colour-wash thumbnails (<250B each) - remove the now-unused media-frame e2e green (12 passed). --- landing/components/sections/bento.tsx | 19 +++-- landing/components/sections/hero.tsx | 26 ++----- landing/components/ui/art-stage.tsx | 68 ++++++++++++++++++ landing/components/ui/media-frame.tsx | 29 -------- landing/public/images/ambient/connectors.webp | Bin 0 -> 96 bytes .../public/images/ambient/cost-controls.webp | Bin 0 -> 96 bytes landing/public/images/ambient/dashboard.webp | Bin 0 -> 118 bytes landing/public/images/ambient/messages.webp | Bin 0 -> 116 bytes landing/public/images/ambient/office.webp | Bin 0 -> 232 bytes landing/public/images/ambient/org-chart.webp | Bin 0 -> 108 bytes 10 files changed, 83 insertions(+), 59 deletions(-) create mode 100644 landing/components/ui/art-stage.tsx delete mode 100644 landing/components/ui/media-frame.tsx create mode 100644 landing/public/images/ambient/connectors.webp create mode 100644 landing/public/images/ambient/cost-controls.webp create mode 100644 landing/public/images/ambient/dashboard.webp create mode 100644 landing/public/images/ambient/messages.webp create mode 100644 landing/public/images/ambient/office.webp create mode 100644 landing/public/images/ambient/org-chart.webp diff --git a/landing/components/sections/bento.tsx b/landing/components/sections/bento.tsx index 97025b98..9aa5006a 100644 --- a/landing/components/sections/bento.tsx +++ b/landing/components/sections/bento.tsx @@ -5,6 +5,7 @@ import { Container } from "../ui/container"; import { Reveal } from "../ui/reveal"; import { Eyebrow } from "../ui/eyebrow"; import { SectionHeading } from "../ui/section-heading"; +import { ArtStage } from "../ui/art-stage"; import { featureSections, type FeatureSection } from "../../lib/landing-content"; // Explicit order + column spans so the cells pack into full 12-column rows. @@ -39,17 +40,13 @@ function BentoCard({ feature, span }: { feature: FeatureSection; span: string })

{feature.title}

{feature.description}

-
- {feature.imageAlt} -
+ ); } diff --git a/landing/components/sections/hero.tsx b/landing/components/sections/hero.tsx index 94fe9dec..f1e86cee 100644 --- a/landing/components/sections/hero.tsx +++ b/landing/components/sections/hero.tsx @@ -1,7 +1,7 @@ import { Container } from "../ui/container"; import { Badge } from "../ui/badge"; import { Button } from "../ui/button"; -import { MediaFrame } from "../ui/media-frame"; +import { ArtStage } from "../ui/art-stage"; import { landingHeroNarrative } from "../../lib/product-narrative"; export function Hero() { @@ -52,25 +52,13 @@ export function Hero() {

-
- diff --git a/landing/components/ui/art-stage.tsx b/landing/components/ui/art-stage.tsx new file mode 100644 index 00000000..01d13093 --- /dev/null +++ b/landing/components/ui/art-stage.tsx @@ -0,0 +1,68 @@ +// Fractal-noise film grain (inline data URI, allowed by img-src 'self' data:). +const GRAIN = + "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E\")"; + +const AURORA_WASH = + "radial-gradient(60% 55% at 26% 16%, var(--aurora-mint) 0%, transparent 62%)," + + "radial-gradient(52% 52% at 84% 84%, var(--aurora-teal) 0%, transparent 60%)," + + "radial-gradient(46% 48% at 60% 50%, var(--aurora-lime) 0%, transparent 66%)"; + +/** Ambient color wash derived from `ambientSrc`, given the src's own path. */ +export function ambientFor(src: string): string { + return src.replace("/images/", "/images/ambient/"); +} + +/** + * A product screenshot floating over an atmospheric wash painted from its own + * colours (a heavily blurred thumbnail), plus the aurora and a fine film grain. + */ +export function ArtStage({ + src, + alt, + priority = false, + className = "", + stageClassName = "p-5 sm:p-8 md:p-10", + contentClassName = "w-full", +}: { + src: string; + alt: string; + priority?: boolean; + className?: string; + stageClassName?: string; + contentClassName?: string; +}) { + return ( +
+ +