Design Token & Architecture Showcase

CHROMATIC GLOW

A theme-adaptive text visual effect engineered for maximum impact and crisp contrast across both Dark and Light modes.

Interactive Playground

CHROMATIC GLOW

Custom Preview Text

樣式強度 (Intensity Variants)

Subtle GlowStandard GlowIntense Glow

深淺色模式設計策略對比

Light Mode

color: #0f172a

CHROMATIC GLOW

Features deep slate text (#0f172a) for crisp legibility, paired with saturated cyan (top) and warm amber (bottom) chromatic fringe and subtle multi-spectrum ambient diffusion.

Dark Mode

color: #ffffff

CHROMATIC GLOW

Preserves the original high-luminosity cyberpunk aesthetic: crisp white typography, cyan & orange-red edge dispersion, and expansive ambient glow.

Chromatic Aberration & Glow Layer Breakdown

此效果由五層精密定位的 text-shadow 疊加運算而成，同時達成垂直色差分離（Chromatic Shift）與多光譜漫射（Diffuse Bloom）。

層級名稱	CSS 陰影參數 (Dark Mode)	CSS 陰影參數 (Light Mode)	效果
Top Cyan Aberration	`0 -4px 4px rgba(0, 220, 255, 0.9)`	`0 -3px 4px rgba(0, 160, 245, 0.9)`	頂部青藍色散
Bottom Orange Aberration	`0 4px 4px rgba(255, 120, 0, 0.9)`	`0 3px 4px rgba(249, 115, 22, 0.92)`	底部暖橘色散
Core Contrast / Highlight	`0 0 20px rgba(255, 255, 255, 0.9)`	`0 0 14px rgba(15, 23, 42, 0.16)`	核心輪廓錨定
Mid Bloom Layer	`0 0 45px rgba(255, 255, 255, 0.6)`	`0 0 35px rgba(79, 70, 229, 0.2)`	中層光暈光譜
Ambient Atmosphere	`0 0 90px rgba(255, 255, 255, 0.3)`	`0 0 75px rgba(14, 165, 233, 0.15)`	外圍環境輝光

Architecture Integration Guide

本特效已抽象化為全域 CSS Variables 與工具類別 .text-glow-aberration，在 Astro 或 Tailwind 專案中皆可直接使用。

Astro Component Usage

<!-- 在任何 .astro 頁面或元件中直接套用 -->
<h1 class="text-glow-aberration">
  CHROMATIC GLOW
</h1>

<!-- 強度修飾類別 (可選) -->
<p class="text-glow-aberration-subtle">Subtle Glow</p>
<h2 class="text-glow-aberration-intense">Intense Glow</h2>