Display
色差文字显现
带有 RGB 分裂色差效果的标题,悬停或加载时对齐为清晰文字。
作者:mcpSkills
框架
nextjs
UI 库
shadcntailwind
难度advanced
英文提示词
Create a large headline with a chromatic aberration text effect. The headline should appear as three offset layers: cyan shifted left, magenta centered, and yellow shifted right, creating an RGB split glitch look. On load, the layers animate inward to align into clean white text. On hover, the layers separate slightly again. Use CSS text-shadow or layered spans. Background should be deep black. Use a bold condensed sans-serif font. The effect should feel controlled and premium, not chaotic. Use Tailwind CSS and CSS keyframes.
中文提示词
创建一个带有色差文字效果的大标题。标题应显示为三个偏移层:青色左移、洋红居中、黄色右移,形成 RGB 分裂故障外观。加载时各层向内对齐,合并为干净的白色文字。悬停时各层再次轻微分离。使用 CSS text-shadow 或分层 span。背景应为纯黑。使用粗体压缩无衬线字体。效果应感觉可控且高级,而非混乱。使用 Tailwind CSS 和 CSS keyframes。

Overview
借鉴故障艺术但保持精致的字体效果——适合创意品牌和深色发布页。
Features
- RGB 分裂色差
- 三层文字阴影/span
- 加载对齐动画
- 悬停分离
- 纯黑背景
- 粗体压缩无衬线
Usage
用于深色创意网站的 hero 标题、加载状态或区域标题。
Customization
修改 prompt 以:
- 滚动进入视口时触发分裂效果
- 在文字后添加扫描线叠加
- 将其中一层改为描边版本
- 为单个颜色通道添加微妙闪烁循环