SceneIllustration

Stable

An animated scene for empty, waiting, trust and success moments, told with objects and one lime shape.

Also known as animation, lottie, animated illustration

Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.

Start your first chat

Nothing is here yet. Ask a question or add a file to begin.

import firstUse from "@tattva/ui/scenes/first-use.json";

<EmptyState
  variant="first-use"
  art={<SceneIllustration data={firstUse} size="sm" />}
  action={<Button>Ask a question</Button>}
/>

Put the scene in EmptyState's art slot. The words say what happened; the scene sets the tone.

Usage Code Design Accessibility

When to use it

A larger, moving picture for the moments that matter in an AI product: the first message, waiting, asking first, showing sources, a polite no, done. It helps people read the moment at a glance.

Made of: Lime shape that shows part of the story · Objects in dark line on light fill · Solid dark accents

Use it for

The art slot of an EmptyState on a full page or a large panel.
Onboarding, first-use and success screens.
Explaining an AI moment, such as asking before acting or showing sources, on a page or in a guide.

Not for

Small areas, dense panels or lists: use Illustration.
A heading or a list of features: use Pictogram.
A spinner while something loads for a second or two: use Spinner.

Do and avoid

Your report is on its way.

Do. One scene sets the tone and the words say what is happening.

Avoid. Two scenes side by side compete and say nothing on their own.

Do

Use a scene to support the words on a screen, never to replace them.
Pick the scene whose story matches the message, so the picture and the words agree.
Show at most one moving scene on a screen.
Use the still picture on busy pages and in long lists.

Avoid

Do not use a scene where a spinner or a short status line is enough.
Do not recolour scenes. They take their colours from the theme so dark mode works.
Do not put two moving scenes next to each other.
Do not add text inside a scene. Put the words beside it.

On a phone

Choose size sm or fill on a phone; the height follows at four by three.
The scene is not tappable and has no text, so nothing changes on touch screens.
It pauses while scrolled out of view, which saves battery.

Seen in products

Atlassian's illustration guidance gives each spot illustration one job and says illustration should support copy rather than replace it.
The WCAG 2.2 success criterion on animation from interactions asks that motion can be turned off; this part follows the reduced motion setting.
Lottie is an open JSON format for vector animation, played by lottie-web on the web and by native players on iOS and Android.

Properties

Prop	Type	Default	Description
data	object	none	The scene's Lottie data, for example imported from @tattva/ui/scenes/<name>.json.
src	string	none	Address of a scene's Lottie file. Used when data is not given.
label	string	none	Accessible name. Without it the scene is hidden from assistive tech.
motion	"loop" \| "once" \| "still"	"loop"	Entrance then a calm loop, entrance only, or the finished picture. Reduced motion always shows the still picture.
size	"sm" \| "md" \| "lg" \| "fill"	"md"	Width 12rem, 18rem, 30rem or the container's width. Height follows at 4:3.
className	string	none	Extra classes for the scene's box.

"Show code under the preview gives the code for the example on the stage."

Tokens

Change one of these and every part that uses it follows.

--fg
--surface
--lime

In an empty screen