Mellow UI: UI Components & Source

01

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

02

Componentsfree

Card Fan

A hand of cards fanned in an arc — hover one and it straightens and rises out of the fan while its neighbours part in sympathy.

by Mellow UI0React · TypeScriptSource

0

03

Componentsfree

Springy Text

Words fall into place with individual spring physics on scroll enter, drop away downward on exit.

by Mellow UI0React · TypeScriptSource

0

04

Componentsfree

Particle Word

A word sampled into thousands of ink particles that spring-assemble on mount, drift with organic noise, and scatter away from the cursor.

by Mellow UI0React · TypeScriptSource

0

05

Componentsfree

Velocity Band

A typographic marquee whose drift speed and skew react to scroll velocity — rows alternate direction and lean into hard scrolls.

by Mellow UI0React · TypeScriptSource

0

06

Componentsfree

Gravity Tags

A physics playground for tags — chips rain in from above, land as capsule bodies, pile up, and can be grabbed and thrown with real inertia.

by Mellow UI0React · TypeScriptSource

0

07

Componentsfree

AI Input II

A rounded, motion-driven AI chat input — springy attachment menu with inline image previews, toggle pills that expand their label when active, a model selector…

by Mellow UI0React · TypeScriptSource

0

08

Componentsfree

Autumn Drift

A gnarled tree on a rocky outcrop in full fall color, swaying in wind and shedding leaves — the cursor is a gust that scatters them.

by Mellow UI0React · TypeScriptSource

0

09

Componentsfree

Depth Button

A tactile raised button with a fixed depth base — lifts on hover, snaps down on press.

by Mellow UI0React · TypeScriptSource

0

10

Componentsfree

Odometer Number

An odometer for stats and prices — each digit is a rolling column that springs to its target with a mechanical overshoot, left to right.

by Mellow UI0React · TypeScriptSource

0

11

Componentsfree

AI Input I

An editorial AI chat input — attachment dropdown for images and documents, web-search and deep-think toggles, a model selector, and a live character counter.

by Mellow UI0React · TypeScriptSource

0

12

Componentsfree

Encrypted Text Reveal

Characters scramble through random glyphs then resolve to the final text on scroll.

by Mellow UI0React · TypeScriptSource

0

13

Componentsfree

Streaming Text

An AI-response text renderer — tokens materialize out of a blur at stream pace, trailed by a blinking caret that vanishes on completion.

by Mellow UI0React · TypeScriptSource

0

14

Componentsfree

Toss Deck

A card deck with weight — drag the top card past the threshold and it flies off with a spin, then slips back under the pile.

by Mellow UI0React · TypeScriptSource

0

15

Componentsfree

Fisheye Dock

A macOS-style dock — icons swell under the cursor with a fisheye falloff, neighbours rising in sympathy, labels popping above on hover.

by Mellow UI0React · TypeScriptSource

0

16

Componentsfree

Combination Text

A mechanical combination lock that spins through characters to form words.

by Mellow UI0React · TypeScriptSource

0

17

Componentsfree

Aurora Veil

An aurora borealis background — noise-driven light curtains ripple and fold across the sky over twinkling stars; on light themes the same curtains render as so…

by Mellow UI0React · TypeScriptSource

0

18

Componentsfree

Tilt Button

A 3D button that tilts in perspective toward the cursor with a spring snap on press.

by Mellow UI0React · TypeScriptSource

0

19

Componentsfree

Spring Accordion

An editorial accordion — spring-driven height, answers that rise out of a blur, and an index numeral that ignites on open.

by Mellow UI0React · TypeScriptSource

0

20

Componentsfree

Flow Field Background

Curl noise vector field rendered as dense directional strokes — cursor parts the flow.

by Mellow UI0React · TypeScriptSource

0

21

Componentsfree

Voice Orb

A voice-assistant orb of concentric wobbling rings — idle breathes, listening reacts to amplitude, thinking swirls, and speaking folds the rings into a rotatin…

by Mellow UI0React · TypeScriptSource

0

22

Componentsfree

Depth Gallery

A scroll-scrubbed Z-flythrough — plates hang scattered in 3D space and the scrollbar is the dolly; far plates loom out of the fog, near ones sweep past the cam…

by Mellow UI0React · TypeScriptSource

0

23

Componentsfree

Phosphor Sweep Background

Rotating beam sweeps a dot grid, leaving dots to fade with phosphor-persistence decay.

by Mellow UI0React · TypeScriptSource

0

24

Componentsfree

Magnetic Button

A button that translates toward the cursor with spring physics, with the label counter-drifting to create a sense of mass.

by Mellow UI0React · TypeScriptSource

0

25

Componentsfree

Dither Spotlight

A WebGL cursor spotlight rendered as ordered halftone dots instead of a soft glow.

by Mellow UI0React · TypeScriptSource

0

26

Componentsfree

Word Reveal

A paragraph that reveals word-by-word as it scrolls through the viewport — ink rising to full strength, scrubbed directly to scroll position.

by Mellow UI0React · TypeScriptSource

0

27

Componentsfree

Specimen Carousel

An editorial carousel for type, product, or archive specimens with numbered tabs and hard snap motion.

by Mellow UI0React · TypeScriptSource

0

28

Componentsfree

Matrix Hero

Full-width hero section with cascading matrix rain and centered green-phosphor glow text.

by Mellow UI0React · TypeScriptSource

0

29

Componentsfree

Warp Grid Background

Canvas grid vertices displaced by evolving value noise — drifts continuously, or warps locally around the cursor.

by Mellow UI0React · TypeScriptSource

0

30

Componentsfree

Kinetic Wall

A grid of miniature analog clocks whose hands choreograph to spell words — inspired by kinetic clock installations.

by Mellow UI0React · TypeScriptSource

0

Mellow UI

Source specialties

30 Components

Mechanical Keyboard

Card Fan

Springy Text

Particle Word

Velocity Band

Gravity Tags

AI Input II

Autumn Drift

Depth Button

Odometer Number

AI Input I

Encrypted Text Reveal

Streaming Text

Toss Deck

Fisheye Dock

Combination Text

Aurora Veil

Tilt Button

Spring Accordion

Flow Field Background

Voice Orb

Depth Gallery

Phosphor Sweep Background

Magnetic Button

Dither Spotlight

Word Reveal

Specimen Carousel

Matrix Hero

Warp Grid Background

Kinetic Wall