Components that move like objects. Click like switches. Feel like something.
170+ open-source React components built with spring physics, audio feedback, and zero styling dependencies.
Open any web app. Click a button. Watch it change state. The transition takes exactly 300ms, follows a cubic bezier curve, and stops dead. Every time. Regardless of distance, velocity, or intent.
That's not how physical objects move. Physical objects have mass, momentum, and friction. They overshoot when they arrive. They settle. They respond differently depending on how hard you push them.
Web UI has none of that. Ruixen UI fixes it.
Every component in Ruixen UI replaces CSS timers with spring dynamics:
// CSS: fixed duration, ignores distance and velocity
transition: transform 0.3s ease;
// Ruixen: spring adapts to distance naturally
// short moves are snappy, long moves carry momentum
transition={{ type: "spring", stiffness: 400, damping: 28 }}A spring has stiffness (how hard it pulls toward the target), damping (how much friction slows it), and mass (how heavy the element feels). The same spring config produces different motion depending on distance — a 20px move is snappy, a 200px move has visible overshoot and settle. That's how real objects behave.
A 3ms noise burst plays on every interactive state change. Not a WAV. Not an MP3. A shaped noise signal generated in real time:
const len = Math.floor(ctx.sampleRate * 0.003); // 3ms buffer
const buf = ctx.createBuffer(1, len, ctx.sampleRate);
const ch = buf.getChannelData(0);
for (let i = 0; i < len; i++)
ch[i] = (Math.random() * 2 - 1) * (1 - i / len) ** 4;
// ^^^^^^^^^^^^^^^^
// quartic decay envelope — sharp attack, instant fade
gain.gain.value = 0.06; // 6% volume — felt more than heardWhy noise instead of a sine wave? A sine wave at any frequency sounds electronic. Noise shaped by a fast decay sounds like a physical impact — a switch clicking, a key depressing. Your brain interprets it as mechanical, not digital.
Every component accepts sound={false} to disable it.
|
FAQ Chat Accordion Conversational FAQ with spring message entrance |
Rising Glow Animated particles with soft luminance |
Comment Thread Nested replies with collapsible chains |
|
Badge Morph Spring-animated status transitions |
Wordmark Footer Half-cut brand text with luminance gradient |
Breadcrumb Dropdown Staggered path reveal with spring expand |
Interactive templates and sections — full-page compositions built with Ruixen UI components:
| Bloom Text | Models Carousel |
| Project Title Morph | Instagram Stories |
Add any component with one command:
npx shadcn@latest add "https://ruixen.com/r/invert-tabs"The component lands in your project with its dependencies resolved. No package to install, no provider to wrap, no global CSS to import.
Works with any setup:
# Tailwind v4 (default)
npx shadcn@latest add "https://ruixen.com/r/gooey-pagination"
# Tailwind v3
npx shadcn@latest add "https://ruixen.com/r/tw3/gooey-pagination"
# Base UI primitives
npx shadcn@latest add "https://ruixen.com/r/baseui/gooey-pagination"
# Base UI + Tailwind v3
npx shadcn@latest add "https://ruixen.com/r/baseui/tw3/gooey-pagination"| Accordions | AI Chat Inputs | Audio & Media | Avatars |
| Backgrounds | Badges | Banners | Breadcrumbs |
| Buttons | Calendars | Cards | Carousels |
| Checkboxes | Client Sections | Date Pickers | Dialogs |
| Docks | Drawers | Event Calendars | FAQs |
| Featured Sections | File Trees | Footers | Forms |
| Hero Sections | Image Tools | Inputs | Loaders |
| Menus | Navbars | Notifications | Pagination |
| Pricing Sections | Select Components | Sliders | Steppers |
| Tabs | Text Effects | Video Players |
Self-contained — Every component is a single file. Inline styles, CSS variables, no external UI dependencies. Drop it into any React project. It works.
Spring physics — motion/react springs instead of CSS transition. Elements have stiffness, damping, and mass. Motion adapts to distance and velocity. A short move snaps. A long move overshoots and settles.
Audio feedback — 3ms noise burst via Web Audio API on every state change. Quartic decay envelope, 6% gain. Sounds mechanical, not digital. Configurable via sound prop.
Theme adaptive — CSS variables for light and dark mode. Scoped with .dark and [data-theme="dark"] selectors. No global theme provider needed.
Four registry variants — Every component ships in Tailwind v4, Tailwind v3, Radix primitives, and Base UI primitives. One codebase, four outputs.
| Framework | Next.js 15 · React 19 · TypeScript 5 |
| Styling | Tailwind CSS v4 · CSS Variables · Inline Styles |
| Animation | Motion (framer-motion successor) · GSAP · Web Audio API |
| Primitives | Radix UI · Base UI · React Aria |
| Registry | shadcn CLI · JSON-based component registry |
| Deployment | Vercel · Cloudflare R2 |
A curated collection of 31 premium gradients at 4K resolution (3840 × 2160) across 6 collections: Shade Shifters, Crimson Aura, Fractional Walls, Hero Gradients, Hue Flows, and Moon Backgrounds.
Free for personal and commercial use.
You only need to change 5 files to add a new component. It takes about 10 minutes.
git clone https://github.com/ruixenui/ruixen.com.git
cd ruixen.com
pnpm install
pnpm devRead the Contributing Guide for the full walkthrough, or study the example PR to see exactly which files to touch.
MIT — see LICENSE for details.
Build interfaces that feel like something.