unlumen-ui

Demo showing the Pixel Liquid Background component.

Deterministic threshold, accent, and easing helpers for pixel-grid transition components.

Canvas-based scroll transition that wipes between two colors with a configurable pixel grid, directional patterns, easing, and accent-color bands.

Scrollable inline demo showing a directional pixel wipe between dark and warm paper sections.

Top and bottom progressive blur overlays that stack multiple backdrop-filter layers to produce a smooth edge-to-transparent blur effect.

Scrollable content with progressive blur overlays at the top and bottom edges.

A motion-enhanced multi-step questionnaire with animated checkpoints, direction-aware blur transitions, validation, and keyboard shortcuts.

A four-step onboarding questionnaire demonstrating animated checkpoints, multiple answer types, and explicit skip.

An icon button that spins on click and supports async refresh callbacks — ideal for reloading component previews or live data.

(No description)

A button that animates on tap with a ripple effect.

A rolling text animation.

A rotating text animation.

A text animation component that reveals characters with a scramble/glitch effect, with imperative controls for manual triggering.

Interactive demo cycling through phrases with a character-scramble reveal animation.

A scrolling number animation.

A scroll progress component that allows you to track the progress of a scrollable element.

Scroll-driven image reveal with spring-physics width expansion, zoom-out, and border radius animation.

Demo of the scroll-driven image reveal with spring physics.

A shimmering text animation.

Animated gradient shimmer text with viewport-triggered and repeating animation support.

Cycling shimmer text with AnimatePresence transitions.

Lightweight loading skeleton with a smooth shimmer sweep animation.

Card-shaped skeleton layout with shimmer animation.

An animated light sweep effect with configurable timing, colors, and triggers (hover, tap, or continuous).

Animated vertical sidebar with spring hover highlight, active indicator bar, and per-item dash pattern.

Demo showing the Sidebar 001 animated vertical sidebar.

Slide-in overlay sidebar with spring animation, animated dash items, and cursor-following video preview.

Demo showing the Sidebar 002 slide-in overlay sidebar.

Animated SVG icon that morphs between open and closed sidebar panel states using Motion path interpolation.

Animated SVG icon that morphs between open and closed sidebar states on click.

An image comparison slider with a spring-animated divider that follows the cursor on hover, revealing before/after images.

Image comparison slider showing before/after with configurable divider and handle.

An effect that allows you to animate elements with a slide effect on first view or load.

Animated slider with spring-snapped thumb, step dots, range mode, and click-to-edit value display. Built on Radix UI Slider.

Three sliders showing volume, brightness and opacity controls with click-to-edit values.

Range sliders for price, temperature and year selection with dual spring-snapped thumbs.

Sliders with visible step dots for rating, quality and zoom level selection.

A sliding number animation.

Per-character blur-slide animation with direct value changes and no animation queue.

Stepped add and subtract demo showcasing direct per-character blur-slide animation.

A row of social links with a shared morphing preview card and direction-aware content transitions.

Configurable GitHub, message, email, and X cards in a shared morphing viewport.

A splitting text animation.

A flexible, animated spring component that attaches a draggable element to its origin with a spring line.

An interactive grid background where squares randomly light up with colors and react to hover.

Demo showing the Square Pattern Background component.

A two-column section with a sticky animated hero card on the left and a stack of rotating feature cards on the right.