F26▸B007▸framer-motion

Aurora Background

極光背景

難度 ★★★★★標籤背景 · 漸層 · blur · aurora2 min read

效果簡述

模糊的 conic-gradient 慢慢轉，產生極光感的柔光背景。Aceternity 的 aurora-background 同概念。Hero 區疊一層立刻有 Linear / Vercel 那種高級感。

柔光極光背景

▸ 預設|冷紫綠霓虹

Claude Code Prompt

💬 Claude Code Prompt

參考：B007 aurora background
技術：conic-gradient + blur + framer rotate + 蒙塵 radial gradient

具體行為:
- 父層 overflow-hidden bg-background
- 第一層 absolute inset-0 conic-gradient 多色，filter blur(40px) opacity 0.55
- framer animate rotate 360 / 14s linear infinite
- 第二層 radial-gradient 暗化邊緣（突出中心）

限制：
- blur 是 GPU 重，建議 40~60px
- rotate 一定要在 GPU 加速（transform）才順
- 不要在內容區疊很多 aurora（會卡）

完整程式碼

Aurora.tsx

'use client'

import { motion } from 'framer-motion'

export function Aurora() {
return (
  <div className="relative overflow-hidden rounded-xl">
    <motion.div
      aria-hidden
      className="absolute inset-0"
      style={{
        background: 'conic-gradient(from 0deg, #c2410c, #fb923c, #fbbf24, #c2410c)',
        filter: 'blur(40px)',
        opacity: 0.55,
      }}
      animate={{ rotate: 360 }}
      transition={{ duration: 14, ease: 'linear', repeat: Infinity }}
    />
    <div className="absolute inset-x-0 -bottom-1/2 h-[160%]"
      style={{ background: 'radial-gradient(closest-side, rgba(0,0,0,0), rgba(0,0,0,0.7))' }}
    />
    <div className="relative z-10">內容</div>
  </div>
)
}

何時用

✅ Hero 區背景
✅ Section 分隔處的精緻過場
✅ 品牌站 / 作品集

何時別用

❌ 一頁多個 aurora（GPU 喘）
❌ 內容對比度需求高的區塊
❌ 低階行動裝置主要受眾

我踩過的坑

blur 太強看不出形狀：40~60px 是甜蜜點，超過 80 太糊。
沒蒙塵層光太散：第二層 radial-gradient 暗化邊緣，能讓中心亮點更突出。
rotate 必須 transform：用 framer animate rotate 是 GPU。別用 background-position 動畫，CPU 會喘。

效果簡述

Claude Code Prompt

完整程式碼

何時用

何時別用

我踩過的坑

相關效果

搜尋