「Aurorαqua」is a React component library and WebUI template. This name combined with Aurora&Aqua. It draws inspiration from elements of the "Liquid Glass" aesthetic—such as edge highlights and floating components—while establishing a base material style tailored to my own preferences; the overall look could best be described as "Iced Jelly" 🤓. It creates a sense of layered depth through heavy shadow blurring and fluid light effects, aiming to evoke the delicious, textured feel of jelly with icy inclusions 😋.
Built with modularity, reusability, responsive layouts, and single-page routing in mind, it helps you rapidly create custom interfaces.
Inspired by Apple LiquidGlass Design and Iceland(Ísland) Aurora, Built with React & Tailwind. Mozilla Public License 2.0, friendly for commercial use.
For Windows Users, please Install the Monaco and PingFang-SC fonts to attain the suspected experience.
Tauri app versions for macOS and Windows are provided in the release.
However, it is recommended to run npm install and npm run dev in the terminal and access the application via a browser (tested in Firefox).
「Aurorαqua」是一套React組件庫和WebUI模板，命名是極光Aurora和水Aqua的結合，參考了液態玻璃中我喜歡的部分（如邊角高光和浮動組件）並按自己的偏好確定了基本材質，整體風格應該叫...冰態果凍Iced Jelly🤓透過重陰影模糊和流動光效營造多層堆疊的空間感，總之就是模仿結了冰絮的果凍的那種美味的感覺😋遵循元件化、可複用性、響應式佈局、單頁路由，助您快速建立自訂介面。
受 Apple LiquidGlass 設計風格和冰島極光啟發，基於 React 和 Tailwind 構建。採用 Mozilla Public License 2.0 協議，支援商業用途。
對於Windows用戶，由於字體並非系統預先安裝，建議安裝Monaco字體和PingFang SC字體以獲得預期體驗。
Release中提供了MacOS和Windows版本的Tauri App。
但更建議在終端機中執行npm install和npm run dev以使用瀏覽器訪問（測試環境：FireFox）
🔴对于简体中文用户，demo中图片视频素材使用了来自YouTube和BlaueSky等网站的链接，请自觉使用魔法以正常加载资源。
Messenger(imitate Discord)
MeTube(Video Streaming Website, imitate Youtube Layout)
Social Media(imitate BlueSky(https://github.com/bluesky-social/social-app) Layout)
Music
Dashboard
Video Show:
HD Review: https://youtu.be/k3Fi8uyB6ac?si=ASVeU-Se3HxmbOn7
高清演示影片：https://www.bilibili.com/video/BV1Xt3B6oE2m/
VideoShow1.mp4
VideoShow2.mp4
VideoShow3.mp4
Markdown Viewer & Editor
Pop-Out Menu
Mermaid Diagrams Viewer & Editor
Lucide Exposé
Cyber Badge Inspect
PRTS(Arknights Info Page)
MacOS Simulation
Management Page
src/
├── components/ # 组件目录
│ ├── case3/ # Case3（多场景Demo）专用组件
│ │ ├── Case3Sidebar.jsx # Case3主侧边栏，导航到各子页面
│ │ ├── NavBar.jsx # Case3导航条（控制侧边栏展开/收起）
│ │ ├── LiveChat.jsx # 直播聊天组件，实时消息流展示
│ │ ├── SocialHeader.jsx # 社交页面顶部标签导航栏
│ │ ├── SocialPost.jsx # 社交帖子卡片，支持点赞、评论、分享
│ │ ├── SocialProfilePage.jsx # 用户个人资料页面
│ │ ├── SocialRightPanel.jsx # 社交页面右侧面板，显示动态源和热门话题
│ │ ├── SocialSettingsPage.jsx# 社交设置页面
│ │ ├── SocialSidebar.jsx # 社交页面左侧导航菜单
│ │ ├── ChatSidebar.jsx # 聊天频道列表，支持文字/语音频道分类
│ │ ├── ChatMembersPanel.jsx # 聊天成员面板，按角色分组展示
│ │ ├── SearchInput.jsx # 通用搜索输入框，支持多尺寸
│ │ ├── SidebarNavItem.jsx # 侧边栏导航项，带激活态发光效果
│ │ ├── MacOSAppIcon.jsx # macOS 应用图标，支持运行指示
│ │ ├── MacOSDock.jsx # macOS Dock 栏，可拖拽重排、放大交互
│ │ ├── MacOSMenuBar.jsx # macOS 顶部菜单栏，含控制中心
│ │ ├── MacOSWindow.jsx # macOS 风格窗口，可拖动、聚焦、关闭
│ │ ├── NotificationCenter.jsx# 通知中心，展示应用通知列表
│ │ └── subpages/ # Case3子页面
│ │ ├── ChatSubpage.jsx # 即时通讯界面
│ │ ├── DashboardSubpage.jsx # 数据仪表盘
│ │ ├── ForumSubpage.jsx # 论坛界面
│ │ ├── ManagementSubpage.jsx # 数据管理面板
│ │ ├── MarkdownSubpage.jsx # Markdown 编辑器
│ │ ├── MindmapSubpage.jsx # 思维导图
│ │ ├── MusicSubpage.jsx # 音乐播放器
│ │ ├── SocialSubpage.jsx # 社交媒体主页面
│ │ ├── VideoSubpage.jsx # 视频播放器页面
│ │ ├── PrtsSubpage.jsx # 明日方舟干员展示页
│ │ ├── PrtsOperatorGrid.jsx # 干员网格卡片，含稀有度与状态
│ │ ├── ClaimRewardAnimation.jsx# 领取奖励撒花动画
│ │ ├── MacOSSubpage.jsx # macOS 桌面环境模拟
│ │ ├── LucideExposeSubpage.jsx # Lucide 图标浏览/复制页
│ │ ├── LucideIconCard.jsx # 单个 Lucide 图标卡片
│ │ ├── ConfettiBoothSubpage.jsx# 五彩纸屑效果预览台
│ │ ├── ConfettiCard.jsx # 纸屑效果预览卡片
│ │ └── badge/ # 吧唧工坊子模块
│ │ ├── BadgeSubpage.jsx # 吧唧工坊主页面
│ │ ├── BadgeUploader.jsx # 图片上传组件，支持拖拽
│ │ ├── BadgeShapeSelector.jsx # 吧唧形状选择器
│ │ ├── BadgeMaterialSelector.jsx# 吧唧材质选择器
│ │ ├── BadgeEffectControls.jsx # 吧唧特效控制面板
│ │ ├── BadgePreview.jsx # 吧唧 3D 预览，可拖动旋转
│ │ └── BadgeExport.jsx # 吧唧导出/复制样式
│ ├── case2/ # Case2专有组件
│ │ ├── Case2Sidebar.jsx # Case2侧边栏，模型选择与参数配置
│ │ ├── ControlPanel.jsx # 图像处理控制面板，调节各项参数
│ │ ├── ImageCanvas.jsx # 图像画布，展示与渲染处理结果
│ │ ├── MetricsChart.jsx # 性能指标图表，展示模型运行数据
│ │ └── ModelStatusCard.jsx # 模型状态卡片，显示加载进度和运行状态
│ ├── case1/ # Case1专有组件
│ │ ├── Case1Sidebar.jsx # Case1侧边栏，包含连接设置、显示设置、流信息等面板
│ │ └── NavBar.jsx # Case1侧边栏展开/收起导航条
│ ├── data/ # 数据展示组件
│ │ ├── ChartLine.jsx # 折线图表组件
│ │ ├── InfoItem.jsx # 信息项展示，标签-值形式
│ │ ├── StatCard.jsx # 统计卡片，展示关键指标
│ │ ├── StatPill.jsx # 统计药丸，小型数值展示
│ │ └── TableRow.jsx # 表格行组件
│ ├── form/ # 表单组件
│ │ ├── ControlButton.jsx # 控制按钮，带有状态切换
│ │ ├── SettingRow.jsx # 设置行，标签-控件布局
│ │ └── Toggle.jsx # 开关切换组件
│ ├── layout/ # 通用布局组件
│ │ ├── Toast.jsx # 消息提示组件，支持不同类型
│ │ └── VideoPlayer.jsx # 视频播放器组件，支持缩放、旋转、FPS叠加
│ ├── ui/ # 通用 UI 组件
│ │ ├── ConnectionStatus.jsx # 连接状态指示器
│ │ ├── GlassButton.jsx # 玻璃态按钮，支持发光效果
│ │ ├── GlassCard.jsx # 玻璃态卡片容器
│ │ ├── MermaidRenderer.jsx # Mermaid 图表渲染器
│ │ ├── Modal.jsx # 模态框组件
│ │ ├── Section.jsx # 分区容器，带标题和图标
│ │ ├── Slider.jsx # 滑块组件，玻璃态样式
│ │ ├── Switch.jsx # 开关组件，玻璃态样式
│ │ ├── TabButton.jsx # 标签按钮，支持激活状态
│ │ ├── TodoItem.jsx # 待办事项项
│ │ ├── UserAvatar.jsx # 用户头像组件
│ │ ├── AnimatedNumber.jsx # 数字滚动动画组件
│ │ ├── MarkdownLine.jsx # Markdown 单行渲染，带逐行入场动画
│ │ ├── Parallax.jsx # 视差滚动 Hook 与背景组件
│ │ ├── ParticleEffect.jsx # 粒子爆裂特效，基于 Portal 渲染
│ │ ├── PillTabBar.jsx # 胶囊式标签栏，带滑动指示器
│ │ ├── PillTabNude.jsx # 极简胶囊标签栏（无背景）
│ │ ├── RippleButton.jsx # 涟漪效果按钮
│ │ ├── Skeleton.jsx # 骨架屏组件，带 shimmer 动画
│ │ ├── TiltCard.jsx # 3D 倾斜卡片，跟随鼠标透视
│ │ ├── ToastContainer.jsx # 全局 Toast 容器，配合 AnimatePresence
│ │ └── animations.jsx # 通用动画变体与组件集合
│ └── DynamicStyles.jsx # 动态样式管理
├── pages/ # 页面入口组件
│ ├── Init.jsx # 初始化页面，项目介绍与导航入口
│ ├── Case3.jsx # Case3：多场景Demo
│ ├── Case2.jsx # Case2
│ ├── Case1.jsx # Case1
│ ├── Settings.jsx # 设置页
│ └── About.jsx # 关于页
├── context/ # React Context
│ └── BackgroundContext.jsx # 背景样式上下文，管理主题切换
├── hooks/ # 自定义 Hooks
│ └── useContrastColor.js # 对比度颜色计算 Hook
├── data/ # 静态数据
│ ├── case3/ # Case3各子页面的模拟数据
│ │ ├── chat.js # 聊天数据
│ │ ├── confetti.js # 五彩纸屑预设方案
│ │ ├── dashboard.js # 仪表盘数据
│ │ ├── forum.js # 论坛数据
│ │ ├── management.js # 管理面板数据
│ │ ├── music.js # 音乐播放器数据
│ │ ├── social.js # 社交帖子数据
│ │ └── video.js # 视频页面数据
│ └── lucideCategories.js # Lucide 图标分类数据
├── config/ # 配置
│ └── backgroundSchemes.js # 背景配色方案配置
├── __mocks__/ # Mock 文件
│ └── mermaid.js # Mermaid 模块 Mock
├── __tests__/ # 单元测试
│ └── common-components.test.jsx # 通用组件测试
├── App.jsx # 根组件
├── routes.jsx # 路由配置
├── index.css # 全局样式，玻璃态效果定义
├── main.jsx # 入口文件
└── setupTests.js # 测试配置
- Dynamic Navbar: Graceful animated Navbar that can show/hide Sidebar.
- Aurora Background: Employs a subtle, soft pink-to-purple gradient, crafting a modern yet cozy visual tone.
- Glassmorphic Layout: Features floating glass-textured cards accompanied by elegant border highlights and backdrop blur effects, delivering a premium sense of depth and layer.
- Refined Control Components: Carefully calibrated UI elements, including sidebars, status badges, grouped setting blocks, sliders, and smooth toggle switches.
- Minimalist & Stream-Friendly: Utilizes a spacious, minimalist center layout—perfectly tailored for high-dynamic content such as video streams, canvases, and core data visualizations.
- 靈動導航條：帶有流暢動畫效果，用以顯示/隱藏側邊欄。
- 極光漸變背景：採用細膩、柔和的粉紫調漸變，營造充滿現代感與溫馨氛圍的視覺基調。
- 景深毛玻璃質感：玻璃材質的懸浮卡片設計，自帶優雅的邊框高光與背景模糊，提供絕佳的空間層次感。
- 精緻的控制組件：精心調校的側邊欄、狀態標籤、分組設定區塊、滑動條及平滑的切換開關。
- 極簡圖表與串流友善：中心區域採用大面積留白設計，完美適配視訊串流、畫布、核心資料視覺化等高動態內容的展示。