Skip to content
Bezel

React component library

Bezel

Components for interfaces that need motion and craft, shipped as readable TypeScript you copy into your project and own.

npm i bezel-ui
npmGitHub

Start with these

  • MagicRings

    WebGL rings that expand in two colours, with optional mouse parallax and click burst.

    AnimationHero

  • DepthText

    Extruded 3D type made of stacked layers that tilts to follow the pointer.

    Display

  • ScrollFlipDeck

    Pinned deck of images that turn away one at a time as you scroll.

    Sections

  • SketchHighlight

    Seeded marker wash, underline or strike whose ink boils between three takes.

    Animation

  • ParticleQrCode

    Scannable QR codes that assemble from grains and cycle, with a pause button.

    Display

  • ParallaxProductStage

    Lit product shelf where three items settle in and drift at different depths.

    SectionsHero

All components

90 components

  • GlyphField

    Word built as a bevelled 3D solid of glyphs that tilts toward the cursor.

    Animation

  • GlassButton

    Frosted translucent button for dark surfaces, with press scale and a focus ring.

    General

  • Card

    Translucent dark panel with an optional title, blurred over whatever sits behind it.

    General

  • TextInput

    Pill text field with label, required marker, error message and uppercase mode.

    Forms

  • Stepper

    Wizard progress: numbered steps on desktop, a progress bar with dots on mobile.

    Navigation

  • SubmissionLoader

    Blocking overlay that walks through verifying, validating, submitting and done.

    Feedback

  • TypewriterLoader

    Pure CSS loader of a little typewriter whose carriage slides as keys press.

    Feedback

  • ToastContainer

    Toast stack with a useToast hook, portalled to the body, sliding in and out.

    Feedback

  • ToolbarButton

    Compact icon button for toolbars, with hover, disabled and keyboard focus states.

    Buttons

  • CollapsibleSidebar

    Collapsible node palette with search and categorised items you can drag out.

    Navigation

  • SidePanel

    Inspector side panel with header, scrolling body, footer slot and field helpers.

    Panels

  • NodeCard

    Workflow editor node with a coloured accent bar, icon, label and selected ring.

    Cards

  • TubelightNavBar

    Floating pill navigation with a spring-animated lamp glow above the active item.

    Navigation

  • MD3Switch

    Material 3 style switch whose handle grows when pressed, with optional icons.

    Forms

  • NumberedStepsList

    Ordered list of process steps with a mono number column and serif titles.

    Lists

  • BlenderUpload

    Image drop zone illustrated as a blender, with fruit that bounces while dragging.

    Forms

  • EmptyState

    Centred empty state with an optional icon, a short explanation and one action.

    Feedback

  • CheckboxVariants

    Four decorative checkbox styles: tick pop, gradient glow, morph and pulse.

    Forms

  • LoadingSpinner

    Border spinner in three sizes that takes its colour from the primary token.

    Feedback

  • PriceBreakdown

    Read-only price card that adds GST to a base price in rupees.

    Cards

  • Pagination

    Composable pagination with labelled previous and next links and a current page marker.

    Navigation

  • CustomCursor

    Crosshair cursor that eases after the pointer and grows over marked targets.

    Interaction

  • Preloader

    Full-screen intro that counts to 100 while the name rises, then wipes upward.

    Loaders

  • SiteHeader

    Fixed portfolio header with rolling link text and a bubble fill on hover.

    Navigation

  • MobileMenu

    Blend-mode mobile header with an animated burger and a full-screen link overlay.

    Navigation

  • ElasticLineDivider

    Section divider whose SVG line bends toward the cursor and springs back.

    Dividers

  • CircleCTA

    Circular link whose outline draws itself around the label on hover.

    Buttons

  • FormulaBlock

    Centred monospace formula on a tinted plate, with a ruled-off spaced caption.

    Display

  • ImageReveal

    Image that unmasks upward on scroll while settling from a 1.4x zoom.

    Media

  • FeaturedProjectCard

    Large portfolio card with a slow image zoom, eyebrow, oversized title and tags.

    Cards

  • ProjectCard

    Portfolio grid card with a rounded image that zooms slowly on hover.

    Cards

  • Marquee

    Infinite GSAP text marquee that clones itself to cover three screen widths.

    Animation

  • ContactSection

    Dark contact panel with a spinning conic border, cursor spotlight and image-filled type.

    Sections

  • TextDisperseLink

    Link whose letters scatter to preset offsets on hover and regroup in sequence.

    Buttons

  • ImageWithFallback

    Image element that swaps in a neutral placeholder graphic when the source fails.

    Media

  • SkeletonCard

    Product card and list row skeletons with a slow sheen, announced as loading.

    Loading

  • TestimonialCard

    Review card with star rating, quoted text and an initial-letter avatar.

    Cards

  • ImagePlaceholder

    Image placeholder that holds an aspect ratio, with a slow sheen and optional label.

    Feedback

  • StickyNavbar

    Shop navbar that frosts on scroll, with icon actions and a mobile drawer.

    Navigation

  • ErrorBoundary

    Class boundary that catches a crash and offers a composed, in-place recovery screen.

    Feedback

  • CalloutBox

    Amber-spined callout with a serif title, labelled symbol list and closing line.

    Callouts

  • StickyNav

    Frosted sticky header with a glowing brand dot, text links and a theme button.

    Navigation

  • useThemeRipple

    Hook that switches light and dark themes behind a circular wipe from the click.

    Hooks

  • ShinyBadge

    Pill badge with a spark glyph and a light that sweeps across its text.

    Badges

  • BorderBeamButton

    Button ringed by a travelling beam, spinning conic or sweeping glints, in six fills.

    Buttons

  • TypingHero

    Serif hero whose subtitle types itself out before the call-to-action buttons fade in.

    SectionsHero

  • CardGrid

    One card grid with four eyebrow styles: label, number, serif letter or tag.

    Cards

  • DepthText

    Extruded 3D type made of stacked layers that tilts to follow the pointer.

    Display

  • Magnet

    Wrapper that pulls its child toward a nearby pointer, then springs back.

    Interaction

  • GlareHover

    Soft-light glare that follows the pointer across any surface it wraps.

    Interaction

  • PointerGlowCard

    Card whose border and surface light up under the pointer or keyboard focus.

    Cards

  • Checklist

    Checklist of hairline cards, each led by a solid round emerald marker.

    Lists

  • ShinyGradientText

    Text filled with a narrow metal sweep, legible on both light and dark grounds.

    Display

  • BlurInReveal

    Scroll reveal that lifts content into place out of a 7px blur.

    Animation

  • SectionProgressRail

    Fixed rail of section dots where the current dot stretches into a pill.

    Navigation

  • EdgeFadeMarquee

    CSS marquee with faded edges that pauses on hover and stops for reduced motion.

    Animation

  • ParallaxProductStage

    Lit product shelf where three items settle in and drift at different depths.

    SectionsHero

  • StaggerBlurText

    Paragraph that resolves word by word out of a soft blur.

    Animation

  • JewelryCursor

    Gold dot cursor with a lagging ring that swells over links and buttons.

    Interaction

  • ScrollUnfurlPreloader

    Parchment preloader where brass rods roll apart to unfurl the brand, then lift away.

    Loaders

  • CanvasPetalField

    Canvas of marigold and jasmine petals drifting down, nudged by the cursor.

    Animation

  • FilmGrainOverlay

    Faint animated film grain drawn on a low-resolution canvas and blended over surfaces.

    Overlays

  • ScratchFoilReveal

    Gold foil you scratch away with the pointer, clearing itself past a threshold.

    Interaction

  • ScrollReveal

    Wrapper that fades children up, in from a side, or scales them on entry.

    Animation

  • PixelDemorphImage

    Image that resolves from coarse pixel blocks to sharp as it scrolls into view.

    Media

  • ScrollParallaxLayer

    Scroll-scrubbed depth plane that drifts, scales, blurs and fades, with a petal field.

    Animation

  • TillReceiptPrint

    Payment receipt that prints out of a till slot and stamps itself PAID.

    Feedback

  • MagicRings

    WebGL rings that expand in two colours, with optional mouse parallax and click burst.

    AnimationHero

  • ShinyText

    Text with a sweeping gradient shine that renders plain when motion is reduced.

    Animation

  • CircularText

    Letters set around a spinning ring that speeds up, slows or pauses on hover.

    Display

  • PinchedButton

    Asymmetric brick button with a pinched corner radius, hover lift and arrow nudge.

    Buttons

  • MultiStepLoader

    Full-screen step loader with ticked stages, a shining active label and WebGL rings.

    Loaders

  • Highlighter

    Hand-drawn highlight, underline, box or circle marks that draw on mount or scroll.

    Animation

  • TextType

    Typewriter that types, pauses and deletes a list of lines with a blinking cursor.

    Animation

  • CelebrationOverlay

    Blurred success dialog with three timed confetti bursts and a card that pops in.

    Feedback

  • SiteFooter

    Wrapping site footer with a haloed brand dot, mono headings and a legal row.

    Layout

  • DamaskTileBackdrop

    Fixed ornamental tile lattice behind the page, plus a matching tiled glass pane.

    Layout

  • MorphDialog

    Modal that grows out of its trigger and traps focus until it closes.

    Dialogs

  • ParticleQrCode

    Scannable QR codes that assemble from grains and cycle, with a pause button.

    Display

  • TimedTabs

    Self-advancing tabs whose progress bar is the timer, with a sliding paper tab.

    Navigation

  • DockingCard

    Card whose picture flies into a header dock as its detail panel rises.

    Cards

  • SidewaysScroll

    Row of cards that pins in place and pans sideways as the page scrolls.

    Sections

  • AutoplayCarousel

    Photo carousel that never crops, with a progress-bar timer and a pause button.

    Media

  • ScrollFlipDeck

    Pinned deck of images that turn away one at a time as you scroll.

    Sections

  • SketchHighlight

    Seeded marker wash, underline or strike whose ink boils between three takes.

    Animation

  • SketchArrow

    Hand-drawn arrow between two elements that re-measures when either one moves.

    Callouts

  • PixelAvatar

    Seeded 8x8 pixel avatars: random creatures or ghosts, cats and bears that hop.

    Display