ObsidianUI: UI Components & Source

01

Componentsfree

Colorful Cursor Aura

Three colored masks follow the pointer through bold typography with staggered easing.

by ObsidianUI0React · TypeScriptSource

0

02

Componentsfree

Rectangular Text Reveal

Colored rectangles sweep across each line before revealing the text underneath.

by ObsidianUI0React · TypeScriptSource

0

03

Componentsfree

Book Flip

A tactile 3D book with bending pages, realistic light, and interactive page turns.

by ObsidianUI0React · TypeScriptSource

0

04

Componentsfree

Marquee on SVG Path

Images follow a looping SVG curve with drag momentum and scroll-responsive speed.

by ObsidianUI0React · TypeScriptSource

0

05

Componentsfree

Hover Image

A stunning hover-based image preview component. When users hover over project titles, a smooth mouse-following thumbnail appears showcasing the corresponding i…

by ObsidianUI0React · TypeScriptSource

0

06

Componentsfree

Interactive Arrows

Six canvas arrow and line patterns respond to the pointer with rotation, spacing, and opacity.

by ObsidianUI0React · TypeScriptSource

0

07

Componentsfree

Pixelated Carousel

An image carousel with a unique pixelated transition effect. Images dissolve into pixels and reassemble for the next slide.

by ObsidianUI0React · TypeScriptSource

0

08

Componentsfree

Hover Slider

An editorial list reveals a curved image stack with elastic image transitions.

by ObsidianUI0React · TypeScriptSource

0

09

Componentsfree

Arrow Fill Button

A rounded button with an expanding color fill and a sliding arrow on hover or keyboard focus.

by ObsidianUI0React · TypeScriptSource

0

10

Componentsfree

Interactive Blur Reveal

A frosted image becomes clear beneath a fluid cursor trail, with noise distortion and subtle grain.

by ObsidianUI0React · TypeScriptSource

0

11

Componentsfree

Draggable Marquee

A continuous image marquee with drag momentum and a seamless looping track.

by ObsidianUI0React · TypeScriptSource

0

12

Componentsfree

Text Stream

A continuous vertical text stream changes speed and direction with your scroll.

by ObsidianUI0React · TypeScriptSource

0

13

Componentsfree

Curved Plane

An image carousel whose edges curve and stretch with your drag and scroll velocity.

by ObsidianUI0React · TypeScriptSource

0

14

Componentsfree

Magnetic Image Trail

A cluster of images follows your cursor with magnetic momentum and a diagonal orbit.

by ObsidianUI0React · TypeScriptSource

0

15

Componentsfree

Dither Canvas

A video becomes a bright blue and cyan dither texture on white, with fluid distortion that follows your pointer.

by ObsidianUI0React · TypeScriptSource

0

16

Componentsfree

Text Fill Animation

A scroll-driven color sweep brings text into focus one character at a time.

by ObsidianUI0React · TypeScriptSource

0

17

Componentsfree

Rope Cursor

A smooth segmented rope follows the pointer with progressively delayed motion.

by ObsidianUI0React · TypeScriptSource

0

18

Componentsfree

Split Showcase

A split showcase component with two interactive partner cards separated by a dotted divider. Features outward spring shift on hover, expanding rounded corners,…

by ObsidianUI0React · TypeScriptSource

0

19

Componentsfree

Scroll Stack

Successive cards scale into focus and fade as the next section takes their place.

by ObsidianUI0React · TypeScriptSource

0

20

Componentsfree

Trading Card

A 3D interactive trading card with perspective transforms that respond to mouse movement. Features smooth reveal animations and a premium holographic feel.

by ObsidianUI0React · TypeScriptSource

0

21

Componentsfree

SVG Pixel Reveal

An SVG pixel filter dissolves into a crisp photograph as it enters the scroll area.

by ObsidianUI0React · TypeScriptSource

0

22

Componentsfree

Art Gallery

A lensed photo grid you can drag through, with barrel distortion and infinite tiled studies.

by ObsidianUI0React · TypeScriptSource

0

23

Componentsfree

Butterfly Trail Cursor

Animated butterflies lift away from the pointer with soft wing motion and fading trails.

by ObsidianUI0React · TypeScriptSource

0

24

Componentsfree

Jelly Loader

A beautiful loading animation with stacked, rotating elliptical shapes that create a mesmerizing jelly-like effect. Uses a gradient color palette from light pi…

by ObsidianUI0React · TypeScriptSource

0

25

Componentsfree

Fractal Glass

Glass strips refract an image with fractal distortion and pointer-driven parallax.

by ObsidianUI0React · TypeScriptSource

0

26

Componentsfree

Parallax Gallery

A framed gallery with rotating photographs, moving side thumbnails, and scroll snapping.

by ObsidianUI0React · TypeScriptSource

0

27

Componentsfree

Flip Text

An animated text component where each character flips and rotates on hover. Creates a playful, interactive typography effect.

by ObsidianUI0React · TypeScriptSource

0

28

Componentsfree

Dotted Grid

An animated dot field transforms between geometric shapes and responds to your cursor with a glowing trail.

by ObsidianUI0React · TypeScriptSource

0

29

Componentsfree

Grid Lift

A fine grid lifts into a dimensional text or SVG mask around your pointer.

by ObsidianUI0React · TypeScriptSource

0

ObsidianUI

Source specialties

29 Components

Colorful Cursor Aura

Rectangular Text Reveal

Book Flip

Marquee on SVG Path

Hover Image

Interactive Arrows

Pixelated Carousel

Hover Slider

Arrow Fill Button

Interactive Blur Reveal

Draggable Marquee

Text Stream

Curved Plane

Magnetic Image Trail

Dither Canvas

Text Fill Animation

Rope Cursor

Split Showcase

Scroll Stack

Trading Card

SVG Pixel Reveal

Art Gallery

Butterfly Trail Cursor

Jelly Loader

Fractal Glass

Parallax Gallery

Flip Text

Dotted Grid

Grid Lift