forever-ai-components — 600+ Zero-Dependency Animated Web Components Built for AI Agents

Source: raw/gh-star-isas1-forever-ai-components.md (GitHub stars puller; README verified 2026-07-04) Repo: github.com/isas1/forever-ai-components Author: @isas1 (single maintainer) License: MIT Language: HTML · Stars (2026-07-03): 82 · Pushed: 2026-07-01

A registry of 600+ animated web components, one self-contained .html file each, built explicitly for AI coding agents to retrieve rather than regenerate. Every component is pure CSS + Canvas 2D + SVG with zero external dependencies, no build step, and no framework — so an agent can fetch a URL and drop the markup in. Its distinctive contribution isn’t the components themselves but the machine-structured consumption layer: a compact agents.json manifest, a components.index.json facet index for filter-in-code discovery, and an embedded per-component metadata block that tells the agent when to use it, what to preserve, and what to edit.

Key Takeaways

• 600+ components, one HTML file each. Every component is “a single .html file… a URL” — self-contained inline CSS + JS, namespaced to avoid collisions, with loc (lines of code) and kb (file size) recorded in metadata.
• Genuinely zero-dependency. README: “Built with CSS, Canvas 2D, and SVG: zero external dependencies, no build step, no framework.” The schema’s deps field “is normally empty.” That’s what makes it agent-safe — no npm resolution, no CDN, no CSP surprise.
• Three retrieval surfaces make it agent-consumable (the load-bearing design):
  1. agents.json — compact entry-point manifest with registry metadata + fetch patterns.
  2. components.index.json — “flat array of all 600+ components with their discovery facets… Load once, filter in CODE.”
  3. Each .html embeds a <script type="application/json" id="forever-agent-meta"> block with useWhen, avoidWhen, agentPrompt, editableAreas, preserveElements, and knownLimitations.
• Facet-filter-then-fetch protocol. Agents filter by useCases, technique, perfTier, style, mood, and labels before pulling source — a four-step retrieval protocol: learn the filter vocabulary → load the discovery index → filter by facet → retrieve source with its embedded adaptation detail.
• “Search the registry before you generate.” The README’s explicit decision strategy is retrieve-over-generate — the opposite default of most agent UI work, and the reason the embedded agentPrompt / preserveElements fields exist (adapt a vetted component instead of hallucinating one).
• 58 themes across six families: UI Components (buttons, cards, loaders, navigation, inputs), Animation & Motion (kinetic typography, particles, generative geometry, 3D), Generative & Geometric, Design Movement Revival (Bauhaus, Art Deco, Memphis), Artist-Inspired, and Business Graphics.
• Early-stage maturity. Single maintainer, ~5 commits to main, a ROADMAP.md (“updated continuously”). MIT-licensed with NOTICE.md attributions for components inspired by public-domain artwork. The consumption architecture is more mature than the commit history suggests — but component quality is unaudited.

Why the agent-consumption design matters

Most agent UI catalogs ship a prose integration contract (an AGENTS.md telling the agent how to behave — see beautiful-html-templates). forever-ai-components instead ships a data contract: a JSON facet index the agent filters in code, plus machine-readable adaptation metadata inside each artifact. The preserveElements / editableAreas / knownLimitations fields are effectively guardrails the component author wrote for the agent — telling it which parts are load-bearing (don’t touch the animation keyframes) and which are safe to rewrite (swap the label text). This is a concrete instance of the agent-readable web pattern applied at component granularity, and a cleaner “retrieve, don’t generate” story than most component libraries offer.^[inferred — synthesis of the README’s three retrieval surfaces against the wiki’s existing agent-consumable-catalog articles]

How it compares to neighboring catalogs

	forever-ai-components	beautiful-html-templates	unslop-ui
Unit	Single animated component	Full slide-deck template	(not a catalog — a slop detector)
Count	600+	30	n/a
Agent contract	JSON facet index + embedded per-file forever-agent-meta	AGENTS.md prose operating manual	Claude skill + CI scanner
Default posture	Retrieve a vetted component	Clone + adapt a template in-system	Detect + remove AI design tells
Dependencies	Zero (CSS/Canvas/SVG)	Google Fonts per template	Python scanner
License	MIT	MIT	open (repo)

forever-ai-components and beautiful-html-templates are siblings in the agent-consumable-design-catalog family — one for components, one for decks — while unslop-ui is the quality gate that would catch a badly-adapted component after the fact. They compose: retrieve from the registry, then scan the result.

Try It

1. Fetch components.index.json from the repo, load it once, and filter in code by facet (useCases, style, perfTier) to shortlist candidates — don’t scrape the whole tree.
2. Read a component’s forever-agent-meta block before editing. Honor preserveElements (usually the animation internals) and only rewrite editableAreas (labels, colors, copy).
3. Wire it as a retrieve-first step in an agent UI workflow — before asking Claude to generate a loader/particle/hero animation from scratch, query the registry; a vetted zero-dependency component beats a hallucinated one.
4. Pair with a slop gate. Run the adapted component through unslop-ui’s scanner so a retrieved-then-edited component still passes the AI-tell checks.
5. Vet before production. It’s a 5-commit, single-maintainer repo — inspect the specific components you plan to ship, and pin to a commit rather than tracking main.

Related

• beautiful-html-templates — sibling agent-consumable design catalog (slide decks); prose AGENTS.md contract vs this repo’s JSON facet index
• unslop-ui — the anti-AI-slop detector/CI gate that composes with a retrieved-then-adapted component
• Open Design — local-first catalog of agent-consumable DESIGN.md systems; same “agent reads a structured contract” shape, broader scope
• HTML Is the Canvas — the thesis that self-contained HTML is the agent’s native output medium, which zero-dependency single-file components exemplify
• The Agent-Readable Web — the structured-for-machines pattern this registry implements at component granularity
• HTML Effectiveness (Thariq) — the single-file, inline-CSS/SVG discipline these components follow
• AI Web Design — topic index

Open Questions

• Component quality is unaudited. The consumption architecture is well-designed, but the README does not demonstrate the visual/animation quality of the 600+ components — inspect a representative sample before relying on the count.
• Longevity risk. 5 commits, one maintainer, “updated continuously” per ROADMAP.md but no track record yet. Pin to a commit for anything durable.
• Facet vocabulary completeness. How consistently the 600+ components are tagged across useCases / technique / perfTier determines whether filter-in-code discovery actually returns the right component — not verifiable without loading the index.
• How the count is distributed across the 58 themes / 6 families is not broken out; some families may be thin.