Jit Hue bg

Jit-hue (ji̍t-hue) is a Taiwanese word describing the dappled, flower-like patterns of light that form on the ground when sunlight filters through clouds or gaps between leaves.

I recently saw someone share a book called 《日花閃爍：台語的美麗詞彙&一百首詩》 (Shimmering Jit-Hue: Beautiful Taiwanese Words & One Hundred Poems).

I never knew Taiwanese had such a beautiful word. I was deeply moved, and so this component was born. (*´∀`)~♥

Watching the gently swaying light and shadow reminds me of a beautiful, peaceful afternoon in the backyard of my childhood home.

Tech Keywords

Name	Description
Canvas Shader	Written in GLSL and executed directly on the GPU, faster than the Canvas 2D API but harder to master
Noise	Produces more natural randomness than Math.random, commonly used for terrain, clouds, and textures

Usage Examples

Basic Usage

Dappled light carved through leaves and branches, quietly painting the everyday in brilliant color.

Show Background

View example source code

<template>
  <div class="w-full flex flex-col gap-4">
    <div class="example-ctrl flex flex-col gap-4">
      <base-checkbox
        v-model="visible"
        :label="t('showBackground')"
      />
    </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 { useI18n } from 'vue-i18n'
import BaseCheckbox from '../../base-checkbox.vue'
import BgJitHue from '../bg-jit-hue.vue'

const { t } = useI18n()

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>

How It Works

This component uses a Shader to render. The actual content was generated by AI -- I only handled the architecture and gave directions. ヽ(́◕◞౪◟◕‵)ﾉ

Using the exact same prompt, I had different models produce at least 3 versions each. Here are the findings:

• Gemini 3 Pro was way off -- totally useless
• Claude Sonnet 4.5 Thinking had the right idea, but the appearance didn't match
• Claude Opus 4.5 Thinking nailed the appearance, but the animation wasn't natural enough

In the end, GPT 5.2 Thinking produced the best Shader effect.

However, based on my experience so far, this doesn't mean GPT 5.2 Thinking is the ultimate silver bullet. In reality, no single model can solve every problem on its own.

Sometimes Gemini is stronger, sometimes GPT is stronger, so I use all models in rotation -- whichever performs best for the task gets the job. ◝( •ω• )◟

Source Code

Component

、Examples