layered-backgrounds

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Layered Backgrounds

分层背景

Agent Workflow (MANDATORY)

Agent工作流（必填）

Before implementation, use

TeamCreate

to spawn 3 agents:

fuse-ai-pilot:explore-codebase - Check existing background patterns
fuse-ai-pilot:research-expert - CSS filter and blend modes

After: Run fuse-ai-pilot:sniper for validation.

在实现之前，使用

TeamCreate

生成3个Agent：

fuse-ai-pilot:explore-codebase - 检查现有背景样式
fuse-ai-pilot:research-expert - CSS滤镜与混合模式

之后：运行fuse-ai-pilot:sniper进行验证。

Overview

概述

Layer	Z-Index	Purpose
Content	z-10	UI elements
Noise	z-5	Grain texture
Glass	z-0	Surface
Orbs	z-[-1]	Color blobs
Base	z-[-2]	Gradient

图层	Z轴索引	用途
内容层	z-10	UI元素
噪点层	z-5	颗粒纹理
玻璃层	z-0	表层
球体层	z-[-1]	彩色 blob
基础层	z-[-2]	渐变背景

Quick Reference

快速参考

Gradient Orbs

渐变球体

tsx

<div className="absolute inset-0 -z-10 overflow-hidden">
  <div className="absolute -top-1/4 -left-1/4 w-[600px] h-[600px]
                  bg-primary/30 rounded-full blur-3xl" />
  <div className="absolute -bottom-1/4 -right-1/4 w-[500px] h-[500px]
                  bg-accent/20 rounded-full blur-3xl" />
</div>

tsx

<div className="absolute inset-0 -z-10 overflow-hidden">
  <div className="absolute -top-1/4 -left-1/4 w-[600px] h-[600px]
                  bg-primary/30 rounded-full blur-3xl" />
  <div className="absolute -bottom-1/4 -right-1/4 w-[500px] h-[500px]
                  bg-accent/20 rounded-full blur-3xl" />
</div>

Animated Orbs

动画球体

tsx

<motion.div
  className="absolute w-[600px] h-[600px] bg-primary/30 rounded-full blur-3xl"
  animate={{ x: [0, 100, 0], y: [0, -50, 0] }}
  transition={{ duration: 20, repeat: Infinity, ease: "easeInOut" }}
/>

tsx

<motion.div
  className="absolute w-[600px] h-[600px] bg-primary/30 rounded-full blur-3xl"
  animate={{ x: [0, 100, 0], y: [0, -50, 0] }}
  transition={{ duration: 20, repeat: Infinity, ease: "easeInOut" }}
/>

Noise Overlay

噪点叠加层

tsx

<div
  className="absolute inset-0 opacity-[0.03] pointer-events-none"
  style={{
    backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")`,
  }}
/>

tsx

<div
  className="absolute inset-0 opacity-[0.03] pointer-events-none"
  style={{
    backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")`,
  }}
/>

Complete Hero Background

完整英雄区背景

tsx

function HeroBackground() {
  return (
    <>
      <div className="absolute inset-0 -z-20 bg-gradient-to-b from-background to-muted" />
      <div className="absolute inset-0 -z-10 overflow-hidden">
        <div className="absolute -top-1/4 -left-1/4 w-[600px] h-[600px] bg-primary/20 rounded-full blur-3xl" />
        <div className="absolute -bottom-1/4 -right-1/4 w-[500px] h-[500px] bg-accent/15 rounded-full blur-3xl" />
      </div>
      <div className="absolute inset-0 bg-[url('/noise.png')] opacity-[0.02] mix-blend-overlay" />
    </>
  );
}

tsx

function HeroBackground() {
  return (
    <>
      <div className="absolute inset-0 -z-20 bg-gradient-to-b from-background to-muted" />
      <div className="absolute inset-0 -z-10 overflow-hidden">
        <div className="absolute -top-1/4 -left-1/4 w-[600px] h-[600px] bg-primary/20 rounded-full blur-3xl" />
        <div className="absolute -bottom-1/4 -right-1/4 w-[500px] h-[500px] bg-accent/15 rounded-full blur-3xl" />
      </div>
      <div className="absolute inset-0 bg-[url('/noise.png')] opacity-[0.02] mix-blend-overlay" />
    </>
  );
}

Dark Mode

深色模式

tsx

<div className="bg-primary/20 dark:bg-primary/30 blur-3xl" />

tsx

<div className="bg-primary/20 dark:bg-primary/30 blur-3xl" />

Validation Checklist

验证清单

[ ] Multiple layers with z-index separation
[ ] Gradient orbs with blur (blur-2xl or blur-3xl)
[ ] Colors from CSS variables
[ ] Overflow hidden on container
[ ] Dark mode variant defined

[ ] 采用Z轴索引分离的多层结构
[ ] 带模糊效果的渐变球体（blur-2xl 或 blur-3xl）
[ ] 使用CSS变量定义颜色
[ ] 容器设置overflow-hidden
[ ] 定义深色模式变体