Components

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

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

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

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

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

Reusable dark gradient button built from the shared Figma radius, shadow, and opacity properties.

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

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.

Figma-spec light gray hug button with subtle gradient, inset highlight, and soft shadow.

Bright lime Add Alert Rule CTA with plus icon, rounded border, and soft raised finish.

Supplied orange Add View button with layered outer and inset shadows.

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

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

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

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

Glossy purple Track Status CTA with a wide molded surface and oversized white text.

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

Horizontal pill bar for switching between blockchain networks.

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

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

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

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

Sortable table with volume, floor price, owners, supply columns.

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

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

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.

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

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

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

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

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.

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

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