MIT-licensed · open source

Motion-first
interactions.

// Quiet surfaces, one champagne accent, three springs.
Copy the source, keep the code, ship the glow.

GitHub
Lumen consolelive

// drift — one soft breath in

Lumen
Glow

Built on a stack you already know

Library map

Build with Lumora.

Three focused paths for discovery — forge the interaction, tune the motion, and ship it through the registry.

npx lumora-ui@latest add [component]CLI
0Components
0Blocks
ReadyCLI status

Interaction Forge

Buttons + input trails

01 / 03

Component brief

Button kit

  • Hover glow
  • Press sink
  • Cursor trail

Button Kit

Hover, glow, press

Input Effects

Cursor, trail, keys

Motion Kernel

Type + tooltip signals

02 / 03
indexing

Motion Type

Flip, fade, morph

Tooltip Rails

Tooltip + marquee

Registry Composer

Layouts + install paths

03 / 03
Choose layer
Compose card
Preview scene
Ship ready
Copy CLI

Bento Layouts

Grid, bento, stack

Scene Fields

Rays, grids, lines

60 live componentsCopy-paste ready

Why Lumora

Built to feel finished.

Motion-first interaction patterns you won’t pull out of a templated kit — every surface composed, every gesture deliberate.

Components you won’t find templated

Live, cursor-aware surfaces with motion baked into the primitive — not bolted on after.

LIVEv1.0
Interactive CoreHover to expand →

Built with modern frameworks

A stack you already reach for, wired together so the pieces just click.

  • React
  • Next.js
  • TSTypeScript
  • Tailwind
  • Motion

Own the code, keep the glow

Every component is yours as source — fork it, theme it, ship it.

button.tsxtooltip.tsxslider.tsxdialog.tsxdock.tsxyour repo

Ship landing pages faster

Compose pre-built blocks and ship a polished page in an afternoon.

Ship in three commands

No registry account, no lock-in. Initialize, add the pieces you want, and compose.

  1. Initialize

    Wire up tokens, the motion springs, and the cn helper in one pass.

    terminal
    npx lumora-ui@latest init

  2. Add what you need

    Components land as source in your repo — own the code from minute one.

    terminal
    npx lumora-ui@latest add button hero command-menu

  3. Compose

    Import and arrange. The props are shaped like your content.

    app/page.tsx
    import { Hero } from "@lumora/ui/blocks/hero";

export default function Page() {
  return <Hero headline="Ship the glow" />;
}

Loved in the quiet hours

Notes from teams shipping with Lumora — occasionally past midnight.

“We replaced four animation utilities and a folder of one-off easings with three springs. The site finally moves like one product.”
Linnea HartDesign engineer, Tidemark
“The CLI dropped the source into our repo and that was the whole migration. Two weeks later we'd themed it beyond recognition.”
Dario FerreyraFrontend lead, Casavela
“Reduced motion isn't an afterthought here — the marquee literally becomes a grid. Our audit passed on the first run.”
Greta NylundAccessibility lead, Murmur
“I added the command menu before lunch and it felt native by the afternoon. Fuzzy search, focus restore, the lot.”
Sofia BrandtProduct engineer, Hollowav

Turn the lights on

Install the library, open the gallery, and ship a page that glows tonight.