Interactive Primitives Directory
Every component is live, touch-enabled, keyboard-accessible, and packaged with source code and optimized AI generation prompts.
Signature Pad↗
Smooth vector signature drawing canvas with stroke smoothing, color palette selection, touch support, and export.
Voice Note↗
Audio waveform equalizer visualizer with recording state, duration counter, and synthesized playback audio.
Eye Tracker↗
Two responsive eyes that calculate trigonometry angles to track pointer movement in real time with natural blink physics.
Dynamic Island↗
Compact floating island pill that expands and morphs smoothly between idle, call, music, timer, and recording states.
Time Scrubber↗
Scrubbable horizontal timeline slider with 60FPS video timestamp feedback, frame tick markers, and transport controls.
Upload Dropzone↗
Real drag & drop file upload target with file selection APIs, progress bar animation, and dragover highlight.
Particles↗
Hardware-accelerated particle swarm that scatters away from cursor proximity, creates connecting network nodes, and relaxes back.
Label Input↗
Text input with smooth floating micro-label, active boundary glow, validation states, and clear button.
One-Time Code↗
6-digit OTP verification inputs with automatic focus hopping, backspace handling, clipboard paste, and numeric check.
Generate↗
Multi-state generative button with idle sparkle, pulsing loading progress ring, and success transformation.
Step Player↗
Interactive timeline stepper with active step highlight, animated progress line, previous/next controls, and keyboard navigation.
Todo Tower↗
Stacked deck of todo task cards with swipe-to-complete, check animations, reordering, and depth elevation.
Image Accordion↗
Interactive horizontal image cards that expand smoothly on hover with focus typography captions.
Glass Bubble↗
Draggable glassmorphism sphere with specular highlight reflections, elastic boundary tethering, and spring release physics.
Action Node↗
Visual node block with input/output connection pins, conditional status pill, and hover action breakdown.
Magnetic Select↗
Dropdown selector where menu options and highlight pill magnetically attract toward cursor coordinates.
Slide to Confirm↗
Fintech-grade draggable slide-to-pay/confirm track with threshold activation, spring reset, and haptic success checkmark.
Assignees↗
Interactive team avatar stack with hover expansion, popover search picker, and one-click assignee addition.
Checklist↗
Fluid task checklist with animated check boxes, strike-through text transitions, and celebratory progress meter.
Carousel↗
Touch and mouse swipeable card carousel with spring momentum, pagination dots, and keyboard navigation.
Palette↗
5-shade HEX/RGB color palette generator with one-click clipboard copy, hover expanding tiles, and randomizer.
Aspect Ratio↗
Interactive aspect ratio switcher (16:9, 4:3, 1:1, 9:16, 21:9) with smooth spring-morphing frame dimensions.
Tilt Card↗
Subtle 3D gyro and cursor perspective tilt card with holographic sheen and glare projection.
Now Playing↗
Compact media player card with artwork, animated equalizer bars, progress track, and play/pause controls.
Dragging Ball↗
Interactive physics ball constrained by elastic spring tether with velocity release bounce.
Search↗
Expandable search dialog with ⌘K keyboard shortcut trigger, recent history, live filtering, and clear button.
Pull to Refresh↗
Mobile gesture simulator with rubber-band downward drag resistance, threshold activation, and spinner refresh.
Escape Button↗
Playful button that calculates mouse proximity and smoothly glides away to evade cursor clicks.
Slosh Slider↗
Fluid progress range slider with liquid volume inertia, wave displacement, and live percentage readout.
Create Menu↗
Action button that expands into staggered action pills for Document, Project, Task, and Agent creation.
Reorder List↗
Interactive sortable list with drag handles, smooth layout shifts, and reorder confirmation.
Canvas Toolbar↗
Floating canvas design toolbar with Select, Hand, Frame, Pen, Text, and Comment tools with animated active indicator.
Radial Menu↗
Circular pie menu that expands 360 degrees around pointer coordinates with directional action slices.
Drag Stepper↗
Draggable number stepper that adjusts numeric values horizontally with velocity acceleration.
Inline Confirm↗
Compact action button that smoothly unfolds into 'Are you sure? [Yes] [No]' with spring width morphing.
Notify↗
Stackable notification toasts with auto-dismiss progress countdown, swipe dismissal, and synthesized chimes.
Icon Bar↗
Bottom icon bar with floating liquid indicator droplet that follows the active navigation tab with spring physics.
Magnifying Dock↗
macOS-style desktop dock with continuous parabolic cursor proximity magnification and smooth interpolation.
Progress Ticks↗
Linear segmented progress meter with hoverable tick segments that reveal status info and percentages.
Wheel↗
Circular rotary jog wheel for tactile parameter scrubbing with degree angle calculations and haptic tick feedback.
Command Bar↗
Command palette with category groupings, fuzzy keyboard navigation, nested actions, and Escape dismissal.
Selection List↗
Multi-select list with indeterminate parent states, batch actions, and smooth checkbox transition springs.
Range Dial↗
Circular range gauge knob with draggable radial thumb, numeric angle readout, and min/max constraints.
Liquid Toggle↗
Tactile toggle switch with liquid fill expansion, spring knob bounce, and haptic feedback on switch.