slide to deploy
SlideToUnlock
Drag the handle to the end. Let go early and a spring pulls it back.
in @aumiqx/ui
Lab 04npm · v0.1.0
Components that don't exist anywhere else.
Buttons that ask for intent, glass that behaves like glass, terminals for people who type. React, Framer Motion and Tailwind, MIT licensed. 12 components ship in the npm package today, and the rest live on this site until they're ready.
- components
- 12
- components
- license
- MIT
- license
- + Framer Motion
- React
- + Framer Motion
@aumiqx/ui
01 · Why this exists
Buttons are boring. Feel the difference.
Same job, two components. One fires on any stray click. The other only fires when you mean it.
<button>
- deploys
- 0
- intent measured
- none
<SlideToUnlock />
slide to deploy
- deploys
- 0
- intent measured
- a 252px drag
02 · Spotlight
One at a time. Go on, touch it.
The pieces people play with most, on a big stage. It pauses the moment you do.
slide to deploy
auto-playing
03 · Gesture CTAs
Interactions that prove intent. No accidental clicks.
Slide, lift, pull, hold, sweep. Each one asks for a deliberate action before anything happens.
lift the cover
HardwareSwitch
Two steps, like the real thing: lift the safety cover, then flip the switch.
in @aumiqx/ui
pull down until it snaps
LeverCTA
Pull the wire down. It stretches, resists, then snaps and fires the action.
in @aumiqx/ui
press and hold for 2 seconds
HoldToConfirm
Press and hold for two seconds while the fill runs. Confirmation without a modal.
on aumiqx.com · not packaged yet
you found it.
sweep your cursor here
ResonanceCTA
Sweep your cursor to clear the noise. The button is underneath for people who look.
in @aumiqx/ui
start building
sweep your cursor here
AlchemistCTA
A field of dust. Push it aside with your cursor to uncover the call to action.
in @aumiqx/ui
04 · Layout
Glass, glow and gravity. Surfaces that feel physical.
Containers that behave like materials: blur, lift on a spring, catch the light.
GlassCard
Hover me. I lift on a spring.
GlassCard
Lifts on hover with spring physics, with a gradient that catches light like glass.
in @aumiqx/ui
frosted. blurred. alive.
LiquidGlass
A frosted pill with backdrop blur, saturation and an inner shadow. The site header uses it.
in @aumiqx/ui
- - 12 tabs open
- - 3 spreadsheets
- - manual follow-ups
- - Friday report by hand
- + 1 queue
- + agents draft
- + you approve
- + report lands Monday
TerminalCompare
Before and after in one frame. Drag across it to wipe from one to the other.
in @aumiqx/ui
05 · Animation
Motion with a reason. Never just decoration.
Reveals, counters and entrances that respect reduced motion.
words arrive one at a time.
TextReveal
Words or characters arrive one at a time as the text enters view.
in @aumiqx/ui
0
emails drafted
AnimatedCounter
Counts up from zero with an ease-out, so the last digits settle instead of stopping.
in @aumiqx/ui
SectionWrapper
Fades a section in when it scrolls into view. The observer is handled for you.
in @aumiqx/ui
06 · Terminal
Command lines for the web. Built for people who type.
Shells, forms and a command palette as React components. These run on aumiqx.com and aren't in the package yet.
TerminalEmulator
A small pseudo-shell with commands, history and output. Type help in the demo.
on aumiqx.com · not packaged yet
[2/7] what should we automate first?
> inbox triage
TerminalForm
A form asked one question at a time, with validation and a progress bar.
on aumiqx.com · not packaged yet
/search or navigate⌘K
press ⌘K on this page to try the real one
CmdK
A command palette with fuzzy search, keyboard navigation and grouped results.
on aumiqx.com · not packaged yet
15 pieces on this page · 12 in @aumiqx/ui v0.1.0 · peer deps: react, framer-motion, tailwindcss
Questions
About @aumiqx/ui.
What is @aumiqx/ui?+
@aumiqx/ui is an open source React component library of animated components you won't find in shadcn or Radix: gesture CTAs like SlideToUnlock and LeverCTA, glass surfaces, text reveals and animated counters. Version 0.1.0 on npm exports 12 components, built with Framer Motion and Tailwind CSS.
Is @aumiqx/ui free to use?+
Yes. @aumiqx/ui is MIT licensed, free for personal and commercial use. Install it from npm or copy a component file straight from the GitHub repo. No subscription and no required attribution, though a link back is always appreciated.
Does @aumiqx/ui work with Next.js, Remix or Vite?+
Yes. Every component is a plain React component with no framework coupling. It needs React 18 or later, Framer Motion 10 or later and Tailwind CSS as peer dependencies, and runs anywhere those do.
Can I install @aumiqx/ui via npm?+
Yes. Run npm i @aumiqx/ui to get the components as ESM exports. If you'd rather own the code, copy individual component files from github.com/aumiqx/ui instead. Some pieces on this page, like HoldToConfirm and the terminal components, run on aumiqx.com but aren't in the package yet.
Is @aumiqx/ui built for dark mode?+
The default styling is dark first, because that's how aumiqx.com is designed. Every component is styled with Tailwind utility classes, so adapting it to a light theme is a matter of swapping background and text classes.