- 月访问
- 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。来源
同分类研究对象
软件开发 / 启动模板与组件
这些产品属于同一目录分类。选型时请进一步核对客户任务、功能与部署要求。