Animations

Motion scenes in SVG and CSS. Chats, cursors, dashboards and pages that build themselves.

4 components · 12 variants

Switch category

Chat scene

A conversation that writes itself. Typing dots, a composer that types and sends, cards inside messages. Nothing below ever jumps.

Customer chat
Assistant with sources
Booking in the chat

Props and details

Customer chat

A guest asks, the café answers. Quick replies appear at the end.

Installv1.0.2

aiw add @ai-website/chat-scene

Brings along utils, kit, motion-scene

Usage

<ChatScene title="Café Mira" messages={[{ from: "me", text: "…" }, { from: "them", text: "…" }]} replies={["Show the menu"]} />

Source

Assistant with sources

A question about a contract, an answer with a card of sources inside the message.

Installv1.0.2

aiw add @ai-website/chat-scene

Brings along utils, kit, motion-scene

Usage

<ChatScene messages={[{ from: "me", text: "…" }, { from: "them", text: "…", content: <Sources /> }]} />

Source

Booking in the chat

Times appear as buttons in the answer, the client picks one, the confirmation brings a calendar link.

Installv1.0.2

aiw add @ai-website/chat-scene

Brings along utils, kit, motion-scene

Usage

<ChatScene messages={[…, { from: "them", text: "…", content: <Slots /> }, { from: "me", text: "I take 14:00" }, …]} />

Source

cursor-scene

Cursor scene

A pointer works through an interface, and the interface answers on the same timeline. Shows a flow without a video.

Fill a form
Change settings
Drag a card

Props and details

Fill a form

Click into the field, the address types itself, the button turns into a spinner and a check, a toast confirms.

Installv1.0.0

aiw add @ai-website/cursor-scene

Brings along utils, kit, motion-scene

Usage

<CursorScene steps={[{ x: 140, y: 240, at: 1.4, click: true }, …]}><Typed at={1.7} text="…" /><Cue at={4.5} from="opacity:0" to="opacity:1">…</Cue></CursorScene>

Source

Change settings

Two switches flip, the billing pill slides to yearly and a badge appears, then Save turns into Saved.

Installv1.0.0

aiw add @ai-website/cursor-scene

Brings along utils, kit, motion-scene

Usage

<CursorScene steps={steps}><Cue at={1.35} from="transform:translateX(0)" to="transform:translateX(16px)" /></CursorScene>

Source

Drag a card

A named pointer lifts a card, carries it across the board and drops it. The counters update, the column closes the gap.

Installv1.0.0

aiw add @ai-website/cursor-scene

Brings along utils, kit, motion-scene

Usage

<CursorScene name="Lena" steps={steps}><Track frames={[[1.55, "…"], [3.1, "transform:translate(408px,104px)"]]}>…</Track></CursorScene>

Source

dashboard-build

Dashboard build

A dashboard that puts itself together in view: cards rise, numbers count, the line draws, bars grow, the ring fills. "live" keeps it streaming.

Analytics
Finance
Live

Props and details

Analytics

Four KPIs, a revenue line and bookings per weekday.

Installv1.0.1

aiw add @ai-website/dashboard-build

Brings along utils, kit, number-ticker, motion-scene

Usage

<DashboardBuild title="Overview" kpis={kpis} series={revenue} bars={bookings} barAxis={["M", …]} />

Source

Finance

Balance line, a ring that fills segment by segment and the latest payments sliding in.

Installv1.0.1

aiw add @ai-website/dashboard-build

Brings along utils, kit, number-ticker, motion-scene

Usage

<DashboardBuild kpis={kpis} series={balance} segments={[{ label: "Team", value: 9800 }, …]} rows={payments} />

Source

Live

After the build the line keeps streaming, the bars breathe and a live dot pings. Pause it with the button.

Installv1.0.1

aiw add @ai-website/dashboard-build

Brings along utils, kit, number-ticker, motion-scene

Usage

<DashboardBuild live liveLabel="Live" series={visitors} bars={sales} … />

Source

page-assembly

Page assembly

Components lift out of a palette, fly to their place and land, until the page is complete and published. On its own or with the scroll.

Landing page
App screen
With the scroll

Props and details

Landing page

Five sections in reading order. Each one lifts, flies, lands with a flash and appears from the top.

Installv1.0.0

aiw add @ai-website/page-assembly

Brings along utils, kit, motion, motion-scene

Usage

<PageAssembly preset="landing" url="atlas-outdoor.com" />

Source

App screen

Six widgets build a dashboard, the sidebar first, the table last.

Installv1.0.0

aiw add @ai-website/page-assembly

Brings along utils, kit, motion, motion-scene

Usage

<PageAssembly preset="app" url="app.northwind.io" speed={1.1} />

Source

With the scroll

Every component lands in its own stretch of the scroll and flies back when you scroll up.

Installv1.0.0

aiw add @ai-website/page-assembly

Brings along utils, kit, motion, motion-scene

Usage

<PageAssembly preset="landing" mode="scroll" />

Source

Similar components

More from Visuals, the same area of the kit.

Often combined with

Sections that usually sit next to Animations on a page.

On this page

Customer chat

Assistant with sources

Booking in the chat

Fill a form

Change settings

Drag a card

Analytics

Finance

Live

Landing page

App screen

With the scroll

Similar components, Often combined with

Similar components

Often combined with