UI Hub 是一个每日更新的免费 UI 资源目录，给设计师、前端开发者和做界面的 AI Agent 用：共 2,395 条资源，其中 133 个组件库、1,929 个带明暗预览的组件样式示例，另有设计 skill 与 AI 设计技巧文章。UI Hub 是一個每日更新的免費 UI 資源目錄，給設計師、前端開發者和做介面的 AI Agent 用：共 2,395 條資源，其中 133 個元件庫、1,929 個附明暗預覽的元件樣式示例，另有設計 skill 與 AI 設計技巧文章。UI Hub is a free, daily-updated directory of UI resources for designers, front-end developers and AI agents that build interfaces: 2,395 resources, including 133 component libraries and 1,929 component style demos with light/dark previews, plus design skills and AI design articles.UI Hub は、デザイナー・フロントエンド開発者・UI を作る AI エージェント向けの、毎日更新される無料の UI リソース集です。全 2,395 件（コンポーネントライブラリ 133 件、ライト/ダーク対応のスタイルデモ 1,929 件）に加え、デザインスキルと AI デザイン記事を掲載しています。UI Hub는 디자이너, 프론트엔드 개발자, 인터페이스를 만드는 AI 에이전트를 위한 매일 업데이트되는 무료 UI 리소스 디렉터리입니다. 총 2,395개 리소스(컴포넌트 라이브러리 133개, 라이트/다크 미리보기가 있는 스타일 데모 1,929개)와 디자인 스킬, AI 디자인 글을 제공합니다.UI Hub ialah direktori sumber UI percuma yang dikemas kini setiap hari untuk pereka, pembangun front-end dan ejen AI yang membina antara muka: 2,395 sumber, termasuk 133 pustaka komponen dan 1,929 demo gaya komponen dengan pratonton terang/gelap, serta kemahiran reka bentuk dan artikel reka bentuk AI.UI Hub là danh mục tài nguyên UI miễn phí, cập nhật hằng ngày, dành cho nhà thiết kế, lập trình viên front-end và AI agent dựng giao diện: 2,395 tài nguyên, gồm 133 thư viện component và 1,929 mẫu phong cách component có xem trước sáng/tối, cùng skill thiết kế và bài viết về thiết kế với AI.UI Hub est un annuaire gratuit de ressources UI, mis à jour chaque jour, pour designers, développeurs front-end et agents IA qui construisent des interfaces : 2,395 ressources, dont 133 bibliothèques de composants et 1,929 démos de styles avec aperçus clair/sombre, plus des skills de design et des articles sur le design avec l’IA.UI Hub es un directorio gratuito de recursos de UI, actualizado a diario, para diseñadores, desarrolladores front-end y agentes de IA que construyen interfaces: 2,395 recursos, incluidas 133 bibliotecas de componentes y 1,929 demos de estilos con vista clara/oscura, además de skills de diseño y artículos de diseño con IA.UI Hub ist ein kostenloses, täglich aktualisiertes Verzeichnis von UI-Ressourcen für Designer, Frontend-Entwickler und KI-Agents, die Oberflächen bauen: 2,395 Ressourcen, darunter 133 Komponentenbibliotheken und 1,929 Komponenten-Stildemos mit Hell/Dunkel-Vorschau, dazu Design-Skills und Artikel zu KI-Design.

← 返回博客返回部落格Back to blogブログへ戻る블로그로Kembali ke blogVề blogRetour au blogVolver al blogZurück zum Blog · 组件库深读元件庫深讀Component librariesコンポーネント컴포넌트Pustaka komponenThư viện componentBibliothèquesBibliotecasKomponenten · 2026-10-14 · 2 分钟阅读2 分鐘閱讀2 min read2 分で読めます2 분 읽기2 min bacaan2 phút đọc2 min de lecture2 min de lectura2 Min. Lesezeit

Aceternity UI 深读：惊艳效果，要省着用Aceternity UI 深讀：驚豔效果，要省著用Aceternity UI deep dive: spectacle, used sparinglyAceternity UI徹底解説：派手さは控えめにAceternity UI 심층 분석: 화려함은 아껴서Aceternity UI mendalam: kemewahan, guna dengan jimatAceternity UI chuyên sâu: hiệu ứng ấn tượng, dùng tiết kiệmAceternity UI en profondeur : du spectacle, avec parcimonieAceternity UI a fondo: espectáculo, con moderaciónAceternity UI im Detail: Spektakel, sparsam eingesetzt

可复制粘贴的 React + Tailwind + Motion 特效，带火了「fancy」落地页风格。哪些能撑起页面，哪些会把页面变成特效合集。可複製貼上的 React + Tailwind + Motion 特效，帶紅了「fancy」落地頁風格。哪些能撐起頁面，哪些會讓頁面變成特效合輯。Copy-paste React + Tailwind + Motion effects that made the "fancy" landing look popular. Which pieces carry a page and which turn it into a demo reel.React+Tailwind+Motionのコピペ演出。ページを支える部品と、デモリールにしてしまう部品。복사-붙여넣기 React+Tailwind+Motion 효과. 페이지를 받쳐 주는 것과 데모 릴로 만드는 것.Kesan React+Tailwind+Motion salin-tampal. Mana yang menyokong halaman, mana yang jadi demo.Hiệu ứng React+Tailwind+Motion copy-paste. Phần nào nâng trang, phần nào biến trang thành demo.Effets React+Tailwind+Motion à copier-coller : ce qui porte une page, ce qui en fait une démo.Efectos React+Tailwind+Motion para copiar: lo que sostiene una página y lo que la vuelve demo.Copy-paste-Effekte mit React+Tailwind+Motion: was eine Seite trägt, was sie zur Demo macht.

Aceternity UI deep dive: spectacle, used sparingly

正文以簡體中文顯示。

本文は英語で表示しています。

본문은 영어로 표시됩니다.

Kandungan dipaparkan dalam bahasa Inggeris.

Nội dung hiển thị bằng tiếng Anh.

Le corps de l’article est en anglais.

El cuerpo del artículo está en inglés.

Der Beitragstext ist auf Englisch.

Aceternity UI, created by Manu Arora, is a collection of copy-paste components built with React, Tailwind CSS and Motion (formerly Framer Motion). It is known for showpiece effects: spotlight and beam backgrounds, 3D cards, animated grids, parallax hero scrolls. Free components are open to copy; there is also a paid tier of templates and blocks.

Aceternity UI home page
Aceternity UI home page · Screenshot: Aceternity UI (ui.aceternity.com), captured 2026-10-14. © the original site.

What works on real pages

Aceternity component index
Aceternity component index · Screenshot: Aceternity UI (ui.aceternity.com), captured 2026-10-14. © the original site.

What to avoid

Stacking three effects in one viewport, animating body text, and 3D tilt on cards that hold data. These read as a demo reel and cost performance on low-end phones. Always respect prefers-reduced-motion, which several effects do not handle by default, so wrap them yourself.

Do and avoid grid for effect components
Do and avoid grid for effect components · Diagram: original by UI Hub, CC BY 4.0

How we use it in UI Hub

Aceternity is one of the references behind the user's "restrained fancy" house style: borrow one signature effect per page, keep typography and spacing doing the heavy lifting. Search "aceternity" in the hub to see every Aceternity component we index with a live preview.

AI 提示词AI 提示詞AI promptAIプロンプトAI 프롬프트Prompt AIPrompt cho AIPrompt IAPrompt de IAKI-Prompt

复制给 Claude、Cursor、v0 等 AI 助手，让它按本文的方法处理你的项目。尖括号里的内容换成你自己的。複製給 Claude、Cursor、v0 等 AI 助手，讓它按本文的方法處理你的專案。尖括號裡的內容換成你自己的。Paste this into Claude, Cursor, v0 or another assistant to apply this post to your own project. Replace the parts in angle brackets.Claude・Cursor・v0 などのAIアシスタントに貼り付けると、この記事の方法をあなたのプロジェクトに適用できます。山括弧の部分は自分の内容に置き換えてください。Claude, Cursor, v0 같은 AI 도우미에 붙여 넣으면 이 글의 방법을 내 프로젝트에 적용할 수 있습니다. 꺾쇠괄호 안은 내 내용으로 바꾸세요.Tampal ke Claude, Cursor, v0 atau pembantu lain untuk menggunakan kaedah artikel ini pada projek anda. Gantikan bahagian dalam kurungan sudut.Dán vào Claude, Cursor, v0 hoặc trợ lý khác để áp dụng bài này cho dự án của bạn. Thay phần trong dấu ngoặc nhọn bằng nội dung của bạn.Collez-le dans Claude, Cursor, v0 ou un autre assistant pour appliquer cet article à votre projet. Remplacez les parties entre chevrons.Pégalo en Claude, Cursor, v0 u otro asistente para aplicar este artículo a tu proyecto. Sustituye lo que está entre corchetes angulares.In Claude, Cursor, v0 oder einen anderen Assistenten einfügen, um diesen Beitrag auf dein Projekt anzuwenden. Teile in spitzen Klammern ersetzen.

你是一名资深 UI 工程师。请把文章《Aceternity UI 深读：惊艳效果，要省着用》（https://ui.incidental.site/blog/aceternity-ui-deep-dive/）的方法用到我的项目上。
核心观点：可复制粘贴的 React + Tailwind + Motion 特效，带火了「fancy」落地页风格。哪些能撑起页面，哪些会把页面变成特效合集。
步骤：
1. 读文章，把建议整理成一份具体、可检查的编号清单。
2. 用这份清单检查 <我的页面 / 组件 / 仓库>，每条标注通过或不通过，并写明文件和行号。
3. 用我现有的 token 和组件，小批量修复不通过的项。不要编造 API，以文章链接的官方文档为准。
4. 最后列出待确认的问题和你无法核实的内容。
你是一名資深 UI 工程師。請把文章《Aceternity UI 深讀：驚豔效果，要省著用》（https://ui.incidental.site/blog/aceternity-ui-deep-dive/）的方法用到我的專案上。
核心觀點：可複製貼上的 React + Tailwind + Motion 特效，帶紅了「fancy」落地頁風格。哪些能撐起頁面，哪些會讓頁面變成特效合輯。
步驟：
1. 讀文章，把建議整理成一份具體、可檢查的編號清單。
2. 用這份清單檢查 <我的頁面 / 元件 / 儲存庫>，每條標註通過或不通過，並寫明檔案和行號。
3. 用我現有的 token 和元件，小批量修復不通過的項目。不要編造 API，以文章連結的官方文件為準。
4. 最後列出待確認的問題和你無法核實的內容。
You are a senior UI engineer. Apply the article “Aceternity UI deep dive: spectacle, used sparingly” (https://ui.incidental.site/blog/aceternity-ui-deep-dive/) to my project.
Key idea: Copy-paste React + Tailwind + Motion effects that made the "fancy" landing look popular. Which pieces carry a page and which turn it into a demo reel.
Steps:
1. Read the article and turn its advice into a numbered checklist of concrete, checkable rules.
2. Audit <my page / component / repo> against that checklist; mark each rule PASS or FAIL with file and line.
3. Fix the FAIL items in small batches, using my existing tokens and components. Do not invent APIs; follow the official docs the article links to.
4. Finish with a short list of open questions and anything you could not verify.
あなたはシニアUIエンジニアです。記事「Aceternity UI徹底解説：派手さは控えめに」（https://ui.incidental.site/blog/aceternity-ui-deep-dive/）の方法を私のプロジェクトに適用してください。
要点：React+Tailwind+Motionのコピペ演出。ページを支える部品と、デモリールにしてしまう部品。
手順：
1. 記事を読み、助言を具体的で確認可能な番号付きチェックリストにする。
2. そのチェックリストで <私のページ / コンポーネント / リポジトリ> を監査し、各項目を合格／不合格で示し、ファイルと行番号を書く。
3. 不合格の項目を、既存のトークンとコンポーネントを使って少しずつ修正する。APIを捏造せず、記事がリンクする公式ドキュメントに従う。
4. 最後に未解決の質問と検証できなかった点を挙げる。
당신은 시니어 UI 엔지니어입니다. 글 “Aceternity UI 심층 분석: 화려함은 아껴서”(https://ui.incidental.site/blog/aceternity-ui-deep-dive/)의 방법을 내 프로젝트에 적용해 주세요.
핵심: 복사-붙여넣기 React+Tailwind+Motion 효과. 페이지를 받쳐 주는 것과 데모 릴로 만드는 것.
단계:
1. 글을 읽고 조언을 구체적이고 확인 가능한 번호 목록으로 정리한다.
2. 그 목록으로 <내 페이지 / 컴포넌트 / 저장소>를 점검하고, 항목마다 통과/실패와 파일·줄 번호를 적는다.
3. 실패 항목을 기존 토큰과 컴포넌트로 조금씩 고친다. API를 지어내지 말고 글에 링크된 공식 문서를 따른다.
4. 마지막으로 남은 질문과 확인하지 못한 내용을 정리한다.
Anda jurutera UI kanan. Gunakan kaedah artikel “Aceternity UI mendalam: kemewahan, guna dengan jimat” (https://ui.incidental.site/blog/aceternity-ui-deep-dive/) pada projek saya.
Idea utama: Kesan React+Tailwind+Motion salin-tampal. Mana yang menyokong halaman, mana yang jadi demo.
Langkah:
1. Baca artikel dan jadikan nasihatnya senarai semak bernombor yang konkrit dan boleh disemak.
2. Audit <halaman / komponen / repo saya> dengan senarai itu; tandakan setiap peraturan LULUS atau GAGAL dengan fail dan baris.
3. Baiki item GAGAL sedikit demi sedikit menggunakan token dan komponen sedia ada. Jangan reka API; ikut dokumen rasmi yang dipautkan artikel.
4. Akhiri dengan soalan terbuka dan perkara yang tidak dapat disahkan.
Bạn là kỹ sư UI cấp cao. Hãy áp dụng bài viết “Aceternity UI chuyên sâu: hiệu ứng ấn tượng, dùng tiết kiệm” (https://ui.incidental.site/blog/aceternity-ui-deep-dive/) cho dự án của tôi.
Ý chính: Hiệu ứng React+Tailwind+Motion copy-paste. Phần nào nâng trang, phần nào biến trang thành demo.
Các bước:
1. Đọc bài và biến lời khuyên thành danh sách kiểm tra đánh số, cụ thể, kiểm chứng được.
2. Rà soát <trang / component / repo của tôi> theo danh sách đó; ghi ĐẠT hoặc KHÔNG ĐẠT kèm tệp và dòng.
3. Sửa các mục KHÔNG ĐẠT theo từng đợt nhỏ, dùng token và component sẵn có. Không bịa API; làm theo tài liệu chính thức mà bài viết dẫn tới.
4. Kết thúc bằng các câu hỏi còn mở và những điểm chưa xác minh được.
Tu es ingénieur UI senior. Applique l’article « Aceternity UI en profondeur : du spectacle, avec parcimonie » (https://ui.incidental.site/blog/aceternity-ui-deep-dive/) à mon projet.
Idée clé : Effets React+Tailwind+Motion à copier-coller : ce qui porte une page, ce qui en fait une démo.
Étapes :
1. Lis l’article et transforme ses conseils en une liste numérotée de règles concrètes et vérifiables.
2. Audite <ma page / mon composant / mon dépôt> avec cette liste ; indique OK ou KO pour chaque règle, avec fichier et ligne.
3. Corrige les points KO par petits lots, avec mes tokens et composants existants. N’invente pas d’API ; suis la documentation officielle citée par l’article.
4. Termine par les questions ouvertes et ce que tu n’as pas pu vérifier.
Eres un ingeniero de UI sénior. Aplica el artículo “Aceternity UI a fondo: espectáculo, con moderación” (https://ui.incidental.site/blog/aceternity-ui-deep-dive/) a mi proyecto.
Idea clave: Efectos React+Tailwind+Motion para copiar: lo que sostiene una página y lo que la vuelve demo.
Pasos:
1. Lee el artículo y convierte sus consejos en una lista numerada de reglas concretas y comprobables.
2. Audita <mi página / componente / repositorio> con esa lista; marca cada regla como CUMPLE o NO CUMPLE con archivo y línea.
3. Corrige los puntos que no cumplen en lotes pequeños, usando mis tokens y componentes actuales. No inventes APIs; sigue la documentación oficial que enlaza el artículo.
4. Termina con las preguntas abiertas y lo que no pudiste verificar.
Du bist Senior-UI-Engineer. Wende den Artikel „Aceternity UI im Detail: Spektakel, sparsam eingesetzt“ (https://ui.incidental.site/blog/aceternity-ui-deep-dive/) auf mein Projekt an.
Kernidee: Copy-paste-Effekte mit React+Tailwind+Motion: was eine Seite trägt, was sie zur Demo macht.
Schritte:
1. Lies den Artikel und mach aus den Empfehlungen eine nummerierte Liste konkreter, prüfbarer Regeln.
2. Prüfe <meine Seite / Komponente / mein Repo> anhand dieser Liste; markiere jede Regel mit OK oder FEHLT, mit Datei und Zeile.
3. Behebe die fehlenden Punkte in kleinen Schritten mit meinen vorhandenen Tokens und Komponenten. Erfinde keine APIs; folge der offiziellen Doku, die der Artikel verlinkt.
4. Schließe mit offenen Fragen und dem, was du nicht prüfen konntest.

引用来源引用來源References参考文献참고 자료RujukanNguồn tham khảoRéférencesReferenciasQuellen

  1. Aceternity UI — Manu Arora
  2. Aceternity UI components — Aceternity
  3. Motion for React — Motion
  4. prefers-reduced-motion — MDN

相关文章相關文章Related posts関連記事관련 글Artikel berkaitanBài liên quanArticles liésArtículos relacionadosÄhnliche Beiträge

组件库深读元件庫深讀Component librariesコンポーネント컴포넌트Pustaka komponenThư viện componentBibliothèquesBibliotecasKomponenten2026-10-142 分钟阅读2 分鐘閱讀2 min read2 分で読めます2 분 읽기2 min bacaan2 phút đọc2 min de lecture2 min de lectura2 Min. Lesezeit

Magic UI 深读：像 shadcn 一样安装的动效组件Magic UI 深讀：像 shadcn 一樣安裝的動效元件Magic UI deep dive: animated components that install like shadcnMagic UI徹底解説：shadcnのように入るアニメ部品Magic UI 심층 분석: shadcn처럼 설치되는 애니메이션 컴포넌트Magic UI mendalam: komponen animasi dipasang seperti shadcnMagic UI chuyên sâu: component động cài như shadcnMagic UI en profondeur : des composants animés qui s'installent comme shadcnMagic UI a fondo: componentes animados que se instalan como shadcnMagic UI im Detail: animierte Komponenten, installiert wie shadcn

一套开源（MIT）的动效组件，通过 shadcn registry 分发。SaaS 页面最值得用的几个，以及如何保持无障碍。一套開源（MIT）的動效元件，透過 shadcn registry 分發。SaaS 頁面最值得用的幾個，以及如何維持無障礙。An open-source (MIT) set of motion components distributed through the shadcn registry. Best picks for SaaS pages and how to keep them accessible.shadcnレジストリで配布されるMITのモーション部品。SaaSページ向けの選び方とアクセシビリティ。shadcn 레지스트리로 배포되는 MIT 모션 컴포넌트. SaaS 페이지 추천과 접근성 유지법.Komponen gerakan sumber terbuka (MIT) melalui registry shadcn.Bộ component chuyển động MIT phân phối qua shadcn registry.Composants animés open source (MIT) distribués via le registre shadcn.Componentes animados open source (MIT) distribuidos por el registro de shadcn.Open-Source-Motion-Komponenten (MIT) über die shadcn-Registry.

Magic UIshadcnmotion
组件库深读元件庫深讀Component librariesコンポーネント컴포넌트Pustaka komponenThư viện componentBibliothèquesBibliotecasKomponenten2026-10-148 分钟阅读8 分鐘閱讀6 min read6 分で読めます6 분 읽기6 min bacaan6 phút đọc6 min de lecture6 min de lectura6 Min. Lesezeit

Cult UI 深读：有手感、有个性的组件Cult UI 深讀：有手感、有個性的元件Cult UI deep dive: tactile components with personalityCult UI徹底解説：触感と個性のある部品Cult UI 심층 분석: 촉감과 개성이 있는 컴포넌트Cult UI mendalam: komponen taktil berperibadiCult UI chuyên sâu: component có cảm giác và cá tínhCult UI en profondeur : des composants tactiles avec du caractèreCult UI a fondo: componentes táctiles con personalidadCult UI im Detail: taktile Komponenten mit Charakter

兼容 shadcn、带物理手感的组件：灵动岛、质感按钮、可展开卡片。如何借来个性而不破坏一致性。相容 shadcn、帶物理手感的元件：動態島、質感按鈕、可展開卡片。如何借來個性而不破壞一致性。shadcn-compatible components that feel physical: dynamic islands, textured buttons, expandable cards. How to borrow personality without breaking consistency.shadcn互換で物理的な触感の部品。一貫性を壊さずに個性を借りる方法。shadcn 호환, 물리적 촉감의 컴포넌트. 일관성을 해치지 않고 개성을 빌리는 법.Komponen serasi shadcn yang terasa fizikal.Component tương thích shadcn có cảm giác vật lý.Composants compatibles shadcn au toucher physique.Componentes compatibles con shadcn con tacto físico.shadcn-kompatible Komponenten mit physischem Gefühl.

Cult UIshadcncomponents
组件库深读元件庫深讀Component librariesコンポーネント컴포넌트Pustaka komponenThư viện componentBibliothèquesBibliotecasKomponenten2026-10-149 分钟阅读9 分鐘閱讀6 min read6 分で読めます6 분 읽기6 min bacaan6 phút đọc6 min de lecture6 min de lectura6 Min. Lesezeit

组件组合：为什么"无样式 + 复制粘贴"赢了元件組合：為什麼「無樣式 + 複製貼上」贏了Component composition: why headless + copy-paste wonコンポーネント合成：ヘッドレス＋コピペが勝った理由컴포넌트 합성: 헤드리스 + 복붙이 이긴 이유Komposisi komponen: mengapa headless + salin-tampal menangKết hợp component: vì sao headless + copy-paste thắngComposition de composants : pourquoi headless + copier-coller a gagnéComposición de componentes: por qué headless + copiar y pegar ganóKomponenten-Komposition: warum Headless + Copy-Paste gewonnen hat

Radix 管行为，样式归你，代码在你仓库里。复合组件让 API 更小，AI 改起来也更安全。Radix 管行為，樣式歸你，程式碼在你倉庫裡。複合元件讓 API 更小，AI 修改更安全。Radix behaviour, your styles, code you own. Compound components keep APIs small and make AI edits safer.振る舞いはRadix、スタイルは自分、コードは自分のもの。複合コンポーネントでAPIは小さく、AI編集も安全に。동작은 Radix, 스타일과 코드는 내 것. 복합 컴포넌트는 API를 작게, AI 수정을 안전하게.Tingkah laku Radix, gaya anda, kod milik anda. Komponen majmuk menjadikan suntingan AI lebih selamat.Hành vi của Radix, style của bạn, code của bạn. Component ghép giúp AI sửa an toàn hơn.Comportement Radix, vos styles, votre code. Les composants composés rendent les éditions IA plus sûres.Comportamiento de Radix, tus estilos, tu código. Los compuestos hacen más seguras las ediciones de IA.Radix-Verhalten, eigene Styles, eigener Code. Compound Components machen KI-Änderungen sicherer.

componentsarchitecture