Getting Started

Installation

soonish installs with the shadcn CLI. It copies the source into your project, so there's no package to update and you can edit anything.

Requirements

React 18 or later
A shadcn project one with a components.json
TypeScript 5 or later (optional but recommended)

No components.json yet? Run npx shadcn@latest init first.

Install

Add everything — all 91 loaders:

Add a single loader

Each loader is also available on its own, as a named component. The first one you add brings the core files with it; later ones skip files you already have.

import { ThinkingLoader } from '@/components/soonish/loaders/thinking';

<ThinkingLoader color="oklch(0.817 0.119 106.075)" />

Find the one you want on the home page. Hover a loader to copy its command.

What gets added

components/soonish/├── index.ts            # exports Loader, getMatrix5Layout, types├── Loader.tsx├── types.ts · layout.ts├── data/loaders.ts     # every loader's timing├── engine/             # data for the field-based loaders├── styles/             # base.css + fields.generated.css└── loaders/            # one file per loader you add

Note:The styles are plain CSS that Loader.tsximports itself. There's no Tailwind config to change and no stylesheet to add. In a src/ project, the files go in src/components/soonish.

Check that it works

Drop this into any page:

app/page.tsx

import { Loader } from '@/components/soonish';

export default function Page() {
  return <Loader name="sweep" />;
}

You should see the sweep animation. If the import fails, check your components alias — see Quick Start.