Background
Stractium 背景
基于着色器的背景，灵感来自复杂分形与有机纹理，使用光线步进与 GLSL 创建不断演化的视觉效果。
csstailwindbackground +3
所有组件
Inspira UI 提供的所有组件的列表。
131 / 131All
Browse components
Find the right component, open its preview, then copy the source with API notes.
131
Total
2
New
1
Updated
Background
Background
丝绸背景
柔和流动的着色器背景，灵感来自丝绸纹理与运动，基于 ShaderToy。
csstailwindbackground +3
Background
交互网格图案
采用 SVG 制作的交互式网格背景，完全可自定义。
csstailwindbackground +2
Background
俄罗斯方块
俄罗斯方块背景组件，甚至可以点击方块来消除。
csstailwindbackground
Background
图案背景
简单的动画图案背景，让版块更突出。
csstailwindbackground +1
Background
奇点背景
一个基于着色器的背景。
csstailwindbackground +3
Background
宇宙传送门
使用 Three.js 构建的震撼 3D 传送门，包含发光环、漂浮水晶、空间扭曲和次元流体。
csstailwindbackground +2
Background
扭曲背景
为子元素添加扭曲动画效果的容器组件。
csstailwindbackground +1
Background
星空背景
使用分层运动与随机星位的视差星空动画背景。
csstailwindbackground +2
Background
极光背景
细腻的极光（南北极光）背景效果。
csstailwindbackground +1
Background
气泡背景
具有漂浮气泡的动画背景。
csstailwindbackground +1
Background
波浪背景
流动的波浪背景效果。
csstailwindbackground +2
Background
流星背景
华丽的星空动画背景，带有发光和锐利拖尾效果。
csstailwindbackground +1
Background
涟漪
用于突出元素的动画涟漪效果。
csstailwindbackground +1
Background
液态背景
使用 OGL 实现的响应式动态背景效果，基于 WebGL。
csstailwindbackground +2
Background
漩涡背景
波动、旋转的漩涡背景，适用于 CTA 与背景展示。
csstailwindbackground +3
Background
灯光效果
引人注目的灯光效果，包含圆锥渐变、聚光与发光线，带来沉浸式视觉体验。
csstailwindbackground +1
Background
神经网络背景
使用 OGL 与 GLSL 的动态着色器背景，呈现流动的神经质视觉效果。
csstailwindbackground +3
Background
粒子漩涡
带有旋转粒子的动画背景。
csstailwindbackground +2
Background
粒子背景
粒子能为页面增加动态与沉浸感，营造深度、运动和交互的视觉效果。
csstailwindbackground +2
Background
视频文字
带有视频背景的文字组件。
csstailwindbackground +1
Background
闪光
可配置的闪光组件，可作为背景或独立使用。
csstailwindbackground +1
Background
闪烁网格
使用 Canvas 制作的闪烁网格背景，可通过 Tailwind CSS 完全自定义。
csstailwindbackground +2
Background
雪花背景
优雅的雪花飘落动画背景。
csstailwindbackground +1
Background
雷暴背景
受云层雷暴启发的基于着色器的背景。
csstailwindbackground +3
Background
黑洞背景
令人沉浸的画布背景效果，模拟扭曲的“黑洞”隧道，包含动画圆盘、放射线与粒子。
csstailwindbackground +2
Button
Card
2 new
CardNew
Fey Cards
一个带有分层图片切换和电影感标题揭示效果的悬停卡片堆叠动画组件。
csstailwindcard +1
CardNew
Floating Card
一个带有透视、3D 倾斜和光泽跟随效果的悬停卡片组件，灵感来自 Perplexity Comet 网站。
csstailwindcard +3
Card
3D 卡片效果
具有透视效果的卡片，悬停时可让卡片元素提升。
csstailwindcard +1
Card
Apple 卡片轮播
一款流畅的 Apple 风格卡片轮播，支持模糊加载图片、模态展开和平滑滚动控制。
csstailwindcard +1
Card
卡片聚光效果
一款带有动态聚光灯效果的卡片组件，光标移动时跟随，增强视觉互动。
csstailwindcard +1
Card
方向感知悬停卡片
方向感知的悬停卡片，在悬停时显示带动态效果的图片，并提供可自定义的内容覆盖层。
csstailwindcard +1
Card
翻转卡片
一款动态的翻转卡片，沿 X 轴或 Y 轴平滑实现 180 度翻转，带来有趣的交互视觉效果。
csstailwindcard
Card
高光卡片
悬停时出现高光效果的卡片，灵感来自 Linear 网站。
csstailwindcard +1
Cursor
Cursor
图像尾迹光标
一种交互式光标效果，鼠标移动时呈现动态的图像尾迹，并提供多种动画变体。
csstailwindcursor +2
Cursor
尾迹光标
使用 OGL 渲染的顺滑彩带尾迹光标，具备动态着色器和可定制的动画效果。
csstailwindcursor +2
Cursor
平滑光标
适用于 Vue 应用的可定制物理驱动平滑光标动画组件。
csstailwindcursor +1
Cursor
流体光标
GPU 加速的动画光标尾迹，模拟流体运动。
csstailwindcursor +2
Cursor
流线光标
具有平滑波动尾迹的响应式动画光标，使用弹簧物理和动态色彩波动。
csstailwindcursor +2
Device Mockup
Forms & Input
Forms & Input
光晕搜索框
具有多重发光环与细微动画光晕的未来感搜索输入，为界面带来沉浸式体验。
csstailwindinput +1
Forms & Input
占位符滚动与消失输入框
输入框占位符滑入，并在提交时呈现消失效果。
csstailwindinput +1
Forms & Input
取色器
全功能的取色组件，支持多种颜色格式、无障碍特性与自定义色板。
csstailwindinput +2
Forms & Input
平衡滑块
具备可调颜色、限制和交互提示的动态平衡滑块。
csstailwindinput
Forms & Input
文件上传
现代文件上传组件，带 3D 卡片效果、拖放交互和响应式网格背景。
csstailwindinput +1
Forms & Input
输入框
具有径向悬停效果的多功能动态输入框，适配现代 Web 应用。
csstailwindinput +1
Miscellaneous
1 updated
MiscellaneousUpdated
Shader Toy Viewer
在浏览器中渲染 ShaderToy GLSL 着色器的强大灵活组件。
csstailwindshader-toy +2
Miscellaneous
Animated Modal
带 3D 入场动画与背景模糊效果的弹窗组件。
csstailwindmodal +2
Miscellaneous
Animated Tabs
带共享布局选中态胶囊与堆叠内容切换动画的 Tabs 组件。
csstailwindtabs +2
Miscellaneous
Bento 网格
炫酷的 Bento 网格布局，可放置不同子组件。
csstailwindbento +1
Miscellaneous
Dock
类似 macOS 的 Dock，悬停时放大图标。
csstailwind
Miscellaneous
SVG 遮罩
通过悬停与鼠标移动揭示内容的动态 SVG 遮罩组件。
csstailwindaceternity-ui
Miscellaneous
书本
可自定义尺寸与渐变的 3D 书本组件。
csstailwindx-ui
Miscellaneous
动态评价
展示用户反馈的动态组件，包含过渡与自动播放功能。
csstailwindaceternity-ui
Miscellaneous
动画列表
逐个引入的动画列表，适合在落地页展示通知或事件。
csstailwindmagic-ui
Miscellaneous
动画圆形进度条
显示百分比的圆形仪表盘动画组件。
csstailwindinput +1
Miscellaneous
动画提示
炫酷的提示气泡，悬停时揭示并跟随鼠标。
csstailwindaceternity-ui
Miscellaneous
动画网格
倾斜动画网格，带投影效果。
csstailwindinput
Miscellaneous
变形标签页
复刻 Preet 的胶状变形标签交互，包含粘连效果。
csstailwind
Miscellaneous
可扩展画廊
响应式图片画廊，悬停时动态放大图片。
csstailwindgallery
Miscellaneous
图片滑块
全屏图片滑块，可使用键盘导航。
csstailwindimages +1
Miscellaneous
多步加载器
多步骤加载组件，支持异步条件。
csstailwindaceternity-ui
Miscellaneous
容器滚动
根据滚动进度变换内部内容的滚动效果，包含缩放与旋转的平滑过渡。
csstailwindaceternity-ui
Miscellaneous
对比
通过滑动比较两组内容——图像、设计、代码或自定义元素。
csstailwindaceternity-ui
Miscellaneous
放大镜
用于放大图片、视频或任意元素的镜头组件。
csstailwindaceternity-ui
Miscellaneous
时间线
视觉化、交互式的时间线组件，带平滑动画、粘性标签与渐变滚动效果。
csstailwindaceternity-ui
Miscellaneous
滚动岛
具备动态动画的交互组件，展示滚动进度，并带可展开的附加内容区域。
csstailwindnumber-flow
Miscellaneous
照片画廊
用精美的画廊展示团队风采。
csstailwindgallery
Miscellaneous
评价滑块
轻量的评价滑块，包含图片旋转、文字过渡与可选自动轮播。
csstailwind
Miscellaneous
跑马灯
可定制的循环滚动组件，支持水平/垂直方向、悬停暂停与重复次数。
csstailwindmagic-ui
Miscellaneous
跟踪光束
渲染跟踪光束效果的组件，支持动态滚动动画与渐变描边。
csstailwindaceternity-ui
Miscellaneous
链接预览
为锚点生成动态链接预览。
csstailwindaceternity-ui
Special Effects
Special Effects
刮刮乐揭示
互动式刮刮乐效果，可自定义尺寸与动画，在刮开后显示隐藏内容。
csstailwindmagic-ui
Special Effects
动画光束
通过 SVG 连接元素的光束动画。
csstailwindmagic-ui
Special Effects
发光效果
基于距离的动态发光效果，对鼠标移动与滚动作出响应，适合突出可交互元素。
csstailwindaceternity-ui
Special Effects
发光边框
动态的发光边框效果。
csstailwindmagic-ui
Special Effects
图片徽章
一个带有图片的徽章，悬停时可展示更多图片。
csstailwindaceternity-ui
Special Effects
弹性日历
带弹簧动画的日历组件，可展开查看事件，使用 Motion-V 实现平滑过渡。
csstailwindmotion-v
Special Effects
彩带
用于彩带动画的 Vue 组件。
csstailwindcanvas +1
Special Effects
抖动着色器
用于图像的实时有序抖动效果，非常适合像素艺术和复古风格。
tailwindbackgroundcard +1
Special Effects
流星雨
展示流星雨动画的组件，可自定义流星数量与样式。
csstailwindaceternity-ui
Special Effects
渐进模糊
一种分层的背景模糊效果，会在指定方向上逐渐增强强度，适合营造景深、聚焦与视觉分隔。
csstailwindmotion-v +2
Special Effects
粒子图像
将粒子动画应用到图像上的炫酷效果，类似 NuxtLabs.com 上的展示。
csstailwindcanvas +1
Special Effects
边框光束
可定制尺寸、时长、颜色与延迟的炫酷动画边框光束效果。
csstailwindmagic-ui
Special Effects
霓虹边框
视觉吸引力强的霓虹边框组件，可自定义动画与颜色。
csstailwindborder
Special Effects
鳞片纹理
一种重复的对角线、水平线或垂直线图案背景效果。
csstailwindaceternity-ui
Testimonials
Text Animation
Text Animation
3D 文字
时尚的 3D 文字组件，可自定义颜色、阴影与动画选项。
csstailwind3d
Text Animation
光辉文字
为文字添加耀眼的高光效果。
csstailwindmagic-ui
Text Animation
加密文字
当进入视口时由乱码字符开始并逐步解密为最终内容的文字揭示效果。
csstailwindmotion-v +3
Text Animation
字符上提
逐字上提的错落文字动画。
csstailwindmagic-ui
Text Animation
容器文字翻转
一个循环翻转单词的容器，并随文字宽度动画。
csstailwindaceternity-ui
Text Animation
彩色文字
多彩文字组件，带滤镜与缩放效果。
csstailwindaceternity-ui
Text Animation
数字滚动
动画数字向目标值递增或递减。
csstailwindmagic-ui
Text Animation
文字变形
动态在一组文本之间切换，呈现平滑的渐变效果。
csstailwindmagic-ui
Text Animation
文字悬停效果
在悬停时为文字添加渐变描边与动画，灵感来自 x.ai。
csstailwind
Text Animation
文字揭示
使用 GSAP 的 SplitText 实现逐行的文字入场动画。
csstailwindgsap
Text Animation
文字揭示卡片
鼠标移动时在卡片底部揭示文字的效果。
csstailwindaceternity-ui
Text Animation
文字故障
为文字添加鲜明的故障效果，可自定义速度、阴影颜色，并可选择仅在悬停时触发。
csstailwind
Text Animation
文字生成效果
炫酷的文字效果，在页面加载时逐字渐显。
csstailwindaceternity-ui
Text Animation
文字高亮
为文字填充背景以突出显示的效果。
csstailwindaceternity-ui
Text Animation
旋转文字
让文字沿圆周运动的动画组件，可自定义速度、方向、颜色与过渡，打造动态效果。
csstailwindmagic-ui
Text Animation
模糊揭示
平滑模糊淡入内容的组件。
csstailwindmagic-ui
Text Animation
滚动文字揭示
在滚动时逐词显现的文字组件，可自定义内容与样式。
csstailwindmagic-ui
Text Animation
盒子揭示
可自定义颜色、时长与延迟的盒子揭示动画。
csstailwindmagic-ui
Text Animation
线条阴影文字
为文字添加线条阴影效果，使其更具视觉吸引力。
csstailwindmagic-ui
Text Animation
翻转单词
循环翻转单词列表的组件。
csstailwindaceternity-ui
Text Animation
聚焦
通过动态模糊和动画框高亮句子中的单词，支持自动循环或悬停手动聚焦模式。
csstailwindcodepen
Text Animation
超能文字
悬停时快速变化的文字动画。
csstailwindmagic-ui
Text Animation
闪光文字
为文字持续生成闪光与平滑过渡，非常适合突出显示的星光效果。
csstailwindmagic-ui
Visualization
Visualization
3D 轮播
使用 Three.js 与 Motion-V 的动态交互 3D 轮播组件，支持平滑无限旋转与用户控制。
csstailwindthreejs +1
Visualization
Github 地球
可自定义弧线、点与动画的 3D 互动地球可视化，灵感来自 Github。
csstailwindthreejs +1
Visualization
Spline
Spline 3D 工具的 Vue 包装组件，提供事件与自动缩放。
csstailwindspline
Visualization
世界地图
展示带有动画弧线和脉冲点效果的可自定义世界地图。
csstailwindaceternity-ui
Visualization
光速动效
使用 Three.js 构建的高度可定制 3D 高速公路视觉效果，包含道路、车辆、灯光与失真等动画，可模拟沉浸式运动感。
csstailwindthreejs +1
Visualization
动态 Logo 云
动态展示公司 Logo 的云图，可用于展示合作或客户徽标。
csstailwind
Visualization
图标云
交互式 3D 标签云组件。
csstailwindmagic-ui
Visualization
地球
可交互的旋转地球组件。
csstailwindcobe +1
Visualization
弯曲画廊
带曲面布局的可滚动 3D 画廊，使用 WebGL 与 OGL 渲染动态图片卡片和动画文字。
csstailwindogl +1
Visualization
折纸 Logo
带折纸效果的翻转 Logo 动画。
csstailwindhover-dev
Visualization
文件树
用于展示目录中文件与文件夹结构的组件。
csstailwindmagic-ui
Visualization
无限网格
使用 OGL 构建的高性能交互式 3D 无限网格组件，效果类似 phantom.land。
csstailwindphantom-land +2
Visualization
液态 Logo
基于 WebGL 的高级组件，通过自定义着色器为徽标或图像添加动态液态效果。
csstailwindwebgl +1
Visualization
液态玻璃效果
使用 SVG 置换滤镜实现的玻璃拟态效果，类似 Apple Liquid Glass。
csstailwindapple +1
Visualization
轨道动画
让内容沿圆轨道运动的组件，可自定义持续时间、延迟与半径，并可选择显示轨道路径。
csstailwindmagic-ui