EmptyScene

A small drawing for an EmptyState: soft shapes with a thin rim, and one detail in the accent color.

import { EmptyScene } from '@adecore/ui';

import { Button, EmptyScene, EmptyState } from '@adecore/ui';

export default function EmptySceneDemo() {
    return (
        <EmptyState
            scene={
                <EmptyScene>
                    <g className="scene-loop">
                        <g className="scene-lift">
                            <rect className="scene-shape" x="30" y="8" width="100" height="88" rx="10" />
                        </g>
                        <path className="scene-text scene-type-1" pathLength={1} d="M48 30h64" />
                        <path className="scene-text scene-type-3" pathLength={1} d="M48 50h48" />
                        <circle className="scene-accent scene-reveal-6" cx="104" cy="74" r="8" />
                    </g>
                </EmptyScene>
            }
            title="No tasks yet"
            action={
                <Button variant="secondary" size="sm">
                    Create a task
                </Button>
            }
            className="w-full max-w-md rounded-lg border border-border bg-surface"
        >
            A task you create shows up here.
        </EmptyState>
    );
}

Its children are SVG in a 160 by 104 view box. compact draws it at 136 by 88 pixels, for a panel. The drawing is decoration, so it stays out of the accessibility tree.

Classes

Class	Draws
scene-shape	A surface with the gradient and the rim.
scene-lift	A soft shadow on a group of shapes.
scene-edge	A thin line on a surface.
scene-inset	A sunken part of a surface.
scene-line	A line between shapes.
scene-text	A thick line that stands for text.
scene-hand	A clock hand.
scene-dot	A neutral dot.
scene-accent	The one detail in the accent color, filled.
scene-accent-line	The same detail as a line.
scene-cursor	A pointer.

Motion

A scene plays one action on a loop of 8 seconds and stands still at the end of it. Without an animation class, a shape shows that end, so reduced motion needs nothing of its own.

Class	Plays
scene-loop	Fades a group in and out around the loop.
scene-reveal-0 to scene-reveal-12	A shape lands, one step of the loop after the other.
scene-stroke-0 to scene-stroke-12	A path draws itself. Set pathLength={1}.
scene-type-0 to scene-type-12	A path appears in steps, like typed text. Set pathLength={1}.

--scene-arrive is the easing of what lands, for the animations of your own.

Props

Prop	Type	Default
children	ReactNode		Required. SVG.
compact	boolean	false	136 by 88 pixels.
className	string

EmptySceneProps is an exported type.