Amicro Micro transitions

The Problem

Building polished React micro-interactions—entrance transitions, hover effects, card layouts—usually means hand-rolling animation code or pulling in heavy component libraries that are hard to customize. This repo is a curated collection of Motion-powered primitives that can be dropped into any React project via a CLI or the shadcn registry system.

What This Does

This is a portfolio of four self-contained projects, not a single codebase. The main deliverable is a component registry (registry/) with 163 code files and 164 JSON metadata files, plus a demo application (src/) with 153 code files. The registry follows the shadcn/ui pattern: each component is a standalone .tsx file paired with a .json manifest.

The registry covers entrance transitions (fade-in, fade-up, zoom-in), hover effects (tilt-card, magnetic-button), text animations (text-reveal), and card layout systems (arc, fan, cascade, scatter patterns). It also includes reusable hooks (use-scroll-progress, use-stagger, use-web-haptics) and spring presets (registry/lib/presets.ts).

How It Is Wired

The repo has no single execution path. The demo app (src/App.tsx, 1282 lines) is the entry point, rendering chart and animation pages. The registry is consumed externally: users install components via npx @subhanhq/amicro@latest add <component> or through shadcn's registry mapping.

Static analysis shows 321 internal modules with 299 import edges and no circular dependencies. Two modules carry notable blast radius:

src/data/loaders (Ca 2, Ce 128, instability 0.98) — imports 128 modules; almost certainly a barrel file. High churn risk.
src/components/dither-charts/lib/recharts-tooltip (Ca 17, Ce 0) — 17 modules depend on this leaf. Keep it stable.

How To Use It

Setup: npm install @subhanhq/amicro

Configuration: Add the registry mapping to components.json:

{
  "registries": {
    "@amicro": "https://raw.githubusercontent.com/Subhan-code/Amicro--Micro-transitions-/main/registry/{name}.json"
  }
}

Running it:

npx @subhanhq/amicro@latest init
npx @subhanhq/amicro@latest add download-button
npx shadcn add @amicro/fade-in

The demo app runs via npm run dev (Vite, per vite.config.ts).

Real-World Use

A marketing site needing consistent entrance animations without a design-system overhaul. Install the registry, then:

import { FadeUp } from "@/components/amicro/fade-up";

export function Hero() {
  return <FadeUp delay={0.2}>Your headline</FadeUp>;
}

Components install as local source, so you can modify them freely.

Code Health & Issues

Static analysis found 32 issues (9 high, 23 medium) across 5 kinds:

High - Deep nesting (×21) — src/App.tsx, MembersGrowthChart.tsx hit indentation depth 12. Flatten with guard clauses.
High - Duplicated code (×122 files) — 3044 repeated 6-line blocks across registry/hooks/ and registry/ui/. Extract shared helpers.
High - Oversized files (×6) — src/App.tsx (1282 lines), src/utils/codeGenerator.ts, upload.sh. Split by responsibility.
Medium - Hub module — recharts-tooltip.tsx has 17 dependents; keep it small.

SDLC gaps: no test suite (321 source files, zero tests), CI workflow lacks least-privilege token permissions, no Dependabot, no dependency vulnerability scan, and persist-credentials is not disabled on checkout. No secrets committed.

The Bottom Line

A solid, well-organized component library with genuine utility for React developers who want Motion-based micro-interactions without building from scratch. The registry pattern is proven and the component breadth is substantial. The lack of tests and the duplicated code across 122 files are real maintenance risks—the registry is the valuable part, but it needs test coverage before production adoption.

What the analyser found

Deployment readiness

5/7

Container image
CI pipeline
Lockfile committed
Test suite
README
License
No committed secrets

Composition

513 files

TSX292
JSON170
TypeScript27
Markdown9
YAML2
JavaScript2

ReactSpring

Architecture

Top-level areas of the codebase, sized by module count. Arrows show how many imports cross from one area into another.

graph TD g0["registry<br/>163 modules"] g1["src<br/>153 modules"] g2["scripts<br/>3 modules"] g1 -->|128| g0 g2 -->|1| g1

Module dependencies

The 10 most depended-upon modules of 321, from static import analysis. Red outline marks a module in an import cycle.

graph LR n0__charts_lib_recharts_tooltip["recharts-tooltip"] n1_src_hooks_useCanvasSetup["useCanvasSetup"] n2_src_hooks_useWebHaptics["useWebHaptics"] n3_src_components_IconSwap["IconSwap"] n4_ents_dither_charts_lib_utils["utils"] n5_onents_simple_comp_lib_utils["utils"] n6_src_components_InViewRender["InViewRender"] n7_src_data_buttons["buttons"] n8_src_data_loaders["loaders"] n9_ither_charts_ActivityHeatmap["ActivityHeatmap"] n9_ither_charts_ActivityHeatmap --> n1_src_hooks_useCanvasSetup

Findings

MediumNo test files detected - untested code paths repository-wide

What would stop me shipping this

Ranked by severity × confidence × production reach. Reach is the honest discriminator across a collection that is mostly other people's code: the same finding matters more in something that ships.

high1

medium4

low2

Add a test suite; this repository has nonehigh321 occurrences

321 source files, no test files

Any change ships with no signal that existing behaviour still holds, so a regression reaches production undetected.

Fix: Add one test per public entry point, then a CI step that runs them.

Declare least-privilege permissions for GITHUB_TOKENmedium

.github/workflows/ci.yml

1 workflow(s) declare no permissions

With no declaration the token inherits the repository default, so any injected step can push commits or mint releases from inside your own CI.

Fix: Add permissions: contents: read at the top of the workflow and widen per job only where needed.

Enable Dependabot or Renovatemedium

1 manifest(s), no update bot configured

Without a bot a published advisory sits unpatched until someone audits by hand, which across 1,322 repositories means never.

Fix: Commit .github/dependabot.yml covering the repo ecosystems plus github-actions.

Gate pull requests on a dependency vulnerability scanmedium

.github/workflows

no dependency scan in CI

This is the one gate that would catch a known-vulnerable package before it reaches a build, and no repository in the sample had it.

Fix: Add dependency-review-action on pull_request, or osv-scanner on push and a schedule.

Set persist-credentials: false on checkoutmedium

.github/workflows/ci.yml

checkout keeps the token, then dependencies are installed

The token stays in .git/config for every later step, so a malicious postinstall script reads a pushable credential without one ever being passed to it.

Fix: Add with: persist-credentials: false, and pass an explicit token only to the step that pushes.

Set timeout-minutes on the workflow jobslow

.github/workflows/ci.yml

1 workflow(s) declare no job timeout

A wedged step runs to the six-hour platform default, which on a two-hourly schedule means three runs overlap behind it.

Fix: Add timeout-minutes with a realistic bound to each job.

Add the repository convention files this project lackslow3 occurrences

missing .editorconfig, .gitattributes, a formatter config

Without them one contributor's editor writes tabs into a Python file, a shell script commits with CRLF and fails in the container, and a notebook diff is unreviewable.

Fix: Add .editorconfig, .gitattributes with text=auto eol=lf, and a formatter config.

Checked deterministically against the repository tree and a bounded set of its files: committed credentials, unpinned actions and base images, missing lockfiles and update bots, workflows that discard failures, published advisories against the declared dependencies, runtime configuration, licensing and notebook reproducibility. No language model is involved in this section.