- 每月造訪次數
- 14.6K
- 下降14.9%較上月2026 年 10 月
- 公開營收
- 未公開
- 暫無公開營收證據
- 入門價
- $120/月
- 高於同類 70% 的產品同類中位數 $55/月
- 首次發布
- 16 個月前
- 2025-08-06 · 估算
訪問
行銷動作
發布、搜尋與內容、引薦、促銷在 Show HN 發布（1 分）發布
Ogblocks – Copy-Paste Animated UI Library for Modern Web Apps — Hey there, My name is Karan and I've curated a collection of 75+ animated components for React. I hope you'll like it Best Karan
7 月 17 日 · 4 個月前發布頁
在 Show HN 發布（3 分 · 1 評論）發布
OgBlocks – Copy Paste Animations for React Developers — Hey, I'm Karan I'm a student who got tired of manually wrestling with complex animations in React, so I put together a collection of about…
4 月 27 日 · 7 個月前發布頁
在 Show HN 發布（1 分）發布
OgBlocks – A zero-install animated UI component library — Hey HN, I'm Karan. As a frontend dev, I got tired of constantly rewriting animation boilerplate just to get the easing and interactions fe…
3 月 6 日 · 8 個月前發布頁
在 Show HN 發布（2 分）發布
I built an Animated UI Library with drag and drop components — Hello Everyone, My name is Karan, and I'm a Frontend Developer, but I feel like I'm more of a Design Engineer because of my love for creat…
2025 年 12 月 18 日 · 11 個月前發布頁
第三方評測與案例拆解
客戶來源管道拆解、工程師評測與開源檔案Show HN
2025-11-11查看原文
- 創作者原帖摘錄：
- Hey HN, I'm Karan, a frontend developer who loves creating UIs, but I've found that many people don't like CSS, but they want their website to look beautiful and polished, and what better way to enhance a website than with animations Animations using plain CSS are tricky, and that's why I leaned towards Motion a powerful animation library for React, and I bu
Show HN
2025-11-20查看原文
- 創作者原帖摘錄：
- Hey all! I created ogBlocks because, honestly, dealing with complex CSS and figuring out animation libraries was always a massive headache and most of them didn't even allow customization The goal was to enable everyone—not just animation experts drop in beautiful, interactive UI elements and animations into their React projects without worrying about the me
Show HN
2025-11-24查看原文
- 創作者原帖摘錄：
- Hey HN, I'm Karan, and I'm a frontend developer I built ogblocks.dev because many developers I know want their sites to feel polished but don’t enjoy writing CSS animations. Hand-coding animations is harder than it looks, and most existing libraries are either static, pricey, or not very customizable. ogBlocks provides copy-paste animated UI components built
Show HN
2025-11-27查看原文
- 創作者原帖摘錄：
- Hey HN, I’m Karan, a frontend dev obsessed with UI. I've noticed that many developers dislike writing CSS and building pixel-perfect UIs, yet they still want premium animations and a great user experience. So I spent six months building ogBlocks — a plug-and-play animated UI library for React with navbars, modals, buttons, text animations, carousels, and mor
Show HN
2025-11-28查看原文
- 創作者原帖摘錄：
- Hey HN, My name is Karan, and I'm a frontend developer from India When I started my development journey, I fell for frontend development and stuck with it ever since But I noticed that many of my friends hated writing CSS because creating UIs is a very tedious and time-consuming process. But at the same time, they also wanted their project to look premium wi
Show HN
2025-11-30查看原文
- 創作者原帖摘錄：
- Hello Everyone, My name is Karan, and I'm a Frontend Developer, but I feel like I'm more of a Design Engineer because of my love for creating UIs When I started my development journey, I fell for frontend development and stuck with it ever since But I noticed that many of my friends hated writing CSS because creating UIs is a very tedious and time-consuming
Show HN
2025-12-04查看原文
- 創作者原帖摘錄：
- Hello Everyone, My name is Karan, and I'm a Frontend Developer, but I feel like I'm more of a Design Engineer because of my love for creating UIs When I started my development journey, I fell for frontend development and stuck with it ever since But I noticed that many of my friends hated writing CSS because creating UIs is a very tedious and time-consuming
Show HN
2025-12-06查看原文
- 創作者原帖摘錄：
- Hello everyone, I’m Karan — officially a Frontend Developer, but honestly, I relate more to being a Design Engineer because crafting beautiful interfaces is what I love most. When I began my coding journey, frontend instantly hooked me. I stuck with it because it felt like the perfect blend of logic and creativity. However, over time, I noticed something int
Show HN
2025-12-07查看原文
- 創作者原帖摘錄：
- Hello Everyone, I’m Karan — officially a Frontend Developer, but honestly, I think of myself more as a Design Engineer because I’m obsessed with building beautiful UIs. When I began my dev journey, frontend instantly became my home. The creativity, the visuals, the small details — it hooked me for life. But over time, I noticed something interesting: A lot o
Show HN
2025-12-11查看原文
- 創作者原帖摘錄：
- Hey HN! I’m Karan — a frontend dev who loves crafting UI. I noticed many developers hate writing CSS, even though they still want premium designs and smooth animations. So I built ogBlocks — an Animated UI Library for React with ready-made, premium components like navbars, modals, text animations, carousels, and more. I hope you'll like it Best Karan
Show HN
2025-12-15查看原文
- 創作者原帖摘錄：
- Hey HN, My name is Karan, and I'm a Design Engineer I was always fascinated by how someone can create slick, responsive UIs that create a lasting impression and eveyrone wants such UIs but many struggle with CSS and let alone animations That's why I built ogBlocks - a UI library that lets you create Beautiful UIs, regardless of your CSS Skills Tell me what y
Show HN
2025-12-18查看原文
- 創作者原帖摘錄：
- Hello Everyone, My name is Karan, and I'm a Frontend Developer, but I feel like I'm more of a Design Engineer because of my love for creating UIs When I started my development journey, I fell for frontend development and have been stuck with it ever since But I noticed that many of my friends hated writing CSS because creating UIs is a very tedious and time-
Show HN
2026-03-06查看原文
- 創作者原帖摘錄：
- Hey HN, I'm Karan. As a frontend dev, I got tired of constantly rewriting animation boilerplate just to get the easing and interactions feeling right. I built ogBlocks to scratch my own itch. It’s a copy-paste library of interactive UI components. I used Framer Motion for the complex stuff—focusing heavily on tweaking springs and inertia so the physics actua
Show HN
2026-04-27查看原文
- 創作者原帖摘錄：
- Hey, I'm Karan I'm a student who got tired of manually wrestling with complex animations in React, so I put together a collection of about 70 animated components built with Tailwind and Framer Motion. The coolest part (at least to me) is that I finally got a custom registry working. You don't have to copy-paste giant blocks of code or deal with weird depende
開源倉庫與自部署
GitHub 開源與智慧體接入
流量來源
2026 年 10 月
訪問構成
管道
- 直接訪問41%
- 自然搜尋33%
- 外部引薦10%
- 社交媒體6%
- 其他10%
國家/地區
- 美國28%
- 巴西16%
- 越南13%
- 印度11%
- 巴基斯坦7%
搜尋
站點權重 —網域名稱註冊 2025-07-26
| 關鍵字 | 月搜尋量 |
|---|---|
| shadcn alternatives | 1,740 |
| ogblocks | 220 |
| bibi ide | 150 |
| shadcn alternative tailwind | 100 |
| shadcn vs | 90 |
流量資料：Vaneform
定價
頁面與變化
開始記錄於 2025-08-06
關鍵頁面
每週快照ogblocks.dev/ 快照 2026-11-04
變化
開始記錄以來，定價、方案與定位都沒有變化。
設計
首屏畫面視覺分析與 :root CSS
深黑背景搭配柔白幾何無襯線大標題與灰色說明，淺米色主按鈕形成克制的明暗焦點。
首屏畫面預覽 · 點擊放大
首屏畫面講了什麼與轉化路徑
“Make Your Interface Interactive”
頂部居中膠囊導航，下方大幅留白後居中排列標題、說明文字與雙按鈕。
首屏畫面轉化路徑：居中標題加按鈕 + 純排版與圖形幾何 → 免費開始 / 立即註冊
- 直接行動指令
色板 · 點擊複製
五維設計評分7.5 / 10
- 字體與排版
- 8.0
- 色彩與對比
- 8.0
- 構圖與留白
- 8.0
- 細節與工藝
- 7.0
- 風格辨識度
- 6.0
結構
- 字體
- Plus Jakarta Sans
- 首屏畫面版式
- 居中標題加按鈕
- 主視覺
- 純排版與圖形幾何
- 轉化動作
- 免費開始 / 立即註冊
- 信任背書
- 無顯式背書
- 導航
- 懸浮膠囊導航
- 明暗與密度
- 深色 · 留白多
- 圓角與層級
- 大圓角 · 細線分層
預覽 AI 設計說明全文（含 :root CSS 變量與版式規則）只寫風格參數，禁止復刻該產品的品牌名、標誌、文案與圖片
# 設計說明：暗色開發者（兼備極簡單色）
深色背景、等寬字體與程式碼片段，首屏畫面常放終端機或命令列示例。
## 設計參數
```css
:root {
--background: #101014;
--surface: #19191b;
--foreground: #f4f2f4;
--muted-foreground: #99969e;
--accent: #e9dcc5;
--radius: 16px;
--font-heading: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
--font-body: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
}
```
色彩面積配比：背景 #101014（約 86%） · 面板 #19191B（約 3%） · 正文 #F4F2F4（約 5%） · 次要文字 #99969E（約 4%） · 強調 #E9DCC5（約 2%）。背景與面板占絕大部分面積，強調色只用於主按鈕與當前激活狀態。
## 版式與轉化結構
- 首屏畫面版式：居中標題加按鈕
- 導航結構：懸浮膠囊導航
- 明暗與密度：深色 · 留白多
- 圓角與層級：大圓角；不用陰影，用細線與留白區分層級
- 主視覺載體：純排版與圖形幾何
- 轉化動作：免費開始 / 立即註冊
- 標題切入點：直接行動指令
- 空間布局拆解：頂部居中膠囊導航，下方大幅留白後居中排列標題、說明文字與雙按鈕。
- 視覺特徵總結：深黑背景搭配柔白幾何無襯線大標題與灰色說明，淺米色主按鈕形成克制的明暗焦點。
## 避免
- 照片
- 柔和粉彩
- 大圓角
請按上面的設計參數與版式實現介面：顏色只用這些變量，強調色只給主要操作與當前狀態。只採用這種風格，禁止復刻任何參考產品的品牌名、標誌、文案與圖片。
問題與證據
- ogBlocks 的價格是多少？
- Lifetime: $120/一次. 觀察於 2026-11-03。 當前計費條件、用量限制與稅費以來源頁面為准。來源
- ogBlocks 的網站造訪次數是多少？
- Vaneform 估算 2026-10 網站造訪次數為 14.6K。造訪次數包含重複訪問，付費客戶數與收入需分別查看對應證據。來源
- ogBlocks 是什麼產品，支援哪些平台？
- ogBlocks 歸屬「啓動範本與元件」市場領域：提供可複製或通過 shadcn CLI 安裝的動畫 React UI 元件，供開發者用於介面構建。。 支援平台包括：僅網頁。
- ogBlocks 是開源專案嗎？採用什麼協議？
- ogBlocks 擁有公開程式碼倉庫（https://github.com/pmndrs/react-use-measure），採用 MIT 協議，記錄有 82 個 GitHub Stars。來源
同分類研究對象
軟體開發 / 啓動範本與元件
這些產品屬於同一目錄分類。選型時請進一步核對客戶任務、功能與部署要求。
| 產品 | 入門價 | 每月造訪次數 | 營收佐證 |
|---|---|---|---|
| 21st成熟標桿為設計工程師和開發者提供可瀏覽、複製並安裝到專案中的 React 與 Tailwind CSS 元件、範本、主題和設計工具。 | $7.5/月 | 2.4M | 未公開 |
| Next.js成熟標桿面向 Web 開發社群、用於構建高品質 Web 應用的全棧 React 框架。 | — | 1.3M | 未公開 |
| Tailwind CSS成熟標桿實用優先的 CSS 框架，幫助開發者直接在標記中組合類來快速構建現代網站。 | — | 1.2M | 未公開 |
| React Bits成熟標桿為開發者提供可客製化的動畫 React 元件、介面區塊、範本和瀏覽器工具。 | $99/月 | 1.1M | $692.92 |
| Element Plus成熟標桿面向設計師和開發者的 Vue 3 元件庫，提供元件、設計指南和設計資源。 | — | 749.1K | 未公開 |
| Angular成熟標桿幫助開發者構建現代、可擴展 Web 應用的框架。 | — | 735.1K | 未公開 |