Velora

Velora UI/open source/React + Motion

Every AI product has a wait — an image rendering, an answer streaming, an agent working. Velora is a React library for those seconds: components that show the work happening, driven by your real progress. Copy the file and keep the source.

Browse componentsInstallation

01/What we do

We design the seconds your model spends working.

  1. 01

    Built for the wait

    Generation takes seconds. Velora fills them with something true — a picture taking shape, an answer arriving, an agent showing its steps — instead of a spinner that says nothing.

  2. 02

    Driven by real progress

    Every component takes one number. Pass your job's progress and it follows; leave it out and it runs a convincing pass on its own until your backend catches up.

  3. 03

    Copy the file, own the code

    No package and no version to track. Each component is one React file on Tailwind and Motion. Paste it in and change it the day your design does.

02/Available now

Image generation, three ways.

ImageGeneration resolves the picture out of noise. ImageMosaic sharpens it in levels. ImageTrace draws its contours. Pick one in the panel and watch it render.

Open the components
Generating
0%

Renderer

status
reading
prompt
01 / 03
seed
48213

03/Coming soon

Next on the bench. Every one for a moment your product already has.

  • In progress

    Token Stream

    Text

    Text that arrives at the model's pace — tokens resolving in, a caret that knows when it is waiting, and a clean settle when the answer is done.

  • In progress

    Thinking Trace

    Reasoning

    A reasoning indicator that shows each step as it happens, then folds itself away when the answer lands.

  • Planned

    Voice Orb

    Voice

    Listening, thinking and speaking states driven by the live audio level, so it moves because the voice does.

  • Planned

    Agent Timeline

    Agents

    Tool calls and actions appearing as a live, collapsible log — what the agent is doing, while it is doing it.

  • Planned

    Prompt Composer

    Input

    An input that grows, takes attachments and hands off to a loading state in one continuous motion.

  • More families follow — each one only once it has a behaviour worth copying into a real product.

04/Get started

Three steps, then it is yours.

Full installation guide
Step 1

Install four packages

Motion drives the animation; the rest back the class helper and one icon.

terminal
npm i motion clsx tailwind-merge lucide-react
Step 2

Copy the component

One file into your project, plus the CSS utilities it names.

your project
src/components/ui/image/image-generation.tsx
Step 3

Hand it your progress

One prop. Children are the finished image, revealed when the pass lands.

result.tsx
<ImageGeneration value={job.progress}>  <img src={job.url} alt={job.prompt} /></ImageGeneration>

05 / Start

Stop shipping spinners.

Browse componentsDocs
npm i motion clsx tailwind-merge lucide-react