React UI Components & Examples

01

Componentsopen source

Signature

An animated SVG signature effect that draws out text as if hand-written.

by Componentry0React · TypeScriptSource

2

02

Componentsfree

Scroll Progress

A scroll progress pill that tracks reading position and expands into a squircle menu of page sections.

by Rare UI0React · TypeScriptSource

2

03

Componentsfree

Bounce sidebar

A vertical navigation list with a bouncy, spring-animated active indicator.

by Rare UI0React · TypeScriptSource

2

04

Componentsfree

OTP Input

A one-time-code input whose characters roll into place behind a caret that slides from slot to slot.

by Rare UI0React · TypeScriptSource

2

05

Componentsfree

PullCord

A cloth cord that really hangs. Pull it to switch the lights.

by FeralUI0React · TypeScriptSource

1

06

Componentsopen source

Scroll Choreography

A smooth, scroll-driven image choreography component using Framer Motion.

by Componentry0React · TypeScriptSource

1

07

Text Animationsopen source

Kinetic Text Reveal

Directional text reveal with soft blur and configurable word, character, or line stagger timing.

by Componentry0React · TypeScriptSource

1

08

Componentsopen source

Orbit Card Stack

Premium hover card deck that fans outward and lifts the active card without changing its color or angle.

by Componentry0React · TypeScriptSource

1

09

Componentsfree

Pixel scan

Pixel scan is an animated canvas study published directly in the Vault gallery.

by Vault0React · TypeScriptSource

1

10

Componentsfree

Folder component

An animated folder whose cards fan out on hover and lift open on click, with a 3D-tilted flap. Supports color and size props.

by Rare UI0React · TypeScriptSource

1

11

Componentsfree

Fluid Orb

An animated WebGL orb with drifting fluid shading, inspired by ChatGPT's voice mode.

by Rare UI0React · TypeScriptSource

1

12

Componentsfree

Gravity Letters

A playful gravity field where letters, numbers, emoji, or custom components fall and pile up like physical objects.

by Rare UI0React · TypeScriptSource

1

13

Componentsopen source

Scroll Tilted Grid

A cinematic image grid that tilts and resolves into focus as each frame crosses the viewport.

by Componentry0React · TypeScriptSource

1

14

Visual Effectsopen source

Image Trail

Leaves a trail of images behind the cursor with a premium delay fade.

by Componentry0React · TypeScriptSource

1

15

Componentsopen source

Collection Surfer

Smooth surfing interaction for browsing collections.

by Componentry0React · TypeScriptSource

1

16

Componentsfree

Proximity Sidebar

An interactive sidebar with proximity hover effects that appears while scrolling and responds to scroll intensity.

by Rare UI0React · TypeScriptSource

1

17

Componentsfree

Code Block

A code block that derives its full syntax theme from one accent color and includes animated copy feedback.

by Rare UI0React · TypeScriptSource

1

18

Componentsfree

Duration Picker

A gooey, spring-animated picker for entering a duration in hours and minutes.

by Rare UI0React · TypeScriptSource

1

19

Componentsopen source

Text Rotate

A text component that switches the rendered text from a list.

by Fancy Components0React · TypeScriptSource

1

20

Componentsfree

Weight Hover

Weight Hover is a polished text component from Originkit with a provider-published motion preview.

by Originkit0Framer · ReactSource

0

21

Componentsopen source

Swirl

Concentric bands swirling around a center point

by Remocn0React · TypeScriptSource

0

22

Componentsfree

Rising Lines

Rising Lines is a polished motion component from Originkit with a provider-published motion preview.

by Originkit0Framer · ReactSource

0

23

Componentsfree

Liquid Distortion

Liquid Distortion is a polished image component from Originkit with a provider-published motion preview.

by Originkit0Framer · ReactSource

0

24

Componentsfree

Spray burst

Spray burst is an animated canvas study published directly in the Vault gallery.

by Vault0React · TypeScriptSource

0

25

Componentsopen source

Underline To Background

A text component that animates a text underline into a text background.

by Fancy Components0React · TypeScriptSource

0

26

Componentsfree

Swipe Stack

Swipe Stack is a polished image gallery component from Originkit with a provider-published motion preview.

by Originkit0Framer · ReactSource

0

27

Componentsfree

Mechanical Keyboard

Full Mac keyboard with tactile depth-button keycaps — lifts on hover, snaps on press, plays synthesised mechanical click sounds.

by Mellow UI0React · TypeScriptSource

0

28

Componentsopen source

Hand Count

A number that counts up in stop-motion poses, rewritten by hand at every pose

by Remocn0React · TypeScriptSource

0

29

Componentsfree

Fluid Trail

Fluid Trail is a polished cursor component from Originkit with a provider-published motion preview.

by Originkit0Framer · ReactSource

0

30

Componentsopen source

Text Cursor Proximity

A text component that animates the letters based on the cursor proximity

by Fancy Components0React · TypeScriptSource

0

31

Componentsfree

Infinity Canvas

Infinity Canvas is a polished image gallery component from Originkit with a provider-published motion preview.

by Originkit0Framer · ReactSource

0

32

Componentsfree

Focus Button

A collection of interactive and animated buttons for your applications.

by Chamaac UI0React · TypeScriptSource

0

33

Componentsfree

Reactive Grid

Reactive Grid is a polished motion component from Originkit with a provider-published motion preview.

by Originkit0Framer · ReactSource

0

34

Componentsopen source

Chromatic Wave

A soft wave travels down through the type; where it crosses, the letters ripple and split into RGB fringes, then settle back to white

by Remocn0React · TypeScriptSource

0

35

Componentsfree

Popcorn Text

Popcorn Text is a polished text component from Originkit with a provider-published motion preview.

by Originkit0Framer · ReactSource

0

36

Componentsfree

Wave Arcs

Wave Arcs is a polished motion component from Originkit with a provider-published motion preview.

by Originkit0Framer · ReactSource

0

37

Componentsfree

Image Spotlight

Image Spotlight is a polished image component from Originkit with a provider-published motion preview.

by Originkit0Framer · ReactSource

0

38

Componentsfree

Text Distortion

Text Distortion is a polished text component from Originkit with a provider-published motion preview.

by Originkit0Framer · ReactSource

0

39

Componentsdemo only

Circular Text Slider

A radial typography slider that rotates design disciplines around a masked circular track.

by Maze0React · JavaScriptSource

0

40

Componentsopen source

Bars Spinner

A loading spinner with rotating bars animation.

by Spell UI0React · TypeScriptSource

0

41

Componentsopen source

Marker Highlight

A colored marker block draws behind a phrase while the text color shifts

by Remocn0React · TypeScriptSource

0

42

Componentsopen source

Pricing Card

A focused pricing card layout with clear hierarchy, period switching, and animated price transitions.

by uselayouts0React · TypeScriptSource

0

43

Componentsfree

Flicker Text

Flicker Text is a polished text component from Originkit with a provider-published motion preview.

by Originkit0Framer · ReactSource

0

44

Componentsfree

Spotlight Text

Spotlight Text is a polished text component from Originkit with a provider-published motion preview.

by Originkit0Framer · ReactSource

0

45

Componentsfree

Emoji Particle

Emoji Particle is a polished text component from Originkit with a provider-published motion preview.

by Originkit0Framer · ReactSource

0

46

Componentsfree

Ransom note

A typeable ransom-note generator that assembles words from real cutout letter scraps with randomized tilt, bounce, and size.

by Vault0React · TypeScriptSource

0

47

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

48

Componentsopen source

Variable Font Cursor Proximity

A text component that animates the font variation settings of letters based on the cursor proximity. Works only with variable fonts.

by Fancy Components0React · TypeScriptSource

0

49

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

50

Componentsfree

Prism Grid

Prism Grid is a polished motion component from Originkit with a provider-published motion preview.

by Originkit0Framer · ReactSource

0