# WebberUI > React component tools for vibe coders and web developers, shipped as a WebberUI registry: the source installs straight into your project, with no runtime dependency. 533 components (399 free) and 104 full-page templates. Build websites with animated components, interactive previews and editable page templates. Documentation is available in English and Traditional Chinese. 繁體中文版索引：https://webberui.com/llms-zh-tw.txt ## Installing Free components need no credentials: `npx webberui@latest add https://webberui.com/r/.en.json` Pro components need a licence; setup is documented at https://webberui.com/docs/pro-setup Machine-readable index of every item, with its free/pro tier: https://webberui.com/r/registry.en.json MCP server (lets an AI agent install components directly): npm package @webberui/mcp ## Key pages - [Component catalogue](https://webberui.com/components): searchable, filterable by category and Free/Pro - [Templates](https://webberui.com/templates): 104 full-page templates - [Quick start](https://webberui.com/docs) - [Installing Pro components](https://webberui.com/docs/pro-setup) - [Section composer](https://webberui.com/composer): swap sections within one template, install the whole page in one command - [Theme Studio](https://webberui.com/theme): exports CSS variables / Tailwind v4 @theme / Figma tokens - [Pricing](https://webberui.com/pricing) - [Licence](https://webberui.com/license): source-available; commercial use and modification allowed, redistribution of the source is not ## Components (by category) ### Text animation Category page: https://webberui.com/components/category/text-animation - [Flip Words](https://webberui.com/docs/flip-words) (free): Automatically cycles through a set of words, with the container width adapting to the text. - [Split Text Reveal](https://webberui.com/docs/split-text) (free): Per-character or per-word staggered text reveal, with optional blur and viewport triggering. - [Scroll Text Highlight](https://webberui.com/docs/scroll-text-highlight) (free): Reading highlight that turns text from pale grey to solid foreground, character by character (or word by word), as you scroll. - [Rolling Text](https://webberui.com/docs/rolling-text) (free): Characters roll and flip vertically on hover, with per-character or per-word splitting, direction control, and controlled mode. - [Rolling Number](https://webberui.com/docs/rolling-number) (free): Odometer-style number wheels — when value changes, each digit springs vertically to its new value; added digits fade in and removed digits collapse. - [Scramble Text](https://webberui.com/docs/scramble-text) (free): Decryption-style text animation — characters churn through random glyphs and lock in from left to right, triggered by viewport or hover. - [Text Morph](https://webberui.com/docs/text-morph) (free): A smooth morphing transition between two strings — shared characters slide to their new positions while the rest fade out and in, with auto-rotation and controlled switching. - [Velocity Marquee](https://webberui.com/docs/velocity-marquee) (free): An infinitely looping marquee that speeds up with scroll velocity and briefly reverses when you scroll back quickly. - [Gradient Shine Text](https://webberui.com/docs/gradient-shine-text) (free): A flowing gradient text with a periodic shine sweep on top — pure CSS keyframes, adapting to light and dark themes. - [Handwriting Text](https://webberui.com/docs/handwriting-text) (pro): Handwriting animation drawn stroke by stroke with SVG pathLength, with a built-in single-line font and support for custom signature paths. - [3D Rolling Text](https://webberui.com/docs/3d-rolling-text) (pro): Scroll-driven 3D cylinder of text — lines are mounted on an invisible drum and rotate into view one after another as you scroll. - [Typewriter Text](https://webberui.com/docs/typewriter-text) (free): The classic typewriter effect — text typed out character by character with a blinking cursor, with looping and deletion across multiple strings. - [Text Hover Gradient](https://webberui.com/docs/text-hover-gradient) (free): Outlined text filled by a gradient on hover (x.ai style), with a spotlight that follows the cursor to reveal color. - [Text Pressure](https://webberui.com/docs/text-pressure) (free): Characters scale and deform in real time inside the cursor's pressure field (variable fonts) — the closer the cursor, the wider, heavier, and more slanted they get. - [Glitch Text](https://webberui.com/docs/glitch-text) (free): Glitch text effect with RGB channel separation and jitter, supporting continuous playback and hover triggering. - [Text Highlighter](https://webberui.com/docs/text-highlighter) (free): Hand-drawn highlighter marks swept across text, with underline, strike-through, box, and circle variants. - [Circular Text](https://webberui.com/docs/circular-text) (free): Characters arranged around a circle that spins continuously, with hover speed changes, direction reversal, and reduced-motion support. - [Curved Text Loop](https://webberui.com/docs/curved-text-loop) (free): Text flowing seamlessly along a custom curve, which the pointer can drag and flick with momentum. - [Falling Text](https://webberui.com/docs/falling-text) (free): Text animation where characters drop under gravity and bounce into place, with configurable gravity, bounce, and trigger. - [Video Text](https://webberui.com/docs/video-text) (free): Text whose glyphs are filled with a playing background video, falling back to a self-contained animated gradient when no video is given. - [Split Flap Board](https://webberui.com/docs/split-flap-board) (pro): Vestaboard-style mechanical split-flap character switching, flipping cell by cell into place, with rotation across multiple messages. - [True Focus Text](https://webberui.com/docs/true-focus-text) (free): Words cycle in and out of focus between blur and sharpness, with an animated frame marking the focal point. - [Line Shadow Text](https://webberui.com/docs/line-shadow-text) (free): Dimensional heading text with a moving linear shadow. - [Ascii Art](https://webberui.com/docs/ascii-art) (free): Turn an image into animatable ASCII or pixel art. - [Sparkles Text](https://webberui.com/docs/sparkles-text) (free): Twinkling sparkles continuously generated around the text, adding a lively touch of magic. - [Wave Text](https://webberui.com/docs/wave-text) (free): Each grapheme rides a sine wave up and down, with adjustable amplitude, wavelength, and speed, and a hover speed boost - [Decrypt Text](https://webberui.com/docs/decrypt-text) (free): Scrambled characters flicker rapidly and lock into the real text one by one — a hacker-style decryption effect. - [Neon Flicker Text](https://webberui.com/docs/neon-flicker-text) (free): Neon-tube text with random micro-flicker and layered glow, in any color you choose. - [Blur Reveal Text](https://webberui.com/docs/blur-reveal-text) (free): A whole passage comes into focus line by line from a heavy blur on entering the viewport — made for narrative paragraphs. - [Karaoke Text](https://webberui.com/docs/karaoke-text) (free): Lyric lines colored character by character along a timeline, with the current line scaled up in focus. - [Logo Reveal Set](https://webberui.com/docs/logo-reveal-set) (free): Five common logo entrances (bloom, stroke-then-fill, shine sweep, lockup slide-out and wordmark morph) triggered on mount, on entering the viewport or manually. - [Strike Reframe Text](https://webberui.com/docs/strike-reframe-text) (free): A strike-and-reframe text React component: a sentence is struck through with a hand-drawn line, then a new sentence rises from below to replace it. Chainable for objection-to-answer and old-claim-to-new-claim reframes. - [Liquid Reveal](https://webberui.com/docs/liquid-reveal) (pro): Refracts children through an SVG displacement filter like a liquid droplet, then bursts the surface to reveal them crisply on click or in-view. - [Keyword Converge](https://webberui.com/docs/keyword-converge) (free): A React text animation where a scattered keyword cloud drifts toward the center, merges and resolves into a single concluding sentence — for distilling scattered ideas into one message. ### Backgrounds Category page: https://webberui.com/components/category/background - [Aurora Background](https://webberui.com/docs/aurora-background) (free): A flowing aurora background — large blurred color blobs drift slowly via transform, with optional grain overlay and mouse tracking. - [Gradient Mesh](https://webberui.com/docs/gradient-mesh) (free): A mesh gradient background — five soft radial-gradient color points drift slowly via transform, weaving into a flowing mesh. - [Particle Field](https://webberui.com/docs/particle-field) (free): An interactive particle field — particles drift freely and link up when they get close, with a cursor that repels or attracts them, drawn on canvas 2D. - [Beams Background](https://webberui.com/docs/beams-background) (free): A canvas background of beams streaming continuously along a diagonal path, with palette, angle, glow, and cursor-driven acceleration. - [Grain Overlay](https://webberui.com/docs/grain-overlay) (free): A canvas grain overlay that flickers frame by frame, in fine / coarse / vintage textures, adding film-like noise to gradients and images. - [Interactive Dot Grid](https://webberui.com/docs/interactive-dot-grid) (free): An interactive dot grid background — a full-bleed regular grid where dots near the cursor scale up and get pushed away, then ease smoothly back. - [Shader Waves](https://webberui.com/docs/shader-waves) (free): A fluid wave background — a per-pixel multi-layer sine wave field (a software shader) computes a flowing gradient, with optional mouse tracking, grain, and several palettes. - [Spotlight Background](https://webberui.com/docs/spotlight-background) (free): A sweeping spotlight background with three built-in looks — sweeping light cones, a rotating radar, and a static stage beam — that can track the cursor. - [Meteors](https://webberui.com/docs/meteors) (free): A background meteor / meteor shower effect, with glowing trails and twinkling stars drawn on canvas 2D. - [Globe](https://webberui.com/docs/globe) (free): A self-rotating, interactive WebGL-style globe (GitHub-style), simulated with a canvas 2D point cloud, arcs, and an atmospheric glow. - [World Map](https://webberui.com/docs/world-map) (free): A dotted world map / connection diagram with procedural animation, drawn on canvas 2D, with intercontinental arcs and endpoint pulses. - [Vortex Background](https://webberui.com/docs/vortex-background) (free): A swirling vortex wave background where particle streamlines converge on the center — a good fit for CTA sections. - [Retro Grid](https://webberui.com/docs/retro-grid) (free): A retro grid background scrolling in synthwave-style perspective. - [Lamp Effect](https://webberui.com/docs/lamp-effect) (free): A Linear-style section header lit by a focused light cone, with the cone and its light bar unfolding on reveal. - [Sparkles Bg](https://webberui.com/docs/sparkles-bg) (free): A twinkling starfield background with configurable density and color. - [Interactive Box Grid](https://webberui.com/docs/interactive-box-grid) (free): A full-bleed box grid background that highlights cell by cell on hover, leaving a fading afterglow behind the cursor. - [Lightning](https://webberui.com/docs/lightning) (free): Procedurally generated branching lightning with a glow, drawn live as a storm background by a canvas 2D fractal algorithm. - [Starfield Galaxy](https://webberui.com/docs/starfield-galaxy) (free): A parallax starfield galaxy background with cursor interaction, drawing layered stars and nebula bands on canvas 2D. - [Hyperspeed](https://webberui.com/docs/hyperspeed) (free): A hyperspace warp-travel tunnel animation, with star streaks jetting out from the vanishing point and leaving afterimage trails. - [Liquid Metal](https://webberui.com/docs/liquid-metal) (free): A reflective liquid chrome / flowing metal surface drawn live on a 2D canvas, with specular striping and optional mouse ripples. - [Dither Shader](https://webberui.com/docs/dither-shader) (free): An animated background in the retro aesthetic of ordered dithering noise. - [Ballpit](https://webberui.com/docs/ballpit) (free): An interactive physics ballpit — gravity, walls, and ball-to-ball collisions all simulated live on canvas 2D. - [Light Rays](https://webberui.com/docs/light-rays) (free): Volumetric light rays pouring in from above or the side, swaying and breathing as if in a light breeze. - [Iridescence](https://webberui.com/docs/iridescence) (free): An iridescent shifting-wave shader background — a canvas 2D approximation of an iridescence shader, with optional mouse response. - [Warp Background](https://webberui.com/docs/warp-background) (free): A card-sized warped spacetime grid background, with beams from all four sides streaming into the depths of the tunnel. - [Matrix Letter Glitch](https://webberui.com/docs/matrix-letter-glitch) (free): A Matrix-style falling character glitch stream — a curtain of bright glyphs on a dark base, drawn purely in Canvas 2D. - [Metaballs](https://webberui.com/docs/metaballs) (free): A smoothly merging liquid blob (metaballs / ferrofluid) background. - [Topographic Lines Background](https://webberui.com/docs/topographic-lines-background) (free): A decorative background of SVG topographic contour lines slowly drifting and morphing. - [Constellation Background](https://webberui.com/docs/constellation-background) (free): Canvas particles drifting with links between neighbors, converging toward the cursor as it comes close. - [Floating Orbs Background](https://webberui.com/docs/floating-orbs-background) (free): Large blurred gradient orbs floating slowly past each other for a soft ambient background. - [Circuit Lines Background](https://webberui.com/docs/circuit-lines-background) (pro): Light pulses flowing along a circuit-board trace diagram — a decorative background with a technical feel. - [Falling Petals](https://webberui.com/docs/falling-petals) (free): Seasonal falling background: sakura petal, maple leaf and snowflake presets, per-particle tumbling and sway with wind turbulence, adjustable density and wind, optionally accelerated by scroll. - [Halftone Background](https://webberui.com/docs/halftone-background) (free): Halftone background React component: a continuous halftone dot background whose density shifts with scroll progress and whose dots swell near the cursor, drawn with CSS gradients. - [Floating Card Field](https://webberui.com/docs/floating-card-field) (pro): A field of cards drifting at different depths in 3D space: pointer parallax varies by depth, scrolling pulls the whole field back and scatters it, and distant cards blur for depth of field. - [Silk Ribbons Background](https://webberui.com/docs/silk-ribbons-background) (pro): A silk ribbon background drawn with Canvas 2D: several bezier ribbons sway slowly over a dark ground, with gradients across their width simulating a glossy sheen; no WebGL. ### Cards & grids Category page: https://webberui.com/components/category/card - [Tilt Card](https://webberui.com/docs/tilt-card) (free): A 3D perspective tilt card — the card tilts with the cursor, a glare sweeps across its surface, it springs back on leave, and content can float up with translateZ. - [Hover Expand Gallery](https://webberui.com/docs/hover-expand-gallery) (free): A horizontally squeezing expand gallery — panels change their share of the space on hover or keyboard focus, while the rest collapse and dim. - [Bento Grid](https://webberui.com/docs/bento-grid) (free): A bento-box grid layout — cards reveal with a stagger, and on hover the focused card lifts while the rest dim slightly. - [Image Trail Card](https://webberui.com/docs/image-trail-card) (pro): An interactive card that leaves a trail of fading image afterimages along the cursor's path, with in-place fade and drift variants. - [Direction-aware Card](https://webberui.com/docs/direction-aware-card) (free): A hover card whose overlay slides in from the side the cursor entered, with cover and push variants. - [Morph Expand Card](https://webberui.com/docs/morph-expand-card) (free): Click a card to morph it seamlessly into a centered detail panel via shared layout; only one card in a group is expanded at a time. - [Card Deck](https://webberui.com/docs/card-deck) (free): A draggable stacked card deck — flick a card out in any of four directions, the next one fills in automatically, with infinite loop or draw-until-empty modes. - [Spotlight Card](https://webberui.com/docs/spotlight-card) (free): A cursor spotlight card — a border glow and a fainter background bloom track the cursor together and fade out on leave, with each card in a row staying independent. - [Infinite Drag Canvas](https://webberui.com/docs/infinite-drag-canvas) (pro): An infinitely pannable portfolio canvas that scatters cards across a boundless space, with drag (including momentum), keyboard panning, and one-click recentering. - [Flip Reveal Card](https://webberui.com/docs/flip-reveal-card) (free): A 3D flip card that rotates around the X or Y axis to reveal its front and back, supporting hover, click, and fully controlled use. - [Evervault Card](https://webberui.com/docs/evervault-card) (free): A card that reveals encrypted noise and a gradient on hover. - [Focus Cards](https://webberui.com/docs/focus-cards) (free): A card grid effect where hovering focuses one card while the rest blur and fade out. - [Hover Highlight Cards](https://webberui.com/docs/hover-highlight-cards) (free): A highlight background that slides to the card under the cursor on hover. - [Border Beam](https://webberui.com/docs/border-beam) (free): A glowing beam that travels around a container's border, used to highlight a card, a pricing plan, or the currently selected item. - [Electric Border](https://webberui.com/docs/electric-border) (free): A jittering electric-current border that glows, distorting its stroke with SVG noise displacement so the energy bleeds outward from the outline. - [Neon Gradient Card](https://webberui.com/docs/neon-gradient-card) (free): A card with a glowing neon gradient border, its edge flowing with a rotating conic gradient that bleeds outward as a halo. - [Card Swap](https://webberui.com/docs/card-swap) (free): Cards swap positions and stacking order with layout animation, the front card arcing around to the back to form a 3D deck that breathes. - [Pixel Reveal Card](https://webberui.com/docs/pixel-reveal-card) (free): A card that reveals its content through a pixel dissolve - [Lanyard Badge](https://webberui.com/docs/lanyard-badge) (pro): An ID badge on a lanyard that swings in 3D with momentum — drag it, let go, and it settles naturally like a pendulum. - [Tweet Card](https://webberui.com/docs/tweet-card) (free): A card displaying a tweet (avatar / handle / content) with a reveal animation and interactive like and repost actions. - [Glass Surface](https://webberui.com/docs/glass-surface) (free): A glassmorphic surface with live distortion, refraction, specular highlights, and pointer tilt. - [Masonry Grid](https://webberui.com/docs/masonry-grid) (free): A responsive masonry layout with animated reflow, cards gliding into place as the column count and the data change. - [Chroma Grid](https://webberui.com/docs/chroma-grid) (free): A grayscale card grid that regains color locally under a spotlight as the cursor passes over it. - [3d Pin](https://webberui.com/docs/3d-pin) (free): A gradient 3D product pin that unfolds on hover — the card leans back to expose a floating capsule label and a radar-ripple beam. - [Orbiting Circles](https://webberui.com/docs/orbiting-circles) (free): A ring of icons or avatars circling a round orbit, stackable into multiple orbits with reverse directions and different speeds. - [Icon Cloud](https://webberui.com/docs/icon-cloud) (free): An interactive 3D tag / icon sphere cloud that spins on its own and can be dragged to rotate. - [3d Image Ring](https://webberui.com/docs/3d-image-ring) (pro): A 3D image gallery projected as a ring / hemisphere that can be dragged to rotate, auto-rotates, and keeps its momentum. - [Model Viewer](https://webberui.com/docs/model-viewer) (pro): A three.js-style 3D model orbit viewer - [3d Marquee](https://webberui.com/docs/3d-marquee) (pro): A tilted 3D grid marquee wall, with multiple columns scrolling infinitely in alternating directions. - [Holographic Card](https://webberui.com/docs/holographic-card) (pro): A rainbow holographic-sheen card that shifts with the cursor angle, with 3D tilt. - [Ticket Stub Card](https://webberui.com/docs/ticket-stub-card) (free): A ticket card with a perforated dotted line and side notches; click to tear off the stub. - [Peel Sticker Card](https://webberui.com/docs/peel-sticker-card) (pro): A corner peels up like a sticker on hover to expose what is underneath, and can be dragged off entirely. - [Polaroid Scatter Grid](https://webberui.com/docs/polaroid-scatter-grid) (free): A wall of Polaroid photos scattered at random angles that straighten and lift on hover. - [Paper Tear Reveal](https://webberui.com/docs/paper-tear-reveal) (pro): Drag to tear the paper open and expose the content beneath, with a jagged tear edge and paper confetti. - [Postage Stamp Frame](https://webberui.com/docs/postage-stamp-frame) (free): A postage-stamp frame React component whose scalloped perforations are computed with a pure CSS clip-path; wraps an image or any content, with a caption row and an optional SVG postmark overlay that fades in on hover. - [Foil Surface](https://webberui.com/docs/foil-surface) (pro): A foil finish that wraps any content: five gradient layers with blend modes shift their sheen with scroll progress and pointer position, without any tilt. - [Pixel UI Kit](https://webberui.com/docs/pixel-ui-kit) (free): A pixel-art UI trio — a stepped-border card, a pixel button that sinks on press, and a block-by-block progress bar, all drawn with box-shadow and CSS. ### Overlays & feedback Category page: https://webberui.com/components/category/overlay - [Morphing Dialog](https://webberui.com/docs/morphing-dialog) (free): Click a card and it scales and morphs seamlessly into a centered dialog with a shared-element animation, then shrinks back to the original card position on close. - [Drawer](https://webberui.com/docs/drawer) (free): A panel that slides in from the edge of the screen, supporting all four directions, click-the-overlay to close, and single-axis drag to swipe it away. - [Dynamic Island Toast](https://webberui.com/docs/dynamic-island-toast) (pro): An iOS Dynamic Island-style notification — an idle pill expands fluidly into a notification card, multiple notifications stack behind it with their edges peeking out, and a loading state can update in place to success. - [Toast Stack](https://webberui.com/docs/toast-stack) (free): sonner-style collapsing toast stack — new toasts slide in from the edge, collapse into a pile of cards when not hovered, and expand into the full list while pausing the auto-dismiss countdown when the pointer enters the viewport. - [Cursor Tooltip](https://webberui.com/docs/cursor-tooltip) (free): An elastic tooltip that follows the cursor, tracking its coordinates with a spring and flipping sides automatically near the edges, with keyboard focus anchoring. - [Preloader Collection](https://webberui.com/docs/preloader-collection) (pro): Three preloader overlay animations — text reveal, staircase slide, and pixel dissolve — each revealing the content with its own signature exit once loading finishes. - [Page Transition](https://webberui.com/docs/page-transition) (pro): A route transition container combining View Transitions concepts with overlay reveals, playing one of four transitions — fade, slide, cover, or wipe — whenever the route changes. - [Confetti Feedback](https://webberui.com/docs/confetti-feedback) (free): A hand-built particle confetti celebration — bursting from an origin point, each piece with its own initial velocity, gravity, rotation, and drift, updated on rAF and reclaimed once it lands. - [Smooth Follow Cursor](https://webberui.com/docs/smooth-follow-cursor) (free): A spring-physics custom cursor with a deforming blob follower. - [Splash Cursor](https://webberui.com/docs/splash-cursor) (free): Cursor movement produces fluid splashes and ripples, approximating a fluid simulation with canvas 2D. - [Click Spark](https://webberui.com/docs/click-spark) (free): A feedback effect that bursts sparks / particles at the click point. - [Target Cursor](https://webberui.com/docs/target-cursor) (free): A four-corner reticle cursor that locks onto and frames target elements, spinning while idle and opening out to frame the bounds on a hit. - [Multi Step Loader](https://webberui.com/docs/multi-step-loader) (free): A checklist-style loading indicator that ticks off steps one by one for long tasks. - [Stepper](https://webberui.com/docs/stepper) (free): A standalone multi-step progress stepper indicator with checkmark drawing, connector fill, and an active pulse. - [Circular Progress](https://webberui.com/docs/circular-progress) (free): An animated percentage ring progress / gauge, supporting gradients, gauge arcs, and a counting reveal. - [Accordion](https://webberui.com/docs/accordion) (free): An animated accordion / FAQ expander with a bouncy transition, supporting single-open and multi-open modes. - [Link Preview](https://webberui.com/docs/link-preview) (free): Hovering an anchor floats up a live website preview card that tilts as it follows the cursor, drawn purely with canvas 2D and needing no external images. - [Custom Scrollbar](https://webberui.com/docs/custom-scrollbar) (free): A customizable animated scrollbar, with the thumb tracking the scroll on a spring, draggable, and click-the-track to jump. - [Undo Snackbar](https://webberui.com/docs/undo-snackbar) (free): An undo prompt bar with a countdown progress ring that confirms the action automatically when time runs out. - [Swipe Action List](https://webberui.com/docs/swipe-action-list) (pro): List rows swipe left or right to expose archive/delete actions, executing directly once the threshold is crossed. - [Emoji Burst Reaction](https://webberui.com/docs/emoji-burst-reaction) (free): Clicking a reaction button bursts a stream of emoji particles that float upward, doubling on rapid clicks. - [Pull To Refresh](https://webberui.com/docs/pull-to-refresh) (free): A mobile pull-to-refresh container for React: damped drag with a threshold, an arrow that rotates into a spinner, onRefresh returning a Promise, a check on completion, plus a desktop button fallback. - [Cookie Consent Banner](https://webberui.com/docs/cookie-consent-banner) (free): A React cookie consent banner with a preferences dialog: necessary/analytics/marketing category toggles, accept-all and reject-all, a consent-object callback and localStorage persistence — SSR-safe with reduced-motion support. - [Popover](https://webberui.com/docs/popover) (free): An anchored popover opened from a trigger: positioned by side and align with automatic collision flipping, it fades, scales and slides in from its side, with full focus handling and outside-click dismissal. - [Tooltip](https://webberui.com/docs/tooltip) (free): An anchored React tooltip that opens on hover or keyboard focus after a delay, switches instantly while moving within a group, fades and scales in, flips at the viewport edge, and carries an arrow pointing at its trigger. - [Context Menu](https://webberui.com/docs/context-menu) (free): A right-click menu that opens at the pointer, with delayed submenus, checkbox and radio items and shortcut hints, automatic edge flipping, and long-press support on touch. - [Confirm Dialog](https://webberui.com/docs/confirm-dialog) (free): A confirmation dialog that demands a response: the overlay fades in and the panel scales up, with focus and scroll locking, and destructive actions can require a press-and-hold fill to confirm. ### App shells & panels Category page: https://webberui.com/components/category/app-shell - [Tri-Pane Workspace Shell](https://webberui.com/docs/tri-pane-workspace-shell) (pro): A nav + list + detail master-detail application shell with built-in collapsing, an overlay mode, and a page-by-page responsive state machine, its transitions choreographed as a spring sequence. - [Docked Inspector Rail](https://webberui.com/docs/docked-inspector-rail) (free): A contextual inspector panel docked to the right that expands by pushing, so the main content reflows with it; sections collapse and the width can be dragged. - [Anchored Settings Shell](https://webberui.com/docs/anchored-settings-shell) (free): An anchored settings-page frame — scroll-spy navigation on the left, two-column settings sections on the right, an indicator that glides along with the scroll, and a save bar that springs in when there are unsaved changes. - [Setup Checklist Rail](https://webberui.com/docs/setup-checklist-rail) (free): An onboarding checklist pinned to the side of the app — completed items check off and collapse, the progress ring at the top counts up, and once everything is done it shrinks into an expandable floating badge. - [Notification Triage Panel](https://webberui.com/docs/notification-triage-panel) (free): A notification center panel grouped by date or source, with unread/all tabs and collapsible groups; on a bulk clear the items sweep out in sequence and the group height springs closed behind them. - [Miller Column Browser](https://webberui.com/docs/miller-column-browser) (pro): A Finder-style Miller-column hierarchy browser: every level you descend springs a new column in from the right, the whole row pans smoothly once it overflows, and breadcrumbs highlight the current path in step. - [Elastic Split Workspace](https://webberui.com/docs/elastic-split-workspace) (pro): A multi-column drag-to-split panel workspace whose dividers have spring feedback; panels collapse to a thin strip in one click and the neighbouring panels reflow elastically. - [Zen Mode Shell](https://webberui.com/docs/zen-mode-shell) (free): A focus-mode shell: one click and the sidebar, top bar, and auxiliary panel fade out and slide away in timeline order while the main content eases back to center and scales up; exiting reverses the choreography and restores the whole shell. - [Slide Over Panel](https://webberui.com/docs/slide-over-panel) (free): A non-modal narrow floating panel that can be dragged and magnetically snapped to either side, and flicked away to collapse into an edge handle — springs tracking the pointer throughout. - [Control Center Panel](https://webberui.com/docs/control-center-panel) (free): A grid of glass control modules; long-press any tile and it springs open in place into a fine-grained control card (slider, segmented toggle) while the background blurs and recedes, springing back on release. - [Now Playing Sheet](https://webberui.com/docs/now-playing-sheet) (free): A persistent mini player bar at the bottom; tap it and the artwork scales up as a shared element while the whole layer springs open into a full-screen now-playing page, dismissed by a downward drag whose gesture velocity decides the outcome. - [Large Title Collapse Header](https://webberui.com/docs/large-title-collapse-header) (free): An iOS-style large-title header that shrinks into a centered small title as a shared element on scroll, pulls out a search bar with a rubber-band bounce, and sticks section headings one after another below the header. - [Ornament Toolbar](https://webberui.com/docs/ornament-toolbar) (free): A visionOS-style ornament toolbar floating just outside the edge of a content panel: it shrinks to a pill while scrolling and expands to full controls when you stop, with Z-axis lift and a follow-along parallax. - [Inbox Split View](https://webberui.com/docs/inbox-split-view) (pro): A mail inbox with a list plus a reading pane, a sliding selection highlight, and unread badges. - [File Manager Grid](https://webberui.com/docs/file-manager-grid) (free): A file/folder grid with marquee multi-select, a right-click menu, and view switching. - [Calendar Agenda View](https://webberui.com/docs/calendar-agenda-view) (pro): A calendar panel where a month grid and the day's agenda move together, with colored event tags. - [Shortcut Cheatsheet](https://webberui.com/docs/shortcut-cheatsheet) (free): A keyboard-shortcut cheatsheet overlay summoned with ?, with grouped lists, kbd keycaps, and search filtering. - [Palette Generator](https://webberui.com/docs/palette-generator) (free): Take one primary color and derive a harmonious palette from it, with flip-card swatches, one-click copying, and lock-and-reroll. - [Gradient Builder](https://webberui.com/docs/gradient-builder) (pro): Edit gradients by dragging color stops, with an angle dial, one-click CSS copying, and a preset library. - [Clip Timeline](https://webberui.com/docs/clip-timeline) (pro): A multi-track editing timeline: drag and trim clips with grid snapping, a draggable playhead with playback, a ruler that re-ticks as you zoom, comment pins and audio waveforms. ### Data display Category page: https://webberui.com/components/category/data-display - [Animated Stats](https://webberui.com/docs/animated-stats) (free): A group of statistics that count from 0 to their target values when they enter the viewport, with items staggering in and sliding up. - [Avatar Stack](https://webberui.com/docs/avatar-stack) (free): A row of overlapping circular avatars; on hover or focus the avatar lifts and scales up, its neighbours move aside, and a name tooltip floats out. - [Testimonial Wall](https://webberui.com/docs/testimonial-wall) (free): A three-column testimonial wall whose columns scroll in alternating directions, in either an auto infinite-scroll or a scroll-parallax style. - [Pricing Table](https://webberui.com/docs/pricing-table) (free): A pricing table with a monthly/yearly segmented switch; prices spring-tween on switch, the selected pill slides, the featured plan scales up and is highlighted, and yearly shows a discount badge. - [Animated Charts](https://webberui.com/docs/animated-charts) (free): Data-driven SVG charts that grow as they reveal — bars grow up from the baseline, lines and areas draw themselves along their stroke — triggered when they enter the viewport. - [Activity Feed](https://webberui.com/docs/activity-feed) (free): A live list that inserts items automatically — new events push in from the top and existing rows reflow smoothly with FLIP — with timeline and relative-time support. - [Animated Terminal](https://webberui.com/docs/animated-terminal) (free): A command-line terminal that simulates typing line by line, with per-character command entry, output reveals, and looping playback. - [Code Block](https://webberui.com/docs/code-block) (free): A syntax-highlighted code block with a copy button, a built-in lightweight tokenizer, and a line-by-line reveal animation. - [Code Comparison](https://webberui.com/docs/code-comparison) (free): A side-by-side code diff that reveals additions and deletions line by line, with automatic syntax coloring. - [File Tree](https://webberui.com/docs/file-tree) (free): A tree view of a folder/file structure, with expand and collapse animations, depth guide lines, and icons chosen by file extension. - [Animated Beam](https://webberui.com/docs/animated-beam) (free): A flowing beam between nodes, well suited to integration diagrams and data-flow animations. - [Tracing Beam](https://webberui.com/docs/tracing-beam) (free): A beam that advances along an SVG path with scrolling — well suited to long-form articles, timelines, and step-by-step walkthroughs. - [KPI Sparkline Cards](https://webberui.com/docs/kpi-sparkline-cards) (free): Metric cards with a value that rolls in, an inline sparkline, and a rise/fall badge. - [Org Chart Tree](https://webberui.com/docs/org-chart-tree) (pro): A collapsible org tree whose SVG connectors reflow along with the node animation. - [Leaderboard Podium](https://webberui.com/docs/leaderboard-podium) (free): A leaderboard whose top-three podium columns rise up while the remaining ranks reveal as a list. - [JSON Tree Viewer](https://webberui.com/docs/json-tree-viewer) (free): A collapsible JSON tree with type-based coloring, path copying, and an expand animation. - [Weather Widget](https://webberui.com/docs/weather-widget) (free): An animated weather card with sun-glow, raindrop, drifting-cloud, and snowflake scenes, day/night colors, and a week forecast - [Sortable Data Table](https://webberui.com/docs/sortable-data-table) (pro): General-purpose data table with FLIP row reordering on header sort, a sticky header, expandable row details, checkbox selection with a bulk-action bar, and an empty state - [Status Badge](https://webberui.com/docs/status-badge) (free): A badge with a count that rolls digit by digit, a removable mode that shrinks out while neighbours slide into place, and a pulsing variant for live states. - [Avatar](https://webberui.com/docs/avatar) (free): An avatar that shows initials until the image loads and then crossfades, with a breathing presence dot, a hover ring that expands, five sizes and two shapes. - [Keycap Shortcut](https://webberui.com/docs/keycap-shortcut) (free): A React component for keycap-styled shortcut labels — combine multiple keys, mod shows ⌘ or Ctrl per platform, and with listening enabled each keycap presses down and springs back when the user actually hits the matching key, with a ring flash once the whole combo is held. - [Issue Cascade Board](https://webberui.com/docs/issue-cascade-board) (pro): A dark, ambient-glow issue list where cards cascade in, status pills re-layout on change and edges shimmer on hover — built for product launch sections. - [Multi-Source Queue](https://webberui.com/docs/multi-source-queue) (free): A multi-source queue React component where requests from email, phone, forms and walk-ins fly from their source icons into one unified queue along an arc, each keeping a source badge, with multi-select source filtering plus autoplay and pause. ### Layout composition Category page: https://webberui.com/components/category/layout - [Data View Morph](https://webberui.com/docs/data-view-morph) (pro): One dataset across list, table, board, and card layouts — every entry morphs continuously to its new position with a shared-element animation, preserving the user's spatial memory. - [Hero Condense Header](https://webberui.com/docs/hero-condense-header) (pro): As the page scrolls, the hero's title, avatar, and meta migrate one by one into a sticky header via shared-element FLIP, then expand back into place in order when you scroll up. - [Drill Stack Panels](https://webberui.com/docs/drill-stack-panels) (pro): A layered drill-down detail panel system — new panels push in from the right, lower layers recede with parallax and dimming, and breadcrumbs pop back one level at a time with optional URL sync. - [Synced Outline Reader](https://webberui.com/docs/synced-outline-reader) (free): A two-column reading layout of content plus outline, where an indicator spine stretches and slides continuously with the reading position and the current section comes into focus in sync. - [Parallel Text Columns](https://webberui.com/docs/parallel-text-columns) (pro): A side-by-side comparison layout — bilingual or two-version content on facing columns, paired at the sentence level, auto-aligned on scroll with linked hover highlighting. - [Archive Index](https://webberui.com/docs/archive-index) (pro): A studio-archive-style full-page index table — multiple sortable columns that reorder with FLIP, and rows that expand into full-width detail while the rest elastically make way. - [String Pinboard](https://webberui.com/docs/string-pinboard) (pro): A red-string pinboard layout — cards are clues pinned to corkboard, connected by red strings that sag naturally, with slack and droop changing live as you drag. - [Art Direction Morph](https://webberui.com/docs/art-direction-morph) (pro): One set of headline, image, and body copy morphing seamlessly between several magazine-grade layouts with FLIP layout animation, plus a keyboard-driven tab indicator switcher. - [Paste-Up Assembly](https://webberui.com/docs/paste-up-assembly) (pro): Blocks scattered like paste-up cuttings that fly back into their grid slots with FLIP as you scroll in, and scatter apart again when you scroll back. - [Stage Manager Scenes](https://webberui.com/docs/stage-manager-scenes) (pro): A stage-managed layout — the main scene sits center stage while the rest stack as tilted thumbnails in a sidebar, swapping places with shared-element FLIP and a depth-of-field blur when selected. - [Era Strata Layout](https://webberui.com/docs/era-strata-layout) (pro): An accordion layout that stacks eras or phases into horizontal strata — the expanded band opens vertically while the rest compress, and the content inside floats up with parallax. - [View Continuity Grid](https://webberui.com/docs/view-continuity-grid) (pro): A real view transition between a card grid and a detail page — the clicked card's image and title carry across with the View Transitions API, the other cards scatter outward by distance and return in sequence on the way back. - [Expose Overview](https://webberui.com/docs/expose-overview) (pro): One click shrinks every section of the page into a thumbnail overview with FLIP; click a thumbnail to zoom back in, giving the page a spatial navigation map. - [Live Preview Wizard](https://webberui.com/docs/live-preview-wizard) (free): A two-column onboarding layout with a stepped form on the left and a live preview canvas on the right — input morphs into the preview instantly, and step changes slide the form directionally while the preview cross-fades. - [Diagonal Section Divider](https://webberui.com/docs/diagonal-section-divider) (free): Section boundary dividers in several shapes — slant, wave, zigzag, and curve - [Overlap Collage Layout](https://webberui.com/docs/overlap-collage-layout) (free): A magazine collage composition of overlapping elements, each lifting on hover. - [Elastic Rope Divider](https://webberui.com/docs/elastic-rope-divider) (free): A pluckable rubber-band divider that bounces and oscillates when pulled and released. - [Scroll Fade List](https://webberui.com/docs/scroll-fade-list) (free): A React scrolling list whose top and bottom fades grow and shrink with the remaining scroll distance, disappearing entirely at either end, with optional auto-scroll that pauses on hover, focus and touch. - [Paper Layers Scene](https://webberui.com/docs/paper-layers-scene) (free): A scene of 3–5 torn-edge paper layers with soft cut-paper shadows that parallax on scroll or cursor, for storytelling heroes and editorial layouts. ### Form inputs Category page: https://webberui.com/components/category/input - [Smooth Caret Input](https://webberui.com/docs/smooth-caret-input) (free): An input with a spring-physics smooth caret — the custom caret glides to the text position on a spring, in bar, block, or underline shapes. - [OTP Input](https://webberui.com/docs/otp-input) (free): A segmented verification-code input — a single invisible input sits over the visual cells, with paste support, an error shake, and a success ripple that turns the cells green. - [Tag Input](https://webberui.com/docs/tag-input) (free): A tag input — Enter or comma adds a pill chip (trimmed and deduplicated), Backspace on an empty input deletes the last one; chips spring in, and the rest close ranks with FLIP on removal, with no accidental adds mid-IME-composition. - [Vanish Input](https://webberui.com/docs/vanish-input) (free): An input that dissolves its text into pixel particles on submit, in sweep, scatter, or rise styles, with rotating placeholders. - [File Dropzone](https://webberui.com/docs/file-dropzone) (free): A drag-and-drop upload area — the magnetic dashed border leans toward the cursor and marches like a marquee, and the file list carries ring progress indicators. - [Multi-step Form](https://webberui.com/docs/multi-step-form) (pro): A multi-step form container with direction-aware sliding transitions and a switchable progress indicator style. - [Inline Edit Field](https://webberui.com/docs/inline-edit-field) (free): A click-to-edit inline field — the display and edit states swap seamlessly with a layout morph, Enter/blur submits and Esc cancels, with multiline support, controlled and uncontrolled modes, and no accidental submit mid-IME-composition. - [Elastic Slider](https://webberui.com/docs/elastic-slider) (free): A slider whose thumb stretches with spring physics — drag past the boundary and the track extends like a rubber band, then springs back. - [Password Strength Input](https://webberui.com/docs/password-strength-input) (free): A password input with a live strength meter, a rule checklist, and a reveal toggle. - [Dual Range Slider](https://webberui.com/docs/range-dual-slider) (free): Two handles select a numeric range, with live value bubbles — ideal for price filters. - [Mention Textarea](https://webberui.com/docs/mention-textarea) (pro): A textarea where typing @ opens a people menu and inserts a highlighted mention chip. - [Signature Pad](https://webberui.com/docs/signature-pad) (free): Handwritten signatures on canvas: pressure-sensitive stroke width, clear and redraw, export to PNG. - [Credit Card Input](https://webberui.com/docs/credit-card-input) (pro): A photoreal credit card that updates live as you type, flipping over when the CVC field takes focus. - [Emoji Rating Slider](https://webberui.com/docs/emoji-rating-slider) (free): Drag the slider and the face morphs from crying to hearts, deforming with the value. - [Wheel Time Picker](https://webberui.com/docs/wheel-time-picker) (pro): An iOS-style 3D wheel for picking a time: momentum scrolling, snapping, and a perspective arc. - [Pattern Lock](https://webberui.com/docs/pattern-lock) (free): A 3×3 connect-the-dots unlock: drag to draw the pattern, with success/failure feedback animations. - [Star Rating](https://webberui.com/docs/star-rating) (free): A classic star rating React component: half stars, hover-preview fill, arrow and number key control, a bounce on select, and a read-only mode that shows the average, review count and a distribution chart; icon, colour and star count are all customisable. - [Quantity Stepper](https://webberui.com/docs/quantity-stepper) (free): A React ± quantity stepper for ecommerce: press-and-hold acceleration, min/max with an at-limit shake, direct typing, a trash icon at zero, and rolling digits, in compact and pill variants. - [NPS Survey Card](https://webberui.com/docs/nps-survey-card) (free): An NPS survey card for React: 0-10 segmented buttons coloured by detractor/passive/promoter band, a follow-up question that expands after scoring, a thank-you state, plus npsCategory and npsScore helpers. - [Select](https://webberui.com/docs/select) (free): A button-triggered select whose value crossfades on change, with an anchored list that flips at edges, groups and separators, typeahead and arrow-key navigation, and a sliding highlight. - [Drawn Checkbox](https://webberui.com/docs/drawn-checkbox) (free): A React checkbox whose check mark draws itself with a small squash-and-settle, morphing smoothly between the indeterminate dash and the check, with staggered select-all in groups. - [Radio Group](https://webberui.com/docs/radio-group) (free): A React radio group: the selected dot springs into place, and in the card variant the selection outline slides between options, including on arrow-key changes. Supports controlled/uncontrolled use, vertical or horizontal layout, and form submission. - [Form Field](https://webberui.com/docs/form-field) (free): A form field wrapper React component that ties together label, hint, error and prefix/suffix addons; errors expand and collapse by height without layout jumps, addons share the input's focus ring, and a render prop wraps any control. - [Combobox](https://webberui.com/docs/combobox) (pro): A type-to-filter picker that never filters or selects mid-composition for CJK input, with an anchored list that flips at edges, a sliding highlight, and removable chips in multi-select mode. - [Dial Knob](https://webberui.com/docs/dial-knob) (free): A rotary knob input: an SVG tick ring, a subtle nudge at detents, a spring-settled pointer and a rolling readout, with wheel and arrow-key support. - [Switch-to-Slider Morph](https://webberui.com/docs/switch-to-slider-morph) (free): A React switch and slider that share one thumb: turning it on makes the thumb leap onto a vertical or horizontal slider to set a value, turning it off sends it back. Built for enable-then-adjust settings. ### Buttons & toggles Category page: https://webberui.com/components/category/button - [Magnetic Button](https://webberui.com/docs/magnetic-button) (free): A magnetic button that is pulled towards the cursor as it approaches, with a parallax on the inner text and a spring back once the cursor leaves. - [Theme Toggle](https://webberui.com/docs/theme-toggle) (free): A light/dark theme toggle button: View Transitions expand a circle out from the click point, and the Sun/Moon icons rotate through the transition. - [Play/Pause Morph](https://webberui.com/docs/play-pause-morph) (free): A graphical button that morphs smoothly between a play triangle and pause bars, with controlled and uncontrolled modes and an optional progress ring. - [Hold to Confirm](https://webberui.com/docs/hold-to-confirm) (free): A press-and-hold fill confirmation button: holding fills the progress from left to right with a slight tremor near completion, and only a full fill triggers it — preventing accidental taps on dangerous actions. - [Gooey Button](https://webberui.com/docs/gooey-button) (free): A liquid gooey button: droplets at the bottom fuse through an SVG goo filter, well up to cover the button on hover, and splash out thick droplets at the click point. - [Draggable Snap Button](https://webberui.com/docs/draggable-snap-button) (free): A button you can drag that springs back and snaps: wherever you drag it, on release a spring snaps it to the nearest snap point — with multiple snap points, arrow-key switching, and a pure spring-back mode. - [Stateful Button](https://webberui.com/docs/stateful-button) (free): A state-machine button running idle → loading → success / error, switching automatically from an async onClick, with the content crossfading and the width morphing along with it. - [Shimmer Button](https://webberui.com/docs/shimmer-button) (free): A shimmer button with light flowing around its edge, an inner highlight lining, and dimensional hover feedback. - [Ripple Button](https://webberui.com/docs/ripple-button) (free): A button with a spreading click ripple, radiating a Material-style wave out from the click point. - [Rainbow Button](https://webberui.com/docs/rainbow-button) (free): A button with a flowing rainbow gradient animation, in solid and outline styles, with a soft glow in matching hues. - [Moving Border Button](https://webberui.com/docs/moving-border-button) (free): A standout button with a glowing border that travels, a comet-like point of light patrolling around the rounded frame. - [Liquid Fill Button](https://webberui.com/docs/liquid-fill-button) (free): On hover, liquid rises from the bottom with a wave to fill the button and the text inverts. - [Slide to Unlock](https://webberui.com/docs/slide-to-unlock) (free): A confirmation control that only fires once the thumb is dragged all the way, preventing accidental taps. - [Segmented Morph Toggle](https://webberui.com/docs/segmented-morph-toggle) (free): A segmented control whose selected block flows and morphs to the new option on a spring. - [Equalizer Toggle](https://webberui.com/docs/equalizer-toggle) (free): A sound toggle: the equalizer bars dance while it is on, and freeze in grayscale when it is off. - [Tactile Button](https://webberui.com/docs/tactile-button) (free): A two-layer physical key React component — the face floats above a solid base, dips 2px on hover and bottoms out on press, with depth from solid colour rather than blurred shadows. - [Switch](https://webberui.com/docs/switch) (free): A spring-driven React switch whose thumb can be dragged to toggle, with optional crossfading icons inside the thumb, a pressed-state toggle-button variant and native form submission. - [Labeled Mode Switch](https://webberui.com/docs/labeled-mode-switch) (free): A two-state text switch (e.g. Ask | Auto) with a glassy spring-driven thumb and labels that cross-fade with the thumb position — for operating-mode toggles. ### Scroll effects Category page: https://webberui.com/components/category/scroll - [Card Stack Scroll](https://webberui.com/docs/card-stack-scroll) (free): A scroll effect where cards stick to the top one after another, stacking up and shrinking away layer by layer. - [Parallax Section](https://webberui.com/docs/parallax-section) (free): A multi-layer parallax section where each layer shifts at a different speed with scroll progress, stacking up depth and a sense of space. - [Horizontal Scroll Section](https://webberui.com/docs/horizontal-scroll-section) (pro): A pinned section that turns vertical scrolling into horizontal movement, with built-in spring feel, a progress bar, and edge fading. - [Sticky Reveal](https://webberui.com/docs/sticky-reveal) (free): A sticky text-and-visual reveal: the text on the left flows with the scroll while the visual on the right stays pinned and cross-fades between states. - [Image Sequence Scrub](https://webberui.com/docs/image-sequence-scrub) (pro): The product-page effect that scrubs a set of frames with scroll progress — the view stays pinned while the imagery plays frame by frame. - [Zoom Parallax](https://webberui.com/docs/zoom-parallax) (free): A photo group that zooms through with the scroll — each image scales from the center at its own rate, creating a fly-through depth parallax. - [Scroll Progress Set](https://webberui.com/docs/scroll-progress-set) (free): Three scroll indicators in one — a top bar, a bottom-right ring, and section dots on the right, all sharing the same scroll progress. - [Velocity Skew](https://webberui.com/docs/velocity-skew) (free): Skews and blurs content in real time based on scroll speed, springing back level when the scroll stops, for a reading feel full of kinetic energy. - [Scroll Timeline](https://webberui.com/docs/scroll-timeline) (free): A scroll-driven timeline where the growing line extends along the main axis and each node lights up and reveals its content as the line arrives. - [Section Snap Pin](https://webberui.com/docs/section-snap-pin) (pro): Section pinning plus snap-scroll choreography — full-height sections snap one by one to fill the viewport, content reveals and exits in order, with side navigation dots. - [Container Scroll 3d](https://webberui.com/docs/container-scroll-3d) (free): A container that rotates in 3D as you scroll to reveal its content, flattening out from a tilted-back angle to push the view right up to the viewer. - [Hero Parallax Grid](https://webberui.com/docs/hero-parallax-grid) (pro): A product/portfolio wall with alternating row parallax — each row sweeps in a different direction as you scroll, with a 3D reveal. - [Parallax Depth Cards](https://webberui.com/docs/parallax-depth-cards) (free): Layered cards that shift at different speeds while scrolling, creating a parallax sense of depth. - [Scroll Spy Dots](https://webberui.com/docs/scroll-spy-dots) (free): Fixed side dots that track the current section, jump smoothly on click, and expand a label. - [Scroll Morph Blob](https://webberui.com/docs/scroll-morph-blob) (pro): A gradient blob that morphs between several organic shapes as the scroll progresses. ### Marketing sections Category page: https://webberui.com/components/category/marketing - [Roadmap Lane Board](https://webberui.com/docs/roadmap-lane-board) (free): A Now / Next / Later three-lane roadmap board where item cards move between lanes with shared layout animation, supporting both read-only display and interactive dragging. - [Case Study Dossier](https://webberui.com/docs/case-study-dossier) (pro): A dossier-style case study layout — a sticky metrics rail on the left lights up and counts as the long-form copy scrolls by, while full-bleed pull quotes periodically break the two-column rhythm to let it breathe. - [Patchbay Integrations](https://webberui.com/docs/patchbay-integrations) (pro): An integrations showcase built on the studio patchbay metaphor — drag a cable from an output jack on the left into an integration jack on the right, with physically sagging curves and indicator lights that come on. - [Queue Waitlist Section](https://webberui.com/docs/queue-waitlist-section) (free): A gamified waitlist section — submit an email and a 3D card flip reveals your queue number and the crowd ahead of you; copy the referral link and you move up the line with a queue-jump animation. - [Depth Mask Hero](https://webberui.com/docs/depth-mask-hero) (free): A lock-screen depth hero — a cut-out subject partially occludes the oversized headline, and on scroll the subject, headline, and background separate at different rates to produce real depth. - [Quest Map Section](https://webberui.com/docs/quest-map-section) (free): A winding quest map section — as you scroll, a marker travels the path clearing stations, and each one it reaches pops its content open, raises a flag, and stamps itself complete. - [Trophy Case](https://webberui.com/docs/trophy-case) (free): An achievement trophy wall — a grid of glass cabinets displays your achievements; unlocking one raises the trophy, sweeps a highlight across it, and bursts a little confetti, while hovering lets you examine it in 3D and see its requirement and progress. - [Blueprint Process Section](https://webberui.com/docs/blueprint-process-section) (free): An engineering-blueprint take on the how-it-works layout — on graph paper, each step is a numbered, annotated station, and as you scroll the dashed leader lines, dimension callouts, and section marks are drawn in order as SVG stroke animations. - [Spec Label Section](https://webberui.com/docs/spec-label-section) (free): A product spec section styled like a nutrition label — rows stamp themselves in one by one as it scrolls into the window, and any row can expand to show notes and supporting links. - [Milestone Unlock Meter](https://webberui.com/docs/milestone-unlock-meter) (free): A full-bleed progress meter — the liquid level rises to fill the whole section from data or scroll, and every time it crosses a threshold the matching milestone card pops open, unlocked and lit. - [Balance Scale Compare](https://webberui.com/docs/balance-scale-compare) (free): A balance-scale comparison layout — check feature chips onto either side and the two columns physically sink and rise with their accumulated weight, while the beam on its fulcrum tilts to an angle that reflects the real gap. - [Changelog Timeline](https://webberui.com/docs/changelog-timeline-section) (free): A release changelog timeline section — version badges, type tags, and a staggered reveal. - [FAQ Accordion Section](https://webberui.com/docs/faq-accordion-section) (free): An FAQ accordion section with live search filtering and category tags. - [Pricing Calculator](https://webberui.com/docs/pricing-calculator) (pro): An interactive pricing section that computes the monthly bill live from a usage slider and recommends a plan automatically. - [Feature Compare Matrix](https://webberui.com/docs/feature-compare-matrix) (pro): A plan feature comparison table with a sticky first column and header, highlighted difference rows, and animated checks and crosses. - [Prompt Showcase](https://webberui.com/docs/prompt-showcase) (free): A self-playing prompt box React component for marketing pages. A glowing pill types out a prompt, a fake cursor glides in and clicks send, and a result card pops up, on loop, pausing on hover. - [Integration Connect Grid](https://webberui.com/docs/integration-connect-grid) (free): A React component where integration cards drop into a grid in sequence, then flip one by one to a connected state with a drawn checkmark. Autoplay it as a showcase, or let users click to connect and await async authorization. - [Pain Point Orbit](https://webberui.com/docs/pain-point-orbit) (free): As you type into the input, surrounding pain-point cards crowd inward one by one; on submit they scatter away — a marketing visual for the pain of fragmented tools. ### CJK localisation Category page: https://webberui.com/components/category/chinese-localization - [Bopomofo Ruby Text (React ruby typography component)](https://webberui.com/docs/zhuyin-ruby-text) (free): A React ruby typography component that annotates Chinese characters with Bopomofo (Zhuyin) or Hanyu Pinyin above them — switch between Bopomofo and Pinyin, highlight a character on hover, adjust the annotation size and spacing. Suited to teaching materials, dictionaries, and children's sites. - [CJK Number Roller](https://webberui.com/docs/cjk-number-roller) (free): Numbers rolling between three forms — lowercase Chinese numerals, formal (financial) Chinese numerals, and Arabic digits — with automatic conversion to the formal amount form. - [Lunar / Gregorian Date Picker](https://webberui.com/docs/lunar-date-picker) (pro): A React calendar component showing the Gregorian and lunar calendars side by side — every cell is annotated with the lunar day, the 24 solar terms, and traditional festivals, and one click switches the primary axis between lunar and Gregorian. - [Taiwan Address Picker](https://webberui.com/docs/taiwan-address-picker) (free): Two-level cascading selects for city/county and township/district, filling in the postal code automatically. - [Taiwan Business Tax ID Input](https://webberui.com/docs/tax-id-input) (free): A React component that validates Taiwan's 8-digit business tax ID (Uniform Number) in real time — it implements the 2023 check-digit algorithm (weights 1,2,1,2,1,2,4,1, including the special case where the 7th digit is 7) and shows pass/fail with animated feedback as you type. - [Taiwan Phone Input](https://webberui.com/docs/taiwan-phone-input) (free): Mobile numbers starting with 09 are formatted automatically as 09xx-xxx-xxx, with landline and mobile detected automatically. - [E-Invoice Carrier Input](https://webberui.com/docs/invoice-carrier-input) (pro): An input for Taiwan's common e-invoice carrier (the mobile barcode) — it validates the "leading / plus 7 characters" format and its character set, and draws the carrier number as a Code 39 barcode in real time for scanning. - [LINE-Style Chat Bubbles](https://webberui.com/docs/line-chat-bubbles) (pro): The chat UI Taiwanese users know best — green and white bubbles, read receipts, stickers, and date dividers. - [Traditional / Simplified Toggle](https://webberui.com/docs/traditional-simplified-toggle) (free): A Traditional / Simplified Chinese toggle that cross-fades the body text character by character. - [Vertical Spring Couplet](https://webberui.com/docs/vertical-couplet) (free): A spring couplet layout with vertically written upper and lower scrolls plus a top banner — gold on red, revealed stroke by stroke. - [Seal Stamp](https://webberui.com/docs/seal-stamp) (pro): A square or round seal component — relief and intaglio carving, a stamping press animation, and ink bleed. - [Red Envelope Button](https://webberui.com/docs/red-envelope-button) (pro): An open-the-red-envelope interaction — an idle wiggle, a click to tear it open, a rolling amount, and a burst of gold coins. - [Taiwan ID Number Input](https://webberui.com/docs/taiwan-id-input) (free): An input for the Taiwan national ID number — check-digit validation, masked display by default, and district and gender badges. - [Chinese Zodiac Wheel](https://webberui.com/docs/chinese-zodiac-wheel) (free): A twelve-animal zodiac ring — rotate to select, and the chosen sign expands into a card of years and traits. - [CJK Vertical Nav](https://webberui.com/docs/cjk-vertical-nav) (free): A side navigation bar in vertical Chinese writing — writing-mode vertical typesetting, with an ink line marking the current item. - [ROC (Minguo) Date Picker](https://webberui.com/docs/roc-date-picker) (free): A React date picker that toggles between the ROC (Minguo) calendar and the Gregorian one — a grid calendar with a "ROC (Minguo) 115 Month" (Minguo year) dropdown, typed input like "115/08/18" or "2026-08-18" parsed with an IME guard, and ISO output that also carries the ROC and Gregorian forms. - [Chinese Amount Input](https://webberui.com/docs/chinese-amount-input) (free): A React money input that mirrors Arabic digits into formal Chinese uppercase (新臺幣壹萬貳仟元整) as you type: thousands grouping, jiao/fen handling, one-click copy, and a standalone toChineseUpper() converter for checks, receipts, contracts and quotes. - [IME-Aware Search](https://webberui.com/docs/ime-aware-search) (free): A React search box that never fires queries or lets Enter mis-select while a Zhuyin/Pinyin IME is composing — queries wait until compositionend (normal typing is debounced), a composing-state chip, highlighted matches, a / hotkey to focus, and a copy-paste IME handling pattern for your own inputs. - [Invoice Lottery Checker](https://webberui.com/docs/invoice-lottery-checker) (pro): A React component for Taiwan's uniform-invoice lottery: type the last 3 or all 8 digits of an invoice number and match it against the prize numbers you pass in — confetti, a rolling prize amount and a prize badge on a win, a gentle head-shake and a one-tap check-the-next-one button on a miss. - [Moon Blocks Toss](https://webberui.com/docs/moon-blocks-toss) (free): Throw two crescent divination blocks with a 3D tumbling animation; the landing resolves to sheng-bei / xiao-bei / yin-bei and fires onResult for playful yes/no decisions - [Solar Terms Timeline](https://webberui.com/docs/solar-terms-timeline) (free): A horizontal timeline of the 24 solar terms for React: locates the current term for any date, counts down to the next one, with seasonal colour bands and phenology / seasonal-food cards; term dates come from the standard 21st-century approximation, getSolarTerms and currentSolarTerm are exported, and almanac values can override the formula. - [Taiwan Tile Map](https://webberui.com/docs/taiwan-tile-map) (pro): A React tile-grid map of Taiwan's 22 counties and cities that needs no geo data: value-driven choropleth colouring, hover tooltip cards, click callbacks and arrow-key navigation, usable as a visual filter. - [Almanac Day Card](https://webberui.com/docs/almanac-day-card) (pro): Taiwan almanac day card: big Gregorian date with the lunar date, auspicious do/avoid lists, clash zodiac and lucky hours, with a tear-off page-flip animation between days - [Taiwan Stock Quote Card](https://webberui.com/docs/tw-stock-quote-card) (free): A Taiwan-convention stock quote card for React: red for up and green for down, limit-up/down locked styling, rolling flashing price digits, a change badge, open/high/low/previous-close cells, a volume bar and a compact 5-level order book — all data supplied via props. - [CJK Word Count Textarea](https://webberui.com/docs/cjk-word-count-textarea) (free): A React textarea with CJK-aware counting: switch live between word, character and byte modes, a limit progress ring, near-limit and over-limit warnings, frozen counts while an IME is composing, and an optional hard limit. - [Language Flip Text](https://webberui.com/docs/language-flip-text) (free): Flips one sentence between languages with a split-flap or vertical roll, and can settle on a chosen locale — demoed in Traditional Chinese, English and Japanese. ### Navigation Category page: https://webberui.com/components/category/navigation - [Dock](https://webberui.com/docs/dock) (free): A macOS-style magnifying dock — icons scale smoothly based on their horizontal distance from the cursor, with labels floating up on hover. - [Dynamic Island Nav](https://webberui.com/docs/dynamic-island-nav) (pro): A Dynamic Island-style pill navigation — the selected pill slides and morphs between items, the selected item's name expands from 0, and one more click morphs the island downward into a panel. - [Expandable Tabs](https://webberui.com/docs/expandable-tabs) (free): Icon-based tab navigation where the selected icon smoothly expands into text, with separator support and controlled and uncontrolled modes. - [Gooey Menu](https://webberui.com/docs/gooey-menu) (free): A liquid, gooey expanding menu — click the floating trigger and the items are "pulled" out of the button through an SVG goo filter and fuse together, with four directions plus radial fanning. - [Scroll-aware Navbar](https://webberui.com/docs/scroll-aware-navbar) (free): A navigation bar that condenses, hides, or widens as you scroll — three variants sharing one consistent rhythm, with nested scroll container support. - [Mega Menu](https://webberui.com/docs/mega-menu) (pro): A large dropdown navigation menu whose panel height morphs smoothly to fit as you switch items, with hover and keyboard support. - [Fullscreen Menu](https://webberui.com/docs/fullscreen-menu) (pro): A Nike-style fullscreen overlay menu — the backdrop unveils from the top down and the menu items slide up from under a mask in a staggered cascade. - [Command Palette](https://webberui.com/docs/command-palette) (free): A ⌘K command palette with live fuzzy search, grouped commands, and keyboard navigation, its highlight row sliding via a shared layout. - [Pill Nav](https://webberui.com/docs/pill-nav) (free): A minimal pill navigation whose highlight slides to the active item. - [Bubble Menu](https://webberui.com/docs/bubble-menu) (free): A menu of floating round bubbles that pop out one by one along a fan, with spring timing plus link and callback support. - [Morphing Breadcrumbs](https://webberui.com/docs/morphing-breadcrumbs) (free): Animated breadcrumbs where items slide in and out on level changes and the current level scales up - [Radial Orbit Menu](https://webberui.com/docs/radial-orbit-menu) (pro): A center button that expands into a radial menu arranged in orbit, popping out one item at a time. - [Fluid Tabs](https://webberui.com/docs/fluid-tabs) (free): Tabs whose indicator stretches like a liquid as it follows along, with directional content switching. - [Dropdown Menu](https://webberui.com/docs/dropdown-menu) (free): A button-triggered dropdown menu with groups, separators, submenus, checkbox and radio items and shortcut hints, a sliding highlight, and full keyboard and typeahead support. - [Pagination](https://webberui.com/docs/pagination) (free): A React pagination component whose current-page pill slides between numbers, with expandable ellipses that stagger in hidden pages, a compact “3 / 12” variant with rolling digits, arrow-key navigation and an SEO-friendly link mode. - [Menubar](https://webberui.com/docs/menubar) (pro): A desktop-style menubar: once a menu is open, hovering a neighbour switches instantly and the panel slides to its new position instead of closing and reopening, with full arrow-key navigation. - [Glass Tab Bar](https://webberui.com/docs/glass-tab-bar) (free): A frosted-glass mobile bottom tab bar React component. Icons pop in one by one on mount, the active pill slides between tabs and the active label expands, with an optional raised centre button and unread badges. ### Interaction choreography Category page: https://webberui.com/components/category/interaction - [Mutation List Choreographer](https://webberui.com/docs/mutation-list-choreographer) (pro): Full CRUD list choreography — insertions open a gap and drop in, deletions collapse the neighbours, reordering moves continuously with FLIP, batches cascade in waves, and removals leave an undo ghost. - [Filter Composer Bar](https://webberui.com/docs/filter-composer-bar) (free): A Linear-style filter composer — pick a field from "Add filter" and the pill chip springs in; the chip's value opens a menu in place, and removing one lets the rest close ranks with FLIP. - [Lasso Select Stage](https://webberui.com/docs/lasso-select-stage) (free): Drag a lasso box across a grid; the items it catches lift and light up in sequence, and on release the count badge morphs into a floating batch action bar. - [Focus Recession Stage](https://webberui.com/docs/focus-recession-stage) (free): A page-level focus system — when any region enters focus/edit mode, the rest of the layout recedes as a whole: scaled down, dimmed, and blurred into a depth-of-field backdrop, springing back on Esc or an outside click. - [Roving Highlight System](https://webberui.com/docs/roving-highlight-system) (free): One shared morphing highlight surface that travels between any registered elements across tabs, sidebars, and grids, with built-in roving tabindex keyboard navigation and a synchronized focus ring. - [Column Transit Board](https://webberui.com/docs/column-transit-board) (free): A cross-column transit board — cards fly along an arc between columns because of a programmatic state change (not a drag), while the target column opens a landing spot, neighbours in the source column close ranks, and the flying card lifts with a shadow. - [Coachmark Tour Flow](https://webberui.com/docs/coachmark-tour-flow) (free): A product tour overlay — an SVG mask morphs the spotlight between target elements while the explanation card anchors to the best side and flies along as you step, tracking the target through scroll. - [Physics Tag Pile](https://webberui.com/docs/physics-tags) (pro): Tags drop and pile up like physical objects, and can be picked up and thrown — a 2D physics simulation. - [Magnetic Fridge Poetry](https://webberui.com/docs/magnetic-fridge-poetry) (free): Fridge magnet word tiles you drag freely to compose sentences, with slight rotation and a snap-on feel. - [Drag Reorder List](https://webberui.com/docs/drag-reorder-list) (free): A list reordered by press-and-drag, where the other items flow aside to make way, with a drag handle. - [Sticky Note Board](https://webberui.com/docs/sticky-note-board) (pro): Colourful sticky notes on a cork board: drag, add, and crumple to delete. - [Easter Egg Trigger](https://webberui.com/docs/konami-code) (free): A hidden interaction that listens for a key sequence to trigger an easter egg, with a progress indicator. - [Mouse Parallax Scene](https://webberui.com/docs/mouse-parallax-scene) (free): Multiple layers shift with the mouse to create depth, with a gyroscope fallback. - [Fanned Cards](https://webberui.com/docs/fanned-cards) (free): A hand of cards fanned out like a held deck: hover lifts a card while neighbours make room, and dragging up or flicking plays it onto a pile. Card faces accept any content. - [Flashcard Deck](https://webberui.com/docs/flashcard-deck) (free): A study flashcard deck React component. Tap or press Space to flip in 3D, drag or use arrow keys to sort into known and unknown, with a progress bar and an end screen showing an accuracy ring, restart and review-unknown options. - [Node Wire Canvas](https://webberui.com/docs/node-wire-canvas) (pro): A node-based workflow canvas: freely draggable nodes, bezier wires between ports, drag-to-connect from any port, flowing pulses along edges while running, plus pan and zoom. - [Radius & Shadow Tuner](https://webberui.com/docs/radius-shadow-tuner) (free): Drag handles to adjust a box's corner radius, shadow and padding with live readouts and the resulting CSS — ideal for demonstrating design tokens in docs. - [Master Switch Cascade](https://webberui.com/docs/master-switch-cascade) (free): A master switch cascade React component: flip one master switch and the child switches in a grid follow in a distance-based ripple, each cell flashing a ring as it flips; children stay individually toggleable and the master reflects on, off or mixed. - [Permission Wave Grid](https://webberui.com/docs/permission-wave-grid) (free): An admin flips one switch; SVG wires draw from it to a member grid and avatars unlock wave by wave — showing access granted to everyone at once. - [Keystroke Card Deck](https://webberui.com/docs/keystroke-card-deck) (free): A stack of cards answered with number keys 1–3; each answered card flies off and the next slides up — keyboard-first, mouse-friendly. - [Folder Filing Grid](https://webberui.com/docs/folder-filing-grid) (free): A document filing React component: scattered document cards fly along an arc into their matching folders, which open to catch them, close with a small dip and roll their counts up. Auto-sort in one go, or file by hand with drag or keyboard, and open a folder to see what is inside. ### E-commerce Category page: https://webberui.com/components/category/ecommerce - [Cart Arc](https://webberui.com/docs/cart-arc) (free): An arc into the bag — clicking add-to-cart sends the product thumbnail flying along a bézier arc toward the cart, where the icon squashes like jelly and the badge number pops as it increments; rapid clicks send several in flight at once. - [Chromatic Variant Stage](https://webberui.com/docs/chromatic-variant-stage) (free): A product display stage where picking a swatch performs three transitions at once — the background bleeds outward radially, the product image cross-dissolves, and the price and model number flip to their new values. - [Bundle Builder](https://webberui.com/docs/bundle-builder) (pro): A bundle-building machine — click a product thumbnail and it FLIPs into a slot, the total rolls to its new value, and filling the required number of slots completes the discount ring and unlocks the discount. - [Anchored Buy Rail](https://webberui.com/docs/anchored-buy-rail) (pro): An anchored buy rail — a long-scrolling left column beside a sticky buy panel that FLIPs down into a mini checkout capsule as you scroll, then expands again as the reviews section comes near. - [Product Drop Countdown](https://webberui.com/docs/product-drop-countdown) (free): A limited-release drop board with a built-in flip countdown, a CTA that unlocks at launch, and a three-state machine ending in a restock notification form once it sells out. - [Receipt Cart](https://webberui.com/docs/receipt-cart) (free): A shopping cart built on the thermal-receipt metaphor — line items print in one row at a time, the perforated paper edge extends, the subtotal and free-shipping progress at the tail roll to their new values, and removing a row strikes it through and tears it out. - [Versus Tray](https://webberui.com/docs/versus-tray) (pro): Check off products and a comparison tray slides out from the bottom; the thumbnails FLIP into a full-width spec table that scans row by row and marks the winner of each one. - [Parcel Journey](https://webberui.com/docs/parcel-journey) (free): A post-purchase tracking timeline — the parcel advances along a vertical dashed path as the order status changes, completed nodes check off and light up in order, the current node pulses like a breath, and the estimated delivery date is presented as a flipping calendar page. - [Stock Pulse](https://webberui.com/docs/stock-pulse) (free): A stock pulse meter — a falling liquid level shows consumption, crossing a threshold changes color and shakes, and once it enters low stock the whole bar breathes while the remaining count rolls down. - [Product Quick View](https://webberui.com/docs/product-quick-view) (pro): A product card that opens a quick view dialog — image switching, variant selection, and add to cart. - [Variant Swatch Picker](https://webberui.com/docs/variant-swatch-picker) (free): A color swatch and size picker with sold-out slashes, a springing selection ring, and low stock hints. - [Recently Viewed Rail](https://webberui.com/docs/recently-viewed-rail) (free): A horizontally scrolling rail of recently viewed products, with fading edges and snap scrolling. - [Convenience Store Pickup](https://webberui.com/docs/convenience-store-pickup) (pro): Three-step convenience-store pickup picker: chain → city/district → store list with search, hours and a selected-store summary card; brand-neutral, data supplied by props - [Installment Calculator](https://webberui.com/docs/installment-calculator) (free): An inline installment calculator React component for product pages: 3/6/12/24-month segmented switch, annual rate and fees, a rolling monthly amount, total and interest, effective annual rate, a 0% badge and an expandable per-period schedule. - [Free Shipping Meter](https://webberui.com/docs/free-shipping-meter) (free): A multi-tier threshold meter (free shipping → gift → discount) for React: rolling 'NT$X more for free shipping' copy, a colour change across the whole bar and a one-shot micro-confetti burst when a tier is crossed, and reached tiers listed as chips — drop it into a cart header on its own. - [Live Shopping Overlay](https://webberui.com/docs/live-shopping-overlay) (pro): A React live-selling UI overlay — on a fixed-ratio stage it layers a LIVE badge with a rolling viewer count, heart bursts, a scrolling comment stream, automatic "+1" order detection with floating counters, and a pinned product card with a stock countdown; drop in children to use a real video. - [Group Buy Progress](https://webberui.com/docs/group-buy-progress) (free): A head-count group-buy card for React: stacked participant avatars, tiered group prices, a deadline countdown, a CTA that flips to \"group formed\" with a card pulse and confetti the moment the threshold is hit, and an automatic refund note if the deadline passes short of the minimum. - [Coupon Code Input](https://webberui.com/docs/coupon-code-input) (free): An ecommerce coupon input React component: on success the field turns into a perforated ticket chip with a tear-off stub animation and a rolling discount amount; on failure it shakes and shows the reason. The applied chip is removable and input is case-normalised. - [Receipt Printer](https://webberui.com/docs/receipt-printer) (pro): A receipt that prints after checkout like a thermal printer feeding paper line by line: processing, printing and complete stages, a serrated paper edge, tear-off and replay. - [Transaction List](https://webberui.com/docs/transaction-list) (free): A finance-app transaction list React component: rows grouped by date automatically, rolling amounts coloured by sign, neighbouring rows shifting smoothly when a new transaction is inserted, plus swipe-to-pin and status chips. - [Payment Success Sheet](https://webberui.com/docs/payment-success-sheet) (free): A full bottom-sheet payment flow React component: the sheet slides up, the pay button morphs into a processing ring, the ring morphs into a check with a single pulse, and the order summary unfolds row by row. ### Data storytelling Category page: https://webberui.com/components/category/data-storytelling - [Drilldown Stat Grid](https://webberui.com/docs/drilldown-stat-grid) (free): A grid of KPI tiles; clicking a tile expands a full-width detail panel below its row while the remaining tiles move down to make room, and clicking again collapses it. - [Callout Stat Hero](https://webberui.com/docs/callout-stat-hero) (free): A hero layout built around one giant number filling the first screen, with SVG leader lines drawn one by one as you scroll, connecting parts of the number to surrounding annotation cards that surface in sequence. - [Weighted Metric Wall](https://webberui.com/docs/weighted-metric-wall) (free): A wall of KPI tiles whose sizes are computed automatically from the weight of each value, revealed largest-first in a cascade, expanding a detail layer on hover. - [Year Pulse Grid](https://webberui.com/docs/year-pulse-grid) (free): A GitHub-style wall of day cells for a whole year — a wave sweeps across on load lighting cells up by intensity, hovering a day floats an event card, and clicking a cell selects it and filters the linked sidebar list to that day's events. - [Rank Shuffle Board](https://webberui.com/docs/rank-shuffle-board) (free): A data-driven rank shuffle leaderboard — rows swap positions with a FLIP animation when scores update, arrows flash for rank gains and losses, and the top three carry gold, silver, and bronze podium vocabulary. - [Isotype Proportion Grid](https://webberui.com/docs/isotype-proportion-grid) (free): An "X in every Y" isotype proportion grid — hundreds of small icons light up in a color wave as you scroll, stepping through different proportion statements one at a time. - [Guess Gap Reveal](https://webberui.com/docs/guess-gap-reveal) (free): Guess-the-gap reveal — drag a slider or draw a trend line to guess the answer first, then let go and watch the real data animate in, with a color block marking the gap between "your guess" and the truth alongside the distribution of other readers' guesses. - [Radar Skill Chart](https://webberui.com/docs/radar-skill-chart) (free): Multi-axis radar chart: a drawing animation on reveal, values on vertex hover, and two series overlaid for comparison. - [Bump Rank Chart](https://webberui.com/docs/bump-rank-chart) (pro): Multi-period rank line chart: curve stroke-drawing animation, with hover highlighting a single entry's path. - [Gauge Meter](https://webberui.com/docs/gauge-meter) (free): Needle gauge: a spring-swinging needle, banded color arcs, and a rolling value. - [Word Cloud](https://webberui.com/docs/word-cloud) (free): Weighted word cloud: font size mapped to weight, spiral layout, and words lifting on hover to show their value. - [Orbit Timeline](https://webberui.com/docs/orbit-timeline) (free): Events arranged around concentric orbits, expanding a detail card when one is selected. - [Funnel Chart](https://webberui.com/docs/funnel-chart) (free): An SVG conversion funnel React component: trapezoid stages grow in one after another, stage-to-stage conversion labels sit between layers, hovering highlights a stage with a tooltip, in vertical and horizontal modes with a screen reader data table. - [Sankey Flow](https://webberui.com/docs/sankey-flow) (pro): Sankey diagram: automatic column layout, link widths proportional to value, animated gradient flows, and hover that traces a full path while dimming the rest — self-contained layout, no d3 - [Route Map Card](https://webberui.com/docs/route-map-card) (pro): A navigation-style route card — a grid basemap with deterministic streets, a route drawn segment by segment, a marker travelling along it, street labels fading in on arrival and a live ETA readout. - [Duration Compare Bars](https://webberui.com/docs/duration-compare-bars) (free): A duration comparison React component: two to five durations grow on one shared scale at one shared speed — say 30 minutes versus six weeks. Units convert automatically, readouts count up with the bar width, a ratio badge pops in when they finish, and a broken axis keeps the shortest bar visible when the gap is extreme. - [Diagram Kit](https://webberui.com/docs/diagram-kit) (pro): Eleven data-driven SVG diagrams — hub routing, sequence lanes, cycle, timeline, radial branches, funnel, tier pyramid, anchored callouts, branch reveal, quadrant and Venn — each drawn in with stroke tracing and staggered nodes. - [Balance Chart](https://webberui.com/docs/balance-chart) (free): A diverging bar chart React component centred on a zero axis: income grows up and expenses grow down, a net line draws in once the bars land, and hover or keyboard focus shows the period's income, expenses and net. - [Event Bar Chart](https://webberui.com/docs/event-bar-chart) (free): A Gantt-like event bar chart React component with timed segments on swimlanes, panned by drag or arrow keys, an event card that expands on hover or focus, a self-contained SVG time axis and a screen reader data table. - [Stacked Column Chart](https://webberui.com/docs/stacked-column-chart) (free): A stacked column chart React component. Clicking a legend item collapses that layer while the remaining layers sink into place on a spring and the Y axis rescales with tweened ticks; hover or use the arrow keys for a per-column breakdown. - [Summary Line Chart](https://webberui.com/docs/summary-line-chart) (free): A React multi-line chart with a live summary column: lines draw in with a stroke animation, and as the pointer moves the summary's values and change rates roll digit by digit to that point in time. Click a summary row to hide a line and the Y axis re-tweens. - [Paired Column Chart](https://webberui.com/docs/paired-column-chart) (free): A paired column chart comparing two series side by side: switching periods reorders and resizes the bars with a layout animation, and hovering shows the gap between the pair. - [Spectrum Monitor](https://webberui.com/docs/spectrum-monitor) (pro): A live scrolling spectrum and heat band: a canvas waterfall of band intensities drawn frame by frame, with pause, hover readouts and automatic pausing when off screen. - [Spreadsheet Grid](https://webberui.com/docs/spreadsheet-grid) (pro): An editable spreadsheet grid: arrow-key selection, double-click or Enter to edit, a formula bar showing raw input, simple formulas, and a frozen header row and column. - [System Map Canvas](https://webberui.com/docs/system-map-canvas) (pro): A pannable, zoomable system map: nodes and edges are generated from data, groups expand and collapse, and selecting a node highlights its connected paths and opens its details. - [Knowledge Graph](https://webberui.com/docs/knowledge-graph) (pro): A force-directed knowledge graph built from Markdown or structured records: a constellation-style dark canvas you can drag, zoom and search, with each node's source citations in a side panel. ### Media Category page: https://webberui.com/components/category/media - [Custom Video Player](https://webberui.com/docs/custom-video-player) (pro): A video player with a custom control bar that fades out automatically during playback, supporting scrub-to-seek, volume, fullscreen, and keyboard operation. - [Audio Visualizer](https://webberui.com/docs/audio-visualizer) (pro): Web Audio API audio spectrum visualization drawn in canvas 2D, in bar, mirror, and radial styles, able to analyze a real audio source or drive a decorative animation from synthetic data. - [Image Compare](https://webberui.com/docs/image-compare) (free): Drag the divider in the middle to compare a before and an after layer, clipped with clip-path and following smoothly on a spring. - [Zoom Lens](https://webberui.com/docs/zoom-lens) (free): An image magnifier whose lens follows the cursor and magnifies in place, or presents the magnified result in a side panel. - [Device Mockup](https://webberui.com/docs/device-mockup) (free): Safari / iPhone / Android device frames with a 3D hover tilt, floating, and a reveal animation. - [Macbook Scroll](https://webberui.com/docs/macbook-scroll) (pro): The screen rises out of a MacBook as you scroll - [Hero Video Dialog](https://webberui.com/docs/hero-video-dialog) (free): A click-to-play hero video dialog with a thumbnail, a pulsing play button, and a range of enter and exit animations. - [Progressive Blur](https://webberui.com/docs/progressive-blur) (free): A progressive blur mask at the edge of scrolling content — the closer to the edge, the blurrier — so content fades in and out smoothly. - [Ken Burns Slideshow](https://webberui.com/docs/ken-burns-slideshow) (free): The classic documentary-style slideshow of slow zooms and pans, with cross-fades. - [Waveform Scrubber](https://webberui.com/docs/waveform-scrubber) (pro): An audio waveform progress bar you can drag to seek, with the played region highlighted. - [Vinyl Record Player](https://webberui.com/docs/vinyl-record-player) (pro): A playable vinyl turntable: the record spins, the tonearm swings in, and you can drag the record to scratch. - [Lightbox Gallery](https://webberui.com/docs/lightbox-gallery) (pro): A React thumbnail wall that opens a full-screen lightbox: the image morphs in from its thumbnail as a shared element, with wheel/pinch zoom and drag panning, double-tap zoom, swipe and keyboard navigation, a counter and caption bar, a bottom thumbnail strip, and Esc or backdrop to close. - [Cassette Player](https://webberui.com/docs/cassette-player) (pro): A skeuomorphic cassette audio player: reels spin with playback time, tape spools grow and shrink with progress, plus an animated rewind, a draggable scrubber and caption tracks. - [Device Stage 3D](https://webberui.com/docs/device-stage-3d) (pro): A pure-CSS 3D stage for phones, tablets and laptops with five arrangements: pointer tilt, scroll orbit, Y-axis flip, a fanned lineup of devices and a scroll-driven macro pull-back; screens are live DOM. - [Cover Wall](https://webberui.com/docs/cover-wall) (free): A React grid wall of covers that fills in cell by cell from the centre outward, with a rolling counter and copy overlaid in the middle; hovering pushes a cell forward while neighbours recede. - [Image Strobe](https://webberui.com/docs/image-strobe) (free): A React strobe effect that flips full-bleed images at high speed while centred content stays fixed, stopping on the last frame; triggered on entering the viewport, on mount or via ref.play(), with a slow crossfade under reduced motion. ### Presentations Category page: https://webberui.com/components/category/presentation - [Slide Deck Shell](https://webberui.com/docs/slide-deck-shell) (free): A 16:9 web presentation shell React component with proportional scaling, keyboard and touch navigation, four transitions, progress bar and page counter, speaker notes, URL-synced slide index and one-slide-per-page printing, plus nine built-in slide layouts. ### Page sections Category page: https://webberui.com/components/category/sections - [Hero Collection 01](https://webberui.com/docs/hero-collection-01) (free): Three animated hero sections — a drifting gradient mesh, a canvas particle field, and per-character split text — sharing one content API, with the content revealing in sequence as it enters the viewport. - [Hero Collection 02](https://webberui.com/docs/hero-collection-02) (pro): Three advanced hero sections — a fluid gradient canvas, a CSS 3D parallax tilt, and a text-masked light sweep — all variants of a single component. - [Feature Section Set](https://webberui.com/docs/feature-section-set) (pro): One set of feature data, three finished layouts — an asymmetric bento grid, a sticky side-by-side scroll, and a row of equal-width cards — applied by switching the variant. - [CTA + Footer Set](https://webberui.com/docs/cta-footer-set) (pro): A call-to-action section that reveals in sequence as it enters the viewport, paired with a multi-column and a minimal animated footer. - [Auth Pages](https://webberui.com/docs/auth-pages) (pro): A sign-in / sign-up page pair with form motion — fields expanding and collapsing, heading and button text morphing, and a submit loading state. - [Pricing Section](https://webberui.com/docs/pricing-section) (pro): A complete pricing section — header, monthly/yearly switch, spring-tweened prices, and a featured plan — with a built-in expandable FAQ accordion, all revealing with a stagger in one pass. - [Team + Logo Wall](https://webberui.com/docs/team-logo-wall) (pro): A team member grid that staggers in, paired with an infinitely scrolling customer logo marquee — a good fit for the trust block on an about page or a home page. - [Testimonial Section](https://webberui.com/docs/testimonial-section) (pro): A complete social-proof section with a built-in heading, star ratings, avatars, and three layouts — grid, infinite marquee, and single-quote spotlight carousel. - [Contact Section](https://webberui.com/docs/contact-section) (pro): A contact-us section with a form and micro-interactions. - [Team Grid Section](https://webberui.com/docs/team-grid-section) (free): A grid of team member cards with gradient avatars and social links that flip out on hover. - [Newsletter Signup Section](https://webberui.com/docs/newsletter-signup-section) (free): A subscription form section with input animation, a submit-success transformation, and social proof. - [Angled Gallery Hero](https://webberui.com/docs/angled-gallery-hero) (free): A hero with the headline on the left and a gallery of images set at a 3D angle drifting slowly sideways on the right, two rows in opposite directions, pausing on hover. - [Contact Bar Hero](https://webberui.com/docs/contact-bar-hero) (free): A hero with a raised contact bar under the headline — one-click email copy, a phone link and a booking button — which can dock to the bottom of the viewport once the hero scrolls away. - [Count-Up Stats Hero](https://webberui.com/docs/count-up-stats-hero) (free): A dark hero React component: a left-aligned headline over 2–4 key figures. On entering the viewport the dividers draw in, each figure counts up from 0 in sequence, and an accent underline draws on completion. - [Drifting Logos Hero](https://webberui.com/docs/drifting-logos-hero) (free): A centred headline over a field of partner marks drifting slowly at different speeds and directions, with a subtle parallax that follows the pointer. - [Film Strip Hero](https://webberui.com/docs/film-strip-hero) (free): A hero with a sprocketed film strip looping endlessly beneath the headline; the faster the page scrolls, the faster the film runs, and hovered frames enlarge. - [Image Tile Grid Hero](https://webberui.com/docs/image-tile-grid-hero) (free): A hero with the headline on the left and a grid of image tiles on the right that enters outward from the centre, enlarging the hovered tile while the rest dim slightly. - [Ink Ridgeline Hero](https://webberui.com/docs/ink-ridgeline-hero) (free): Layered ink ridgelines are generated and drawn in one by one while the headline strokes in before filling, with the ridges separating in parallax as the page scrolls. - [Integration Hub Hero](https://webberui.com/docs/integration-hub-hero) (free): A grid of integration icons surrounds a central product icon while beams flow along the connectors towards the centre in turn; hovering a service lights up its own connector. - [Blur-In Headline Hero](https://webberui.com/docs/blur-in-headline-hero) (free): A minimal centred React hero where the headline rises character by character out of a blur and the single call-to-action breathes with a slow halo while everything else stays still; Chinese splits per character, English keeps words intact, and every timing is a CSS variable. - [Particle Field Hero](https://webberui.com/docs/particle-field-hero) (free): A hero over an interactive particle field: particles drift and link up when close, the pointer pushes them away, and the headline stays legible on top. - [Browser Frame Hero](https://webberui.com/docs/browser-frame-hero) (free): A hero with one large browser-style device frame filling the right side, which straightens and scales up from a slight tilt as the page scrolls, holding any product screen you put inside. - [Skyline Scroll Hero](https://webberui.com/docs/skyline-scroll-hero) (free): A scroll-driven React hero with a segmented city skyline — as you scroll the sky shifts from dusk to night, buildings light their windows section by section, the stage headline switches, and the moon rises in the last stage. - [Magnetic Lattice Hero](https://webberui.com/docs/magnetic-lattice-hero) (free): A dark tech-grid hero whose lattice of nodes and lines bends towards the pointer like a magnet, sending out a ripple wave from wherever you click. - [Sketchnote Pricing](https://webberui.com/docs/sketchnote-pricing) (free): A notebook-paper pricing section for React: hand-drawn borders and check marks stroke in, the recommended plan gets a sketched circle and note, and prices tween between monthly and yearly. - [Masonry Review Wall](https://webberui.com/docs/masonry-review-wall) (free): A masonry wall of testimonial cards of varying heights, each column moving at its own parallax speed as you scroll over a slowly morphing generative backdrop, with a show-more expansion. - [Case Note Pile](https://webberui.com/docs/case-note-pile) (free): Each testimonial becomes a case note — structured rollout details, a paper-clipped photo and a highlighter over the key line — and the selected note is pulled to the front of the pile. - [Portrait Overlay Quote](https://webberui.com/docs/portrait-overlay-quote) (free): A React testimonial section with the quote overlaid on a full-bleed portrait; switching crossfades the image with a slow push-in while the text rises line by line from a mask, with optional autoplay and drag to switch. - [Business Card Reel](https://webberui.com/docs/business-card-reel) (free): Business-card-style testimonials laid out on a horizontal reel that you drag or scroll to snap; cards grow sharper and larger towards the centre and shrink, fade and tilt towards the edges. - [Instant Photo Stack](https://webberui.com/docs/instant-photo-stack) (free): A pile of askew instant photos with the quote on the top print; click or flick it away to send it to the bottom, bringing the next one up as the stack re-fans. - [Color Block Quotes](https://webberui.com/docs/color-block-quotes) (free): A testimonial section React component: large colour blocks carry the quotes; choosing a name from the list recolours and gently squeezes the block, slides the selection bar to the new row and crossfades the quote, over a seeded dot or arc pattern. - [Filterable Review Grid](https://webberui.com/docs/filterable-review-grid) (free): A dense React grid of small testimonial cards that reflow with a layout animation when filtered by industry, lifting on hover with a border that lights up along the pointer, and expanding in place on click. - [Fanned Quote Deck](https://webberui.com/docs/fanned-quote-deck) (free): Testimonial cards fan out like a hand of playing cards; the hovered card lifts as its neighbours make room, and a click draws it to the centre enlarged for reading, with a button to deal the next. - [Flip Portrait Tiles](https://webberui.com/docs/flip-portrait-tiles) (free): A wall of square portrait tiles that flip over in 3D on hover or tap to reveal the quote on the back, with touch and keyboard support. - [Star-Rated Reviews](https://webberui.com/docs/star-rated-reviews) (free): A row of rated testimonials. The overall score counts up at the top while each card's stars fill one by one with fractional ratings, alongside a product thumbnail and a verified-purchase badge. - [Autoplay Quote Card](https://webberui.com/docs/autoplay-quote-card) (free): One large centred testimonial card that autoplays, with a bottom progress bar counting down to the next quote; content slides and fades between entries, with pause and manual controls. - [3D Tilt Review Card](https://webberui.com/docs/3d-tilt-review-card) (free): A slightly askew testimonial card that tilts in 3D perspective with a moving sheen as the pointer moves, the quote floating above the surface, flipping over to switch entries. - [Quote & Result Columns](https://webberui.com/docs/quote-result-columns) (free): Static testimonial columns React component, each with a key quote and a results figure; on entry the dividers draw down, the figures count up from zero and the columns appear in sequence, under an optional generative contour backdrop. - [Numbered Quote Slider](https://webberui.com/docs/numbered-quote-slider) (free): Large 01/02/03 numerals on the left roll digit by digit while the quote on the right slides in from the direction of travel, with drag, arrow-key navigation and a progress fraction. - [Orbiting Customer Avatars](https://webberui.com/docs/orbiting-customer-avatars) (free): Customer avatars circle slowly on one or two orbits; selecting or focusing an avatar pauses the orbit and crossfades that customer's quote into the centre. - [Avatar Tab Quotes](https://webberui.com/docs/avatar-tab-quotes) (free): A testimonial section React component: a vertical column of avatars and names acts as tabs, the selection marker slides along the column, and the quote on the right switches with a blurred crossfade while the avatar scales up. - [Review Ticker](https://webberui.com/docs/review-ticker) (free): A React single-line, endlessly scrolling ticker of short testimonials separated by stars and fading at both edges, with an optional reverse second line, pausing on hover or focus and a visible pause button. - [Typed Quote Row](https://webberui.com/docs/typed-quote-row) (free): A React row of testimonial cards that take turns typing out their quotes character by character with a blinking caret; after a pause the next card begins, while the others show their full text dimmed. - [One-Line Quote Carousel](https://webberui.com/docs/one-line-quote-carousel) (free): A minimal React carousel showing a single large-type sentence; quotes cross-fade vertically with a slight blur, leaving only the author and fine dot indicators below over slowly flowing hairlines. - [Bento Case Studies](https://webberui.com/docs/bento-case-studies) (free): An uneven bento testimonial mosaic for React mixing one large featured case, metric tiles, short-quote tiles and partner wordmark tiles; tiles appear in grid order, numbers count up, and a read-the-case link appears on hover. - [Social Post Reviews](https://webberui.com/docs/social-post-reviews) (free): Testimonials styled as generic social posts in a two-column feed; new posts slide in from the top at intervals and like counts tick up with a small bounce. - [Dark Portrait Spotlight](https://webberui.com/docs/dark-portrait-spotlight) (free): A React testimonial section that pairs a large portrait with the quote on a dark layout; a thumbnail row below switches customers, crossfading the portrait from greyscale into colour as the name and role slide in. - [Magazine Pull Quote](https://webberui.com/docs/magazine-pull-quote) (free): A magazine-spread React testimonial with an oversized quotation mark, a large serif pull quote, a drop cap and two-column body copy; on entry the mark scales into place and the text reveals line by line, with page turning for multiple testimonials. ### AI application UI Category page: https://webberui.com/components/category/ai - [AI Prompt Input](https://webberui.com/docs/ai-prompt-input) (free): An AI chat input — auto-growing height, IME-safe Enter to submit, and a submit arrow that flies out. - [AI Prompt Input Pro](https://webberui.com/docs/ai-prompt-input-pro) (pro): An advanced AI chat input integrating attachments, a model menu, a voice waveform, slash commands, @ mentions, and a streaming stop state. - [AI Message Stream](https://webberui.com/docs/ai-message-stream) (pro): A streaming message list — character-by-character typing fade-in, Markdown surfacing progressively, with built-in stop / retry animations and auto-scroll. - [AI Reasoning Panel](https://webberui.com/docs/ai-reasoning-panel) (free): A collapsible panel for an AI's thinking process — expanding automatically while thinking, with a shimmering title and step-by-step reveal, then totalling the elapsed time and optionally collapsing itself. - [AI Tool Call Card](https://webberui.com/docs/ai-tool-call-card) (pro): A status card for an AI tool call that transitions smoothly between running / success / error, and expands to show the arguments and result. - [AI Model Picker](https://webberui.com/docs/ai-model-picker) (free): A model dropdown picker with capability star ratings, speed / cost badges, and a recommended tag. - [Token Usage Meter](https://webberui.com/docs/ai-token-usage-meter) (pro): A context window usage meter with a segmented color bar, live count-up, and over-limit warnings. - [AI Source Citations](https://webberui.com/docs/ai-source-citations) (pro): Inline citation markers in an AI answer, with a source preview card that floats out on hover. - [AI Voice Orb](https://webberui.com/docs/ai-voice-orb) (pro): A Siri-style voice orb with four states — breathing while idle, undulating while listening, spinning while thinking, and pulsing while speaking. - [AI Diff Suggestion Card](https://webberui.com/docs/ai-diff-suggestion) (pro): AI suggestions presented as an inline diff — deletions struck through in red, additions in green, accepted or rejected one by one. - [AI Plan Steps](https://webberui.com/docs/ai-plan-steps) (free): A React component for agent plan tracking, driven purely by data — steps flow through pending → running → done / failed / skipped with tool-icon chips, nested sub-steps joined by a connector line, a breathing pulse on the active step, a completion ratio and total elapsed time; status changes swap icons via AnimatePresence and new steps slide in from below. - [AI Model Arena](https://webberui.com/docs/ai-model-arena) (pro): An arena-style side-by-side blind test React component: two anonymous responses stream in sync, you vote A / B / tie / both bad, then the cards flip to reveal the model names and provider color blocks, crown the winner, and roll the scoreboard numbers. - [AI Attachment Tray](https://webberui.com/docs/ai-attachment-tray) (free): Attachment tray that mounts above any composer: drop or paste files into thumbnail chips with upload progress rings, retry on failure, type icons, limit hints and drag-to-reorder - [AI Branch Switcher](https://webberui.com/docs/ai-branch-switcher) (free): A React version switcher for a single AI reply: a ‹ 2 / 3 › pager slides the content directionally, regenerate opens a new branch with a typing skeleton, an optional mini branch tree sits above the bubble, ←/→ switch versions while the bubble has focus, plus copy and model/time captions. - [Chat Scroller](https://webberui.com/docs/chat-scroller) (pro): A scroll container for chat: it follows streaming output while pinned to the bottom, shows a new-messages pill when you scroll away, keeps position when loading history, and can scroll to any message on demand. - [Scripted Chat Thread](https://webberui.com/docs/scripted-chat-thread) (free): A scripted chat thread React component: user bubbles spring in, a dotted typing indicator bounces, and assistant replies stream character by character, including code blocks, with optional looping. - [Code Change Explainer](https://webberui.com/docs/code-change-explainer) (pro): A stepped diff walkthrough: each step highlights removed or added lines while a side note card advances in sync, explaining the change in plain language. - [Synced Typing Grid](https://webberui.com/docs/synced-typing-grid) (free): A synced typing showcase React component that types the same prompt simultaneously into N differently styled input shells — chat, terminal, search bar and document editor — for side-by-side interface comparisons. - [Generate-and-Pick Flow](https://webberui.com/docs/generate-and-pick-flow) (pro): Prompt, skeletons, then a row of generated results slides in for the user to pick one that expands for confirmation — the standard flow for image and video generators. - [Agent Relay Workspaces](https://webberui.com/docs/agent-relay-workspaces) (pro): Agent workspaces take turns flipping in with 3D rotation, each running a mock task and handing its output to the next, ending in a combined result. - [Tool Permission Card](https://webberui.com/docs/tool-permission-card) (free): A permission card for when an agent asks to run a tool: shows the tool name and a parameter summary with allow, deny and always-allow, then collapses into a one-line record once decided. - [Agent Task Queue](https://webberui.com/docs/agent-task-queue) (free): An agent task queue React component with drag-to-reorder, a breathing pulse on the running item, and finished tasks sliding out into a collapsible Done group. - [Stack Trace Viewer](https://webberui.com/docs/stack-trace-viewer) (free): A stack trace viewer that lists each frame, highlights your own code while folding library frames, expands a frame into its source snippet, and copies the trace in one click. - [Subagent Status Card](https://webberui.com/docs/subagent-status-card) (free): A React subagent status card nested under its parent message, showing the task, a progress bar and current step, expandable to reveal its streamed output and collapsing to a one-line summary when done; a Group shares one connector line and staggers the cards in. - [Follow-up Suggestion Chips](https://webberui.com/docs/follow-up-suggestion-chips) (free): A React component for AI suggested follow-ups: chips stagger in under a reply, and the clicked chip arcs into the input and becomes its text while the rest fold away. Supports wrapping or a single scrolling row, arrow-key navigation and IME-safe keys. - [Test Results Panel](https://webberui.com/docs/test-results-panel) (free): A test results panel whose pass, fail and skip counts roll digit by digit over a smoothly growing ratio bar, with failed tests expanding to show an expected-versus-actual diff. ### Editorial layouts Category page: https://webberui.com/components/category/editorial - [Leader Line Captions](https://webberui.com/docs/leader-line-captions) (free): Magazine-style leader-line callouts — numbered captions arranged along a sidebar, connected by SVG leader lines to detail points in the image, drawn one by one on reveal and dimming into focus on hover. - [Marginalia Article](https://webberui.com/docs/marginalia-article) (pro): Tufte-style sidenote reading layout — a main column paired with a fixed-width margin column, superscript numbers in the body connected to their sidenotes by hairlines, sidenotes fading in and highlighting in sync as you scroll, and an automatic fallback to inline expandable notes on narrow screens. - [Cover Story Hero](https://webberui.com/docs/cover-story-hero) (pro): A magazine-cover hero composition — the masthead is image-masked and tucked behind the subject, cover lines are arranged in the four corners, the cursor drives parallax, and the cover lines fly off one by one on scroll to make way for the body copy. - [Interview Spread](https://webberui.com/docs/interview-spread) (free): A magazine interview layout — bold questions in a narrow left column alternating with serif answers in a wide right column, anchored by oversized quotation marks, with a speaker marker sliding along a sidebar rail and turns emerging in sequence as you scroll. - [Dot Leader Contents](https://webberui.com/docs/dot-leader-contents) (free): A table of contents in book-index style — dot leaders extend dot by dot from left to right to meet the page number, and a preview card floats out from the end of the row on hover. - [Running Head Folio](https://webberui.com/docs/running-head-folio) (free): A book running-head system — a sticky thin bar showing the current chapter title on the left and a page number derived from the scroll position on the right, with the chapter title flipping like a turning page and the folio incrementing in step at chapter boundaries. - [Pull Quote Lift](https://webberui.com/docs/pull-quote-lift) (free): When a sentence inside a paragraph scrolls into the viewport, a shared-element animation lifts it out and scales it up into a full-width pull quote, dropping it back inline when it leaves the viewport. - [Vertical Writing Spread](https://webberui.com/docs/vertical-writing-spread) (pro): A Chinese/Japanese vertical writing editorial layout built with CSS writing-mode — vertical columns flow right to left with horizontal pull quotes and images interleaved between them, text reveals character by character from top to bottom on entry, and horizontal scrolling advances the column order. - [Chaptered Report Shell](https://webberui.com/docs/chaptered-report-shell) (pro): An annual-report / white-paper page shell — a sticky chapter rail generated automatically from the content, giant chapter numbers cross-fading between chapters, full-bleed color-block transitions between sections, and a dual reading-progress indicator. - [Brand Swatch Board](https://webberui.com/docs/brand-swatch-board) (free): A brand-book swatch board React component: colour blocks fill in top to bottom, RGB, CMYK and WCAG contrast are computed automatically, text on each face picks white or black by contrast, and swatches lift on hover and copy their code on click. ### Grid systems Category page: https://webberui.com/components/category/grid - [Paginated Wave Grid](https://webberui.com/docs/paginated-wave-grid) (free): A paginated grid layout — on a page change the outgoing items exit in distance-based waves toward the turn direction while the new page's items flood in from the opposite side, with the page number and total rolling and morphing in sync. - [Zoomable Density Grid](https://webberui.com/docs/zoomable-density-grid) (free): A density zoom grid — switch the number of columns per row the way iOS Photos does, with every cell reflowing smoothly through a FLIP animation. - [Editorial Interleave Grid](https://webberui.com/docs/editorial-interleave-grid) (free): An editorial interleave grid — a product grid that automatically inserts a full-width image, pull quote, or video section every N cards, giving it a magazine-like rhythm. - [Sieve Filter Grid](https://webberui.com/docs/sieve-filter-grid) (free): A sieve filter grid — filtered-out items shrink and fly into the filter chip that triggered them, the count badge pulses in sync, and the surviving items close ranks with a FLIP reflow. - [Shove Reflow Grid](https://webberui.com/docs/shove-reflow-grid) (free): A shove reflow grid — switching category makes incoming cards squeeze into the lineup, shoving their neighbors aside before they spring back, while outgoing cards get pushed past the edge and tumble away. - [Widget Board](https://webberui.com/docs/widget-board) (free): An iOS home-screen widget grid — frosted glass cards in sm/md/lg size tiers, an edit mode where everything wiggles and can be removed, and a Smart Stack that pages on a timer. - [Agenda Tracks Grid](https://webberui.com/docs/agenda-tracks-grid) (free): A time × track conference agenda grid — the timeline column freezes to the left, session cards reflow into place with FLIP when tracks or speakers are filtered, and clicking a session expands the speaker and summary in place. - [Contact Sheet Gallery](https://webberui.com/docs/contact-sheet-gallery) (free): A grid gallery laid out like a photographic contact sheet, complete with sprocket-hole film edges and frame numbers; hover circles a frame in grease pencil, and the selected frame enlarges into a work print with a handwritten annotation. ### Kinetic typography Category page: https://webberui.com/components/category/typography - [Overprint Register](https://webberui.com/docs/overprint-register) (free): A heading rendered as several overprinted colour plates that slide in from misalignment into exact register when they enter the viewport, then drift slightly out of register again on hover. - [Leading Unfold](https://webberui.com/docs/leading-unfold) (free): Narrative through line height — a paragraph starts compressed into a near-solid block of ink, and scroll progress gradually unfolds the leading and tracking into a readable paragraph, growing the layout height and pushing the following sections down. - [Lineup Poster Section](https://webberui.com/docs/lineup-poster-section) (free): A festival-poster lineup layout — names are grouped into rows by tier with the size stepping down each level, and hovering or clicking one promotes it to a bigger row with a shared layout animation while the rest re-justify to fill the width. - [Type Scale Playground](https://webberui.com/docs/type-scale-playground) (free): An interactive modular type scale playground: pick a ratio or drag the slider, and every level on the page recomputes and reflows in sync with a spring animation. - [Type Specimen Stage](https://webberui.com/docs/type-specimen-stage) (pro): A variable-font showcase in the style of a foundry specimen page — a giant glyph, a weight ladder, and a size ramp — where dragging an axis slider makes the whole specimen tween and reflow in sync with Motion. - [Glyph Portal Layout](https://webberui.com/docs/glyph-portal-layout) (pro): A layout skeleton built from giant letters used as mask windows, each holding its own image or video that moves with parallax on scroll, with small type flowing around them. - [Alphabet Ledger](https://webberui.com/docs/alphabet-ledger) (free): An alphabetical index scroll — a poster-scale initial letter is the sticky anchor of each section, and at the handover the new letter pushes the previous one out with a thin-to-bold weight baton animation. - [Woodtype Flush Block](https://webberui.com/docs/woodtype-flush-block) (free): A woodtype flush heading — each line of a multi-line heading is solved onto the variable font's wdth axis so it stretches flush to both edges of the container, and on reveal the lines spring open from an extremely narrow width to the solved width, one after another. - [Launch Title Sequence](https://webberui.com/docs/launch-title-sequence) (pro): A launch-style sequence of title cards, each with its own entrance (blur-in, word stagger, punch, oversized pan, gradient keyword), background flips between cards and an optional HUD, played automatically or on scroll. - [Material Fill Text](https://webberui.com/docs/material-fill-text) (free): Large type filled with procedurally generated materials — wood grain, brushed metal, paper noise, marble and holo foil — cross-fading on autoplay or hover with a sweeping highlight, and no texture images loaded. ### Status & feedback Category page: https://webberui.com/components/category/feedback - [Async State Slot](https://webberui.com/docs/async-state-slot) (free): An async state slot that switches between the five idle/loading/empty/error/content states with height morphing and shared-element transitions. - [Optimistic Mutation Frame](https://webberui.com/docs/optimistic-mutation-frame) (free): An optimistic update container that inserts a translucent ghost item immediately, solidifies it into a real one when the server confirms, and shakes it back out on failure while handing the error off to a toast. - [Suspense Reveal Queue](https://webberui.com/docs/suspense-reveal-queue) (pro): A reveal conductor wrapping several loading sections — whichever finishes first joins the queue, reveals follow the author's order with a minimum interval, and late sections catch up automatically. - [Skeleton Orchestra](https://webberui.com/docs/skeleton-orchestra) (free): A skeleton-screen orchestration system: when loading finishes, the skeletons solidify into real content one by one in directional waves following the layout. - [Broadcast Bar System](https://webberui.com/docs/broadcast-bar-system) (free): A top broadcast bar system that stacks multiple announcements, rotates them through a priority queue, supports countdowns, CTAs, and dismissal memory, and springs its height changes so the content below is pushed smoothly. - [UI Sound Kit](https://webberui.com/docs/ui-sound-kit) (free): Lightweight interface sounds — click, hover, success, error and more — synthesized live with Web Audio, with built-in volume control, a global switch, and preference-respecting behavior; no audio files, no extra requests. - [Live Glance Strip](https://webberui.com/docs/live-glance-strip) (free): A live-activity information strip — the iOS Live Activity vocabulary brought to the web as a frosted-glass pill, with status text flipping vertically on update, a progress track advancing live, and details expanding on click. - [Streak Flame Counter](https://webberui.com/docs/streak-flame-counter) (free): A Duolingo-style streak flame — the flame flares when the number goes up and changes color at milestones - [Logo Trace Loader](https://webberui.com/docs/logo-trace-loader) (free): A React loader where a short dash orbits a logo's outline; on completion it closes into a full stroke and fades in the fill. Defaults to the WebberUI brand curve, accepts any path and can run as a full-page overlay. - [Alert Callout](https://webberui.com/docs/alert-callout) (free): An alert callout React component in five semantic variants that fades up on entry, collapses by height when dismissed so content below slides into place, and gives its icon a small pop when live content updates. - [Progress Bar](https://webberui.com/docs/progress-bar) (free): A spring-tweened linear progress bar with a rolling percentage, an indeterminate sweep and buffer layer, and a single pulse with a check mark on reaching 100%. - [Spinner Set](https://webberui.com/docs/spinner-set) (free): Four React loading indicators — ring, dots, bars and a tracing brand mark — with adjustable size, speed and label, falling back to a static icon with text under reduced motion. - [Quiz Card](https://webberui.com/docs/quiz-card) (free): A single- or multiple-choice quiz card React component. The correct option draws a check, wrong picks shake, an explanation expands and the next question slides in, with progress, a rolling score and an end screen. - [Drawn Capsule Stepper](https://webberui.com/docs/drawn-capsule-stepper) (free): An SVG stroke draws a capsule outline, then step pills inside light up in sequence — for setup wizards, task progress and onboarding flows. ### Carousels Category page: https://webberui.com/components/category/carousel - [Perspective Carousel](https://webberui.com/docs/perspective-carousel) (free): A 3D perspective carousel (coverflow style) with drag to page, looping, autoplay, and controlled and uncontrolled modes. - [Swipe Cards](https://webberui.com/docs/swipe-cards) (free): A Tinder-style swipe card stack that can be dragged, flies out by velocity, and offers programmatic left/right swipes and an empty state. - [Cover Carousel](https://webberui.com/docs/cover-carousel) (free): A horizontal carousel of cover cards whose indicator is driven continuously (scrubbed) by the scroll ratio, with full keyboard navigation and ARIA. - [ClipPath Carousel](https://webberui.com/docs/clippath-carousel) (free): A carousel with clip-path reveal transitions in four built-in styles — wipe, iris, diagonal, and box — supporting drag, autoplay, and controlled and uncontrolled modes. - [Thumbnail Gallery](https://webberui.com/docs/thumbnail-gallery) (free): A gallery whose main image and thumbnail strip stay in sync, supporting drag to change images, arrow keys, slide/fade transitions, and a thumbnail strip on any of four sides. - [Stacked Peek Carousel](https://webberui.com/docs/stacked-peek-carousel) (free): A card stack carousel where the layers behind peek out, and the next card moves up to take the front on each swipe. - [Vertical Story Carousel](https://webberui.com/docs/vertical-story-carousel) (pro): A stories-style vertical carousel: segmented progress bars at the top, autoplay, and tap to switch - [Radial Burst Gallery](https://webberui.com/docs/radial-burst-gallery) (free): Images burst out from the centre into a ring that slowly orbits; selecting one flies it to the centre while the rest shrink back onto the ring, with keyboard navigation. - [Velocity Scene Slider](https://webberui.com/docs/velocity-scene-slider) (pro): A scene-card slider whose release velocity becomes the next card's spring velocity, with a stretching pill indicator. ### Scrollytelling Category page: https://webberui.com/components/category/scrollytelling - [Exploded View Scroll](https://webberui.com/docs/exploded-view-scroll) (pro): A scroll-driven exploded view — once the section pins, the product's cut-out layers blow apart along the Z axis, the specs annotated on each layer reveal in order, and at the end of the scroll everything collapses back into the complete product and releases into the next section. - [Recap Story Scroll](https://webberui.com/docs/recap-story-scroll) (pro): A full-screen, scene-by-scene scroll-snap narrative scroll — as each scene settles, oversized numbers and keywords are choreographed in, the background color transitions across the whole scene by theme, and progress dots and autoplay are built in. - [Scrollytelling Stage](https://webberui.com/docs/scrollytelling-stage) (pro): A two-column scroll narrative with a sticky data stage on the left and step-by-step prose on the right; the stage's chart state, highlight band, and annotation line morph between steps by tweening on the step index. - [Atlas Plate](https://webberui.com/docs/atlas-plate) (pro): A field-guide style scroll walkthrough — a full-bleed plate is pinned on one side and numbered notes run down the other; scrolling to a note pans and zooms the camera to its hotspot and lights up the numbered leader line. - [Strata Headers](https://webberui.com/docs/strata-headers) (free): Section headers pin to the top and stack up in order once you scroll past them, accumulating into a live table of contents built out of your reading progress. - [Waypoint Stage](https://webberui.com/docs/waypoint-stage) (pro): Place each passage of content by coordinate on an oversized canvas, and let scroll drive a camera that pans, zooms, and rotates along a waypoint path for a Prezi-style spatial narrative. - [Data Duel Split](https://webberui.com/docs/data-duel-split) (pro): A page-scale A/B duel split screen — scrolling reveals the metrics round by round while the divider in the middle slides like a tug-of-war rope and the running score at the bottom jumps in sync. ### Full templates Category page: https://webberui.com/components/category/templates - [Web3 Crypto Landing](https://webberui.com/docs/web3-crypto-landing) (pro): A full-site marketing template for crypto and web3 products, with a particle mesh background, a 3D tilting token, and scroll reveals. ## Guides - [Three ways to build an animated gradient border in Tailwind](https://webberui.com/guides/animated-gradient-border): Three CSS techniques for an animated gradient border: a rotating conic-gradient layer, an @property angle animation and a mask cut-out, in Tailwind v4. - [WebberUI vs Aceternity UI vs Magic UI vs React Bits: animated React component libraries compared](https://webberui.com/guides/animated-react-component-libraries): WebberUI, Aceternity UI, Magic UI and React Bits compared on install method, licence, dependencies, component counts, paid plans and languages. - [Choosing a React animation library in 2026: Motion, GSAP, React Spring, and component libraries](https://webberui.com/guides/react-animation-libraries): Motion, GSAP and React Spring compared on API style, bundle size, licence and Next.js App Router usage, and where animated component libraries fit in. - [Parallax scrolling in React: CSS, Motion's useScroll, and ready-made components](https://webberui.com/guides/react-parallax-scroll): Three ways to make a React parallax scroll effect, with October 2026 browser support for CSS scroll-driven animations, plus performance and reduced-motion tips. - [Building an infinite marquee with Tailwind CSS (pause, reverse, reduced motion)](https://webberui.com/guides/tailwind-marquee): An infinite marquee in Tailwind CSS v4 and React: @theme keyframes, pause on hover and focus, reverse, edge fade, a pause button and reduced motion. - [Validating Taiwan national ID numbers in React](https://webberui.com/guides/taiwan-id-validation): The Taiwan national ID check digit explained, including the letter table, weights, and 2021 resident certificate format, plus a tested TypeScript validator. - [Validating Taiwan business tax IDs (UBN) in React: the 2023 rule](https://webberui.com/guides/taiwan-tax-id-validation): How Taiwan's 8-digit Unified Business Number check digit works, why the 2023 divisible-by-5 rule breaks old validators, and a tested TypeScript function. ## Full-page templates All Pro. They land under app/ in your project. - [Developer Portfolio](https://webberui.com/templates/developer-portfolio) (pro): Complete personal/developer portfolio site: hero, featured projects, about, skills, contact. - [SaaS Landing Page](https://webberui.com/templates/saas-landing) (pro): SaaS product marketing site: hero, features, bento grid, social proof, pricing, CTA. - [AI Product Landing Page](https://webberui.com/templates/ai-product-landing) (pro): Landing page for an AI agent or app: prompt input mock-up, features, benefits, pricing. - [Developer Tool Landing Page](https://webberui.com/templates/dev-tool-landing) (pro): Landing page for a developer tool or API: code snippets, feature highlights, pricing. - [Startup Landing Page](https://webberui.com/templates/startup-landing) (pro): Minimal landing page for an early-stage startup: hero, features, pricing. - [General Marketing Landing Page](https://webberui.com/templates/marketing-landing) (pro): Reusable multi-section marketing landing page with every core marketing section. - [Agency / Studio](https://webberui.com/templates/agency-studio) (pro): Agency or creative studio site: services, packages, work, pricing. - [Professional Services](https://webberui.com/templates/professional-services) (pro): Corporate site for law, consulting and other professional services firms. - [Mobile App Landing Page](https://webberui.com/templates/mobile-app-landing) (pro): App landing page: interactive app preview, mobile-first layout, download CTA. - [Single-Product Commerce Page](https://webberui.com/templates/product-ecommerce-landing) (pro): Single-product launch page: showcase, specs, cart and reviews. - [Full-Stack SaaS Starter](https://webberui.com/templates/saas-starter) (pro): Production-ready SaaS starting point: marketing page plus auth and dashboard previews. - [Blog](https://webberui.com/templates/blog) (pro): Customisable MDX blog: post list, featured posts, categories. - [Personal Writing Site](https://webberui.com/templates/personal-writing-site) (pro): Personal site: about/work/writing, spotlight hover, built-in blog. - [Changelog](https://webberui.com/templates/changelog) (pro): Clean timeline of product updates and releases. - [Docs / API Reference](https://webberui.com/templates/docs-api-reference) (pro): Dark, code-first API reference and product documentation site. - [Podcast Show](https://webberui.com/templates/podcast-show) (pro): Podcast site: show intro, episode list, player. - [Online Course](https://webberui.com/templates/online-course) (pro): Landing page for a course or info product, with syllabus and enrolment. - [Conference / Event](https://webberui.com/templates/conference-event) (pro): Event announcement site: agenda, speakers, ticket tiers, venue. - [Directory Site](https://webberui.com/templates/directory-site) (pro): Business directory: search, filters, listing cards, detail view. - [Admin Dashboard](https://webberui.com/templates/admin-dashboard) (pro): Back-office dashboard: sidebar, metric cards, charts, tables, activity feed. - [AI Generation Tool](https://webberui.com/templates/ai-generation-tool) (pro): AI generation app plus marketing page: generation UI, token economy, marketplace. - [Immersive Scroll Story](https://webberui.com/templates/immersive-scroll-story) (pro): Long-form scrollytelling: one continuous narrative unfolding section by section, scroll-bound animation. - [Horizontal Scroll Showcase](https://webberui.com/templates/horizontal-scroll-showcase) (pro): Gallery where vertical scrolling drives horizontal travel through the work. - [3D Product Reveal](https://webberui.com/templates/product-3d-reveal) (pro): Scroll-driven CSS 3D product rotation, exploded view and repositioning, with specs revealed step by step. - [Parallax Narrative](https://webberui.com/templates/parallax-narrative) (pro): Layered-depth story: foreground, midground and background move at different speeds for a dimensional scroll. - [Interactive Case Study](https://webberui.com/templates/interactive-case-study) (pro): In-depth project page: background imagery reshapes and fills per section, blending motion with copy. - [Kinetic Type Hero](https://webberui.com/templates/kinetic-type-hero-page) (pro): Oversized variable-font hero whose letters stretch and recompose with scroll and cursor. - [Canvas Hero Page](https://webberui.com/templates/webgl-canvas-hero-page) (pro): Full-viewport canvas hero: fluid, particles and distortion reacting to cursor and scroll. - [Pinned Sticky Sequence](https://webberui.com/templates/pinned-sticky-sequence) (pro): Sticky-pinned viewport that plays a frame sequence or step-by-step story in place. - [Snap Full-Page Deck](https://webberui.com/templates/snap-fullpage-deck) (pro): Full-screen snap sections that lock into place one by one, each with its own entrance animation. - [Cursor-Driven Gallery](https://webberui.com/templates/cursor-driven-gallery) (pro): Tactile gallery where images distort, attract, tilt and trail with the cursor. - [Infinite Canvas Explorer](https://webberui.com/templates/infinite-canvas-explorer) (pro): Tile canvas you can drag in any direction — non-linear, map-like exploration. - [Immersive 3D Journey](https://webberui.com/templates/immersive-3d-journey) (pro): CSS 3D spatial journey: scroll through corridors and doorways that reveal each chapter. - [Cinematic Video Scrub](https://webberui.com/templates/cinematic-video-scrub) (pro): Cinematic hero that advances a background video frame by frame on scroll, with text overlays. - [Scroll Theatre Home](https://webberui.com/templates/codex-scroll-theater) (pro): A pinned canvas theatre changes scenes as you scroll while chapter copy fades in (Codex-style scroll narrative). - [Terminal Typing Home](https://webberui.com/templates/terminal-typing-home) (pro): The hero is a terminal that types and runs: commands print line by line, the cursor blinks, and the output lights up the sections below. - [Cursor Gravity Home](https://webberui.com/templates/cursor-gravity-home) (pro): A full-bleed particle field disturbed by cursor attraction and repulsion; headline characters drift towards it too. - [Code Morph Home](https://webberui.com/templates/code-morph-home) (pro): The hero code block morphs smoothly between languages and frameworks, with line numbers and highlighting transitioning in step. - [Sticky Chapter Home](https://webberui.com/templates/sticky-chapter-home) (pro): Chapter copy scrolls on the left while the pinned visual on the right changes scene; the progress dots jump between chapters. - [Magnetic Nav Home](https://webberui.com/templates/magnetic-nav-home) (pro): Nav and CTA magnetise to the cursor, hero type floats up character by character, and sections enter with a sense of direction. - [Flow Field Home](https://webberui.com/templates/canvas-flowfield-home) (pro): Canvas particles drift along a Perlin-style vector field; the cursor stirs the flow. - [Scroll Scrub Home](https://webberui.com/templates/scroll-scrub-frames-home) (pro): Scroll progress scrubs a hero frame sequence (procedurally generated gradient frames) while the text overlay changes section by section. - [Tilt Scene Home](https://webberui.com/templates/tilt-scene-home) (pro): The hero is a multi-layer 3D card scene: the whole set tilts with the mouse, each card at its own depth. - [Giant Text Mask Home](https://webberui.com/templates/text-mask-home) (pro): A giant headline filled with moving gradient and particles; on scroll the type scales into a viewport mask you pass through into the content. - [Spotlight Home](https://webberui.com/templates/spotlight-follow-home) (pro): A dark page lit by a cursor spotlight: sections develop only where the light falls, while the CTA stays lit. - [Layered Marquee Home](https://webberui.com/templates/layered-marquee-home) (pro): Three marquee layers at opposing speeds interleave with oversized type; hover slows them, click reverses them. - [Drag Showcase Home](https://webberui.com/templates/drag-showcase-home) (pro): A draggable work carousel with inertial spring-back; drag speed drives how far the cards tilt. - [Liquid Blob Home](https://webberui.com/templates/blob-morph-home) (pro): Several liquid blobs merge and morph slowly in the background (metaball feel), shifting palette as you scroll. - [Keyboard Hero Home](https://webberui.com/templates/keyboard-hero-home) (pro): The hero invites you to press any key; each keystroke fires its own animation — letters popping, ripples, musical notes. - [Split Sync Home](https://webberui.com/templates/split-sync-home) (pro): Left and right panes scroll in opposite directions in sync; the centre handle drags to change the ratio. - [Grid Reveal Home](https://webberui.com/templates/grid-reveal-home) (pro): A full-bleed grid develops content thumbnails cell by cell on hover; clicking a cell expands it into a section. - [Zoom Portal Home](https://webberui.com/templates/zoom-portal-home) (pro): Scroll through a series of expanding portals (circular and rectangular masks), one chapter per layer. - [Live Playground Home](https://webberui.com/templates/live-playground-home) (pro): Switch examples in the code pane on the left and the preview on the right plays the animation live (simulated playground). - [Pulse Reactive Home](https://webberui.com/templates/pulse-reactive-home) (pro): A simulated audio equaliser drives the background and card scaling; click to switch the rhythm. - [Minimal Centred Home](https://webberui.com/templates/minimal-center-home) (pro): Centred layout with generous whitespace: one line, one CTA, one product visual. - [Split Hero Home](https://webberui.com/templates/split-hero-home) (pro): A 50/50 split of copy and visual that turns into alternating sections as you scroll. - [Bento Home](https://webberui.com/templates/bento-home) (pro): The whole page organised as a bento grid: hero, features, numbers and testimonials all live in cells. - [Editorial Home](https://webberui.com/templates/editorial-home) (pro): Magazine grid with serif headlines, drop caps and multi-column text. - [Sidebar Dock Home](https://webberui.com/templates/sidebar-dock-home) (pro): Fixed left sidebar nav with content scrolling on the right — an app-like marketing site. - [Full-Bleed Visual Home](https://webberui.com/templates/fullbleed-visual-home) (pro): Full-bleed gradient and graphic visuals carry the page, text sits on top, and sections switch edge to edge. - [Product Shot Home](https://webberui.com/templates/product-shot-home) (pro): A large product screenshot (CSS window frame) takes the lead, with feature callouts around it. - [Long Story Home](https://webberui.com/templates/long-story-home) (pro): A single-column long-form narrative with visuals and figures between the paragraphs. - [Portfolio Wall Home](https://webberui.com/templates/portfolio-wall-home) (pro): A masonry wall of work thumbnails as the home page itself; hover reveals the details. - [Pricing-First Home](https://webberui.com/templates/pricing-first-home) (pro): The hero is the pricing cards themselves, followed immediately by a feature comparison table. - [Feature Grid Home](https://webberui.com/templates/feature-grid-home) (pro): An even grid of feature cards carries the page, under a compact hero. - [Testimonial-Led Home](https://webberui.com/templates/testimonial-led-home) (pro): Opens on a wall of customer quotes, backed up by numbers and a logo wall. - [Dashboard Home](https://webberui.com/templates/dashboard-home) (pro): The home page is a product dashboard mock-up: metric cards, charts and tables. - [Roadmap Home](https://webberui.com/templates/roadmap-home) (pro): A timeline roadmap carries the page: shipped, in progress, planned. - [Masonry Gallery Home](https://webberui.com/templates/masonry-gallery-home) (pro): Uneven-height masonry image cards with filter pills. - [Docs Hub Home](https://webberui.com/templates/docs-hub-home) (pro): Search box, popular topic cards and a category index — a documentation portal. - [Community Hub Home](https://webberui.com/templates/community-home) (pro): Member avatar wall, event list and highlighted discussions. - [Launch Announcement Home](https://webberui.com/templates/launch-home) (pro): Product launch page with a countdown, subscribe form and feature teasers. - [Asymmetric Home](https://webberui.com/templates/asymmetric-home) (pro): An asymmetric grid with overlapping elements — an editorial feel that breaks the column. - [Multilingual SaaS Home](https://webberui.com/templates/i18n-saas-home) (pro): An international SaaS layout with a language switcher mock-up and localised content sections. - [Bistro Restaurant](https://webberui.com/templates/restaurant-bistro) (pro): French bistro site: the chef's story, seasonal menu, reservations, atmosphere gallery. - [Real Estate Agency](https://webberui.com/templates/real-estate-agency) (pro): Boutique agency: featured listing cards, area search, sales figures, adviser team. - [Fitness Studio](https://webberui.com/templates/fitness-studio) (pro): High-intensity gym: class schedule, coaches, membership pricing, member transformation numbers. - [Travel Tour Agency](https://webberui.com/templates/travel-tour-agency) (pro): In-depth tours: destination cards, day-by-day itinerary, traveller reviews, seasonal picks. - [Wedding Invitation](https://webberui.com/templates/wedding-invitation) (pro): Single-page wedding invitation: countdown, story timeline, schedule, venue, RSVP. - [Law Firm](https://webberui.com/templates/law-firm) (pro): Law firm site: practice areas, attorneys, case results, consultation booking. - [Dental Clinic](https://webberui.com/templates/dental-clinic) (pro): Friendly dental practice: services, dentists, what a visit looks like, online booking. - [Kids Learning Centre](https://webberui.com/templates/kids-learning-center) (pro): Children's education centre: colour-coded course cards, teachers, classrooms, trial class sign-up. - [Coffee Roastery](https://webberui.com/templates/coffee-roastery) (pro): Speciality coffee roaster: bean list, roasting philosophy, flavour wheel, subscription delivery. - [Architecture Firm](https://webberui.com/templates/architecture-firm) (pro): Minimal architecture practice: project grid, design philosophy, awards, commission process. - [Band Tour Site](https://webberui.com/templates/music-band-tour) (pro): Indie band site: tour dates, latest album, music videos, merch, fan newsletter. - [Photography Studio](https://webberui.com/templates/photography-studio) (pro): Portrait studio: masonry portfolio, package pricing, how a shoot runs, date booking. - [Fashion Store Home](https://webberui.com/templates/fashion-store-home) (pro): Apparel brand storefront: new-arrival carousel, category entries, styling picks, membership sign-up. - [Product Detail Page](https://webberui.com/templates/product-detail-page) (pro): Full product detail page: gallery, variant selection, reviews, recommendations, sticky buy bar. - [Sneaker Drop Store](https://webberui.com/templates/sneaker-drop-store) (pro): Limited sneaker raffle drop: countdown, size registration, release calendar, raffle rules. - [Beauty Brand Store](https://webberui.com/templates/beauty-brand-store) (pro): Skincare and beauty brand: hero products, ingredient stories, skin-type quiz, bundle offers. - [Furniture Store](https://webberui.com/templates/furniture-store) (pro): Scandinavian furniture shop: room-by-room sections, material stories, space inspiration, measuring service. - [Grocery Delivery](https://webberui.com/templates/grocery-delivery) (pro): Fresh grocery delivery: quick category shopping, limited-time deals, shop-the-recipe, delivery slots. - [Finance Dashboard](https://webberui.com/templates/finance-dashboard) (pro): Personal finance dashboard: net worth overview, income and expense charts, budget progress, transaction list. - [Project Kanban App](https://webberui.com/templates/project-kanban-app) (pro): Kanban project management UI: multi-column task cards, filter bar, member avatars, progress stats. - [Chat Messenger App](https://webberui.com/templates/chat-messenger-app) (pro): Real-time messaging UI: conversation list, chat bubbles, typing indicator, sticker panel. - [Email Client](https://webberui.com/templates/email-client-app) (pro): Three-column mail app: folders, message list, reading pane, compose modal. - [Music Player](https://webberui.com/templates/music-player-app) (pro): Music streaming UI: now playing, playlist grid, scrolling lyrics, play queue. - [Crypto Exchange](https://webberui.com/templates/crypto-exchange-app) (pro): Exchange UI: market list, candlestick chart, order panel, portfolio breakdown. - [News Magazine](https://webberui.com/templates/news-magazine) (pro): Digital news magazine home: headlines, category blocks, features, live rankings, subscription wall. - [Recipe Collection](https://webberui.com/templates/recipe-collection) (pro): Recipe content site: featured recipe cards, step-page mock-up, ingredient list, category browsing. - [Movie Review Site](https://webberui.com/templates/movie-review-site) (pro): Film criticism site: this week's reviews, star ratings, curated lists, filmmaker interviews. - [Webinar Landing Page](https://webberui.com/templates/webinar-event-landing) (pro): Webinar registration page: agenda, speakers, countdown, sign-up form, FAQ. - [Book Launch Landing Page](https://webberui.com/templates/book-launch-landing) (pro): Book pre-order page: cover showcase, sample chapter, author bio, pre-order tiers. - [Mobile Game Landing Page](https://webberui.com/templates/mobile-game-landing) (pro): Mobile game pre-registration page: world lore, character gallery, gameplay features, pre-registration rewards.