Component LibrarySource via MCPComponents
React components your agent installs through the Niblet MCP, running live. Try one here, copy its build prompt for your agent, or open it to see it large and what it installs.
canvas61
- Ai Job CardsDisplays AI job card stacks that cycle by button press or vertical drag.
- Avatar PickerPresents an avatar stack that advances on horizontal swipes and confirms a tapped selection.
- Blind Pull ToggleDisplays a responsive pull control whose slat animation swaps between moon and sun icons.
- Bubble FieldCanvas field of outlined bubbles that react to nearby pointer and touch input. Each affected bubble expands, fades, and reforms in a repeating burst.
- Charging WidgetCircular charging indicator with liquid waves that rise with a looping count. The displayed percentage resets after reaching its target.
- Crypto SwapPresents a token swap card with live quotes, token pickers, and configurable slippage. Selecting a duplicate token flips the pair, while submission animates confirmation.
- Cube CarouselRotatable photo cube controlled by dragging or the arrow keys. Momentum carries the cube after a pointer gesture ends.
- Curious AiRenders a shader-driven orb that tracks pointer movement with animated eyes. Idle gaze and blink cycles continue when the pointer leaves the component.
- Danger StripesDisplays layered warning stripes with repeating text. Hovering jitters the stripes, while clicking briefly increases the motion.
- Delete ButtonPresents a staged account deletion control with a five-second countdown. The pending state offers undo before showing a temporary confirmation.
- Diamond GridRenders a seeded diamond grid with traveling ignition pulses. It adapts its canvas animation to visibility, theme, and reduced motion.
- Distortion GridRenders a canvas grid of curved lines with ambient wave distortion. Pointer proximity increases the wave amplitude and repels nearby lines.
- Dot GridRenders a canvas dot grid with theme-aware resting and highlight colors. Pointer movement brightens and enlarges nearby dots with eased falloff.
- Ds One ButtonDemonstrates a tokenized button family with hover, focus, pressed, and disabled states.
- Emoji BurstDisplays a button that emits a rotating set of emoji particles. Each press advances the theme and animates a radial burst around the label.
- Expanding TabsDisplays a pill-shaped tab list with icon-only inactive tabs. Selecting a tab expands it to reveal its label with layout animation.
- Flip CalendarRenders a draggable day calendar with a split-flap transition. Pointer movement tilts the card, while vertical swipes change the date.
- Floating CardsDisplays a stacked set of travel cards with animated hotel counts. Dragging the front card downward sends it behind the deck.
- Glitch ButtonRenders a terminal-styled button with a character scramble effect. Hovering replaces unresolved letters with symbols before restoring the label.
- Good VibesRenders variable-font text whose glyphs react to pointer and touch proximity. Nearby letters gain weight, scale, and spacing with eased falloff.
- Grid LinesRenders a canvas grid of connected dots with theme-aware coloring. Pointer proximity brightens the grid and pushes nearby nodes into a lens shape.
- Halo TypeRenders a rotating ring of individually positioned text glyphs. Hover and touch slow the rotation, while reduced motion freezes the ring.
- Jar Of EmotionsDisplays a physics-driven jar that dispenses selected emotion emoji. Clicking an emotion opens the lid and launches a matching body toward its button.
- Label CardsPresents a responsive stack of labeled portfolio cards. Hover and focus separate the overlapping cards while preserving their spread.
- Magnetic DotsRenders a canvas field of dots connected to spring-based positions. Pointer movement pulls nearby dots before they glide back into the grid.
- Magnetic Logo ClusterA swarm of logo marks that fly in from off-screen, settle into an overlapping diamond pack, breathe on an infinite GPU drift, and bend toward the cursor like iron filings around a magnet. Three motion behaviours run per icon: 1. Entry (one-shot spring): off-screen → rest, staggered across the pack. 2. Float (CSS @keyframes, GPU): infinite slow position drift + rotation sway. Compositor-driven,…
- Mark ToggleDisplays a responsive pill toggle with an icon-bearing thumb. Toggling slides the thumb and morphs its mark between an X and check.
- Mood TrackerPresents a weekly mood tracker with an editable daily rating. Selecting a mood animates the chart, summary, and current-day control.
- Neon ClockDisplays the current time and date with seven-segment neon digits. Active segments and calendar labels update from the local clock.
- New Project ModalPresents a new-project form that expands from its trigger button. Opening moves focus into the modal and submission validates the project title.
- Noise BgRenders a theme-aware canvas field of granular dots and connections. Pointer proximity changes the brightness of nearby particles and lines.
- Noise FieldRenders a canvas field of arrows following an organic flow pattern. Nearby arrows turn toward the pointer with distance-based easing.
- OrbitDisplays text arranged around a responsive elliptical orbit. Pointer movement shifts the ring perspective and its central marker.
- Particle ConstellationRenders a radial canvas constellation with bowed connecting strands. Pointer proximity repels nodes and bends nearby connections.
- Particle SphereRenders a shaded particle sphere with a Three.js point cloud. Pointer movement rotates the sphere while its particles continue drifting.
- Peel Corner RevealPresents a Wi-Fi card with a peelable corner containing a QR code. Hover teases the fold, while click and keyboard input lock the reveal open.
- Pill ToggleDisplays a responsive pill toggle with a sliding thumb. Toggling animates the thumb position and interpolates the track color.
- PlayfulRenders variable-font lettering that responds to pointer proximity. Nearby glyphs change width, weight, and position as the pointer moves.
- Polaroid StackPresents a responsive stack of labeled polaroid cards. Selecting a card brings it forward and rearranges the remaining stack.
- Radial CardsArranges activity cards around a continuously rotating radial track. Pointer engagement lifts and centers the nearest card for inspection.
- Radial ToolbarPresents formatting tools around an expandable radial menu. Opening fans the controls outward, while selection toggles each tool state.
- Responsive LettersRenders variable-font letters that react independently to pointer distance. Nearby glyphs adjust width, weight, slant, and scale with eased falloff.
- Ripple TypeRenders a word around a rotating fan of repeated glyph layers. Pointer engagement increases the ripple amplitude and rotation rate.
- Runway LoaderDisplays an airplane loader moving along a runway timeline. Progress advances through staged labels before the sequence restarts.
- Scramble TextDisplays words whose characters continuously scramble while idle. Hovering resolves each word from left to right before restoring the loop.
- Scroll Wipe GalleryPresents a full-frame photo gallery driven by scroll progress. Each section wipes over the previous image while updating its title.
- Signature PadPresents a signature modal with a velocity-sensitive drawing canvas. Pointer strokes can be erased, canceled, or confirmed into the trigger pill.
- Slice TypeRenders sliced typography that transitions between contrasting color modes. Hovering offsets the letter slices and reveals the alternate word treatment.
- Slide DeckPresents a responsive deck of numbered presentation slides. Dragging or using navigation controls moves the focused slide through the stack.
- Sphere LinesRenders a rotating canvas sphere from layered latitude lines. Pointer engagement accelerates the waves and distorts nearby line segments.
- Stack TowerRenders repeated words as a vertically rotating typographic tower. Hovering a row increases its scale while the stack continues cycling.
- Sticker WallPresents a physics wall where text and emoji stickers can be added and dragged. New stickers fall into the scene and collide with existing bodies and boundaries.
- Taga ToggleDisplays a responsive pill toggle with an expressive face on its thumb. Toggling slides the thumb and morphs the face between inactive and happy states.
- Task CardsPresents project tasks as a responsive overlapping card deck. Dragging or using arrow controls moves the selected task through the stack.
- Text Blur RevealReveals a short sentence through staggered blur and position transitions. The call-to-action appears after the final word finishes animating.
- Tilted CoverflowDisplays a tilted coverflow of captioned image cards. Dragging, tapping, or using the keyboard changes the centered slide.
- Upload ProgressPresents simulated file uploads in a collapsible progress card. Each transfer can be paused, resumed, canceled, or restarted after completion.
- Voice Chat PillPresents a voice-chat pill that expands into participant controls. Opening reveals selectable people and speaking indicators before collapsing again.
- Wave LinesRenders a theme-aware canvas field of vertically sampled wave lines. Pointer presence amplifies the field and repels nearby line segments.
- Wild MorphRenders a word whose corners warp through a matrix transform. Pointer position selects an upper or lower deformation before easing back at rest.
- X GridRenders a theme-aware canvas grid of connected cross marks. Pointer proximity brightens nearby marks and their connecting lines.
