Components
353 components and effects, grouped by the job they do. Each one runs live on its page, with its source beside it.
353 results
Components 135
The primitives an interface is built from, grouped by the job they do.
Actions
Buttons and the controls that ask a screen to do something.
- Button
Displays a button or a component that looks like a button.

- Button Back
Smart back button. Uses browser history when available, otherwise navigates to a fallback destination derived from the current path. Bound to the B keyboard shortcut by default.

- Button Copy
Icon button that copies text to the clipboard. Cross-fades to a check icon when copied with a tippy tooltip.

- Button Glass
Glassmorphic button with layered shadows, blur, and 3D press animation. Use for hero CTAs, marketing pages, and over-image overlays where a regular Button feels flat.

- Button Group
Joins a row or column of Buttons (or inputs) so adjacent corners and borders collapse cleanly. Use for segmented controls, attached input + button, or toolbars.

- Game Button
Chunky game-style button: a bevelled face on a darker ledge, an inset rim lit from the top left, two specks of shine and an outlined label. Every proportion is a fraction of the height.

- Glow Button
Pill button with a spring-tracked light inside and mirrored edge glows that crossfade as the pointer changes sides. Vue port of MicroKit UI's Cursor Edge Glow Button.

- Toggle
Two-state pressable button. Use inside toolbars for formatting controls (bold, italic, align).

- Toggle Group
Group of Toggles where at most one (single) or many (multiple) can be pressed at a time. Often used as a visual filter or text-alignment picker.

Forms and input
Everything that takes a value from someone and hands it back typed.
- Calendar
Inline date picker built on reka-ui. One component for every selection mode โ single (default), multiple, and range โ plus three heading layouts, an optional ISO week-number column, and a fully custom day slot.

- Checkbox
Binary input. Supports checked, unchecked, and indeterminate states via modelValue.

- Color Picker
Swatch trigger opening a popover with a saturation/lightness area, a hue slider, an optional alpha slider, and hex plus HSL value fields. Built on the Reka UI color primitives; the model value is a hex string.

- Combobox
Searchable dropdown that filters items as you type. Built on reka-ui. Use for pickers with many options where a flat Select feels cumbersome.

- Custom Field
Renders a form field from a JSON definition instead of hand-written markup: one field with CustomFieldRenderer, a whole set with CustomFieldGroup. Covers 30+ types (text, choice, date and range pickers, sliders, rating, color, country, file) and ships the value helpers that go with them.

- Date Picker
The date family: DatePicker (date/date-range, optional time, presets), TimePicker & TimeRangePicker (segmented clock fields), and Month/Year pickers. Popover-triggered pickers built on Calendar and reka-ui. For inline picking without a trigger, use Calendar directly.

- Email Recipients Input
A growable list of email fields with add and remove, for the "who gets notified" half of a settings form. Binds to a plain string array, so the value goes straight into a JSON settings column with no reshaping.

- Field
Wrapper for form controls. Vertical, horizontal, or responsive orientation, with companion components (FieldLabel, FieldDescription, FieldError, FieldGroup, FieldSet) for every layout need.

- Form
vee-validate form primitives wrapped to match the design system. Use FormField + FormItem + FormControl + FormLabel + FormMessage to build accessible forms with built-in validation rendering.

- Icon Picker
Searchable picker for choosing an icon from the project's icon sets (hugeicons + lucide). Stores the icon name as a string.

- Input
Single-line text field. Supports every native HTML input type (text, email, number, date, file). Pair it with Field to add a label, description, or error message.

- Input Group
Wraps an input with addons (prefix/suffix icons, text labels, or buttons) into a single composite control. The seams between the parts are flattened so it looks like one element.

- Input Link
URL / social handle input that auto-prefixes with the right base URL. Pass label='Instagram' and the input prepends https://instagram.com/. Pasting a full URL strips the prefix automatically.

- Input Number
Numeric input with increment/decrement buttons. Use for quantities and bounded numbers. For unstyled number entry, use Input type="number".

- Input OTP
One-time password input with per-character slots. Used for 2FA, email verification, and sign-in codes. Built on vue-input-otp.

- Input Password
Password input with a built-in show/hide toggle.

- Input Phone
International phone input with a searchable country selector. Auto-formats the number for the chosen country and emits a parsed E.164 string.

- Label
Form field label. Connects an input through the for attribute; clicking the label focuses the matching control.

- Location Combobox
Combobox tuned for picking countries, cities, or any location-like option. Supports a pinned section at the top for recent or featured items.

- Native Select
A styled native HTML select element with consistent design system integration. For search, multi-select, or custom option markup, use Select or Combobox instead.

- Number Field
Compose a numeric input from primitives: NumberField + NumberFieldContent + Increment/Decrement buttons + NumberFieldInput. Use when you need a different layout than the bundled InputNumber.

- Price Range
Two amount fields for a from/to budget, with an optional slider once a ceiling exists. Emits { start, end }, or null while both ends are empty, so an untouched field stays distinguishable from a range of zero.

- Questionnaire
A multi-step questionnaire with single-choice, multiple-choice, freeform, and skippable questions.

- Radio Group
One-of-many selection. Pair RadioGroup with RadioGroupItem entries; bind selected value with v-model.

- Rating
Star rating with fractional display, half-star input, hover preview, and keyboard support. Interactive mode is built on the reka-ui Rating primitives (a radiogroup with one radio per step); readonly mode renders a static star row so any decimal value stays exact.

- Select
Single-value dropdown built on reka-ui. There is no multiple prop: selecting several values is Combobox with multiple and ComboboxChips. For pickers that need search across many options, use Combobox instead.

- Slider
Continuous or stepped range input for numeric values. Supports single or multi-thumb selection.

- Switch
On/off toggle. Use for binary settings where the result is immediate (no Save button needed).

- Tags Input
Free-form tag entry. Type, press Enter or comma, get a chip. Backspace removes the last chip.

- Textarea
Multi-line text input. Pair with Field for label + description + error.

- TipTap Editor
Rich text editor built on @tiptap/vue-3. Ships with a styled toolbar covering headings, bold/italic, lists, links, images, code blocks, and an embedded media picker. Heavy component โ see existing posts/blog form for full usage.

Overlays
Layers that open over the page: dialogs, drawers, menus and hints.
- Alert Dialog
A modal dialog that interrupts the user with important content and expects a response.

- Command
Command palette pattern. Composable input + grouped item list with fuzzy search. CommandDialog wraps it in a modal for global โK menus.

- Context Menu
Right-click menu. Same shape as DropdownMenu but triggered by contextmenu events instead of a button. Supports nested submenus and checkbox/radio items.

- Dialog
A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.

- Drawer
A panel that slides in from the edge of the screen with swipe gestures, snap points, and nested drawer support.

- Dropdown Menu
Click-triggered menu attached to a button. Supports items, separators, labels, shortcuts, checkbox and radio items, and nested submenus.

- Hover Card
Floating panel that opens on hover with a small delay. Good for previews and inline context that should not require a click.

- Lightbox
Full-screen image and video viewer with zoom, keyboard navigation, fullscreen, download, share, thumbnails, and a slide counter. Highly slot-driven for custom chrome.

- Popover
Displays rich content in a portal, triggered by a button.

- Preview Panel
An edit surface beside a live preview, each scrolling on its own, collapsing to a tab switch when the panel is too narrow to hold both. The split is a container query on the panel's own width, not a viewport breakpoint.

- Responsive Dialog
Dialog on desktop, Drawer on mobile. Use this for almost every modal in the app. Reach for plain Dialog only for short confirmations that still look fine on a phone.

- Sheet
Extends the Dialog component to display content that complements the main content of the screen.

- Tooltip
A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

Data display
Content laid out to be read: tables, cards, lists, figures and readings, media and labels.
- Accordion
Vertically stacked panels that expand to reveal their content. Built on reka-ui. Single-open by default; switch type to multiple to allow several at once.

- Aspect Ratio
Locks child content to a fixed width-to-height ratio. Built on reka-ui.

- Attachment
Renders files and images with media, metadata, upload state, actions, and a full-card trigger that keeps the action buttons separately clickable.

- Avatar
User profile image with an initials fallback in one of two colour styles, and a status indicator. Pass a model object with name and optional profile_image to render.

- Avatar Group
Stacked avatar list with automatic overlap masking. Optional max limit shows the remainder count as a hover-card with the full list.

- Badge
A small pill for status, counts, or category labels. Seven color variants with a dot prefix by default, swappable for an icon or stripped of chrome entirely with the plain prop.

- Bar Picker
A short run of values as columns of lights, one column picked.

- Blur Image
Image with low-quality image placeholder (LQIP) blur-up effect. Shows a tiny blurred preview while the full image loads, then crossfades in.

- Card
A container with separate header, content, and footer slots. Useful for dashboard stats, list items, or any block that needs a visual boundary.

- Card Notch
Card with a true transparent notched cutout where a circular element meets the card body. Uses an SVG clip-path for crisp corners. Falls back to a plain card when no notch slot is present.

- Carousel
Horizontal slider built on embla-carousel-vue. Compose CarouselContent and CarouselItem; add Previous/Next buttons and dot navigation as needed.

- Carousel 3D
Carousel with a perspective tilt effect. Items rotate in 3D as they enter and leave the centre. Use for hero showcases and product galleries where flat carousel feels static.

- Collapsible
Show/hide a single block of content. A simpler primitive than Accordion when you do not need multiple panels or item-level state.

- Data Table
Build a data table from the Table primitives and TanStack Table. Each section adds one capability on top of the previous one: formatting, row actions, pagination, sorting, filtering, column visibility, and row selection. For the batteries-included version, use TableData.

- Distribution
A ranked list of labels, each with a bar to scale, a count and its share of the whole.

- Flag
Country flag icon. Pass an ISO 3166-1 alpha-2 country code; the image is loaded from /flags/{code}.png at runtime.

- Flow
A canvas of nodes joined by edges, that you pan, zoom and rearrange.

- Gauge
Composable SVG gauge primitives: arcs, zones, needles, ticks, dots, tooltips and a slider control. A Vue port of gauge-ui.

- Item
List row primitive. Composes ItemMedia, ItemContent (with ItemTitle and ItemDescription), ItemActions, and ItemFooter into a flexible row that fits navigation lists, settings, and contact cards.

- Kbd
Inline keyboard hint, styled to look like a physical key cap. KbdGroup chains multiple together for sequences like โ K.

- KPI
One number and what it is doing: its change, its shape over time, its progress to a target.

- Leaderboard
Entries ranked by a value, with the top three on a podium.

- Marker
Displays an inline status, system note, bordered row, or labeled separator in a conversation.

- QR Code
Client-rendered QR code drawn as inline SVG, with square or rounded modules. The encoder loads lazily on mount, so nothing ships to the server render. The paired useQRCode composable downloads the same code as SVG or an image.

- Range Meter
A reading on a ruler of ticks that rises where the value is, with the number above it.

- Stat
One figure written large, with a label over it, a unit after it and a badge beside it.

- Table
Table primitives for static data. For sort, filter, search, and pagination out of the box, use TableData (documented separately).

- Table Data
Batteries-included data table built on TanStack Table. Pass columns, data, and a paginator meta object; you get search, sort, filter, pagination, row selection, bulk actions, and column visibility out of the box. For static tables, use the primitive Table.

- Typography
A styling system for HTML and rendered markdown, from blog posts to streaming chat. One CSS file you own.

Feedback and status
What happened, what is happening and what is missing: alerts, toasts, progress, loading and empty states.
- Alert
Inline message for status, warnings, or callouts. Two visual variants and slots for an icon, title, and description.

- Circular Progress
Radial progress ring (0-100) with an optional centered percentage label. The ring colour shifts by threshold: red below 34, amber up to 66, green at 67 and above.

- Empty
Placeholder for lists, tables, and views that have no data yet. Compose EmptyMedia (icon or illustration), EmptyTitle, EmptyDescription, and EmptyContent for actions.

- Notifications
Header bell with an unread badge and a popover list of notifications. Reads from the global notifications store. For ad-hoc toast messages, use Toast instead.

- Progress
Horizontal progress bar. Set modelValue between 0 and 100.

- Result
Terminal outcome screen for a finished flow: payment confirmed, form submitted, order received. Animates a drawn checkmark and a staggered text reveal on mount.

- Shimmer
A CSS utility that sweeps a soft highlight across text for live status - 'Thinkingโฆ', 'Generating responseโฆ', running tools, streaming markers. Honors prefers-reduced-motion. Ships in main.css.

- Skeleton
Animated placeholder block. Build loading states by stacking Skeletons in the rough shape of the eventual content.

- Spinner
Looping loading indicator. Use inside buttons, empty states, or inline next to text.

- Status Indicator
Colour-coded dot with a status label. Maps a string status to a colour and animates a slow ping ring. Hide the label for a pure dot.

- Toast
Transient messages. Toasts pile up with the newest in front, and fan out on hover.
Charts
Area, bar, line, pie, radar and radial charts on one set of tokens.
- Chart
Charting foundation built on unovis-vue. ChartContainer provides the theming, config context, tooltip wiring, and legend that every chart shares. For ready-made charts see Line, Area, Bar, Pie, and Semi Circle.

- Chart Area
Area charts built on unovis-vue. One ChartArea handles single or multi-series data, with optional gradient fills and stacking.

- Chart Bar
Bar charts built on unovis-vue. One ChartBar covers vertical/horizontal orientation, single or grouped series, and stacking.

- Chart Composed
Composed charts overlay more than one geometry on the same axes. ChartComposed draws a filled area behind a line, useful for forecast or target zones.

- Chart Line
Time-series line charts built on unovis-vue. Pass an array of rows plus a config that maps each series key to a label and color.

- Chart Pie
Pie and donut charts built on unovis-vue. One ChartPie renders a full pie, a donut, a donut with a centre total, or nested rings.

- Chart Radar
Radar charts plot one series across several axes on a polar grid. Built as a self-contained SVG component with gradient fill, glow, and dot markers.

- Chart Radial Bar
Radial bar charts render each value as a concentric arc. Built as a self-contained SVG component with gradient bars, a glow, background tracks, and inline labels.

Chat and AI
Messages, composers and transcripts for chat and assistant screens.
- Bubble
Displays conversational content in a message bubble. Supports variants, alignment, grouping, reactions, and collapsible content.

- Chat Composer
The box someone types a message into: text, files, and the two keys that send it. Paste a screenshot, drop a file, Enter to send and Shift+Enter for a newline. It knows nothing about where a message goes or what a reply looks like.

- Chat Transcript
The small parts every transcript repeats: the day a run of messages belongs to, the clock beside a turn, a human's message with its links made clickable, pictures that open in the lightbox, files that can only be named, and a turn that never reached the server. Assemble them inside message-scroller, message and bubble.

- Message
Displays a message in a conversation, with optional avatar, header, footer, and alignment.

- Message Scroller
A chat scroll container that anchors turns, opens saved transcripts, follows streamed responses, loads history without jumping, and jumps to any message.

- Thinking Orb
Dotted thought orb for AI and agent UIs. Six hand tuned animated states at any size, drawn on a plain 2D canvas (no WebGL, no filters). Vue port of thinking-orbs by Jakub Antalik, MIT licensed.

Layout and surfaces
Structure and the surfaces it sits on: panels, scroll areas, separators and edges.
- Border Beam
Animated glow that wraps any element. A beam travels around the border (rotate family) or the glow breathes in place (pulse family). Vue port of border-beam by Jakub Antalik, MIT licensed.

- Frame
A panel of rows set into a tray, with the tray's top strip carrying the title.

- Grid Fill
Responsive grid that auto-fills empty cells with a placeholder pattern, so the last row always looks complete. Use for galleries, masonry-style lists, or stat tiles.

- Lane Board
Lanes of cards that can be dragged within a lane and from one lane to another.

- Metal FX
Wraps a button or icon in an animated liquid-metal ring. One shared WebGL renderer drives every instance on the page. Vue port of metal-fx by Jakub Antalik, MIT licensed.

- Page Scrollbar
A thin thumb drawn over the page in place of the window's scrollbar, so sections of different colours meet without a stripe down the right edge.

- Resizable
Split-pane layout with drag-to-resize handles. Compose ResizablePanelGroup with ResizablePanel children and ResizableHandle between them.

- Scroll Area
Themed scrollable container with custom scrollbars that match the design system. Use when default OS scrollbars look out of place.

- Scroll Fade
A CSS utility that masks the edges of a scroll container, hinting at more content without overlays or scroll listeners. Scroll-driven where supported, with a static fallback. Ships in main.css.

- Separator
Horizontal or vertical divider between sections.

- Stack
Isometric 3D card-stack illustration. Layers lift apart on hover and assemble on entrance; the thickness, outline, and motion all follow the chosen recede direction.

- Surface Header
A site header that takes the colour of the section under it: clear over a photo, the section's own colour over a dark fill, the regular header everywhere else.

Theming
Controls for light and dark mode.
Creative 47
Interactive pieces with the motion built in: carousels, docks, galleries, stacked cards and menus.
- Accordion Gallery
Panels expand on hover or focus, revealing parallax imagery and captions.

- Animated List
List items enter with staggered motion variants for polished reveals.

- Border Glow
Glowing mesh-gradient border that follows cursor direction and intensifies near edges.

- Bounce Cards
Cards bounce in on mount, and optionally push their neighbours aside on hover.

- Bubble Menu
Floating circular expanding menu with staggered item reveal.

- Card Nav
Expandable navigation bar with card panels revealing nested links.

- Card Swap
Cards animate position swapping with smooth layout transitions.

- Carousel (FX)
Responsive carousel with touch gestures, looping and transitions.

- Chroma Grid
A responsive grid of grayscale tiles. Hovering the grid reveals their colors.

- Circular Carousel
A draggable 3D ring of images with four shapes, momentum, snapping and an entrance animation.

- Circular Gallery
Circular orbit gallery rotating images.

- Counter
Flexible animated counter supporting increments + easing.

- Curved Input
Arc-bent input bar with text, caret and submit button all following the curve.

- Decay Card
Hover parallax effect that disintegrates the content of a card.

- Depth Carousel
Cards recede into depth on a 3D rail, with drag, keyboard and auto-advance.

- Dock
macOS style magnifying dock with proximity scaling of icons.

- Dome Gallery
Immersive 3D dome gallery projecting images on a hemispheric surface.

- Drift Wall
An endless perspective wall of tiles drifting past, lifting on hover.

- Elastic Slider
Slider handle stretches elastically then snaps with spring physics.

- Flex Carousel
An infinite image row that flows through invisible liquid glass at its edges, with four bend presets, five entrances, a speed squeeze and click to focus.

- Flowing Menu
Liquid flowing active indicator glides between menu items.

- Fluid Glass
Glassmorphism container with animated liquid distortion refraction.

- Flying Posters
3D posters rotate on scroll infinitely.

- Folder
Interactive folder opens to reveal nested content smooth motion.

- Glass Icons
Icon set styled with frosted glass blur.

- Glass Surface
Advanced Apple-style glass surface with real-time distortion + lighting.

- Gooey Nav
Navigation indicator morphs with gooey blob transitions between items.

- Infinite Menu
Horizontally looping menu effect that scrolls endlessly with seamless wrap.

- Infinite Spiral
An endlessly looping 3D helix of images with customizable motion, depth, spacing and interaction.

- Lanyard
Swinging 3D lanyard / badge card with realistic inertial motion.

- Line Sidebar
Static list navigation with a cursor-proximity effect that shifts and highlights nearby items.

- Magic Bento
Interactive bento grid tiles expand + animate with various options.

- Masonry
Responsive masonry layout with animated reflow + gaps optimization.

- Model Viewer
Three.js model viewer with orbit controls and lighting presets.

- Morph Slider
WebGL slider that melts between images with a displacement transition.

- Option Wheel
Curved option picker that spins via scroll, drag, or arrow keys, fading and tilting items away from the selection.

- Pill Nav
Minimal pill nav with sliding active highlight + smooth easing.

- Pixel Card
Card content revealed through pixel expansion transition.

- Profile Card
Animated profile card glare with 3D hover effect.

- Reflective Card
Card with dynamic webcam reflection and glare effects that respond to cursor movement.

- Scroll Stack
Overlapping card stack reveals on scroll with depth layering.

- Specular Button
Glass button with a shader-driven specular rim light that sweeps around the edge and follows the cursor.

- Spotlight Card
Dynamic spotlight follows cursor casting gradient illumination.

- Stack (FX)
Layered stack with swipe animations, autoplay and smooth transitions.

- Staggered Menu
Menu with staggered item animations and smooth transitions on open/close.

- Stepper (FX)
Animated multi-step progress indicator with active state transitions.

- Tilted Card
3D perspective tilt card reacting to pointer.

Text Animations 33
Headlines and labels that move: reveals, scrambles, loops and type effects.
- ASCII Text
Renders text as a 3D plane and converts it to ASCII characters in real time, with optional wave motion and pointer tilt.

- Blur Text
Text starts blurred then crisply resolves for a soft-focus reveal effect.

- Circular Text
Layouts characters around a circle with optional rotation animation.

- Count Up
Animated number counter supporting formatting and decimals.

- Curved Loop
Flowing looping text path along a customizable curve with drag interaction.

- Decrypted Text
Hacker-style decryption cycling random glyphs until resolving to real text.

- Depth Text
Layered extruded type with parallax that shifts against the pointer.

- Echo Text
Ghosted copies trail behind the text and settle into a single word.

- Falling Text
Characters fall with gravity + bounce creating a playful entrance.

- Fold Text
Lines unfold into place like creased paper opening flat.

- Fuzzy Text
Vibrating fuzzy text with controllable hover intensity.

- Glitch Text
RGB split and distortion glitch effect with jitter effects.

- Gradient Text
Animated gradient sweep across live text with speed and color control.

- Particle Text
Text assembles from drifting particles that scatter and reform on demand.

- Refracted Text
Glass letters with an optional character lift, adjustable opening flow, customizable glass, beam and spectral colors, original font contours and a refracted beam.

- Rotating Text
Cycles through multiple phrases with 3D rotate / flip transitions.

- Scrambled Text
Detects cursor position and applies a distortion effect to text.

- Scroll Float
Text gently floats / parallax shifts on scroll.

- Scroll Reveal
Text gently unblurs and reveals on scroll.

- Scroll Velocity
Text marquee animation where speed and distortion scale with the user's scroll velocity.

- Shiny Text
Metallic sheen sweeps across text producing a reflective highlight.

- Shuffle
Animated text reveal where characters shuffle before settling.

- Split Flap Text
Mechanical split-flap departure board that clacks through to each new phrase.

- Split Text
Splits text into characters / words for staggered entrance animation.

- Stroke Text
Outlined letterforms draw themselves on, then flood with fill.

- Tech Text
A canvas wordmark that turns into dashed vector outlines under the pointer, with a selection frame, labels and draggable letters.

- Text Cursor
Make any text element follow your cursor, leaving a trail of copies behind it.

- Text Loop
A seamless text marquee that flows along curved SVG paths.

- Text Pressure
Characters scale / warp interactively based on pointer pressure zone.

- Text Type
Typewriter effect with blinking cursor and adjustable typing cadence.

- True Focus
Applies dynamic blur / clarity over a series of words in order.

- Variable Proximity
Letter styling changes continuously with pointer distance mapping.

- Warp Text
WebGL warp that bends and refracts the text around the pointer.

Animations 43
Larger moving pieces for a page: carousels, galleries, cursors and scroll effects.
- Animated Content
Wrapper that animates any children on scroll or mount with configurable direction, distance, duration, easing and disappear options.

- Antigravity
3D antigravity particle field that repels from the cursor with smooth motion.

- Blob Cursor
Organic blob cursor that smoothly follows the pointer with inertia and elastic morphing.

- Click Spark
Creates particle spark bursts at click position.

- Crosshair
Custom crosshair cursor with tracking, and link hover effects.

- Cubes
3D rotating cube cluster. Supports auto-rotation or hover interaction.

- Cursor Grid
Canvas grid whose cells light up around the cursor with configurable radius, falloff and click pulses.

- Dither Veil
A photo printed as a 1-bit dither that the cursor burns through to full colour, leaving a trail that knits back cell by cell.

- Elastic Mesh
Spring-mesh surface that stretches under the pointer and settles back with damped physics.

- Electric Border
Jittery electric energy border with animated arcs, glow and adjustable intensity.

- Electric Logo
Turns any SVG or PNG into a living lightning outline, with flowing strands, arcs that leap off the edges and a charge that follows the cursor.

- Fade Content
Simple directional fade / slide entrance / exit wrapper with threshold-based activation.

- Fan Gallery
An image fan on a symmetric curve.

- Ghost Cursor
Semi-transparent ghost cursor that smoothly follows the real cursor with a trailing effect.

- Glare Hover
Adds a realistic moving glare highlight on hover over any element.

- Glow Cursor
Shader-powered light trail that smoothly follows the pointer with customizable glow, color, taper and pulse.

- Gradual Blur
Progressively un-blurs content based on scroll or trigger creating a cinematic reveal.

- Halftone Reveal
Print-style halftone dot matrix that resolves into sharp content around the cursor.

- Image Trail
Cursor-based image trail with several built-in variants.

- Laser Flow
Dynamic laser light that flows onto a surface, customizable effect.

- Liquid Glass Logo
A droplet becomes a glass icon, then the glass and waves disappear, leaving the original logo on the background. The logo stays at its normal size on black.

- Logo Loop
Continuously looping marquee of brand or tech logos with seamless repeat and hover pause.

- Magic Rings
Interactive magic rings effect with customizable parameters.

- Magnet
Elements magnetically ease toward the cursor then settle back with spring physics.

- Magnet Lines
Animated field lines bend toward the cursor.

- Masked Heading
A large headline with a drifting colour mesh or image showing through the glyphs, revealed word by word.

- Meta Balls
Liquid metaball blobs that merge and separate with smooth implicit surface animation.

- Metallic Paint
Liquid metallic paint shader which can be applied to SVG elements.

- Noise
Animated film grain / noise overlay adding subtle texture and motion.

- Orbit Images
SVG path customizable orbiting images effect.

- Pixel Swap
Pixel fragments assemble into a full cover, swap arbitrary content, then dissolve away with reversible colors and triggers.

- Pixel Trail
Pixelated cursor trail emitting fading squares with retro digital feel.

- Pixel Transition
Pixel dissolve transition for content reveal on hover.

- Ribbons
Flowing responsive ribbons/cursor trail driven by physics and pointer motion.

- Ripple Distortion
Pointer-driven water displacement that warps content and leaves a decaying wake.

- Scroll Expand
A rounded media frame that grows to full bleed as it scrolls through the viewport.

- Shape Blur
Morphing blurred geometric shape. The effect occurs on hover.

- Splash Cursor
Liquid splash burst at cursor with curling ripples and waves.

- Star Border
Animated star / sparkle border orbiting content with twinkle pulses.

- Sticker Peel
Sticker corner lift + peel interaction using 3D transform and shadow depth.

- Strands
Glowing ribbon-like strands that ripple and weave across a transparent canvas.

- Swarm Cursor
Flocking particle swarm that chases the pointer, jostles for space and drifts apart at rest.

- Target Cursor
A cursor follow animation with 4 corners that lock onto targets.

Micro-interactions 36
Small replies to a click, a hover or a drag, the kind a control gives back.
- Bell Toggle
Pill toggle that answers a press at three tempos: the bell rings on damped keyframes, the label blur-crossfades, and the pill unfurls to the longer label through a clip-path on a critically damped spring. The pressed state is the receipt.

- Branched Menu
Collapsible menu whose sections unfold into a trunk with a curved branch to each child, and an accent line that travels down the trunk and around the curve to whatever you pick, while a marker glides to the open section.

- Call Chip
Inline tool-call chip whose fill wipes across while a live ms counter ticks, completing with a green wash on success or stopping short and shaking red with a retry glyph on error.

- Code Slots
One-time code input where each digit lands into its slot on a spring, a rejected code drains away slot by slot, and an accepted one merges into a single wash with a check.

- Comet Dial
Circular dial you turn by dragging around the ring, with a comet trail that stretches behind the bead by how fast it moves and a flick that carries on with momentum.

- Companion
A small mascot that looks at the pointer: an animated bot with eighteen bodies, hats, glasses and finishes, or a blob with ten silhouettes and fourteen moods. It is a pet, not an avatar.

- Companion Picker
The panel a person uses to choose their companion: a live preview, then bot or blob options. Controlled with v-model; saving, resetting and cancelling are events, so it fits any surface.

- Dodge Field
Playful field whose child darts away from the pointer, glides back home when you leave, and finally gives in after a few dodges.

- Flip Card
Two-faced card that flips in 3D on a click, a drag or a flick, settling on a spring that carries your release velocity, with an optional cursor tilt, a sheen that follows the pointer and a shadow that narrows as it turns edge on.

- Folder Float
Folder that opens on hover or press: the flap tilts toward you, a paper edge rises, and its notes spring out from behind the flap into a floating cloud to pick from, then sink back when the folder closes.

- Fuse Button
Action button that commits on press and turns into an Undo button while a fuse burns down its rim, then settles back or stays done.

- Glide Select
Select chip whose menu pops out of its own corner and whose single hover highlight glides between rows, remembering where you left it so re-entry slides from there instead of blinking in.

- Hold Button
Hold-to-confirm button whose liquid fill rises while pressed, snaps back on an early release and swaps its label through a blur when the hold completes.

- Jelly Radio
Radio chips where the chosen chip swells like jelly, shoves its neighbours aside on a spring and the row ripples out from it.

- Lattice Loader
Inline agent-status row: a 3x3 or 4x4 lattice whose cells brighten in a phase-offset wave beside a verb and a live stopwatch, resolving into a check or a cross when the task ends.

- Paper Crumple
An image that crumples into a textured 3D sheet while held and follows the grabbed point as you drag. Release it as a crumpled ball, unfold it flat, or leave the paper creased, with customizable folds, paper grain, lighting and shadows.

- Peek Rating
Star rating that previews the score under the pointer: glyphs rise, the one you point at swells and a tip hops along above the row.

- Prompt Bar
Chat composer with an @ sources menu, a / commands menu, a model picker, dictation and attachments, whose send tile charges to ink the moment there is something to send and morphs its arrow into a stop square while busy.

- Pulse Heart
Like button whose glyph collapses to a dot, flips colour and springs back past rest while the pill beats and the count rolls.

- Refine Frame
Reserved-aspect frame that walks any media through queued, generating, refining and complete without layout shift: each stage is one blur, saturate, scale and opacity tween, a soft band sweeps while it works, a chip reports the stage, and an error dims the picture behind a retry pill.

- Rubber Segment
Segmented control with a rubber thumb that stretches across the old and new slot on a tap, squashes on landing and can be dragged, flicked and pulled past its ends.

- Scrub Field
Number field you scrub by dragging the chip, with a rubber band past its bounds, a ghost delta riding the pointer, modifier keys for coarse and fine steps, and click to type.

- Shredder
A list with a paper shredder at the bottom. Drag a row into the slit and the rollers tug it in, pull it through and cut it into strips that curl out underneath, tumble away and fade out. The rest of the list settles down on a spring and the shredded item is handed to you to delete.

- Slide Commit
Slide-to-confirm control with a handle that squashes against the wall, unfurls into a done pill on success and springs home with a shake on failure.

- Sling Button
Send button you pull back like a slingshot: the band stretches, a power arc arms it, and releasing fires the action with the flick's velocity.

- Slosh Gauge
Tank gauge whose liquid chases the value with mass, tilts with its own speed and splashes against the top when it slams full; optionally a vertical slider.

- Spring Check
Checkbox row where the fill swells out of the box centre on a spring, the tick draws itself and a strike-through wipes across the label.

- Squish Switch
Drag-scrubbable switch whose thumb stretches by how fast it moves, flips at the midpoint and squashes against the track end on a flick.

- Status Mark
A 20px status glyph for agent task lists that morphs in place from a dashed idle ring to a spinning or real-progress arc, then draws a check or a cross, with an optional label strike.

- Swipe Row
List row that swipes open to reveal actions, snaps by flick velocity, and deletes on a full swipe that stretches the action colour across the row.

- Swipe Toast
Single toast that rises through its bottom edge, swipes down to dismiss on a flick or a distance, and burns a thin fuse for exactly its remaining time; hover pauses it and an inline mode keeps it inside any container.

- Tear Ticket
Ticket whose perforated stub tears off by hand: paper bridges stretch into fibres and snap one by one from the far end, the torn edges are jagged and fit each other, the freed stub dangles and drops, and the body is stamped as used. The artwork tilts in 3D with parallax on hover.

- Thought Line
Reasoning-trace header: a glyph and a label breathe beside a live clock while steps appear beneath, then the line settles on one beat into "Thought for 4.2s" through a blur crossfade and the trace folds into it.

- Voice Pill
Mic button that swells into a tinted capsule of level-driven equalizer bars and an elapsed clock while held or toggled, then relaxes back into the mic on release; simulated voice by default, real microphone as an opt-in.

- Wake Slider
Slider drawn as a row of bars where a wake of taller bars trails the handle and swells with its speed, then settles flat when it stops.

- Warm Tooltip
Tooltip that waits a beat when cold, then stays warm so the next trigger shows its label instantly, gliding from one trigger to the next.

Backgrounds 59
Full-bleed surfaces to put content on, most of them drawn on the GPU.
- Acid Squares
A crystalline corridor of stacked squares receding into depth.

- Aero Shards
A GPU-driven wind sculpture of folded foil shards with crisp detail, content-safe placements, and responsive pointer interactions.

- Aurora
Flowing aurora gradient background.

- Balatro
The balatro shader, fully customizable and interactive.

- Ballpit
Physics ball pit simulation with bouncing colorful spheres.

- Beams
Crossing animated ribbons with customizable properties.

- Color Bends
Vibrant color bends with smooth flowing animation.

- CRT Warp
Full-canvas CRT plasma with curved distortion, scanlines, bloom and pointer interaction.

- Dark Veil
Subtle dark background with a smooth animation and postprocessing.

- Dither
Retro dithered noise shader background.

- Dot Field
Interactive dot grid with cursor bulge, glow, sparkle, and wave effects.

- Dot Grid
Animated dot grid with cursor interactions.

- Evil Eye
Procedural evil eye shader with animated iris, slit pupil, and fiery outer glow.

- Faulty Terminal
Terminal CRT scanline squares effect with flicker + noise.

- Ferrofluid
A churning magnetic fluid traced by glowing contour lines, with a cursor magnet.

- Floating Lines
3D floating lines that react to cursor movement.

- Galaxy
Parallax realistic starfield with pointer interactions.

- Ghost Fibers
A deep-blue recursive fiber field with luminous bands, radial twisting and soft atmospheric glow.

- Gradient Blinds
Layered gradient blinds with spotlight and noise distortion.

- Gradient Waves
Raymarched sine waves rolling toward a soft, hazy horizon.

- Grainient
Grainy gradient swirls with soft wave distortion.

- Grid Distortion
Warped grid mesh distorts smoothly reacting to cursor.

- Grid Motion
Perspective moving grid lines based on cursor position.

- Grid Scan
Animated grid room 3D scan effect and cool interactions.

- Hyperspeed
Animated lines continuously moving to simulate hyperspace travel on click hold.

- Iridescence
Slick iridescent shader with shifting waves.

- Letter Glitch
Matrix style letter animation.

- Light Pillar
Vertical pillar of light with glow effects.

- Light Rays
Volumetric light rays/beams with customizable direction.

- Light Tunnel
A radial fibre-optic tunnel with light pulses racing into depth.

- Lightfall
Colorful light streaks raining down a glowing tunnel with a cursor light.

- Lightning
Procedural lightning bolts with branching and glow flicker.

- Line Waves
Animated line wave pattern with colorful warped distortion.

- Liquid Chrome
Liquid metallic chrome shader with flowing reflective surface.

- Liquid Ether
Interactive liquid shader with flowing distortion and customizable colors.

- Micro Slats
A wall of tiny slats that becomes a rolling sea in perspective, with glinting crests, four presets, a real fluid the cursor stirs and an intro that rolls in from the horizon.

- Molten Metal
Swirling caustic plasma filaments with molten, white-hot cores.

- Orb
Floating energy orb with customizable hover effect.

- Particles
Configurable particle system.

- Pattern Waves
A lit halftone surface of dots, lines, crosses or glyphs that moves like draped silk, rolling swells or ripples, with six presets, one-color theming and a cursor that sends ripples through it.

- Pixel Blast
Exploding pixel particle bursts with optional liquid postprocessing.

- Pixel Snow
Falling pixelated snow effect with customizable density and speed.

- Plasma
Organic plasma gradients swirl + morph with smooth turbulence.

- Plasma Wave
Raymarched plasma waves with dual-wave interference and OGL.

- Prism
Rotating prism with configurable intensity, size, and colors.

- Prismatic Burst
A burst of light rays with controllable color, distortion and ray count.

- Radar
Radar sweep effect with concentric rings, radial spokes, and a rotating beam.

- Ripple Grid
A grid that continuously animates with a ripple effect.

- Scanner
Calm interference bands sweeping across the screen like an oscilloscope.

- Shape Grid
Animated grid with shape variants (square, hexagon, circle, triangle) and direction customization.

- Shape Waves
A WebGPU field of triangles, circles and squares that brighten and grow along rolling waves, with an optional text cutout the waves flow around.

- Side Rays
Animated light rays emanating from the side with customizable colors and speed.

- Silk
Smooth waves background with soft lighting.

- Sliced Waves
A grid of soft glowing bars rippling like a slatted equalizer.

- Soft Aurora
Soft aurora borealis shader with 3D Perlin noise and cosine gradient palettes.

- Threads
Animated pattern of lines forming a fabric-like motion.

- Topography
A living contour map with glowing, elevation-tinted lines.

- Waves
Layered lines that form smooth wave patterns with animation.

- Web Threads
Glowing sine threads woven through a luminous convergence point.






































































































































































































































































































































































