Component navigation

Components

Search the complete HulianUI component catalog.

Layout15

Containers

Layout

Composes full-page header, sider, content, and footer regions with a collapsible sider.

AdminLayout

Provides an admin shell with navigation, header actions, managed route tabs, and scrollable content.

ScrollArea

Adds slim custom scrollbars for vertical, horizontal, or two-axis overflow.

Viewport

Creates a container-query viewport with web, tablet, and phone width presets.

Resizable

Builds keyboard-accessible horizontal or vertical split panes with size constraints.

AspectRatio

Keeps media or content inside a fixed width-to-height ratio.

FitScreen

Scales a fixed design canvas to fit, cover, or stretch within its container.

PreviewSandbox

Isolated preview shell with device viewports, scale-to-fit, and error capture.

Masonry

Distributes items deterministically across responsive columns without hydration-order changes.

Container

Constrains type-safe polymorphic content through 3xl widths with independent centering and horizontal padding controls.

Arrangement

Stack

Arranges type-safe polymorphic flex content with gap, alignment, wrapping, and responsive direction through 2xl.

Grid

Defines type-safe polymorphic grid columns through the 2xl breakpoint with gaps and child row or column spans.

Spacer

Inserts token-scaled horizontal or vertical layout space without semantic content.

Divider

Separates content with optional text, alignment, dashed styling, or vertical orientation.

Separator

Renders an accessible horizontal or vertical separator with correct geometry.

Typography37

Text

Text

Applies semantic size, tone, weight, truncation, and polymorphic element choices to text.

Heading

Renders semantic heading levels with independently configurable visual size and weight.

Prose

Styles rich-text descendants with consistent semantic typography tokens.

Markdown

Renders read-only Markdown blocks, inline formatting, links, quotes, lists, and fenced code.

Formula

KaTeX-powered two-dimensional layout for piecewise functions, matrices, and large delimiters.

AuroraText

Animates a multicolor aurora gradient across inline text.

LineShadowText

Offsets a hard-edged striped shadow behind short display text.

AnimatedShinyText

Sweeps a restrained highlight across inline text.

AnimatedGradientText

Moves a configurable gradient through text for animated emphasis.

WordRotate

Cycles through words with enter and exit transitions.

TypingAnimation

Reveals text character by character with configurable timing and cursor behavior.

SparklesText

Surrounds text with animated sparkles generated on the client.

SplitText

Splits text into animatable characters or words for staggered reveal effects.

BlurText

Reveals text through staged blur, opacity, and position transitions.

FlipText

Flips a heading character by character in 3D when the pointer enters it.

TextReveal

Sweeps a colour band across the text, revealing it from transparent to solid.

DecryptedText

Scrambles and progressively resolves characters into the supplied text.

GlitchText

Adds layered chromatic offsets and jitter to create a controlled glitch effect.

CircularText

Places characters evenly around a rotating circular path with hover speed modes, inherited color, and a static reduced-motion state.

ScrollReveal

Reveals words progressively as their text block enters and moves through the viewport.

TrueFocus

Moves an animated focus frame and blur treatment between words.

ASCIIText

Renders supplied text as an animated ASCII glyph field.

CurvedLoop

Repeats text along a draggable curved path in a continuous loop.

FallingText

Turns words into gravity-driven interactive falling bodies.

FuzzyText

Adds animated displacement noise to text while keeping its silhouette readable.

ScrambledText

Temporarily scrambles characters before resolving the original text.

ScrollFloat

Floats split text into place in response to scroll progress.

ScrollVelocity

Moves repeated text horizontally according to scroll speed and direction.

Shuffle

Scrambles characters and then locks the original text into place in sequence.

TextCursor

Drops a fading trail of text glyphs along pointer movement inside a container.

TextPressure

Varies glyph weight, width, slant, and opacity according to pointer proximity.

VariableProximity

Adjusts variable-font axes as the pointer approaches each character.

Code

Code

Styles short inline code fragments with a token-aware monospace surface.

CodeBlock

Displays multiline code with an optional language label and copy action.

Snippet

Presents a compact command or code snippet with one-click copying.

CodeDiff

Shows line-oriented additions and removals in unified or split views with line numbers and a summary.

Kbd

Displays keyboard keys or shortcuts with inline keycap styling.

Forms70

Buttons

Button

Triggers actions through solid, soft, outline, ghost, or danger variants.

ShimmerButton

Adds a moving shimmer treatment to a call-to-action button.

InteractiveHoverButton

Expands a dot into a full background and reveals a trailing arrow on hover.

RainbowButton

Animates a multicolor border around a prominent action button.

PulsatingButton

Emphasizes an action with a configurable pulse ring around the button.

RippleButton

Emits pointer-positioned ripples when the button is activated.

ButtonGroup

Joins related buttons into a segmented horizontal or vertical control.

SocialButton

Provides branded sign-in buttons with service icons and loading states.

Basic Inputs

Input

Collects single-line text with prefixes, suffixes, and an invalid state.

Textarea

Collects multiline text in an auto-sizing field.

CellEditor

Edits one table cell in place: plain-text appearance at rest, commit on blur or Enter, no write when unchanged, Esc rollback, muted missing values, CSS field-sizing growth, and self-managed pending state.

Select

Chooses one or multiple values from an anchored option popup.

Checkbox

Toggles an independent boolean value with an indeterminate state.

CheckboxGroup

Coordinates an array of values across a group of checkboxes.

Radio

Selects one mutually exclusive value from an accessible radio group.

Switch

Toggles a binary setting with a compact track-and-thumb control.

Toggle

Switches a single action or formatting option between pressed and unpressed states.

Segmented

Selects one option from a compact segmented control with a moving indicator.

Slider

Selects a numeric value or range along a keyboard-accessible track.

NumberField

Edits numeric values with bounds, step buttons, and keyboard stepping.

ElasticSlider

Adds elastic track deformation and spring feedback to a numeric slider.

Advanced Inputs

MathTextarea

LaTeX input with formula templates, live KaTeX preview, syntax checks with line and column, and an injectable visual editor tab.

QuestionEditor

Structured editor for one math question: seven types, figures, options, blanks, rubric, and a live QuestionCard preview.

QuestionAnswer

Student answer card: the right control per question type, missing options stated plainly, submit only when every blank is filled, verdict and explanation after answering.

MathField

MathLive-powered formula input: type LaTeX visually, inject it into MathTextarea and QuestionAnswer, and grade with CAS equivalence.

SecretField

Masks sensitive values while supporting reveal and copy actions.

PasswordGenerator

Generates configurable passwords with strength feedback and copy support.

Combobox

Filters selectable options through either a trigger popup or an inline input.

RemoteSelect

Loads debounced remote options with request cancellation, pagination, initial-value resolution, and multiple selection.

Listbox

Presents a keyboard-navigable single or multiple selection list.

Mentions

Suggests and inserts mention tokens while the user types structured text.

InputOTP

Collects one-time codes across fixed-length slots with auto-advance, backspace, and full-code paste.

Rating

Captures a controlled rating with radio semantics, custom icons, and hover preview.

Upload

Selects files through click or drag-and-drop with validation and progress states.

RegionSelect

Selects normalized original-image pixel boxes with aspect constraints, deterministic rounding, overlays, and explicit load failures.

ImageCropper

Lets users pan, pinch, zoom, and crop an image to a fixed ratio before Blob export.

ScopeMatrix

Edits allow and deny scope lists with suggestions, an effective-scope summary, and read-only or controlled modes.

Transfer

Moves selected records between available and chosen lists with search support.

Cascader

Selects a value through linked hierarchical option columns.

TreeSelect

Selects one or more values from a searchable hierarchical tree.

RegionCascader

Selects province, city, and district values through linked regional levels.

CountrySelect

Searches and selects countries with codes, flags, and optional calling prefixes.

MarkdownEditor

Edits Markdown through a WYSIWYG TipTap surface with Markdown input and output.

RichTextEditor

Edits HTML through a WYSIWYG TipTap surface, with a trimmable toolbar, injected image uploads, and paste sanitizing.

CodeEditor

Dependency-free code editor with syntax colors, a gutter, and full keyboard editing.

IssueReporter

GitHub issue draft builder that renders a template to Markdown and builds a prefill link.

ColorPicker

Selects colors through saturation and hue controls with HEX, RGB, or HSL output.

ColorField

Edits a hexadecimal color through a swatch, system picker, text input, and shorthand expansion.

ColorSwatchPicker

Chooses a color from a labeled, keyboard-accessible swatch collection.

Choicebox

Selects one rich option from cards containing titles, descriptions, and supporting content.

EmojiPicker

Searches and selects emoji by category, including a recent-use section.

VoiceRecord

Presents hold-to-talk or tap-to-toggle recording controls with waveform and processing states.

IconPicker

Searches and selects an icon from a categorized visual grid.

InspectorPanel

Schema-driven property inspector that derives its controls from a field description.

Date and Time

Calendar

Displays a navigable day, month, or year calendar with limits and disabled-date rules.

DatePicker

Selects a date from an input-triggered calendar popup.

DateTimePicker

Combines calendar and time controls for a single date-time value.

DateRangePicker

Selects a start and end date from a dual-month range calendar.

TimePicker

Selects a time from hour and minute option controls.

TimeField

Edits hour, minute, and optional second segments directly from the keyboard.

Form Frameworks

Form

Coordinates named fields with structured submission and field errors.

ModalForm / DrawerForm

Runs validated forms inside modal or drawer containers with submit lifecycle handling.

ProForm

Coordinates form state with submit-reset footers, async loading, and custom footer content.

StepsForm

Splits a validated workflow across ordered steps with controlled navigation.

LoginForm

Provides a managed credential form with validation, controlled values, field appearance slots, remember copy, and an optional card surface.

AuthPanel

Builds the branded half of a split authentication page with token-based gradients, highlights, content, and a footer.

ClickCaptcha

Collects an ordered set of relative image coordinates with undo, refresh, and keyboard crosshair controls.

Label

Renders a native label element with the same styling Field uses, plus htmlFor and native attribute passthrough.

Field

Composes labels, controls, help text, validation messages, and required state, stacked vertically or side by side.

SearchForm

Builds collapsible query filters with reset and submit actions for data lists.

Data Display94

Collections

QuestionCard

Displays textbook questions with type, stem, options, subquestions, media, source, and review status.

Table

Renders sortable semantic tables with clickable rows, column headers, and empty states.

Book3D

Displays a book cover with perspective depth and interactive 3D tilt.

ProTable

Combines business-table columns, querying, sorting, selection, pagination, and toolbar actions.

PricingTable

Compares priced items in transposed feature rows with highlights, badges, and sticky headers.

JsonViewer

Inspects collapsible JSON values with syntax coloring, copying, and depth controls.

EditableTable

Edits validated row and cell values directly within a data table.

List

Presents accessible named lists with structured items, metadata, actions, grid mode, empty states, and pagination or load-more controls.

Descriptions

Displays labeled record fields in horizontal or vertical, bordered or unbordered layouts.

RowActions

Renders a table row's action set with tone-based hierarchy, an overflow menu past a set count, and built-in confirmation.

Tree

Renders expandable hierarchical nodes with selection and keyboard navigation.

Card

Groups related content into header, body, and footer regions.

Carousel

Navigates scroll-snap slides with arrows, dots, autoplay, looping, dragging, and keyboard controls.

Video

Plays file or HLS video with custom controls, chapters, resume, picture-in-picture, and fullscreen.

BentoGrid

Arranges feature cards across configurable row and column spans with a hover action.

Image

Loads images with fade-in, fallback, radius, and optional hover zoom.

MagicCard

Adds a pointer-following gradient highlight to a content card.

AnimatedList

Reveals child items sequentially with fade-and-rise motion on viewport entry.

Marquee

Scrolls repeated content continuously in a configurable direction with pause controls.

Sortable

Reorders items through pointer and keyboard drag interactions.

Kanban

Organizes draggable cards across status columns with controlled movement callbacks.

Flow

Edits controlled node-and-edge canvases with node dragging, edge connection, panning, zooming, and fit view.

DesignCanvas

Infinite pan-and-zoom canvas with a selection box, drag to move, and eight-way resize.

ComponentPicker

Component-library browser with a category tree, fuzzy search, and a detail pane.

Sankey

Visualizes weighted flow between stages with proportional nodes and links.

Funnel

Visualizes stage-by-stage quantities as a proportional conversion funnel.

Treemap

Tiles a flat dataset into a rectangle with area proportional to value, so the biggest contributors read at a glance.

EventStream

Displays a live chronological stream of typed operational events.

QueueLane

Shows prioritized queue items in read-only lanes with depth, average-wait, and throughput metrics.

DocumentSheet

Frames business documents on an A4-style sheet with header, section, footer, and print controls.

Gantt

Plots grouped tasks and progress on scrollable day, week, or month timelines with a today marker.

Scheduler

Manages events across month, week, day, and resource views with drag-based editing.

Danmaku

Overlays lane-allocated scrolling, top, or bottom audience comments on media.

LiveChat

Displays live message types, sender levels, pinned items, auto-scroll, and new-message recovery.

LivePlayer

Presents a live video surface with status, viewer count, controls, and overlays.

LogViewer

Displays leveled log lines with timestamps, sources, wrapping, and auto-scroll.

FileTree

Browses expandable files and folders with selection and version-control status badges.

Heatmap

Maps matrix values to color intensity with labels, legends, empty states, and drill-down.

CodeReviewThread

Presents review comments, replies, severity, suggested diffs, and resolution or false-positive actions.

VirtualList

Renders only visible rows from large lists while preserving scroll position.

InfiniteScroll

Loads additional content near the viewport boundary with pending and terminal states.

ContributionGraph

Plots dated activity counts in a calendar heatmap with intensity legend.

LogoLoop

Scrolls a seamless loop of logos with configurable direction and hover pause.

BounceCards

Fans image cards into place with springy hover and entrance motion.

CardSwap

Cycles stacked cards through animated front-to-back swaps.

ChromaGrid

Displays a dimmed card grid that reveals full color inside a pointer-following spotlight.

CircularGallery

Browses image cards around a draggable circular track.

DomeGallery

Arranges images across a draggable CSS 3D dome with inertial rotation, click-to-zoom viewing, and reduced-motion behavior.

FlyingPosters

Moves poster images through a perspective field controlled by dragging.

InfiniteMenu

Navigates an endless spherical menu of image-linked items.

MagicBento

Builds a bento card grid with a pointer spotlight, glowing borders, and optional tilt.

ScrollStack

Stacks content cards progressively as the page scrolls.

ProfileCard

Presents a holographic identity card with pointer tilt, glare, and an initials fallback.

TiltedCard

Tilts an image card toward the pointer with optional caption and scale.

PixelCard

Reveals card content through animated pixel particles.

DecayCard

Distorts and dissolves an image card according to pointer velocity.

ReflectiveCard

Displays slotted content on a metallic card with animated diagonal reflection.

Folder

Opens a layered 3D folder and fans out its paper contents.

Information

Sparkline

Shows a compact trend line for a small numeric series without full chart chrome.

ImageViewer

Opens images in a full-screen viewer with anchored zoom, panning, navigation, and thumbnails.

LiveProductCard

Shows live-commerce products with pricing, stock, sales, active state, and purchase action.

DiffStat

Summarizes added and removed lines with proportional bars and file-status badges.

ScoreRing

Displays a numeric score and grade inside a color-coded radial gauge.

ScoreScale

Shows which band a score falls into along a full-range color-coded bar.

Badge

Overlays a count, capped count, custom value, or dot on wrapped content.

Dot

Renders a semantic or arbitrary-color status indicator with optional pulse and accessible labeling.

StatusDot

Pairs a status label with a colored dot and optional animated activity state.

Chip

Shows a compact token with semantic styling, an optional dot, and removal action.

FilterChip

Echoes an applied filter as subject, operator, and value segments with a remove action.

Coupon

Displays discount value, conditions, validity, and claim or used state.

Tag

Labels content with semantic color, optional icon, and close action.

Annotation

Adds a handwritten-style highlight, arrow, or note around inline content in eight positions.

Avatar

Displays a user image with fallback content.

AvatarCircles

Stacks overlapping avatars with an optional overflow count.

User

Combines an avatar, display name, and supporting description into a compact user row.

QRCode

Generates theme-aware QR SVGs with version and correction boosting, excavated or watermark logos, plus SVG and high-DPI PNG export helpers.

Comment

Displays nested comments with reply indentation, optional connectors, and action slots.

RelativeTime

Formats timestamps as continuously updated human-readable relative time.

GitCommit

Shows a branch, short hash, commit message, and author in inline or stacked form.

DeployStatus

Communicates queued, building, live, failed, canceled, or skipped deployment states.

ShieldBadge

Renders repository-style metric badges with label and value segments.

AwardBadge

Displays a laurel emblem beside a prefixed award title in outline, solid, or soft styles.

CreditCard

Displays a formatted or masked card number with detected brand and front or back card faces.

Metrics

Legend

Explains chart series or status colors with compact labeled markers.

Stat

Presents a key metric with label, change, trend, and supporting context.

Statistic

Formats numeric values with precision, separators, prefixes, suffixes, optional animation, or a countdown.

Chart

Wraps responsive Recharts area, bar, line, pie, radar, and radial charts with theme tokens, axis sizing, and series legends.

Meter

Displays a value within a known range using a semantic gauge bar.

Timeline

Orders events along a timeline with colored or custom markers, alternate placement, and a pending state.

NumberTicker

Animates a numeric value toward its target when it enters the viewport.

WorldMap

Plots geographic points and animated routes on an interactive world map.

Placeholders

Empty

Explains an empty result with an icon, title, description, and optional action.

Skeleton

Reserves content geometry with an animated loading placeholder.

Watermark

Tiles a high-DPI canvas watermark and restores it after DOM tampering.

Feedback25

Overlays

Dialog

Presents modal content in a portal with focus trapping.

Modal

Opens imperative confirm, information, success, warning, or error dialogs through a shared API.

AlertDialog

Requests confirmation for consequential actions in a blocking accessible dialog.

Drawer

Slides contextual or task content from any screen edge with modal focus management and a localized optional close button.

Popover

Anchors interactive contextual content to a trigger without leaving the page.

Tooltip

Shows brief guidance in an arrowed positioned layer on hover.

HoverCard

Shows rich content after pointer hover and closes it after a leave delay.

Glimpse

Displays a compact delayed preview of referenced content near its trigger.

HeroVideoDialog

Opens a video from a thumbnail and play button in a modal player.

ElementSelectionOverlay

Hover and click elements in a container or same-origin iframe to get a component path back.

Messages

Alert

Communicates persistent informational, success, warning, or danger messages.

InterceptCard

Interrupts a flow with a contextual decision card and explicit actions.

Callout

Highlights supporting guidance or warnings within document content.

Banner

Displays a full-width announcement with tone, action, and dismissal support.

Toast

Queues brief transient feedback that can close automatically or manually.

Notification

Stacks positioned notification cards with icons, content, actions, and an imperative API.

ServiceMessage

Displays a service-notification card with source header, structured fields or custom content, and footer actions.

Result

Presents success, error, information, warning, permission, or server outcomes with detail and action slots.

GiftFeed

Streams live gift events with sender, item, quantity, and combo emphasis.

FloatingReactions

Animates lightweight audience reactions upward over live content.

Popconfirm

Confirms a nearby action in a compact anchored popup.

Loading and Progress

Spin

Overlays a loading indicator on existing content while preserving its layout.

Spinner

Renders a standalone CSS loading ring with status semantics.

Progress

Displays determinate or indeterminate progress in linear or circular form.

Guidance

Tour

Guides users through anchored steps with a cutout highlight, positioned card, navigation, and progress.

AI Agents16

Conversation

Conversation

Stacks chat messages in a scrollable timeline that follows new messages and streamed growth.

ChatMessage

Displays one chat turn with role, content, status, and supporting actions.

PromptInput

Composes auto-growing prompts with submit, stop, keyboard, IME, and custom action controls.

TypingDots

Signals that a conversational participant is composing a response.

Reasoning and Tools

ThinkingBlock

Reveals or collapses an agent reasoning trace with active and completed states.

ToolCall

Shows an agent tool invocation, arguments, progress, result, and failure state.

AgentPlan

Displays an ordered agent plan with pending, active, completed, and failed steps.

Dossier

Tracks agent collection domains with empty, active, archived, optional, and summary states.

Artifact

Presents generated content with a title, version chip, action slot, and controlled or uncontrolled expansion.

ConfirmCard

Requests explicit user approval for an agent-proposed operation.

ThreadList

Lists conversation threads with active state, metadata, deletion, a header action, and an empty state.

TaskRunner

Summarizes agent task status, plan steps, completion progress, tags, and elapsed time.

Assistance

StreamingText

Renders parent-accumulated text with a blinking trailing cursor while streaming.

PromptSuggestions

Offers clickable starter prompts or follow-up suggestions.

MessageActions

Groups copy, retry, rate, and related controls for a chat message.

Citation

Renders an inline numbered source link with a title and source label.

Decoration92

Backgrounds

DotPattern

Draws a token-colored repeating dot background with an SVG pattern.

GridPattern

Draws a scalable line grid for decorative section backgrounds.

StripedPattern

Creates diagonal stripes as a lightweight CSS decorative surface.

Spotlight

Adds a theme-aware radial glow behind foreground content.

RetroGrid

Animates a perspective grid toward the viewer for a retro backdrop.

Ripple

Emits concentric decorative rings from a configurable origin.

Meteors

Animates diagonal meteor streaks behind content.

Aurora

Renders softly moving layered aurora gradients as a background.

Particles

Animates a canvas particle field with pointer repulsion and theme-aware foreground color.

FlickeringGrid

Animates random grid-cell opacity to create a flickering technical backdrop.

WavyBackground

Renders layered multicolor waves with a canvas value-noise field.

Silk

Produces a flowing fabric-like WebGL surface with theme-aware color.

Iridescence

Produces a shifting pearlescent WebGL color field with pointer response.

Threads

Renders flowing luminous WebGL threads with configurable amplitude and interaction.

Orb

Displays an animated shader orb with hover intensity and theme-aware color.

LiquidChrome

Creates a reflective liquid-metal shader background with pointer distortion.

Balatro

Renders a pixelated swirling multicolor oil-paint shader background.

Ballpit

Simulates gravity, collisions, wall bounce, and pointer repulsion for colorful balls.

Beams

Renders flowing volumetric light columns with noise, shading, and film grain.

ColorBends

Generates pointer-reactive organic color bands from a folded noise field.

DarkVeil

Creates a dark flowing neural-field backdrop with scanlines, grain, and distortion.

Dither

Applies ordered dithering and palette quantization to animated noise waves.

DotField

Pushes and illuminates a canvas dot field around pointer movement.

EvilEye

Renders a fiery procedural eye whose pupil follows the pointer.

FaultyTerminal

Creates a distorted CRT character-rain background with tearing, scanlines, and ripple interaction.

Ferrofluid

Simulates pointer-responsive metallic ferrofluid ridges with flowing rim highlights.

FloatingLines

Animates layered sinusoidal line bundles with color interpolation and pointer bending.

Galaxy

Builds a multilayer parallax star field with twinkle, rotation, and pointer repulsion.

GradientBlinds

Combines multicolor gradients, vertical blind shading, grain, and a pointer spotlight.

Grainient

Blends three warped color fields with animated film grain and contrast controls.

GridDistortion

Distorts an image grid through a pointer-driven displacement field with elastic relaxation.

GridMotion

Moves alternating rows of a tilted grid in opposite pointer-responsive directions.

GridScan

Projects an infinite perspective grid with a traveling luminous scan pulse.

Hyperspeed

Creates a warp-speed tunnel of luminous streaks rushing from a vanishing point.

LetterGlitch

Animates a terminal-style character matrix with randomized glyph and color glitches.

Lightfall

Cycles colored light shafts through a falling tunnel with glow and pointer pull.

Lightning

Generates flickering noise-driven electric arcs with inverse-distance glow.

LightPillar

Raymarches a vertical volumetric light column with noise and two-color shading.

LightRays

Projects pulsing volumetric rays from a configurable origin with pointer steering.

LineWaves

Renders interactive multicolor wave lines from layered sine and noise fields.

LiquidEther

Produces a pointer-stirred liquid color field with metaball-like motion.

PixelBlast

Quantizes animated noise into configurable pixel shapes with ordered dithering.

PixelSnow

Raymarches a depth-faded pixel snow field with square, dot, or snowflake particles.

Plasma

Raymarches a flowing plasma field with pointer disturbance and direction controls.

PlasmaWave

Animates two intertwined raymarched plasma ribbons with blended theme colors.

Prism

Raymarches a refractive octahedral prism that casts volumetric rainbow light.

PrismaticBurst

Emits configurable curved spectral rays from an interactive central burst.

Radar

Combines rings, spokes, a rotating sweep, and pointer parallax into a radar display.

RippleGrid

Displaces a glowing grid with concentric waves and local pointer ripples.

ShapeGrid

Scrolls configurable geometric shapes endlessly with hover fills and fading trails.

SideRays

Fans two animated light beams from a screen corner with adjustable blending.

SoftAurora

Layers two noise-driven gradients into a soft pointer-responsive aurora backdrop.

Overlay Effects

BorderBeam

Moves a luminous beam along the border of a positioned element.

ShineBorder

Animates a gradient sheen around an element border.

GlareHover

Sweeps a diagonal glare across content when the pointer hovers.

Lens

Magnifies arbitrary content beneath a movable circular lens.

AnimatedBeam

Draws animated directional beams between referenced elements.

OrbitingCircles

Moves child items around one or more circular paths.

ProgressiveBlur

Applies a directional multi-step blur gradient at a content edge.

CardSpotlight

Tracks the pointer with a radial spotlight inside a card surface.

Reveal

Reveals arbitrary content with configurable direction, delay, and viewport trigger.

Antigravity

Pulls drifting particles into pointer-centered orbits before easing them back into place.

BlobCursor

Trails a soft animated blob behind pointer movement.

ClickSpark

Emits short radial spark lines from pointer clicks.

Crosshair

Tracks the pointer with configurable horizontal and vertical guide lines.

ElectricBorder

Animates noisy electric light around an element boundary.

GhostCursor

Shows delayed translucent cursor echoes that follow pointer movement.

GradualBlur

Builds a layered directional blur that increases gradually across content.

ImageTrail

Spawns a fading sequence of images along fast pointer movement.

LaserFlow

Pours volumetric laser beams through procedural fog with flow detail and pointer steering.

MagicRings

Draws layered reactive rings that follow and frame the pointer.

Magnet

Pulls child content toward the pointer within a configurable attraction radius.

MagnetLines

Rotates a field of line segments toward the pointer.

MetaBalls

Blends moving metaballs into a fluid interactive shader surface.

MetallicPaint

Renders liquid metallic paint with noise distortion, color dispersion, and striped reflections.

OrbitImages

Moves child items along preset or custom CSS offset paths with spacing and tilt controls.

PixelTrail

Leaves a fading pixel-grid trail behind pointer movement.

PixelTransition

Transitions between two content states through a randomized pixel curtain.

Ribbons

Renders flowing pointer-responsive ribbon trails in WebGL.

ShapeBlur

Moves a softly blurred geometric highlight with damped pointer interaction.

SplashCursor

Emits colorful splashes and fading trails from pointer movement and clicks.

StarBorder

Animates star-like highlights around a content border.

StickerPeel

Lets users drag or hover a sticker corner to reveal a peel, shadow, and pointer-following highlight.

TargetCursor

Snaps an animated targeting reticle to marked interactive elements.

Cubes

Renders an interactive field of perspective cubes with animated depth.

Tilt

Wraps arbitrary content in pointer, gyroscope, or manually driven 3D tilt with optional geometric glare.

BorderGlow

Lights a card border and outer glow according to pointer proximity.

GlassIcons

Presents icon actions on layered glass tiles with 3D hover movement.

GlassSurface

Creates a refractive glass surface with chromatic edge dispersion and fallback blur.

Lanyard

Simulates a draggable hanging badge with a bending cord and spring return.

ModelViewer

Displays a CSS 3D model stage with drag rotation, inertia, parallax, and auto-rotate.

FluidGlass

Moves a refractive circular glass lens across a procedural fluid background.

Device Mockups7

Windows

Safari

Frames screenshots in a Safari-style browser window with an address bar.

Chrome

Frames content in a Chrome-style browser window with tabs and address bar.

Terminal

Displays terminal commands and output in a styled window shell.

Devices

iPhone

Frames content inside an iPhone-style shell with a Dynamic Island.

Android

Frames content inside an Android phone device mockup.

Tablet

Frames content inside a tablet device mockup.

Watch

Frames compact content inside a smartwatch device mockup.

Mobile7

Navigation

TabBar

Provides safe-area-aware bottom navigation for mobile application sections.

Fab

Places a prominent floating mobile action button above page content.

Overlays

ActionSheet

Presents touch-friendly actions in a modal sheet from the bottom edge.

Input

Picker

Selects values through one or more scroll-snap wheel columns.

Gestures

SwipeAction

Reveals contextual row actions through horizontal touch gestures.

PullToRefresh

Tracks a resisted downward pull, arms at a threshold, and holds until refresh completes.

Layout

SafeArea

Applies device inset padding to keep mobile content outside obstructed regions.