magicui.design — All collected resources adapted with source code, 100% interactive live preview in cards.
macOS 拟真弹性 Dock 交互栏,鼠标悬浮时产生平滑物理缩放波形。
硬件加速的双向无缝滚动流,支持悬停自动平滑暂停与动态插槽内容。
苹果风格非对称卡片矩阵,集成微动效背景、渐变图标与悬浮深度投影。
SVG 贝塞尔曲线光脉冲流动,用于直观展示云端数据同步与微服务通信。
纯原生 Canvas 高性能粒子悬浮,支持鼠标指针斥力与粒子连接线。
通过 CSS 关键帧驱动高亮渐变色块在卡片四边无缝循环循环巡航。
多色谱动态渐变边缘环绕,为重点 CTA 卡片赋予奢华科技质感。
通过滚动视图触发平滑阻尼数字自增,完美呈现 ARR、用户量与性能提升比。
在 Hero 标语中定时垂直翻滚替换核心关键词,极具吸引力。
点击支付成功或达成目标时触发五彩缤纷的纸屑礼花飞溅动效。
用纯 CSS 绘制的安卓设备外壳,圆角机身、侧边按键与挖孔屏,可将任意界面内容嵌入屏幕区域。
SVG 环形进度条,进度弧与中心数字同步弹性增长,适合展示评分、使用率与任务完成度。
文字填充多色渐变并让色带持续流动,用于标题与徽标的高亮强调。
SVG 方格网格中随机方格淡入淡出,作为 Hero 与卡片的轻量科技感底纹。
列表项依次从下方滑入并渐显,适合消息流、通知中心与实时事件面板。
文字表面有一道周期性扫过的金属高光,常用于 New、Beta 之类的小标签。
太阳与月亮图标在切换时做圆形扩散形变,替代生硬的明暗主题跳变。
文字上叠加多层缓慢流动的极光色带,用来营造氛围感标题。
多个头像重叠排布并带 +N 计数徽标,悬停时散开展示,常用于社会认同区块。
卡片背后有一团跟随鼠标移动的柔和背光,用来突出产品主视觉。
元素从模糊、位移与低透明度过渡到清晰,是滚动入场的通用包裹组件。
左右两段代码通过可拖动的分隔线对比,适合展示重构前后与版本差异。
粗描边加硬阴影的漫画风文字,配合半调网点底纹,用于趣味型标题。
点击任意位置都会在指针处迸发一串粒子或表情,为按钮与互动区增加即时反馈。
一道对角线光带扫过文字完成揭示,常用于首屏标题的入场动画。
用径向渐变生成的点阵背景,可叠加跟随鼠标的光斑遮罩。
用密集圆点勾勒世界地图轮廓,并在城市之间绘制动态连线与脉冲标记。
带图标的文件夹与文件树,支持展开收起、选中高亮与节点增删。
方格网格按随机节奏闪烁明暗,营造数据流动与算力涌动的底纹。
透视空间中多层漂浮的粒子,随鼠标产生视差位移,用于科技感首屏。
卡片在悬停时扫过一道斜向眩光,模拟玻璃与金属表面的反光。
等宽字符不断跳变后逐个落定为目标文本,即经典的解码乱码效果。
SVG 等距网格线背景,尺寸与线宽可调,是通用的结构感底纹。
封面加播放按钮,点击后以缩放动画展开视频弹窗,用于产品演示视频。
SVG 六边形蜂窝图案,描边带流动的渐变光,适合科技与生物主题背景。
文字上扫过一条马克笔高亮色带,用于强调关键句与结论。
文字在悬停或进入视口时逐字乱码跳动后收敛为原文,用来强化标题的科技感。
技术图标分布在 3D 球面上缓慢旋转,随鼠标视差转动,用于技术栈展示。
鼠标经过的方格被点亮并带动邻格渐变,适合做互动型 Hero 背景。
悬停时圆形色块从指针处扩散铺满按钮,文字变色并滑出箭头。
用纯 CSS 绘制的 iPhone 机身,含灵动岛与侧边按键,可作为移动端界面展示框。
每个字母根据鼠标横向位置产生位移与倾斜,制造动态字体排版效果。
从中心射出的多道光束缓慢摆动,为标题区提供舞台灯光感。
文字带一条长长的斜向线条阴影,悬停时阴影扫过,用于极简标题。
卡片内的径向高光与边框描边跟随鼠标移动,是最常用的交互卡片样式。
深色背景中多颗流星带拖尾斜向划过,用于暗色系 Hero 与营销区块。
同一位置的文字在多个词之间以模糊缩放方式形变切换,替代生硬的轮播。
卡片边框是一圈流动的霓虹渐变并带外发光,适合定价与技术卖点区块。
SVG 噪点纹理叠加在内容之上,消除大色块的塑料感并提升质感层次。
多个图标沿不同半径的轨道绕中心旋转,用于生态、集成与合作伙伴展示。
图像被切成网格方块并逐块拼合或散开,悬停时呈现马赛克效果。
一个 SVG 光标自动移动到目标位置并触发点击波纹,用于产品操作演示。
滚动容器边缘叠加强度递增的模糊遮罩,让内容自然淡出而非硬切。
按钮外圈持续扩散脉冲光环,用于强调主 CTA 与直播、录音等状态。
按钮背景是持续流动的彩虹渐变,用于品牌色活跃的主行动按钮。
透视地平线加向前滚动的地面网格与渐变落日,经典合成波视觉。
点击时从指针位置扩散出同心圆涟漪,为点击行为提供明确的触觉暗示。
在面板任意位置点击都会扩散多层同心水波,适合做互动型背景。
用纯 CSS 绘制的 Safari 窗口,含交通灯按钮、地址栏与标签页,用于网站展示。
多行文字根据滚动或指针速度改变方向与快慢,替代普通的匀速跑马灯。
顶部或侧边的弹簧进度条实时反映容器滚动百分比。
按钮表面有一道周期性扫过的微光,用于次级但需要吸引注意的操作。
按钮带发光线框,悬停时颜色扫过填充,点击有按压反馈。
自定义光标圆点带惯性缓动跟随鼠标,悬停可交互元素时变形放大。
文字周围持续闪烁星点,用于标题或成功状态的高光点缀。
文字沿圆周排布并整体缓慢旋转,中间可承载图标或按钮。
可调角度与宽度的斜向条纹背景,用于警示、加载与装饰性区域。
带标题栏的等宽终端窗口,逐字打印命令与输出,可用于安装步骤演示。
逐字符绕 X 轴翻转变换为下一个词,用于强调型标题的循环切换。
文字按字符或词逐个入场,内置淡入、缩放、模糊与打字等多种预设。
文字被移动的遮罩逐字揭示并带渐变过渡,适合长句标题的入场。
还原社交平台推文卡片,含认证标识、正文与互动数据,可点击点赞。
逐字输入并逐字删除的循环打字机效果,带闪烁光标与可调速度。
文字内部填充一段动态变化的画面,用渐变与混合模式模拟视频质感。
从中心向外辐射的速度线持续向前冲刺,用于高性能与速度感主题。