F27▸A010▸framer-motion

Sparkle Text

閃光字

難度 ★★★★★標籤 sparkle · 文字 · decorative3 min read

效果簡述

文字周圍隨機冒出星星，會旋轉、放大、淡出。Aceternity 的 sparkles 變體，但只圍著一段字而不是整面。AI 產品、CTA、限定優惠標籤都很合適。

閃閃發光的字

▸ 預設|12 顆星, 各自閃

Claude Code Prompt

💬 Claude Code Prompt

參考：A010 sparkle text
技術：SVG star + 隨機分佈 + framer animate scale/rotate/opacity 循環

具體行為:
- useMemo 生成 10~14 個 sparkle 物件（x%, y%, size, delay 都隨機）
- 每顆 motion.svg 用四角星 path
- animate { scale: [0,1,0], rotate: [0,90,180], opacity: [0,1,0] }
- transition duration 1.2~1.6s, repeat: Infinity, repeatDelay 隨機 0.6~2s
- 父層 relative，sparkles absolute；字 z-10

限制：
- 星星數量 8~14；多了眼花
- size 6~16px，差異化才有節奏
- 一頁不要超過 2 處 sparkle text

完整程式碼

SparkleText.tsx

'use client'

import { motion } from 'framer-motion'
import { useMemo } from 'react'

function Sparkle({ delay, x, y, size }: { delay: number; x: number; y: number; size: number }) {
return (
  <motion.svg
    aria-hidden
    className="absolute text-orange-500"
    style={{ left: `${x}%`, top: `${y}%`, width: size, height: size }}
    viewBox="0 0 24 24"
    fill="currentColor"
    animate={{ scale: [0, 1, 0], rotate: [0, 90, 180], opacity: [0, 1, 0] }}
    transition={{ duration: 1.4, delay, repeat: Infinity, repeatDelay: Math.random() * 1.4 + 0.6 }}
  >
    <path d="M12 0 L14 10 L24 12 L14 14 L12 24 L10 14 L0 12 L10 10 Z" />
  </motion.svg>
)
}

export function SparkleText() {
const sparkles = useMemo(
  () => Array.from({ length: 12 }, (_, i) => ({
    id: i,
    x: Math.random() * 100,
    y: Math.random() * 100,
    size: 6 + Math.random() * 10,
    delay: Math.random() * 1.4,
  })),
  [],
)
return (
  <div className="relative inline-block px-6 py-4">
    {sparkles.map((s) => <Sparkle key={s.id} {...s} />)}
    <span className="relative z-10 text-3xl font-medium">閃閃發光的字</span>
  </div>
)
}

何時用

✅ AI 產品標籤（「Powered by AI」之類）
✅ 限時優惠 / 新功能徽章
✅ Hero 子句點綴

何時別用

❌ 內容中段（讀者分心）
❌ 一頁 5+ 處（眼花繚亂）
❌ 嚴肅文件 / 後台

我踩過的坑

useMemo 漏掉每次 render 全部重生成：星星位置一直跳，看起來有 bug。一定要 useMemo([], deps:[]).
delay 全 0 一起閃：要每顆獨立 delay，才有「自然撒落」的感覺。
z-index 漏掉星星蓋住字：父層 relative + 字 z-10。

效果簡述

Claude Code Prompt

完整程式碼

何時用

何時別用

我踩過的坑

相關效果

搜尋