unlumen UI: UI Components & Source

01

Animationsmixed

Cursor Image Trail

A trail of images that follows the cursor with fade, scale, and rotation animations powered by Motion.

by unlumen UI0React · TypeScriptSource

0

02

Marketingmixed

Vertical Marquee

Two columns of tweet cards scrolling vertically in opposite directions with a progressive fade at the top and bottom edges.

by unlumen UI0React · TypeScriptSource

0

03

Image Effectsmixed

Orbital Image Wheel

Scroll-driven half-wheel image layout pinned to the bottom area of the viewport, with GSAP focus effects and animated active captions.

by unlumen UI0React · TypeScriptSource

0

04

Backgrounds & Shadersmixed

Square Pattern

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

by unlumen UI0React · TypeScriptSource

0

05

Navigationmixed

Dock

macOS-style animated dock with Gaussian neighbor icon magnification driven by spring physics.

by unlumen UI0React · TypeScriptSource

0

06

Navigationmixed

Notion Floating Action Menu

A faithful Notion-inspired quick-create menu with a compact action panel and an animated compose-to-close interaction.

by unlumen UI0React · TypeScriptSource

0

07

Marketingmixed

Inline Testimonials

Testimonials rendered as inline flowing text with circular avatars. Hover any quote to blur the others and reveal the author's name and role.

by unlumen UI0React · TypeScriptSource

0

08

Animationsmixed

Pinned List

A list of items that animate smoothly to a pinned section using Framer Motion layout animations.

by unlumen UI0React · TypeScriptSource

0

09

Animationsmixed

Motion FAQs Accordion

A clean Motion-powered FAQ accordion with spring-animated content reveal.

by unlumen UI0React · TypeScriptSource

0

10

Animationsmixed

Video Slider

A custom video player with an animated scrubber, drag-to-seek with pointer capture, hover time preview, and optional edge-stretch rail effect.

by unlumen UI0React · TypeScriptSource

0

11

Animationsmixed

Notion Mention Link

A Notion-inspired rich link mention with a securely fetched URL preview on hover.

by unlumen UI0React · TypeScriptSource

0

12

Animationsmixed

Vercel Snap Text

A scroll-driven text list that snaps exactly to each item. The active item scales up with an optional prefix, others fade and indent — all animated with Motion…

by unlumen UI0React · TypeScriptSource

0

13

Animationsmixed

Stacked Feature Cards

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

by unlumen UI0React · TypeScriptSource

0

14

Animationsmixed

GitHub Graph

A living GitHub contribution graph for portfolios, powered by a single username.

by unlumen UI0React · TypeScriptSource

0

15

Navigationmixed

Expandable Navbar

A full-width fixed header with velocity-highlight hover, an expanding inline dropdown that grows the navbar height, scroll hide/show, and a mobile circle-revea…

by unlumen UI0React · TypeScriptSource

0

16

Navigationmixed

Sidebar 002

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

by unlumen UI0React · TypeScriptSource

0

17

Navigationmixed

Gooey Navbar Menu

A spring-animated navbar menu with a gooey SVG-filtered background that connects the active trigger and dropdown panel.

by unlumen UI0React · TypeScriptSource

0

18

Animationsmixed

Team Stack

A stacked deck of team member cards that fans out on hover (desktop) or tap (mobile), with spring-animated CTA pills and deterministic jitter for a natural pil…

by unlumen UI0React · TypeScriptSource

0

19

Marketingmixed

Social Hover Cards

Social and contact actions with a shared morphing card, direction-aware transitions, and interactive content.

by unlumen UI0React · TypeScriptSource

0

20

Backgrounds & Shadersmixed

Pixel Liquid Background

A full Navier-Stokes fluid simulation background with pixelation, Bayer dithering, film-grain noise, and auto-demo mode. Reacts to cursor movement.

by unlumen UI0React · TypeScriptSource

0

21

Backgrounds & Shadersmixed

Pixel Background

An interactive background featuring tiny pixel particles that ripple outward from the center on hover, then fade away.

by unlumen UI0React · TypeScriptSource

0

22

Animationsmixed

Hover Feature Cards

A responsive grid of feature cards where a description panel slides in from below on hover, with spring animation and optional image support.

by unlumen UI0React · TypeScriptSource

0

23

Animationsmixed

Tilt Card

A card with 3D spring tilt, optional floating image, badge and radial shine on hover.

by unlumen UI0React · TypeScriptSource

0

24

Navigationmixed

Floating Navbar

A sticky floating pill navbar with scroll-velocity spring physics, dropdown menus, mobile overlay, and optional theme toggle.

by unlumen UI0React · TypeScriptSource

0

25

Marketingmixed

Aurora Card

Aurora-blur pricing card with a configurable hero area, layout hooks, and customizable shader controls.

by unlumen UI0React · TypeScriptSource

0

26

Animationsmixed

Youtube Video Ambient

A video player with real-time ambient glow that mirrors the colors playing — just like YouTube's ambient mode.

by unlumen UI0React · TypeScriptSource

0

27

Animationsmixed

Apple Switch

Animated toggle switch inspired by iOS, with draggable thumb, liquid press feedback, spring physics, size presets, and tone variants.

by unlumen UI0React · TypeScriptSource

0

28

Backgrounds & Shadersmixed

Aurora Bars

Animated bars with aurora-inspired gradient effects and smooth transitions.

by unlumen UI0React · TypeScriptSource

0

29

Backgrounds & Shadersmixed

Wave Background

A morphing SVG wave divider with scroll-driven morphing and ambient looping animation. Use it between page sections, as a card accent, or as a full-width trans…

by unlumen UI0React · TypeScriptSource

0

30

Animationsmixed

Matrix

An LED dot matrix display component with SVG pixels, radial glow, animated presets, and a VU meter mode.

by unlumen UI0React · TypeScriptSource

0

31

Animationsmixed

File Tree

Animated file-tree component with spring folder expand/collapse, animated hover highlight, and automatic file-type icons.

by unlumen UI0React · TypeScriptSource

0

32

Animationsmixed

Side By Side Slide

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

by unlumen UI0React · TypeScriptSource

0

33

Iconsmixed

Cards View Icon

Four squares in a 2×2 grid that reorder via Motion layout animation when active, signaling a card view mode.

by unlumen UI0React · TypeScriptSource

0

34

Animationsmixed

Gooey SVG Filter

An SVG filter that creates a gooey, fluid merging effect on adjacent elements using Gaussian blur and alpha-channel color matrix manipulation.

by unlumen UI0React · TypeScriptSource

0

35

Animationsmixed

Dia Text Reveal

Animated text reveal with a colorful gradient sweep effect, inspired by the Dia app.

by unlumen UI0React · TypeScriptSource

0

36

Marketingmixed

Questionnaire

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

by unlumen UI0React · TypeScriptSource

0

37

Image Effectsmixed

Horizontal Depth Fade

Scroll-driven horizontal strip with images on a single line, cinematic blur focus, and brightness falloff.

by unlumen UI0React · TypeScriptSource

0

38

Backgrounds & Shadersmixed

Gravity Stars

Interactive canvas background with gravity-driven star particles, mouse attraction/repulsion, click-to-spawn, and star collisions.

by unlumen UI0React · TypeScriptSource

0

39

Iconsmixed

Sidebar Toggle Icon

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

by unlumen UI0React · TypeScriptSource

0

40

Animationsmixed

AI Chat

Animated chat interface with physics-based input, typing indicator, and aurora burst on send.

by unlumen UI0React · TypeScriptSource

0

41

Animationsmixed

Animated Input

A text input with per-character motion and a custom cursor that springs between typing and selection states.

by unlumen UI0React · TypeScriptSource

0

42

Iconsmixed

Compact View Icon

Six dots in a 3×2 grid that reorder via Motion layout animation when active, signaling a compact view mode.

by unlumen UI0React · TypeScriptSource

0

43

Navigationmixed

Motion Slide Menu

An animated React multi-level slide menu with recursive nested navigation, morphing category headers, and direction-aware transitions.

by unlumen UI0React · TypeScriptSource

0

44

Animationsmixed

Vercel Animate Count

A number display that animates transitions between values with a blur + slide effect.

by unlumen UI0React · TypeScriptSource

0

45

Animationsmixed

Animated List

A real-time push feed where new items animate in from the top with spring physics — Stripe Radar style.

by unlumen UI0React · TypeScriptSource

0

46

Animationsmixed

Favicon Search

A search input that fetches and smoothly animates the site favicon into the search bar as you type a URL.

by unlumen UI0React · TypeScriptSource

0

47

Animationsmixed

Hover Image List

A list of large headings that reveal an image on the left and shift right on hover, animated with Motion.

by unlumen UI0React · TypeScriptSource

0

48

Navigationmixed

Sidebar 001

Animated vertical sidebar with spring hover highlight, animated active bar, collapsible groups, and drag-to-resize.

by unlumen UI0React · TypeScriptSource

0

49

Animationsmixed

Animate Digits

Per-digit blur-slide animation with direction awareness — only the digits that change animate, sliding up when increasing and down when decreasing.

by unlumen UI0React · TypeScriptSource

0

50

Animationsmixed

Hover Expand

A vertical list of rows that expand on hover to reveal a full-width photograph, animated with Motion spring physics.

by unlumen UI0React · TypeScriptSource

0

unlumen UI

Source specialties

50 Components

Cursor Image Trail

Vertical Marquee

Orbital Image Wheel

Square Pattern

Dock

Notion Floating Action Menu

Inline Testimonials

Pinned List

Motion FAQs Accordion

Video Slider

Notion Mention Link

Vercel Snap Text

Stacked Feature Cards

GitHub Graph

Expandable Navbar

Sidebar 002

Gooey Navbar Menu

Team Stack

Social Hover Cards

Pixel Liquid Background

Pixel Background

Hover Feature Cards

Tilt Card

Floating Navbar

Aurora Card

Youtube Video Ambient

Apple Switch

Aurora Bars

Wave Background

Matrix

File Tree

Side By Side Slide

Cards View Icon

Gooey SVG Filter

Dia Text Reveal

Questionnaire

Horizontal Depth Fade

Gravity Stars

Sidebar Toggle Icon

AI Chat

Animated Input

Compact View Icon

Motion Slide Menu

Vercel Animate Count

Animated List

Favicon Search

Hover Image List

Sidebar 001

Animate Digits

Hover Expand