ONONC

Getting started

Introduction

ONONC is an original, motion-first React component library for Next.js. 308 components across 4 categories, covering animated backgrounds, text effects, interactive primitives, and ready-made section blocks. Everything is built from scratch with dark-first design tokens and screen-reader friendly interactions.

What is ONONC?

Every component is written from scratch. No third-party UI kit is wrapped or re-exported. The focus is on motion that feels intentional: ambient canvases that pause when off-screen, typographic reveals that stay semantic, and interactive primitives with full keyboard support. Each component ships its real source so you can read it, tweak it, and paste it straight into your own project.

Categories

The library is organized into 4 categories. Each one has its own page with live previews and copy-paste source.

Backgrounds62 components · 6 sub-categories
Ambient, animated canvases to sit behind your content. GPU-friendly and they pause when off-screen.
Text Animations58 components · 5 sub-categories
Typographic effects that draw the eye — reveals, gradients, decoding, and counters. All stay screen-reader friendly.
Components70 components · 9 sub-categories
Interactive building blocks — cards, buttons, disclosure, tabs, toasts and more. Keyboard and reduced-motion aware.
Section Blocks118 components · 7 sub-categories
Composed, drop-in page sections built from the primitives above — from navbar to footer.

Using this site

  1. Browse a category from the sidebar to see every component it contains, grouped by sub-category.
  2. Preview each component live in its frame, then switch to the Code tab to read the source and copy it.
  3. Customize interactively on a component's detail page. Tweak props live, resize the viewport, and inspect the Props table.

Component sources are read at build time via src/lib/source.ts and embedded directly in the Code tab. There is no backend, no API, and no runtime data fetching.

Built with

  • Next.js 16 (App Router)
  • React 19
  • TypeScript
  • Tailwind CSS v4
  • Framer Motion
  • Lucide React
  • Prism React Renderer

Accessibility & performance

  • All animations collapse to near-zero under prefers-reduced-motion: reduce.
  • Canvas backgrounds pause when off-screen and when the tab is hidden, with device pixel ratio capped at 2.
  • Interactive components are keyboard-navigable with full ARIA roles and properties.
  • Text animations preserve semantic HTML so screen readers always read the intended content.