「Aurorάqua」 a web UI template inspired by Apple LiquidGlass Design and Iceland(Ísland) Aurora, featuring a glassmorphism design and soft aurora gradients. By leveraging component-based architecture, reusability, responsive layouts, and single-page routing, you can use this solution to rapidly build custom interfaces. 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」是受 Apple LiquidGlass 設計風格和冰島極光啟發的 Web UI 模板，採用玻璃擬態設計與柔和的極光漸變效果。遵循元件化、可複用性、響應式佈局、單頁路由，助您快速建立自訂介面。基於 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等网站的链接，请自觉使用魔法以正常加载资源。
Dashboard
Social Media(imitate BlueSky(https://github.com/bluesky-social/social-app) Layout)
Navbar & Animation show:
NavBarAndAnimation.mp4
MeTube(Video Streaming Website, imitate Youtube Layout)
Markdown Viewer & Editor
Management Page
Pop-Out Menu
Mermaid Diagrams Viewer & Editor
Chat
Music Player
init page(/init):
/about:
/settings:
src/
├── components/ # 组件目录
│ ├── case2/ # Case2 专用组件
│ │ ├── BoundingBox.jsx
│ │ ├── ControlPanel.jsx
│ │ ├── ImagePreview.jsx
│ │ └── ...
│ ├── case3/ # Case3 专用组件
│ │ ├── social/ # 社交媒体子组件
│ │ │ ├── SocialHeader.jsx
│ │ │ ├── SocialSidebar.jsx
│ │ │ ├── SocialPost.jsx
│ │ │ └── SocialRightPanel.jsx
│ │ └── ...
│ ├── common/ # 通用组件
│ │ ├── ConnectionStatus.jsx
│ │ ├── ControlButton.jsx
│ │ ├── InfoItem.jsx
│ │ ├── MermaidRenderer.jsx
│ │ ├── Section.jsx
│ │ ├── SettingRow.jsx
│ │ ├── StatPill.jsx
│ │ ├── Toggle.jsx
│ │ └── UserAvatar.jsx
│ └── core/ # 核心组件
│ ├── Sidebar.jsx
│ ├── Header.jsx
│ └── Layout.jsx
├── hooks/ # 自定义 Hooks
├── pages/ # 页面组件
│ ├── Case1.jsx # Case1 主布局组件
│ ├── Case2.jsx # Case2 主布局组件
│ ├── Case3.jsx # Case3 主布局组件
│ └── case3/ # Case3 子页面
│ ├── DashboardSubpage.jsx
│ ├── ManagementSubpage.jsx
│ ├── ChatSubpage.jsx
│ ├── MarkdownSubpage.jsx
│ ├── MindmapSubpage.jsx
│ ├── VideoSubpage.jsx
│ ├── SocialSubpage.jsx
│ ├── ForumSubpage.jsx
│ └── MusicSubpage.jsx
├── App.jsx
├── routes.jsx # 路由配置
├── setupTests.js # 测试配置
└── index.css # 全局样式
- 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.
- 靈動導航條：帶有流暢動畫效果，用以顯示/隱藏側邊欄。
- 極光漸變背景：採用細膩、柔和的粉紫調漸變，營造充滿現代感與溫馨氛圍的視覺基調。
- 景深毛玻璃質感：玻璃材質的懸浮卡片設計，自帶優雅的邊框高光與背景模糊，提供絕佳的空間層次感。
- 精緻的控制組件：精心調校的側邊欄、狀態標籤、分組設定區塊、滑動條及平滑的切換開關。
- 極簡圖表與串流友善：中心區域採用大面積留白設計，完美適配視訊串流、畫布、核心資料視覺化等高動態內容的展示。