DEV Community

Axit
Axit

Posted on • Originally published at aumiqx.com

22 React Components That Don't Exist Anywhere Else

#react #typescript #ui #opensource

Buttons are boring. Modals are lazy. "Are you sure? [Yes] [No]" is a crime against UX.

Here are 22 React components that make users feel something. Every one of them is used in production on aumiqx.com. Every one is open source. Every one is something you've never seen in a component library before.

The Problem with Every CTA on the Web

Every website uses the same interaction model: click a button, see a modal, confirm with another button. There's zero physical feedback. Zero intentionality. Zero proof that the user actually meant to do what they did.

What if your "Delete Account" button required the user to lift a safety cover and flip a switch? What if your payment confirmation needed a 2-second hold while a progress bar fills? What if your sign-up CTA was hidden behind particles you had to sweep aside?

These aren't gimmicks. They're intentional friction — interactions that scale with the importance of the action.

Gesture CTAs

The star of the library. Six components that replace boring buttons with physical interactions.

SlideToUnlock

Drag the handle to the end. Spring physics snap it back if released early. Like iOS unlock, but for any action.

<SlideToUnlock
  label="slide to deploy"
  onUnlock={() => deploy()}
/>
Enter fullscreen mode Exit fullscreen mode

Use case: High-intent CTAs where you want to prevent accidental triggers. Payment confirmations, destructive actions, important form submissions.

HardwareSwitch

Two-step confirmation: first lift the safety cover with CSS 3D transforms, then toggle the switch underneath. Two deliberate actions. No accidental triggers.

<HardwareSwitch
  onActivate={() => arm()}
  label="launch sequence"
/>
Enter fullscreen mode Exit fullscreen mode

Use case: Nuclear-level confirmations. Database deletions, production deployments, account termination. The 2-step interaction proves the user is serious.

HoldToConfirm

Press and hold for 2 seconds. A progress bar fills the button. Release early and it resets. No modals, no extra clicks.

<HoldToConfirm
  duration={2000}
  onConfirm={() => execute()}
/>
Enter fullscreen mode Exit fullscreen mode

Use case: Replace every "Are you sure?" modal on your site. The hold duration IS the confirmation. Time-based friction that scales with importance.

LeverCTA

A tension wire. Pull it down. Watch it stretch. Keep going until it snaps. The snap triggers the action.

<LeverCTA
  label="pull to confirm"
  onSnap={() => confirm()}
  threshold={120}
/>
Enter fullscreen mode Exit fullscreen mode

Use case: Forms, subscriptions, any action where you want the user to feel the weight of their decision. Satisfying in a way buttons never are.

ResonanceCTA

The screen is noise. Move your mouse in circles. The noise clears. The CTA appears underneath. Users who find it earned it.

<ResonanceCTA
  label="you found it."
  onReveal={() => router.push('/contact')}
/>
Enter fullscreen mode Exit fullscreen mode

Use case: Landing page hero sections where you want to reward curious users. The interaction itself filters for engaged visitors.

AlchemistCTA

A field of particles. Push them aside with your cursor. Under the dust: a hidden call-to-action. Like clearing fog to find treasure.

<AlchemistCTA
  label="start building"
  particleCount={200}
  onReveal={() => console.log('revealed.')}
/>
Enter fullscreen mode Exit fullscreen mode

Use case: Hero sections, portfolio sites, product reveals. The particle interaction creates a sense of discovery.

Layout & Glass

GlassCard

Hover it. Watch it lift with spring physics. The gradient overlay catches light like actual glass. We use this for every card on aumiqx.com.

<GlassCard hover>
  <h3>anything goes here.</h3>
  <p>it just looks better in glass.</p>
</GlassCard>
Enter fullscreen mode Exit fullscreen mode

LiquidGlass

The frosted glass pill that started everything. Backdrop blur, inner shadows, saturation boost. Our navigation bar uses it — look up at this page right now.

<LiquidGlass className="px-6 py-3">
  <span>frosted. blurred. alive.</span>
</LiquidGlass>
Enter fullscreen mode Exit fullscreen mode

TerminalCompare

Before and after, but make it terminal. Drag the divider. Watch chaos become clarity. Perfect for showcasing transformations.

<TerminalCompare
  before={{ title: "before", items: [...] }}
  after={{ title: "after", items: [...] }}
/>
Enter fullscreen mode Exit fullscreen mode

Animation

TextReveal

Words materialize one by one as you scroll. Character mode for when you want to be dramatic. Zero layout shift, accessible.

<TextReveal
  text="the components you wish existed."
  wordBased
  delay={0.2}
/>
Enter fullscreen mode Exit fullscreen mode

AnimatedCounter

Numbers that count up from 0 when they scroll into view. Spring easing so they decelerate naturally. Configurable suffix and duration.

<AnimatedCounter
  target={2847}
  suffix=" emails sent"
  duration={1.5}
/>
Enter fullscreen mode Exit fullscreen mode

SectionWrapper

Every section on aumiqx.com uses this. Viewport-triggered fade-in. Optional full-height. Handles intersection observer internally so you never think about it.

<SectionWrapper id="hero" fullHeight>
  <h1>everything inside fades in.</h1>
</SectionWrapper>
Enter fullscreen mode Exit fullscreen mode

Terminal Components

Terminal Emulator

A full pseudo-shell with 25+ commands, filesystem simulation, tab autocomplete, and command history. Not xterm.js — this is a simulated terminal designed for marketing, docs, and product demos.

Supports: ls, cd, cat, run, status, whoami, help, clear, and 17 more commands. Each with contextual output, colored terminal lines, and easter eggs.

Terminal Form

Sequential form as terminal interface. 7 questions with validation, multiple choice, progress bar, and submission animation. Way more engaging than traditional form fields.

Cmd+K Navigation

Full command palette with Fuse.js fuzzy search across every page on your site. Keyboard navigation, categorized results (news, tools, cities, pages), freshness indicators. Always available via Cmd+K.

Open Source Primitives

Beyond components, we're building foundational libraries:

  • @aumiqx/gesture — Pure-math gesture recognition. ~6KB, zero deps. Classify taps, swipes, flicks from raw coordinates without the DOM.

  • @aumiqx/scroll — Programmable scroll physics. ~4KB, zero deps. Per-section friction, magnetic snap, configurable mass.

  • @aumiqx/pixels (coming soon) — React-to-image without a browser. Yog + Pretext + Skia WASM.

The Battle Test

Visit aumiqx.com/ui and you'll see a side-by-side comparison: a boring HTML <button>Click me</button> next to our SlideToUnlock component. Same action. Completely different feel. The contrast sells itself.

Every gesture CTA on the page has a live inline demo — you can drag, flip, hold, and pull right on the page. No CodeSandbox, no iframe. The demo IS the component.

Install 

npm install @aumiqx/ui
Enter fullscreen mode Exit fullscreen mode

Or copy-paste individual components — they're all self-contained files with zero inter-dependencies.

Live Gallery | GitHub | npm

MIT licensed. Framer Motion + Tailwind CSS. Dark theme optimized. Tree-shakeable.

Built by Aumiqx — we build AI agents, workflow automations, and open-source tools. These components power our own site.

Top comments (0)