Top AI Repos — open-source AI, indexed and scored
Top AI Repos tracks AI repositories on GitHub and answers two different questions about each one: is it moving right now, and would you bet a product on it.
Top AI Repos tracks AI repositories on GitHub and answers two different questions about each one: is it moving right now, and would you bet a product on it.
Open-source gallery of AI-generated UI experiments built with Claude (Fable 5), landing pages, hero sections, GLSL shaders, design systems, animations & 3D in React, Tailwind & Three.js.
| Date | Stars |
|---|---|
| 2026-07-24 | 408 |
| 2026-07-25 | 413 |
| 2026-07-28 | 422 |
| 2026-07-30 | 422 |
| 2026-08-06 | 422 |
Today
— stars today
This week
— stars this week
This month
— stars this month
Momentum
0.0
growth rate 0.00%/day
# claude-directory — AI-generated UI experiments built with Claude
**An open-source gallery of web UI experiments generated with [Claude](https://claude.com/) (Fable 5)** — landing pages, hero sections, GLSL shaders, design systems, animations, portfolios, and 3D/WebGL scenes. Every project is self-contained, ships its prompt, and includes a recorded demo. Browse the live directory at **[pulkitxm.com/claude-directory](https://pulkitxm.com/claude-directory)**.
Built mostly with **React, TypeScript, Vite, Tailwind CSS, Three.js, Framer Motion, and GSAP** (plus plenty of framework-free HTML/CSS/JS) — a reference collection of copy-pasteable, AI-generated front-end components and templates for anyone exploring what Claude can build on the web.
**Categories:** [Hero sections](./hero-sections/) · [Landing pages](./landing-pages/) · [Shaders](./shaders/) · [UI design systems](./ui-design/) · [Components & UI](./components-ui/) · [Portfolios](./portfolios/) · [Animations & loaders](./animations-loaders/) · [3D & games](./3d-games/) · [Templates](./templates/)
Each project folder includes the originating prompt as `prompt.md`, preserved alongside the generated code. Some prompts were inspired by or adapted from public prompt/design references, including [cnemri's gist](https://gist.github.com/cnemri/c917e11b3a6936823b509dcff53392aa), [motionsites.ai](https://motionsites.ai/), [lafys.com](https://lafys.com/), [designprompts.dev](https://www.designprompts.dev/), [21st.dev](https://21st.dev), [superdesign.dev](https://superdesign.dev/), and [landinghero.ai](https://landinghero.ai/).
> **Heads up:** every project here was generated with Claude Fable 5 — this whole repo is vibe coded. Use it with care: review the code, check dependencies, verify accessibility/responsiveness, and run the local project checks before shipping anything to production.
## Contributing
Got a cool experiment? Toss it in. No issues, no templates, no ceremony — just shoot a PR.
Only two things are non-negotiable:
- **`prompt.md`** — the prompt you used to generate the project, dropped in the project folder.
- **`demo.mp4`** — a short screen recording of the thing actually working.
Beyond that, do whatever: any stack, any vibe, as long as your project lives in its own self-contained folder. Bonus points if you add a row to the table below, but no stress if you forget.
Once your `demo.mp4` is in, generate its poster so the directory can show a sharp placeholder while the video loads (`node scripts/generate-posters/generate-posters.mjs`). This writes a `poster.jpg` next to the video and updates the root [`posters.json`](./posters.json) manifest — see [`scripts/generate-posters`](./scripts/generate-posters/).
All PRs get reviewed and merged by Claude Opus, so don't be shy — if the prompt and demo are there, you're golden. 🤙
Projects are grouped by what they are. Each lives in its category folder (e.g. `./hero-sections/<project>/`).
<details>
<summary><b>Hero sections (41)</b></summary>
| Project | Description | Stack |
|---------|-------------|-------|
| [aethera-cinematic-hero](./hero-sections/aethera-cinematic-hero/) | Cinematic hero for Aethera with video-driven visual treatment and headless verification | React, TypeScript, Vite, Tailwind CSS |
| [ai-builder-dark-hero](./hero-sections/ai-builder-dark-hero/) | Dark-mode hero section for an AI website builder with animated reveals and HLS video streaming | React, TypeScript, Vite, Tailwind CSS, Motion, hls.js, Lucide |
| [altitude-index-h38](./hero-sections/altitude-index-h38/) | Editorial expedition-outfitter bento hero ("Warm Cartography") on warm paper with an ember accent, parallax photo tiles, fullscreen menu, and a scrolling coordinate ticker | HTML, CSS, JavaScript, Space Grotesk |
| [animated-text-rotate-hero](./hero-sections/animated-text-rotate-hero/) | shadcn/ui animated hero integration with spring word-rotation, hosted in a midnight-teal "Spektr" trade-desk shell with a live ticker | React, Excerpt of 406,012 characters
Read on GitHubWould you bet a product on this? Bounded 0–100 and slow moving.
matched fp:94b0e72c885886a4, topic:vibe-coding