shadcn-hub
HomeOfficial Components64Live GalleryLive
Design Tools
/
Star on GitHub
shadcn-hub100% Strictly Implemented
Visitor Analytics
|
Site Visitor Counter
Star on GitHubMIT License

Magic UI

Design Engineer

Featured

Overview

Components

Motion Components
5 items
Text Effects
6 items
Bento Blocks
3 items
Background Patterns
4 items
Home/Live Gallery/magicui.design
Visit Source Site
动效基元77 Live Itemshttps://magicui.design/docs/components

magicui.design Components & Blocks Exhibition

magicui.design — All collected resources adapted with source code, 100% interactive live preview in cards.

magicui.designCOMPONENT
Source Details

Dock

macOS 拟真弹性 Dock 交互栏,鼠标悬浮时产生平滑物理缩放波形。

#Motion#Navigation#macOS
magicui
magicui.designCOMPONENT
Source Details

Marquee

硬件加速的双向无缝滚动流,支持悬停自动平滑暂停与动态插槽内容。

#Motion#Marquee#Showcase
magicui
magicui.designBLOCK
Source Details

Bento Grid

苹果风格非对称卡片矩阵,集成微动效背景、渐变图标与悬浮深度投影。

#Bento#Grid#Marketing
magicui
magicui.designCOMPONENT
Source Details

Animated Beam

SVG 贝塞尔曲线光脉冲流动,用于直观展示云端数据同步与微服务通信。

#AnimatedBeam#SVG#Motion
magicui
magicui.designCOMPONENT
Source Details

Particles

纯原生 Canvas 高性能粒子悬浮,支持鼠标指针斥力与粒子连接线。

#Particles#Canvas#Background
magicui
magicui.designCOMPONENT
Source Details

Border Beam

通过 CSS 关键帧驱动高亮渐变色块在卡片四边无缝循环循环巡航。

#BorderBeam#Animation#Card
magicui
magicui.designCOMPONENT
Source Details

Shine Border

多色谱动态渐变边缘环绕,为重点 CTA 卡片赋予奢华科技质感。

#ShineBorder#Border#Effect
magicui
magicui.designCOMPONENT
Source Details

Number Ticker

通过滚动视图触发平滑阻尼数字自增,完美呈现 ARR、用户量与性能提升比。

#NumberTicker#Stats#Motion
magicui
magicui.designCOMPONENT
Source Details

Word Rotate

在 Hero 标语中定时垂直翻滚替换核心关键词,极具吸引力。

#Typography#Text#Hero
magicui
magicui.designCOMPONENT
Source Details

Confetti

点击支付成功或达成目标时触发五彩缤纷的纸屑礼花飞溅动效。

#Confetti#Celebration#Interaction
magicui
magicui.designCOMPONENT
Source Details

Android

用纯 CSS 绘制的安卓设备外壳,圆角机身、侧边按键与挖孔屏,可将任意界面内容嵌入屏幕区域。

#Device#Android#Mockup
magicui
magicui.designCOMPONENT
Source Details

Animated Circular Progress Bar

SVG 环形进度条,进度弧与中心数字同步弹性增长,适合展示评分、使用率与任务完成度。

#Progress#SVG#Counter
magicui
magicui.designCOMPONENT
Source Details

Animated Gradient Text

文字填充多色渐变并让色带持续流动,用于标题与徽标的高亮强调。

#Text#Gradient#Loop
magicui
magicui.designCOMPONENT
Source Details

Animated Grid Pattern

SVG 方格网格中随机方格淡入淡出,作为 Hero 与卡片的轻量科技感底纹。

#Background#Grid#SVG
magicui
magicui.designCOMPONENT
Source Details

Animated List

列表项依次从下方滑入并渐显,适合消息流、通知中心与实时事件面板。

#List#Notification#Stagger
magicui
magicui.designCOMPONENT
Source Details

Animated Shiny Text

文字表面有一道周期性扫过的金属高光,常用于 New、Beta 之类的小标签。

#Text#Shine#Badge
magicui
magicui.designCOMPONENT
Source Details

Animated Theme Toggler

太阳与月亮图标在切换时做圆形扩散形变,替代生硬的明暗主题跳变。

#Theme#Toggle#Transition
magicui
magicui.designCOMPONENT
Source Details

Aurora Text

文字上叠加多层缓慢流动的极光色带,用来营造氛围感标题。

#Text#Aurora#Gradient
magicui
magicui.designCOMPONENT
Source Details

Avatar Circles

多个头像重叠排布并带 +N 计数徽标,悬停时散开展示,常用于社会认同区块。

#Avatar#Social#Stack
magicui
magicui.designCOMPONENT
Source Details

Backlight

卡片背后有一团跟随鼠标移动的柔和背光,用来突出产品主视觉。

#Glow#Pointer#Hero
magicui
magicui.designCOMPONENT
Source Details

Blur Fade

元素从模糊、位移与低透明度过渡到清晰,是滚动入场的通用包裹组件。

#Entrance#Blur#Scroll
magicui
magicui.designCOMPONENT
Source Details

Code Comparison

左右两段代码通过可拖动的分隔线对比,适合展示重构前后与版本差异。

#Code#Diff#Slider
magicui
magicui.designCOMPONENT
Source Details

Comic Text

粗描边加硬阴影的漫画风文字,配合半调网点底纹,用于趣味型标题。

#Text#Comic#Outline
magicui
magicui.designCOMPONENT
Source Details

Cool Mode

点击任意位置都会在指针处迸发一串粒子或表情,为按钮与互动区增加即时反馈。

#Particles#Click#Feedback
magicui
magicui.designCOMPONENT
Source Details

Dia Text Reveal

一道对角线光带扫过文字完成揭示,常用于首屏标题的入场动画。

#Text#Reveal#Mask
magicui
magicui.designCOMPONENT
Source Details

Dot Pattern

用径向渐变生成的点阵背景,可叠加跟随鼠标的光斑遮罩。

#Background#Pattern#Dots
magicui
magicui.designCOMPONENT
Source Details

Dotted Map

用密集圆点勾勒世界地图轮廓,并在城市之间绘制动态连线与脉冲标记。

#Map#SVG#Global
magicui
magicui.designCOMPONENT
Source Details

File Tree

带图标的文件夹与文件树,支持展开收起、选中高亮与节点增删。

#Tree#Files#Collapsible
magicui
magicui.designCOMPONENT
Source Details

Flickering Grid

方格网格按随机节奏闪烁明暗,营造数据流动与算力涌动的底纹。

#Background#Grid#Flicker
magicui
magicui.designCOMPONENT
Source Details

Floating 3D Particles

透视空间中多层漂浮的粒子,随鼠标产生视差位移,用于科技感首屏。

#3D#Particles#Parallax
magicui
magicui.designCOMPONENT
Source Details

Glare Hover

卡片在悬停时扫过一道斜向眩光,模拟玻璃与金属表面的反光。

#Hover#Glare#Card
magicui
magicui.designCOMPONENT
Source Details

Globe

用点阵球面绘制的旋转地球,可标注城市节点,常用于全球化业务展示。

#Globe#Dots#Rotate
magicui
magicui.designCOMPONENT
Source Details

Glyph Matrix

等宽字符不断跳变后逐个落定为目标文本,即经典的解码乱码效果。

#Text#Scramble#Matrix
magicui
magicui.designCOMPONENT
Source Details

Grid Pattern

SVG 等距网格线背景,尺寸与线宽可调,是通用的结构感底纹。

#Background#Grid#SVG
magicui
magicui.designCOMPONENT
Source Details

Hero Video Dialog

封面加播放按钮,点击后以缩放动画展开视频弹窗,用于产品演示视频。

#Video#Dialog#Hero
magicui
magicui.designCOMPONENT
Source Details

Hexagon Pattern

SVG 六边形蜂窝图案,描边带流动的渐变光,适合科技与生物主题背景。

#Background#Hexagon#SVG
magicui
magicui.designCOMPONENT
Source Details

Highlighter

文字上扫过一条马克笔高亮色带,用于强调关键句与结论。

#Text#Highlight#Marker
magicui
magicui.designCOMPONENT
Source Details

Hyper Text

文字在悬停或进入视口时逐字乱码跳动后收敛为原文,用来强化标题的科技感。

#Text#Scramble#Hover
magicui
magicui.designCOMPONENT
Source Details

Icon Cloud

技术图标分布在 3D 球面上缓慢旋转,随鼠标视差转动,用于技术栈展示。

#3D#Icons#Sphere
magicui
magicui.designCOMPONENT
Source Details

Interactive Grid Pattern

鼠标经过的方格被点亮并带动邻格渐变,适合做互动型 Hero 背景。

#Interactive#Grid#Pointer
magicui
magicui.designCOMPONENT
Source Details

Interactive Hover Button

悬停时圆形色块从指针处扩散铺满按钮,文字变色并滑出箭头。

#Button#Hover#Ripple
magicui
magicui.designCOMPONENT
Source Details

iPhone

用纯 CSS 绘制的 iPhone 机身,含灵动岛与侧边按键,可作为移动端界面展示框。

#Device#iPhone#Mockup
magicui
magicui.designCOMPONENT
Source Details

Kinetic Text

每个字母根据鼠标横向位置产生位移与倾斜,制造动态字体排版效果。

#Text#Kinetic#Pointer
magicui
magicui.designCOMPONENT
Source Details

Lens

圆形镜片跟随鼠标并放大其下的内容,适合细节图与地图的局部查看。

#Lens#Zoom#Pointer
magicui
magicui.designCOMPONENT
Source Details

Light Rays

从中心射出的多道光束缓慢摆动,为标题区提供舞台灯光感。

#Background#Rays#Light
magicui
magicui.designCOMPONENT
Source Details

Line Shadow Text

文字带一条长长的斜向线条阴影,悬停时阴影扫过,用于极简标题。

#Text#Shadow#Line
magicui
magicui.designCOMPONENT
Source Details

Magic Card

卡片内的径向高光与边框描边跟随鼠标移动,是最常用的交互卡片样式。

#Card#Spotlight#Pointer
magicui
magicui.designCOMPONENT
Source Details

Meteors

深色背景中多颗流星带拖尾斜向划过,用于暗色系 Hero 与营销区块。

#Meteors#Dark#Hero
magicui
magicui.designCOMPONENT
Source Details

Morphing Text

同一位置的文字在多个词之间以模糊缩放方式形变切换,替代生硬的轮播。

#Text#Morph#Loop
magicui
magicui.designCOMPONENT
Source Details

Neon Gradient Card

卡片边框是一圈流动的霓虹渐变并带外发光,适合定价与技术卖点区块。

#Card#Neon#Border
magicui
magicui.designCOMPONENT
Source Details

Noise Texture

SVG 噪点纹理叠加在内容之上,消除大色块的塑料感并提升质感层次。

#Texture#Noise#Overlay
magicui
magicui.designCOMPONENT
Source Details

Orbiting Circles

多个图标沿不同半径的轨道绕中心旋转,用于生态、集成与合作伙伴展示。

#Orbit#Icons#Rotate
magicui
magicui.designCOMPONENT
Source Details

Pixel Image

图像被切成网格方块并逐块拼合或散开,悬停时呈现马赛克效果。

#Image#Pixel#Grid
magicui
magicui.designCOMPONENT
Source Details

Pointer

一个 SVG 光标自动移动到目标位置并触发点击波纹,用于产品操作演示。

#Cursor#Demo#Motion
magicui
magicui.designCOMPONENT
Source Details

Progressive Blur

滚动容器边缘叠加强度递增的模糊遮罩,让内容自然淡出而非硬切。

#Blur#Mask#Scroll
magicui
magicui.designCOMPONENT
Source Details

Pulsating Button

按钮外圈持续扩散脉冲光环,用于强调主 CTA 与直播、录音等状态。

#Button#Pulse#CTA
magicui
magicui.designCOMPONENT
Source Details

Rainbow Button

按钮背景是持续流动的彩虹渐变,用于品牌色活跃的主行动按钮。

#Button#Rainbow#Gradient
magicui
magicui.designCOMPONENT
Source Details

Retro Grid

透视地平线加向前滚动的地面网格与渐变落日,经典合成波视觉。

#Retro#Grid#Synthwave
magicui
magicui.designCOMPONENT
Source Details

Ripple Button

点击时从指针位置扩散出同心圆涟漪,为点击行为提供明确的触觉暗示。

#Button#Ripple#Click
magicui
magicui.designCOMPONENT
Source Details

Ripple

在面板任意位置点击都会扩散多层同心水波,适合做互动型背景。

#Ripple#Click#Background
magicui
magicui.designCOMPONENT
Source Details

Safari

用纯 CSS 绘制的 Safari 窗口,含交通灯按钮、地址栏与标签页,用于网站展示。

#Browser#Safari#Mockup
magicui
magicui.designCOMPONENT
Source Details

Scroll Based Velocity

多行文字根据滚动或指针速度改变方向与快慢,替代普通的匀速跑马灯。

#Marquee#Velocity#Scroll
magicui
magicui.designCOMPONENT
Source Details

Scroll Progress

顶部或侧边的弹簧进度条实时反映容器滚动百分比。

#Progress#Scroll#Spring
magicui
magicui.designCOMPONENT
Source Details

Shimmer Button

按钮表面有一道周期性扫过的微光,用于次级但需要吸引注意的操作。

#Button#Shimmer#Highlight
magicui
magicui.designCOMPONENT
Source Details

Shiny Button

按钮带发光线框,悬停时颜色扫过填充,点击有按压反馈。

#Button#Shiny#Glow
magicui
magicui.designCOMPONENT
Source Details

Smooth Cursor

自定义光标圆点带惯性缓动跟随鼠标,悬停可交互元素时变形放大。

#Cursor#Smooth#Spring
magicui
magicui.designCOMPONENT
Source Details

Sparkles Text

文字周围持续闪烁星点,用于标题或成功状态的高光点缀。

#Text#Sparkles#Twinkle
magicui
magicui.designCOMPONENT
Source Details

Spinning Text

文字沿圆周排布并整体缓慢旋转,中间可承载图标或按钮。

#Text#Circle#Rotate
magicui
magicui.designCOMPONENT
Source Details

Striped Pattern

可调角度与宽度的斜向条纹背景,用于警示、加载与装饰性区域。

#Background#Stripes#Pattern
magicui
magicui.designCOMPONENT
Source Details

Terminal

带标题栏的等宽终端窗口,逐字打印命令与输出,可用于安装步骤演示。

#Terminal#CLI#Typewriter
magicui
magicui.designCOMPONENT
Source Details

Text 3D Flip

逐字符绕 X 轴翻转变换为下一个词,用于强调型标题的循环切换。

#Text#3D#Flip
magicui
magicui.designCOMPONENT
Source Details

Text Animate

文字按字符或词逐个入场,内置淡入、缩放、模糊与打字等多种预设。

#Text#Entrance#Presets
magicui
magicui.designCOMPONENT
Source Details

Text Reveal

文字被移动的遮罩逐字揭示并带渐变过渡,适合长句标题的入场。

#Text#Reveal#Mask
magicui
magicui.designCOMPONENT
Source Details

Tweet Card

还原社交平台推文卡片,含认证标识、正文与互动数据,可点击点赞。

#Social#Card#Tweet
magicui
magicui.designCOMPONENT
Source Details

Typing Animation

逐字输入并逐字删除的循环打字机效果,带闪烁光标与可调速度。

#Text#Typewriter#Loop
magicui
magicui.designCOMPONENT
Source Details

Video Text

文字内部填充一段动态变化的画面,用渐变与混合模式模拟视频质感。

#Text#Video#Clip
magicui
magicui.designCOMPONENT
Source Details

Warp Background

从中心向外辐射的速度线持续向前冲刺,用于高性能与速度感主题。

#Background#Warp#Speed
magicui