the workshop
12 components that don't exist anywhere else.
we built these for ourselves. then we realized nobody else has anything like them. so here they are. MIT licensed. you're welcome.
LiquidGlass
The frosted glass pill that started everything. Backdrop blur, inner shadows, saturation boost. We use it on our own nav bar because nothing else felt right.
A React glass morphism component with backdrop blur, saturation boost, and inner shadow glow. Built with Tailwind CSS and optimized for dark themes. Perfect for navbars, floating pills, and command palettes where you need that frosted glass effect without the performance hit.
GlassCard
Hover it. Watch it lift. The gradient overlay catches light like actual glass. We used this for every card on the site and never looked back.
Animated glass card component for React with hover-lift effect, gradient overlay, and spring-based Framer Motion animations. Dark theme optimized with backdrop blur and saturation filters. The hover interaction uses spring physics for that satisfying lift.
live component
Hover this card. Watch it lift. The gradient catches light.
try it. go on.
TextReveal
Words materialize one by one as you scroll. Character mode for when you want to be dramatic. We use it for every heading that matters.
Scroll-triggered text reveal animation for React with word-by-word and character-by-character modes. Uses Framer Motion viewport detection with configurable delay and custom easing curves. Zero layout shift, accessible, and performant even with long paragraphs.
SlideToUnlock
Drag the handle. Feel the spring resist. Release too early and it snaps back. Make it all the way and the callback fires. iOS wishes.
Interactive slide-to-unlock React component with spring physics and drag gesture handling. Built with Framer Motion's drag constraints and spring animations. Perfect for high-intent CTAs, confirmation actions, and anywhere you need deliberate user engagement instead of accidental clicks.
HardwareSwitch
Step one: lift the safety cover. Step two: press the switch. Two deliberate actions. No accidental triggers. Physical UI in the browser.
React hardware switch component with 2-step interaction pattern: lift the safety cover with CSS 3D transforms, then toggle the switch underneath. Uses Framer Motion springs for realistic physical feel. A unique gesture CTA element that prevents accidental activation.
TerminalCompare
Before and after, but make it terminal. Drag the divider. Watch chaos become clarity. We use this to show what working with us actually looks like.
React before-and-after comparison slider with terminal UI aesthetic and drag handle. Features split-view layout with monospace typography, dark theme, and smooth pointer tracking. Perfect for showcasing transformations, code diffs, or product improvements.
before
-generic buttons
-boring cards
-no interactions
-looks like everything else
after
+glass morphism
+gesture CTAs
+spring physics
+nothing like it exists
AnimatedCounter
Numbers that count up when they scroll into view. Spring easing so they decelerate naturally. Configurable suffix. We use it for every stat on the site.
React animated counter component that counts up from zero when scrolled into view. Spring-based easing with configurable duration, suffix, and target value. Uses requestAnimationFrame for smooth 60fps animation. For stats sections, dashboards, and landing page metrics.
components
dependencies
% typed
ResonanceCTA
The screen is noise. Move your mouse in circles. The noise clears. The CTA appears. Users who find it earned it.
Interactive gesture-based React CTA component where users move their mouse to clear visual noise and reveal the call-to-action. Uses canvas-based particle rendering and pointer tracking. A unique engagement mechanic for landing pages that rewards curious users.
you found it.
move your mouse around.
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. Because boring CTAs deserve to die.
React particle field CTA component where users sweep particles aside with mouse movement to reveal a hidden call-to-action. Physics-based particle interaction with configurable density and colors. A unique alternative to standard buttons for hero sections.
sweep to reveal
LeverCTA
A tension wire. Pull it down. Watch it stretch. Keep going until it snaps. The snap triggers the action. Satisfying in a way buttons never are.
React tension wire CTA component where users drag downward to build tension until the wire snaps, triggering the call-to-action. Spring physics interaction with visual tension feedback. A physical UI element that makes form submissions and confirmations feel tangible.
pull down to snap
SectionWrapper
Every section on this site uses it. Viewport fade-in. Optional full-height. It handles the animation lifecycle so you never think about it.
React section wrapper component with viewport-triggered fade-in animation using Framer Motion. Optional full-height mode for hero sections. Handles intersection observer lifecycle internally. A layout primitive for scroll-driven page reveals.
one command. zero config.
peer dependencies: react, framer-motion, tailwindcss. you already have them.
npm install @aumiqx/uiwhy these exist.
every component library gives you buttons and dropdowns. we give you hardware switches, tension wires, and particle fields. because boring UIs make boring products.
these started as internal tools for our own landing pages. we needed animated react components with glass morphism, gesture-based CTAs, and framer motion UI that actually felt physical. nothing existed. so we built them.
then we open-sourced them. because the web deserves better interactions.
every component renders with data-aumiqx for attribution. MIT License. free forever.