什么是镭射箔风格？

按衍射光栅实时算颜色的镭射烫印箔：指针是一盏灯，彩虹以灯为圆心扫过每个元素，银底、星芒、碎钻和幻彩都是不同的刻槽排布。它的设计理念：镭射箔的颜色不是画上去的，是算出来的。膜面上刻着间距 1500 纳米的细槽，光打上去按光栅方程分出波长：角度小时是银，角度变大，紫、蓝、绿、黄、红依次扫过，高级次再来一遍。核心理念： - 指针是一盏灯：灯离屏幕 300 像素高，所有镭射元素共用这一盏灯，彩虹以它为圆心一圈圈扫过整页 - 材质是刻槽的排布：直纹、交叉纹、同心圆（星芒）、随机小碎片（碎钻）、薄膜干涉（幻彩），喂给同一个光栅函数 - 银底是主角：彩虹只出现在角度对上的地方，大部分时间是金属的银，这才像真箔 - 一个 WebGL 上下文画整页：所有元素共用一个隐藏画布逐个渲染再拷贝，另有一套 CSS 平替跟着同一盏灯走 - 手感落在材质上：按下、勾选、拖动时只弯膜面的法线，颜色跳一下，元素本身不动视觉语言： - 近黑的印张底色，浅浅的裁切线，让箔面跳出来 - 油墨字只印在浅色箔上，不压在饱和的彩虹带上 - 减少动态效果时灯停在固定位置，画面静止

镭射箔风格常用什么配色？

镭射箔的主色是 #0c0b10，辅色是 #c9c8d4，强调色包括 #ff5ab8、#ffd36b、#4fe0b4、#5aa8ff。每个色值都可以在本页色板中复制。

怎样把镭射箔风格做对？

关键做法：按光栅方程算颜色：λ = d × |dot(h, k)| / m，d = 1500nm，1、2、3 级按 1、0.5、0.3 叠加. 把指针当成离屏幕 300px 的灯，所有镭射元素共用；指针静止 4 秒后灯自己慢慢绕圈. 用 bg-[#0c0b10] 近黑印张承托箔面，正文用 text-[#ececf2]，次要文字用 text-[#a9a8b6].

镭射箔风格最常见的错误是什么？

应避免：禁止用一条固定的彩虹渐变再平移 background-position 冒充镭射. 禁止给每个元素各开一个 WebGL 上下文. 禁止让彩虹铺满整块：大部分面积应该是银.

如何让 AI 生成镭射箔风格的界面？

复制本页提供的 AI 提示词（含设计 tokens 与组件规则），粘贴到 ChatGPT、Claude、Claude Code 或 Codex。提示词中应包含关键词：镭射、烫印、衍射光栅、全息箔。

镭射箔

Diffraction Foil

93/100优秀

给这个风格评分

按衍射光栅实时算颜色的镭射烫印箔：指针是一盏灯，彩虹以灯为圆心扫过每个元素，银底、星芒、碎钻和幻彩都是不同的刻槽排布。

镭射烫印衍射光栅全息箔收藏卡防伪WebGL光谱指针光源

导出

适合场景

镭射 / 烫印 / 衍射光栅

设计重点

按光栅方程算颜色：λ = d × |dot(h, k)| / m，d = 1500nm，1、2、3 级按 1、0.5、0.3 叠加

注意事项

禁止用一条固定的彩虹渐变再平移 background-position 冒充镭射

Showcase 入口

Showcase 页面的实时预览，点击查看完整体验。

查看完整 Showcase →

配色方案

Primary

#0c0b10

Secondary

#c9c8d4

Accent 1

#ff5ab8

Accent 2

#ffd36b

Accent 3

#4fe0b4

Accent 4

#5aa8ff

Accent 5

#a98bff

design.md

镭射箔的设计文档

一份文档说明这套风格的配色职责、字体规则、间距与组件构造。复制或下载后直接交给 Claude Code、Cursor、Codex 或 v0。

镭射箔 — 风格参考

光就是油墨：让银箔按光栅方程响应一盏共享的灯。

Theme: dark

镭射箔的虹彩不是一条平移的彩虹渐变，而是刻槽衍射后算出的颜色。1500 nm 光栅在约 300 px 的离屏灯光下产生光谱；法线和灯的相对角度决定波长，银色仍然是大部分表面。第 1、2、3 级按 1、0.5、0.3 加权。用近黑印张和细裁切线衬托浮雕箔片，结构克制，材质负责表达。可交互版本整页共享一个 WebGL2 上下文，并提供跟随同一盏灯的 CSS 平替。

Colors

Name	Value	Token	Role
Print Sheet	`#0c0b10`	`--color-print-sheet`	全页近黑画布；让变化中的银箔和光谱成为视觉焦点。
Panel	`#141319`	`--color-panel`	暗色卡片与容器底色，配极细白色描边分层。
Dark Silver Foil	`#a3a2af`	`--color-dark-silver`	暗箔面本身的银灰基底；虹彩只在角度吻合处叠上去。
Light Silver Foil	`#e9e8f0`	`--color-light-silver`	适合印刷深色油墨字的浅银箔面，不用纯白替代。
Ink	`#16151c`	`--color-foil-ink`	仅在浅银箔上印标题和按钮文案，避免压在彩虹带上。
Text	`#ececf2`	`--color-text`	印张和暗面板上的主要文字，高对比但不刺眼。
Secondary Text	`#a9a8b6`	`--color-text-secondary`	说明、注释和次级内容；退后一级，不缩小到难读。
Focus Silver	`#c9c8d4`	`--color-focus-silver`	键盘焦点、范围滑杆和克制的行动按钮，保持可见轮廓。
Sampled Spectral Red	`#d2052d`	`--color-spectrum-red-sample`	1500 nm CSS 光谱条上的一枚红端采样；仅作为动态光谱一部分。
Sampled Spectral Green	`#00d777`	`--color-spectrum-green-sample`	CSS 光谱条上计算出的绿色采样，不是固定组件填色。
Sampled Spectral Violet	`#6600e1`	`--color-spectrum-violet-sample`	CSS 光谱条上计算出的紫色采样；随灯和衍射级次变化。

Typography

Sans Serif — 全站使用 font-sans；大标题粗而紧凑，次级标记用等宽字体和字距，不引入新字体。

Substitute: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif
Weights: 400, 500, 600, 700, 800
Sizes: 12, 14, 16, 20, 24, 32, 48, 72
Line height: 1.05 (display), 1.2 (headings), 1.65 (body)
Letter spacing: -0.025em on display, 0.2em on uppercase labels

Monospace — 用于光栅方程、纳米数值、兑换码和稀疏技术标签，不用于长段正文。

Substitute: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace
Weights: 400, 500, 600
Sizes: 12, 14, 16, 18
Line height: 1.2 (display), 1.4 (headings), 1.65 (body)
Letter spacing: 0.04em on display, 0.2em on uppercase labels

Type Scale

Role	Family	Weight	Size	Line Height	Letter Spacing	Token
display	—	800	72px	1.05	-0.025em	`--text-display`
heading-lg	—	800	48px	1.12	-0.02em	`--text-heading-lg`
heading	—	800	32px	1.2	-0.015em	`--text-heading`
subheading	—	600	24px	1.3	—	`--text-subheading`
body-lg	—	400	16px	1.65	—	`--text-body-lg`
body	—	400	14px	1.65	—	`--text-body`
label	Monospace	500	12px	1.4	0.2em	`--text-label`

Spacing & Layout

Base unit: 8px Density: comfortable

Spacing Scale

Name	Value	Token
4	4px	`--spacing-4`
8	8px	`--spacing-8`
12	12px	`--spacing-12`
16	16px	`--spacing-16`
24	24px	`--spacing-24`
32	32px	`--spacing-32`
40	40px	`--spacing-40`
48	48px	`--spacing-48`
64	64px	`--spacing-64`
96	96px	`--spacing-96`

Border Radius

Element	Value
Cards and foil panels	16px–24px
Buttons and input fields	12px
Pills and star seals	999px
Section dividers	0px; 1px border

Page max-width: 1280px
Section gap: 64px
Card padding: 24px
Element gap: 16px

Components

Foil Trading Card

Role: 收藏展示主体：深色卡框承托宽幅烫印箔面。

用 #141319 卡框、白色 10% 细描边和 24px 左右圆角；中央箔面纵横比 1.8:1。标题字靠底边印在浅色位置；说明与编号用 #a9a8b6 和等宽字。边缘可以有深色投影，箔面本身不叠重阴影。

Sizes: foil face 1.8:1; frame padding 20px–24px
States: spectrum follows the shared lamp; non-foil card frame remains still

Light Foil Button

Role: 浅银箔上的主要行动，压下时材质弯曲而版面位置不动。

用亮银多层银色底、screen 高光与 overlay 光谱；深色 #16151c 油墨字，12px 圆角，min-height 44px，水平 padding 24px，字体 14px/600。内侧加细白高光与深色落影；键盘操作保留 2px 的 #c9c8d4 外轮廓。

Sizes: minimum height 44px; 12px radius
States: press: bend shading normal up to 14° and spring back; never translate the button

Grating Controls

Role: 让读者直接观察入射角和刻槽间距怎样改变衍射级次。

深色面板内使用两条水平范围控件：灯角度 0°–70°，间距 800–2200 nm、步长 50 nm；实时显示数值和 1–3 级衍射位置。滑轨使用 #c9c8d4 作银色强调，标签 14px，数值等宽显示。

Sizes: panel padding 24px–32px; two 44px-high controls
States: changing angle or period updates computed wavelength markers and spectral strip

Foil Material Samples

Role: 并列展示彩虹膜、同心星芒和碎钻的刻槽差异。

用统一尺寸、12px 圆角和 #141319 卡底；图形依次使用交叉光栅、圆形刻槽和随机晶面。拉丝光栅与薄膜干涉需要 WebGL2 的逐像素效果，使用明确的 WebGL 示例链接，不以假静态色块代替。

Redeem-Code Field

Role: 收藏卡或包装上用于兑换的短码。

面板底 #141319，1px rgba(255,255,255,0.15) 描边，12px 圆角，padding 12px 16px；占位格式 XXXX-XXXX-XXXX，使用等宽大写字、0.2em 字距和 #6c6b78 占位文字。聚焦描边切换为 #c9c8d4，保留可见焦点环。

Sizes: 14px monospace; 12px 16px padding; 12px radius
States: input uppercases characters and announces incomplete/valid format; validation does not depend on color alone

Collector Navigation

Role: 作为纸面边缘的一行轻导航，而非厚重应用栏。

近黑底、底部 1px rgba(255,255,255,0.1) 细线、24px 水平 padding；字标可使用油墨彩箔字，普通链接保持 #a9a8b6。右侧仅放短行动按钮，桌面可提供下载 HTML 的文字链接。

Sizes: roughly 56px high; 24px horizontal padding
States: hover raises text contrast; keyboard links keep the silver offset outline

Do's and Don'ts

Do

用 λ = d × |dot(h, k)| / m 计算颜色，d 默认 1500 nm；1、2、3 级分别按 1、0.5、0.3 加权。
使用离屏 300px 的共享指针灯；颜色与方向角相关，银底在未衍射处显露。
把紫、蓝、绿、黄、红的变化视为计算得到的动态光谱，而不是固定配色。
整页互动效果共用一个 WebGL2 上下文，逐项绘制并复制到元素画布。
为不支持或关闭 WebGL 的用户提供跟随同一盏灯的 CSS 平替。
把操作反馈落在法线与光照上，按压最多倾斜 14°，弹簧参数采用刚度 320、阻尼比 0.32。
把深色油墨限制在亮银箔上；暗印张正文使用 #ececf2，次要文字使用 #a9a8b6。
尊重减少动态偏好：固定灯的位置，停止轨道运动和弹簧过冲。

Don't

不要用静态虹彩渐变或 background-position 平移冒充光栅衍射。
不要把彩虹铺满箔面；多数区域必须读作银色。
不要让油墨文字压在高饱和光谱上；需要时把文字放到亮银区。
不要给每个元素新建 WebGL 上下文，也不要逐元素重复昂贵着色器。
不要靠循环 hue-rotate 改色；这会让箔面失去可解释的光栅与灯光关系。
不要为 WebGL-only 的拉丝或幻彩样式生成假的 CSS 色块预览。
不要交错读取布局和写入样式；先测量，再统一绘制或写变量。
不要在减少动态模式下保留自动绕行、弹跳或过冲。

Surfaces

Level	Name	Value	Purpose
0	Print Sheet	`#0c0b10`	Near-black page ground supporting the foil.
1	Raised Panel	`#141319`	Content cards use a 10% white hairline.
2	Dark Silver Foil	`linear-gradient(#4f4e59, #a3a2af 28%, #5e5d68 50%, #adacb9 76%, #575661)`	Grey metal under a spectrum blended with screen.
2	Light Silver Foil	`linear-gradient(#b4b3bf, #e9e8f0 30%, #bdbcc8 52%, #ecebf2 78%, #b6b5c1)`	Light metal uses overlay to preserve ink contrast.
3	Diffracted Spectrum	`1500 nm grating; orders 1:0.5:0.3 over silver`	Computed from lamp angle, never a static RGB fill.

Elevation

Trading card: 0 24px 48px -28px rgba(0,0,0,0.9)
Light-foil top rim: inset 0 1px 0 rgba(255,255,255,0.6)
Dark panel: 1px solid rgba(255,255,255,0.1); no broad glow
Lamp highlight: radial highlight within 150px of shared lamp

Imagery

展示真实光谱箔面、藏品或包装的宏观细节，保留能辨认金属基底的区域。静态展示用预计算光谱条加银底和方向性高光；避免照片噪点淹没细槽。WebGL-only 拉丝与幻彩需使用实际 shader 预览。

Layout

印张主容器上限 1280px，移动端 padding 24px，桌面端 40px；区块上方细线、48px 移动端/64px 桌面端垂直节奏。亮面采用 1.8:1 宽卡，可并排布局一个主卡和两个方形材质样片；阅读区留白足够区分印张、面板与箔片。

Agent Prompt Guide

QUICK COLOR REFERENCE:

background: #0c0b10
panel: #141319
text: #ececf2
secondaryText: #a9a8b6
inkOnLightFoil: #16151c
silver: #c9c8d4
brightSilver: #e9e8f0

EXAMPLE COMPONENT PROMPTS:

做一张可交互的烫印收藏卡。画布 #0c0b10，卡框 #141319、白色 10% 细描边，里面放一块 1.8:1 的银箔面。按 λ = d × |dot(h, k)| / m 计算光栅波长，d = 1500 nm，第 1/2/3 级权重为 1/0.5/0.3；一盏距屏幕 300px 的共享指针灯控制整页，银底应露出大部分面积。亮箔用 overlay、暗箔用 screen 混合。全页只用一个 WebGL2 上下文，并提供由同一光谱条和光源控制的 CSS 平替；按压只弯法线，不移动布局。偏好减少动态时停住光源。请验收：颜色随灯角度变化、大部分表面读作银、卡片尺寸稳定、焦点环清晰、CSS 平替可用。

Similar Brands

Holographic (holographic) — 两者都有虹彩，但全息渐变以移动 CSS 渐变表达；镭射箔按光栅方程和灯的角度计算波长，银色必须保留为材质底层。

Quick Start


:root {
  /* Colors */
  --color-print-sheet: #0c0b10;
  --color-panel: #141319;
  --color-dark-silver: #a3a2af;
  --color-light-silver: #e9e8f0;
  --color-foil-ink: #16151c;
  --color-text: #ececf2;
  --color-text-secondary: #a9a8b6;
  --color-focus-silver: #c9c8d4;
  --color-spectrum-red-sample: #d2052d;
  --color-spectrum-green-sample: #00d777;
  --color-spectrum-violet-sample: #6600e1;

  /* Typography — Font Families */
  --font-sans: 'Sans Serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'Monospace', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-display: 72px;
  --leading-display: 1.05;
  --tracking-display: -0.025em;
  --text-heading-lg: 48px;
  --leading-heading-lg: 1.12;
  --tracking-heading-lg: -0.02em;
  --text-heading: 32px;
  --leading-heading: 1.2;
  --tracking-heading: -0.015em;
  --text-subheading: 24px;
  --leading-subheading: 1.3;
  --text-body-lg: 16px;
  --leading-body-lg: 1.65;
  --text-body: 14px;
  --leading-body: 1.65;
  --text-label: 12px;
  --leading-label: 1.4;
  --tracking-label: 0.2em;

  /* Typography — Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Spacing */
  --spacing-unit: 8px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --spacing-96: 96px;

  /* Layout */
  --page-max-width: 1280px;
  --section-gap: 64px;
  --card-padding: 24px;
  --element-gap: 16px;
  --density: comfortable;

  /* Border Radius */
  --radius-cards-and-foil-panels: 16px–24px;
  --radius-buttons-and-input-fields: 12px;
  --radius-pills-and-star-seals: 999px;
  --radius-section-dividers: 0px; 1px border;

  /* Surfaces */
  --surface-print-sheet: #0c0b10;
  --surface-raised-panel: #141319;
  --surface-dark-silver-foil: linear-gradient(#4f4e59, #a3a2af 28%, #5e5d68 50%, #adacb9 76%, #575661);
  --surface-light-silver-foil: linear-gradient(#b4b3bf, #e9e8f0 30%, #bdbcc8 52%, #ecebf2 78%, #b6b5c1);
  --surface-diffracted-spectrum: 1500 nm grating; orders 1:0.5:0.3 over silver;
}

查看接入文档远程 MCP 端点，无需 token

社区

评分与反馈

还没有人评分，来当第一个登录后评分

正在加载评论…

登录后才能发表评论。

去登录

正在加载评论…

组件模板

组件预览

镭射按钮

浅色银箔上印油墨字，彩虹用 overlay 压上去；按下时膜面朝按下的位置弯一下。

常见问题

关于镭射箔的常见问题

什么是镭射箔风格？: 按衍射光栅实时算颜色的镭射烫印箔：指针是一盏灯，彩虹以灯为圆心扫过每个元素，银底、星芒、碎钻和幻彩都是不同的刻槽排布。它的设计理念：镭射箔的颜色不是画上去的，是算出来的。膜面上刻着间距 1500 纳米的细槽，光打上去按光栅方程分出波长：角度小时是银，角度变大，紫、蓝、绿、黄、红依次扫过，高级次再来一遍。核心理念： - 指针是一盏灯：灯离屏幕 300 像素高，所有镭射元素共用这一盏灯，彩虹以它为圆心一圈圈扫过整页 - 材质是刻槽的排布：直纹、交叉纹、同心圆（星芒）、随机小碎片（碎钻）、薄膜干涉（幻彩），喂给同一个光栅函数 - 银底是主角：彩虹只出现在角度对上的地方，大部分时间是金属的银，这才像真箔 - 一个 WebGL 上下文画整页：所有元素共用一个隐藏画布逐个渲染再拷贝，另有一套 CSS 平替跟着同一盏灯走 - 手感落在材质上：按下、勾选、拖动时只弯膜面的法线，颜色跳一下，元素本身不动视觉语言： - 近黑的印张底色，浅浅的裁切线，让箔面跳出来 - 油墨字只印在浅色箔上，不压在饱和的彩虹带上 - 减少动态效果时灯停在固定位置，画面静止
镭射箔风格常用什么配色？: 镭射箔的主色是 #0c0b10，辅色是 #c9c8d4，强调色包括 #ff5ab8、#ffd36b、#4fe0b4、#5aa8ff。每个色值都可以在本页色板中复制。
怎样把镭射箔风格做对？: 关键做法：按光栅方程算颜色：λ = d × |dot(h, k)| / m，d = 1500nm，1、2、3 级按 1、0.5、0.3 叠加. 把指针当成离屏幕 300px 的灯，所有镭射元素共用；指针静止 4 秒后灯自己慢慢绕圈. 用 bg-[#0c0b10] 近黑印张承托箔面，正文用 text-[#ececf2]，次要文字用 text-[#a9a8b6].
镭射箔风格最常见的错误是什么？: 应避免：禁止用一条固定的彩虹渐变再平移 background-position 冒充镭射. 禁止给每个元素各开一个 WebGL 上下文. 禁止让彩虹铺满整块：大部分面积应该是银.
如何让 AI 生成镭射箔风格的界面？: 复制本页提供的 AI 提示词（含设计 tokens 与组件规则），粘贴到 ChatGPT、Claude、Claude Code 或 Codex。提示词中应包含关键词：镭射、烫印、衍射光栅、全息箔。

全局样式

全局 CSS

css

/* Diffraction Foil：CSS 平替。灯的脚本（见复现提示词第 7 条）按灯的方向写入
   --k（刻槽法向角度）、--bs/--bp（光谱窗口）、--lx/--ly（灯相对元素的位置）；
   没有脚本时显示一张静态的银底和默认光谱。 */
:root {
  --foil-sheet: #0c0b10;
  --foil-ink: #16151c;
  --foil-silver: #c9c8d4;
  /* 光谱条：t 从 -1.25 到 1.25，按 |t| 处的光栅颜色画（d = 1500nm，1–3 级） */
  --spectrum: linear-gradient(90deg, #d2052d 0%, #dc463f 1.25%, #db8c4e 2.5%, #ceb557 3.75%, #abc75b 5%, #43ce5a 6.25%, #00cd57 7.5%, #00bd55 8.75%, #009562 10%, #005e8f 11.25%, #0417be 12.5%, #5504cc 13.75%, #b200cc 15%, #df00a7 16.25%, #eb6573 17.5%, #e8c479 18.75%, #cade7e 20%, #00e37b 21.25%, #00d777 22.5%, #00a09a 23.75%, #0022d8 25%, #6600e1 26.25%, #4200bb 27.5%, #01001e 28.75%, #000000 30%, #0a0301 31.25%, #cc0027 32.5%, #f7968e 33.75%, #e5f0af 35%, #00eca8 36.25%, #003ded 37.5%, #6d00dd 38.75%, #000000 40%, #000000 60%, #6d00dd 61.25%, #003ded 62.5%, #00eca8 63.75%, #e5f0af 65%, #f7968e 66.25%, #cc0027 67.5%, #0a0301 68.75%, #000000 70%, #01001e 71.25%, #4200bb 72.5%, #6600e1 73.75%, #0022d8 75%, #00a09a 76.25%, #00d777 77.5%, #00e37b 78.75%, #cade7e 80%, #e8c479 81.25%, #eb6573 82.5%, #df00a7 83.75%, #b200cc 85%, #5504cc 86.25%, #0417be 87.5%, #005e8f 88.75%, #009562 90%, #00bd55 91.25%, #00cd57 92.5%, #43ce5a 93.75%, #abc75b 95%, #ceb557 96.25%, #db8c4e 97.5%, #dc463f 98.75%, #d2052d 100%);
}

.foil {
  --k: 24deg;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(calc(var(--k) + 90deg), #4f4e59, #a3a2af 28%, #5e5d68 50%, #adacb9 76%, #575661);
}
.foil.foil-light {
  --blend: overlay;
  background: linear-gradient(calc(var(--k) + 90deg), #b4b3bf, #e9e8f0 30%, #bdbcc8 52%, #ecebf2 78%, #b6b5c1);
}
.foil::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: var(--dg, 300%);
  height: var(--dg, 300%);
  transform: translate(-50%, -50%) rotate(var(--k));
  background: var(--spectrum) var(--bp, 0) 0 / var(--bs, 100%) 100% repeat-x;
  mix-blend-mode: var(--blend, screen);
  opacity: 0.92;
  pointer-events: none;
}
.foil::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at var(--lx, 70%) var(--ly, 0%), rgb(255 255 255 / 0.55), rgb(255 255 255 / 0) 150px);
  mix-blend-mode: screen;
  pointer-events: none;
}
.foil-text {
  background:
    radial-gradient(circle at var(--lx, 70%) var(--ly, 0%), rgb(255 255 255 / 0.9), rgb(255 255 255 / 0) 120px),
    var(--spectrum) var(--bp, 0) 0 / var(--bs, 100%) 100% repeat-x,
    linear-gradient(#e2e1ea, #8f8e9b 55%, #cfced9);
  background-blend-mode: screen, screen, normal;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@media (prefers-reduced-motion: reduce) {
  .foil, .foil-text { transition: none; }
}

维度	镭射箔	故障广播
主色	#0c0b10	#0B0B0E
辅助色	#c9c8d4	#EDEDED
适合场景	镭射 / 烫印 / 衍射光栅	故障艺术 / 故障广播 / CRT
独有标签	colorful	retro

一次点击拿到

查看完整 Showcase →

7 个风格文件，包含 SKILL.md。

逐个预览或下载文件

Metadata

Style metadata including version information

Design Tokens

Figma / Style Dictionary / Tokens Studio 兼容

Tailwind Preset

Tailwind CSS 主题预设，可直接在配置中引用

Global CSS

包含 CSS 变量和基础样式

shadcn Theme

shadcn/ui 主题配置

CSS Variables

纯 CSS 变量，适用于任何项目

SKILL.md

可加载到 Cursor / Claude Code / VS Code 的技能包

设计哲学

镭射箔的颜色不是画上去的，是算出来的。膜面上刻着间距 1500 纳米的细槽，光打上去按光栅方程分出波长：角度小时是银，角度变大，紫、蓝、绿、黄、红依次扫过，高级次再来一遍。

无障碍

无障碍评分

基于颜色对比度和排版可读性的 WCAG 2.1 合规分析。

综合评分

等级: A - 优秀

对比度

分数: 95/100平均比率: 10.93:1

AA 通过AAA 未通过

场景	颜色	比率
Text on background	/#ececf2 / #0c0b10	16.66:1
Secondary text on background	/#a9a8b6 / #0c0b10	8.37:1
Muted text on background	/#8a8996 / #0c0b10	5.7:1
Text on secondary background	/#ececf2 / #141319	15.7:1
Secondary text on secondary	/#a9a8b6 / #141319	7.88:1
Button primary	/#16151c / #e3e2ea	14.1:1
Text on accent 1	/#ececf2 / #1d1c24	14.35:1
Alt text on accent 1	/#a9a8b6 / #1d1c24	7.21:1
Text on accent 2	/#ececf2 / #26252e	12.87:1
Alt text on accent 2	/#a9a8b6 / #26252e	6.46:1

可读性

分数

87/100

字号

text-sm md:text-base

字重

font-sans font-extrabold tracking-tight

行高

default

评分基于 WCAG 2.1 标准。AA 级要求普通文本对比度 4.5:1、大文本 3:1；AAA 级要求普通文本 7:1、大文本 4.5:1。

镭射箔

镭射箔 的设计文档