日花 bg

日花（ji̍t-hue），指陽光穿過雲間或葉縫、於地面等處形成碎花般的光影。

最近看到有人分享一本書，名叫《日花閃爍：台語的美麗詞彙&一百首詩》。

沒想到台語裡有這麼美的詞，大受感動，於是這個元件就誕生了。(*´∀`)~♥

看著悠哉搖擺的光影，讓我想起小時候在老家後院那個美麗且平靜的午後。

技術關鍵字

名稱	描述
Canvas Shader	使用 GLSL 開發，直接在 GPU 上執行，比 Canvas 2D API 更快，但也更難
Noise	比 Math.random 更自然隨機效果，常用於地形、雲朵、材質等

使用範例

基本用法

於枝葉間雕琢的璀璨流光，靜靜地勾勒斑斕日常

顯示背景

查看範例原始碼

<template>
  <div class="w-full flex flex-col gap-4">
    <div class="flex flex-col gap-4 border rounded">
      <base-checkbox
        v-model="visible"
        label="顯示背景"
        class="p-4"
      />
    </div>

    <bg-jit-hue
      v-if="visible"
      class="bg pointer-events-none fixed left-0 top-0 z-50 h-screen w-screen"
    />
  </div>
</template>

<script setup lang="ts">
import { useData } from 'vitepress'
import { onBeforeUnmount, ref, watch } from 'vue'
import BaseCheckbox from '../../base-checkbox.vue'
import BgJitHue from '../bg-jit-hue.vue'

const visible = ref(false)

const { isDark } = useData()
const oriValue = isDark.value

watch(visible, (value) => {
  if (value) {
    isDark.value = false
  }
  else {
    isDark.value = oriValue
  }
})

onBeforeUnmount(() => {
  isDark.value = oriValue
})
</script>

<style scoped>
.bg {
  mix-blend-mode: hard-light;
  opacity: 0.45;
}
</style>

原理

這個元件使用 Shader 繪製，由 AI 產生具體內容，我只負責架構和出一張嘴。ヽ(́◕◞౪◟◕‵)ﾉ

提詞一模一樣，讓不同模型做至少 3 個版本後得的成果結論如下：

• Gemini 3 Pro 差超多，超廢
• Claude Sonnet 4.5 Thinking 有概念，但是外觀不像
• Claude Opus 4.5 Thinking 外觀有到位，但是動態不夠自然

最後是 GPT 5.2 Thinking 產生的 Shader 效果最好。

不過截至目前為止的經驗，這不代表 GPT 5.2 Thinking 就是最終銀彈，實際上還沒有一個模型能夠獨自解決所有問題。

有時候是 Gemini 比較強，有時候是 GPT 比較強，所以我都是所有的模型輪流用，哪個模型表現好就用哪個。◝( •ω• )◟

原始碼

元件

、範例