Components

Parallel gallery of every button demo with preview cards and View links that open each component in a new tab.

Compact cyan glass wallet CTA with a dark dotted-arrow action block and tactile hover motion.

Thin wrapper around GlossyButton tone=dark.

Shared CTA primitive with tone (light/dark/orange/lime/purple) and size (sm/md/lg/hero). Experience button skins wrap this.

Thin wrapper around GlossyButton tone=light.

Thin wrapper around GlossyButton tone=lime with a Plus leading icon.

Thin wrapper around GlossyButton tone=orange.

Thin wrapper around GlossyButton tone=purple size=hero.

Cyan glowing Buy Now button recreated from the dark mobile finance screenshot.

Oversized glossy green Earn pill with a filled rewards icon and cropped reference-inspired stance.

Stacked Apply Fix and Preview Fix controls with green glow and dark elevated treatment.

Pixel-perfect recreation of the performance.dev Subscribe button — dark pill with two-layer shadow and inset gradient ring.

Paired Preview and Deploy buttons with white lifted and dark glossy visual treatments.

Frosted CTA and card components using the extracted gradient border, blur, shadow, and noise recipe.

Video-inspired transaction button with glossy loading sweep, spinner, and completed state.

Purple, black, and green glossy icon buttons recreated from the shared stacked reference image.

Tactile custom-cursor button that swaps to a pressed pointer asset on active press.

Swipe-to-confirm conversion pill with a draggable white thumb and gently moving lucide arrows.

Chrome subscription CTA with pointer-following sheen, sparkles, and tactile squircle surface.

Horizontal pill bar for switching between blockchain networks with controlled/uncontrolled selection.

Editable dark pill input with a measured custom gradient caret and violet bloom.

Reusable dithered-gradient avatar with size, colors, and props playground. Full swatch builder remains at Avatar Creator.

Reusable dithered-gradient profile avatar builder with swatches, shuffle, and custom color add.

Timeline ruler with drag-to-resize, NL text input, and granularity panels.

AI chat composer with a gooey context-card reveal and a frame-accurate video-reference motion variant.

Glossy segmented donut, cropped radial growth arc, and neon 3D bar chart components.

Sortable swipeable table with price, change, volume, market cap, and vol. score columns.

Animated number transitions — currency, percent, compact, countdown, continuous, trend, and stepper variants.

Monthly trading calendar with positive/negative day heatmap and paged navigation.

Bottom-center floating utility dock with component menu, copy actions, and theme switcher.

Interactive table of contents with cubic Bezier connectors, clip-path animation, and offset-path demos.

Making Software inspired article progress rail with clickable ticks, section labels, and mobile progress bar.

CSS scroll masking pattern with scrollbar space, scroll-timeline enhancement, and native fallback.

Inline text hover reveal that expands a tiny image with smooth transition.

Jhey-inspired circular text component using CSS trigonometric radius and per-character variables.

Animated loading spinners based on mathematical curves — rose, Lissajous, hypotrochoid, and more.

Vanilla WebGL Siri-style wave and fluid dots shaders with responsive canvas sizing.

Portable vanilla WebGL square grid with a cursor-trail shimmer wave behind any content.

Video-inspired top-right floating toolbar with a sliding active icon surface and morphing tooltip.

3D image canvas with pan, zoom, click-to-select, side panel, and minimap. Built with React Three Fiber + Drei.