A gallery of real app UI motion — 2000+ screen recordings across 487 apps, filterable by gesture and interaction pattern
CodePen
A front-end playground — a dense hub of motion snippets and experiments
Content updated · 2026-09-07
What is it · 它是什么
What is CodePen?
CodePen is a playground for front-end code — write HTML/CSS/JS and see results instantly. Developers worldwide publish motion experiments, component demos, and creative cases there. When you wonder “how is this effect done?”, chances are someone has already done it on CodePen and shared the code.
How to use · 怎么用
How to use CodePen
- Search with effect keywords (“hover effect”, “particles”, “scroll animation”) and sort by popularity for the gems.
- Open a pen and check forks and comments to gauge quality.
- Click “fork” to remix a good effect into your own.
- Mind each pen's license — CodePen's default is permissive, but some authors add their own terms.
Key features · 核心特点
Key features of CodePen
- Instant render with zero setup
- A huge public gallery with viewable source
- Supports mainstream front-end libraries via CDN
- Collections make it easy to build an inspiration library
Related sites
Compose animations by stacking words - fade, up, slide - no keyframes, 3KB core
A long-standing source of creative web interaction tutorials with high-quality demos