Foundation
01
The core kit.
Loaders, spinners, text effects, buttons, cards, indicators, tooltips, micro-interactions — the building blocks every UI needs. a11y baseline and reduced-motion enforced from day one.
components157
Your stack doesn't need another npm install.
Copy it.
Paste it.
Ship it.
We got tired of importing 200kb for a spinner.
NudaUI is a collection of framework-agnostic animations — pure HTML, CSS, and a sprinkle of vanilla JS. No build step. No config. Works with Laravel, Django, Rails, Go, or a plain .html file.
Laravel·Django·Rails·Go·Flask·Express·Spring·Next.js·Nuxt·Astro·Hugo·Jekyll·WordPress·Vanilla HTML·PHP·Jinja·Blade·ERB·Twig·Handlebars·Laravel·Django·Rails·Go·Flask·Express·Spring·Next.js·Nuxt·Astro·Hugo·Jekyll·WordPress·Vanilla HTML·PHP·Jinja·Blade·ERB·Twig·Handlebars·
Works with everything
The numbers
We removed everything
that wasn't the animation.
0
dependencies
No npm install. No node_modules. Just code.
0
build steps
No webpack. No vite config. Copy, paste, done.
3s
to integrate
From our gallery to your production app.
The kit
Six principles.
One tiny library.
Weightless
Typically under 1kb.
Single-file snippets with no runtime. Drop them in and forget the bundle size conversation.
Portable
Works everywhere HTML works.
React, Vue, Svelte, Astro, Blade, Jinja, plain HTML. If it renders markup, it runs NudaUI.
Accessible
Respects the user.
Semantic HTML, ARIA attributes and prefers-reduced-motion shipped by default, not added later.
Readable
Code you can actually debug.
No transpiled blobs, no minified monsters. The source is the same code you paste.
Unopinionated
Your design system, your rules.
Tokens, not themes. Restyle anything with CSS variables — we don't ship a brand for you.
Crafted
Easing curves, not defaults.
Every animation is hand-tuned. No bouncing for the sake of bouncing. No motion for motion's sake.
What's shipped
The catalog,
at a glance.
Real numbers from the repo. Every component ships with the same baseline: zero dependencies, semantic markup, and reduced-motion handling.
0Components shipped — across 40 categories
0%a11y
0%reduced-motion
0kbruntime
Categories∼7 / cat
0
Works withzero install · the snippets are plain HTML
React
✓
Vue
✓
Svelte
✓
Astro
✓
Plain HTML
✓
loadersai / chatcommand palettechartsdrag & drophero sectionspricingvideo playeronboardingcode & terminalparticlesform statesloadersai / chatcommand palettechartsdrag & drophero sectionspricingvideo playeronboardingcode & terminalparticlesform states
How it works
The code appears.
The animation follows.
HTMLCSS
<div class="nuda-loader"
role="status"
aria-label="Loading">
<span></span>
<span></span>
<span></span>
</div>
.nuda-loader {
--color: #e4ff54;
display: flex;
gap: 6px;
}
← That's it. Just paste it.
Playground
Touch them.
They respond.
Eight micro-interactions — hover, move your cursor, let the grid do its thing. All under 1kb each, all without a runtime.
move your cursor
Spotlight.cursor-spotlight
depth
3D tilt.perspective-tilt
Magnetic grid.magnetic-grid
NUDAUI
Scramble.text-scramble
Blob morph.border-radius-morph
holographic
Aurora.holographic-shift
Constellation.constellation
Typing.typing-caret
Gallery
Scroll to explore.
Ring Spinner
Loaders
Dot Wave
Loaders
NudaUI03
Glitch Text
Text Effects
Gradient Spinner
Loaders
Progress Bar
Indicators
Typing
Indicators
Morph Blob
Loaders
Skeleton
Placeholders
↓ keep scrolling
The flow
Three steps.
No install wizard.
Most UI libraries ask you to read docs, run migrations, and learn a new dialect. We ask you to copy something.
01Browse
Find the animation you actually need.
A curated gallery — not 400 variations of the same spinner. Preview, tweak speed, compare side by side.
→ nudaui.dev/components02Copy
Grab the snippet. That's the whole install.
One file, zero imports, one click. What you copy is what you ship. No hidden peer deps, no build configuration.
⌘ Copy to clipboard03Paste
Paste into any stack that renders HTML.
Next, Nuxt, Laravel, Django, a <script> tag on a static page — it doesn't matter. It works on the first try.
<div class="nuda-pulse" />Manifesto
We have opinions.
Framework lock-in is a tax on your time.
Every animation library ties you to React, Vue, or whatever's trending. Switch frameworks? Rewrite everything. NudaUI animations are just HTML and CSS — they outlive your framework choices.
200kb for a loading spinner is insane.
Most animation libraries ship entire runtime engines. Our components are typically under 1kb each. No JavaScript runtime. No bundle size anxiety. Just CSS keyframes that browsers already know how to optimize.
Backend developers deserve nice things too.
If you write Go, PHP, Python, or Rust — you've been left out of the animation conversation. Server-rendered templates don't need React. Blade, Jinja, ERB can all use NudaUI with zero configuration.
Accessible from day one, not as an afterthought.
Every component ships with ARIA attributes, prefers-reduced-motion support, and semantic HTML. Accessibility isn't a feature — it's the baseline.
Roadmap
Where
we're going.
Scroll to travel through the quarters. No wizards, no pricing tiers — just a tiny library growing on purpose.
Scroll →
Five quarters, five checkpoints.
Keep scrolling to move the timeline sideways. Shipped items glow; in-flight work pulses.
Shipped
Data & visuals
02
Charts and atmosphere.
Charts, sparklines, gauges, KPI cards, particle systems (confetti, fireflies, snow, rain), image effects (Ken Burns, glitch, mask reveal), counters, empty states.
components56
Power-user UX
03
AI, drag, and Cmd-K.
AI / chat UI primitives (streaming dots, prompt composer, citations), drag & drop with native events, command palette with kbd hints, theme toggles.
components40
Marketing & flows
04
Hero to onboarding.
Hero sections, pricing tables with billing toggles, video player UI, onboarding spotlights and checklists, code & terminal snippets — the full landing-page surface area.
components50
Looking ahead
Next
A CLI and theme tokens.
A small CLI to copy components into your repo (still no runtime), and a tokens.css system so a single CSS variables override can rebrand the whole catalog.
components—
end of timeline · keep building →
scrollor↓to advancelive
Frequently asked
Questions,
honestly answered.
Still curious? The source is the docs — every component ships with inline comments explaining the why.
Yes. Components are pure HTML and CSS, with a tiny sprinkle of vanilla JS only when a component genuinely needs interactivity. You'll never see peerDependencies, a runtime engine, or a mandatory bundler step.
Your users don't care
what framework you used.
They care that the button felt good to press. That the page loaded fast. That the spinner didn't make them question their internet. Give them that — without the overhead.
Free · Open source · No account needed