视觉风格modern

着色器渐变

Shader Gradient

以实时 WebGL 片元着色器驱动的流动网格渐变作背景的高端 SaaS 美学。近黑画布上一层缓慢呼吸的虹彩渐变场，冻毛玻璃内容面板悬浮其上，干净现代无衬线配一支明亮强调色——Stripe / Linear / Vercel 首屏的活体渐变。

打开交互展示查看实现规则

主色#08090D

次色#EDEEF2

强调色 1#7C5CFF

强调色 2#22D3EE

强调色 3#F472B6

AI 实现规则

你是一个着色器渐变（Shader Gradient）风格的前端开发专家。生成的所有代码必须严格遵守以下约束：

## 绝对禁止

- 用静态渐变 PNG 或 CSS 关键帧假动画冒充实时着色器
- 不设 devicePixelRatio 上限（视网膜屏像素爆炸、掉帧）
- 离屏还在跑 requestAnimationFrame 循环
- 忽略 prefers-reduced-motion，或省略 WebGL 不可用回退
- 文字直接压渐变场不加玻璃面板 / scrim
- 满屏多块 canvas 或多支抢眼强调色
- 让 DOM 元素做位移 / 阴影动画抢着色器 GPU 预算

## 必须遵守

### 真实 WebGL 着色器（核心技法）
一个全屏 quad + 一次编译的 fragment shader，noise 驱动的流动场。可直接复用下面的骨架：

顶点着色器（全屏三角/矩形，直接透传坐标）：
attribute vec2 p; void main(){ gl_Position = vec4(p, 0.0, 1.0); }

片元着色器（fbm 域扭曲渐变，uniform: u_res / u_time / u_speed / u_blend / u_grain）：
precision highp float;
uniform vec2 u_res; uniform float u_time, u_speed, u_blend, u_grain;
vec2 hash2(vec2 p){ p=vec2(dot(p,vec2(127.1,311.7)),dot(p,vec2(269.5,183.3))); return fract(sin(p)*43758.5453)*2.0-1.0; }
float noise(vec2 p){ vec2 i=floor(p),f=fract(p),u=f*f*(3.0-2.0*f);
  return mix(mix(dot(hash2(i),f),dot(hash2(i+vec2(1,0)),f-vec2(1,0)),u.x),
             mix(dot(hash2(i+vec2(0,1)),f-vec2(0,1)),dot(hash2(i+vec2(1,1)),f-vec2(1,1)),u.x),u.y); }
float fbm(vec2 p){ float v=0.0,a=0.5; for(int i=0;i<5;i++){ v+=a*noise(p); p*=2.0; a*=0.5; } return v; }
void main(){
  vec2 uv=gl_FragCoord.xy/u_res.xy; vec2 q=uv; q.x*=u_res.x/u_res.y;
  float t=u_time*0.05*u_speed;
  float f1=fbm(q*1.5+vec2(t,-t*0.5));
  float f2=fbm(q*2.0+vec2(f1*u_blend-t*0.3,f1+t*0.2));
  float f=fbm(q*1.2+f2*(0.6+u_blend));
  vec3 base=vec3(0.031,0.035,0.051), violet=vec3(0.486,0.361,1.0), cyan=vec3(0.133,0.827,0.933), magenta=vec3(0.956,0.447,0.714);
  vec3 col=base;
  col=mix(col,violet,smoothstep(0.15,0.75,f+0.35));
  col=mix(col,cyan,smoothstep(0.3,0.9,f2*0.5+0.5)*0.6);
  col=mix(col,magenta,smoothstep(0.4,1.0,f1*0.5+0.5)*0.45);
  float vig=smoothstep(1.2,0.2,length(uv-0.5)); col*=0.55+0.6*vig;
  col+=(fract(sin(dot(uv+t,vec2(12.9898,78.233)))*43758.5453)-0.5)*u_grain*0.12;
  gl_FragColor=vec4(col,1.0);
}

### 渲染循环与性能
- const dpr = Math.min(window.devicePixelRatio || 1, 2)
- resize: canvas.width = clientWidth*dpr; gl.viewport(0,0,w,h); 传 u_res
- IntersectionObserver 离屏 cancelAnimationFrame、进屏重启
- 只编译一次着色器，每帧只更新 uniform（u_time = performance.now()/1000）

### 降级链（关键）
- prefers-reduced-motion: 只 draw 一帧（t 固定），不 requestAnimationFrame
- gl 为 null（WebGL 不可用）: 保留 canvas 下方的 .sg-fallback CSS 静态渐变，直接 return
- 移动端可降采样（dpr=1）或直接静帧

### 视觉与内容层
- 近黑 #08090D 底；虹彩 violet #7C5CFF / cyan #22D3EE / magenta #F472B6
- 内容坐在 .sg-glass 冻毛玻璃面板：bg-white/[0.05] + backdrop-blur-2xl + border-white/10
- 文字压渐变加 scrim 或玻璃底，保证 4.5:1
- 唯一 UI 强调 violet #7C5CFF：主 CTA、焦点环 focus:ring-[#7C5CFF]/25、链接
- 所有 DOM 动效只碰 transform / opacity

### 无障碍与 CLS
- canvas aria-hidden="true"；显式容器高度（h-screen 等）防 CLS
- 内容层独立于 canvas，canvas 挂了页面照常可读

## 自检

1. 是真 WebGL fragment shader（全屏 quad + fbm 流动）而非假动画？
2. dpr 上限 2 + resize 处理 + IO 离屏暂停？
3. prefers-reduced-motion 单帧 + WebGL 不可用 CSS 回退？
4. 文字有玻璃面板 / scrim、对比达标？
5. 近黑底 + 唯一 violet 强调 + DOM 只动 transform/opacity？
6. canvas aria-hidden + 防 CLS？

组件预览与实现

组件变体

inline-flex items-center gap-2 rounded-xl font-medium transition-all duration-300 ease-out active:scale-[0.98] bg-[#7C5CFF] text-white shadow-[0_8px_30px_rgba(124,92,255,0.35)] hover:bg-[#8f72ff]

button

Button

Violet accent CTA and a frosted-glass secondary

<button className="inline-flex items-center gap-2
  px-6 py-3 rounded-xl
  bg-[#7C5CFF] text-white font-medium
  shadow-[0_8px_30px_rgba(124,92,255,0.35)]
  hover:bg-[#8f72ff] active:scale-[0.98]
  transition-all duration-300
">
  Start building
</button>

<button className="inline-flex items-center gap-2 px-6 py-3 rounded-xl
  bg-white/8 backdrop-blur-xl border border-white/12 text-white
  hover:bg-white/12 transition-all duration-300">
  View docs
</button>

card

Card

Frosted-glass panel floating over the shader field

<div className="relative rounded-2xl p-6
  bg-white/[0.06] backdrop-blur-2xl
  border border-white/10
  shadow-[0_20px_60px_rgba(0,0,0,0.45)]">
  <div className="w-9 h-9 rounded-lg bg-[#7C5CFF]/20 border border-[#7C5CFF]/30 mb-4" />
  <h3 className="text-white text-lg font-semibold mb-2">Realtime by default</h3>
  <p className="text-white/60 text-sm leading-relaxed">
    Every frame is computed on the GPU. Nothing is baked.
  </p>
</div>

input

Input

Frosted field legible over the gradient

<input type="email" placeholder="you@company.com"
  className="w-full px-4 py-3 rounded-xl
    bg-white/[0.06] backdrop-blur-xl border border-white/12
    text-white placeholder-white/40
    focus:outline-none focus:border-[#7C5CFF]/70 focus:bg-white/[0.09]
    focus:ring-2 focus:ring-[#7C5CFF]/25
    transition-all duration-300" />

nav

Navigation

Frosted floating nav over the living gradient

<nav className="fixed top-0 inset-x-0 z-50">
  <div className="max-w-6xl mx-auto mt-4 px-5 h-14 flex items-center justify-between
    rounded-2xl bg-white/[0.05] backdrop-blur-2xl border border-white/10">
    <span className="text-white font-semibold tracking-tight">Prism</span>
    <div className="flex items-center gap-6 text-sm text-white/70">
      <a href="#features" className="hover:text-white transition-colors">Features</a>
      <a href="#pricing" className="hover:text-white transition-colors">Pricing</a>
    </div>
  </div>
</nav>

hero

Hero

WebGL shader canvas behind glass content, with reduced-motion and no-WebGL fallbacks

function ShaderHero() {
  const canvasRef = useRef(null);
  useEffect(() => {
    const canvas = canvasRef.current;
    const gl = canvas.getContext("webgl");
    if (!gl) return; // CSS gradient fallback stays visible under the canvas
    const dpr = Math.min(window.devicePixelRatio || 1, 2);
    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    // ... compile the fragment shader below, then either render one frame
    //     (reduce) or drive a rAF loop paused by an IntersectionObserver.
  }, []);
  return (
    <section className="relative h-screen overflow-hidden bg-[#08090D]">
      <div className="absolute inset-0" style={{ background:
        "radial-gradient(60% 60% at 30% 30%, #7C5CFF33, transparent), radial-gradient(50% 50% at 75% 60%, #22D3EE22, transparent)" }} />
      <canvas ref={canvasRef} aria-hidden="true" className="absolute inset-0 w-full h-full" />
      <div className="relative z-10 h-full flex items-center max-w-6xl mx-auto px-6">
        <div className="rounded-2xl bg-white/[0.05] backdrop-blur-2xl border border-white/10 p-10 max-w-2xl">
          <h1 className="text-white text-5xl md:text-7xl font-semibold tracking-tight">Ship the living web</h1>
        </div>
      </div>
    </section>
  );
}

footer

Footer

Quiet near-black footer below the shader hero

<footer className="bg-[#08090D] border border-white/8 py-14">
  <div className="max-w-6xl mx-auto px-6 flex items-center justify-between">
    <span className="text-white/50 text-sm">Prism - the living gradient.</span>
    <a href="#top" className="text-white/50 hover:text-white text-sm transition-colors">Back to top</a>
  </div>
</footer>

交互展示

独立打开展示

适用范围与设计理念

应用场景

视觉关键词

着色器渐变的信条：背景不是一张图，而是一段永不重复的光。真正的实时着色器让首屏"活"了起来——渐变缓慢流动、色彩彼此渗透，像一块会呼吸的极光。这种活体感是高端 SaaS 的信号：它在说"我们连背景都亲手写了 shader"，而不是随手贴了一张导出的渐变 PNG。

核心理念：

- 活体背景 = 高端信号：真正跑在 GPU 上的 fragment shader，噪声驱动的流动场，没有两帧完全相同。廉价感来自静态渐变或 CSS 关键帧假动画；高级感来自真 shader 的连续演化

- 克制是纪律：只有画布在动，DOM 绝不乱飞。所有 UI 动效只碰 transform / opacity，把 GPU 预算留给着色器。一个页面一块活体渐变就够了，不要满屏 canvas

- 近黑 + 虹彩：深近黑底 #08090D 让虹彩渐变（violet #7C5CFF / cyan #22D3EE / magenta #F472B6）发光。色相互相渗透而非硬切，靠 fbm 噪声域扭曲（domain warp）产生有机流动

- 冻毛玻璃承载内容：内容坐在 backdrop-blur 的玻璃面板上，1px white/10 描边，配暗色 scrim 保证文字对渐变场 4.5:1 对比。渐变是氛围，文字必须永远清晰

- 一支强调色：violet #7C5CFF 作唯一 UI 强调（主 CTA、焦点环、链接），其余交给玻璃与近黑。多个抢眼色会毁掉高级感

设计原则：

- 性能红线：devicePixelRatio 上限 2；IntersectionObserver 离屏即暂停 rAF、进屏恢复；单一全屏 quad + 一次编译的着色器，别每帧重建

- 降级链：prefers-reduced-motion 只渲染一帧静态画面（不起循环）；WebGL 不可用回退到视觉近似的 CSS 静态渐变；移动端可降采样或直接静帧

- 无障碍与 CLS：canvas 纯装饰 aria-hidden；显式尺寸 / 固定容器高度防 CLS；内容层永远独立于 canvas，canvas 挂了页面照常可读

应该这样做

用真实 WebGL fragment shader 驱动流动渐变：全屏 quad + time / resolution uniform + fbm 噪声域扭曲
devicePixelRatio 上限 2，监听 resize 重设 canvas 与 viewport
IntersectionObserver 离屏暂停 requestAnimationFrame、进屏恢复，省电省 GPU
prefers-reduced-motion 只渲染单帧静态画面，绝不起动画循环
WebGL 不可用时回退到视觉近似的 CSS 静态渐变背景
内容坐在 backdrop-blur 冻毛玻璃面板上，1px white/10 描边 + 暗 scrim 保证 4.5:1
近黑 #08090D 底 + 虹彩渐变，只用一支 violet #7C5CFF 作 UI 强调
所有 DOM 动效只碰 transform / opacity，把动画预算留给着色器
canvas 纯装饰 aria-hidden，显式尺寸防 CLS，内容层独立于 canvas

避免这样做

禁止用静态渐变 PNG 或 CSS 关键帧假动画冒充实时着色器（廉价感的根源）
禁止不设 devicePixelRatio 上限（视网膜屏上像素爆炸、掉帧）
禁止离屏还在跑 rAF 循环（白白烧电烧 GPU）
禁止忽略 prefers-reduced-motion 或省略 WebGL 不可用回退
禁止文字直接压渐变场不加玻璃面板 / scrim（对比不达标）
禁止满屏多块 canvas 或多支抢眼强调色（毁掉高级克制感）
禁止让 DOM 元素做位移 / 阴影动画抢着色器的 GPU 预算

全局 CSS

/* Shader Gradient Global Styles */

:root {
  --sg-base: #08090D;
  --sg-surface: #12131A;
  --sg-paper: #EDEEF2;
  --sg-violet: #7C5CFF;
  --sg-cyan: #22D3EE;
  --sg-magenta: #F472B6;
}

/* Full-bleed shader canvas base */
.sg-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* CSS static-gradient fallback (WebGL unavailable / under the canvas) */
.sg-fallback {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 60% at 28% 32%, rgba(124, 92, 255, 0.35), transparent 70%),
    radial-gradient(55% 55% at 74% 58%, rgba(34, 211, 238, 0.22), transparent 70%),
    radial-gradient(50% 60% at 55% 85%, rgba(244, 114, 182, 0.20), transparent 70%),
    #08090D;
}

/* Frosted-glass panel */
.sg-glass {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 1rem;
}

/* Readability scrim under text over the gradient */
.sg-scrim {
  background: linear-gradient(to top, rgba(8, 9, 13, 0.7), rgba(8, 9, 13, 0.1) 55%, rgba(8, 9, 13, 0.35));
}

@media (prefers-reduced-motion: reduce) {
  /* the shader loop is not started by script; a single static frame stays */
  .sg-canvas { animation: none; }
}

布局、色板与 Tokens

主色#08090D

次色#EDEEF2

强调色 1#7C5CFF

强调色 2#22D3EE

强调色 3#F472B6

{
  "border": {
    "width": "border",
    "color": "border-white/10",
    "radius": "rounded-2xl",
    "style": "border-solid"
  },
  "shadow": {
    "sm": "shadow-[0_2px_10px_rgba(0,0,0,0.4)]",
    "md": "shadow-[0_20px_60px_rgba(0,0,0,0.45)]",
    "lg": "shadow-[0_30px_90px_rgba(0,0,0,0.55)]",
    "none": "shadow-none",
    "hover": "hover:shadow-[0_24px_70px_rgba(124,92,255,0.25)]",
    "focus": "focus-visible:ring-2 focus-visible:ring-[#7C5CFF]/40",
    "colored": {}
  },
  "interaction": {
    "transition": "transition-all duration-300 ease-out",
    "active": "active:scale-[0.98]",
    "hoverOpacity": "hover:bg-white/12"
  },
  "typography": {
    "heading": "font-semibold text-white tracking-tight",
    "body": "text-white/70 leading-relaxed",
    "mono": "font-mono text-[#7C5CFF] uppercase tracking-[0.25em]",
    "sizes": {
      "hero": "text-5xl md:text-7xl",
      "h1": "text-4xl md:text-6xl",
      "h2": "text-3xl md:text-4xl",
      "h3": "text-xl md:text-2xl",
      "body": "text-base md:text-lg",
      "small": "text-sm"
    }
  },
  "spacing": {
    "section": "py-24 md:py-32",
    "container": "px-6 md:px-8",
    "card": "p-6",
    "gap": {
      "sm": "gap-4",
      "md": "gap-8",
      "lg": "gap-12"
    }
  },
  "colors": {
    "background": {
      "primary": "bg-[#08090D]",
      "secondary": "bg-[#12131A]",
      "accent": [
        "bg-[#7C5CFF]"
      ]
    },
    "text": {
      "primary": "text-white",
      "secondary": "text-white/70",
      "muted": "text-white/50"
    },
    "button": {
      "primary": "bg-[#7C5CFF] text-white",
      "secondary": "bg-white/8 backdrop-blur-xl text-white border border-white/12"
    }
  },
  "forbidden": {
    "classes": [
      "bg-gradient-to-r",
      "from-indigo-600",
      "via-purple-600",
      "to-pink-500",
      "animate-pulse",
      "duration-100"
    ],
    "patterns": [
      "^bg-gradient-to-r$",
      "^animate-(pulse|bounce)$",
      "^duration-100$"
    ],
    "reasons": {
      "bg-gradient-to-r": "Motion and color come from the WebGL shader, not decorative CSS gradients",
      "from-indigo-600": "No AI-cliche gradient stops; the field is a real fbm shader over near-black",
      "animate-pulse": "Do not fake life with CSS keyframes; the living quality is the real shader",
      "duration-100": "The living gradient is calm and slow; snappy transitions break the premium feel"
    }
  },
  "required": {
    "button": [
      "rounded-xl",
      "transition-all duration-300",
      "active:scale-[0.98]"
    ],
    "card": [
      "bg-white/[0.06] backdrop-blur-2xl",
      "border border-white/10",
      "rounded-2xl"
    ],
    "input": [
      "bg-white/[0.06] backdrop-blur-xl",
      "border border-white/12",
      "rounded-xl",
      "text-white placeholder-white/40",
      "focus:outline-none focus:border-[#7C5CFF]/70 focus:ring-2 focus:ring-[#7C5CFF]/25",
      "transition-all duration-300"
    ]
  }
}

示例提示词

SaaS 首屏落地页

着色器渐变背景的高端 SaaS 首屏

Create a premium SaaS landing hero with a real WebGL shader-gradient background:
1. A full-screen <canvas> WebGL fragment shader: a single quad, fbm domain-warped flowing field, uniforms u_res / u_time; near-black #08090D base with iridescent violet #7C5CFF, cyan #22D3EE and magenta #F472B6
2. Cap devicePixelRatio at 2, handle resize, and pause the rAF loop offscreen with an IntersectionObserver
3. prefers-reduced-motion renders one static frame; if WebGL is unavailable, fall back to a visually similar CSS radial-gradient background
4. Frosted-glass content panel (bg-white/[0.05], backdrop-blur-2xl, 1px white/10 border) holding the headline, subtext, and a single violet CTA plus a frosted secondary button
5. A frosted floating nav and a feature row of glass cards below the fold on quiet near-black sections
6. Only the canvas animates; all DOM motion is transform / opacity only; canvas aria-hidden and explicit heights to avoid CLS

开发者产品首屏 + 着色器实验台

带可调 uniform 滑块的着色器渐变首屏

Create a developer-product hero on a living shader gradient, plus an interactive shader lab:
1. WebGL fragment-shader background (fbm flowing field, near-black #08090D + violet/cyan/magenta), dpr capped at 2, IntersectionObserver pause, reduced-motion single frame, CSS-gradient fallback when WebGL is missing
2. Glass hero panel with a monospace kicker, a bold sans headline, and one violet #7C5CFF CTA
3. A "shader lab" card with three sliders - speed, color blend, grain - each wired via useState/refs to the u_speed / u_blend / u_grain uniforms so the gradient responds live
4. A frosted stat strip and a pricing row of glass cards on near-black sections below
5. One accent only; DOM animation limited to transform / opacity; canvas aria-hidden with explicit sizes to prevent CLS